@artsy/palette 45.13.1 → 45.14.0-canary.1497.33070.0

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

@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+export var useClickScroll = function useClickScroll(_ref) {
+  var trackRef = _ref.trackRef,
+    thumbRef = _ref.thumbRef,
+    viewport = _ref.viewport,
+    scrollWidth = _ref.scrollWidth,
+    trackWidth = _ref.trackWidth;
+  useEffect(function () {
+    if (!viewport || !(trackRef !== null && trackRef !== void 0 && trackRef.current) || !(thumbRef !== null && thumbRef !== void 0 && thumbRef.current)) return;
+    var thumb = thumbRef.current;
+    var track = trackRef.current;
+    var handleMouseDown = function handleMouseDown(event) {
+      var x =
+      // Where you clicked
+      event.pageX -
+      // Offset by where the track sits on the page
+      track.getBoundingClientRect().left -
+      // Then center the thumb
+      thumb.clientWidth / 2;
+      viewport.scrollLeft = x * scrollWidth / trackWidth;
+    };
+    track.addEventListener("mousedown", handleMouseDown);
+    return function () {
+      track.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [scrollWidth, thumbRef, trackRef, trackWidth, viewport]);
+};
+//# sourceMappingURL=useClickScroll.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useClickScroll.js","names":["useEffect","useClickScroll","_ref","trackRef","thumbRef","viewport","scrollWidth","trackWidth","current","thumb","track","handleMouseDown","event","x","pageX","getBoundingClientRect","left","clientWidth","scrollLeft","addEventListener","removeEventListener"],"sources":["../../../../src/elements/Shelf/useClickScroll.ts"],"sourcesContent":["import { useEffect } from \"react\"\n\ninterface UseClickScroll {\n  trackRef?: React.MutableRefObject<HTMLElement | null>\n  thumbRef?: React.MutableRefObject<HTMLElement | null>\n  viewport?: HTMLElement | null\n  scrollWidth: number\n  trackWidth: number\n}\n\nexport const useClickScroll = ({\n  trackRef,\n  thumbRef,\n  viewport,\n  scrollWidth,\n  trackWidth,\n}: UseClickScroll) => {\n  useEffect(() => {\n    if (!viewport || !trackRef?.current || !thumbRef?.current) return\n\n    const { current: thumb } = thumbRef\n    const { current: track } = trackRef\n\n    const handleMouseDown = (event: MouseEvent) => {\n      const x =\n        // Where you clicked\n        event.pageX -\n        // Offset by where the track sits on the page\n        track.getBoundingClientRect().left -\n        // Then center the thumb\n        thumb.clientWidth / 2\n\n      viewport.scrollLeft = (x * scrollWidth) / trackWidth\n    }\n\n    track.addEventListener(\"mousedown\", handleMouseDown)\n\n    return () => {\n      track.removeEventListener(\"mousedown\", handleMouseDown)\n    }\n  }, [scrollWidth, thumbRef, trackRef, trackWidth, viewport])\n}\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AAUjC,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAAC,IAAA,EAML;EAAA,IALpBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,UAAU,GAAAL,IAAA,CAAVK,UAAU;EAEVP,SAAS,CAAC,YAAM;IACd,IAAI,CAACK,QAAQ,IAAI,EAACF,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAEK,OAAO,KAAI,EAACJ,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAEI,OAAO,GAAE;IAE3D,IAAiBC,KAAK,GAAKL,QAAQ,CAA3BI,OAAO;IACf,IAAiBE,KAAK,GAAKP,QAAQ,CAA3BK,OAAO;IAEf,IAAMG,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAAiB,EAAK;MAC7C,IAAMC,CAAC;MACL;MACAD,KAAK,CAACE,KAAK;MACX;MACAJ,KAAK,CAACK,qBAAqB,EAAE,CAACC,IAAI;MAClC;MACAP,KAAK,CAACQ,WAAW,GAAG,CAAC;MAEvBZ,QAAQ,CAACa,UAAU,GAAIL,CAAC,GAAGP,WAAW,GAAIC,UAAU;IACtD,CAAC;IAEDG,KAAK,CAACS,gBAAgB,CAAC,WAAW,EAAER,eAAe,CAAC;IAEpD,OAAO,YAAM;MACXD,KAAK,CAACU,mBAAmB,CAAC,WAAW,EAAET,eAAe,CAAC;IACzD,CAAC;EACH,CAAC,EAAE,CAACL,WAAW,EAAEF,QAAQ,EAAED,QAAQ,EAAEI,UAAU,EAAEF,QAAQ,CAAC,CAAC;AAC7D,CAAC"}

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

@@ -0,0 +1,40 @@
+import { useEffect, useRef } from "react";
+export var useDragScroll = function useDragScroll(_ref) {
+  var viewport = _ref.viewport,
+    thumbRef = _ref.thumbRef,
+    scrollWidth = _ref.scrollWidth,
+    trackWidth = _ref.trackWidth,
+    scrollLeft = _ref.scrollLeft,
+    clientWidth = _ref.clientWidth;
+  var isDown = useRef(false);
+  var startX = useRef(0);
+  var offsetX = useRef(0);
+  useEffect(function () {
+    if (!viewport || !(thumbRef !== null && thumbRef !== void 0 && thumbRef.current)) return;
+    var thumb = thumbRef.current;
+    var handleMouseDown = function handleMouseDown(event) {
+      event.stopPropagation();
+      isDown.current = true;
+      startX.current = event.pageX;
+      offsetX.current = viewport.scrollLeft;
+    };
+    var handleMouseUp = function handleMouseUp() {
+      isDown.current = false;
+      startX.current = 0;
+    };
+    var handleMouseMove = function handleMouseMove(event) {
+      if (!isDown.current) return;
+      var delta = (event.pageX - startX.current) * scrollWidth / trackWidth;
+      viewport.scrollLeft = offsetX.current + delta;
+    };
+    thumb.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return function () {
+      thumb.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [viewport, clientWidth, scrollWidth, scrollLeft, trackWidth, thumbRef]);
+};
+//# sourceMappingURL=useDragScroll.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDragScroll.js","names":["useEffect","useRef","useDragScroll","_ref","viewport","thumbRef","scrollWidth","trackWidth","scrollLeft","clientWidth","isDown","startX","offsetX","current","thumb","handleMouseDown","event","stopPropagation","pageX","handleMouseUp","handleMouseMove","delta","addEventListener","document","removeEventListener"],"sources":["../../../../src/elements/Shelf/useDragScroll.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\"\n\ninterface UseDragScroll {\n  viewport?: HTMLElement | null\n  thumbRef?: React.MutableRefObject<HTMLElement | null>\n  scrollWidth: number\n  trackWidth: number\n  scrollLeft: number\n  clientWidth: number\n}\n\nexport const useDragScroll = ({\n  viewport,\n  thumbRef,\n  scrollWidth,\n  trackWidth,\n  scrollLeft,\n  clientWidth,\n}: UseDragScroll) => {\n  const isDown = useRef(false)\n  const startX = useRef(0)\n  const offsetX = useRef(0)\n\n  useEffect(() => {\n    if (!viewport || !thumbRef?.current) return\n\n    const { current: thumb } = thumbRef\n\n    const handleMouseDown = (event: MouseEvent) => {\n      event.stopPropagation()\n      isDown.current = true\n      startX.current = event.pageX\n      offsetX.current = viewport.scrollLeft\n    }\n\n    const handleMouseUp = () => {\n      isDown.current = false\n      startX.current = 0\n    }\n\n    const handleMouseMove = (event: MouseEvent) => {\n      if (!isDown.current) return\n      const delta = ((event.pageX - startX.current) * scrollWidth) / trackWidth\n      viewport.scrollLeft = offsetX.current + delta\n    }\n\n    thumb.addEventListener(\"mousedown\", handleMouseDown)\n    document.addEventListener(\"mousemove\", handleMouseMove)\n    document.addEventListener(\"mouseup\", handleMouseUp)\n\n    return () => {\n      thumb.removeEventListener(\"mousedown\", handleMouseDown)\n      document.removeEventListener(\"mousemove\", handleMouseMove)\n      document.removeEventListener(\"mouseup\", handleMouseUp)\n    }\n  }, [viewport, clientWidth, scrollWidth, scrollLeft, trackWidth, thumbRef])\n}\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAWzC,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA,EAOL;EAAA,IANnBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IACXC,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IACVC,UAAU,GAAAL,IAAA,CAAVK,UAAU;IACVC,WAAW,GAAAN,IAAA,CAAXM,WAAW;EAEX,IAAMC,MAAM,GAAGT,MAAM,CAAC,KAAK,CAAC;EAC5B,IAAMU,MAAM,GAAGV,MAAM,CAAC,CAAC,CAAC;EACxB,IAAMW,OAAO,GAAGX,MAAM,CAAC,CAAC,CAAC;EAEzBD,SAAS,CAAC,YAAM;IACd,IAAI,CAACI,QAAQ,IAAI,EAACC,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAEQ,OAAO,GAAE;IAErC,IAAiBC,KAAK,GAAKT,QAAQ,CAA3BQ,OAAO;IAEf,IAAME,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAAiB,EAAK;MAC7CA,KAAK,CAACC,eAAe,EAAE;MACvBP,MAAM,CAACG,OAAO,GAAG,IAAI;MACrBF,MAAM,CAACE,OAAO,GAAGG,KAAK,CAACE,KAAK;MAC5BN,OAAO,CAACC,OAAO,GAAGT,QAAQ,CAACI,UAAU;IACvC,CAAC;IAED,IAAMW,aAAa,GAAG,SAAhBA,aAAaA,CAAA,EAAS;MAC1BT,MAAM,CAACG,OAAO,GAAG,KAAK;MACtBF,MAAM,CAACE,OAAO,GAAG,CAAC;IACpB,CAAC;IAED,IAAMO,eAAe,GAAG,SAAlBA,eAAeA,CAAIJ,KAAiB,EAAK;MAC7C,IAAI,CAACN,MAAM,CAACG,OAAO,EAAE;MACrB,IAAMQ,KAAK,GAAI,CAACL,KAAK,CAACE,KAAK,GAAGP,MAAM,CAACE,OAAO,IAAIP,WAAW,GAAIC,UAAU;MACzEH,QAAQ,CAACI,UAAU,GAAGI,OAAO,CAACC,OAAO,GAAGQ,KAAK;IAC/C,CAAC;IAEDP,KAAK,CAACQ,gBAAgB,CAAC,WAAW,EAAEP,eAAe,CAAC;IACpDQ,QAAQ,CAACD,gBAAgB,CAAC,WAAW,EAAEF,eAAe,CAAC;IACvDG,QAAQ,CAACD,gBAAgB,CAAC,SAAS,EAAEH,aAAa,CAAC;IAEnD,OAAO,YAAM;MACXL,KAAK,CAACU,mBAAmB,CAAC,WAAW,EAAET,eAAe,CAAC;MACvDQ,QAAQ,CAACC,mBAAmB,CAAC,WAAW,EAAEJ,eAAe,CAAC;MAC1DG,QAAQ,CAACC,mBAAmB,CAAC,SAAS,EAAEL,aAAa,CAAC;IACxD,CAAC;EACH,CAAC,EAAE,CAACf,QAAQ,EAAEK,WAAW,EAAEH,WAAW,EAAEE,UAAU,EAAED,UAAU,EAAEF,QAAQ,CAAC,CAAC;AAC5E,CAAC"}

package/dist/esm/elements/ShowMore/ShowMore.js

@@ -0,0 +1,46 @@
+var _excluded = ["initial", "children", "expanded", "hideText", "showMoreText"];
+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, isValidElement, useState } from "react";
+import { Clickable, ClickableProps, splitClickableProps } from "../Clickable";
+import { Text, TextProps } from "../Text";
+export var INITIAL_ITEMS_TO_SHOW = 6;
+export var ShowMore = function ShowMore(_ref) {
+  var _ref$initial = _ref.initial,
+    initial = _ref$initial === void 0 ? INITIAL_ITEMS_TO_SHOW : _ref$initial,
+    children = _ref.children,
+    _ref$expanded = _ref.expanded,
+    expanded = _ref$expanded === void 0 ? false : _ref$expanded,
+    _ref$hideText = _ref.hideText,
+    hideText = _ref$hideText === void 0 ? "Hide" : _ref$hideText,
+    _ref$showMoreText = _ref.showMoreText,
+    showMoreText = _ref$showMoreText === void 0 ? "Show more" : _ref$showMoreText,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(expanded),
+    _useState2 = _slicedToArray(_useState, 2),
+    isExpanded = _useState2[0],
+    setExpanded = _useState2[1];
+  var nodes = Children.toArray(children).filter(isValidElement);
+  var hasMore = nodes.length > initial;
+  var _splitClickableProps = splitClickableProps(rest),
+    _splitClickableProps2 = _slicedToArray(_splitClickableProps, 2),
+    clickableProps = _splitClickableProps2[0],
+    variant = _splitClickableProps2[1].variant;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isExpanded ? nodes : nodes.slice(0, initial), hasMore && /*#__PURE__*/React.createElement(Clickable, _extends({
+    onClick: function onClick() {
+      return setExpanded(function (visibility) {
+        return !visibility;
+      });
+    }
+  }, clickableProps), /*#__PURE__*/React.createElement(Text, {
+    variant: variant
+  }, isExpanded ? hideText : showMoreText)));
+};
+//# sourceMappingURL=ShowMore.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShowMore.js","names":["React","Children","isValidElement","useState","Clickable","ClickableProps","splitClickableProps","Text","TextProps","INITIAL_ITEMS_TO_SHOW","ShowMore","_ref","_ref$initial","initial","children","_ref$expanded","expanded","_ref$hideText","hideText","_ref$showMoreText","showMoreText","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","isExpanded","setExpanded","nodes","toArray","filter","hasMore","length","_splitClickableProps","_splitClickableProps2","clickableProps","variant","createElement","Fragment","slice","_extends","onClick","visibility"],"sources":["../../../../src/elements/ShowMore/ShowMore.tsx"],"sourcesContent":["import React, { Children, isValidElement, useState } from \"react\"\nimport { Clickable, ClickableProps, splitClickableProps } from \"../Clickable\"\nimport { Text, TextProps } from \"../Text\"\n\nexport interface ShowMoreProps\n  extends ClickableProps,\n    Pick<TextProps, \"variant\"> {\n  children: React.ReactNode\n  initial?: number\n  expanded?: boolean\n  hideText?: string\n  showMoreText?: string\n}\n\nexport const INITIAL_ITEMS_TO_SHOW = 6\n\nexport const ShowMore: React.FC<React.PropsWithChildren<ShowMoreProps>> = ({\n  initial = INITIAL_ITEMS_TO_SHOW,\n  children,\n  expanded = false,\n  hideText = \"Hide\",\n  showMoreText = \"Show more\",\n  ...rest\n}) => {\n  const [isExpanded, setExpanded] = useState(expanded)\n  const nodes = Children.toArray(children).filter(isValidElement)\n  const hasMore = nodes.length > initial\n\n  const [clickableProps, { variant }] = splitClickableProps(rest)\n\n  return (\n    <>\n      {isExpanded ? nodes : nodes.slice(0, initial)}\n\n      {hasMore && (\n        <Clickable\n          onClick={() => setExpanded((visibility) => !visibility)}\n          {...clickableProps}\n        >\n          <Text variant={variant}>{isExpanded ? hideText : showMoreText}</Text>\n        </Clickable>\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,OAAO;AACjE,SAASC,SAAS,EAAEC,cAAc,EAAEC,mBAAmB;AACvD,SAASC,IAAI,EAAEC,SAAS;AAYxB,OAAO,IAAMC,qBAAqB,GAAG,CAAC;AAEtC,OAAO,IAAMC,QAA0D,GAAG,SAA7DA,QAA0DA,CAAAC,IAAA,EAOjE;EAAA,IAAAC,YAAA,GAAAD,IAAA,CANJE,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAGH,qBAAqB,GAAAG,YAAA;IAC/BE,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,aAAA,GAAAJ,IAAA,CACRK,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,aAAA,GAAAN,IAAA,CAChBO,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,MAAM,GAAAA,aAAA;IAAAE,iBAAA,GAAAR,IAAA,CACjBS,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAG,WAAW,GAAAA,iBAAA;IACvBE,IAAI,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAEP,IAAAC,SAAA,GAAkCrB,QAAQ,CAACa,QAAQ,CAAC;IAAAS,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAA7CG,UAAU,GAAAF,UAAA;IAAEG,WAAW,GAAAH,UAAA;EAC9B,IAAMI,KAAK,GAAG5B,QAAQ,CAAC6B,OAAO,CAAChB,QAAQ,CAAC,CAACiB,MAAM,CAAC7B,cAAc,CAAC;EAC/D,IAAM8B,OAAO,GAAGH,KAAK,CAACI,MAAM,GAAGpB,OAAO;EAEtC,IAAAqB,oBAAA,GAAsC5B,mBAAmB,CAACe,IAAI,CAAC;IAAAc,qBAAA,GAAAT,cAAA,CAAAQ,oBAAA;IAAxDE,cAAc,GAAAD,qBAAA;IAAIE,OAAO,GAAAF,qBAAA,IAAPE,OAAO;EAEhC,oBACErC,KAAA,CAAAsC,aAAA,CAAAtC,KAAA,CAAAuC,QAAA,QACGZ,UAAU,GAAGE,KAAK,GAAGA,KAAK,CAACW,KAAK,CAAC,CAAC,EAAE3B,OAAO,CAAC,EAE5CmB,OAAO,iBACNhC,KAAA,CAAAsC,aAAA,CAAClC,SAAS,EAAAqC,QAAA;IACRC,OAAO,EAAE,SAATA,OAAOA,CAAA;MAAA,OAAQd,WAAW,CAAC,UAACe,UAAU;QAAA,OAAK,CAACA,UAAU;MAAA,EAAC;IAAA;EAAC,GACpDP,cAAc,gBAElBpC,KAAA,CAAAsC,aAAA,CAAC/B,IAAI;IAAC8B,OAAO,EAAEA;EAAQ,GAAEV,UAAU,GAAGT,QAAQ,GAAGE,YAAY,CAAQ,CAExE,CACA;AAEP,CAAC"}

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

@@ -0,0 +1,111 @@
+import React from "react";
+import { ShowMore } from "./ShowMore";
+import { Text } from "../Text";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: ShowMore,
+  title: "Components/ShowMore",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A component that shows a limited number of children initially with a toggle to show/hide more."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    initial: 3,
+    children: [/*#__PURE__*/React.createElement(Text, {
+      key: 1,
+      variant: "sm-display"
+    }, "First"), /*#__PURE__*/React.createElement(Text, {
+      key: 2,
+      variant: "sm-display"
+    }, "Second"), /*#__PURE__*/React.createElement(Text, {
+      key: 3,
+      variant: "sm-display"
+    }, "Third"), /*#__PURE__*/React.createElement(Text, {
+      key: 4,
+      variant: "sm-display"
+    }, "Fourth"), /*#__PURE__*/React.createElement(Text, {
+      key: 5,
+      variant: "sm-display"
+    }, "Fifth"), /*#__PURE__*/React.createElement(Text, {
+      key: 6,
+      variant: "sm-display"
+    }, "Sixth")]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shows first 3 items with a toggle to show/hide more."
+      }
+    }
+  }
+};
+export var Expanded = {
+  args: {
+    initial: 3,
+    expanded: true,
+    children: [/*#__PURE__*/React.createElement(Text, {
+      key: 1,
+      variant: "sm-display"
+    }, "First"), /*#__PURE__*/React.createElement(Text, {
+      key: 2,
+      variant: "sm-display"
+    }, "Second"), /*#__PURE__*/React.createElement(Text, {
+      key: 3,
+      variant: "sm-display"
+    }, "Third"), /*#__PURE__*/React.createElement(Text, {
+      key: 4,
+      variant: "sm-display"
+    }, "Fourth"), /*#__PURE__*/React.createElement(Text, {
+      key: 5,
+      variant: "sm-display"
+    }, "Fifth"), /*#__PURE__*/React.createElement(Text, {
+      key: 6,
+      variant: "sm-display"
+    }, "Sixth")]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "ShowMore component in expanded state showing all items."
+      }
+    }
+  }
+};
+export var CommaSeparatedList = {
+  render: function render() {
+    var artists = ["Monica Kim Garza", "John Houck", "Zemba Luzamba"];
+    return /*#__PURE__*/React.createElement(ShowMore, {
+      initial: 1,
+      variant: "lg",
+      textDecoration: "underline",
+      mt: 1
+    }, artists.map(function (artist, index) {
+      var separator = ", ";
+      if (index === artists.length - 1) {
+        separator = ". ";
+      }
+      return /*#__PURE__*/React.createElement(Text, {
+        variant: "lg",
+        as: "span",
+        key: index
+      }, artist, separator);
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "ShowMore with comma-separated text content."
+      }
+    }
+  }
+};
+//# sourceMappingURL=ShowMore.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShowMore.story.js","names":["React","ShowMore","Text","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","initial","children","createElement","key","variant","story","Expanded","expanded","CommaSeparatedList","render","artists","textDecoration","mt","map","artist","index","separator","length","as"],"sources":["../../../../src/elements/ShowMore/ShowMore.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { ShowMore } from \"./ShowMore\"\nimport { Text } from \"../Text\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: ShowMore,\n  title: \"Components/ShowMore\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A component that shows a limited number of children initially with a toggle to show/hide more.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    initial: 3,\n    children: [\n      <Text key={1} variant=\"sm-display\">\n        First\n      </Text>,\n      <Text key={2} variant=\"sm-display\">\n        Second\n      </Text>,\n      <Text key={3} variant=\"sm-display\">\n        Third\n      </Text>,\n      <Text key={4} variant=\"sm-display\">\n        Fourth\n      </Text>,\n      <Text key={5} variant=\"sm-display\">\n        Fifth\n      </Text>,\n      <Text key={6} variant=\"sm-display\">\n        Sixth\n      </Text>,\n    ],\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Shows first 3 items with a toggle to show/hide more.\",\n      },\n    },\n  },\n}\n\nexport const Expanded = {\n  args: {\n    initial: 3,\n    expanded: true,\n    children: [\n      <Text key={1} variant=\"sm-display\">\n        First\n      </Text>,\n      <Text key={2} variant=\"sm-display\">\n        Second\n      </Text>,\n      <Text key={3} variant=\"sm-display\">\n        Third\n      </Text>,\n      <Text key={4} variant=\"sm-display\">\n        Fourth\n      </Text>,\n      <Text key={5} variant=\"sm-display\">\n        Fifth\n      </Text>,\n      <Text key={6} variant=\"sm-display\">\n        Sixth\n      </Text>,\n    ],\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"ShowMore component in expanded state showing all items.\",\n      },\n    },\n  },\n}\n\nexport const CommaSeparatedList = {\n  render: () => {\n    const artists = [\"Monica Kim Garza\", \"John Houck\", \"Zemba Luzamba\"]\n\n    return (\n      <ShowMore initial={1} variant=\"lg\" textDecoration=\"underline\" mt={1}>\n        {artists.map((artist, index) => {\n          let separator = \", \"\n          if (index === artists.length - 1) {\n            separator = \". \"\n          }\n\n          return (\n            <Text variant=\"lg\" as=\"span\" key={index}>\n              {artist}\n              {separator}\n            </Text>\n          )\n        })}\n      </ShowMore>\n    )\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"ShowMore with comma-separated text content.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

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

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

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

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

package/dist/esm/elements/Skeleton/Skeleton.js

@@ -0,0 +1,94 @@
+var _excluded = ["children"],
+  _excluded2 = ["children"];
+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 { themeGet } from "@styled-system/theme-get";
+import React, { useMemo } from "react";
+import styled, { keyframes } from "styled-components";
+import { border, BorderProps } from "styled-system";
+import { splitProps } from "../../utils/splitProps";
+import { Box, BoxProps } from "../Box";
+import { Text, TextProps } from "../Text";
+
+/** SkeletonProps */
+
+/** A mono10 Box */
+export var SkeletonBox = styled(Box).withConfig({
+  displayName: "Skeleton__SkeletonBox",
+  componentId: "sc-1vwqe5c-0"
+})([""]);
+SkeletonBox.defaultProps = {
+  bg: "mono10"
+};
+SkeletonBox.displayName = "SkeletonBox";
+var splitBorderProps = splitProps(border);
+
+/** SkeletonTextProps */
+
+var SkeletonTextOverlay = styled(SkeletonBox).withConfig({
+  displayName: "Skeleton__SkeletonTextOverlay",
+  componentId: "sc-1vwqe5c-1"
+})(["position:absolute;top:50%;left:0;width:100%;height:calc(100% - 0.25em);transform:translateY(-50%);"]);
+var toBlockCharacters = function toBlockCharacters(text) {
+  if (typeof text === 'string') {
+    return text.replace(/\S/g, '█');
+  }
+  if (typeof text === 'number') {
+    return text.toString().replace(/\S/g, '█');
+  }
+  return '████████';
+};
+
+/**
+ * Allows you to create boxes the exact dimensions of a given piece of text
+ */
+export var SkeletonText = function SkeletonText(_ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _splitBorderProps = splitBorderProps(rest),
+    _splitBorderProps2 = _slicedToArray(_splitBorderProps, 2),
+    borderProps = _splitBorderProps2[0],
+    textProps = _splitBorderProps2[1];
+  var blocks = useMemo(function () {
+    return toBlockCharacters(children);
+  }, [children]);
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    color: "transparent"
+  }, textProps), /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    display: "inline-flex",
+    position: "relative",
+    "aria-hidden": "true"
+  }, blocks, /*#__PURE__*/React.createElement(SkeletonTextOverlay, borderProps)));
+};
+SkeletonText.displayName = "SkeletonText";
+var FADE_ANIMATION = keyframes(["0%{opacity:0.5;}50%{opacity:0;}100%{opacity:0.5;}"]);
+var SkeletonFade = styled(Box).withConfig({
+  displayName: "Skeleton__SkeletonFade",
+  componentId: "sc-1vwqe5c-2"
+})(["background-color:", ";animation:", " 2s ease-in-out infinite;"], themeGet("colors.mono0"), FADE_ANIMATION);
+/**
+ * Animated wrapper for Skeletons
+ */
+export var Skeleton = function Skeleton(_ref2) {
+  var children = _ref2.children,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    position: "relative"
+  }, rest), children, /*#__PURE__*/React.createElement(SkeletonFade, {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  }));
+};
+Skeleton.displayName = "Skeleton";
+//# sourceMappingURL=Skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","names":["themeGet","React","useMemo","styled","keyframes","border","BorderProps","splitProps","Box","BoxProps","Text","TextProps","SkeletonBox","withConfig","displayName","componentId","defaultProps","bg","splitBorderProps","SkeletonTextOverlay","toBlockCharacters","text","replace","toString","SkeletonText","_ref","children","rest","_objectWithoutProperties","_excluded","_splitBorderProps","_splitBorderProps2","_slicedToArray","borderProps","textProps","blocks","createElement","_extends","color","as","display","position","FADE_ANIMATION","SkeletonFade","Skeleton","_ref2","_excluded2","top","right","bottom","left"],"sources":["../../../../src/elements/Skeleton/Skeleton.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useMemo } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { border, BorderProps } from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text, TextProps } from \"../Text\"\n\n/** SkeletonProps */\nexport type SkeletonBoxProps = BoxProps\n\n/** A mono10 Box */\nexport const SkeletonBox = styled(Box)``\nSkeletonBox.defaultProps = { bg: \"mono10\" }\nSkeletonBox.displayName = \"SkeletonBox\"\n\nconst splitBorderProps = splitProps<BorderProps>(border)\n\n/** SkeletonTextProps */\nexport type SkeletonTextProps = TextProps\n\nconst SkeletonTextOverlay = styled(SkeletonBox)`\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 0.25em);\n  transform: translateY(-50%);\n`\n\nconst toBlockCharacters = (text: React.ReactNode): string => {\n  if (typeof text === 'string') {\n    return text.replace(/\\S/g, '█')\n  }\n  if (typeof text === 'number') {\n    return text.toString().replace(/\\S/g, '█')\n  }\n  return '████████'\n}\n\n/**\n * Allows you to create boxes the exact dimensions of a given piece of text\n */\nexport const SkeletonText: React.FC<\n  React.PropsWithChildren<SkeletonTextProps>\n> = ({ children, ...rest }) => {\n  const [borderProps, textProps] = splitBorderProps(rest)\n  const blocks = useMemo(() => toBlockCharacters(children), [children])\n\n  return (\n    <Text color=\"transparent\" {...textProps}>\n      <Box as=\"span\" display=\"inline-flex\" position=\"relative\" aria-hidden=\"true\">\n        {blocks}\n\n        <SkeletonTextOverlay {...borderProps} />\n      </Box>\n    </Text>\n  )\n}\n\nconst FADE_ANIMATION = keyframes`\n  0% { opacity: 0.5; }\n  50% { opacity: 0; }\n  100% { opacity: 0.5; }\n`\n\nconst SkeletonFade = styled(Box)`\n  background-color: ${themeGet(\"colors.mono0\")};\n  animation: ${FADE_ANIMATION} 2s ease-in-out infinite;\n`\n\nexport type SkeletonProps = BoxProps\n\n/**\n * Animated wrapper for Skeletons\n */\nexport const Skeleton: React.FC<React.PropsWithChildren<SkeletonProps>> = ({\n  children,\n  ...rest\n}) => {\n  return (\n    <Box position=\"relative\" {...rest}>\n      {children}\n\n      <SkeletonFade position=\"absolute\" top={0} right={0} bottom={0} left={0} />\n    </Box>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,118 @@
+import React from "react";
+import { Join } from "../Join";
+import { Spacer } from "../Spacer";
+import { Skeleton, SkeletonBox, SkeletonText } from "./Skeleton";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: SkeletonBox,
+  title: "Components/Skeleton",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Loading state components including SkeletonBox and SkeletonText for creating placeholder content."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var SkeletonBoxDefault = {
+  args: {
+    width: 400,
+    height: 300
+  },
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement(SkeletonBox, args);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic SkeletonBox with width and height."
+      }
+    }
+  }
+};
+export var SkeletonBoxRounded = {
+  args: {
+    width: 400,
+    height: 300,
+    borderRadius: "1em"
+  },
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement(SkeletonBox, args);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "SkeletonBox with rounded corners."
+      }
+    }
+  }
+};
+export var SkeletonTextVariants = {
+  args: {
+    variant: "sm-display",
+    children: "Loading text..."
+  },
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Join, {
+      separator: /*#__PURE__*/React.createElement(Spacer, {
+        y: 1
+      })
+    }, /*#__PURE__*/React.createElement(SkeletonText, {
+      variant: "xs"
+    }, "Extra Small Text"), /*#__PURE__*/React.createElement(SkeletonText, {
+      variant: "sm"
+    }, "Small Text"), /*#__PURE__*/React.createElement(SkeletonText, {
+      variant: "md"
+    }, "Medium Text"), /*#__PURE__*/React.createElement(SkeletonText, {
+      variant: "lg"
+    }, "Large Text"), /*#__PURE__*/React.createElement(SkeletonText, {
+      variant: "xl"
+    }, "Extra Large Text"), /*#__PURE__*/React.createElement(SkeletonText, {
+      variant: "xxl"
+    }, "Double Extra Large Text"));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "SkeletonText showing all text variant sizes."
+      }
+    }
+  }
+};
+var ExampleArtworkSkeleton = function ExampleArtworkSkeleton(_ref) {
+  var i = _ref.i;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SkeletonBox, {
+    width: 200,
+    height: [200, 300, 250, 275][i % 4]
+  }), /*#__PURE__*/React.createElement(Spacer, {
+    y: 1
+  }), /*#__PURE__*/React.createElement(SkeletonText, {
+    variant: "sm-display"
+  }, "Artist Name"), /*#__PURE__*/React.createElement(SkeletonText, {
+    variant: "sm-display"
+  }, "Artwork Title"), /*#__PURE__*/React.createElement(SkeletonText, {
+    variant: "xs"
+  }, "Partner"), /*#__PURE__*/React.createElement(SkeletonText, {
+    variant: "xs"
+  }, "Price"));
+};
+export var ArtworkExample = {
+  args: {},
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Skeleton, null, /*#__PURE__*/React.createElement(ExampleArtworkSkeleton, {
+      i: 0
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Example of a skeleton for an artwork card layout."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Skeleton.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.story.js","names":["React","Join","Spacer","Skeleton","SkeletonBox","SkeletonText","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","SkeletonBoxDefault","args","width","height","render","createElement","story","SkeletonBoxRounded","borderRadius","SkeletonTextVariants","variant","children","separator","y","ExampleArtworkSkeleton","_ref","i","Fragment","ArtworkExample"],"sources":["../../../../src/elements/Skeleton/Skeleton.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Skeleton, SkeletonBox, SkeletonText } from \"./Skeleton\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: SkeletonBox,\n  title: \"Components/Skeleton\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Loading state components including SkeletonBox and SkeletonText for creating placeholder content.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const SkeletonBoxDefault = {\n  args: {\n    width: 400,\n    height: 300,\n  },\n  render: (args) => <SkeletonBox {...args} />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic SkeletonBox with width and height.\",\n      },\n    },\n  },\n}\n\nexport const SkeletonBoxRounded = {\n  args: {\n    width: 400,\n    height: 300,\n    borderRadius: \"1em\",\n  },\n  render: (args) => <SkeletonBox {...args} />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"SkeletonBox with rounded corners.\",\n      },\n    },\n  },\n}\n\nexport const SkeletonTextVariants = {\n  args: {\n    variant: \"sm-display\",\n    children: \"Loading text...\",\n  },\n  render: () => (\n    <Join separator={<Spacer y={1} />}>\n      <SkeletonText variant=\"xs\">Extra Small Text</SkeletonText>\n      <SkeletonText variant=\"sm\">Small Text</SkeletonText>\n      <SkeletonText variant=\"md\">Medium Text</SkeletonText>\n      <SkeletonText variant=\"lg\">Large Text</SkeletonText>\n      <SkeletonText variant=\"xl\">Extra Large Text</SkeletonText>\n      <SkeletonText variant=\"xxl\">Double Extra Large Text</SkeletonText>\n    </Join>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"SkeletonText showing all text variant sizes.\",\n      },\n    },\n  },\n}\n\nconst ExampleArtworkSkeleton: React.FC<{ i: number }> = ({ i }) => (\n  <>\n    <SkeletonBox width={200} height={[200, 300, 250, 275][i % 4]} />\n    <Spacer y={1} />\n    <SkeletonText variant=\"sm-display\">Artist Name</SkeletonText>\n    <SkeletonText variant=\"sm-display\">Artwork Title</SkeletonText>\n    <SkeletonText variant=\"xs\">Partner</SkeletonText>\n    <SkeletonText variant=\"xs\">Price</SkeletonText>\n  </>\n)\n\nexport const ArtworkExample = {\n  args: {},\n  render: () => (\n    <Skeleton>\n      <ExampleArtworkSkeleton i={0} />\n    </Skeleton>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Example of a skeleton for an artwork card layout.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

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

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

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

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

package/dist/esm/elements/Skip/Skip.js

@@ -0,0 +1,38 @@
+var _excluded = ["children"];
+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 styled from "styled-components";
+import { Clickable, ClickableProps } from "../Clickable";
+import { Text } from "../Text";
+import { visuallyHiddenMixin } from "../VisuallyHidden";
+var Container = styled(Clickable).withConfig({
+  displayName: "Skip__Container",
+  componentId: "sc-o4qt2-0"
+})(["display:block;text-decoration:underline;outline:0;&:not(:focus):not(:active){", "}"], visuallyHiddenMixin);
+
+/**
+ * Either a button or an anchor tag
+ */
+
+/**
+ * Skip link or button.
+ * Utilize `as="a"` for an anchor tag to link to landmark IDs.
+ * Used, for example, to skip to content in the nav.
+ * Is visually hidden until focused, which reveals it.
+ */
+export var Skip = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    ref: forwardedRef,
+    display: "block",
+    bg: "mono10"
+  }, rest), /*#__PURE__*/React.createElement(Text, {
+    p: 1,
+    variant: "sm"
+  }, children));
+});
+Skip.displayName = "Skip";
+//# sourceMappingURL=Skip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skip.js","names":["React","styled","Clickable","ClickableProps","Text","visuallyHiddenMixin","Container","withConfig","displayName","componentId","Skip","forwardRef","_ref","forwardedRef","children","rest","_objectWithoutProperties","_excluded","createElement","_extends","ref","display","bg","p","variant"],"sources":["../../../../src/elements/Skip/Skip.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { visuallyHiddenMixin } from \"../VisuallyHidden\"\n\nconst Container = styled(Clickable)`\n  display: block;\n  text-decoration: underline;\n  outline: 0;\n\n  &:not(:focus):not(:active) {\n    ${visuallyHiddenMixin}\n  }\n`\n\n/**\n * Either a button or an anchor tag\n */\nexport type SkipProps =\n  | ClickableProps\n  | (ClickableProps & {\n      as: \"a\"\n      href: string\n    })\n\n/**\n * Skip link or button.\n * Utilize `as=\"a\"` for an anchor tag to link to landmark IDs.\n * Used, for example, to skip to content in the nav.\n * Is visually hidden until focused, which reveals it.\n */\nexport const Skip = React.forwardRef(\n  ({ children, ...rest }: SkipProps, forwardedRef) => {\n    return (\n      <Container\n        ref={forwardedRef as any}\n        display=\"block\"\n        bg=\"mono10\"\n        {...rest}\n      >\n        <Text p={1} variant=\"sm\">\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nSkip.displayName = \"Skip\"\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,EAAEC,cAAc;AAClC,SAASC,IAAI;AACb,SAASC,mBAAmB;AAE5B,IAAMC,SAAS,GAAGL,MAAM,CAACC,SAAS,CAAC,CAAAK,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2FAM7BJ,mBAAmB,CAExB;;AAED;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMK,IAAI,gBAAGV,KAAK,CAACW,UAAU,CAClC,UAAAC,IAAA,EAAmCC,YAAY,EAAK;EAAA,IAAjDC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAKC,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAClB,oBACEjB,KAAA,CAAAkB,aAAA,CAACZ,SAAS,EAAAa,QAAA;IACRC,GAAG,EAAEP,YAAoB;IACzBQ,OAAO,EAAC,OAAO;IACfC,EAAE,EAAC;EAAQ,GACPP,IAAI,gBAERf,KAAA,CAAAkB,aAAA,CAACd,IAAI;IAACmB,CAAC,EAAE,CAAE;IAACC,OAAO,EAAC;EAAI,GACrBV,QAAQ,CACJ,CACG;AAEhB,CAAC,CACF;AAEDJ,IAAI,CAACF,WAAW,GAAG,MAAM"}