@artsy/palette 45.13.1 → 45.14.0-canary.1497.33070.0

package/dist/esm/elements/Stepper/Stepper.js

@@ -0,0 +1,79 @@
+var _excluded = ["currentStepIndex", "disableNavigation", "initialTabIndex", "children", "mb", "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 _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 from "react";
+import CheckmarkIcon from "@artsy/icons/CheckmarkIcon";
+import ChevronRightIcon from "@artsy/icons/ChevronRightIcon";
+import { BaseTab, BaseTabs } from "../BaseTabs";
+import { Box } from "../Box";
+import { Clickable } from "../Clickable";
+import { Flex } from "../Flex";
+import { TabProps, TabsProps, useTabs } from "../Tabs";
+/** Stepper */
+export var Stepper = function Stepper(_ref) {
+  var currentStepIndex = _ref.currentStepIndex,
+    disableNavigation = _ref.disableNavigation,
+    _ref$initialTabIndex = _ref.initialTabIndex,
+    initialTabIndex = _ref$initialTabIndex === void 0 ? 0 : _ref$initialTabIndex,
+    children = _ref.children,
+    _ref$mb = _ref.mb,
+    mb = _ref$mb === void 0 ? 2 : _ref$mb,
+    onChange = _ref.onChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useTabs = useTabs({
+      children: children,
+      initialTabIndex: initialTabIndex,
+      onChange: onChange
+    }),
+    tabs = _useTabs.tabs,
+    activeTabIndex = _useTabs.activeTabIndex,
+    handleClick = _useTabs.handleClick,
+    ref = _useTabs.ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseTabs, _extends({
+    ref: ref,
+    fill: true,
+    mb: mb
+  }, rest), tabs.map(function (tab, i) {
+    return /*#__PURE__*/React.createElement(BaseTab, {
+      key: i,
+      as: Clickable,
+      ref: tab.ref,
+      "aria-selected": i === activeTabIndex,
+      disabled: disableNavigation || i > currentStepIndex,
+      onClick: handleClick(i),
+      active: i === activeTabIndex,
+      variant: "sm",
+      justifyContent: "flex-start"
+    }, /*#__PURE__*/React.createElement(Flex, {
+      alignItems: "center",
+      justifyContent: "space-between",
+      flex: 1
+    }, /*#__PURE__*/React.createElement(Flex, {
+      alignItems: "center"
+    }, /*#__PURE__*/React.createElement(Box, {
+      color: i > currentStepIndex ? "mono30" : undefined
+    }, tab.child.props.name), currentStepIndex > i && /*#__PURE__*/React.createElement(CheckmarkIcon, {
+      width: 16,
+      height: 16,
+      color: "green100",
+      ml: 1
+    })), /*#__PURE__*/React.createElement(ChevronRightIcon, {
+      fill: "mono60",
+      height: 10,
+      ml: 1
+    })));
+  })), tabs[activeTabIndex].child);
+};
+
+/** StepProps */
+
+/**
+ * An individual step.
+ * Does nothing on its own; props are dealt with inside of Steps.
+ */
+export var Step = function Step(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+//# sourceMappingURL=Stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","names":["React","CheckmarkIcon","ChevronRightIcon","BaseTab","BaseTabs","Box","Clickable","Flex","TabProps","TabsProps","useTabs","Stepper","_ref","currentStepIndex","disableNavigation","_ref$initialTabIndex","initialTabIndex","children","_ref$mb","mb","onChange","rest","_objectWithoutProperties","_excluded","_useTabs","tabs","activeTabIndex","handleClick","ref","createElement","Fragment","_extends","fill","map","tab","i","key","as","disabled","onClick","active","variant","justifyContent","alignItems","flex","color","undefined","child","props","name","width","height","ml","Step","_ref2"],"sources":["../../../../src/elements/Stepper/Stepper.tsx"],"sourcesContent":["import React from \"react\"\nimport CheckmarkIcon from \"@artsy/icons/CheckmarkIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { BaseTab, BaseTabs } from \"../BaseTabs\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { TabProps, TabsProps, useTabs } from \"../Tabs\"\n\nexport interface StepperProps extends TabsProps {\n  /** The step user currently is at (e.g. previous steps completed) */\n  currentStepIndex: number\n  /** Prevents the tabs from being directly clickable */\n  disableNavigation?: boolean\n}\n\n/** Stepper */\nexport const Stepper: React.FC<React.PropsWithChildren<StepperProps>> = ({\n  currentStepIndex,\n  disableNavigation,\n  initialTabIndex = 0,\n  children,\n  mb = 2,\n  onChange,\n  ...rest\n}) => {\n  const { tabs, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n    onChange,\n  })\n\n  return (\n    <>\n      <BaseTabs ref={ref} fill mb={mb} {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <BaseTab\n              key={i}\n              as={Clickable}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              disabled={disableNavigation || i > currentStepIndex}\n              onClick={handleClick(i)}\n              active={i === activeTabIndex}\n              variant=\"sm\"\n              justifyContent=\"flex-start\"\n            >\n              <Flex alignItems=\"center\" justifyContent=\"space-between\" flex={1}>\n                <Flex alignItems=\"center\">\n                  <Box color={i > currentStepIndex ? \"mono30\" : undefined}>\n                    {tab.child.props.name}\n                  </Box>\n\n                  {currentStepIndex > i && (\n                    <CheckmarkIcon\n                      width={16}\n                      height={16}\n                      color=\"green100\"\n                      ml={1}\n                    />\n                  )}\n                </Flex>\n\n                <ChevronRightIcon fill=\"mono60\" height={10} ml={1} />\n              </Flex>\n            </BaseTab>\n          )\n        })}\n      </BaseTabs>\n\n      {tabs[activeTabIndex].child}\n    </>\n  )\n}\n\n/** StepProps */\nexport type StepProps = TabProps\n\n/**\n * An individual step.\n * Does nothing on its own; props are dealt with inside of Steps.\n */\nexport const Step: React.FC<React.PropsWithChildren<StepProps>> = ({\n  children,\n}) => <>{children}</>\n"],"mappings":"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"}

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

@@ -0,0 +1,185 @@
+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 { fn } from "@storybook/test";
+import React, { useEffect, useState } from "react";
+import { Step, Stepper } from "./";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: Stepper,
+  title: "Components/Stepper",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A multi-step navigation component with tabbed interface for step-based workflows."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    initialTabIndex: 0,
+    currentStepIndex: 0,
+    onChange: fn(),
+    children: [/*#__PURE__*/React.createElement(Step, {
+      key: "review",
+      name: "Review"
+    }, "Review panel"), /*#__PURE__*/React.createElement(Step, {
+      key: "confirm",
+      name: "Confirm"
+    }, "Confirm panel"), /*#__PURE__*/React.createElement(Step, {
+      key: "pay",
+      name: "Pay"
+    }, "Pay panel")]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic stepper with three steps starting at the first step."
+      }
+    }
+  }
+};
+export var SecondStep = {
+  args: {
+    initialTabIndex: 1,
+    currentStepIndex: 1,
+    onChange: fn(),
+    children: [/*#__PURE__*/React.createElement(Step, {
+      key: "review",
+      name: "Review"
+    }, "Review panel"), /*#__PURE__*/React.createElement(Step, {
+      key: "confirm",
+      name: "Confirm"
+    }, "Confirm panel"), /*#__PURE__*/React.createElement(Step, {
+      key: "pay",
+      name: "Pay"
+    }, "Pay panel")]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Stepper starting at the second step."
+      }
+    }
+  }
+};
+export var FinalStep = {
+  args: {
+    initialTabIndex: 2,
+    currentStepIndex: 2,
+    onChange: fn(),
+    children: [/*#__PURE__*/React.createElement(Step, {
+      key: "review",
+      name: "Review"
+    }, "Review panel"), /*#__PURE__*/React.createElement(Step, {
+      key: "confirm",
+      name: "Confirm"
+    }, "Confirm panel"), /*#__PURE__*/React.createElement(Step, {
+      key: "pay",
+      name: "Pay"
+    }, "Pay panel")]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Stepper at the final step."
+      }
+    }
+  }
+};
+export var DisabledNavigation = {
+  args: {
+    initialTabIndex: 2,
+    currentStepIndex: 2,
+    disableNavigation: true,
+    onChange: fn(),
+    children: [/*#__PURE__*/React.createElement(Step, {
+      key: "review",
+      name: "Review"
+    }, "Review panel"), /*#__PURE__*/React.createElement(Step, {
+      key: "confirm",
+      name: "Confirm"
+    }, "Confirm panel"), /*#__PURE__*/React.createElement(Step, {
+      key: "pay",
+      name: "Pay"
+    }, "Pay panel")]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Stepper with navigation disabled - steps are not clickable."
+      }
+    }
+  }
+};
+export var FullWidth = {
+  args: {
+    initialTabIndex: 2,
+    currentStepIndex: 2,
+    fill: true,
+    onChange: fn(),
+    children: [/*#__PURE__*/React.createElement(Step, {
+      key: "review",
+      name: "Review"
+    }, "Review panel"), /*#__PURE__*/React.createElement(Step, {
+      key: "confirm",
+      name: "Confirm"
+    }, "Confirm panel"), /*#__PURE__*/React.createElement(Step, {
+      key: "pay",
+      name: "Pay"
+    }, "Pay panel")]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Stepper that fills the available width."
+      }
+    }
+  }
+};
+export var AnimatedDemo = {
+  render: function render() {
+    var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      cursor = _useState2[0],
+      setCursor = _useState2[1];
+    useEffect(function () {
+      var interval = setInterval(function () {
+        setCursor(function (prevCursor) {
+          return prevCursor + 1;
+        });
+      }, 1000);
+      return function () {
+        clearInterval(interval);
+      };
+    }, []);
+    var index = cursor % 3;
+    return /*#__PURE__*/React.createElement(Stepper, {
+      initialTabIndex: index,
+      currentStepIndex: index,
+      disableNavigation: true
+    }, /*#__PURE__*/React.createElement(Step, {
+      name: "Review"
+    }, "Review panel"), /*#__PURE__*/React.createElement(Step, {
+      name: "Confirm"
+    }, "Confirm panel"), /*#__PURE__*/React.createElement(Step, {
+      name: "Pay"
+    }, "Pay panel"));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Animated stepper that cycles through steps automatically."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Stepper.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.story.js","names":["fn","React","useEffect","useState","Step","Stepper","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","initialTabIndex","currentStepIndex","onChange","children","createElement","key","name","story","SecondStep","FinalStep","DisabledNavigation","disableNavigation","FullWidth","fill","AnimatedDemo","render","_useState","_useState2","_slicedToArray","cursor","setCursor","interval","setInterval","prevCursor","clearInterval","index"],"sources":["../../../../src/elements/Stepper/Stepper.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React, { useEffect, useState } from \"react\"\nimport { Step, Stepper } from \"./\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Stepper,\n  title: \"Components/Stepper\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A multi-step navigation component with tabbed interface for step-based workflows.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    initialTabIndex: 0,\n    currentStepIndex: 0,\n    onChange: fn(),\n    children: [\n      <Step key=\"review\" name=\"Review\">\n        Review panel\n      </Step>,\n      <Step key=\"confirm\" name=\"Confirm\">\n        Confirm panel\n      </Step>,\n      <Step key=\"pay\" name=\"Pay\">\n        Pay panel\n      </Step>,\n    ],\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic stepper with three steps starting at the first step.\",\n      },\n    },\n  },\n}\n\nexport const SecondStep = {\n  args: {\n    initialTabIndex: 1,\n    currentStepIndex: 1,\n    onChange: fn(),\n    children: [\n      <Step key=\"review\" name=\"Review\">\n        Review panel\n      </Step>,\n      <Step key=\"confirm\" name=\"Confirm\">\n        Confirm panel\n      </Step>,\n      <Step key=\"pay\" name=\"Pay\">\n        Pay panel\n      </Step>,\n    ],\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Stepper starting at the second step.\",\n      },\n    },\n  },\n}\n\nexport const FinalStep = {\n  args: {\n    initialTabIndex: 2,\n    currentStepIndex: 2,\n    onChange: fn(),\n    children: [\n      <Step key=\"review\" name=\"Review\">\n        Review panel\n      </Step>,\n      <Step key=\"confirm\" name=\"Confirm\">\n        Confirm panel\n      </Step>,\n      <Step key=\"pay\" name=\"Pay\">\n        Pay panel\n      </Step>,\n    ],\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Stepper at the final step.\",\n      },\n    },\n  },\n}\n\nexport const DisabledNavigation = {\n  args: {\n    initialTabIndex: 2,\n    currentStepIndex: 2,\n    disableNavigation: true,\n    onChange: fn(),\n    children: [\n      <Step key=\"review\" name=\"Review\">\n        Review panel\n      </Step>,\n      <Step key=\"confirm\" name=\"Confirm\">\n        Confirm panel\n      </Step>,\n      <Step key=\"pay\" name=\"Pay\">\n        Pay panel\n      </Step>,\n    ],\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Stepper with navigation disabled - steps are not clickable.\",\n      },\n    },\n  },\n}\n\nexport const FullWidth = {\n  args: {\n    initialTabIndex: 2,\n    currentStepIndex: 2,\n    fill: true,\n    onChange: fn(),\n    children: [\n      <Step key=\"review\" name=\"Review\">\n        Review panel\n      </Step>,\n      <Step key=\"confirm\" name=\"Confirm\">\n        Confirm panel\n      </Step>,\n      <Step key=\"pay\" name=\"Pay\">\n        Pay panel\n      </Step>,\n    ],\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Stepper that fills the available width.\",\n      },\n    },\n  },\n}\n\nexport const AnimatedDemo = {\n  render: () => {\n    const [cursor, setCursor] = useState(0)\n\n    useEffect(() => {\n      const interval = setInterval(() => {\n        setCursor((prevCursor) => prevCursor + 1)\n      }, 1000)\n\n      return () => {\n        clearInterval(interval)\n      }\n    }, [])\n\n    const index = cursor % 3\n\n    return (\n      <Stepper\n        initialTabIndex={index}\n        currentStepIndex={index}\n        disableNavigation\n      >\n        <Step name=\"Review\">Review panel</Step>\n        <Step name=\"Confirm\">Confirm panel</Step>\n        <Step name=\"Pay\">Pay panel</Step>\n      </Stepper>\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Animated stepper that cycles through steps automatically.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

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

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

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

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

package/dist/esm/elements/Sup/Sup.js

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+import { Text, TextProps } from "../Text";
+export var Sup = styled(Text).withConfig({
+  displayName: "Sup",
+  componentId: "sc-1g83qfs-0"
+})(["display:inline;vertical-align:super;font-size:75% !important;line-height:0 !important;font-weight:inherit !important;"]);
+//# sourceMappingURL=Sup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sup.js","names":["styled","Text","TextProps","Sup","withConfig","displayName","componentId"],"sources":["../../../../src/elements/Sup/Sup.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Text, TextProps } from \"../Text\"\n\nexport type SupProps = TextProps\n\nexport const Sup = styled(Text)`\n  display: inline;\n  vertical-align: super;\n  font-size: 75% !important;\n  line-height: 0 !important; // Avoids shifting the line-height\n  font-weight: inherit !important;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,IAAI,EAAEC,SAAS;AAIxB,OAAO,IAAMC,GAAG,GAAGH,MAAM,CAACC,IAAI,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6HAM9B"}

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

@@ -0,0 +1,68 @@
+import React from "react";
+import { Text } from "../Text";
+import { Sup } from "./Sup";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: Sup,
+  title: "Components/Sup",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A superscript text component with different size variants for adding small text above the baseline."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    children: "123",
+    color: "blue100"
+  },
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement(Text, null, "Lorem Ipsum ", /*#__PURE__*/React.createElement(Sup, args));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic superscript text with blue color."
+      }
+    }
+  }
+};
+export var AllVariants = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+      mb: 2
+    }, "XXL variant: Lorem Ipsum ", /*#__PURE__*/React.createElement(Sup, {
+      variant: "xxl"
+    }, "123")), /*#__PURE__*/React.createElement(Text, {
+      mb: 2
+    }, "XL variant: Lorem Ipsum ", /*#__PURE__*/React.createElement(Sup, {
+      variant: "xl"
+    }, "123")), /*#__PURE__*/React.createElement(Text, {
+      mb: 2
+    }, "LG variant: Lorem Ipsum ", /*#__PURE__*/React.createElement(Sup, {
+      variant: "lg"
+    }, "123")), /*#__PURE__*/React.createElement(Text, {
+      mb: 2
+    }, "MD variant: Lorem Ipsum ", /*#__PURE__*/React.createElement(Sup, {
+      variant: "md"
+    }, "123")), /*#__PURE__*/React.createElement(Text, {
+      mb: 2
+    }, "SM variant: Lorem Ipsum ", /*#__PURE__*/React.createElement(Sup, {
+      variant: "sm"
+    }, "123")));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "All available size variants of the superscript component."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Sup.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sup.story.js","names":["React","Text","Sup","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","children","color","render","createElement","story","AllVariants","Fragment","mb","variant"],"sources":["../../../../src/elements/Sup/Sup.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Text } from \"../Text\"\nimport { Sup } from \"./Sup\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Sup,\n  title: \"Components/Sup\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A superscript text component with different size variants for adding small text above the baseline.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    children: \"123\",\n    color: \"blue100\",\n  },\n  render: (args) => (\n    <Text>\n      Lorem Ipsum <Sup {...args} />\n    </Text>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic superscript text with blue color.\",\n      },\n    },\n  },\n}\n\nexport const AllVariants = {\n  render: () => (\n    <>\n      <Text mb={2}>\n        XXL variant: Lorem Ipsum <Sup variant=\"xxl\">123</Sup>\n      </Text>\n      <Text mb={2}>\n        XL variant: Lorem Ipsum <Sup variant=\"xl\">123</Sup>\n      </Text>\n      <Text mb={2}>\n        LG variant: Lorem Ipsum <Sup variant=\"lg\">123</Sup>\n      </Text>\n      <Text mb={2}>\n        MD variant: Lorem Ipsum <Sup variant=\"md\">123</Sup>\n      </Text>\n      <Text mb={2}>\n        SM variant: Lorem Ipsum <Sup variant=\"sm\">123</Sup>\n      </Text>\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"All available size variants of the superscript component.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,GAAG;AACZ,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEF,GAAG;EACdG,KAAK,EAAE,gBAAgB;EACvBC,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,QAAQ,EAAE,KAAK;IACfC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE,SAARA,MAAMA,CAAGH,IAAI;IAAA,oBACXb,KAAA,CAAAiB,aAAA,CAAChB,IAAI,QAAC,cACQ,eAAAD,KAAA,CAAAiB,aAAA,CAACf,GAAG,EAAKW,IAAI,CAAI,CACxB;EAAA,CACR;EACDN,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXS,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,WAAW,GAAG;EACzBH,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJhB,KAAA,CAAAiB,aAAA,CAAAjB,KAAA,CAAAoB,QAAA,qBACEpB,KAAA,CAAAiB,aAAA,CAAChB,IAAI;MAACoB,EAAE,EAAE;IAAE,GAAC,2BACc,eAAArB,KAAA,CAAAiB,aAAA,CAACf,GAAG;MAACoB,OAAO,EAAC;IAAK,GAAC,KAAG,CAAM,CAChD,eACPtB,KAAA,CAAAiB,aAAA,CAAChB,IAAI;MAACoB,EAAE,EAAE;IAAE,GAAC,0BACa,eAAArB,KAAA,CAAAiB,aAAA,CAACf,GAAG;MAACoB,OAAO,EAAC;IAAI,GAAC,KAAG,CAAM,CAC9C,eACPtB,KAAA,CAAAiB,aAAA,CAAChB,IAAI;MAACoB,EAAE,EAAE;IAAE,GAAC,0BACa,eAAArB,KAAA,CAAAiB,aAAA,CAACf,GAAG;MAACoB,OAAO,EAAC;IAAI,GAAC,KAAG,CAAM,CAC9C,eACPtB,KAAA,CAAAiB,aAAA,CAAChB,IAAI;MAACoB,EAAE,EAAE;IAAE,GAAC,0BACa,eAAArB,KAAA,CAAAiB,aAAA,CAACf,GAAG;MAACoB,OAAO,EAAC;IAAI,GAAC,KAAG,CAAM,CAC9C,eACPtB,KAAA,CAAAiB,aAAA,CAAChB,IAAI;MAACoB,EAAE,EAAE;IAAE,GAAC,0BACa,eAAArB,KAAA,CAAAiB,aAAA,CAACf,GAAG;MAACoB,OAAO,EAAC;IAAI,GAAC,KAAG,CAAM,CAC9C,CACN;EAAA,CACJ;EACDf,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXS,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

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

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

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

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

package/dist/esm/elements/Swiper/Swiper.js

@@ -0,0 +1,158 @@
+var _excluded = ["initialIndex", "children", "snap", "Rail", "Cell", "onChange", "onPageCountChange"];
+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 _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, useEffect, useMemo, useRef } 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 } from "../Carousel";
+import { activeIndex } from "./activeIndex";
+import { percentage } from "./percentage";
+var Container = styled(Box).withConfig({
+  displayName: "Swiper__Container",
+  componentId: "sc-1bxg2ho-0"
+})(["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);
+
+/** SwiperRailProps */
+
+/** A `SwiperRail` slides back and forth within the viewport */
+export var SwiperRail = styled(Box).withConfig({
+  displayName: "Swiper__SwiperRail",
+  componentId: "sc-1bxg2ho-1"
+})(["width:100%;height:100%;margin:0;padding:0;list-style:none;white-space:nowrap;"]);
+SwiperRail.defaultProps = {
+  display: "flex"
+};
+
+/** SwiperCellProps */
+
+/** A `SwiperCell` wraps a single child in the carousel */
+export var SwiperCell = styled(Box).withConfig({
+  displayName: "Swiper__SwiperCell",
+  componentId: "sc-1bxg2ho-2"
+})(["white-space:normal;"]);
+
+/** SwiperProps */
+
+/**
+ * A `Swiper` is like a `Carousel` but for touch devices. It accepts children
+ * or a series of children that are JSX elements. It presents them in a
+ * horizontal rail and when the width exceeds the width of the viewport, allows
+ * for horitonzal swiping (or scrolling) with the option to snap to elements.
+ */
+export var Swiper = function Swiper(_ref) {
+  var _ref$initialIndex = _ref.initialIndex,
+    initialIndex = _ref$initialIndex === void 0 ? 0 : _ref$initialIndex,
+    children = _ref.children,
+    _ref$snap = _ref.snap,
+    snap = _ref$snap === void 0 ? "none" : _ref$snap,
+    _ref$Rail = _ref.Rail,
+    Rail = _ref$Rail === void 0 ? SwiperRail : _ref$Rail,
+    _ref$Cell = _ref.Cell,
+    Cell = _ref$Cell === void 0 ? SwiperCell : _ref$Cell,
+    onChange = _ref.onChange,
+    onPageCountChange = _ref.onPageCountChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var containerRef = useRef(null);
+  var cells = useMemo(function () {
+    return Children.toArray(children).filter(isValidElement).map(function (child) {
+      return {
+        child: child,
+        ref: /*#__PURE__*/createRef()
+      };
+    });
+  }, [children]);
+  var _useCursor = useCursor({
+      initialCursor: initialIndex,
+      max: cells.length
+    }),
+    index = _useCursor.index,
+    cursor = _useCursor.cursor,
+    setCursor = _useCursor.setCursor;
+  useEffect(function () {
+    /**
+     * If on initial mount there is an `initialIndex` other than `0`,
+     * scroll it into view. The dependency array is left empty as we explicitly
+     * only want this to run on mount, and ignore any updates to `initialIndex`,
+     * which are handled separately below.
+     */
+    if (initialIndex === 0) return;
+    var cell = cells[initialIndex];
+    if (!cell) return;
+    cell.ref.current.scrollIntoView({
+      inline: "start",
+      block: "nearest"
+    });
+  }, []);
+  useEffect(function () {
+    /**
+     * Since `cursor` tracks progress, if `cursor` and `initialIndex` are out
+     * of sync then that means the index has been changed programmatically
+     * and we should scroll the cell corresponding with that index into view.
+     */
+    if (initialIndex !== cursor) {
+      var cell = cells[initialIndex];
+      if (!cell) return;
+      cell.ref.current.scrollIntoView({
+        inline: "start",
+        block: "nearest"
+      });
+    }
+  }, [initialIndex]);
+  useEffect(function () {
+    // Not mounted
+    if (!containerRef.current) return;
+
+    // No need to track progress
+    if (!onChange) return;
+    var rail = containerRef.current;
+    var handleScroll = function handleScroll() {
+      var progress = percentage({
+        viewport: rail.clientWidth,
+        total: rail.scrollWidth,
+        left: rail.scrollLeft
+      });
+      var page = activeIndex({
+        progress: progress,
+        length: cells.length
+      });
+      setCursor(page);
+    };
+    rail.addEventListener("scroll", handleScroll, {
+      passive: true
+    });
+    return function () {
+      rail.removeEventListener("scroll", handleScroll);
+    };
+  }, [cells]);
+  useEffect(function () {
+    onChange && onChange(index);
+  }, [onChange, index]);
+  useEffect(function () {
+    onPageCountChange && onPageCountChange(cells.length);
+  }, [onPageCountChange, cells.length]);
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    ref: containerRef,
+    mx: 0,
+    my: 0
+  }, rest), /*#__PURE__*/React.createElement(Rail, {
+    as: "ul"
+  }, cells.map(function (_ref2, i) {
+    var child = _ref2.child,
+      ref = _ref2.ref;
+    var isLast = i === cells.length - 1;
+    return /*#__PURE__*/React.createElement(Cell, {
+      as: "li",
+      key: i,
+      ref: ref,
+      pr: !isLast ? CELL_GAP_PADDING_AMOUNT : undefined,
+      style: {
+        scrollSnapAlign: snap
+      }
+    }, child);
+  })));
+};
+Swiper.displayName = "Swiper";
+//# sourceMappingURL=Swiper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Swiper.js","names":["React","Children","createRef","isValidElement","useEffect","useMemo","useRef","styled","useCursor","visuallyDisableScrollbar","Box","BoxProps","CELL_GAP_PADDING_AMOUNT","activeIndex","percentage","Container","withConfig","displayName","componentId","SwiperRail","defaultProps","display","SwiperCell","Swiper","_ref","_ref$initialIndex","initialIndex","children","_ref$snap","snap","_ref$Rail","Rail","_ref$Cell","Cell","onChange","onPageCountChange","rest","_objectWithoutProperties","_excluded","containerRef","cells","toArray","filter","map","child","ref","_useCursor","initialCursor","max","length","index","cursor","setCursor","cell","current","scrollIntoView","inline","block","rail","handleScroll","progress","viewport","clientWidth","total","scrollWidth","left","scrollLeft","page","addEventListener","passive","removeEventListener","createElement","_extends","mx","my","as","_ref2","i","isLast","key","pr","undefined","style","scrollSnapAlign"],"sources":["../../../../src/elements/Swiper/Swiper.tsx"],"sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { useCursor } from \"use-cursor\"\nimport { visuallyDisableScrollbar } from \"../../helpers/visuallyDisableScrollbar\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CELL_GAP_PADDING_AMOUNT } from \"../Carousel\"\nimport { activeIndex } from \"./activeIndex\"\nimport { percentage } from \"./percentage\"\n\nconst Container = styled(Box)`\n  display: flex;\n  height: 100%;\n  padding: 0;\n  list-style: none;\n  overflow-y: hidden;\n  overflow-x: scroll;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n  ${visuallyDisableScrollbar}\n`\n\n/** SwiperRailProps */\nexport type SwiperRailProps = BoxProps\n\n/** A `SwiperRail` slides back and forth within the viewport */\nexport const SwiperRail = styled(Box)<{ as?: React.ElementType }>`\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n`\n\nSwiperRail.defaultProps = {\n  display: \"flex\",\n}\n\n/** SwiperCellProps */\nexport type SwiperCellProps = BoxProps\n\n/** A `SwiperCell` wraps a single child in the carousel */\nexport const SwiperCell = styled(Box)<{ as?: React.ElementType }>`\n  white-space: normal;\n`\n\ntype ScrollSnapAlign = \"none\" | \"start\" | \"end\" | \"center\"\n\n/** SwiperProps */\nexport type SwiperProps = BoxProps & {\n  initialIndex?: number\n  snap?: ScrollSnapAlign\n  children: React.ReactNode\n  Rail?: typeof SwiperRail | React.FC<React.PropsWithChildren<SwiperRailProps>>\n  /**\n   * If providing a custom `Cell` you must forward a ref so\n   * that cell widths can be calculated.\n   */\n  Cell?: React.ForwardRefExoticComponent<SwiperCellProps>\n  onChange?(index: number): void\n  onPageCountChange?(count: number): void\n}\n\n/**\n * A `Swiper` is like a `Carousel` but for touch devices. It accepts children\n * or a series of children that are JSX elements. It presents them in a\n * horizontal rail and when the width exceeds the width of the viewport, allows\n * for horitonzal swiping (or scrolling) with the option to snap to elements.\n */\nexport const Swiper: React.FC<React.PropsWithChildren<SwiperProps>> = ({\n  initialIndex = 0,\n  children,\n  snap = \"none\",\n  Rail = SwiperRail,\n  Cell = SwiperCell,\n  onChange,\n  onPageCountChange,\n  ...rest\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n\n  const cells = useMemo(\n    () =>\n      Children.toArray(children)\n        .filter(isValidElement)\n        .map((child) => ({ child, ref: createRef<HTMLDivElement>() })),\n    [children]\n  )\n\n  const { index, cursor, setCursor } = useCursor({\n    initialCursor: initialIndex,\n    max: cells.length,\n  })\n\n  useEffect(() => {\n    /**\n     * If on initial mount there is an `initialIndex` other than `0`,\n     * scroll it into view. The dependency array is left empty as we explicitly\n     * only want this to run on mount, and ignore any updates to `initialIndex`,\n     * which are handled separately below.\n     */\n    if (initialIndex === 0) return\n    const cell = cells[initialIndex]\n    if (!cell) return\n    cell.ref.current!.scrollIntoView({ inline: \"start\", block: \"nearest\" })\n  }, [])\n\n  useEffect(() => {\n    /**\n     * Since `cursor` tracks progress, if `cursor` and `initialIndex` are out\n     * of sync then that means the index has been changed programmatically\n     * and we should scroll the cell corresponding with that index into view.\n     */\n    if (initialIndex !== cursor) {\n      const cell = cells[initialIndex]\n      if (!cell) return\n      cell.ref.current!.scrollIntoView({ inline: \"start\", block: \"nearest\" })\n    }\n  }, [initialIndex])\n\n  useEffect(() => {\n    // Not mounted\n    if (!containerRef.current) return\n\n    // No need to track progress\n    if (!onChange) return\n\n    const { current: rail } = containerRef\n\n    const handleScroll = () => {\n      const progress = percentage({\n        viewport: rail.clientWidth,\n        total: rail.scrollWidth,\n        left: rail.scrollLeft,\n      })\n\n      const page = activeIndex({ progress, length: cells.length })\n\n      setCursor(page)\n    }\n\n    rail.addEventListener(\"scroll\", handleScroll, { passive: true })\n    return () => {\n      rail.removeEventListener(\"scroll\", handleScroll)\n    }\n  }, [cells])\n\n  useEffect(() => {\n    onChange && onChange(index)\n  }, [onChange, index])\n\n  useEffect(() => {\n    onPageCountChange && onPageCountChange(cells.length)\n  }, [onPageCountChange, cells.length])\n\n  return (\n    <Container ref={containerRef as any} mx={0} my={0} {...rest}>\n      <Rail as=\"ul\">\n        {cells.map(({ child, ref }, i) => {\n          const isLast = i === cells.length - 1\n\n          return (\n            <Cell\n              as=\"li\"\n              key={i}\n              ref={ref}\n              pr={!isLast ? CELL_GAP_PADDING_AMOUNT : undefined}\n              style={{ scrollSnapAlign: snap }}\n            >\n              {child}\n            </Cell>\n          )\n        })}\n      </Rail>\n    </Container>\n  )\n}\n"],"mappings":"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"}