@artsy/palette 41.1.1 → 41.1.2

package/dist/elements/Image/Image.js

@@ -76,8 +76,8 @@ var Image = function Image(_ref) {
     return /*#__PURE__*/_react.default.createElement(_Box.Box, _extends({
       className: className,
       position: "relative",
-      width: width,
-      height: height,
+      width: width || "100%",
+      height: height || "100%",
       bg: lazyLoad && !placeHolderURL ? "mono10" : undefined
     }, boxProps, {
       style: _objectSpread({}, placeHolderURL && {

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

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":["_react","_interopRequireWildcard","require","_Box","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","Image","_ref","className","height","_ref$lazyLoad","lazyLoad","onLoad","placeHolderURL","_ref$preventRightClic","preventRightClick","style","width","rest","_useState","useState","_useState2","mode","setMode","imageRef","useRef","useEffect","_imageRef$current","current","complete","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","imageProps","commonImgProps","ref","loading","event","onContextMenu","e","preventDefault","lazyLoadStyle","transition","opacity","createElement","Box","position","bg","backgroundImage","concat","backgroundSize","backgroundPosition","as","top","left","display","exports","displayName"],"sources":["../../../src/elements/Image/Image.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\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}\n        height={height}\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        <Box\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    <Box\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"],"mappings":"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"}
+{"version":3,"file":"Image.js","names":["_react","_interopRequireWildcard","require","_Box","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","Image","_ref","className","height","_ref$lazyLoad","lazyLoad","onLoad","placeHolderURL","_ref$preventRightClic","preventRightClick","style","width","rest","_useState","useState","_useState2","mode","setMode","imageRef","useRef","useEffect","_imageRef$current","current","complete","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","imageProps","commonImgProps","ref","loading","event","onContextMenu","e","preventDefault","lazyLoadStyle","transition","opacity","createElement","Box","position","bg","backgroundImage","concat","backgroundSize","backgroundPosition","as","top","left","display","exports","displayName"],"sources":["../../../src/elements/Image/Image.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\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        <Box\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    <Box\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"],"mappings":"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"}

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

@@ -29,3 +29,4 @@ export declare const ImageLazyLoadSrcSetPlaceHolderURL: {
 };
 export declare const WithStyledImage: () => React.JSX.Element;
 export declare const WithCustomStyle: () => React.JSX.Element;
+export declare const EnsuresImageDoesNotCollapse: () => React.JSX.Element;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithStyledImage = exports.WithCustomStyle = exports.ImageLazyLoadSrcSetPlaceHolderURL = exports.ImageLazyLoadSrcSet = exports.ImageLazyLoad = exports.Default = void 0;
+exports.default = exports.WithStyledImage = exports.WithCustomStyle = exports.ImageLazyLoadSrcSetPlaceHolderURL = exports.ImageLazyLoadSrcSet = exports.ImageLazyLoad = exports.EnsuresImageDoesNotCollapse = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Image = require("../Image");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -118,4 +118,16 @@ var WithCustomStyle = function WithCustomStyle() {
 };
 exports.WithCustomStyle = WithCustomStyle;
 WithCustomStyle.displayName = "WithCustomStyle";
+var EnsuresImageDoesNotCollapse = function EnsuresImageDoesNotCollapse() {
+  return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    width: 300,
+    height: 200,
+    bg: "red"
+  }, /*#__PURE__*/_react.default.createElement(_Image.Image, {
+    src: "https://picsum.photos/seed/example/300/200",
+    lazyLoad: true
+  }));
+};
+exports.EnsuresImageDoesNotCollapse = EnsuresImageDoesNotCollapse;
+EnsuresImageDoesNotCollapse.displayName = "EnsuresImageDoesNotCollapse";
 //# sourceMappingURL=Image.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.story.js","names":["_react","_interopRequireDefault","require","_Image","_styledComponents","_Box","_storybookStates","obj","__esModule","default","blurhashDataUri","_default","title","exports","Default","createElement","States","states","src","srcSet","placeHolderURL","Image","id","className","width","height","displayName","story","name","ImageLazyLoad","Fragment","Array","from","map","_","i","key","lazyLoad","concat","ImageLazyLoadSrcSet","ImageLazyLoadSrcSetPlaceHolderURL","StyledImage","styled","withConfig","componentId","WithStyledImage","Box","bg","WithCustomStyle","style","borderRadius","borderColor","borderWidth","borderStyle"],"sources":["../../../src/elements/Image/Image.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Image } from \"../Image\"\nimport styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { States } from \"storybook-states\"\n\nconst blurhashDataUri =\n  \"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=\"\n\nexport default {\n  title: \"Components/Image\",\n}\n\nexport const Default = () => {\n  return (\n    <States\n      states={[\n        {},\n        {\n          src: \"https://picsum.photos/seed/example/300/200\",\n          srcSet:\n            \"https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x\",\n        },\n        {\n          placeHolderURL: blurhashDataUri,\n        },\n      ]}\n    >\n      <Image\n        id=\"example\"\n        className=\"example\"\n        width=\"300px\"\n        height=\"200px\"\n        src=\"https://picsum.photos/seed/example/300/200\"\n      />\n    </States>\n  )\n}\n\nDefault.story = {\n  name: \"Image\",\n}\n\nexport const ImageLazyLoad = () => {\n  return (\n    <>\n      {Array.from(Array(100)).map((_, i) => (\n        <Image\n          key={i}\n          lazyLoad\n          width=\"300px\"\n          height=\"200px\"\n          src={`https://picsum.photos/seed/${i}/300/200`}\n        />\n      ))}\n    </>\n  )\n}\n\nImageLazyLoad.story = {\n  name: \"Image + lazyLoad\",\n}\n\nexport const ImageLazyLoadSrcSet = () => {\n  return (\n    <>\n      {Array.from(Array(100)).map((_, i) => (\n        <Image\n          key={i}\n          lazyLoad\n          width=\"300px\"\n          height=\"200px\"\n          src={`https://picsum.photos/seed/${i}/300/200`}\n          srcSet={`https://picsum.photos/seed/${i}/300/200 1x, https://picsum.photos/seed/${i}/600/400 2x`}\n        />\n      ))}\n    </>\n  )\n}\n\nImageLazyLoadSrcSet.story = {\n  name: \"Image + lazyLoad + srcSet\",\n}\n\nexport const ImageLazyLoadSrcSetPlaceHolderURL = () => {\n  return (\n    <Image\n      lazyLoad\n      width=\"300px\"\n      height=\"200px\"\n      placeHolderURL=\"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=\"\n      src=\"https://picsum.photos/seed/example/300/200\"\n      srcSet=\"https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x\"\n    />\n  )\n}\n\nImageLazyLoadSrcSetPlaceHolderURL.story = {\n  name: \"Image + lazyLoad + srcSet + placeHolderURL\",\n}\n\nconst StyledImage = styled(Image)`\n  width: 100%;\n  height: 100%;\n`\n\nexport const WithStyledImage = () => {\n  return (\n    <Box width={400} height={400} bg=\"red\">\n      <StyledImage\n        placeHolderURL={blurhashDataUri}\n        src=\"https://picsum.photos/seed/example/300/200\"\n        srcSet=\"https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x\"\n      />\n    </Box>\n  )\n}\n\nexport const WithCustomStyle = () => {\n  return (\n    <Box width={400} height={400} bg=\"red\">\n      <Image\n        width=\"100%\"\n        height=\"100%\"\n        src=\"https://picsum.photos/seed/example/300/200\"\n        style={{\n          borderRadius: \"10px\",\n          borderColor: \"blue\",\n          borderWidth: \"10px\",\n          borderStyle: \"solid\",\n        }}\n      />\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Image.story.js","names":["_react","_interopRequireDefault","require","_Image","_styledComponents","_Box","_storybookStates","obj","__esModule","default","blurhashDataUri","_default","title","exports","Default","createElement","States","states","src","srcSet","placeHolderURL","Image","id","className","width","height","displayName","story","name","ImageLazyLoad","Fragment","Array","from","map","_","i","key","lazyLoad","concat","ImageLazyLoadSrcSet","ImageLazyLoadSrcSetPlaceHolderURL","StyledImage","styled","withConfig","componentId","WithStyledImage","Box","bg","WithCustomStyle","style","borderRadius","borderColor","borderWidth","borderStyle","EnsuresImageDoesNotCollapse"],"sources":["../../../src/elements/Image/Image.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Image } from \"../Image\"\nimport styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { States } from \"storybook-states\"\n\nconst blurhashDataUri =\n  \"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=\"\n\nexport default {\n  title: \"Components/Image\",\n}\n\nexport const Default = () => {\n  return (\n    <States\n      states={[\n        {},\n        {\n          src: \"https://picsum.photos/seed/example/300/200\",\n          srcSet:\n            \"https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x\",\n        },\n        {\n          placeHolderURL: blurhashDataUri,\n        },\n      ]}\n    >\n      <Image\n        id=\"example\"\n        className=\"example\"\n        width=\"300px\"\n        height=\"200px\"\n        src=\"https://picsum.photos/seed/example/300/200\"\n      />\n    </States>\n  )\n}\n\nDefault.story = {\n  name: \"Image\",\n}\n\nexport const ImageLazyLoad = () => {\n  return (\n    <>\n      {Array.from(Array(100)).map((_, i) => (\n        <Image\n          key={i}\n          lazyLoad\n          width=\"300px\"\n          height=\"200px\"\n          src={`https://picsum.photos/seed/${i}/300/200`}\n        />\n      ))}\n    </>\n  )\n}\n\nImageLazyLoad.story = {\n  name: \"Image + lazyLoad\",\n}\n\nexport const ImageLazyLoadSrcSet = () => {\n  return (\n    <>\n      {Array.from(Array(100)).map((_, i) => (\n        <Image\n          key={i}\n          lazyLoad\n          width=\"300px\"\n          height=\"200px\"\n          src={`https://picsum.photos/seed/${i}/300/200`}\n          srcSet={`https://picsum.photos/seed/${i}/300/200 1x, https://picsum.photos/seed/${i}/600/400 2x`}\n        />\n      ))}\n    </>\n  )\n}\n\nImageLazyLoadSrcSet.story = {\n  name: \"Image + lazyLoad + srcSet\",\n}\n\nexport const ImageLazyLoadSrcSetPlaceHolderURL = () => {\n  return (\n    <Image\n      lazyLoad\n      width=\"300px\"\n      height=\"200px\"\n      placeHolderURL=\"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=\"\n      src=\"https://picsum.photos/seed/example/300/200\"\n      srcSet=\"https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x\"\n    />\n  )\n}\n\nImageLazyLoadSrcSetPlaceHolderURL.story = {\n  name: \"Image + lazyLoad + srcSet + placeHolderURL\",\n}\n\nconst StyledImage = styled(Image)`\n  width: 100%;\n  height: 100%;\n`\n\nexport const WithStyledImage = () => {\n  return (\n    <Box width={400} height={400} bg=\"red\">\n      <StyledImage\n        placeHolderURL={blurhashDataUri}\n        src=\"https://picsum.photos/seed/example/300/200\"\n        srcSet=\"https://picsum.photos/seed/example/300/200 1x, https://picsum.photos/seed/example/600/400 2x\"\n      />\n    </Box>\n  )\n}\n\nexport const WithCustomStyle = () => {\n  return (\n    <Box width={400} height={400} bg=\"red\">\n      <Image\n        width=\"100%\"\n        height=\"100%\"\n        src=\"https://picsum.photos/seed/example/300/200\"\n        style={{\n          borderRadius: \"10px\",\n          borderColor: \"blue\",\n          borderWidth: \"10px\",\n          borderStyle: \"solid\",\n        }}\n      />\n    </Box>\n  )\n}\n\nexport const EnsuresImageDoesNotCollapse = () => {\n  return (\n    <Box width={300} height={200} bg=\"red\">\n      <Image src=\"https://picsum.photos/seed/example/300/200\" lazyLoad />\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,IAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;AAAyC,SAAAD,uBAAAM,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEzC,IAAMG,eAAe,GACnB,o/KAAo/K;AAAA,IAAAC,QAAA,GAEv+K;EACbC,KAAK,EAAE;AACT,CAAC;AAAAC,OAAA,CAAAJ,OAAA,GAAAE,QAAA;AAEM,IAAMG,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEd,MAAA,CAAAS,OAAA,CAAAM,aAAA,CAACT,gBAAA,CAAAU,MAAM;IACLC,MAAM,EAAE,CACN,CAAC,CAAC,EACF;MACEC,GAAG,EAAE,4CAA4C;MACjDC,MAAM,EACJ;IACJ,CAAC,EACD;MACEC,cAAc,EAAEV;IAClB,CAAC;EACD,gBAEFV,MAAA,CAAAS,OAAA,CAAAM,aAAA,CAACZ,MAAA,CAAAkB,KAAK;IACJC,EAAE,EAAC,SAAS;IACZC,SAAS,EAAC,SAAS;IACnBC,KAAK,EAAC,OAAO;IACbC,MAAM,EAAC,OAAO;IACdP,GAAG,EAAC;EAA4C,EAChD,CACK;AAEb,CAAC;AAAAL,OAAA,CAAAC,OAAA,GAAAA,OAAA;AAxBYA,OAAO,CAAAY,WAAA;AA0BpBZ,OAAO,CAACa,KAAK,GAAG;EACdC,IAAI,EAAE;AACR,CAAC;AAEM,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAA,EAAS;EACjC,oBACE7B,MAAA,CAAAS,OAAA,CAAAM,aAAA,CAAAf,MAAA,CAAAS,OAAA,CAAAqB,QAAA,QACGC,KAAK,CAACC,IAAI,CAACD,KAAK,CAAC,GAAG,CAAC,CAAC,CAACE,GAAG,CAAC,UAACC,CAAC,EAAEC,CAAC;IAAA,oBAC/BnC,MAAA,CAAAS,OAAA,CAAAM,aAAA,CAACZ,MAAA,CAAAkB,KAAK;MACJe,GAAG,EAAED,CAAE;MACPE,QAAQ;MACRb,KAAK,EAAC,OAAO;MACbC,MAAM,EAAC,OAAO;MACdP,GAAG,gCAAAoB,MAAA,CAAgCH,CAAC;IAAW,EAC/C;EAAA,CACH,CAAC,CACD;AAEP,CAAC;AAAAtB,OAAA,CAAAgB,aAAA,GAAAA,aAAA;AAEDA,aAAa,CAACF,KAAK,GAAG;EACpBC,IAAI,EAAE;AACR,CAAC;AAEM,IAAMW,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAA,EAAS;EACvC,oBACEvC,MAAA,CAAAS,OAAA,CAAAM,aAAA,CAAAf,MAAA,CAAAS,OAAA,CAAAqB,QAAA,QACGC,KAAK,CAACC,IAAI,CAACD,KAAK,CAAC,GAAG,CAAC,CAAC,CAACE,GAAG,CAAC,UAACC,CAAC,EAAEC,CAAC;IAAA,oBAC/BnC,MAAA,CAAAS,OAAA,CAAAM,aAAA,CAACZ,MAAA,CAAAkB,KAAK;MACJe,GAAG,EAAED,CAAE;MACPE,QAAQ;MACRb,KAAK,EAAC,OAAO;MACbC,MAAM,EAAC,OAAO;MACdP,GAAG,gCAAAoB,MAAA,CAAgCH,CAAC,aAAW;MAC/ChB,MAAM,gCAAAmB,MAAA,CAAgCH,CAAC,8CAAAG,MAAA,CAA2CH,CAAC;IAAc,EACjG;EAAA,CACH,CAAC,CACD;AAEP,CAAC;AAAAtB,OAAA,CAAA0B,mBAAA,GAAAA,mBAAA;AAEDA,mBAAmB,CAACZ,KAAK,GAAG;EAC1BC,IAAI,EAAE;AACR,CAAC;AAEM,IAAMY,iCAAiC,GAAG,SAApCA,iCAAiCA,CAAA,EAAS;EACrD,oBACExC,MAAA,CAAAS,OAAA,CAAAM,aAAA,CAACZ,MAAA,CAAAkB,KAAK;IACJgB,QAAQ;IACRb,KAAK,EAAC,OAAO;IACbC,MAAM,EAAC,OAAO;IACdL,cAAc,EAAC,o/KAAo/K;IACngLF,GAAG,EAAC,4CAA4C;IAChDC,MAAM,EAAC;EAA8F,EACrG;AAEN,CAAC;AAAAN,OAAA,CAAA2B,iCAAA,GAAAA,iCAAA;AAXYA,iCAAiC,CAAAd,WAAA;AAa9Cc,iCAAiC,CAACb,KAAK,GAAG;EACxCC,IAAI,EAAE;AACR,CAAC;AAED,IAAMa,WAAW,GAAG,IAAAC,yBAAM,EAACrB,YAAK,CAAC,CAAAsB,UAAA;EAAAjB,WAAA;EAAAkB,WAAA;AAAA,+BAGhC;AAEM,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAA,EAAS;EACnC,oBACE7C,MAAA,CAAAS,OAAA,CAAAM,aAAA,CAACV,IAAA,CAAAyC,GAAG;IAACtB,KAAK,EAAE,GAAI;IAACC,MAAM,EAAE,GAAI;IAACsB,EAAE,EAAC;EAAK,gBACpC/C,MAAA,CAAAS,OAAA,CAAAM,aAAA,CAAC0B,WAAW;IACVrB,cAAc,EAAEV,eAAgB;IAChCQ,GAAG,EAAC,4CAA4C;IAChDC,MAAM,EAAC;EAA8F,EACrG,CACE;AAEV,CAAC;AAAAN,OAAA,CAAAgC,eAAA,GAAAA,eAAA;AAVYA,eAAe,CAAAnB,WAAA;AAYrB,IAAMsB,eAAe,GAAG,SAAlBA,eAAeA,CAAA,EAAS;EACnC,oBACEhD,MAAA,CAAAS,OAAA,CAAAM,aAAA,CAACV,IAAA,CAAAyC,GAAG;IAACtB,KAAK,EAAE,GAAI;IAACC,MAAM,EAAE,GAAI;IAACsB,EAAE,EAAC;EAAK,gBACpC/C,MAAA,CAAAS,OAAA,CAAAM,aAAA,CAACZ,MAAA,CAAAkB,KAAK;IACJG,KAAK,EAAC,MAAM;IACZC,MAAM,EAAC,MAAM;IACbP,GAAG,EAAC,4CAA4C;IAChD+B,KAAK,EAAE;MACLC,YAAY,EAAE,MAAM;MACpBC,WAAW,EAAE,MAAM;MACnBC,WAAW,EAAE,MAAM;MACnBC,WAAW,EAAE;IACf;EAAE,EACF,CACE;AAEV,CAAC;AAAAxC,OAAA,CAAAmC,eAAA,GAAAA,eAAA;AAhBYA,eAAe,CAAAtB,WAAA;AAkBrB,IAAM4B,2BAA2B,GAAG,SAA9BA,2BAA2BA,CAAA,EAAS;EAC/C,oBACEtD,MAAA,CAAAS,OAAA,CAAAM,aAAA,CAACV,IAAA,CAAAyC,GAAG;IAACtB,KAAK,EAAE,GAAI;IAACC,MAAM,EAAE,GAAI;IAACsB,EAAE,EAAC;EAAK,gBACpC/C,MAAA,CAAAS,OAAA,CAAAM,aAAA,CAACZ,MAAA,CAAAkB,KAAK;IAACH,GAAG,EAAC,4CAA4C;IAACmB,QAAQ;EAAA,EAAG,CAC/D;AAEV,CAAC;AAAAxB,OAAA,CAAAyC,2BAAA,GAAAA,2BAAA;AANYA,2BAA2B,CAAA5B,WAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "41.1.1",
+  "version": "41.1.2",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -187,5 +187,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "3a97b7b86550f7bec2a91ee26b44bc7a25d181e7"
+  "gitHead": "e737a7c6258b5df9bfe17d245445f82f0ba741e5"
 }