@artsy/palette 44.1.0 → 44.2.0

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

@@ -1,9 +1,78 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: import("react").FC<import("react").PropsWithChildren<import("./Avatar").AvatarProps>>;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+            controls: {
+                exclude: string[];
+            };
+        };
+    };
 };
 export default _default;
-export declare const Sizes: () => React.JSX.Element;
-export declare const WithImage: () => React.JSX.Element;
-export declare const WithBrokenImage: () => React.JSX.Element;
-export declare const WithTightContainer: () => React.JSX.Element;
+export declare const Default: {
+    args: {
+        initials: string;
+        size: string;
+    };
+};
+export declare const WithImageBasic: {
+    args: {
+        src: string;
+        srcSet: string;
+        initials: string;
+        size: string;
+        lazyLoad: boolean;
+    };
+};
+export declare const Small: {
+    args: {
+        initials: string;
+        size: string;
+    };
+};
+export declare const Large: {
+    args: {
+        initials: string;
+        size: string;
+    };
+};
+export declare const ExtraSmall: {
+    args: {
+        initials: string;
+        size: string;
+    };
+};
+export declare const ExtraExtraSmall: {
+    args: {
+        initials: string;
+        size: string;
+    };
+};
+export declare const WithBrokenImage: {
+    args: {
+        src: string;
+        srcSet: string;
+        initials: string;
+        size: string;
+    };
+};
+export declare const WithLazyLoadBrokenImage: {
+    args: {
+        src: string;
+        srcSet: string;
+        initials: string;
+        size: string;
+        lazyLoad: boolean;
+    };
+};
+export declare const LongInitials: {
+    args: {
+        initials: string;
+        size: string;
+    };
+};

package/dist/elements/Avatar/Avatar.story.js

@@ -3,100 +3,84 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithTightContainer = exports.WithImage = exports.WithBrokenImage = exports.Sizes = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _storybookStates = require("storybook-states");
+exports.default = exports.WithLazyLoadBrokenImage = exports.WithImageBasic = exports.WithBrokenImage = exports.Small = exports.LongInitials = exports.Large = exports.ExtraSmall = exports.ExtraExtraSmall = exports.Default = void 0;
 var _Avatar = require("./Avatar");
-var _Box = require("../Box");
-var _Stack = require("../Stack");
-var _Text = require("../Text");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 var _default = exports.default = {
-  title: "Components/Avatar"
+  title: "Components/Avatar",
+  component: _Avatar.Avatar,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Avatar component displays user profile images or initials in various sizes. Supports lazy loading, fallback to initials when image fails to load, and responsive sizing."
+      },
+      controls: {
+        exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
 };
-var Sizes = exports.Sizes = function Sizes() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{
-      size: "xxs"
-    }, {
-      size: "xs"
-    }, {
-      size: "sm"
-    }, {
-      size: "md"
-    }, {
-      initials: "LONGER",
-      size: "md"
-    }, {
-      initials: "LONGER",
-      size: "sm"
-    }, {
-      initials: "LONGER",
-      size: "xs"
-    }, {
-      initials: "LONGER",
-      size: "xxs"
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
-    size: "xs",
-    initials: "TK"
-  }));
+var Default = exports.Default = {
+  args: {
+    initials: "JD",
+    size: "md"
+  }
 };
-Sizes.displayName = "Sizes";
-var WithImage = exports.WithImage = function WithImage() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{
-      size: "xxs"
-    }, {
-      size: "xs"
-    }, {
-      size: "sm"
-    }, {
-      size: "md"
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
-    size: "xs",
+var WithImageBasic = exports.WithImageBasic = {
+  args: {
     src: "https://picsum.photos/seed/example/110/110",
     srcSet: "https://picsum.photos/seed/example/110/110 1x, https://picsum.photos/seed/example/220/220 2x",
-    lazyLoad: true,
-    initials: "TK"
-  }));
+    initials: "JD",
+    size: "md",
+    lazyLoad: true
+  }
 };
-WithImage.displayName = "WithImage";
-var WithBrokenImage = exports.WithBrokenImage = function WithBrokenImage() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{
-      size: "md"
-    }, {
-      size: "md",
-      lazyLoad: true
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
-    size: "xs",
+var Small = exports.Small = {
+  args: {
+    initials: "SM",
+    size: "sm"
+  }
+};
+var Large = exports.Large = {
+  args: {
+    initials: "LG",
+    size: "lg"
+  }
+};
+var ExtraSmall = exports.ExtraSmall = {
+  args: {
+    initials: "XS",
+    size: "xs"
+  }
+};
+var ExtraExtraSmall = exports.ExtraExtraSmall = {
+  args: {
+    initials: "XX",
+    size: "xxs"
+  }
+};
+var WithBrokenImage = exports.WithBrokenImage = {
+  args: {
+    src: "https://example.com/broken.jpg",
+    srcSet: "https://example.com/broken.jpg 1x, https://example.com/broken.jpg 2x",
+    initials: "TK",
+    size: "md"
+  }
+};
+var WithLazyLoadBrokenImage = exports.WithLazyLoadBrokenImage = {
+  args: {
     src: "https://example.com/broken.jpg",
     srcSet: "https://example.com/broken.jpg 1x, https://example.com/broken.jpg 2x",
-    initials: "TK"
-  }));
+    initials: "TK",
+    size: "md",
+    lazyLoad: true
+  }
 };
-WithBrokenImage.displayName = "WithBrokenImage";
-var WithTightContainer = exports.WithTightContainer = function WithTightContainer() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    maxWidth: 150,
-    border: "1px solid",
-    borderColor: "mono15",
-    overflow: "hidden",
-    p: 1
-  }, /*#__PURE__*/_react.default.createElement(_Stack.Stack, {
-    gap: 1,
-    flexDirection: "row",
-    alignItems: "center"
-  }, /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
-    size: "xs",
-    initials: "TK"
-  }), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    size: "sm-display",
-    hyphenate: true
-  }, "example@longemailaddress.com"))));
+var LongInitials = exports.LongInitials = {
+  args: {
+    initials: "LONGER",
+    size: "md"
+  }
 };
-WithTightContainer.displayName = "WithTightContainer";
 //# sourceMappingURL=Avatar.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_Avatar","_Box","_Stack","_Text","obj","__esModule","default","_default","exports","title","Sizes","createElement","States","states","size","initials","Avatar","displayName","WithImage","src","srcSet","lazyLoad","WithBrokenImage","WithTightContainer","Box","maxWidth","border","borderColor","overflow","p","Stack","gap","flexDirection","alignItems","Text","hyphenate"],"sources":["../../../src/elements/Avatar/Avatar.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Avatar, AvatarProps } from \"./Avatar\"\nimport { Box } from \"../Box\"\nimport { Stack } from \"../Stack\"\nimport { Text } from \"../Text\"\n\nexport default {\n  title: \"Components/Avatar\",\n}\n\nexport const Sizes = () => {\n  return (\n    <States<AvatarProps>\n      states={[\n        { size: \"xxs\" },\n        { size: \"xs\" },\n        { size: \"sm\" },\n        { size: \"md\" },\n        { initials: \"LONGER\", size: \"md\" },\n        { initials: \"LONGER\", size: \"sm\" },\n        { initials: \"LONGER\", size: \"xs\" },\n        { initials: \"LONGER\", size: \"xxs\" },\n      ]}\n    >\n      <Avatar size=\"xs\" initials=\"TK\" />\n    </States>\n  )\n}\n\nexport const WithImage = () => {\n  return (\n    <States<AvatarProps>\n      states={[{ size: \"xxs\" }, { size: \"xs\" }, { size: \"sm\" }, { size: \"md\" }]}\n    >\n      <Avatar\n        size=\"xs\"\n        src=\"https://picsum.photos/seed/example/110/110\"\n        srcSet=\"https://picsum.photos/seed/example/110/110 1x, https://picsum.photos/seed/example/220/220 2x\"\n        lazyLoad\n        initials=\"TK\"\n      />\n    </States>\n  )\n}\n\nexport const WithBrokenImage = () => {\n  return (\n    <States<AvatarProps>\n      states={[{ size: \"md\" }, { size: \"md\", lazyLoad: true }]}\n    >\n      <Avatar\n        size=\"xs\"\n        src=\"https://example.com/broken.jpg\"\n        srcSet=\"https://example.com/broken.jpg 1x, https://example.com/broken.jpg 2x\"\n        initials=\"TK\"\n      />\n    </States>\n  )\n}\n\nexport const WithTightContainer = () => {\n  return (\n    <States>\n      <Box\n        maxWidth={150}\n        border=\"1px solid\"\n        borderColor=\"mono15\"\n        overflow=\"hidden\"\n        p={1}\n      >\n        <Stack gap={1} flexDirection=\"row\" alignItems=\"center\">\n          <Avatar size=\"xs\" initials=\"TK\" />\n          <Text size=\"sm-display\" hyphenate>\n            example@longemailaddress.com\n          </Text>\n        </Stack>\n      </Box>\n    </States>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Avatar.story.js","names":["_Avatar","require","_storybookBlocklist","_default","exports","default","title","component","Avatar","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","Default","args","initials","size","WithImageBasic","src","srcSet","lazyLoad","Small","Large","ExtraSmall","ExtraExtraSmall","WithBrokenImage","WithLazyLoadBrokenImage","LongInitials"],"sources":["../../../src/elements/Avatar/Avatar.story.tsx"],"sourcesContent":["import { Avatar } from \"./Avatar\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  title: \"Components/Avatar\",\n  component: Avatar,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Avatar component displays user profile images or initials in various sizes. Supports lazy loading, fallback to initials when image fails to load, and responsive sizing.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    initials: \"JD\",\n    size: \"md\",\n  },\n}\n\nexport const WithImageBasic = {\n  args: {\n    src: \"https://picsum.photos/seed/example/110/110\",\n    srcSet:\n      \"https://picsum.photos/seed/example/110/110 1x, https://picsum.photos/seed/example/220/220 2x\",\n    initials: \"JD\",\n    size: \"md\",\n    lazyLoad: true,\n  },\n}\n\nexport const Small = {\n  args: {\n    initials: \"SM\",\n    size: \"sm\",\n  },\n}\n\nexport const Large = {\n  args: {\n    initials: \"LG\",\n    size: \"lg\",\n  },\n}\n\nexport const ExtraSmall = {\n  args: {\n    initials: \"XS\",\n    size: \"xs\",\n  },\n}\n\nexport const ExtraExtraSmall = {\n  args: {\n    initials: \"XX\",\n    size: \"xxs\",\n  },\n}\n\nexport const WithBrokenImage = {\n  args: {\n    src: \"https://example.com/broken.jpg\",\n    srcSet:\n      \"https://example.com/broken.jpg 1x, https://example.com/broken.jpg 2x\",\n    initials: \"TK\",\n    size: \"md\",\n  },\n}\n\nexport const WithLazyLoadBrokenImage = {\n  args: {\n    src: \"https://example.com/broken.jpg\",\n    srcSet:\n      \"https://example.com/broken.jpg 1x, https://example.com/broken.jpg 2x\",\n    initials: \"TK\",\n    size: \"md\",\n    lazyLoad: true,\n  },\n}\n\nexport const LongInitials = {\n  args: {\n    initials: \"LONGER\",\n    size: \"md\",\n  },\n}\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AAA0E,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAE3D;EACbC,KAAK,EAAE,mBAAmB;EAC1BC,SAAS,EAAEC,cAAM;EACjBC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ,CAAC;MACDM,QAAQ,EAAE;QACRC,OAAO,EAAEC;MACX;IACF;EACF;AACF,CAAC;AAEM,IAAMC,OAAO,GAAAZ,OAAA,CAAAY,OAAA,GAAG;EACrBC,IAAI,EAAE;IACJC,QAAQ,EAAE,IAAI;IACdC,IAAI,EAAE;EACR;AACF,CAAC;AAEM,IAAMC,cAAc,GAAAhB,OAAA,CAAAgB,cAAA,GAAG;EAC5BH,IAAI,EAAE;IACJI,GAAG,EAAE,4CAA4C;IACjDC,MAAM,EACJ,8FAA8F;IAChGJ,QAAQ,EAAE,IAAI;IACdC,IAAI,EAAE,IAAI;IACVI,QAAQ,EAAE;EACZ;AACF,CAAC;AAEM,IAAMC,KAAK,GAAApB,OAAA,CAAAoB,KAAA,GAAG;EACnBP,IAAI,EAAE;IACJC,QAAQ,EAAE,IAAI;IACdC,IAAI,EAAE;EACR;AACF,CAAC;AAEM,IAAMM,KAAK,GAAArB,OAAA,CAAAqB,KAAA,GAAG;EACnBR,IAAI,EAAE;IACJC,QAAQ,EAAE,IAAI;IACdC,IAAI,EAAE;EACR;AACF,CAAC;AAEM,IAAMO,UAAU,GAAAtB,OAAA,CAAAsB,UAAA,GAAG;EACxBT,IAAI,EAAE;IACJC,QAAQ,EAAE,IAAI;IACdC,IAAI,EAAE;EACR;AACF,CAAC;AAEM,IAAMQ,eAAe,GAAAvB,OAAA,CAAAuB,eAAA,GAAG;EAC7BV,IAAI,EAAE;IACJC,QAAQ,EAAE,IAAI;IACdC,IAAI,EAAE;EACR;AACF,CAAC;AAEM,IAAMS,eAAe,GAAAxB,OAAA,CAAAwB,eAAA,GAAG;EAC7BX,IAAI,EAAE;IACJI,GAAG,EAAE,gCAAgC;IACrCC,MAAM,EACJ,sEAAsE;IACxEJ,QAAQ,EAAE,IAAI;IACdC,IAAI,EAAE;EACR;AACF,CAAC;AAEM,IAAMU,uBAAuB,GAAAzB,OAAA,CAAAyB,uBAAA,GAAG;EACrCZ,IAAI,EAAE;IACJI,GAAG,EAAE,gCAAgC;IACrCC,MAAM,EACJ,sEAAsE;IACxEJ,QAAQ,EAAE,IAAI;IACdC,IAAI,EAAE,IAAI;IACVI,QAAQ,EAAE;EACZ;AACF,CAAC;AAEM,IAAMO,YAAY,GAAA1B,OAAA,CAAA0B,YAAA,GAAG;EAC1Bb,IAAI,EAAE;IACJC,QAAQ,EAAE,QAAQ;IAClBC,IAAI,EAAE;EACR;AACF,CAAC"}

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

@@ -1,6 +1,57 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: import("react").FC<import("react").PropsWithChildren<import("./Banner").BannerProps>>;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+            controls: {
+                exclude: string[];
+            };
+        };
+    };
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
+export declare const DefaultLight: {
+    args: {
+        children: string;
+        dismissable: boolean;
+        variant: string;
+    };
+};
+export declare const DefaultDark: {
+    args: {
+        children: string;
+        dismissable: boolean;
+        variant: string;
+    };
+};
+export declare const Success: {
+    args: {
+        children: string;
+        dismissable: boolean;
+        variant: string;
+    };
+};
+export declare const Error: {
+    args: {
+        children: string;
+        dismissable: boolean;
+        variant: string;
+    };
+};
+export declare const Brand: {
+    args: {
+        children: string;
+        dismissable: boolean;
+        variant: string;
+    };
+};
+export declare const NonDismissable: {
+    args: {
+        children: string;
+        dismissable: boolean;
+    };
+};

package/dist/elements/Banner/Banner.story.js

@@ -3,32 +3,63 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _storybookStates = require("storybook-states");
+exports.default = exports.Success = exports.NonDismissable = exports.Error = exports.DefaultLight = exports.DefaultDark = exports.Brand = void 0;
 var _Banner = require("./Banner");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 var _default = exports.default = {
-  title: "Components/Banner"
+  title: "Components/Banner",
+  component: _Banner.Banner,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Banner component for displaying important messages to users with various styles and dismissible options."
+      },
+      controls: {
+        exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
 };
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{
-      dismissable: false
-    }, {
-      variant: "defaultLight"
-    }, {
-      variant: "defaultDark"
-    }, {
-      variant: "success"
-    }, {
-      variant: "error"
-    }, {
-      variant: "brand"
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_Banner.Banner, {
-    dismissable: true
-  }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae natus assumenda distinctio, voluptatum magni. autem sunt."));
+var DefaultLight = exports.DefaultLight = {
+  args: {
+    children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae natus assumenda distinctio, voluptatum magni.",
+    dismissable: true,
+    variant: "defaultLight"
+  }
+};
+var DefaultDark = exports.DefaultDark = {
+  args: {
+    children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae natus assumenda distinctio, voluptatum magni.",
+    dismissable: true,
+    variant: "defaultDark"
+  }
+};
+var Success = exports.Success = {
+  args: {
+    children: "Operation completed successfully!",
+    dismissable: true,
+    variant: "success"
+  }
+};
+var Error = exports.Error = {
+  args: {
+    children: "An error occurred. Please try again.",
+    dismissable: true,
+    variant: "error"
+  }
+};
+var Brand = exports.Brand = {
+  args: {
+    children: "Welcome to our brand new feature!",
+    dismissable: true,
+    variant: "brand"
+  }
+};
+var NonDismissable = exports.NonDismissable = {
+  args: {
+    children: "This banner cannot be dismissed.",
+    dismissable: false
+  }
 };
-Default.displayName = "Default";
 //# sourceMappingURL=Banner.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_Banner","obj","__esModule","default","_default","exports","title","Default","createElement","States","states","dismissable","variant","Banner","displayName"],"sources":["../../../src/elements/Banner/Banner.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Banner, BannerProps } from \"./Banner\"\n\nexport default {\n  title: \"Components/Banner\",\n}\n\nexport const Default = () => {\n  return (\n    <States<BannerProps>\n      states={[\n        { dismissable: false },\n        { variant: \"defaultLight\" },\n        { variant: \"defaultDark\" },\n        { variant: \"success\" },\n        { variant: \"error\" },\n        { variant: \"brand\" },\n      ]}\n    >\n      <Banner dismissable>\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae\n        natus assumenda distinctio, voluptatum magni. autem sunt.\n      </Banner>\n    </States>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAA8C,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAE/B;EACbG,KAAK,EAAE;AACT,CAAC;AAEM,IAAMC,OAAO,GAAAF,OAAA,CAAAE,OAAA,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEX,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACT,gBAAA,CAAAU,MAAM;IACLC,MAAM,EAAE,CACN;MAAEC,WAAW,EAAE;IAAM,CAAC,EACtB;MAAEC,OAAO,EAAE;IAAe,CAAC,EAC3B;MAAEA,OAAO,EAAE;IAAc,CAAC,EAC1B;MAAEA,OAAO,EAAE;IAAU,CAAC,EACtB;MAAEA,OAAO,EAAE;IAAQ,CAAC,EACpB;MAAEA,OAAO,EAAE;IAAQ,CAAC;EACpB,gBAEFhB,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACR,OAAA,CAAAa,MAAM;IAACF,WAAW;EAAA,GAAC,oIAGpB,CAAS,CACF;AAEb,CAAC;AAlBYJ,OAAO,CAAAO,WAAA"}
+{"version":3,"file":"Banner.story.js","names":["_Banner","require","_storybookBlocklist","_default","exports","default","title","component","Banner","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","DefaultLight","args","children","dismissable","variant","DefaultDark","Success","Error","Brand","NonDismissable"],"sources":["../../../src/elements/Banner/Banner.story.tsx"],"sourcesContent":["import { Banner } from \"./Banner\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  title: \"Components/Banner\",\n  component: Banner,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Banner component for displaying important messages to users with various styles and dismissible options.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const DefaultLight = {\n  args: {\n    children:\n      \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae natus assumenda distinctio, voluptatum magni.\",\n    dismissable: true,\n    variant: \"defaultLight\",\n  },\n}\n\nexport const DefaultDark = {\n  args: {\n    children:\n      \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae natus assumenda distinctio, voluptatum magni.\",\n    dismissable: true,\n    variant: \"defaultDark\",\n  },\n}\n\nexport const Success = {\n  args: {\n    children: \"Operation completed successfully!\",\n    dismissable: true,\n    variant: \"success\",\n  },\n}\n\nexport const Error = {\n  args: {\n    children: \"An error occurred. Please try again.\",\n    dismissable: true,\n    variant: \"error\",\n  },\n}\n\nexport const Brand = {\n  args: {\n    children: \"Welcome to our brand new feature!\",\n    dismissable: true,\n    variant: \"brand\",\n  },\n}\n\nexport const NonDismissable = {\n  args: {\n    children: \"This banner cannot be dismissed.\",\n    dismissable: false,\n  },\n}\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AAA0E,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAE3D;EACbC,KAAK,EAAE,mBAAmB;EAC1BC,SAAS,EAAEC,cAAM;EACjBC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ,CAAC;MACDM,QAAQ,EAAE;QACRC,OAAO,EAAEC;MACX;IACF;EACF;AACF,CAAC;AAEM,IAAMC,YAAY,GAAAZ,OAAA,CAAAY,YAAA,GAAG;EAC1BC,IAAI,EAAE;IACJC,QAAQ,EACN,wHAAwH;IAC1HC,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE;EACX;AACF,CAAC;AAEM,IAAMC,WAAW,GAAAjB,OAAA,CAAAiB,WAAA,GAAG;EACzBJ,IAAI,EAAE;IACJC,QAAQ,EACN,wHAAwH;IAC1HC,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE;EACX;AACF,CAAC;AAEM,IAAME,OAAO,GAAAlB,OAAA,CAAAkB,OAAA,GAAG;EACrBL,IAAI,EAAE;IACJC,QAAQ,EAAE,mCAAmC;IAC7CC,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE;EACX;AACF,CAAC;AAEM,IAAMG,KAAK,GAAAnB,OAAA,CAAAmB,KAAA,GAAG;EACnBN,IAAI,EAAE;IACJC,QAAQ,EAAE,sCAAsC;IAChDC,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE;EACX;AACF,CAAC;AAEM,IAAMI,KAAK,GAAApB,OAAA,CAAAoB,KAAA,GAAG;EACnBP,IAAI,EAAE;IACJC,QAAQ,EAAE,mCAAmC;IAC7CC,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE;EACX;AACF,CAAC;AAEM,IAAMK,cAAc,GAAArB,OAAA,CAAAqB,cAAA,GAAG;EAC5BR,IAAI,EAAE;IACJC,QAAQ,EAAE,kCAAkC;IAC5CC,WAAW,EAAE;EACf;AACF,CAAC"}

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

@@ -1,39 +1,64 @@
 import React from "react";
 declare const _default: {
     title: string;
+    component: React.ForwardRefExoticComponent<import("../Box").BoxProps & {
+        fill?: boolean;
+        children: React.ReactNode;
+    } & React.RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+            controls: {
+                exclude: string[];
+            };
+        };
+    };
 };
 export default _default;
-export declare const _BaseTab: () => React.JSX.Element;
-export declare const Default: () => React.JSX.Element;
-export declare const AsA: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+export declare const Default: {
+    args: {
+        children: React.JSX.Element;
+    };
+};
+export declare const WithFill: {
+    args: {
+        fill: boolean;
+        children: React.JSX.Element;
+    };
+};
+export declare const AsAnchorTags: {
+    args: {
+        children: React.JSX.Element;
     };
 };
 export declare const AsClickable: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    args: {
+        children: React.JSX.Element;
     };
 };
 export declare const AsRouterLink: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    args: {
+        children: React.JSX.Element;
+    };
+};
+export declare const Overflowing: {
+    args: {
+        children: React.JSX.Element;
     };
 };
-export declare const Overflowing: () => React.JSX.Element;
-export declare const Fill: () => React.JSX.Element;
 export declare const BreakingOutOfContainerMargin: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    args: {
+        mx: number;
+        px: number;
+        children: React.JSX.Element;
     };
+    decorators: ((Story: any) => React.JSX.Element)[];
 };
 export declare const NestedChildren: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    args: {
+        children: React.JSX.Element;
     };
 };