@artsy/palette 38.4.0 → 38.6.0

package/dist/elements/Input/Input.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Input = void 0;
 var _themeGet = require("@styled-system/theme-get");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _RequiredField = require("../../shared/RequiredField");
@@ -15,10 +15,9 @@ var _Text = require("../Text");
 var _Tooltip = require("../Tooltip");
 var _tokens = require("./tokens");
 var _helpers = require("../../helpers");
-var _excluded = ["children", "className", "description", "disabled", "error", "required", "focus", "hover", "title", "height", "labelOffset", "showCounter"];
+var _excluded = ["children", "className", "description", "disabled", "error", "required", "focus", "hover", "title", "height", "labelOffset", "showCounter", "defaultValue", "onChange"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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."); }
@@ -42,18 +41,23 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     height = _ref.height,
     labelOffset = _ref.labelOffset,
     showCounter = _ref.showCounter,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
+    onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _splitBoxProps = (0, _Box.splitBoxProps)(rest),
     _splitBoxProps2 = _slicedToArray(_splitBoxProps, 2),
     boxProps = _splitBoxProps2[0],
     inputProps = _splitBoxProps2[1];
-  var _React$useState = _react.default.useState(0),
+  var _React$useState = _react.default.useState(inputProps.value || defaultValue),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    charCount = _React$useState2[0],
-    setCharCount = _React$useState2[1];
-  var countChars = function countChars(e) {
-    setCharCount(e.target.value.length);
-  };
+    value = _React$useState2[0],
+    setValue = _React$useState2[1];
+  var handleChange = (0, _react.useCallback)(function (event) {
+    var nextValue = event.currentTarget.value;
+    setValue(nextValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+  }, [onChange]);
   return /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
     width: "100%",
     className: className
@@ -79,13 +83,8 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     name: inputProps.name,
     title: title,
     labelOffset: labelOffset,
-    onChange: function onChange(e) {
-      var _inputProps$onChange;
-      (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 ? void 0 : _inputProps$onChange.call(inputProps, e);
-      if (inputProps.maxLength) {
-        countChars(e);
-      }
-    },
+    defaultValue: defaultValue,
+    onChange: handleChange,
     placeholder: inputProps.placeholder || " "
   }, inputProps)), !!title && /*#__PURE__*/_react.default.createElement(StyledLabel, {
     labelOffset: labelOffset,
@@ -102,7 +101,7 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     variant: "xs",
     color: "black60",
     textAlign: "right"
-  }, charCount, "/", inputProps.maxLength)), error && typeof error === "string" && /*#__PURE__*/_react.default.createElement(_Text.Text, {
+  }, String(value).length, "/", inputProps.maxLength)), error && typeof error === "string" && /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "xs",
     mt: 0.5,
     ml: 1,

package/dist/elements/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["_themeGet","require","_react","_interopRequireDefault","_styledComponents","_interopRequireWildcard","_styledSystem","_RequiredField","_Box","_Text","_Tooltip","_tokens","_helpers","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Input","React","forwardRef","_ref","ref","children","className","description","disabled","error","required","focus","hover","title","height","labelOffset","showCounter","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","inputProps","_React$useState","useState","_React$useState2","charCount","setCharCount","countChars","e","createElement","Box","width","Tooltip","pointer","content","placement","Text","variant","color","textAlign","position","mt","StyledInput","onChange","_inputProps$onChange","maxLength","placeholder","StyledLabel","htmlFor","display","mx","RequiredField","flex","ml","exports","displayName","styled","input","withConfig","componentId","themeGet","systemHeight","props","css","INPUT_STATES","active","completed","label","FORM_ELEMENT_TRANSITION","_ref2"],"sources":["../../../src/elements/Input/Input.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { height as systemHeight } from \"styled-system\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { INPUT_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface InputProps\n  extends BoxProps,\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      \"size\" | \"width\" | \"height\" | \"capture\"\n    > {\n  active?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  required?: boolean\n  title?: string\n  labelOffset?: number\n  showCounter?: boolean\n}\n\n/** Input component */\nexport const Input: React.ForwardRefExoticComponent<\n  InputProps & { ref?: React.Ref<HTMLInputElement> }\n> = React.forwardRef(\n  (\n    {\n      children,\n      className,\n      description,\n      disabled,\n      error,\n      required,\n      focus,\n      hover,\n      title,\n      height,\n      labelOffset,\n      showCounter,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n    const [charCount, setCharCount] = React.useState(0)\n\n    const countChars = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setCharCount(e.target.value.length)\n    }\n\n    return (\n      <Box width=\"100%\" className={className} {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"black60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Box position=\"relative\" mt={!!title && !description ? 1 : 0}>\n          <StyledInput\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={!!error}\n            required={required}\n            height={(height ?? 50) as any}\n            name={inputProps.name}\n            title={title}\n            labelOffset={labelOffset}\n            onChange={(e) => {\n              inputProps.onChange?.(e)\n              if (inputProps.maxLength) {\n                countChars(e)\n              }\n            }}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel labelOffset={labelOffset} htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n\n          {children}\n        </Box>\n\n        {(required || (inputProps?.maxLength && showCounter)) &&\n          !(error && typeof error === \"string\") && (\n            <Box display=\"flex\" mt={0.5} mx={1}>\n              {required && <RequiredField disabled={disabled} flex={1} />}\n\n              {!!inputProps?.maxLength && showCounter && (\n                <Text flex={1} variant=\"xs\" color=\"black60\" textAlign=\"right\">\n                  {charCount}/{inputProps.maxLength}\n                </Text>\n              )}\n            </Box>\n          )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nInput.displayName = \"Input\"\n\ntype StyledInputProps = Pick<\n  InputProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\" | \"labelOffset\"\n>\n\nconst StyledInput = styled.input<StyledInputProps>`\n  width: 100%;\n  padding: 0 ${themeGet(\"space.1\")};\n  appearance: none;\n  line-height: 1;\n  border: 1px solid;\n  border-radius: 3px;\n  transition: border-color 0.25s, color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  ${systemHeight};\n\n  ::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${INPUT_STATES.default}\n      ${props.hover && INPUT_STATES.hover}\n      ${props.focus && INPUT_STATES.focus}\n      ${props.active && INPUT_STATES.active}\n      ${props.disabled && INPUT_STATES.disabled}\n      ${props.error && INPUT_STATES.error}\n\n      &:hover {\n        ${INPUT_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${INPUT_STATES.completed}\n        ${props.error && INPUT_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${INPUT_STATES.focus}\n\n        :not(:placeholder-shown) {\n          ${INPUT_STATES.active}\n          ${props.error && INPUT_STATES.error}\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${INPUT_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        ::placeholder {\n          opacity: 0;\n        }\n      `}\n    `\n  }};\n`\n\nconst StyledLabel = styled.label<StyledInputProps>`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n\n  & > span {\n    background-color: ${themeGet(\"colors.white100\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n\n  ${({ labelOffset }) =>\n    !!labelOffset &&\n    css`\n      padding-left: ${labelOffset - 5}px;\n    `}\n`\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_styledSystem","_RequiredField","_Box","_Text","_Tooltip","_tokens","_helpers","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Input","React","forwardRef","_ref","ref","children","className","description","disabled","error","required","focus","hover","title","height","labelOffset","showCounter","_ref$defaultValue","defaultValue","onChange","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","inputProps","_React$useState","useState","_React$useState2","setValue","handleChange","useCallback","event","nextValue","currentTarget","createElement","Box","width","Tooltip","pointer","content","placement","Text","variant","color","textAlign","position","mt","StyledInput","placeholder","StyledLabel","htmlFor","maxLength","display","mx","RequiredField","flex","String","ml","exports","displayName","styled","input","withConfig","componentId","themeGet","systemHeight","props","css","INPUT_STATES","active","completed","label","FORM_ELEMENT_TRANSITION","_ref2"],"sources":["../../../src/elements/Input/Input.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { height as systemHeight } from \"styled-system\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { INPUT_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface InputProps\n  extends BoxProps,\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      \"size\" | \"width\" | \"height\" | \"capture\"\n    > {\n  active?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  required?: boolean\n  title?: string\n  labelOffset?: number\n  showCounter?: boolean\n}\n\n/** Input component */\nexport const Input: React.ForwardRefExoticComponent<\n  InputProps & { ref?: React.Ref<HTMLInputElement> }\n> = React.forwardRef(\n  (\n    {\n      children,\n      className,\n      description,\n      disabled,\n      error,\n      required,\n      focus,\n      hover,\n      title,\n      height,\n      labelOffset,\n      showCounter,\n      defaultValue = \"\",\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n    const [value, setValue] = React.useState(inputProps.value || defaultValue)\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.(event)\n      },\n      [onChange]\n    )\n\n    return (\n      <Box width=\"100%\" className={className} {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"black60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Box position=\"relative\" mt={!!title && !description ? 1 : 0}>\n          <StyledInput\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={!!error}\n            required={required}\n            height={(height ?? 50) as any}\n            name={inputProps.name}\n            title={title}\n            labelOffset={labelOffset}\n            defaultValue={defaultValue}\n            onChange={handleChange}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel labelOffset={labelOffset} htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n\n          {children}\n        </Box>\n\n        {(required || (inputProps?.maxLength && showCounter)) &&\n          !(error && typeof error === \"string\") && (\n            <Box display=\"flex\" mt={0.5} mx={1}>\n              {required && <RequiredField disabled={disabled} flex={1} />}\n\n              {!!inputProps?.maxLength && showCounter && (\n                <Text flex={1} variant=\"xs\" color=\"black60\" textAlign=\"right\">\n                  {String(value).length}/{inputProps.maxLength}\n                </Text>\n              )}\n            </Box>\n          )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nInput.displayName = \"Input\"\n\ntype StyledInputProps = Pick<\n  InputProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\" | \"labelOffset\"\n>\n\nconst StyledInput = styled.input<StyledInputProps>`\n  width: 100%;\n  padding: 0 ${themeGet(\"space.1\")};\n  appearance: none;\n  line-height: 1;\n  border: 1px solid;\n  border-radius: 3px;\n  transition: border-color 0.25s, color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  ${systemHeight};\n\n  ::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${INPUT_STATES.default}\n      ${props.hover && INPUT_STATES.hover}\n      ${props.focus && INPUT_STATES.focus}\n      ${props.active && INPUT_STATES.active}\n      ${props.disabled && INPUT_STATES.disabled}\n      ${props.error && INPUT_STATES.error}\n\n      &:hover {\n        ${INPUT_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${INPUT_STATES.completed}\n        ${props.error && INPUT_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${INPUT_STATES.focus}\n\n        :not(:placeholder-shown) {\n          ${INPUT_STATES.active}\n          ${props.error && INPUT_STATES.error}\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${INPUT_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        ::placeholder {\n          opacity: 0;\n        }\n      `}\n    `\n  }};\n`\n\nconst StyledLabel = styled.label<StyledInputProps>`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n\n  & > span {\n    background-color: ${themeGet(\"colors.white100\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n\n  ${({ labelOffset }) =>\n    !!labelOffset &&\n    css`\n      padding-left: ${labelOffset - 5}px;\n    `}\n`\n"],"mappings":"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"}

package/dist/elements/Input/Input.story.d.ts

@@ -5,4 +5,5 @@ export default _default;
 export declare const Default: () => JSX.Element;
 export declare const Styled: () => JSX.Element;
 export declare const Required: () => JSX.Element;
+export declare const WithState: () => JSX.Element;
 export declare const CustomHeight: () => JSX.Element;

package/dist/elements/Input/Input.story.js

@@ -1,15 +1,24 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Styled = exports.Required = exports.Default = exports.CustomHeight = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.default = exports.WithState = exports.Styled = exports.Required = exports.Default = exports.CustomHeight = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _storybookStates = require("storybook-states");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Button = require("../Button");
 var _Input = require("./Input");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var _default = {
   title: "Components/Input"
 };
@@ -89,6 +98,24 @@ var Required = function Required() {
 };
 exports.Required = Required;
 Required.displayName = "Required";
+var WithState = function WithState() {
+  var _useState = (0, _react.useState)(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    title: "Example",
+    value: value,
+    onChange: function onChange(e) {
+      return setValue(e.currentTarget.value);
+    },
+    placeholder: "Start typing\u2026",
+    maxLength: 50,
+    showCounter: true
+  });
+};
+exports.WithState = WithState;
+WithState.displayName = "WithState";
 var CustomHeight = function CustomHeight() {
   return /*#__PURE__*/_react.default.createElement(_Input.Input, {
     height: 40,

package/dist/elements/Input/Input.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_styledComponents","_Button","_Input","obj","__esModule","default","_default","title","exports","Default","createElement","States","states","focus","hover","active","error","disabled","value","name","required","maxLength","showCounter","description","width","Input","placeholder","displayName","StyledInput","styled","withConfig","componentId","Styled","Required","mt","type","Button","CustomHeight","height"],"sources":["../../../src/elements/Input/Input.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Button } from \"../Button\"\nimport { Input, InputProps } from \"./Input\"\n\nexport default {\n  title: \"Components/Input\",\n}\n\nexport const Default = () => {\n  return (\n    <States<InputProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { error: \"Something went wrong.\" },\n        { disabled: true },\n        { disabled: true, value: \"Example value\" },\n        { title: \"Your offer\", name: \"offer\" },\n        { title: \"Your offer with a big title\", name: \"offer-big-title\" },\n        {\n          title: \"Your offer with a really really long title\",\n          name: \"offer-really-long-title\",\n        },\n        { title: \"Your offer\", required: true },\n        { title: \"Your offer\", maxLength: 50 },\n        {\n          title: \"Your offer\",\n          required: true,\n          maxLength: 50,\n          showCounter: true,\n        },\n        { title: \"Your offer\", description: \"This is my description\" },\n        { width: \"50%\" },\n      ]}\n    >\n      <Input placeholder=\"Start typing…\" />\n    </States>\n  )\n}\n\nconst StyledInput = styled(Input)`\n  border: 1px solid red;\n\n  > input {\n    border: 2px solid green;\n  }\n`\n\nexport const Styled = () => {\n  return <StyledInput placeholder=\"style should target container div\" />\n}\n\nexport const Required = () => {\n  return (\n    <form>\n      <Input\n        title=\"Example\"\n        required\n        placeholder=\"Submission should be blocked unless this has a value\"\n      />\n\n      <Input\n        mt={1}\n        title=\"Email\"\n        required\n        placeholder=\"Requires a valid email\"\n        type=\"email\"\n      />\n\n      <Button mt={1}>Submit</Button>\n    </form>\n  )\n}\n\nexport const CustomHeight = () => {\n  return <Input height={40} placeholder=\"Input is 40px in height\" />\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAA2C,SAAAD,uBAAAM,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAE5B;EACbC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAAH,OAAA,GAAAC,QAAA;AAEM,IAAMG,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEb,MAAA,CAAAS,OAAA,CAAAK,aAAA,CAACX,gBAAA,CAAAY,MAAM;IACLC,MAAM,EAAE,CACN,CAAC,CAAC,EACF;MAAEC,KAAK,EAAE;IAAK,CAAC,EACf;MAAEC,KAAK,EAAE;IAAK,CAAC,EACf;MAAEC,MAAM,EAAE;IAAK,CAAC,EAChB;MAAEC,KAAK,EAAE;IAAwB,CAAC,EAClC;MAAEC,QAAQ,EAAE;IAAK,CAAC,EAClB;MAAEA,QAAQ,EAAE,IAAI;MAAEC,KAAK,EAAE;IAAgB,CAAC,EAC1C;MAAEX,KAAK,EAAE,YAAY;MAAEY,IAAI,EAAE;IAAQ,CAAC,EACtC;MAAEZ,KAAK,EAAE,6BAA6B;MAAEY,IAAI,EAAE;IAAkB,CAAC,EACjE;MACEZ,KAAK,EAAE,4CAA4C;MACnDY,IAAI,EAAE;IACR,CAAC,EACD;MAAEZ,KAAK,EAAE,YAAY;MAAEa,QAAQ,EAAE;IAAK,CAAC,EACvC;MAAEb,KAAK,EAAE,YAAY;MAAEc,SAAS,EAAE;IAAG,CAAC,EACtC;MACEd,KAAK,EAAE,YAAY;MACnBa,QAAQ,EAAE,IAAI;MACdC,SAAS,EAAE,EAAE;MACbC,WAAW,EAAE;IACf,CAAC,EACD;MAAEf,KAAK,EAAE,YAAY;MAAEgB,WAAW,EAAE;IAAyB,CAAC,EAC9D;MAAEC,KAAK,EAAE;IAAM,CAAC;EAChB,gBAEF5B,MAAA,CAAAS,OAAA,CAAAK,aAAA,CAACR,MAAA,CAAAuB,KAAK;IAACC,WAAW,EAAC;EAAe,EAAG,CAC9B;AAEb,CAAC;AAAAlB,OAAA,CAAAC,OAAA,GAAAA,OAAA;AAhCYA,OAAO,CAAAkB,WAAA;AAkCpB,IAAMC,WAAW,GAAG,IAAAC,yBAAM,EAACJ,YAAK,CAAC,CAAAK,UAAA;EAAAH,WAAA;EAAAI,WAAA;AAAA,6DAMhC;AAEM,IAAMC,MAAM,GAAG,SAATA,MAAMA,CAAA,EAAS;EAC1B,oBAAOpC,MAAA,CAAAS,OAAA,CAAAK,aAAA,CAACkB,WAAW;IAACF,WAAW,EAAC;EAAmC,EAAG;AACxE,CAAC;AAAAlB,OAAA,CAAAwB,MAAA,GAAAA,MAAA;AAFYA,MAAM,CAAAL,WAAA;AAIZ,IAAMM,QAAQ,GAAG,SAAXA,QAAQA,CAAA,EAAS;EAC5B,oBACErC,MAAA,CAAAS,OAAA,CAAAK,aAAA,4BACEd,MAAA,CAAAS,OAAA,CAAAK,aAAA,CAACR,MAAA,CAAAuB,KAAK;IACJlB,KAAK,EAAC,SAAS;IACfa,QAAQ;IACRM,WAAW,EAAC;EAAsD,EAClE,eAEF9B,MAAA,CAAAS,OAAA,CAAAK,aAAA,CAACR,MAAA,CAAAuB,KAAK;IACJS,EAAE,EAAE,CAAE;IACN3B,KAAK,EAAC,OAAO;IACba,QAAQ;IACRM,WAAW,EAAC,wBAAwB;IACpCS,IAAI,EAAC;EAAO,EACZ,eAEFvC,MAAA,CAAAS,OAAA,CAAAK,aAAA,CAACT,OAAA,CAAAmC,MAAM;IAACF,EAAE,EAAE;EAAE,GAAC,QAAM,CAAS,CACzB;AAEX,CAAC;AAAA1B,OAAA,CAAAyB,QAAA,GAAAA,QAAA;AApBYA,QAAQ,CAAAN,WAAA;AAsBd,IAAMU,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;EAChC,oBAAOzC,MAAA,CAAAS,OAAA,CAAAK,aAAA,CAACR,MAAA,CAAAuB,KAAK;IAACa,MAAM,EAAE,EAAG;IAACZ,WAAW,EAAC;EAAyB,EAAG;AACpE,CAAC;AAAAlB,OAAA,CAAA6B,YAAA,GAAAA,YAAA;AAFYA,YAAY,CAAAV,WAAA"}
+{"version":3,"file":"Input.story.js","names":["_react","_interopRequireWildcard","require","_storybookStates","_styledComponents","_interopRequireDefault","_Button","_Input","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_default","title","exports","Default","createElement","States","states","focus","hover","active","error","disabled","required","maxLength","showCounter","description","width","Input","placeholder","displayName","StyledInput","styled","withConfig","componentId","Styled","Required","mt","type","Button","WithState","_useState","useState","_useState2","setValue","onChange","e","currentTarget","CustomHeight","height"],"sources":["../../../src/elements/Input/Input.story.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Button } from \"../Button\"\nimport { Input, InputProps } from \"./Input\"\n\nexport default {\n  title: \"Components/Input\",\n}\n\nexport const Default = () => {\n  return (\n    <States<InputProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { error: \"Something went wrong.\" },\n        { disabled: true },\n        { disabled: true, value: \"Example value\" },\n        { title: \"Your offer\", name: \"offer\" },\n        { title: \"Your offer with a big title\", name: \"offer-big-title\" },\n        {\n          title: \"Your offer with a really really long title\",\n          name: \"offer-really-long-title\",\n        },\n        { title: \"Your offer\", required: true },\n        { title: \"Your offer\", maxLength: 50 },\n        {\n          title: \"Your offer\",\n          required: true,\n          maxLength: 50,\n          showCounter: true,\n        },\n        { title: \"Your offer\", description: \"This is my description\" },\n        { width: \"50%\" },\n      ]}\n    >\n      <Input placeholder=\"Start typing…\" />\n    </States>\n  )\n}\n\nconst StyledInput = styled(Input)`\n  border: 1px solid red;\n\n  > input {\n    border: 2px solid green;\n  }\n`\n\nexport const Styled = () => {\n  return <StyledInput placeholder=\"style should target container div\" />\n}\n\nexport const Required = () => {\n  return (\n    <form>\n      <Input\n        title=\"Example\"\n        required\n        placeholder=\"Submission should be blocked unless this has a value\"\n      />\n\n      <Input\n        mt={1}\n        title=\"Email\"\n        required\n        placeholder=\"Requires a valid email\"\n        type=\"email\"\n      />\n\n      <Button mt={1}>Submit</Button>\n    </form>\n  )\n}\n\nexport const WithState = () => {\n  const [value, setValue] = useState(\"\")\n\n  return (\n    <Input\n      title=\"Example\"\n      value={value}\n      onChange={(e) => setValue(e.currentTarget.value)}\n      placeholder=\"Start typing…\"\n      maxLength={50}\n      showCounter\n    />\n  )\n}\n\nexport const CustomHeight = () => {\n  return <Input height={40} placeholder=\"Input is 40px in height\" />\n}\n"],"mappings":"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"}

package/dist/elements/LabeledInput/LabeledInput.story.js

@@ -54,6 +54,14 @@ var Default = function Default() {
       title: "Your offer",
       placeholder: "Start typing...",
       name: "offer"
+    }, {
+      label: "USD",
+      variant: "suffix",
+      title: "Your offer",
+      placeholder: "Start typing...",
+      name: "offer",
+      showCounter: true,
+      maxLength: 40
     }]
   }, /*#__PURE__*/_react.default.createElement(_LabeledInput.LabeledInput, {
     label: "$"

package/dist/elements/LabeledInput/LabeledInput.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"LabeledInput.story.js","names":["_addonActions","require","_react","_interopRequireWildcard","_storybookStates","_Clickable","_LabeledInput","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_default","title","exports","Default","createElement","States","states","label","placeholder","type","Clickable","onClick","action","bg","width","height","borderRadius","description","variant","LabeledInput","displayName","CharacterCountExample","defaultValue","_useState","useState","_useState2","setLength","onChange","e","currentTarget","CustomHeight"],"sources":["../../../src/elements/LabeledInput/LabeledInput.story.tsx"],"sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Clickable } from \"../Clickable\"\nimport { LabeledInput, LabeledInputProps } from \"./LabeledInput\"\n\nexport default {\n  title: \"Components/LabeledInput\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<LabeledInputProps>>\n      states={[\n        { label: \"$USD\", placeholder: \"Min\", type: \"number\" },\n        {\n          placeholder: \"Clickable label\",\n          label: (\n            <Clickable\n              onClick={action(\"onClick\")}\n              bg=\"black60\"\n              width={18}\n              height={18}\n              borderRadius=\"50%\"\n            />\n          ),\n        },\n        { title: \"Amount\" },\n        { title: \"Amount\", description: \"Currency: USD\" },\n        {\n          label: \"USD\",\n          variant: \"prefix\",\n          title: \"Your offer\",\n          placeholder: \"Start typing...\",\n          name: \"offer\",\n        },\n        {\n          label: \"USD\",\n          variant: \"suffix\",\n          title: \"Your offer\",\n          placeholder: \"Start typing...\",\n          name: \"offer\",\n        },\n      ]}\n    >\n      <LabeledInput label=\"$\" />\n    </States>\n  )\n}\n\nexport const CharacterCountExample = () => {\n  const defaultValue = \"Hello world\"\n  const [length, setLength] = useState(defaultValue.length)\n  return (\n    <LabeledInput\n      label={length}\n      onChange={(e) => setLength(e.currentTarget.value.length)}\n      defaultValue={defaultValue}\n    />\n  )\n}\n\nexport const CustomHeight = () => {\n  return (\n    <LabeledInput\n      label=\"🔎\"\n      height={40}\n      placeholder=\"Input is 40px in height\"\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"LabeledInput.story.js","names":["_addonActions","require","_react","_interopRequireWildcard","_storybookStates","_Clickable","_LabeledInput","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_default","title","exports","Default","createElement","States","states","label","placeholder","type","Clickable","onClick","action","bg","width","height","borderRadius","description","variant","showCounter","maxLength","LabeledInput","displayName","CharacterCountExample","defaultValue","_useState","useState","_useState2","setLength","onChange","e","currentTarget","CustomHeight"],"sources":["../../../src/elements/LabeledInput/LabeledInput.story.tsx"],"sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Clickable } from \"../Clickable\"\nimport { LabeledInput, LabeledInputProps } from \"./LabeledInput\"\n\nexport default {\n  title: \"Components/LabeledInput\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<LabeledInputProps>>\n      states={[\n        { label: \"$USD\", placeholder: \"Min\", type: \"number\" },\n        {\n          placeholder: \"Clickable label\",\n          label: (\n            <Clickable\n              onClick={action(\"onClick\")}\n              bg=\"black60\"\n              width={18}\n              height={18}\n              borderRadius=\"50%\"\n            />\n          ),\n        },\n        { title: \"Amount\" },\n        { title: \"Amount\", description: \"Currency: USD\" },\n        {\n          label: \"USD\",\n          variant: \"prefix\",\n          title: \"Your offer\",\n          placeholder: \"Start typing...\",\n          name: \"offer\",\n        },\n        {\n          label: \"USD\",\n          variant: \"suffix\",\n          title: \"Your offer\",\n          placeholder: \"Start typing...\",\n          name: \"offer\",\n        },\n        {\n          label: \"USD\",\n          variant: \"suffix\",\n          title: \"Your offer\",\n          placeholder: \"Start typing...\",\n          name: \"offer\",\n          showCounter: true,\n          maxLength: 40,\n        },\n      ]}\n    >\n      <LabeledInput label=\"$\" />\n    </States>\n  )\n}\n\nexport const CharacterCountExample = () => {\n  const defaultValue = \"Hello world\"\n  const [length, setLength] = useState(defaultValue.length)\n  return (\n    <LabeledInput\n      label={length}\n      onChange={(e) => setLength(e.currentTarget.value.length)}\n      defaultValue={defaultValue}\n    />\n  )\n}\n\nexport const CustomHeight = () => {\n  return (\n    <LabeledInput\n      label=\"🔎\"\n      height={40}\n      placeholder=\"Input is 40px in height\"\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/elements/Toggle/Toggle.js

@@ -65,7 +65,7 @@ var Switch = (0, _styledComponents.default)(_Box.Box).withConfig({
 var Container = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "Toggle__Container",
   componentId: "sc-1yxwor4-1"
-})(["user-select:none;border-radius:100px;width:51px;height:31px;", ""], function (props) {
+})(["user-select:none;border-radius:100px;width:51px;height:31px;flex-shrink:0;", ""], function (props) {
   return (0, _styledComponents.css)(["", " ", " ", ""], props.selected ? _tokens.TOGGLE_STATES.selected : _tokens.TOGGLE_STATES.default, props.hover && _tokens.TOGGLE_STATES.hover, props.disabled && (props.selected ? _tokens.TOGGLE_STATES.disabled.selected : _tokens.TOGGLE_STATES.disabled.default));
 });
 //# sourceMappingURL=Toggle.js.map

package/dist/elements/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["_react","_interopRequireDefault","require","_styledComponents","_interopRequireWildcard","_Box","_tokens","_themeGet","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Toggle","_ref","_ref$selected","selected","disabled","onSelect","onClick","rest","isSelectable","undefined","handleClick","event","handleKeyPress","preventDefault","createElement","Container","display","alignItems","tabIndex","onKeyPress","role","Switch","exports","displayName","styled","Box","withConfig","componentId","themeGet","props","css","SWITCH_STATES","TOGGLE_STATES","hover"],"sources":["../../../src/elements/Toggle/Toggle.tsx"],"sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\nimport { SWITCH_STATES, TOGGLE_STATES } from \"./tokens\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport interface ToggleProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable toggle interactions */\n  disabled?: boolean\n  /** Select the toggle on render */\n  selected?: boolean\n  /** Used to force the toggle into the visual hover state */\n  hover?: boolean\n  /** Callback when selected */\n  onSelect?: (selected: boolean) => void\n}\n\n/** A toggle */\nexport const Toggle: React.FC<ToggleProps> = ({\n  selected = false,\n  disabled,\n  onSelect,\n  onClick,\n  ...rest\n}) => {\n  const isSelectable = !disabled && onSelect !== undefined\n\n  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (isSelectable && onSelect) {\n      onSelect(!selected)\n    }\n\n    if (onClick) {\n      onClick(event)\n    }\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \" && isSelectable && onSelect) {\n      event.preventDefault()\n      onSelect(!selected)\n    }\n  }\n\n  return (\n    <Container\n      display=\"flex\"\n      alignItems=\"center\"\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      role=\"toggle\"\n      aria-checked={selected}\n      selected={selected}\n      disabled={disabled}\n      {...rest}\n    >\n      <Switch selected={selected} />\n    </Container>\n  )\n}\n\nconst Switch = styled(Box)<{ selected: boolean }>`\n  width: 26px;\n  height: 26px;\n  margin: 3px;\n  border-radius: 50%;\n  transition: transform 0.3s;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n\n  ${(props) => {\n    return css`\n      ${props.selected ? SWITCH_STATES.selected : SWITCH_STATES.default}\n    `\n  }}\n`\n\nconst Container = styled(Box)<{\n  selected: boolean\n  hover?: boolean\n  disabled?: boolean\n}>`\n  user-select: none;\n  border-radius: 100px;\n  width: 51px;\n  height: 31px;\n\n  ${(props) => {\n    return css`\n      ${props.selected ? TOGGLE_STATES.selected : TOGGLE_STATES.default}\n      ${props.hover && TOGGLE_STATES.hover}\n      ${props.disabled &&\n      (props.selected\n        ? TOGGLE_STATES.disabled.selected\n        : TOGGLE_STATES.disabled.default)}\n    `\n  }}\n`\n"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","names":["_react","_interopRequireDefault","require","_styledComponents","_interopRequireWildcard","_Box","_tokens","_themeGet","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Toggle","_ref","_ref$selected","selected","disabled","onSelect","onClick","rest","isSelectable","undefined","handleClick","event","handleKeyPress","preventDefault","createElement","Container","display","alignItems","tabIndex","onKeyPress","role","Switch","exports","displayName","styled","Box","withConfig","componentId","themeGet","props","css","SWITCH_STATES","TOGGLE_STATES","hover"],"sources":["../../../src/elements/Toggle/Toggle.tsx"],"sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\nimport { SWITCH_STATES, TOGGLE_STATES } from \"./tokens\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport interface ToggleProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable toggle interactions */\n  disabled?: boolean\n  /** Select the toggle on render */\n  selected?: boolean\n  /** Used to force the toggle into the visual hover state */\n  hover?: boolean\n  /** Callback when selected */\n  onSelect?: (selected: boolean) => void\n}\n\n/** A toggle */\nexport const Toggle: React.FC<ToggleProps> = ({\n  selected = false,\n  disabled,\n  onSelect,\n  onClick,\n  ...rest\n}) => {\n  const isSelectable = !disabled && onSelect !== undefined\n\n  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (isSelectable && onSelect) {\n      onSelect(!selected)\n    }\n\n    if (onClick) {\n      onClick(event)\n    }\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \" && isSelectable && onSelect) {\n      event.preventDefault()\n      onSelect(!selected)\n    }\n  }\n\n  return (\n    <Container\n      display=\"flex\"\n      alignItems=\"center\"\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      role=\"toggle\"\n      aria-checked={selected}\n      selected={selected}\n      disabled={disabled}\n      {...rest}\n    >\n      <Switch selected={selected} />\n    </Container>\n  )\n}\n\nconst Switch = styled(Box)<{ selected: boolean }>`\n  width: 26px;\n  height: 26px;\n  margin: 3px;\n  border-radius: 50%;\n  transition: transform 0.3s;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n\n  ${(props) => {\n    return css`\n      ${props.selected ? SWITCH_STATES.selected : SWITCH_STATES.default}\n    `\n  }}\n`\n\nconst Container = styled(Box)<{\n  selected: boolean\n  hover?: boolean\n  disabled?: boolean\n}>`\n  user-select: none;\n  border-radius: 100px;\n  width: 51px;\n  height: 31px;\n  flex-shrink: 0;\n\n  ${(props) => {\n    return css`\n      ${props.selected ? TOGGLE_STATES.selected : TOGGLE_STATES.default}\n      ${props.hover && TOGGLE_STATES.hover}\n      ${props.disabled &&\n      (props.selected\n        ? TOGGLE_STATES.disabled.selected\n        : TOGGLE_STATES.disabled.default)}\n    `\n  }}\n`\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "38.4.0",
+  "version": "38.6.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -182,5 +182,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "f54888c95c7a06f43fd92bb0891142bfa02e64cf"
+  "gitHead": "46409b914911531e0c0f9cf89115f2cc8105c0e4"
 }