@artsy/palette 44.0.1 → 44.2.0

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

@@ -3,43 +3,71 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Html = exports.DefaultHtmlStyling = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.default = exports.Small = exports.ExtraSmall = exports.Default = void 0;
 var _HTML = require("./HTML");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var HTML_EXAMPLE = "\n<h1>H1 Headline</h1>\n\n<h2>H2 Headline</h2>\n\n<h3>H3 Headline</h3>\n\n<h4>H4 Headline</h4>\n\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\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\n<ol>\n  <li>first</li>\n  <li>second</li>\n  <li>third</li>\n</ol>\n\n<ul>\n  <li>first</li>\n  <li>second</li>\n  <li>third</li>\n</ul>\n\n<hr />\n\n<pre><code>this is a code block</code></pre>\n\n<blockquote>This is a block quote</blockquote>\n";
+var _storybookBlocklist = require("../../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";
 var _default = exports.default = {
-  title: "Components/HTML"
-};
-var Html = exports.Html = function Html() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_HTML.HTML, {
-    style: {
-      border: "1px dotted"
+  component: _HTML.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: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+var Default = exports.Default = {
+  args: {
+    html: HTML_EXAMPLE,
     variant: "lg-display",
-    html: HTML_EXAMPLE
-  }), /*#__PURE__*/_react.default.createElement(_HTML.HTML, {
     style: {
       border: "1px dotted"
-    },
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Large display variant with example HTML content."
+      }
+    }
+  }
+};
+var Small = exports.Small = {
+  args: {
+    html: HTML_EXAMPLE,
     variant: "sm",
-    html: HTML_EXAMPLE
-  }), /*#__PURE__*/_react.default.createElement(_HTML.HTML, {
     style: {
       border: "1px dotted"
-    },
-    variant: "xs",
-    html: HTML_EXAMPLE
-  }));
-};
-Html.story = {
-  name: "HTML"
-};
-var DefaultHtmlStyling = exports.DefaultHtmlStyling = function DefaultHtmlStyling() {
-  return /*#__PURE__*/_react.default.createElement(_HTML.HTML, null, /*#__PURE__*/_react.default.createElement("h1", null, "H1 Headline"), /*#__PURE__*/_react.default.createElement("h2", null, "H2 Headline"), /*#__PURE__*/_react.default.createElement("h3", null, "H3 Headline"), /*#__PURE__*/_react.default.createElement("h4", null, "H4 Headline"), /*#__PURE__*/_react.default.createElement("p", null, "I\u2019m ", /*#__PURE__*/_react.default.createElement("em", null, "of the opinion"), " that they use", " ", /*#__PURE__*/_react.default.createElement("strong", null, "no ", /*#__PURE__*/_react.default.createElement("em", null, "inert"), " material."), " ", "All their equipment and instruments are alive, in some form or other."), /*#__PURE__*/_react.default.createElement("p", null, "They don\u2019t construct or build at all. The idea of making is foreign to them. They utilize existing forms. Even their ships\u2014"), /*#__PURE__*/_react.default.createElement("ol", null, /*#__PURE__*/_react.default.createElement("li", null, "first"), /*#__PURE__*/_react.default.createElement("li", null, "second"), /*#__PURE__*/_react.default.createElement("li", null, "third")), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "first"), /*#__PURE__*/_react.default.createElement("li", null, "second"), /*#__PURE__*/_react.default.createElement("li", null, "third")), /*#__PURE__*/_react.default.createElement("hr", null), /*#__PURE__*/_react.default.createElement("pre", null, /*#__PURE__*/_react.default.createElement("code", null, "this is a code block")), /*#__PURE__*/_react.default.createElement("blockquote", null, "This is a block quote"));
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Small variant with example HTML content."
+      }
+    }
+  }
 };
-DefaultHtmlStyling.displayName = "DefaultHtmlStyling";
-DefaultHtmlStyling.story = {
-  name: "Default HTML styling"
+var ExtraSmall = exports.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/elements/HTML/HTML.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"HTML.story.js","names":["_react","_interopRequireDefault","require","_HTML","obj","__esModule","default","HTML_EXAMPLE","_default","exports","title","Html","createElement","Fragment","HTML","style","border","variant","html","story","name","DefaultHtmlStyling","displayName"],"sources":["../../../src/elements/HTML/HTML.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { HTML } from \"./HTML\"\n\nconst HTML_EXAMPLE = `\n<h1>H1 Headline</h1>\n\n<h2>H2 Headline</h2>\n\n<h3>H3 Headline</h3>\n\n<h4>H4 Headline</h4>\n\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\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\n<ol>\n  <li>first</li>\n  <li>second</li>\n  <li>third</li>\n</ol>\n\n<ul>\n  <li>first</li>\n  <li>second</li>\n  <li>third</li>\n</ul>\n\n<hr />\n\n<pre><code>this is a code block</code></pre>\n\n<blockquote>This is a block quote</blockquote>\n`\n\nexport default {\n  title: \"Components/HTML\",\n}\n\nexport const Html = () => {\n  return (\n    <>\n      <HTML\n        style={{ border: \"1px dotted\" }}\n        variant=\"lg-display\"\n        html={HTML_EXAMPLE}\n      />\n      <HTML style={{ border: \"1px dotted\" }} variant=\"sm\" html={HTML_EXAMPLE} />\n      <HTML style={{ border: \"1px dotted\" }} variant=\"xs\" html={HTML_EXAMPLE} />\n    </>\n  )\n}\n\nHtml.story = {\n  name: \"HTML\",\n}\n\nexport const DefaultHtmlStyling = () => {\n  return (\n    <HTML>\n      <h1>H1 Headline</h1>\n\n      <h2>H2 Headline</h2>\n\n      <h3>H3 Headline</h3>\n\n      <h4>H4 Headline</h4>\n\n      <p>\n        I’m <em>of the opinion</em> that they use{\" \"}\n        <strong>\n          no <em>inert</em> material.\n        </strong>{\" \"}\n        All their equipment and instruments are alive, in some form or other.\n      </p>\n\n      <p>\n        They don’t construct or build at all. The idea of making is foreign to\n        them. They utilize existing forms. Even their ships—\n      </p>\n\n      <ol>\n        <li>first</li>\n        <li>second</li>\n        <li>third</li>\n      </ol>\n\n      <ul>\n        <li>first</li>\n        <li>second</li>\n        <li>third</li>\n      </ul>\n\n      <hr />\n\n      <pre>\n        <code>this is a code block</code>\n      </pre>\n\n      <blockquote>This is a block quote</blockquote>\n    </HTML>\n  )\n}\n\nDefaultHtmlStyling.story = {\n  name: \"Default HTML styling\",\n}\n"],"mappings":"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"}
+{"version":3,"file":"HTML.story.js","names":["_HTML","require","_storybookBlocklist","HTML_EXAMPLE","_default","exports","default","component","HTML","title","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","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,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AAEA,IAAME,YAAY,qoBAoBjB;AAAA,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc;EACbC,SAAS,EAAEC,UAAI;EACfC,KAAK,EAAE,iBAAiB;EACxBC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXN,SAAS,EACP;MACJ;IACF,CAAC;IACDO,QAAQ,EAAE;MACNC,OAAO,EAAEC;IACX;EACJ;AACF,CAAC;AAEM,IAAMC,OAAO,GAAAZ,OAAA,CAAAY,OAAA,GAAG;EACrBC,IAAI,EAAE;IACJC,IAAI,EAAEhB,YAAY;IAClBiB,OAAO,EAAE,YAAY;IACrBC,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAa;EAChC,CAAC;EACDX,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXU,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAEM,IAAMC,KAAK,GAAAnB,OAAA,CAAAmB,KAAA,GAAG;EACnBN,IAAI,EAAE;IACJC,IAAI,EAAEhB,YAAY;IAClBiB,OAAO,EAAE,IAAI;IACbC,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAa;EAChC,CAAC;EACDX,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXU,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAEM,IAAME,UAAU,GAAApB,OAAA,CAAAoB,UAAA,GAAG;EACxBP,IAAI,EAAE;IACJC,IAAI,EAAEhB,YAAY;IAClBiB,OAAO,EAAE,IAAI;IACbC,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAa;EAChC,CAAC;EACDX,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXU,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

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

@@ -1,7 +1,57 @@
 import React from "react";
 declare const _default: {
+    component: React.ForwardRefExoticComponent<import("../Box").BoxProps & {
+        children: React.ReactNode;
+    } & React.RefAttributes<HTMLDivElement>>;
     title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        controls: {
+            exclude: string[];
+        };
+    };
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const FillHeightCenteredContent: () => React.JSX.Element;
+export declare const Default: {
+    args: {
+        bg: string;
+        p: number;
+        children: React.JSX.Element;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const ShortContent: {
+    args: {
+        bg: string;
+        p: number;
+        children: React.JSX.Element;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const FillHeightCenteredContent: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

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

@@ -3,63 +3,100 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.FillHeightCenteredContent = exports.Default = void 0;
+exports.default = exports.ShortContent = exports.FillHeightCenteredContent = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _storybookStates = require("storybook-states");
 var _HorizontalOverflow = require("./HorizontalOverflow");
 var _Text = require("../Text");
 var _Spacer = require("../Spacer");
 var _Join = require("../Join");
 var _Box = require("../Box");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = exports.default = {
-  title: "Components/HorizontalOverflow"
+  component: _HorizontalOverflow.HorizontalOverflow,
+  title: "Components/HorizontalOverflow",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A container that allows content to overflow horizontally with scrolling when needed."
+      }
+    },
+    controls: {
+      exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
 };
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{}, {
-      children: /*#__PURE__*/_react.default.createElement(_Text.Text, {
-        variant: "sm-display"
-      }, "Not overflowing")
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_HorizontalOverflow.HorizontalOverflow, {
+var Default = exports.Default = {
+  args: {
     bg: "mono10",
-    p: 2
-  }, /*#__PURE__*/_react.default.createElement(_Join.Join, {
-    separator: /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
-      x: 2
-    })
-  }, Array.from(Array(50)).map(function (_, i) {
-    return /*#__PURE__*/_react.default.createElement(_Text.Text, {
-      key: i,
-      variant: "sm-display",
-      color: "mono100",
-      mr: 2
-    }, "Example #", i);
-  }))));
+    p: 2,
+    children: /*#__PURE__*/_react.default.createElement(_Join.Join, {
+      separator: /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+        x: 2
+      })
+    }, Array.from(Array(50)).map(function (_, i) {
+      return /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        key: i,
+        variant: "sm-display",
+        color: "mono100",
+        mr: 2
+      }, "Example #", i);
+    }))
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Horizontal overflow container with many items that scroll."
+      }
+    }
+  }
 };
-Default.displayName = "Default";
-var FillHeightCenteredContent = exports.FillHeightCenteredContent = function FillHeightCenteredContent() {
-  return /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    height: 100,
-    bg: "red10"
-  }, /*#__PURE__*/_react.default.createElement(_HorizontalOverflow.HorizontalOverflow, {
-    border: "1px solid",
+var ShortContent = exports.ShortContent = {
+  args: {
+    bg: "mono10",
     p: 2,
-    height: "100%"
-  }, /*#__PURE__*/_react.default.createElement(_Join.Join, {
-    separator: /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
-      x: 2
-    })
-  }, Array.from(Array(50)).map(function (_, i) {
-    return /*#__PURE__*/_react.default.createElement(_Text.Text, {
-      key: i,
-      variant: "sm-display",
-      color: "mono100",
-      display: "flex",
-      alignItems: "center"
-    }, "Example #", i);
-  }))));
+    children: /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "sm-display"
+    }, "Not overflowing")
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Container with content that doesn't overflow."
+      }
+    }
+  }
+};
+var FillHeightCenteredContent = exports.FillHeightCenteredContent = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      height: 100,
+      bg: "red10"
+    }, /*#__PURE__*/_react.default.createElement(_HorizontalOverflow.HorizontalOverflow, {
+      border: "1px solid",
+      p: 2,
+      height: "100%"
+    }, /*#__PURE__*/_react.default.createElement(_Join.Join, {
+      separator: /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+        x: 2
+      })
+    }, Array.from(Array(50)).map(function (_, i) {
+      return /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        key: i,
+        variant: "sm-display",
+        color: "mono100",
+        display: "flex",
+        alignItems: "center"
+      }, "Example #", i);
+    }))));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Full height container with centered content."
+      }
+    }
+  }
 };
-FillHeightCenteredContent.displayName = "FillHeightCenteredContent";
 //# sourceMappingURL=HorizontalOverflow.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalOverflow.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_HorizontalOverflow","_Text","_Spacer","_Join","_Box","obj","__esModule","default","_default","exports","title","Default","createElement","States","states","children","Text","variant","HorizontalOverflow","bg","p","Join","separator","Spacer","x","Array","from","map","_","i","key","color","mr","displayName","FillHeightCenteredContent","Box","height","border","display","alignItems"],"sources":["../../../src/elements/HorizontalOverflow/HorizontalOverflow.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport {\n  HorizontalOverflow,\n  HorizontalOverflowProps,\n} from \"./HorizontalOverflow\"\nimport { Text } from \"../Text\"\nimport { Spacer } from \"../Spacer\"\nimport { Join } from \"../Join\"\nimport { Box } from \"../Box\"\n\nexport default {\n  title: \"Components/HorizontalOverflow\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<HorizontalOverflowProps>>\n      states={[\n        {},\n        { children: <Text variant=\"sm-display\">Not overflowing</Text> },\n      ]}\n    >\n      <HorizontalOverflow bg=\"mono10\" p={2}>\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      </HorizontalOverflow>\n    </States>\n  )\n}\n\nexport const FillHeightCenteredContent = () => {\n  return (\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}\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalOverflow.story.js","names":["_react","_interopRequireDefault","require","_HorizontalOverflow","_Text","_Spacer","_Join","_Box","_storybookBlocklist","obj","__esModule","default","_default","exports","component","HorizontalOverflow","title","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","Default","args","bg","p","children","createElement","Join","separator","Spacer","x","Array","from","map","_","i","Text","key","variant","color","mr","story","ShortContent","FillHeightCenteredContent","render","Box","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":"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"}

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

@@ -1,32 +1,71 @@
 import React from "react";
 declare const _default: {
+    component: React.FC<import("./Image").ImageProps>;
     title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        controls: {
+            exclude: string[];
+        };
+    };
 };
 export default _default;
 export declare const Default: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    args: {
+        id: string;
+        className: string;
+        width: string;
+        height: string;
+        src: string;
     };
 };
-export declare const ImageLazyLoad: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+export declare const WithSrcSet: {
+    args: {
+        id: string;
+        className: string;
+        width: string;
+        height: string;
+        src: string;
+        srcSet: string;
     };
 };
-export declare const ImageLazyLoadSrcSet: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+export declare const WithPlaceholder: {
+    args: {
+        id: string;
+        className: string;
+        width: string;
+        height: string;
+        src: string;
+        placeHolderURL: string;
     };
 };
+export declare const ImageLazyLoad: {
+    render: () => React.JSX.Element;
+};
+export declare const ImageLazyLoadSrcSet: {
+    render: () => React.JSX.Element;
+};
 export declare const ImageLazyLoadSrcSetPlaceHolderURL: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    args: {
+        lazyLoad: boolean;
+        width: string;
+        height: string;
+        placeHolderURL: string;
+        src: string;
+        srcSet: string;
     };
 };
-export declare const WithStyledImage: () => React.JSX.Element;
-export declare const WithCustomStyle: () => React.JSX.Element;
-export declare const EnsuresImageDoesNotCollapse: () => React.JSX.Element;
+export declare const WithStyledImage: {
+    render: () => React.JSX.Element;
+};
+export declare const WithCustomStyle: {
+    render: () => React.JSX.Element;
+};
+export declare const EnsuresImageDoesNotCollapse: {
+    render: () => React.JSX.Element;
+};