@artsy/palette 37.0.1 → 37.0.2

package/dist/elements/Range/Range.js

@@ -61,15 +61,12 @@ var Range = function Range(_ref) {
     setValues([values[0], value]);
     onChange === null || onChange === void 0 ? void 0 : onChange([values[0], value]);
   };
-  (0, React.useEffect)(function () {
-    if (!maxRef.current) return;
-    setMaxWidth(maxRef.current.offsetWidth);
-  }, []);
   (0, React.useEffect)(function () {
     var handleResize = function handleResize() {
       if (!maxRef.current) return;
       setMaxWidth(maxRef.current.offsetWidth);
     };
+    requestAnimationFrame(handleResize);
     window.addEventListener("resize", handleResize, {
       passive: true
     });

package/dist/elements/Range/Range.js.map

@@ -1 +1 @@
-{"version":3,"file":"Range.js","names":["_themeGet","require","React","_interopRequireWildcard","_styledComponents","_helpers","_utils","_remapValue","_Box","_Flex","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","iter","Symbol","iterator","Array","from","isArray","_arrayLikeToArray","_slicedToArray","i","_arrayWithHoles","_iterableToArrayLimit","_nonIterableRest","o","minLen","n","toString","slice","constructor","name","test","len","length","arr2","_i","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","RANGE_HANDLE_SIZE","exports","Range","_ref","ariaLabels","min","max","step","_ref$value","onChange","rest","minRef","useRef","maxRef","_useState","useState","_useState2","values","setValues","_useState3","_useState4","maxWidth","setMaxWidth","handleMinChange","_ref2","valueAsNumber","handleMaxChange","_ref3","useEffect","current","offsetWidth","handleResize","window","addEventListener","passive","removeEventListener","useUpdateEffect","selectionRectangle","concat","remapValue","maxRectangle","createElement","Track","Selection","style","clip","Slider","ref","onInput","displayName","styled","Flex","withConfig","componentId","themeGet","Box","railStyles","css","handleStyles","FLAT_SHADOW","input","defaultProps","type"],"sources":["../../../src/elements/Range/Range.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport * as React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { FLAT_SHADOW } from \"../../helpers\"\nimport { useUpdateEffect } from \"../../utils\"\nimport { remapValue } from \"../../utils/remapValue\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\n\nexport const RANGE_HANDLE_SIZE = 24\n\nexport interface RangeProps extends BoxProps {\n  ariaLabels?: [string, string]\n  min: number\n  max: number\n  step: number\n  value?: number[]\n  onChange?: (range: [number, number]) => void\n}\n\nexport const Range: React.FC<RangeProps> = ({\n  ariaLabels,\n  min,\n  max,\n  step,\n  value = [0, max],\n  onChange,\n  ...rest\n}) => {\n  const minRef = useRef<HTMLInputElement | null>(null)\n  const maxRef = useRef<HTMLInputElement | null>(null)\n\n  const [values, setValues] = useState(value)\n\n  const [maxWidth, setMaxWidth] = useState(0)\n\n  const handleMinChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value > values[1] - step) return\n    setValues([value, values[1]])\n    onChange?.([value, values[1]])\n  }\n\n  const handleMaxChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value < values[0] + step) return\n    setValues([values[0], value])\n    onChange?.([values[0], value])\n  }\n\n  useEffect(() => {\n    if (!maxRef.current) return\n    setMaxWidth(maxRef.current.offsetWidth)\n  }, [])\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (!maxRef.current) return\n      setMaxWidth(maxRef.current.offsetWidth)\n    }\n\n    window.addEventListener(\"resize\", handleResize, { passive: true })\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize)\n    }\n  }, [])\n\n  // Sync local state with value prop\n  useUpdateEffect(() => {\n    setValues(value)\n  }, [...value])\n\n  const selectionRectangle = `rect(0, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px, 2px, ${remapValue(\n    values[0],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  const maxRectangle = `rect(0, ${maxWidth}px, ${RANGE_HANDLE_SIZE}px, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  return (\n    <Track {...rest}>\n      <Selection style={{ clip: selectionRectangle }} />\n\n      <Slider\n        ref={minRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMinChange}\n        value={values[0]}\n        aria-label={ariaLabels?.[0]}\n      />\n\n      <Slider\n        ref={maxRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMaxChange}\n        value={values[1]}\n        style={{ clip: maxRectangle }}\n        aria-label={ariaLabels?.[1]}\n      />\n    </Track>\n  )\n}\n\nconst Track = styled(Flex)`\n  align-items: center;\n  position: relative;\n  height: ${RANGE_HANDLE_SIZE}px;\n\n  &:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    height: 2px;\n    left: 0;\n    right: 0;\n    top: 50%;\n    margin-top: -1px;\n    background-color: ${themeGet(\"colors.black30\")};\n  }\n`\n\nconst Selection = styled(Box)`\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  top: 50%;\n  margin-top: -1px;\n  background-color: ${themeGet(\"colors.brand\")};\n`\n\nconst railStyles = css`\n  width: 100%;\n  height: ${RANGE_HANDLE_SIZE}px;\n`\n\nconst handleStyles = css`\n  user-select: none;\n  cursor: grab;\n  width: ${RANGE_HANDLE_SIZE}px;\n  height: ${RANGE_HANDLE_SIZE}px;\n  background-color: ${themeGet(\"colors.white100\")};\n  border-radius: 50%;\n  border: 1px solid ${themeGet(\"colors.black10\")};\n  box-shadow: ${FLAT_SHADOW};\n`\n\nconst Slider = styled.input`\n  appearance: none;\n  background: transparent;\n  position: relative;\n  margin: 0;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  &::-webkit-slider-runnable-track {\n    ${railStyles}\n  }\n\n  &::-moz-range-track {\n    ${railStyles}\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    ${handleStyles}\n  }\n\n  &::-moz-range-thumb {\n    ${handleStyles}\n  }\n\n  &:active {\n    &::-webkit-slider-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.black5\")};\n    }\n\n    &::-moz-range-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.black5\")};\n    }\n  }\n`\n\nSlider.defaultProps = {\n  type: \"range\",\n}\n"],"mappings":"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"}
+{"version":3,"file":"Range.js","names":["_themeGet","require","React","_interopRequireWildcard","_styledComponents","_helpers","_utils","_remapValue","_Box","_Flex","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","iter","Symbol","iterator","Array","from","isArray","_arrayLikeToArray","_slicedToArray","i","_arrayWithHoles","_iterableToArrayLimit","_nonIterableRest","o","minLen","n","toString","slice","constructor","name","test","len","length","arr2","_i","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","RANGE_HANDLE_SIZE","exports","Range","_ref","ariaLabels","min","max","step","_ref$value","onChange","rest","minRef","useRef","maxRef","_useState","useState","_useState2","values","setValues","_useState3","_useState4","maxWidth","setMaxWidth","handleMinChange","_ref2","valueAsNumber","handleMaxChange","_ref3","useEffect","handleResize","current","offsetWidth","requestAnimationFrame","window","addEventListener","passive","removeEventListener","useUpdateEffect","selectionRectangle","concat","remapValue","maxRectangle","createElement","Track","Selection","style","clip","Slider","ref","onInput","displayName","styled","Flex","withConfig","componentId","themeGet","Box","railStyles","css","handleStyles","FLAT_SHADOW","input","defaultProps","type"],"sources":["../../../src/elements/Range/Range.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport * as React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { FLAT_SHADOW } from \"../../helpers\"\nimport { useUpdateEffect } from \"../../utils\"\nimport { remapValue } from \"../../utils/remapValue\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\n\nexport const RANGE_HANDLE_SIZE = 24\n\nexport interface RangeProps extends BoxProps {\n  ariaLabels?: [string, string]\n  min: number\n  max: number\n  step: number\n  value?: number[]\n  onChange?: (range: [number, number]) => void\n}\n\nexport const Range: React.FC<RangeProps> = ({\n  ariaLabels,\n  min,\n  max,\n  step,\n  value = [0, max],\n  onChange,\n  ...rest\n}) => {\n  const minRef = useRef<HTMLInputElement | null>(null)\n  const maxRef = useRef<HTMLInputElement | null>(null)\n\n  const [values, setValues] = useState(value)\n\n  const [maxWidth, setMaxWidth] = useState(0)\n\n  const handleMinChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value > values[1] - step) return\n    setValues([value, values[1]])\n    onChange?.([value, values[1]])\n  }\n\n  const handleMaxChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value < values[0] + step) return\n    setValues([values[0], value])\n    onChange?.([values[0], value])\n  }\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (!maxRef.current) return\n      setMaxWidth(maxRef.current.offsetWidth)\n    }\n\n    requestAnimationFrame(handleResize)\n\n    window.addEventListener(\"resize\", handleResize, { passive: true })\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize)\n    }\n  }, [])\n\n  // Sync local state with value prop\n  useUpdateEffect(() => {\n    setValues(value)\n  }, [...value])\n\n  const selectionRectangle = `rect(0, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px, 2px, ${remapValue(\n    values[0],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  const maxRectangle = `rect(0, ${maxWidth}px, ${RANGE_HANDLE_SIZE}px, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  return (\n    <Track {...rest}>\n      <Selection style={{ clip: selectionRectangle }} />\n\n      <Slider\n        ref={minRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMinChange}\n        value={values[0]}\n        aria-label={ariaLabels?.[0]}\n      />\n\n      <Slider\n        ref={maxRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMaxChange}\n        value={values[1]}\n        style={{ clip: maxRectangle }}\n        aria-label={ariaLabels?.[1]}\n      />\n    </Track>\n  )\n}\n\nconst Track = styled(Flex)`\n  align-items: center;\n  position: relative;\n  height: ${RANGE_HANDLE_SIZE}px;\n\n  &:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    height: 2px;\n    left: 0;\n    right: 0;\n    top: 50%;\n    margin-top: -1px;\n    background-color: ${themeGet(\"colors.black30\")};\n  }\n`\n\nconst Selection = styled(Box)`\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  top: 50%;\n  margin-top: -1px;\n  background-color: ${themeGet(\"colors.brand\")};\n`\n\nconst railStyles = css`\n  width: 100%;\n  height: ${RANGE_HANDLE_SIZE}px;\n`\n\nconst handleStyles = css`\n  user-select: none;\n  cursor: grab;\n  width: ${RANGE_HANDLE_SIZE}px;\n  height: ${RANGE_HANDLE_SIZE}px;\n  background-color: ${themeGet(\"colors.white100\")};\n  border-radius: 50%;\n  border: 1px solid ${themeGet(\"colors.black10\")};\n  box-shadow: ${FLAT_SHADOW};\n`\n\nconst Slider = styled.input`\n  appearance: none;\n  background: transparent;\n  position: relative;\n  margin: 0;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  &::-webkit-slider-runnable-track {\n    ${railStyles}\n  }\n\n  &::-moz-range-track {\n    ${railStyles}\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    ${handleStyles}\n  }\n\n  &::-moz-range-thumb {\n    ${handleStyles}\n  }\n\n  &:active {\n    &::-webkit-slider-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.black5\")};\n    }\n\n    &::-moz-range-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.black5\")};\n    }\n  }\n`\n\nSlider.defaultProps = {\n  type: \"range\",\n}\n"],"mappings":"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"}

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

@@ -4,4 +4,14 @@ declare const _default: {
 export default _default;
 export declare const Default: () => JSX.Element;
 export declare const WithinModal: () => JSX.Element;
+export declare const WithinDrawer: {
+    (): JSX.Element;
+    story: {
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+    };
+};
 export declare const InContext: () => JSX.Element;

package/dist/elements/Range/Range.story.js

@@ -4,7 +4,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithinModal = exports.InContext = exports.Default = void 0;
+exports.default = exports.WithinModal = exports.WithinDrawer = exports.InContext = exports.Default = void 0;
 var _addonActions = require("@storybook/addon-actions");
 var _react = _interopRequireWildcard(require("react"));
 var _storybookStates = require("storybook-states");
@@ -15,6 +15,8 @@ var _LabeledInput = require("../LabeledInput");
 var _Flex = require("../Flex");
 var _Spacer = require("../Spacer");
 var _Text = require("../Text");
+var _Drawer = require("../Drawer");
+var _Button = require("../Button");
 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(); }
@@ -66,13 +68,45 @@ var WithinModal = function WithinModal() {
 };
 exports.WithinModal = WithinModal;
 WithinModal.displayName = "WithinModal";
-var InContext = function InContext() {
-  var _useState = (0, _react.useState)([0, 50000]),
+var WithinDrawer = function WithinDrawer() {
+  var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
-    _useState2$ = _slicedToArray(_useState2[0], 2),
-    min = _useState2$[0],
-    max = _useState2$[1],
-    setMinMax = _useState2[1];
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    onClick: function onClick() {
+      setOpen(true);
+    }
+  }, "Open"), /*#__PURE__*/_react.default.createElement(_Drawer.Drawer, {
+    open: open,
+    onClose: function onClose() {
+      setOpen(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    width: 400,
+    p: 2
+  }, /*#__PURE__*/_react.default.createElement(_Range.Range, {
+    min: 0,
+    max: 5000,
+    step: 10,
+    onChange: (0, _addonActions.action)("onChange")
+  }))));
+};
+exports.WithinDrawer = WithinDrawer;
+WithinDrawer.story = {
+  parameters: {
+    chromatic: {
+      disable: true
+    }
+  }
+};
+var InContext = function InContext() {
+  var _useState3 = (0, _react.useState)([0, 50000]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    _useState4$ = _slicedToArray(_useState4[0], 2),
+    min = _useState4$[0],
+    max = _useState4$[1],
+    setMinMax = _useState4[1];
   return /*#__PURE__*/_react.default.createElement(_Box.Box, {
     p: 2,
     border: "1px solid",

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

@@ -1 +1 @@
-{"version":3,"file":"Range.story.js","names":["_addonActions","require","_react","_interopRequireWildcard","_storybookStates","_Box","_Modal","_Range","_LabeledInput","_Flex","_Spacer","_Text","_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","step","max","Range","min","onChange","action","ariaLabels","displayName","WithinModal","ModalBase","width","height","dialogProps","bg","Box","InContext","_useState","useState","_useState2","_useState2$","setMinMax","p","border","borderColor","Flex","LabeledInput","label","flex","Spacer","x","y","justifyContent","Text","variant"],"sources":["../../../src/elements/Range/Range.story.tsx"],"sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { ModalBase } from \"../Modal\"\nimport { Range, RangeProps } from \"./Range\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\n\nexport default {\n  title: \"Components/Range\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<RangeProps>>\n      states={[{}, { value: [1100, 3450] }, { step: 1, max: 10 }]}\n    >\n      <Range\n        min={0}\n        max={5000}\n        step={10}\n        onChange={action(\"onChange\")}\n        ariaLabels={[\"Min price\", \"Max price\"]}\n      />\n    </States>\n  )\n}\n\nexport const WithinModal = () => {\n  return (\n    <ModalBase\n      width=\"100%\"\n      height=\"100%\"\n      dialogProps={{ width: 400, height: 400, bg: \"black5\" }}\n    >\n      <Box width={400} height={400}>\n        <Range min={0} max={5000} step={10} onChange={action(\"onChange\")} />\n      </Box>\n    </ModalBase>\n  )\n}\n\nexport const InContext = () => {\n  const [[min, max], setMinMax] = useState<number[]>([0, 50000])\n\n  return (\n    <Box p={2} border=\"1px solid\" borderColor=\"black10\" width={375}>\n      <Flex>\n        <LabeledInput title=\"Min\" label=\"$USD\" flex={1} value={min} />\n\n        <Spacer x={1} />\n\n        <LabeledInput title=\"Max\" label=\"$USD\" flex={1} value={max} />\n      </Flex>\n\n      <Spacer y={1} />\n\n      <Range\n        min={0}\n        max={50000}\n        step={100}\n        value={[min, max]}\n        onChange={setMinMax}\n      />\n\n      <Spacer y={0.5} />\n\n      <Flex justifyContent=\"space-between\">\n        <Text variant=\"xs\">$0</Text>\n\n        <Text variant=\"xs\">$50000+</Text>\n      </Flex>\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Range.story.js","names":["_addonActions","require","_react","_interopRequireWildcard","_storybookStates","_Box","_Modal","_Range","_LabeledInput","_Flex","_Spacer","_Text","_Drawer","_Button","_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","step","max","Range","min","onChange","action","ariaLabels","displayName","WithinModal","ModalBase","width","height","dialogProps","bg","Box","WithinDrawer","_useState","useState","_useState2","open","setOpen","Fragment","Button","onClick","Drawer","onClose","p","story","parameters","chromatic","disable","InContext","_useState3","_useState4","_useState4$","setMinMax","border","borderColor","Flex","LabeledInput","label","flex","Spacer","x","y","justifyContent","Text","variant"],"sources":["../../../src/elements/Range/Range.story.tsx"],"sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { ModalBase } from \"../Modal\"\nimport { Range, RangeProps } from \"./Range\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Drawer } from \"../Drawer\"\nimport { Button } from \"../Button\"\n\nexport default {\n  title: \"Components/Range\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<RangeProps>>\n      states={[{}, { value: [1100, 3450] }, { step: 1, max: 10 }]}\n    >\n      <Range\n        min={0}\n        max={5000}\n        step={10}\n        onChange={action(\"onChange\")}\n        ariaLabels={[\"Min price\", \"Max price\"]}\n      />\n    </States>\n  )\n}\n\nexport const WithinModal = () => {\n  return (\n    <ModalBase\n      width=\"100%\"\n      height=\"100%\"\n      dialogProps={{ width: 400, height: 400, bg: \"black5\" }}\n    >\n      <Box width={400} height={400}>\n        <Range min={0} max={5000} step={10} onChange={action(\"onChange\")} />\n      </Box>\n    </ModalBase>\n  )\n}\n\nexport const WithinDrawer = () => {\n  const [open, setOpen] = useState(false)\n  return (\n    <>\n      <Button\n        onClick={() => {\n          setOpen(true)\n        }}\n      >\n        Open\n      </Button>\n\n      <Drawer\n        open={open}\n        onClose={() => {\n          setOpen(false)\n        }}\n      >\n        <Box width={400} p={2}>\n          <Range min={0} max={5000} step={10} onChange={action(\"onChange\")} />\n        </Box>\n      </Drawer>\n    </>\n  )\n}\n\nWithinDrawer.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const InContext = () => {\n  const [[min, max], setMinMax] = useState<number[]>([0, 50000])\n\n  return (\n    <Box p={2} border=\"1px solid\" borderColor=\"black10\" width={375}>\n      <Flex>\n        <LabeledInput title=\"Min\" label=\"$USD\" flex={1} value={min} />\n\n        <Spacer x={1} />\n\n        <LabeledInput title=\"Max\" label=\"$USD\" flex={1} value={max} />\n      </Flex>\n\n      <Spacer y={1} />\n\n      <Range\n        min={0}\n        max={50000}\n        step={100}\n        value={[min, max]}\n        onChange={setMinMax}\n      />\n\n      <Spacer y={0.5} />\n\n      <Flex justifyContent=\"space-between\">\n        <Text variant=\"xs\">$0</Text>\n\n        <Text variant=\"xs\">$50000+</Text>\n      </Flex>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,IAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,aAAA,GAAAP,OAAA;AACA,IAAAQ,KAAA,GAAAR,OAAA;AACA,IAAAS,OAAA,GAAAT,OAAA;AACA,IAAAU,KAAA,GAAAV,OAAA;AACA,IAAAW,OAAA,GAAAX,OAAA;AACA,IAAAY,OAAA,GAAAZ,OAAA;AAAkC,SAAAa,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAZ,wBAAAgB,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,aAAAE,OAAA,CAAAF,GAAA,yBAAAA,GAAA,4BAAAG,OAAA,EAAAH,GAAA,UAAAI,KAAA,GAAAT,wBAAA,CAAAC,WAAA,OAAAQ,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAL,GAAA,YAAAI,KAAA,CAAAE,GAAA,CAAAN,GAAA,SAAAO,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAZ,GAAA,QAAAY,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,GAAA,EAAAY,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,GAAA,EAAAY,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAZ,GAAA,CAAAY,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAH,GAAA,MAAAI,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAjB,GAAA,EAAAO,MAAA,YAAAA,MAAA;AAAA,SAAAW,eAAAC,GAAA,EAAAC,CAAA,WAAAC,eAAA,CAAAF,GAAA,KAAAG,qBAAA,CAAAH,GAAA,EAAAC,CAAA,KAAAG,2BAAA,CAAAJ,GAAA,EAAAC,CAAA,KAAAI,gBAAA;AAAA,SAAAA,iBAAA,cAAAC,SAAA;AAAA,SAAAF,4BAAAG,CAAA,EAAAC,MAAA,SAAAD,CAAA,qBAAAA,CAAA,sBAAAE,iBAAA,CAAAF,CAAA,EAAAC,MAAA,OAAAE,CAAA,GAAApB,MAAA,CAAAI,SAAA,CAAAiB,QAAA,CAAAf,IAAA,CAAAW,CAAA,EAAAK,KAAA,aAAAF,CAAA,iBAAAH,CAAA,CAAAM,WAAA,EAAAH,CAAA,GAAAH,CAAA,CAAAM,WAAA,CAAAC,IAAA,MAAAJ,CAAA,cAAAA,CAAA,mBAAAK,KAAA,CAAAC,IAAA,CAAAT,CAAA,OAAAG,CAAA,+DAAAO,IAAA,CAAAP,CAAA,UAAAD,iBAAA,CAAAF,CAAA,EAAAC,MAAA;AAAA,SAAAC,kBAAAT,GAAA,EAAAkB,GAAA,QAAAA,GAAA,YAAAA,GAAA,GAAAlB,GAAA,CAAAmB,MAAA,EAAAD,GAAA,GAAAlB,GAAA,CAAAmB,MAAA,WAAAlB,CAAA,MAAAmB,IAAA,OAAAL,KAAA,CAAAG,GAAA,GAAAjB,CAAA,GAAAiB,GAAA,EAAAjB,CAAA,MAAAmB,IAAA,CAAAnB,CAAA,IAAAD,GAAA,CAAAC,CAAA,YAAAmB,IAAA;AAAA,SAAAjB,sBAAAH,GAAA,EAAAC,CAAA,QAAAoB,EAAA,WAAArB,GAAA,gCAAAsB,MAAA,IAAAtB,GAAA,CAAAsB,MAAA,CAAAC,QAAA,KAAAvB,GAAA,4BAAAqB,EAAA,QAAAG,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,IAAA,OAAAC,EAAA,OAAAC,EAAA,iBAAAJ,EAAA,IAAAL,EAAA,GAAAA,EAAA,CAAAzB,IAAA,CAAAI,GAAA,GAAA+B,IAAA,QAAA9B,CAAA,QAAAX,MAAA,CAAA+B,EAAA,MAAAA,EAAA,UAAAQ,EAAA,uBAAAA,EAAA,IAAAL,EAAA,GAAAE,EAAA,CAAA9B,IAAA,CAAAyB,EAAA,GAAAW,IAAA,MAAAJ,IAAA,CAAAK,IAAA,CAAAT,EAAA,CAAAU,KAAA,GAAAN,IAAA,CAAAT,MAAA,KAAAlB,CAAA,GAAA4B,EAAA,sBAAAM,GAAA,IAAAL,EAAA,OAAAL,EAAA,GAAAU,GAAA,yBAAAN,EAAA,YAAAR,EAAA,CAAAe,MAAA,KAAAT,EAAA,GAAAN,EAAA,CAAAe,MAAA,IAAA9C,MAAA,CAAAqC,EAAA,MAAAA,EAAA,2BAAAG,EAAA,QAAAL,EAAA,aAAAG,IAAA;AAAA,SAAA1B,gBAAAF,GAAA,QAAAe,KAAA,CAAAsB,OAAA,CAAArC,GAAA,UAAAA,GAAA;AAAA,IAAAsC,QAAA,GAEnB;EACbC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAAxD,OAAA,GAAAsD,QAAA;AAEM,IAAMG,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACE7E,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAAC5E,gBAAA,CAAA6E,MAAM;IACLC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;MAAEV,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI;IAAE,CAAC,EAAE;MAAEW,IAAI,EAAE,CAAC;MAAEC,GAAG,EAAE;IAAG,CAAC;EAAE,gBAE5DlF,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAACzE,MAAA,CAAA8E,KAAK;IACJC,GAAG,EAAE,CAAE;IACPF,GAAG,EAAE,IAAK;IACVD,IAAI,EAAE,EAAG;IACTI,QAAQ,EAAE,IAAAC,oBAAM,EAAC,UAAU,CAAE;IAC7BC,UAAU,EAAE,CAAC,WAAW,EAAE,WAAW;EAAE,EACvC,CACK;AAEb,CAAC;AAAAX,OAAA,CAAAC,OAAA,GAAAA,OAAA;AAdYA,OAAO,CAAAW,WAAA;AAgBb,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;EAC/B,oBACEzF,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAAC1E,MAAA,CAAAsF,SAAS;IACRC,KAAK,EAAC,MAAM;IACZC,MAAM,EAAC,MAAM;IACbC,WAAW,EAAE;MAAEF,KAAK,EAAE,GAAG;MAAEC,MAAM,EAAE,GAAG;MAAEE,EAAE,EAAE;IAAS;EAAE,gBAEvD9F,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAAC3E,IAAA,CAAA4F,GAAG;IAACJ,KAAK,EAAE,GAAI;IAACC,MAAM,EAAE;EAAI,gBAC3B5F,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAACzE,MAAA,CAAA8E,KAAK;IAACC,GAAG,EAAE,CAAE;IAACF,GAAG,EAAE,IAAK;IAACD,IAAI,EAAE,EAAG;IAACI,QAAQ,EAAE,IAAAC,oBAAM,EAAC,UAAU;EAAE,EAAG,CAChE,CACI;AAEhB,CAAC;AAAAV,OAAA,CAAAa,WAAA,GAAAA,WAAA;AAZYA,WAAW,CAAAD,WAAA;AAcjB,IAAMQ,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;EAChC,IAAAC,SAAA,GAAwB,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAAC,UAAA,GAAAhE,cAAA,CAAA8D,SAAA;IAAhCG,IAAI,GAAAD,UAAA;IAAEE,OAAO,GAAAF,UAAA;EACpB,oBACEnG,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAAA9E,MAAA,CAAAoB,OAAA,CAAAkF,QAAA,qBACEtG,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAACnE,OAAA,CAAA4F,MAAM;IACLC,OAAO,EAAE,SAAAA,QAAA,EAAM;MACbH,OAAO,CAAC,IAAI,CAAC;IACf;EAAE,GACH,MAED,CAAS,eAETrG,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAACpE,OAAA,CAAA+F,MAAM;IACLL,IAAI,EAAEA,IAAK;IACXM,OAAO,EAAE,SAAAA,QAAA,EAAM;MACbL,OAAO,CAAC,KAAK,CAAC;IAChB;EAAE,gBAEFrG,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAAC3E,IAAA,CAAA4F,GAAG;IAACJ,KAAK,EAAE,GAAI;IAACgB,CAAC,EAAE;EAAE,gBACpB3G,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAACzE,MAAA,CAAA8E,KAAK;IAACC,GAAG,EAAE,CAAE;IAACF,GAAG,EAAE,IAAK;IAACD,IAAI,EAAE,EAAG;IAACI,QAAQ,EAAE,IAAAC,oBAAM,EAAC,UAAU;EAAE,EAAG,CAChE,CACC,CACR;AAEP,CAAC;AAAAV,OAAA,CAAAoB,YAAA,GAAAA,YAAA;AAEDA,YAAY,CAACY,KAAK,GAAG;EACnBC,UAAU,EAAE;IAAEC,SAAS,EAAE;MAAEC,OAAO,EAAE;IAAK;EAAE;AAC7C,CAAC;AAEM,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAA,EAAS;EAC7B,IAAAC,UAAA,GAAgC,IAAAf,eAAQ,EAAW,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;IAAAgB,UAAA,GAAA/E,cAAA,CAAA8E,UAAA;IAAAE,WAAA,GAAAhF,cAAA,CAAA+E,UAAA;IAAtD9B,GAAG,GAAA+B,WAAA;IAAEjC,GAAG,GAAAiC,WAAA;IAAGC,SAAS,GAAAF,UAAA;EAE5B,oBACElH,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAAC3E,IAAA,CAAA4F,GAAG;IAACY,CAAC,EAAE,CAAE;IAACU,MAAM,EAAC,WAAW;IAACC,WAAW,EAAC,SAAS;IAAC3B,KAAK,EAAE;EAAI,gBAC7D3F,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAACvE,KAAA,CAAAgH,IAAI,qBACHvH,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAACxE,aAAA,CAAAkH,YAAY;IAAC7C,KAAK,EAAC,KAAK;IAAC8C,KAAK,EAAC,MAAM;IAACC,IAAI,EAAE,CAAE;IAACpD,KAAK,EAAEc;EAAI,EAAG,eAE9DpF,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAACtE,OAAA,CAAAmH,MAAM;IAACC,CAAC,EAAE;EAAE,EAAG,eAEhB5H,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAACxE,aAAA,CAAAkH,YAAY;IAAC7C,KAAK,EAAC,KAAK;IAAC8C,KAAK,EAAC,MAAM;IAACC,IAAI,EAAE,CAAE;IAACpD,KAAK,EAAEY;EAAI,EAAG,CACzD,eAEPlF,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAACtE,OAAA,CAAAmH,MAAM;IAACE,CAAC,EAAE;EAAE,EAAG,eAEhB7H,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAACzE,MAAA,CAAA8E,KAAK;IACJC,GAAG,EAAE,CAAE;IACPF,GAAG,EAAE,KAAM;IACXD,IAAI,EAAE,GAAI;IACVX,KAAK,EAAE,CAACc,GAAG,EAAEF,GAAG,CAAE;IAClBG,QAAQ,EAAE+B;EAAU,EACpB,eAEFpH,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAACtE,OAAA,CAAAmH,MAAM;IAACE,CAAC,EAAE;EAAI,EAAG,eAElB7H,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAACvE,KAAA,CAAAgH,IAAI;IAACO,cAAc,EAAC;EAAe,gBAClC9H,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAACrE,KAAA,CAAAsH,IAAI;IAACC,OAAO,EAAC;EAAI,GAAC,IAAE,CAAO,eAE5BhI,MAAA,CAAAoB,OAAA,CAAA0D,aAAA,CAACrE,KAAA,CAAAsH,IAAI;IAACC,OAAO,EAAC;EAAI,GAAC,SAAO,CAAO,CAC5B,CACH;AAEV,CAAC;AAAApD,OAAA,CAAAoC,SAAA,GAAAA,SAAA;AAhCYA,SAAS,CAAAxB,WAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "37.0.1",
+  "version": "37.0.2",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -182,5 +182,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "d762882900d1c8c7571415a37506194a36711ae5"
+  "gitHead": "b8b4ff37c245d3e08a3bec359f05bae10205f718"
 }