"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MixinsStackee = exports.FloatingLabelMaskedInput = exports.FloatingLabelError = exports.FloatingLabelPasswordDisabled = exports.FloatingLabelMaskedPassword = exports.FloatingLabelPassword = exports.FloatingLabelText = exports.MixinsMarginOnlySpacing = exports.NoBorderDisabledLockIcon = exports.NoBorderDisabled = exports.NoBorder = exports.CurrencyMask = exports.Numeric = exports.PhoneNumberMask = exports.DateFormattingMaskIconRight = exports.DateFormattingMaskIconLeft = exports.DateFormattingMaskFocusOnMount = exports.DateFormattingMaskError = exports.DateFormattingMaskLarge = exports.DateFormattingMask = exports.WithExtendedStyles = exports.FocusOnMount = exports.ErrorArray = exports.ErrorString = exports.WithError = exports.WithErrorIcon = exports.WithIconRightDisabled = exports.WithCheckmarkIconRightLarge = exports.WithIconRight = exports.WithIconLeft = exports.WithValueDisabled = exports.WithButtonTextAndError = exports.WithButtonText = exports.SpecifyFontSize = exports.large = exports.Default = exports.PasswordSmall = exports.PasswordDisabled = exports.Password = exports.KitchenSinkLargeFloatingLabel = exports.KitchenSinkLargeHiddenLabelWithPlaceholder = exports.KitchenSinkLargeVisibleLabel = exports.KitchenSinkSmallHiddenLabelWithPlaceholder = exports.KitchenSinkSmallVisibleLabel = exports["default"] = void 0;

var _react = _interopRequireWildcard(require("react"));

var _lodash = require("lodash");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _addonActions = require("@storybook/addon-actions");

var _textInput = require("./text-input.component");

var _marginChecker = require("../../../mixins/spacing/story-support/margin-checker");

var _stackeeChecker = require("../../../mixins/stackee/story-support/stackee-checker");

var _textInput2 = _interopRequireDefault(require("./text-input.mdx"));

var _box = require("../../../primitives/box");

var _sectionHeader = require("../../typography/section-header");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var _default = {
  component: _textInput.TextInput,
  title: 'Components/Inputs/TextInput',
  parameters: {
    docs: {
      page: _textInput2["default"]
    }
  }
};
exports["default"] = _default;

var TextInputDemo = function TextInputDemo(_ref) {
  var value = _ref.value,
      large = _ref.large,
      iconType = _ref.iconType,
      iconPosition = _ref.iconPosition,
      label = _ref.label,
      hideLabel = _ref.hideLabel,
      placeholder = _ref.placeholder,
      onFocus = _ref.onFocus,
      onBlur = _ref.onBlur,
      disabled = _ref.disabled,
      error = _ref.error,
      focusOnMount = _ref.focusOnMount,
      fontSize = _ref.fontSize,
      mask = _ref.mask,
      maskOptions = _ref.maskOptions,
      _ref$className = _ref.className,
      className = _ref$className === void 0 ? '' : _ref$className,
      buttonText = _ref.buttonText,
      inputMode = _ref.inputMode,
      _ref$hideBorder = _ref.hideBorder,
      hideBorder = _ref$hideBorder === void 0 ? false : _ref$hideBorder,
      type = _ref.type,
      _ref$hideValueButtonL = _ref.hideValueButtonLabel,
      hideValueButtonLabel = _ref$hideValueButtonL === void 0 ? 'hide' : _ref$hideValueButtonL,
      _ref$revealValueButto = _ref.revealValueButtonLabel,
      revealValueButtonLabel = _ref$revealValueButto === void 0 ? 'show' : _ref$revealValueButto,
      floatLabel = _ref.floatLabel,
      spacing = _ref.spacing;

  var _useState = (0, _react.useState)(value),
      _useState2 = _slicedToArray(_useState, 2),
      demoValue = _useState2[0],
      setDemoValue = _useState2[1];

  return /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    label: label,
    onChange: setDemoValue,
    value: demoValue,
    iconType: iconType,
    iconPosition: iconPosition,
    placeholder: placeholder,
    onFocus: onFocus,
    onBlur: onBlur,
    large: large,
    disabled: disabled,
    error: error,
    focusOnMount: focusOnMount,
    fontSize: fontSize,
    className: className,
    mask: mask,
    maskOptions: maskOptions,
    buttonText: buttonText,
    inputMode: inputMode,
    hideBorder: hideBorder,
    type: type,
    hideValueButtonLabel: hideValueButtonLabel,
    revealValueButtonLabel: revealValueButtonLabel,
    floatLabel: floatLabel,
    hideLabel: hideLabel,
    spacing: spacing
  });
};

var TextInputVariants = function TextInputVariants(_ref2) {
  var type = _ref2.type,
      _ref2$hideLabel = _ref2.hideLabel,
      hideLabel = _ref2$hideLabel === void 0 ? false : _ref2$hideLabel,
      _ref2$floatLabel = _ref2.floatLabel,
      floatLabel = _ref2$floatLabel === void 0 ? false : _ref2$floatLabel,
      _ref2$large = _ref2.large,
      large = _ref2$large === void 0 ? false : _ref2$large;
  var variantName = (0, _lodash.startCase)(type);
  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
    spacing: "p2",
    basis: 450
  }, /*#__PURE__*/_react["default"].createElement(_sectionHeader.SectionHeader, null, /*#__PURE__*/_react["default"].createElement("p", null, "Type: ", variantName)), /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    key: type,
    label: "Label",
    hideLabel: hideLabel,
    floatLabel: floatLabel,
    placeholder: hideLabel ? 'Placeholder' : undefined,
    type: type,
    spacing: "m1",
    large: large
  }), /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    key: "".concat(type, "-disabled"),
    label: "Label",
    hideLabel: hideLabel,
    floatLabel: floatLabel,
    placeholder: hideLabel ? 'Placeholder' : undefined,
    type: type,
    spacing: "m1",
    disabled: true,
    large: large
  }), /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    key: "".concat(type, "-error"),
    label: "Label",
    hideLabel: hideLabel,
    floatLabel: floatLabel,
    placeholder: hideLabel ? 'Placeholder' : undefined,
    type: type,
    spacing: "m1",
    iconType: "lock",
    large: large
  }), /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    key: "".concat(type, "-error"),
    label: "Label",
    hideLabel: hideLabel,
    floatLabel: floatLabel,
    placeholder: hideLabel ? 'Placeholder' : undefined,
    type: type,
    spacing: "m1",
    iconType: "checkmark",
    large: large
  }), /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    key: "".concat(type, "-error"),
    label: "Label",
    hideLabel: hideLabel,
    floatLabel: floatLabel,
    placeholder: hideLabel ? 'Placeholder' : undefined,
    type: type,
    spacing: "m1",
    iconType: "lock",
    iconPosition: "left",
    large: large
  }), /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    key: "".concat(type, "-error"),
    label: "Label",
    hideLabel: hideLabel,
    floatLabel: floatLabel,
    placeholder: hideLabel ? 'Placeholder' : undefined,
    type: type,
    spacing: "m1",
    iconType: "checkmark",
    iconPosition: "left",
    large: large
  }), /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    key: "".concat(type, "-error"),
    label: "Label",
    hideLabel: hideLabel,
    floatLabel: floatLabel,
    placeholder: hideLabel ? 'Placeholder' : undefined,
    type: type,
    spacing: "m1",
    error: true,
    large: large
  }), /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    key: "".concat(type, "-error"),
    label: "Label",
    hideLabel: hideLabel,
    floatLabel: floatLabel,
    placeholder: hideLabel ? 'Placeholder' : undefined,
    type: type,
    spacing: "m1",
    iconType: "error",
    iconPosition: "left",
    large: large
  }), /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    key: "".concat(type, "-error-message"),
    label: "Label",
    hideLabel: hideLabel,
    floatLabel: floatLabel,
    placeholder: hideLabel ? 'Placeholder' : undefined,
    type: type,
    spacing: "m1",
    error: "Oh noes!",
    large: large
  }));
};

var KitchenSinkSmallVisibleLabel = function KitchenSinkSmallVisibleLabel() {
  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
    stacked: "row",
    wrap: true
  }, ['text', 'password', 'email', 'number', 'date'].map(function (type) {
    return /*#__PURE__*/_react["default"].createElement(TextInputVariants, {
      type: type
    });
  }));
};

exports.KitchenSinkSmallVisibleLabel = KitchenSinkSmallVisibleLabel;

var KitchenSinkSmallHiddenLabelWithPlaceholder = function KitchenSinkSmallHiddenLabelWithPlaceholder() {
  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
    stacked: "row",
    wrap: true
  }, ['text', 'password', 'email', 'number', 'date'].map(function (type) {
    return /*#__PURE__*/_react["default"].createElement(TextInputVariants, {
      type: type,
      hideLabel: true
    });
  }));
};

exports.KitchenSinkSmallHiddenLabelWithPlaceholder = KitchenSinkSmallHiddenLabelWithPlaceholder;

var KitchenSinkLargeVisibleLabel = function KitchenSinkLargeVisibleLabel() {
  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
    stacked: "row",
    wrap: true
  }, ['text', 'password', 'email', 'number', 'date'].map(function (type) {
    return /*#__PURE__*/_react["default"].createElement(TextInputVariants, {
      type: type,
      large: true
    });
  }));
};

exports.KitchenSinkLargeVisibleLabel = KitchenSinkLargeVisibleLabel;

var KitchenSinkLargeHiddenLabelWithPlaceholder = function KitchenSinkLargeHiddenLabelWithPlaceholder() {
  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
    stacked: "row",
    wrap: true
  }, ['text', 'password', 'email', 'number', 'date'].map(function (type) {
    return /*#__PURE__*/_react["default"].createElement(TextInputVariants, {
      type: type,
      hideLabel: true,
      large: true
    });
  }));
};

exports.KitchenSinkLargeHiddenLabelWithPlaceholder = KitchenSinkLargeHiddenLabelWithPlaceholder;

var KitchenSinkLargeFloatingLabel = function KitchenSinkLargeFloatingLabel() {
  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
    stacked: "row",
    wrap: true
  }, ['text', 'password', 'email', 'number', 'date'].map(function (type) {
    return /*#__PURE__*/_react["default"].createElement(_box.Box, null, /*#__PURE__*/_react["default"].createElement(TextInputVariants, {
      type: type,
      floatLabel: true,
      large: true
    }));
  }));
};

exports.KitchenSinkLargeFloatingLabel = KitchenSinkLargeFloatingLabel;
var StyledTextInputDemo = (0, _styledComponents["default"])(TextInputDemo).withConfig({
  displayName: "StyledTextInputDemo",
  componentId: "edhsav-0"
})(["width:400px;padding-right:25px;border:5px solid red;"]);

var Password = function Password() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Password",
    hideLabel: true,
    onChange: (0, _addonActions.action)('onChange'),
    value: "hunter2",
    placeholder: "Password",
    large: true,
    type: "password",
    hideValueButtonLabel: "hide password",
    revealValueButtonLabel: "reveal password"
  });
};

exports.Password = Password;

var PasswordDisabled = function PasswordDisabled() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Password",
    disabled: true,
    hideLabel: true,
    onChange: (0, _addonActions.action)('onChange'),
    value: "hunter2",
    placeholder: "Password",
    large: true,
    type: "password",
    hideValueButtonLabel: "hide password",
    revealValueButtonLabel: "reveal password"
  });
};

exports.PasswordDisabled = PasswordDisabled;

var PasswordSmall = function PasswordSmall() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Password",
    hideLabel: true,
    onChange: (0, _addonActions.action)('onChange'),
    value: "hunter2",
    placeholder: "Password",
    type: "password",
    hideValueButtonLabel: "hide password",
    revealValueButtonLabel: "reveal password"
  });
};

exports.PasswordSmall = PasswordSmall;

var Default = function Default() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Enter some text",
    onChange: (0, _addonActions.action)('onChange')
  });
};

exports.Default = Default;

var large = function large() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Enter some text",
    large: true,
    onChange: (0, _addonActions.action)('onChange')
  });
};

exports.large = large;

var SpecifyFontSize = function SpecifyFontSize() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Enter some text",
    onChange: (0, _addonActions.action)('onChange'),
    fontSize: "f5",
    large: true
  });
};

exports.SpecifyFontSize = SpecifyFontSize;

var WithButtonText = function WithButtonText() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Enter some text",
    onChange: (0, _addonActions.action)('onChange'),
    buttonText: "Show"
  });
};

exports.WithButtonText = WithButtonText;

var WithButtonTextAndError = function WithButtonTextAndError() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Enter some text",
    onChange: (0, _addonActions.action)('onChange'),
    buttonText: "Show",
    error: true
  });
};

exports.WithButtonTextAndError = WithButtonTextAndError;

var WithValueDisabled = function WithValueDisabled() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Omg a label",
    disabled: true,
    placeholder: "Look a placeholder that's really long!",
    value: "Wooo a value!",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur')
  });
};

exports.WithValueDisabled = WithValueDisabled;

var WithIconLeft = function WithIconLeft() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Omg a label",
    iconType: "lock",
    iconPosition: "left",
    placeholder: "Look a placeholder that's really long!",
    value: "Wooo a value!",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur')
  });
};

exports.WithIconLeft = WithIconLeft;

var WithIconRight = function WithIconRight() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Omg a label",
    iconType: "lock",
    iconPosition: "right",
    placeholder: "Look a placeholder that's really long!",
    value: "Wooo a value!",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur')
  });
};

exports.WithIconRight = WithIconRight;

var WithCheckmarkIconRightLarge = function WithCheckmarkIconRightLarge() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Omg a label",
    iconType: "checkmark",
    iconPosition: "right",
    placeholder: "Look a placeholder that's really long!",
    value: "Wooo a value!",
    large: true,
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur')
  });
};

exports.WithCheckmarkIconRightLarge = WithCheckmarkIconRightLarge;

var WithIconRightDisabled = function WithIconRightDisabled() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Omg a label",
    iconType: "lock",
    iconPosition: "right",
    disabled: true,
    placeholder: "Look a placeholder that's really long!",
    value: "Wooo a value!",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur')
  });
};

exports.WithIconRightDisabled = WithIconRightDisabled;

var WithErrorIcon = function WithErrorIcon() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Omg a label",
    iconType: "lock",
    iconPosition: "right",
    error: true,
    placeholder: "Look a placeholder that's really long!",
    value: "Wooo a value!",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur')
  });
};

exports.WithErrorIcon = WithErrorIcon;

var WithError = function WithError() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Omg a label",
    placeholder: "Look a placeholder that's really long!",
    value: "O no, an error",
    error: true,
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur')
  });
};

exports.WithError = WithError;

var ErrorString = function ErrorString() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Omg a label",
    placeholder: "Look a placeholder that's really long!",
    value: "O no, an error",
    error: "dangnamit I'm broken",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    large: true
  });
};

exports.ErrorString = ErrorString;

var ErrorArray = function ErrorArray() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Omg a label",
    placeholder: "Look a placeholder that's really long!",
    value: "O no, an error",
    error: ["dangnamit I'm broken", "dangnamit I'm broken"],
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    large: true
  });
};

exports.ErrorArray = ErrorArray;

var FocusOnMount = function FocusOnMount() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Omg a label",
    placeholder: "Look a placeholder that's really long!",
    value: "Your input here",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    focusOnMount: true
  });
};

exports.FocusOnMount = FocusOnMount;

var WithExtendedStyles = function WithExtendedStyles() {
  return /*#__PURE__*/_react["default"].createElement(StyledTextInputDemo, {
    label: "Omg a label",
    placeholder: "Look a placeholder that's really long!",
    value: "Your input here",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    focusOnMount: true
  });
};

exports.WithExtendedStyles = WithExtendedStyles;

var DateFormattingMask = function DateFormattingMask() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Enter a date",
    placeholder: "DD / MM / YYYY",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    mask: true,
    maskOptions: {
      date: true,
      datePattern: ['d', 'm', 'Y'],
      delimiter: ' / '
    }
  });
};

exports.DateFormattingMask = DateFormattingMask;

var DateFormattingMaskLarge = function DateFormattingMaskLarge() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Enter a date",
    placeholder: "DD / MM / YYYY",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    mask: true,
    maskOptions: {
      date: true,
      datePattern: ['d', 'm', 'Y'],
      delimiter: ' / '
    },
    large: true
  });
};

exports.DateFormattingMaskLarge = DateFormattingMaskLarge;

var DateFormattingMaskError = function DateFormattingMaskError() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Enter a date",
    placeholder: "DD / MM / YYYY",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    mask: true,
    maskOptions: {
      date: true,
      datePattern: ['d', 'm', 'Y'],
      delimiter: ' / '
    },
    error: "dangnamit I'm broken"
  });
};

exports.DateFormattingMaskError = DateFormattingMaskError;

var DateFormattingMaskFocusOnMount = function DateFormattingMaskFocusOnMount() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Enter a date",
    placeholder: "DD / MM / YYYY",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    mask: true,
    maskOptions: {
      date: true,
      datePattern: ['d', 'm', 'Y'],
      delimiter: ' / '
    },
    focusOnMount: true
  });
};

exports.DateFormattingMaskFocusOnMount = DateFormattingMaskFocusOnMount;

var DateFormattingMaskIconLeft = function DateFormattingMaskIconLeft() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Enter a date",
    placeholder: "DD / MM / YYYY",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    mask: true,
    maskOptions: {
      date: true,
      datePattern: ['d', 'm', 'Y'],
      delimiter: ' / '
    },
    iconType: "lock",
    iconPosition: "left"
  });
};

exports.DateFormattingMaskIconLeft = DateFormattingMaskIconLeft;

var DateFormattingMaskIconRight = function DateFormattingMaskIconRight() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Enter a date",
    placeholder: "DD / MM / YYYY",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    mask: true,
    maskOptions: {
      date: true,
      datePattern: ['d', 'm', 'Y'],
      delimiter: ' / '
    },
    iconType: "lock",
    iconPosition: "right"
  });
};

exports.DateFormattingMaskIconRight = DateFormattingMaskIconRight;

var PhoneNumberMask = function PhoneNumberMask() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Enter a phone number (CA)",
    placeholder: "555 444 3333",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    type: "number",
    mask: true,
    maskOptions: {
      phone: true,
      phoneRegionCode: 'CA'
    }
  });
};

exports.PhoneNumberMask = PhoneNumberMask;

var Numeric = function Numeric() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Enter a number",
    placeholder: "2",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    inputMode: "numeric",
    type: "number"
  });
};

exports.Numeric = Numeric;

var CurrencyMask = function CurrencyMask() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Enter a number",
    placeholder: "$0.00",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    mask: true,
    maskOptions: {
      numeral: true,
      prefix: '$',
      noImmediatePrefix: true,
      rawValueTrimPrefix: true
    },
    focusOnMount: false
  });
};

exports.CurrencyMask = CurrencyMask;

var NoBorder = function NoBorder() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Label",
    onChange: (0, _addonActions.action)('onChange'),
    hideBorder: true
  });
};

exports.NoBorder = NoBorder;

var NoBorderDisabled = function NoBorderDisabled() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Label",
    onChange: (0, _addonActions.action)('onChange'),
    hideBorder: true,
    disabled: true
  });
};

exports.NoBorderDisabled = NoBorderDisabled;

var NoBorderDisabledLockIcon = function NoBorderDisabledLockIcon() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Label",
    onChange: (0, _addonActions.action)('onChange'),
    hideBorder: true,
    disabled: true,
    iconType: "lock",
    iconPosition: "right"
  });
};

exports.NoBorderDisabledLockIcon = NoBorderDisabledLockIcon;

var MixinsMarginOnlySpacing = function MixinsMarginOnlySpacing() {
  return /*#__PURE__*/_react["default"].createElement(_marginChecker.MarginChecker, {
    Component: _textInput.TextInput,
    label: "Label",
    onChange: (0, _addonActions.action)('onChange')
  });
};

exports.MixinsMarginOnlySpacing = MixinsMarginOnlySpacing;

var FloatingLabelText = function FloatingLabelText() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "floating label!",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    type: "text",
    value: "",
    floatLabel: true
  });
};

exports.FloatingLabelText = FloatingLabelText;

var FloatingLabelPassword = function FloatingLabelPassword() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Password",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    type: "password",
    value: "",
    floatLabel: true,
    hideValueButtonLabel: "Hide",
    revealValueButtonLabel: "Show"
  });
};

exports.FloatingLabelPassword = FloatingLabelPassword;

var FloatingLabelMaskedPassword = function FloatingLabelMaskedPassword() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Password",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    type: "password",
    value: "",
    floatLabel: true,
    mask: true,
    maskOptions: {
      delimiter: ''
    },
    hideValueButtonLabel: "Hide",
    revealValueButtonLabel: "Show"
  });
};

exports.FloatingLabelMaskedPassword = FloatingLabelMaskedPassword;

var FloatingLabelPasswordDisabled = function FloatingLabelPasswordDisabled() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "Password",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    type: "password",
    value: "",
    floatLabel: true,
    hideValueButtonLabel: "Hide",
    revealValueButtonLabel: "Show",
    disabled: true
  });
};

exports.FloatingLabelPasswordDisabled = FloatingLabelPasswordDisabled;

var FloatingLabelError = function FloatingLabelError() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "floating label in error!",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    type: "email",
    value: "harry.potter@hogwartsfgdfgd",
    floatLabel: true,
    error: "that is not a valid hogwarts email address"
  });
};

exports.FloatingLabelError = FloatingLabelError;

var FloatingLabelMaskedInput = function FloatingLabelMaskedInput() {
  return /*#__PURE__*/_react["default"].createElement(TextInputDemo, {
    label: "floating label with mask",
    onChange: (0, _addonActions.action)('onChange'),
    onFocus: (0, _addonActions.action)('onFocus'),
    onBlur: (0, _addonActions.action)('onBlur'),
    type: "text",
    value: "",
    floatLabel: true,
    mask: true,
    maskOptions: {
      date: true,
      datePattern: ['d', 'm', 'Y'],
      delimiter: ' / '
    }
  });
};

exports.FloatingLabelMaskedInput = FloatingLabelMaskedInput;

var MixinsStackee = function MixinsStackee() {
  return /*#__PURE__*/_react["default"].createElement(_stackeeChecker.StackeeChecker, {
    Component: _textInput.TextInput,
    label: "Label",
    onChange: (0, _addonActions.action)('onChange')
  });
};

exports.MixinsStackee = MixinsStackee;