@artsy/palette 45.13.1 → 45.14.0-canary.1497.33070.0

package/dist/esm/elements/SelectInput/SelectInputList.js

@@ -0,0 +1,138 @@
+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; }
+import React, { createRef, useEffect, useMemo, useRef, useState } from "react";
+import { Input } from "../Input";
+import { Clickable } from "../Clickable";
+import { Text, TextProps } from "../Text";
+import styled from "styled-components";
+import { themeGet } from "@styled-system/theme-get";
+import { Box } from "../Box";
+import { useKeyboardListNavigation } from "use-keyboard-list-navigation";
+import { useMouseActivity } from "../../utils/useMouseActivity";
+import { SelectInputProps } from "./SelectInput";
+
+/**
+ * The option structure for the list in the dropdown menu
+ *
+ * @interface Option
+ * @property {string} `text` is the content that will be displayed as selected option
+ * @property {string} `name` is the content that will be displayed in the dropdown list
+ * @property {string} `value` is the value that will be passed to onSelect
+ */
+
+export var SelectInputList = function SelectInputList(_ref) {
+  var enableSearch = _ref.enableSearch,
+    options = _ref.options,
+    onSelect = _ref.onSelect,
+    onClose = _ref.onClose,
+    _ref$optionTextMinWid = _ref.optionTextMinWidth,
+    optionTextMinWidth = _ref$optionTextMinWid === void 0 ? "8ch" : _ref$optionTextMinWid;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    query = _useState2[0],
+    setQuery = _useState2[1];
+  var optionsWithRefs = useMemo(function () {
+    return options.map(function (option) {
+      return {
+        option: option,
+        ref: /*#__PURE__*/createRef()
+      };
+    });
+  }, [options]);
+  var filteredOptionsWithRefs = useMemo(function () {
+    return optionsWithRefs.filter(function (option) {
+      return "".concat(option.option.name.toLowerCase(), " ").concat(option.option.countryCode).includes(query.toLowerCase());
+    });
+  }, [optionsWithRefs, query]);
+  var containerRef = useRef(null);
+  var _useKeyboardListNavig = useKeyboardListNavigation({
+      ref: containerRef,
+      list: filteredOptionsWithRefs,
+      waitForInteractive: true,
+      onEnter: function onEnter(_ref2) {
+        var element = _ref2.element,
+          event = _ref2.event;
+        event.preventDefault();
+        event.stopPropagation();
+        onSelect(element.option);
+        reset();
+      }
+    }),
+    reset = _useKeyboardListNavig.reset,
+    set = _useKeyboardListNavig.set,
+    index = _useKeyboardListNavig.index;
+  var _useMouseActivity = useMouseActivity(),
+    lastMouseMoveTimestamp = _useMouseActivity.lastMouseMoveTimestamp;
+  var handleMouseEnter = function handleMouseEnter(i) {
+    return function () {
+      var now = performance.now();
+
+      // 50ms mouse move window
+      if (now - lastMouseMoveTimestamp.current < 50) {
+        set({
+          cursor: i,
+          interactive: true
+        });
+      }
+    };
+  };
+
+  // Moves focus to different options when keyboard navigating using up/down
+  useEffect(function () {
+    var _option$ref, _option$ref$current;
+    var option = filteredOptionsWithRefs[index];
+    option === null || option === void 0 ? void 0 : (_option$ref = option.ref) === null || _option$ref === void 0 ? void 0 : (_option$ref$current = _option$ref.current) === null || _option$ref$current === void 0 ? void 0 : _option$ref$current.focus();
+  }, [index, filteredOptionsWithRefs]);
+  var handleKeyDown = function handleKeyDown(e) {
+    switch (e.key) {
+      case "Escape":
+        reset();
+        onClose();
+        break;
+    }
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: containerRef
+  }, enableSearch && /*#__PURE__*/React.createElement(Input, {
+    autoFocus: true,
+    placeholder: "Search",
+    value: query,
+    onChange: function onChange(e) {
+      setQuery(e.target.value);
+      reset();
+    },
+    onKeyDown: handleKeyDown
+  }), /*#__PURE__*/React.createElement(SelectInputListOptions, null, filteredOptionsWithRefs.map(function (_ref3, i) {
+    var option = _ref3.option,
+      ref = _ref3.ref;
+    return /*#__PURE__*/React.createElement(SelectInputListOption, {
+      key: option.value,
+      ref: ref,
+      role: "option",
+      onMouseEnter: handleMouseEnter(i),
+      onClick: function onClick() {
+        onSelect(option);
+      },
+      tabIndex: -1
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "sm",
+      minWidth: optionTextMinWidth
+    }, option.text), /*#__PURE__*/React.createElement(Text, {
+      variant: "sm"
+    }, option.name));
+  })));
+};
+SelectInputList.displayName = "SelectInputList";
+var SelectInputListOption = styled(Clickable).withConfig({
+  displayName: "SelectInputList__SelectInputListOption",
+  componentId: "sc-6qyhpt-0"
+})(["display:flex;width:100%;flex-direction:row;gap:", ";padding:", " 0;color:", ";&:focus{color:", ";text-decoration:underline;outline:none;}"], themeGet("space.0.5"), themeGet("space.1"), themeGet("colors.mono60"), themeGet("colors.blue100"));
+var SelectInputListOptions = styled(Box).withConfig({
+  displayName: "SelectInputList__SelectInputListOptions",
+  componentId: "sc-6qyhpt-1"
+})(["max-height:250px;overflow-y:auto;-webkit-overflow-scrolling:touch;"]);
+//# sourceMappingURL=SelectInputList.js.map

package/dist/esm/elements/SelectInput/SelectInputList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputList.js","names":["React","createRef","useEffect","useMemo","useRef","useState","Input","Clickable","Text","TextProps","styled","themeGet","Box","useKeyboardListNavigation","useMouseActivity","SelectInputProps","SelectInputList","_ref","enableSearch","options","onSelect","onClose","_ref$optionTextMinWid","optionTextMinWidth","_useState","_useState2","_slicedToArray","query","setQuery","optionsWithRefs","map","option","ref","filteredOptionsWithRefs","filter","concat","name","toLowerCase","countryCode","includes","containerRef","_useKeyboardListNavig","list","waitForInteractive","onEnter","_ref2","element","event","preventDefault","stopPropagation","reset","set","index","_useMouseActivity","lastMouseMoveTimestamp","handleMouseEnter","i","now","performance","current","cursor","interactive","_option$ref","_option$ref$current","focus","handleKeyDown","e","key","createElement","autoFocus","placeholder","value","onChange","target","onKeyDown","SelectInputListOptions","_ref3","SelectInputListOption","role","onMouseEnter","onClick","tabIndex","variant","minWidth","text","displayName","withConfig","componentId"],"sources":["../../../../src/elements/SelectInput/SelectInputList.tsx"],"sourcesContent":["import React, { createRef, useEffect, useMemo, useRef, useState } from \"react\"\nimport { Input } from \"../Input\"\nimport { Clickable } from \"../Clickable\"\nimport { Text, TextProps } from \"../Text\"\nimport styled from \"styled-components\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { Box } from \"../Box\"\nimport { useKeyboardListNavigation } from \"use-keyboard-list-navigation\"\nimport { useMouseActivity } from \"../../utils/useMouseActivity\"\nimport { SelectInputProps } from \"./SelectInput\"\n\n/**\n * The option structure for the list in the dropdown menu\n *\n * @interface Option\n * @property {string} `text` is the content that will be displayed as selected option\n * @property {string} `name` is the content that will be displayed in the dropdown list\n * @property {string} `value` is the value that will be passed to onSelect\n */\nexport interface Option {\n  text: string\n  name: string\n  value: string\n  countryCode?: string\n  flag?: string\n}\n\nexport interface SelectInputListProps {\n  enableSearch?: SelectInputProps[\"enableSearch\"]\n  options: Option[]\n  onSelect: (option: Option) => void\n  onClose: () => void\n  optionTextMinWidth?: TextProps[\"minWidth\"]\n}\n\nexport const SelectInputList = ({\n  enableSearch,\n  options,\n  onSelect,\n  onClose,\n  optionTextMinWidth = \"8ch\",\n}: SelectInputListProps) => {\n  const [query, setQuery] = useState(\"\")\n\n  const optionsWithRefs = useMemo(() => {\n    return options.map((option) => ({\n      option,\n      ref: createRef<HTMLButtonElement>(),\n    }))\n  }, [options])\n\n  const filteredOptionsWithRefs = useMemo(() => {\n    return optionsWithRefs.filter((option) =>\n      `${option.option.name.toLowerCase()} ${\n        option.option.countryCode\n      }`.includes(query.toLowerCase())\n    )\n  }, [optionsWithRefs, query])\n\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  const { reset, set, index } = useKeyboardListNavigation({\n    ref: containerRef,\n    list: filteredOptionsWithRefs,\n    waitForInteractive: true,\n    onEnter: ({ element, event }) => {\n      event.preventDefault()\n      event.stopPropagation()\n\n      onSelect(element.option)\n      reset()\n    },\n  })\n\n  const { lastMouseMoveTimestamp } = useMouseActivity()\n\n  const handleMouseEnter = (i: number) => () => {\n    const now = performance.now()\n\n    // 50ms mouse move window\n    if (now - lastMouseMoveTimestamp.current < 50) {\n      set({ cursor: i, interactive: true })\n    }\n  }\n\n  // Moves focus to different options when keyboard navigating using up/down\n  useEffect(() => {\n    const option = filteredOptionsWithRefs[index]\n    option?.ref?.current?.focus()\n  }, [index, filteredOptionsWithRefs])\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (e.key) {\n      case \"Escape\":\n        reset()\n        onClose()\n        break\n    }\n  }\n\n  return (\n    <Box ref={containerRef}>\n      {enableSearch && (\n        <Input\n          autoFocus\n          placeholder=\"Search\"\n          value={query}\n          onChange={(e) => {\n            setQuery(e.target.value)\n            reset()\n          }}\n          onKeyDown={handleKeyDown}\n        />\n      )}\n\n      <SelectInputListOptions>\n        {filteredOptionsWithRefs.map(({ option, ref }, i) => (\n          <SelectInputListOption\n            key={option.value}\n            ref={ref}\n            role=\"option\"\n            onMouseEnter={handleMouseEnter(i)}\n            onClick={() => {\n              onSelect(option)\n            }}\n            tabIndex={-1}\n          >\n            <Text variant=\"sm\" minWidth={optionTextMinWidth}>\n              {option.text}\n            </Text>\n\n            <Text variant=\"sm\">{option.name}</Text>\n          </SelectInputListOption>\n        ))}\n      </SelectInputListOptions>\n    </Box>\n  )\n}\n\nconst SelectInputListOption = styled(Clickable)`\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  gap: ${themeGet(\"space.0.5\")};\n  padding: ${themeGet(\"space.1\")} 0;\n  color: ${themeGet(\"colors.mono60\")};\n  &:focus {\n    color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n    outline: none;\n  }\n`\n\nconst SelectInputListOptions = styled(Box)`\n  max-height: 250px;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n"],"mappings":"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"}

package/dist/esm/elements/SelectInput/SelectInputList.story.js

@@ -0,0 +1,61 @@
+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); }
+import React from "react";
+import { SelectInputList } from "./SelectInputList";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: SelectInputList,
+  title: "Components/SelectInputList",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A dropdown list component for select inputs, supporting search and keyboard navigation."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+var EXAMPLE_COUNTRIES = [{
+  text: "🇦🇫 +93",
+  name: "Afghanistan",
+  value: "af",
+  countryCode: "+93",
+  flag: "🇦🇫"
+}, {
+  text: "🇦🇱 +355",
+  name: "Albania",
+  value: "al",
+  countryCode: "+355",
+  flag: "🇦🇱"
+}, {
+  text: "🇩🇿 +213",
+  name: "Algeria",
+  value: "dz",
+  countryCode: "+213",
+  flag: "🇩🇿"
+}];
+export var Default = {
+  args: {
+    options: EXAMPLE_COUNTRIES
+  },
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement(SelectInputList, _extends({}, args, {
+      onSelect: function onSelect(option) {
+        return console.log(option);
+      },
+      onClose: function onClose() {
+        return console.log("close");
+      }
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Default SelectInputList with example countries."
+      }
+    }
+  }
+};
+//# sourceMappingURL=SelectInputList.story.js.map

package/dist/esm/elements/SelectInput/SelectInputList.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputList.story.js","names":["React","SelectInputList","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","EXAMPLE_COUNTRIES","text","name","value","countryCode","flag","Default","args","options","render","createElement","_extends","onSelect","option","console","log","onClose","story"],"sources":["../../../../src/elements/SelectInput/SelectInputList.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { SelectInputList } from \"./SelectInputList\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: SelectInputList,\n  title: \"Components/SelectInputList\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A dropdown list component for select inputs, supporting search and keyboard navigation.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nconst EXAMPLE_COUNTRIES = [\n  {\n    text: \"🇦🇫 +93\",\n    name: \"Afghanistan\",\n    value: \"af\",\n    countryCode: \"+93\",\n    flag: \"🇦🇫\",\n  },\n  {\n    text: \"🇦🇱 +355\",\n    name: \"Albania\",\n    value: \"al\",\n    countryCode: \"+355\",\n    flag: \"🇦🇱\",\n  },\n  {\n    text: \"🇩🇿 +213\",\n    name: \"Algeria\",\n    value: \"dz\",\n    countryCode: \"+213\",\n    flag: \"🇩🇿\",\n  },\n]\n\nexport const Default = {\n  args: {\n    options: EXAMPLE_COUNTRIES,\n  },\n  render: (args) => (\n    <SelectInputList\n      {...args}\n      onSelect={(option) => console.log(option)}\n      onClose={() => console.log(\"close\")}\n    />\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Default SelectInputList with example countries.\",\n      },\n    },\n  },\n}\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AACxB,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEF,eAAe;EAC1BG,KAAK,EAAE,4BAA4B;EACnCC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ;IACF,CAAC;IACDM,QAAQ,EAAE;MACRC,OAAO,EAAER;IACX;EACF;AACF,CAAC;AAED,IAAMS,iBAAiB,GAAG,CACxB;EACEC,IAAI,EAAE,UAAU;EAChBC,IAAI,EAAE,aAAa;EACnBC,KAAK,EAAE,IAAI;EACXC,WAAW,EAAE,KAAK;EAClBC,IAAI,EAAE;AACR,CAAC,EACD;EACEJ,IAAI,EAAE,WAAW;EACjBC,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE,IAAI;EACXC,WAAW,EAAE,MAAM;EACnBC,IAAI,EAAE;AACR,CAAC,EACD;EACEJ,IAAI,EAAE,WAAW;EACjBC,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE,IAAI;EACXC,WAAW,EAAE,MAAM;EACnBC,IAAI,EAAE;AACR,CAAC,CACF;AAED,OAAO,IAAMC,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,OAAO,EAAER;EACX,CAAC;EACDS,MAAM,EAAE,SAARA,MAAMA,CAAGF,IAAI;IAAA,oBACXlB,KAAA,CAAAqB,aAAA,CAACpB,eAAe,EAAAqB,QAAA,KACVJ,IAAI;MACRK,QAAQ,EAAE,SAAVA,QAAQA,CAAGC,MAAM;QAAA,OAAKC,OAAO,CAACC,GAAG,CAACF,MAAM,CAAC;MAAA,CAAC;MAC1CG,OAAO,EAAE,SAATA,OAAOA,CAAA;QAAA,OAAQF,OAAO,CAACC,GAAG,CAAC,OAAO,CAAC;MAAA;IAAC,GACpC;EAAA,CACH;EACDpB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXoB,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

package/dist/esm/elements/SelectInput/index.js

@@ -0,0 +1,2 @@
+export * from "./SelectInput";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/SelectInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/SelectInput/index.ts"],"sourcesContent":["export * from \"./SelectInput\"\n"],"mappings":"AAAA"}

package/dist/esm/elements/SelectInput/tokens.js

@@ -0,0 +1,12 @@
+import { themeGet } from "@styled-system/theme-get";
+import { css } from "styled-components";
+export var SELECT_INPUT_STATES = {
+  default: css(["> div{border-color:", ";}> input{border-color:", ";outline:none;}> input::placeholder,> label{color:", ";}"], themeGet("colors.mono30"), themeGet("colors.mono30"), themeGet("colors.mono60")),
+  active: css(["> div,> button,> input{border-color:", ";color:", ";}> input::placeholder{color:", ";}> label{color:", ";}"], themeGet("colors.blue100"), themeGet("colors.mono100"), themeGet("colors.mono100"), themeGet("colors.blue100")),
+  focus: css(["> div,> button,> input{border-color:", ";}> input::placeholder{color:", ";}> label{color:", ";}"], themeGet("colors.blue100"), themeGet("colors.mono60"), themeGet("colors.blue100")),
+  hover: css(["> div,> button,> input{border-color:", ";}> input::placeholder,> label{color:", ";}"], themeGet("colors.mono60"), themeGet("colors.mono60")),
+  completed: css(["> div,> button,> input{border-color:", ";color:", ";}> label{color:", ";}"], themeGet("colors.mono60"), themeGet("colors.mono100"), themeGet("colors.mono60")),
+  disabled: css(["> div,> input{cursor:default;background-color:transparent;border-color:", ";}> input::placeholder,> label{color:", ";}"], themeGet("colors.mono30"), themeGet("colors.mono30")),
+  error: css(["> div,> button,> input{border-color:", ";}> label{color:", ";}"], themeGet("colors.red100"), themeGet("colors.red100"))
+};
+//# sourceMappingURL=tokens.js.map

package/dist/esm/elements/SelectInput/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":["themeGet","css","SELECT_INPUT_STATES","default","active","focus","hover","completed","disabled","error"],"sources":["../../../../src/elements/SelectInput/tokens.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\n\nexport const SELECT_INPUT_STATES = {\n  default: css`\n    > div {\n      border-color: ${themeGet(\"colors.mono30\")};\n    }\n\n    > input {\n      border-color: ${themeGet(\"colors.mono30\")};\n      outline: none;\n    }\n\n    > input::placeholder,\n    > label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n  `,\n  active: css`\n    > div,\n    > button,\n    > input {\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    > input::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    > label {\n      color: ${themeGet(\"colors.blue100\")};\n    }\n  `,\n  focus: css`\n    > div,\n    > button,\n    > input {\n      border-color: ${themeGet(\"colors.blue100\")};\n    }\n\n    > input::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    > label {\n      color: ${themeGet(\"colors.blue100\")};\n    }\n  `,\n  hover: css`\n    > div,\n    > button,\n    > input {\n      border-color: ${themeGet(\"colors.mono60\")};\n    }\n\n    > input::placeholder,\n    > label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n  `,\n  completed: css`\n    > div,\n    > button,\n    > input {\n      border-color: ${themeGet(\"colors.mono60\")};\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    > label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n  `,\n  disabled: css`\n    > div,\n    > input {\n      cursor: default;\n      background-color: transparent;\n      border-color: ${themeGet(\"colors.mono30\")};\n    }\n\n    > input::placeholder,\n    > label {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n  `,\n  error: css`\n    > div,\n    > button,\n    > input {\n      border-color: ${themeGet(\"colors.red100\")};\n    }\n\n    > label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAAQ,mBAAmB;AAEvC,OAAO,IAAMC,mBAAmB,GAAG;EACjCC,OAAO,EAAEF,GAAG,iHAEQD,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EAMhCA,QAAQ,CAAC,eAAe,CAAC,CAErC;EACDI,MAAM,EAAEH,GAAG,iHAISD,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,CAEtC;EACDK,KAAK,EAAEJ,GAAG,sGAIUD,QAAQ,CAAC,gBAAgB,CAAC,EAIjCA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,gBAAgB,CAAC,CAEtC;EACDM,KAAK,EAAEL,GAAG,0FAIUD,QAAQ,CAAC,eAAe,CAAC,EAKhCA,QAAQ,CAAC,eAAe,CAAC,CAErC;EACDO,SAAS,EAAEN,GAAG,gFAIMD,QAAQ,CAAC,eAAe,CAAC,EAChCA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,eAAe,CAAC,CAErC;EACDQ,QAAQ,EAAEP,GAAG,6HAKOD,QAAQ,CAAC,eAAe,CAAC,EAKhCA,QAAQ,CAAC,eAAe,CAAC,CAErC;EACDS,KAAK,EAAER,GAAG,qEAIUD,QAAQ,CAAC,eAAe,CAAC,EAIhCA,QAAQ,CAAC,eAAe,CAAC;AAGxC,CAAC"}

package/dist/esm/elements/Separator/Separator.js

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import { border, BorderProps, color, ColorProps, compose, space, SpaceProps, width, WidthProps } from "styled-system";
+/**
+ * A horizontal divider whose width and spacing can be adjusted
+ */
+export var Separator = styled.div.withConfig({
+  displayName: "Separator",
+  componentId: "sc-49gck8-0"
+})(["border-width:1px;border-style:solid;border-bottom-width:0;background-color:transparent;border-color:currentColor;margin:0;", ";"], compose(space, width, border, color));
+Separator.defaultProps = {
+  width: "100%",
+  color: "mono10"
+};
+//# sourceMappingURL=Separator.js.map

package/dist/esm/elements/Separator/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","names":["styled","border","BorderProps","color","ColorProps","compose","space","SpaceProps","width","WidthProps","Separator","div","withConfig","displayName","componentId","defaultProps"],"sources":["../../../../src/elements/Separator/Separator.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport {\n  border,\n  BorderProps,\n  color,\n  ColorProps,\n  compose,\n  space,\n  SpaceProps,\n  width,\n  WidthProps,\n} from \"styled-system\"\n\nexport interface SeparatorProps\n  extends SpaceProps,\n    WidthProps,\n    BorderProps,\n    ColorProps {}\n\n/**\n * A horizontal divider whose width and spacing can be adjusted\n */\nexport const Separator = styled.div<SeparatorProps>`\n  border-width: 1px;\n  border-style: solid;\n  border-bottom-width: 0;\n  background-color: transparent;\n  border-color: currentColor;\n  margin: 0;\n  ${compose(space, width, border, color)};\n`\n\nSeparator.defaultProps = {\n  width: \"100%\",\n  color: \"mono10\",\n}\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SACEC,MAAM,EACNC,WAAW,EACXC,KAAK,EACLC,UAAU,EACVC,OAAO,EACPC,KAAK,EACLC,UAAU,EACVC,KAAK,EACLC,UAAU,QACL,eAAe;AAQtB;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAGV,MAAM,CAACW,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wIAO/BT,OAAO,CAACC,KAAK,EAAEE,KAAK,EAAEP,MAAM,EAAEE,KAAK,CAAC,CACvC;AAEDO,SAAS,CAACK,YAAY,GAAG;EACvBP,KAAK,EAAE,MAAM;EACbL,KAAK,EAAE;AACT,CAAC"}

package/dist/esm/elements/Separator/Separator.story.js

@@ -0,0 +1,70 @@
+import { Separator } from "./Separator";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: Separator,
+  title: "Components/Separator",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A horizontal line separator component with customizable colors and styling."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    as: "hr"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic horizontal line separator."
+      }
+    }
+  }
+};
+export var WithColor = {
+  args: {
+    as: "hr",
+    color: "mono30"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Separator with custom color."
+      }
+    }
+  }
+};
+export var WithBorderColor = {
+  args: {
+    as: "hr",
+    borderColor: "red100"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Separator with custom border color."
+      }
+    }
+  }
+};
+export var WithSpacing = {
+  args: {
+    as: "hr",
+    borderWidth: 5,
+    my: 2
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Separator with custom width and vertical spacing."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Separator.story.js.map

package/dist/esm/elements/Separator/Separator.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.story.js","names":["Separator","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","as","story","WithColor","color","WithBorderColor","borderColor","WithSpacing","borderWidth","my"],"sources":["../../../../src/elements/Separator/Separator.story.tsx"],"sourcesContent":["import { Separator } from \"./Separator\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Separator,\n  title: \"Components/Separator\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A horizontal line separator component with customizable colors and styling.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    as: \"hr\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic horizontal line separator.\",\n      },\n    },\n  },\n}\n\nexport const WithColor = {\n  args: {\n    as: \"hr\",\n    color: \"mono30\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Separator with custom color.\",\n      },\n    },\n  },\n}\n\nexport const WithBorderColor = {\n  args: {\n    as: \"hr\",\n    borderColor: \"red100\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Separator with custom border color.\",\n      },\n    },\n  },\n}\n\nexport const WithSpacing = {\n  args: {\n    as: \"hr\",\n    borderWidth: 5,\n    my: 2,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Separator with custom width and vertical spacing.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,SAASA,SAAS;AAClB,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEF,SAAS;EACpBG,KAAK,EAAE,sBAAsB;EAC7BC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ;IACF,CAAC;IACDM,QAAQ,EAAE;MACNC,OAAO,EAAER;IACX;EACJ;AACF,CAAC;AAED,OAAO,IAAMS,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,EAAE,EAAE;EACN,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,SAAS,GAAG;EACvBH,IAAI,EAAE;IACJC,EAAE,EAAE,IAAI;IACRG,KAAK,EAAE;EACT,CAAC;EACDV,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMG,eAAe,GAAG;EAC7BL,IAAI,EAAE;IACJC,EAAE,EAAE,IAAI;IACRK,WAAW,EAAE;EACf,CAAC;EACDZ,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMK,WAAW,GAAG;EACzBP,IAAI,EAAE;IACJC,EAAE,EAAE,IAAI;IACRO,WAAW,EAAE,CAAC;IACdC,EAAE,EAAE;EACN,CAAC;EACDf,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

package/dist/esm/elements/Separator/index.js

@@ -0,0 +1,2 @@
+export * from "./Separator";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/Separator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/Separator/index.tsx"],"sourcesContent":["export * from \"./Separator\"\n"],"mappings":"AAAA"}

package/dist/esm/elements/Shelf/Shelf.js

@@ -0,0 +1,242 @@
+var _excluded = ["alignItems", "showProgress", "snap", "children", "onChange"];
+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."); }
+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; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { Children, createRef, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import styled from "styled-components";
+import { useCursor } from "use-cursor";
+import { visuallyDisableScrollbar } from "../../helpers/visuallyDisableScrollbar";
+import { Box, BoxProps } from "../Box";
+import { CELL_GAP_PADDING_AMOUNT, paginateCarousel } from "../Carousel";
+import { FlexProps } from "../Flex";
+import { FullBleed } from "../FullBleed";
+import { ShelfNext, ShelfPrevious } from "./ShelfNavigation";
+import { ShelfScrollBar } from "./ShelfScrollBar";
+
+/** ShelfProps */
+
+/**
+ * A Shelf is a new kind of carousel...
+ */
+export var Shelf = function Shelf(_ref) {
+  var _ref$alignItems = _ref.alignItems,
+    alignItems = _ref$alignItems === void 0 ? "flex-end" : _ref$alignItems,
+    _ref$showProgress = _ref.showProgress,
+    showProgress = _ref$showProgress === void 0 ? true : _ref$showProgress,
+    _ref$snap = _ref.snap,
+    snap = _ref$snap === void 0 ? "none" : _ref$snap,
+    children = _ref.children,
+    onChange = _ref.onChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var cells = useMemo(function () {
+    return Children.toArray(children).filter(isValidElement).map(function (child) {
+      return {
+        child: child,
+        ref: /*#__PURE__*/createRef()
+      };
+    });
+  }, [children]);
+  var containerRef = useRef(null);
+  var viewportRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    mounted = _useState2[0],
+    setMounted = _useState2[1];
+  var _useState3 = useState([0]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pages = _useState4[0],
+    setPages = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    offset = _useState6[0],
+    setOffset = _useState6[1];
+  var _useState7 = useState(true),
+    _useState8 = _slicedToArray(_useState7, 2),
+    atStart = _useState8[0],
+    setAtStart = _useState8[1];
+  var init = useCallback(function () {
+    if (containerRef.current === null) return;
+    var container = containerRef.current;
+
+    // Set page-stops
+    var values = cells.map(function (_ref2, i) {
+      var ref = _ref2.ref;
+      // If we have an offset we actually want to subtract it from
+      // the first and last elements.
+      if (offset !== 0 && (i === 0 || i === cells.length - 1)) {
+        return Math.ceil(ref.current.clientWidth - offset);
+      }
+      return ref.current.clientWidth;
+    });
+    setPages(paginateCarousel({
+      // Here we use the container width instead of the viewport width.
+      // The viewport has been extended to the full width of the window;
+      // we want to scroll to the parent boundaries instead.
+      viewport: container.clientWidth,
+      values: values
+    }));
+
+    // Set offset to accomodate full-bleed and line up initially with page-margins
+    var _container$getBoundin = container.getBoundingClientRect(),
+      x = _container$getBoundin.x;
+    setOffset(x);
+    setMounted(true);
+  }, [cells, offset]);
+  useEffect(function () {
+    init();
+    window.addEventListener("resize", init);
+    return function () {
+      window.removeEventListener("resize", init);
+    };
+  }, [init]);
+  var _useCursor = useCursor({
+      max: pages.length
+    }),
+    pageIndex = _useCursor.index,
+    setCursor = _useCursor.setCursor;
+
+  // Keep page cursor in sync with scroll position
+  useEffect(function () {
+    if (viewportRef.current === null) return;
+    var viewport = viewportRef.current;
+    var handler = function handler() {
+      var nearestPage = pages.find(function (currentPage, i) {
+        var _pages;
+        var nextPage = (_pages = pages[i + 1]) !== null && _pages !== void 0 ? _pages : Infinity;
+        return viewport.scrollLeft >= currentPage && viewport.scrollLeft < nextPage;
+      });
+      setCursor(pages.indexOf(nearestPage));
+      setAtStart(viewport.scrollLeft === 0);
+    };
+    viewport.addEventListener("scroll", handler, {
+      passive: true
+    });
+    return function () {
+      viewport.removeEventListener("scroll", handler);
+    };
+  }, [pages, setCursor]);
+
+  // Announce page changes
+  useEffect(function () {
+    onChange && onChange(pageIndex);
+  }, [onChange, pageIndex]);
+
+  // Scroll to a specific page-stop
+  var scrollToPage = function scrollToPage(index) {
+    var xPosition = pages[index];
+    scrollTo(xPosition);
+  };
+  var scrollTo = function scrollTo(xPosition) {
+    if (viewportRef.current === null) return;
+    var viewport = viewportRef.current;
+    if (viewport.scrollTo) {
+      viewport.scrollTo({
+        left: xPosition,
+        behavior: "smooth"
+      });
+      return;
+    }
+    viewport.scrollLeft = xPosition;
+  };
+
+  // One side-effect of scrolling to the next page index instead of
+  // setting it directly is that you can't scroll to the next one via click until
+  // you've arrived. We may want to reconsider this approach; though this is the
+  // simplest way to keep these values in sync with one another.
+  var handleNext = function handleNext() {
+    scrollToPage(pageIndex + 1);
+  };
+  var handlePrev = function handlePrev() {
+    if (pageIndex === 0) {
+      scrollTo(0);
+      return;
+    }
+    scrollToPage(pageIndex - 1);
+  };
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    ref: containerRef
+  }, rest), /*#__PURE__*/React.createElement(Nav, {
+    as: "nav"
+    // We can't position relative to the FullBleed rail —
+    // so offset the bottom by the bottom margin + the height of the scrollbar.
+    ,
+    bottom: [23, 63]
+  }, /*#__PURE__*/React.createElement(Previous, {
+    onClick: handlePrev,
+    disabled: atStart,
+    "aria-label": "Previous page"
+  }), /*#__PURE__*/React.createElement(Next, {
+    onClick: handleNext,
+    disabled: pageIndex === pages.length - 1,
+    "aria-label": "Next page"
+  })), /*#__PURE__*/React.createElement(FullBleed
+  // To prevent any page jank we initially partially disable this component
+  // so that content is left aligned with the parent container and then once
+  // we have the offset and page values; we reset it to actually full-bleed.
+  // The `offset` will push the content up to the parent margin.
+  , !mounted ? {
+    left: null,
+    right: null,
+    marginLeft: null
+  } : {}, /*#__PURE__*/React.createElement(Viewport, {
+    ref: viewportRef
+  }, /*#__PURE__*/React.createElement(Rail, {
+    as: "ul",
+    position: "relative",
+    alignItems: alignItems,
+    mb: [2, 6]
+  }, cells.map(function (_ref3, i) {
+    var child = _ref3.child,
+      ref = _ref3.ref;
+    var isFirst = i === 0;
+    var isLast = i === cells.length - 1;
+    return /*#__PURE__*/React.createElement(Cell, {
+      as: "li",
+      key: i,
+      ref: ref,
+      pl: isFirst ? offset : undefined,
+      pr: !isLast ? CELL_GAP_PADDING_AMOUNT : offset,
+      style: {
+        scrollSnapAlign: snap
+      }
+    }, child);
+  })))), showProgress && /*#__PURE__*/React.createElement(ShelfScrollBar, {
+    viewport: viewportRef.current
+  }));
+};
+Shelf.displayName = "Shelf";
+var Container = styled(Box).withConfig({
+  displayName: "Shelf__Container",
+  componentId: "sc-1kdkue-0"
+})(["position:relative;width:100%;> nav{transition:opacity 250ms;transition-delay:100ms;opacity:0;}&:hover{> nav{opacity:1;}}"]);
+var Nav = styled(Box).withConfig({
+  displayName: "Shelf__Nav",
+  componentId: "sc-1kdkue-1"
+})(["pointer-events:none;position:absolute;z-index:1;top:0;right:0;left:0;"]);
+var Viewport = styled(Box).withConfig({
+  displayName: "Shelf__Viewport",
+  componentId: "sc-1kdkue-2"
+})(["display:flex;height:100%;padding:0;list-style:none;overflow-y:hidden;overflow-x:scroll;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;", ""], visuallyDisableScrollbar);
+var Rail = styled(Box).withConfig({
+  displayName: "Shelf__Rail",
+  componentId: "sc-1kdkue-3"
+})(["display:flex;width:100%;height:100%;margin-top:0;margin-left:0;margin-right:0;padding:0;list-style:none;white-space:nowrap;"]);
+var Cell = styled(Box).withConfig({
+  displayName: "Shelf__Cell",
+  componentId: "sc-1kdkue-4"
+})(["white-space:normal;"]);
+var Next = styled(ShelfNext).withConfig({
+  displayName: "Shelf__Next",
+  componentId: "sc-1kdkue-5"
+})(["position:absolute;top:50%;transform:translateY(-50%);right:0;@media (hover:none){display:none;}"]);
+var Previous = styled(ShelfPrevious).withConfig({
+  displayName: "Shelf__Previous",
+  componentId: "sc-1kdkue-6"
+})(["position:absolute;top:50%;transform:translateY(-50%);left:0;@media (hover:none){display:none;}"]);
+//# sourceMappingURL=Shelf.js.map