@artsy/palette 45.13.1 → 45.14.0-canary.1497.33065.0

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

@@ -0,0 +1,67 @@
+import { HTML } from "./HTML";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+var HTML_EXAMPLE = "\n<h1>H1 Headline</h1>\n<h2>H2 Headline</h2>\n<h3>H3 Headline</h3>\n<h4>H4 Headline</h4>\n<p>I\u2019m <em>of the opinion</em> that they use <strong>no <em>inert</em> material.</strong> All their equipment and instruments are alive, in some form or other.</p>\n<p>They don\u2019t construct or build at all. The idea of making is foreign to them. They utilize existing forms. Even their ships\u2014</p>\n<ol>\n  <li>first</li>\n  <li>second</li>\n  <li>third</li>\n</ol>\n<ul>\n  <li>first</li>\n  <li>second</li>\n  <li>third</li>\n</ul>\n<hr />\n<pre><code>this is a code block</code></pre>\n<blockquote>This is a block quote</blockquote>\n";
+export default {
+  component: HTML,
+  title: "Components/HTML",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Renders raw HTML content with Palette styling. Use the `html` prop to pass HTML markup."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    html: HTML_EXAMPLE,
+    variant: "lg-display",
+    style: {
+      border: "1px dotted"
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Large display variant with example HTML content."
+      }
+    }
+  }
+};
+export var Small = {
+  args: {
+    html: HTML_EXAMPLE,
+    variant: "sm",
+    style: {
+      border: "1px dotted"
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Small variant with example HTML content."
+      }
+    }
+  }
+};
+export var ExtraSmall = {
+  args: {
+    html: HTML_EXAMPLE,
+    variant: "xs",
+    style: {
+      border: "1px dotted"
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Extra small variant with example HTML content."
+      }
+    }
+  }
+};
+//# sourceMappingURL=HTML.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HTML.story.js","names":["HTML","STORYBOOK_PROPS_BLOCKLIST","HTML_EXAMPLE","component","title","tags","parameters","docs","description","controls","exclude","Default","args","html","variant","style","border","story","Small","ExtraSmall"],"sources":["../../../../src/elements/HTML/HTML.story.tsx"],"sourcesContent":["import { HTML } from \"./HTML\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst HTML_EXAMPLE = `\n<h1>H1 Headline</h1>\n<h2>H2 Headline</h2>\n<h3>H3 Headline</h3>\n<h4>H4 Headline</h4>\n<p>I’m <em>of the opinion</em> that they use <strong>no <em>inert</em> material.</strong> All their equipment and instruments are alive, in some form or other.</p>\n<p>They don’t construct or build at all. The idea of making is foreign to them. They utilize existing forms. Even their ships—</p>\n<ol>\n  <li>first</li>\n  <li>second</li>\n  <li>third</li>\n</ol>\n<ul>\n  <li>first</li>\n  <li>second</li>\n  <li>third</li>\n</ul>\n<hr />\n<pre><code>this is a code block</code></pre>\n<blockquote>This is a block quote</blockquote>\n`\n\nexport default {\n  component: HTML,\n  title: \"Components/HTML\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Renders raw HTML content with Palette styling. Use the `html` prop to pass HTML markup.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    html: HTML_EXAMPLE,\n    variant: \"lg-display\",\n    style: { border: \"1px dotted\" },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Large display variant with example HTML content.\",\n      },\n    },\n  },\n}\n\nexport const Small = {\n  args: {\n    html: HTML_EXAMPLE,\n    variant: \"sm\",\n    style: { border: \"1px dotted\" },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Small variant with example HTML content.\",\n      },\n    },\n  },\n}\n\nexport const ExtraSmall = {\n  args: {\n    html: HTML_EXAMPLE,\n    variant: \"xs\",\n    style: { border: \"1px dotted\" },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Extra small variant with example HTML content.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,SAASA,IAAI;AACb,SAASC,yBAAyB;AAElC,IAAMC,YAAY,qoBAoBjB;AAED,eAAe;EACbC,SAAS,EAAEH,IAAI;EACfI,KAAK,EAAE,iBAAiB;EACxBC,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,EAAET;IACX;EACJ;AACF,CAAC;AAED,OAAO,IAAMU,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,IAAI,EAAEX,YAAY;IAClBY,OAAO,EAAE,YAAY;IACrBC,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAa;EAChC,CAAC;EACDV,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXS,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,KAAK,GAAG;EACnBN,IAAI,EAAE;IACJC,IAAI,EAAEX,YAAY;IAClBY,OAAO,EAAE,IAAI;IACbC,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAa;EAChC,CAAC;EACDV,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXS,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAME,UAAU,GAAG;EACxBP,IAAI,EAAE;IACJC,IAAI,EAAEX,YAAY;IAClBY,OAAO,EAAE,IAAI;IACbC,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAa;EAChC,CAAC;EACDV,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXS,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

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

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

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

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

package/dist/esm/elements/HorizontalOverflow/HorizontalOverflow.js

@@ -0,0 +1,85 @@
+var _excluded = ["children"],
+  _excluded2 = ["ref"];
+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 composeRefs from "@seznam/compose-react-refs";
+import { themeGet } from "@styled-system/theme-get";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
+import styled from "styled-components";
+import { border, compose, justifyContent, padding } from "styled-system";
+import { visuallyDisableScrollbar } from "../../helpers/visuallyDisableScrollbar";
+import { splitProps } from "../../utils/splitProps";
+import { Box } from "../Box";
+var splitRailProps = splitProps(compose(padding, justifyContent, border));
+var Overlay = styled(Box).withConfig({
+  displayName: "HorizontalOverflow__Overlay",
+  componentId: "sc-yzjfm6-0"
+})(["position:relative;&::after{display:block;content:\"\";position:absolute;top:0;right:0;bottom:0;width:", ";z-index:1;pointer-events:none;background:", ";transition:opacity 250ms;opacity:", ";}"], themeGet("space.6"), themeGet("effects.fadeRight"), function (_ref2) {
+  var atEnd = _ref2.atEnd;
+  return atEnd ? 0 : 1;
+});
+var Viewport = styled(Box).withConfig({
+  displayName: "HorizontalOverflow__Viewport",
+  componentId: "sc-yzjfm6-1"
+})(["height:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;", ""], visuallyDisableScrollbar);
+var Rail = styled(Box).withConfig({
+  displayName: "HorizontalOverflow__Rail",
+  componentId: "sc-yzjfm6-2"
+})(["white-space:nowrap;min-width:100%;height:100%;"]);
+export var HorizontalOverflow = /*#__PURE__*/forwardRef(function (_ref3, forwardedRef) {
+  var children = _ref3.children,
+    rest = _objectWithoutProperties(_ref3, _excluded);
+  var ref = useRef();
+  useEffect(function () {
+    updateAtEnd();
+    window.addEventListener("resize", updateAtEnd);
+    return function () {
+      window.removeEventListener("resize", updateAtEnd);
+    };
+  }, []);
+
+  // FIXME: REACT_18_UPGRADE
+  // @ts-ignore
+  var _splitRailProps = splitRailProps(rest),
+    _splitRailProps2 = _slicedToArray(_splitRailProps, 2),
+    railProps = _splitRailProps2[0],
+    _splitRailProps2$ = _splitRailProps2[1],
+    _ref = _splitRailProps2$.ref,
+    boxProps = _objectWithoutProperties(_splitRailProps2$, _excluded2);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    atEnd = _useState2[0],
+    setAtEnd = _useState2[1];
+  var updateAtEnd = function updateAtEnd() {
+    if (!ref.current) return;
+    var _ref$current = ref.current,
+      scrollLeft = _ref$current.scrollLeft,
+      scrollWidth = _ref$current.scrollWidth,
+      clientWidth = _ref$current.clientWidth;
+
+    // Check if we're at the end of the scroll (within 1px)
+    if (Math.abs(scrollLeft + clientWidth - scrollWidth) <= 1) {
+      setAtEnd(true);
+      return;
+    }
+    setAtEnd(false);
+  };
+  return /*#__PURE__*/React.createElement(Overlay, _extends({
+    atEnd: atEnd
+  }, boxProps), /*#__PURE__*/React.createElement(Viewport, {
+    ref: composeRefs(ref, forwardedRef),
+    onScroll: updateAtEnd
+  }, /*#__PURE__*/React.createElement(Rail, _extends({
+    display: "inline-flex",
+    verticalAlign: "top"
+  }, railProps), children)));
+});
+HorizontalOverflow.displayName = "HorizontalOverflow";
+//# sourceMappingURL=HorizontalOverflow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalOverflow.js","names":["composeRefs","themeGet","React","forwardRef","useEffect","useRef","useState","styled","border","compose","justifyContent","padding","visuallyDisableScrollbar","splitProps","Box","splitRailProps","Overlay","withConfig","displayName","componentId","_ref2","atEnd","Viewport","Rail","HorizontalOverflow","_ref3","forwardedRef","children","rest","_objectWithoutProperties","_excluded","ref","updateAtEnd","window","addEventListener","removeEventListener","_splitRailProps","_splitRailProps2","_slicedToArray","railProps","_splitRailProps2$","_ref","boxProps","_excluded2","_useState","_useState2","setAtEnd","current","_ref$current","scrollLeft","scrollWidth","clientWidth","Math","abs","createElement","_extends","onScroll","display","verticalAlign"],"sources":["../../../../src/elements/HorizontalOverflow/HorizontalOverflow.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport {\n  border,\n  BorderProps,\n  compose,\n  justifyContent,\n  JustifyContentProps,\n  padding,\n  PaddingProps,\n} from \"styled-system\"\nimport { visuallyDisableScrollbar } from \"../../helpers/visuallyDisableScrollbar\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { Box, BoxProps } from \"../Box\"\n\nconst splitRailProps = splitProps<\n  PaddingProps & JustifyContentProps & BorderProps\n>(compose(padding, justifyContent, border))\n\nconst Overlay = styled(Box)<{ atEnd: boolean }>`\n  position: relative;\n\n  /* Fade-out gradient */\n  &::after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: ${themeGet(\"space.6\")};\n    z-index: 1;\n    pointer-events: none;\n    background: ${themeGet(\"effects.fadeRight\")};\n    /* Hide when scrolled all the way over */\n    transition: opacity 250ms;\n    opacity: ${({ atEnd }) => (atEnd ? 0 : 1)};\n  }\n`\n\nconst Viewport = styled(Box)`\n  height: 100%;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  ${visuallyDisableScrollbar}\n`\n\nconst Rail = styled(Box)`\n  white-space: nowrap;\n  min-width: 100%;\n  height: 100%;\n`\n\nexport type HorizontalOverflowProps = BoxProps & { children: React.ReactNode }\n\nexport const HorizontalOverflow = forwardRef<\n  HTMLDivElement,\n  HorizontalOverflowProps\n>(({ children, ...rest }, forwardedRef) => {\n  const ref = useRef<HTMLDivElement | null>()\n\n  useEffect(() => {\n    updateAtEnd()\n    window.addEventListener(\"resize\", updateAtEnd)\n    return () => {\n      window.removeEventListener(\"resize\", updateAtEnd)\n    }\n  }, [])\n\n  // FIXME: REACT_18_UPGRADE\n  // @ts-ignore\n  const [railProps, { ref: _ref, ...boxProps }] = splitRailProps(rest)\n\n  const [atEnd, setAtEnd] = useState(false)\n\n  const updateAtEnd = () => {\n    if (!ref.current) return\n\n    const {\n      current: { scrollLeft, scrollWidth, clientWidth },\n    } = ref\n\n    // Check if we're at the end of the scroll (within 1px)\n    if (Math.abs(scrollLeft + clientWidth - scrollWidth) <= 1) {\n      setAtEnd(true)\n      return\n    }\n\n    setAtEnd(false)\n  }\n\n  return (\n    <Overlay atEnd={atEnd} {...boxProps}>\n      <Viewport\n        ref={composeRefs(ref, forwardedRef) as any}\n        onScroll={updateAtEnd}\n      >\n        <Rail display=\"inline-flex\" verticalAlign=\"top\" {...railProps}>\n          {children}\n        </Rail>\n      </Viewport>\n    </Overlay>\n  )\n})\n\nHorizontalOverflow.displayName = \"HorizontalOverflow\"\n"],"mappings":"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"}

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

@@ -0,0 +1,95 @@
+import React from "react";
+import { HorizontalOverflow } from "./HorizontalOverflow";
+import { Text } from "../Text";
+import { Spacer } from "../Spacer";
+import { Join } from "../Join";
+import { Box } from "../Box";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: HorizontalOverflow,
+  title: "Components/HorizontalOverflow",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A container that allows content to overflow horizontally with scrolling when needed."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    bg: "mono10",
+    p: 2,
+    children: /*#__PURE__*/React.createElement(Join, {
+      separator: /*#__PURE__*/React.createElement(Spacer, {
+        x: 2
+      })
+    }, Array.from(Array(50)).map(function (_, i) {
+      return /*#__PURE__*/React.createElement(Text, {
+        key: i,
+        variant: "sm-display",
+        color: "mono100",
+        mr: 2
+      }, "Example #", i);
+    }))
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Horizontal overflow container with many items that scroll."
+      }
+    }
+  }
+};
+export var ShortContent = {
+  args: {
+    bg: "mono10",
+    p: 2,
+    children: /*#__PURE__*/React.createElement(Text, {
+      variant: "sm-display"
+    }, "Not overflowing")
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Container with content that doesn't overflow."
+      }
+    }
+  }
+};
+export var FillHeightCenteredContent = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      height: 100,
+      bg: "red10"
+    }, /*#__PURE__*/React.createElement(HorizontalOverflow, {
+      border: "1px solid",
+      p: 2,
+      height: "100%"
+    }, /*#__PURE__*/React.createElement(Join, {
+      separator: /*#__PURE__*/React.createElement(Spacer, {
+        x: 2
+      })
+    }, Array.from(Array(50)).map(function (_, i) {
+      return /*#__PURE__*/React.createElement(Text, {
+        key: i,
+        variant: "sm-display",
+        color: "mono100",
+        display: "flex",
+        alignItems: "center"
+      }, "Example #", i);
+    }))));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Full height container with centered content."
+      }
+    }
+  }
+};
+//# sourceMappingURL=HorizontalOverflow.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalOverflow.story.js","names":["React","HorizontalOverflow","Text","Spacer","Join","Box","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","bg","p","children","createElement","separator","x","Array","from","map","_","i","key","variant","color","mr","story","ShortContent","FillHeightCenteredContent","render","height","border","display","alignItems"],"sources":["../../../../src/elements/HorizontalOverflow/HorizontalOverflow.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { HorizontalOverflow } from \"./HorizontalOverflow\"\nimport { Text } from \"../Text\"\nimport { Spacer } from \"../Spacer\"\nimport { Join } from \"../Join\"\nimport { Box } from \"../Box\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: HorizontalOverflow,\n  title: \"Components/HorizontalOverflow\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A container that allows content to overflow horizontally with scrolling when needed.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    bg: \"mono10\",\n    p: 2,\n    children: (\n      <Join separator={<Spacer x={2} />}>\n        {Array.from(Array(50)).map((_, i) => (\n          <Text key={i} variant=\"sm-display\" color=\"mono100\" mr={2}>\n            Example #{i}\n          </Text>\n        ))}\n      </Join>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Horizontal overflow container with many items that scroll.\",\n      },\n    },\n  },\n}\n\nexport const ShortContent = {\n  args: {\n    bg: \"mono10\",\n    p: 2,\n    children: <Text variant=\"sm-display\">Not overflowing</Text>,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Container with content that doesn't overflow.\",\n      },\n    },\n  },\n}\n\nexport const FillHeightCenteredContent = {\n  render: () => (\n    <Box height={100} bg=\"red10\">\n      <HorizontalOverflow border=\"1px solid\" p={2} height=\"100%\">\n        <Join separator={<Spacer x={2} />}>\n          {Array.from(Array(50)).map((_, i) => (\n            <Text\n              key={i}\n              variant=\"sm-display\"\n              color=\"mono100\"\n              display=\"flex\"\n              alignItems=\"center\"\n            >\n              Example #{i}\n            </Text>\n          ))}\n        </Join>\n      </HorizontalOverflow>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Full height container with centered content.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,kBAAkB;AAC3B,SAASC,IAAI;AACb,SAASC,MAAM;AACf,SAASC,IAAI;AACb,SAASC,GAAG;AACZ,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEN,kBAAkB;EAC7BO,KAAK,EAAE,+BAA+B;EACtCC,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,QAAQ;IACZC,CAAC,EAAE,CAAC;IACJC,QAAQ,eACNnB,KAAA,CAAAoB,aAAA,CAAChB,IAAI;MAACiB,SAAS,eAAErB,KAAA,CAAAoB,aAAA,CAACjB,MAAM;QAACmB,CAAC,EAAE;MAAE;IAAI,GAC/BC,KAAK,CAACC,IAAI,CAACD,KAAK,CAAC,EAAE,CAAC,CAAC,CAACE,GAAG,CAAC,UAACC,CAAC,EAAEC,CAAC;MAAA,oBAC9B3B,KAAA,CAAAoB,aAAA,CAAClB,IAAI;QAAC0B,GAAG,EAAED,CAAE;QAACE,OAAO,EAAC,YAAY;QAACC,KAAK,EAAC,SAAS;QAACC,EAAE,EAAE;MAAE,GAAC,WAC/C,EAACJ,CAAC,CACN;IAAA,CACR,CAAC;EAGR,CAAC;EACDjB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXoB,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,YAAY,GAAG;EAC1BjB,IAAI,EAAE;IACJC,EAAE,EAAE,QAAQ;IACZC,CAAC,EAAE,CAAC;IACJC,QAAQ,eAAEnB,KAAA,CAAAoB,aAAA,CAAClB,IAAI;MAAC2B,OAAO,EAAC;IAAY,GAAC,iBAAe;EACtD,CAAC;EACDnB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXoB,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAME,yBAAyB,GAAG;EACvCC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJnC,KAAA,CAAAoB,aAAA,CAACf,GAAG;MAAC+B,MAAM,EAAE,GAAI;MAACnB,EAAE,EAAC;IAAO,gBAC1BjB,KAAA,CAAAoB,aAAA,CAACnB,kBAAkB;MAACoC,MAAM,EAAC,WAAW;MAACnB,CAAC,EAAE,CAAE;MAACkB,MAAM,EAAC;IAAM,gBACxDpC,KAAA,CAAAoB,aAAA,CAAChB,IAAI;MAACiB,SAAS,eAAErB,KAAA,CAAAoB,aAAA,CAACjB,MAAM;QAACmB,CAAC,EAAE;MAAE;IAAI,GAC/BC,KAAK,CAACC,IAAI,CAACD,KAAK,CAAC,EAAE,CAAC,CAAC,CAACE,GAAG,CAAC,UAACC,CAAC,EAAEC,CAAC;MAAA,oBAC9B3B,KAAA,CAAAoB,aAAA,CAAClB,IAAI;QACH0B,GAAG,EAAED,CAAE;QACPE,OAAO,EAAC,YAAY;QACpBC,KAAK,EAAC,SAAS;QACfQ,OAAO,EAAC,MAAM;QACdC,UAAU,EAAC;MAAQ,GACpB,WACU,EAACZ,CAAC,CACN;IAAA,CACR,CAAC,CACG,CACY,CACjB;EAAA,CACP;EACDjB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXoB,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

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

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

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

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

package/dist/esm/elements/Image/Image.js

@@ -0,0 +1,118 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["className", "height", "lazyLoad", "onLoad", "placeHolderURL", "preventRightClick", "style", "width"];
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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, { useState, useRef, useEffect } from "react";
+import { Box, splitBoxProps } from "../Box";
+import styled from "styled-components";
+import isPropValid from "@emotion/is-prop-valid";
+export var Image = function Image(_ref) {
+  var className = _ref.className,
+    height = _ref.height,
+    _ref$lazyLoad = _ref.lazyLoad,
+    lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad,
+    _onLoad = _ref.onLoad,
+    placeHolderURL = _ref.placeHolderURL,
+    _ref$preventRightClic = _ref.preventRightClick,
+    preventRightClick = _ref$preventRightClic === void 0 ? false : _ref$preventRightClic,
+    style = _ref.style,
+    width = _ref.width,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState("Pending"),
+    _useState2 = _slicedToArray(_useState, 2),
+    mode = _useState2[0],
+    setMode = _useState2[1];
+  var imageRef = useRef(null);
+  useEffect(function () {
+    var _imageRef$current;
+    if ((_imageRef$current = imageRef.current) !== null && _imageRef$current !== void 0 && _imageRef$current.complete) {
+      setMode("Ready");
+    }
+  }, []);
+  var _splitBoxProps = splitBoxProps(rest),
+    _splitBoxProps2 = _slicedToArray(_splitBoxProps, 2),
+    boxProps = _splitBoxProps2[0],
+    imageProps = _splitBoxProps2[1];
+
+  // Common image props
+  var commonImgProps = _objectSpread({
+    ref: imageRef,
+    loading: lazyLoad ? "lazy" : undefined,
+    onLoad: function onLoad(event) {
+      setMode("Ready");
+      _onLoad === null || _onLoad === void 0 ? void 0 : _onLoad(event);
+    },
+    onContextMenu: preventRightClick ? function (e) {
+      return e.preventDefault();
+    } : undefined
+  }, imageProps);
+
+  // Common lazy loading style
+  var lazyLoadStyle = lazyLoad ? {
+    transition: "opacity 0.2s ease-in-out",
+    opacity: mode === "Ready" ? 1 : 0
+  } : {};
+
+  // If there's a placeholder URL or lazy loading is enabled, use a wrapper container
+  if (placeHolderURL || lazyLoad) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      className: className,
+      position: "relative",
+      width: width || "100%",
+      height: height || "100%",
+      bg: lazyLoad && !placeHolderURL ? "mono10" : undefined
+    }, boxProps, {
+      style: _objectSpread({}, placeHolderURL && {
+        backgroundImage: "url(".concat(placeHolderURL, ")"),
+        backgroundSize: "cover",
+        backgroundPosition: "center"
+      })
+    }), /*#__PURE__*/React.createElement(Img, _extends({
+      as: "img",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      display: "block",
+      style: _objectSpread(_objectSpread({}, lazyLoadStyle), style)
+    }, commonImgProps)));
+  }
+
+  // If no placeholder and no lazy loading, render a direct img element
+  return /*#__PURE__*/React.createElement(Img
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  , _extends({
+    as: "img",
+    className: className,
+    width: width,
+    height: height,
+    display: "block",
+    style: style
+  }, boxProps, commonImgProps));
+};
+Image.displayName = "Image";
+// Can be removed when styled-components is updated in Force
+// https://github.com/emotion-js/emotion/blob/b882bcba85132554992e4bd49e94c95939bbf810/packages/is-prop-valid/CHANGELOG.md#patch-changes
+var Img = styled(Box).withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return isPropValid(prop) || prop === "fetchPriority";
+  }
+}).withConfig({
+  displayName: "Image__Img",
+  componentId: "sc-sq2zgu-0"
+})([""]);
+//# sourceMappingURL=Image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","names":["React","useState","useRef","useEffect","Box","splitBoxProps","styled","isPropValid","Image","_ref","className","height","_ref$lazyLoad","lazyLoad","onLoad","placeHolderURL","_ref$preventRightClic","preventRightClick","style","width","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","mode","setMode","imageRef","_imageRef$current","current","complete","_splitBoxProps","_splitBoxProps2","boxProps","imageProps","commonImgProps","_objectSpread","ref","loading","undefined","event","onContextMenu","e","preventDefault","lazyLoadStyle","transition","opacity","createElement","_extends","position","bg","backgroundImage","concat","backgroundSize","backgroundPosition","Img","as","top","left","display","displayName","withConfig","shouldForwardProp","prop","componentId"],"sources":["../../../../src/elements/Image/Image.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport styled from \"styled-components\"\nimport isPropValid from \"@emotion/is-prop-valid\"\n\nexport interface ImageProps\n  extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"width\" | \"height\">,\n    BoxProps {\n  /** Flag for if image should be lazy loaded */\n  lazyLoad?: boolean\n  /** Flag indicating that right clicks should be prevented */\n  preventRightClick?: boolean\n  /** Currently, this is used by clients for BlurHash data,\n      decoded and represented as a data URL */\n  placeHolderURL?: string\n}\n\nexport const Image: React.FC<ImageProps> = ({\n  className,\n  height,\n  lazyLoad = false,\n  onLoad,\n  placeHolderURL,\n  preventRightClick = false,\n  style,\n  width,\n  ...rest\n}) => {\n  const [mode, setMode] = useState<\"Pending\" | \"Ready\">(\"Pending\")\n  const imageRef = useRef<HTMLImageElement>(null)\n\n  useEffect(() => {\n    if (imageRef.current?.complete) {\n      setMode(\"Ready\")\n    }\n  }, [])\n\n  const [boxProps, imageProps] = splitBoxProps(rest)\n\n  // Common image props\n  const commonImgProps = {\n    ref: imageRef as any,\n    loading: lazyLoad ? (\"lazy\" as const) : undefined,\n    onLoad: (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n      setMode(\"Ready\")\n      onLoad?.(event)\n    },\n    onContextMenu: preventRightClick ? (e) => e.preventDefault() : undefined,\n    ...imageProps,\n  }\n\n  // Common lazy loading style\n  const lazyLoadStyle = lazyLoad\n    ? {\n        transition: \"opacity 0.2s ease-in-out\",\n        opacity: mode === \"Ready\" ? 1 : 0,\n      }\n    : {}\n\n  // If there's a placeholder URL or lazy loading is enabled, use a wrapper container\n  if (placeHolderURL || lazyLoad) {\n    return (\n      <Box\n        className={className}\n        position=\"relative\"\n        width={width || \"100%\"}\n        height={height || \"100%\"}\n        bg={lazyLoad && !placeHolderURL ? \"mono10\" : undefined}\n        {...boxProps}\n        style={{\n          ...(placeHolderURL && {\n            backgroundImage: `url(${placeHolderURL})`,\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n          }),\n        }}\n      >\n        <Img\n          as=\"img\"\n          position=\"absolute\"\n          top={0}\n          left={0}\n          width=\"100%\"\n          height=\"100%\"\n          display=\"block\"\n          style={{ ...lazyLoadStyle, ...style }}\n          {...commonImgProps}\n        />\n      </Box>\n    )\n  }\n\n  // If no placeholder and no lazy loading, render a direct img element\n  return (\n    <Img\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      as=\"img\"\n      className={className}\n      width={width}\n      height={height}\n      display=\"block\"\n      style={style}\n      {...boxProps}\n      {...commonImgProps}\n    />\n  )\n}\n\n// Can be removed when styled-components is updated in Force\n// https://github.com/emotion-js/emotion/blob/b882bcba85132554992e4bd49e94c95939bbf810/packages/is-prop-valid/CHANGELOG.md#patch-changes\nconst Img = styled(Box).withConfig({\n  shouldForwardProp: (prop) => isPropValid(prop) || prop === \"fetchPriority\",\n})``\n"],"mappings":"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"}

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

@@ -0,0 +1,137 @@
+import React from "react";
+import { Image } from "../Image";
+import styled from "styled-components";
+import { Box } from "../Box";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+var blurhashDataUri = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAQK0lEQVR4AQEgEN/vAP////////////////////////z//vr3//r18f/17ur/7+fi/+ng2v/j2NH/3c/J/9fHwf/SwLn/zbmz/8m0rv/Hsav/xrCr/8eyrf/KtrH/zru3/9PDv//Zy8j/4NTR/+fd2v/u5+P/9O/r//r38////fn////+////////////AP////////////////////////v//vr2//n08P/07un/7+fi/+nf2f/j19H/3c/I/9fHwP/Rv7j/zLmy/8m0rf/Hsar/xrCq/8exrP/JtbD/zbu3/9LCvv/Zysf/39TQ/+bd2v/t5uP/9O/r//r28v///fn////+////////////AP///////////////////////vv//fn2//n08P/07en/7ubh/+je2P/i1s//283H/9XFvv/Qvbb/y7ew/8exq//Frqj/xK2o/8Wvqv/Hsq7/y7i1/9HAvf/XycX/3tLP/+Xc2P/t5eL/8+7q//r28v///fj////+////////////AP///////////////////v///fr//Pn1//jz7v/z7Of/7eXf/+fd1v/g1M3/2cvE/9PDu//NurP/yLOs/8Sup//BqqT/wamj/8Grpv/Er6r/yLWx/869uv/VxsP/3NDN/+Ta1//r5OD/8u3p//n18f/+/Pf////9////////////AP///////////////////v///Pn/+/f0//bx7f/x6uX/6+Pd/+Xa1P/e0cr/18jA/9C/t//Ktq7/xK+n/8Cpof+9pZ7/vKOe/72loP/AqaX/xLCs/8q4tf/Rwr//2c3K/+HX1P/p4d7/8evn//f07//9+/b////8////////////AP///////////////////f/++/j/+vby//Xw6//v6OP/6eDa/+LX0P/bzsb/08S8/8y6sv/Fsaj/v6mg/7uimv+3npf/tpyW/7eemf+6op7/v6qm/8WzsP/Nvbv/1cnG/97U0f/m39v/7unl//by7v/8+vX////7////////////AP/////////////////++//8+fb/+PTw//Pu6f/t5uD/5t3X/9/Uzf/XysL/z7+2/8i1q//Aq6H/uqGY/7Sakf+xlY3/r5ON/7CVkP+0mpb/uaKf/8Csqv/IuLb/0cTB/9rQzf/k3Nj/7Obj//Tw7P/7+PP////6/////v//////AP/////////////+//78+v/6+PX/9vLu//Hr5//q497/49rT/9zQyP/Uxbz/y7qw/8OvpP+6o5n/s5mP/62Rh/+pi4L/qImC/6iLhv+skI3/spmX/7qlo//Dsa//zL+9/9bMyf/g2NX/6uTg//Lu6v/59/L///74/////f//////AP////////////78//z6+f/59vP/9PDs/+7p5P/o4dr/4NfQ/9jMxP/Pwbf/xrSq/72onP+0m4//rJCE/6WGe/+hf3b/n3x1/6B/ef+khYL/qo+N/7Ocm/+9qqn/x7m3/9LHxf/d1dL/5+Hd//Ds5//49fD//vz3/////P//////AP///////v7//fz7//v59//39PH/8u7q/+zm4f/l3tf/3dTM/9XIv//LvLH/wa6i/7ehk/+uk4X/pYV4/516bf+Ycmf/lm5m/5dxa/+beXb/ooWD/6uTkv+2o6L/wrOy/87CwP/Z0c7/5N7a/+7q5f/28+7//Pv1////+v////7/AP7+/v/9/f3//Pv6//n39v/18vD/8Ozo/+rk3//j29T/2tDI/9HEuv/Ht6v/vaib/7KZiv+niXr/nXpq/5VtXf+PYlX/jF5U/41hW/+Sa2j/mnl4/6SJif+wm5v/va2s/8q9vP/Wzcr/4dvY/+zo4//08uz/+/r0////+f////z/APz8/f/8/Pz/+vn5//f29f/z8e7/7urm/+ji3P/g2NH/2M3E/87Atf/DsqX/uKKU/6ySgf+hgG7/lm5b/4xeSv+FUT//gks+/4NPSP+IW1n/kWxs/52AgP+qlJT/uKem/8a5uP/Tysf/39nV/+rm4f/z8Ov/+vny////+P////v/APv7/P/7+/v/+fj4//b08//y7+3/7Ojl/+bg2v/e1s7/1crB/8u8sf/AraD/tJ2N/6eKeP+bd2L/j2JL/4ROM/98PB7/eTQc/3o5MP+ASkj/iWBg/5Z2eP+kjI3/s6Gh/8K1tP/QxsT/3dbT/+jk3//y7+n/+fjx///+9/////v/APr6+//6+vr/+Pf3//Xz8v/w7uz/6+fj/+Te2P/c1Mz/08e+/8i5rf+9qZv/sJiH/6OEcP+Wblb/iVc4/309B/90IQD/cAgA/3EaAP94Nzb/g1NV/5BucP+ghof/r52d/7+xsP/OxMH/29TR/+fi3f/w7uj/+Pfw//7+9v////r/APn6+//5+fr/9/f3//Tz8v/v7ev/6ubi/+Pd1//b0sr/0cW7/8a3qv+7ppf/rpSB/6B/af+SZ0z/hEwj/3cqAP9uAAD/aQAA/2oAAP9xIR//fUhL/4xmaf+cgYP/rZma/72urv/Mwr//2dPP/+Xh3P/w7ef/+Pfw//799v////n/APn5+v/4+Pn/9vb2//Py8f/v7Or/6eXh/+Lc1v/a0cn/0MS6/8W1qP+5pJT/rJF+/557Y/+PYkP/gUMC/3QUAP9qAAD/ZQAA/2YAAP9tAAD/ej9D/4lhZP+afYD/q5aX/7utrP/LwL7/2dLO/+Xg2//v7ef/9/bv//399f////n/APj5+v/4+Pn/9vb2//Py8f/u7Or/6eTh/+Lb1f/Z0Mj/0MO5/8W0p/+4o5P/q497/515YP+OXz7/gD4A/3MAAP9oAAD/YwAA/2QAAP9sAAD/eTo+/4heYv+ZfH7/qpWW/7usq//KwL7/2NHO/+Xg2//v7Ob/9/bv//399f////n/APj5+v/4+Pn/9vb2//Py8f/u7Or/6eXh/+Lb1f/a0Mj/0MO5/8W0p/+5opL/rI97/554YP+PXj3/gT4A/3QAAP9qAAD/ZQAA/2YAAP9tAAD/ejs//4lfYv+afH7/q5aW/7usq//KwL7/2NHO/+Xg2//v7eb/9/bv//399f////n/APn6+//4+fr/9vb3//Py8f/v7Or/6eXh/+Lc1v/a0cn/0cO5/8a0qP+6o5T/rZB9/596Y/+RYUL/hEIA/3cSAP9uAAD/aQAA/2oAAP9yBwP/fUFE/4xjZv+cf4H/rJeY/7ytrf/Mwb//2dLP/+Xh3P/v7ef/+Pfw//399v////n/APn6+//5+vr/9/f3//Tz8v/w7ev/6ubi/+Pd1//b0sr/0sW7/8i2qv+8pZb/sJKA/6N9Z/+VZkr/iEof/30oAP90AAD/cAAA/3EAAP94JiP/g0tN/5Bpa/+gg4T/r5qb/7+wr//Nw8D/29TQ/+bi3f/w7uj/+Pfw//7+9v////r/APr7/P/5+vv/+Pj4//X08//w7uz/6+fj/+Xe2P/d08z/1Me9/8q4rP+/qJr/s5aF/6eCbv+abFT/jlQ1/4Q6AP98HwD/eQsA/3oeBP+AOzj/ilZX/5Zwcv+kiIn/s5+f/8Kzsv/QxcP/3NXS/+jj3v/x7+n/+fjx//7+9/////v/APv8/f/6/Pz/+fn5//b19P/y8O3/7ejl/+bg2v/f1c7/1snA/827sP/Cq57/t5qL/6yIdv+gdF//lV9H/4xLLv+FOhn/gjMa/4M7Mf+ITUr/kWNi/515ev+qj4//uKSj/8W3tf/TyMb/39jU/+nl4P/y8Or/+vny////+P////v/APz+/v/7/f3/+vr6//f39f/z8e//7urm/+jh3P/h19D/2cvD/9C+tP/Gr6P/vJ+R/7GOfv+mfGr/nWtX/5RaRv+PTjv/jEo8/41PSP+SXVr/mm9u/6SCgv+wlpb/vamo/8m7uf/Wy8n/4drW/+vn4v/08ez/+/r0////+f////z/AP3////9/v7/+/z7//j49v/18/D/8Ozo/+rj3v/k2tP/3M7G/9PCuP/KtKj/wKWY/7eVhv+thXX/pHVl/51oWP+YX1D/llxR/5dgWv+ba2j/onp5/6uLi/+2nZz/wq+u/86/vf/Zz8z/5N3Z/+3p5P/18+7//Pv1////+v////3/AP7////+/////P38//r6+P/29PL/8u7q/+zm4f/m3Nb/39HJ/9fFvP/OuK3/xaqe/7ybjv+0jX//rIBy/6V0Z/+hbWH/n2ti/6Bvaf+keHT/qoWD/7OUk/+9pKP/x7Wz/9LEwv/d0tD/5uDc/+/r5v/39e///fz2////+///////AP///////////v/9//v7+f/49vP/9PDs/+7o4//o39n/4tTN/9rJwP/SvLL/yq+k/8Kilv+6lYn/s4l9/61/dP+peW//qHhw/6l8dv+shID/so+M/7qdm//Dq6n/zLq4/9bIxv/g1tP/6eLf//Ht6f/49vH//v34/////f//////AP/////////////+//39+v/5+PX/9fHu//Dq5f/r4dv/5NfQ/93MxP/WwLf/zrSq/8eonf/AnJH/uZGG/7SJf/+xhHv/sIN8/7GGgf+0jon/uZiV/8Ckov/Isq//0b+9/9rNyv/j2db/7OXh//Pv6//6+PP///75/////v//////AP////////////////7++//7+fb/9/Pv//Ls5//t497/59nT/+DPyP/ZxLz/0riv/8uto//Fopj/v5iP/7qRiP+3jYX/toyF/7ePiv+6lpL/v5+c/8WrqP/Nt7T/1cTB/97Qzf/m3Nn/7ufj//Xx7f/7+fT////6////////////AP///////////////////P/8+vf/+PTx//Tt6f/v5eD/6dzW/+PSy//cx7//1by0/8+xqP/Jp57/xJ6W/8CYj/+9lIz/vJSN/72Xkf/AnZj/xKai/8qwrf/RvLn/2cjF/+HU0P/o39v/8Onl//fy7v/8+vb////8////////////AP///////////////////f/9+/j/+vby//Xv6v/w5uH/693Y/+XUzf/eycL/2L+3/9K1rf/Mq6P/yKOb/8Sdlf/BmpL/wZqT/8Kdl//Eop7/yKun/861sf/VwLz/3MvI/+PW0//q4d3/8evn//j08P/9+/f////8////////////AP///////////////////v/+/Pn/+vbz//bv6//x6OP/7N/Z/+bVz//gy8T/2sG6/9S3r//Prqb/yqef/8ehmf/Fnpf/xJ6X/8Whm//HpqL/y66q/9G4tP/Xwr//3s3K/+XY1f/s49//8+zo//n18f/+/Pj////9////////////AP///////////////////v/+/fn/+/fz//fw7P/y6OP/7eDa/+fW0P/hzMb/28K7/9a5sf/RsKj/zKmh/8mjnP/HoJn/xqCa/8ejnv/JqaT/zbCs/9K6tv/YxMD/38/L/+bZ1v/t4+D/8+3p//n18f/+/Pj////+////////////HCU4UCaYN3YAAAAASUVORK5CYII=";
+export default {
+  component: Image,
+  title: "Components/Image",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "An optimized image component with support for lazy loading, srcSet, and placeholder images."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    id: "example",
+    className: "example",
+    width: "300px",
+    height: "200px",
+    src: "https://picsum.photos/seed/example/300/200",
+    fetchPriority: "high"
+  }
+};
+export var WithSrcSet = {
+  args: {
+    id: "example",
+    className: "example",
+    width: "300px",
+    height: "200px",
+    src: "https://picsum.photos/seed/example/300/200",
+    srcSet: "https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x"
+  }
+};
+export var WithPlaceholder = {
+  args: {
+    id: "example",
+    className: "example",
+    width: "300px",
+    height: "200px",
+    src: "https://picsum.photos/seed/example/300/200",
+    placeHolderURL: blurhashDataUri
+  }
+};
+export var ImageLazyLoad = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, Array.from(Array(100)).map(function (_, i) {
+      return /*#__PURE__*/React.createElement(Image, {
+        key: i,
+        lazyLoad: true,
+        width: "300px",
+        height: "200px",
+        src: "https://picsum.photos/seed/".concat(i, "/300/200")
+      });
+    }));
+  }
+};
+export var ImageLazyLoadSrcSet = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, Array.from(Array(100)).map(function (_, i) {
+      return /*#__PURE__*/React.createElement(Image, {
+        key: i,
+        lazyLoad: true,
+        width: "300px",
+        height: "200px",
+        src: "https://picsum.photos/seed/".concat(i, "/300/200"),
+        srcSet: "https://picsum.photos/seed/".concat(i, "/300/200 1x, https://picsum.photos/seed/").concat(i, "/600/400 2x")
+      });
+    }));
+  }
+};
+export var ImageLazyLoadSrcSetPlaceHolderURL = {
+  args: {
+    lazyLoad: true,
+    width: "300px",
+    height: "200px",
+    placeHolderURL: blurhashDataUri,
+    src: "https://picsum.photos/seed/example/300/200",
+    srcSet: "https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x"
+  }
+};
+var StyledImage = styled(Image).withConfig({
+  displayName: "Imagestory__StyledImage",
+  componentId: "sc-1wz2m45-0"
+})(["width:100%;height:100%;"]);
+export var WithStyledImage = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      width: 400,
+      height: 400,
+      bg: "red"
+    }, /*#__PURE__*/React.createElement(StyledImage, {
+      placeHolderURL: blurhashDataUri,
+      src: "https://picsum.photos/seed/example/300/200",
+      srcSet: "https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x"
+    }));
+  }
+};
+export var WithCustomStyle = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      width: 400,
+      height: 400,
+      bg: "red"
+    }, /*#__PURE__*/React.createElement(Image, {
+      width: "100%",
+      height: "100%",
+      src: "https://picsum.photos/seed/example/300/200",
+      style: {
+        borderRadius: "10px",
+        borderColor: "blue",
+        borderWidth: "10px",
+        borderStyle: "solid"
+      }
+    }));
+  }
+};
+export var EnsuresImageDoesNotCollapse = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      width: 300,
+      height: 200,
+      bg: "red"
+    }, /*#__PURE__*/React.createElement(Image, {
+      src: "https://picsum.photos/seed/example/300/200",
+      lazyLoad: true
+    }));
+  }
+};
+//# sourceMappingURL=Image.story.js.map