@artsy/palette 44.0.1 → 44.2.0

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

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

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

@@ -1,9 +1,73 @@
 import React from "react";
 declare const _default: {
+    component: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("..").BoxProps> & import("..").BoxProps, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, never>> & string;
     title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        controls: {
+            exclude: string[];
+        };
+    };
 };
 export default _default;
-export declare const _SkeletonBox: () => React.JSX.Element;
-export declare const _SkeletonText: () => React.JSX.Element;
-export declare const _ExampleArtworkSkeleton: () => React.JSX.Element;
-export declare const StressTest: () => React.JSX.Element;
+export declare const SkeletonBoxDefault: {
+    args: {
+        width: number;
+        height: number;
+    };
+    render: (args: any) => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const SkeletonBoxRounded: {
+    args: {
+        width: number;
+        height: number;
+        borderRadius: string;
+    };
+    render: (args: any) => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const SkeletonTextVariants: {
+    args: {
+        variant: string;
+        children: string;
+    };
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const ArtworkExample: {
+    args: {};
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

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

@@ -3,58 +3,93 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports._SkeletonText = exports._SkeletonBox = exports._ExampleArtworkSkeleton = exports.StressTest = void 0;
+exports.default = exports.SkeletonTextVariants = exports.SkeletonBoxRounded = exports.SkeletonBoxDefault = exports.ArtworkExample = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _storybookStates = require("storybook-states");
 var _Join = require("../Join");
-var _Shelf = require("../Shelf");
 var _Spacer = require("../Spacer");
 var _Skeleton = require("./Skeleton");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = exports.default = {
-  title: "Components/Skeleton"
+  component: _Skeleton.SkeletonBox,
+  title: "Components/Skeleton",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Loading state components including SkeletonBox and SkeletonText for creating placeholder content."
+      }
+    },
+    controls: {
+      exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
 };
-var _SkeletonBox = exports._SkeletonBox = function _SkeletonBox() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{}, {
-      borderRadius: "1em"
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_Skeleton.SkeletonBox, {
+var SkeletonBoxDefault = exports.SkeletonBoxDefault = {
+  args: {
     width: 400,
     height: 300
-  }));
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react.default.createElement(_Skeleton.SkeletonBox, args);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic SkeletonBox with width and height."
+      }
+    }
+  }
 };
-_SkeletonBox.displayName = "_SkeletonBox";
-var _SkeletonText = exports._SkeletonText = function _SkeletonText() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{
+var SkeletonBoxRounded = exports.SkeletonBoxRounded = {
+  args: {
+    width: 400,
+    height: 300,
+    borderRadius: "1em"
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react.default.createElement(_Skeleton.SkeletonBox, args);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "SkeletonBox with rounded corners."
+      }
+    }
+  }
+};
+var SkeletonTextVariants = exports.SkeletonTextVariants = {
+  args: {
+    variant: "sm-display",
+    children: "Loading text..."
+  },
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_Join.Join, {
+      separator: /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+        y: 1
+      })
+    }, /*#__PURE__*/_react.default.createElement(_Skeleton.SkeletonText, {
       variant: "xs"
-    }, {
+    }, "Extra Small Text"), /*#__PURE__*/_react.default.createElement(_Skeleton.SkeletonText, {
       variant: "sm"
-    }, {
+    }, "Small Text"), /*#__PURE__*/_react.default.createElement(_Skeleton.SkeletonText, {
       variant: "md"
-    }, {
+    }, "Medium Text"), /*#__PURE__*/_react.default.createElement(_Skeleton.SkeletonText, {
       variant: "lg"
-    }, {
+    }, "Large Text"), /*#__PURE__*/_react.default.createElement(_Skeleton.SkeletonText, {
       variant: "xl"
-    }, {
+    }, "Extra Large Text"), /*#__PURE__*/_react.default.createElement(_Skeleton.SkeletonText, {
       variant: "xxl"
-    }, {
-      variant: "md",
-      maxWidth: 300,
-      // @ts-expect-error  MIGRATE_STRICT_MODE
-      children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione impedit commodi quo, dolorem id animi ipsa voluptas eius cum suscipit distinctio qui quae aliquam consequuntur officiis numquam iste deleniti."
-    }, {
-      variant: "xl",
-      maxWidth: 300,
-      // @ts-expect-error  MIGRATE_STRICT_MODE
-      children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione impedit commodi quo, dolorem id animi ipsa voluptas eius cum suscipit distinctio qui quae aliquam consequuntur officiis numquam iste deleniti."
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_Skeleton.SkeletonText, {
-    variant: "sm-display"
-  }, "loading"));
+    }, "Double Extra Large Text"));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "SkeletonText showing all text variant sizes."
+      }
+    }
+  }
 };
-_SkeletonText.displayName = "_SkeletonText";
 var ExampleArtworkSkeleton = function ExampleArtworkSkeleton(_ref) {
   var i = _ref.i;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Skeleton.SkeletonBox, {
@@ -72,28 +107,19 @@ var ExampleArtworkSkeleton = function ExampleArtworkSkeleton(_ref) {
     variant: "xs"
   }, "Price"));
 };
-var _ExampleArtworkSkeleton = exports._ExampleArtworkSkeleton = function _ExampleArtworkSkeleton() {
-  return /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, null, /*#__PURE__*/_react.default.createElement(ExampleArtworkSkeleton, {
-    i: 0
-  }));
-};
-_ExampleArtworkSkeleton.displayName = "_ExampleArtworkSkeleton";
-var StressTest = exports.StressTest = function StressTest() {
-  return /*#__PURE__*/_react.default.createElement(_Join.Join, {
-    separator: /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
-      y: 6
-    })
-  }, Array.from(Array(12)).map(function (_, i) {
-    return /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, {
-      key: "a-".concat(i),
-      overflow: "hidden"
-    }, /*#__PURE__*/_react.default.createElement(_Shelf.Shelf, null, Array.from(Array(12)).map(function (__, j) {
-      return /*#__PURE__*/_react.default.createElement(ExampleArtworkSkeleton, {
-        key: "b-".concat(j),
-        i: j
-      });
-    })));
-  }));
+var ArtworkExample = exports.ArtworkExample = {
+  args: {},
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, null, /*#__PURE__*/_react.default.createElement(ExampleArtworkSkeleton, {
+      i: 0
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Example of a skeleton for an artwork card layout."
+      }
+    }
+  }
 };
-StressTest.displayName = "StressTest";
 //# sourceMappingURL=Skeleton.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_Join","_Shelf","_Spacer","_Skeleton","obj","__esModule","default","_default","exports","title","_SkeletonBox","createElement","States","states","borderRadius","SkeletonBox","width","height","displayName","_SkeletonText","variant","maxWidth","children","SkeletonText","ExampleArtworkSkeleton","_ref","i","Fragment","Spacer","y","_ExampleArtworkSkeleton","Skeleton","StressTest","Join","separator","Array","from","map","_","key","concat","overflow","Shelf","__","j"],"sources":["../../../src/elements/Skeleton/Skeleton.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Join } from \"../Join\"\nimport { Shelf } from \"../Shelf\"\nimport { Spacer } from \"../Spacer\"\nimport {\n  Skeleton,\n  SkeletonBox,\n  SkeletonBoxProps,\n  SkeletonText,\n  SkeletonTextProps,\n} from \"./Skeleton\"\n\nexport default {\n  title: \"Components/Skeleton\",\n}\n\nexport const _SkeletonBox = () => {\n  return (\n    <States<SkeletonBoxProps> states={[{}, { borderRadius: \"1em\" }]}>\n      <SkeletonBox width={400} height={300} />\n    </States>\n  )\n}\n\nexport const _SkeletonText = () => {\n  return (\n    <States<SkeletonTextProps>\n      states={[\n        { variant: \"xs\" },\n        { variant: \"sm\" },\n        { variant: \"md\" },\n        { variant: \"lg\" },\n        { variant: \"xl\" },\n        { variant: \"xxl\" },\n        {\n          variant: \"md\",\n          maxWidth: 300,\n          // @ts-expect-error  MIGRATE_STRICT_MODE\n          children:\n            \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione impedit commodi quo, dolorem id animi ipsa voluptas eius cum suscipit distinctio qui quae aliquam consequuntur officiis numquam iste deleniti.\",\n        },\n        {\n          variant: \"xl\",\n          maxWidth: 300,\n          // @ts-expect-error  MIGRATE_STRICT_MODE\n          children:\n            \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione impedit commodi quo, dolorem id animi ipsa voluptas eius cum suscipit distinctio qui quae aliquam consequuntur officiis numquam iste deleniti.\",\n        },\n      ]}\n    >\n      <SkeletonText variant=\"sm-display\">loading</SkeletonText>\n    </States>\n  )\n}\n\nconst ExampleArtworkSkeleton: React.FC<React.PropsWithChildren<{ i: number }>> = ({ i }) => {\n  return (\n    <>\n      <SkeletonBox width={200} height={[200, 300, 250, 275][i % 4]} />\n      <Spacer y={1} />\n      <SkeletonText variant=\"sm-display\">Artist Name</SkeletonText>\n      <SkeletonText variant=\"sm-display\">Artwork Title</SkeletonText>\n      <SkeletonText variant=\"xs\">Partner</SkeletonText>\n      <SkeletonText variant=\"xs\">Price</SkeletonText>\n    </>\n  )\n}\n\nexport const _ExampleArtworkSkeleton = () => {\n  return (\n    <Skeleton>\n      <ExampleArtworkSkeleton i={0} />\n    </Skeleton>\n  )\n}\n\nexport const StressTest = () => {\n  return (\n    <Join separator={<Spacer y={6} />}>\n      {Array.from(Array(12)).map((_, i) => {\n        return (\n          <Skeleton key={`a-${i}`} overflow=\"hidden\">\n            <Shelf>\n              {Array.from(Array(12)).map((__, j) => {\n                return <ExampleArtworkSkeleton key={`b-${j}`} i={j} />\n              })}\n            </Shelf>\n          </Skeleton>\n        )\n      })}\n    </Join>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Skeleton.story.js","names":["_react","_interopRequireDefault","require","_Join","_Spacer","_Skeleton","_storybookBlocklist","obj","__esModule","default","_default","exports","component","SkeletonBox","title","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","SkeletonBoxDefault","args","width","height","render","createElement","story","SkeletonBoxRounded","borderRadius","SkeletonTextVariants","variant","children","Join","separator","Spacer","y","SkeletonText","ExampleArtworkSkeleton","_ref","i","Fragment","ArtworkExample","Skeleton"],"sources":["../../../src/elements/Skeleton/Skeleton.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Skeleton, SkeletonBox, SkeletonText } from \"./Skeleton\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: SkeletonBox,\n  title: \"Components/Skeleton\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Loading state components including SkeletonBox and SkeletonText for creating placeholder content.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const SkeletonBoxDefault = {\n  args: {\n    width: 400,\n    height: 300,\n  },\n  render: (args) => <SkeletonBox {...args} />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic SkeletonBox with width and height.\",\n      },\n    },\n  },\n}\n\nexport const SkeletonBoxRounded = {\n  args: {\n    width: 400,\n    height: 300,\n    borderRadius: \"1em\",\n  },\n  render: (args) => <SkeletonBox {...args} />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"SkeletonBox with rounded corners.\",\n      },\n    },\n  },\n}\n\nexport const SkeletonTextVariants = {\n  args: {\n    variant: \"sm-display\",\n    children: \"Loading text...\",\n  },\n  render: () => (\n    <Join separator={<Spacer y={1} />}>\n      <SkeletonText variant=\"xs\">Extra Small Text</SkeletonText>\n      <SkeletonText variant=\"sm\">Small Text</SkeletonText>\n      <SkeletonText variant=\"md\">Medium Text</SkeletonText>\n      <SkeletonText variant=\"lg\">Large Text</SkeletonText>\n      <SkeletonText variant=\"xl\">Extra Large Text</SkeletonText>\n      <SkeletonText variant=\"xxl\">Double Extra Large Text</SkeletonText>\n    </Join>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"SkeletonText showing all text variant sizes.\",\n      },\n    },\n  },\n}\n\nconst ExampleArtworkSkeleton: React.FC<{ i: number }> = ({ i }) => (\n  <>\n    <SkeletonBox width={200} height={[200, 300, 250, 275][i % 4]} />\n    <Spacer y={1} />\n    <SkeletonText variant=\"sm-display\">Artist Name</SkeletonText>\n    <SkeletonText variant=\"sm-display\">Artwork Title</SkeletonText>\n    <SkeletonText variant=\"xs\">Partner</SkeletonText>\n    <SkeletonText variant=\"xs\">Price</SkeletonText>\n  </>\n)\n\nexport const ArtworkExample = {\n  args: {},\n  render: () => (\n    <Skeleton>\n      <ExampleArtworkSkeleton i={0} />\n    </Skeleton>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Example of a skeleton for an artwork card layout.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

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

@@ -1,23 +1,62 @@
 import React from "react";
 declare const _default: {
+    component: React.ForwardRefExoticComponent<import("./Skip").SkipProps & React.RefAttributes<unknown>>;
     title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        controls: {
+            exclude: string[];
+        };
+    };
 };
 export default _default;
-export declare const SkipButton: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+export declare const Default: {
+    args: {
+        children: string;
+    };
+    render: (args: any) => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };
-export declare const SkipButtonWithSpacing: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+export declare const WithSpacing: {
+    args: {
+        children: string;
+        width: string;
+        my: number;
+    };
+    render: (args: any) => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };
 export declare const SkipLink: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    args: {
+        children: string;
+        width: string;
+        my: number;
+        as: string;
+        href: string;
+    };
+    render: (args: any) => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };

package/dist/elements/Skip/Skip.story.js

@@ -3,50 +3,88 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SkipLink = exports.SkipButtonWithSpacing = exports.SkipButton = void 0;
+exports.default = exports.WithSpacing = exports.SkipLink = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Text = require("../Text");
 var _Skip = require("./Skip");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = exports.default = {
-  title: "Components/Skip"
+  component: _Skip.Skip,
+  title: "Components/Skip",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A skip link component for accessibility, allowing keyboard users to skip to main content."
+      }
+    },
+    controls: {
+      exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
 };
-var SkipButton = exports.SkipButton = function SkipButton() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm"
-  }, "Press <tab> to focus"), /*#__PURE__*/_react.default.createElement(_Skip.Skip, null, "Skip to main content"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm"
-  }, "It should not interfere with the normal flow of content"));
+var Default = exports.Default = {
+  args: {
+    children: "Skip to main content"
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "sm"
+    }, "Press <tab> to focus"), /*#__PURE__*/_react.default.createElement(_Skip.Skip, args), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "sm"
+    }, "It should not interfere with the normal flow of content"));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic skip button for accessibility navigation."
+      }
+    }
+  }
 };
-SkipButton.story = {
-  name: "Skip button"
-};
-var SkipButtonWithSpacing = exports.SkipButtonWithSpacing = function SkipButtonWithSpacing() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm"
-  }, "Press <tab> to focus"), /*#__PURE__*/_react.default.createElement(_Skip.Skip, {
+var WithSpacing = exports.WithSpacing = {
+  args: {
+    children: "Skip to main content",
     width: "100%",
     my: 1
-  }, "Skip to main content"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm"
-  }, "It should not interfere with the normal flow of content"));
-};
-SkipButtonWithSpacing.story = {
-  name: "Skip button with spacing"
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "sm"
+    }, "Press <tab> to focus"), /*#__PURE__*/_react.default.createElement(_Skip.Skip, args), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "sm"
+    }, "It should not interfere with the normal flow of content"));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Skip button with custom spacing and width."
+      }
+    }
+  }
 };
-var SkipLink = exports.SkipLink = function SkipLink() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm"
-  }, "Press <tab> to focus"), /*#__PURE__*/_react.default.createElement(_Skip.Skip, {
+var SkipLink = exports.SkipLink = {
+  args: {
+    children: "Skip to main content",
     width: "100%",
     my: 1,
     as: "a",
     href: "#main"
-  }, "Skip to main content"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm"
-  }, "It should not interfere with the normal flow of content"));
-};
-SkipLink.story = {
-  name: "Skip link"
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "sm"
+    }, "Press <tab> to focus"), /*#__PURE__*/_react.default.createElement(_Skip.Skip, args), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "sm"
+    }, "It should not interfere with the normal flow of content"));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Skip link rendered as an anchor element with href."
+      }
+    }
+  }
 };
 //# sourceMappingURL=Skip.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Skip.story.js","names":["_react","_interopRequireDefault","require","_Text","_Skip","obj","__esModule","default","_default","exports","title","SkipButton","createElement","Fragment","Text","variant","Skip","story","name","SkipButtonWithSpacing","width","my","SkipLink","as","href"],"sources":["../../../src/elements/Skip/Skip.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Text } from \"../Text\"\nimport { Skip } from \"./Skip\"\n\nexport default {\n  title: \"Components/Skip\",\n}\n\nexport const SkipButton = () => {\n  return (\n    <>\n      <Text variant=\"sm\">Press &lt;tab&gt; to focus</Text>\n      <Skip>Skip to main content</Skip>\n      <Text variant=\"sm\">\n        It should not interfere with the normal flow of content\n      </Text>\n    </>\n  )\n}\n\nSkipButton.story = {\n  name: \"Skip button\",\n}\n\nexport const SkipButtonWithSpacing = () => {\n  return (\n    <>\n      <Text variant=\"sm\">Press &lt;tab&gt; to focus</Text>\n      <Skip width=\"100%\" my={1}>\n        Skip to main content\n      </Skip>\n      <Text variant=\"sm\">\n        It should not interfere with the normal flow of content\n      </Text>\n    </>\n  )\n}\n\nSkipButtonWithSpacing.story = {\n  name: \"Skip button with spacing\",\n}\n\nexport const SkipLink = () => {\n  return (\n    <>\n      <Text variant=\"sm\">Press &lt;tab&gt; to focus</Text>\n      <Skip width=\"100%\" my={1} as=\"a\" href=\"#main\">\n        Skip to main content\n      </Skip>\n      <Text variant=\"sm\">\n        It should not interfere with the normal flow of content\n      </Text>\n    </>\n  )\n}\n\nSkipLink.story = {\n  name: \"Skip link\",\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAA6B,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEd;EACbG,KAAK,EAAE;AACT,CAAC;AAEM,IAAMC,UAAU,GAAAF,OAAA,CAAAE,UAAA,GAAG,SAAbA,UAAUA,CAAA,EAAS;EAC9B,oBACEX,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAAAZ,MAAA,CAAAO,OAAA,CAAAM,QAAA,qBACEb,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACT,KAAA,CAAAW,IAAI;IAACC,OAAO,EAAC;EAAI,GAAC,sBAA0B,CAAO,eACpDf,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACR,KAAA,CAAAY,IAAI,QAAC,sBAAoB,CAAO,eACjChB,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACT,KAAA,CAAAW,IAAI;IAACC,OAAO,EAAC;EAAI,GAAC,yDAEnB,CAAO,CACN;AAEP,CAAC;AAEDJ,UAAU,CAACM,KAAK,GAAG;EACjBC,IAAI,EAAE;AACR,CAAC;AAEM,IAAMC,qBAAqB,GAAAV,OAAA,CAAAU,qBAAA,GAAG,SAAxBA,qBAAqBA,CAAA,EAAS;EACzC,oBACEnB,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAAAZ,MAAA,CAAAO,OAAA,CAAAM,QAAA,qBACEb,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACT,KAAA,CAAAW,IAAI;IAACC,OAAO,EAAC;EAAI,GAAC,sBAA0B,CAAO,eACpDf,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACR,KAAA,CAAAY,IAAI;IAACI,KAAK,EAAC,MAAM;IAACC,EAAE,EAAE;EAAE,GAAC,sBAE1B,CAAO,eACPrB,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACT,KAAA,CAAAW,IAAI;IAACC,OAAO,EAAC;EAAI,GAAC,yDAEnB,CAAO,CACN;AAEP,CAAC;AAEDI,qBAAqB,CAACF,KAAK,GAAG;EAC5BC,IAAI,EAAE;AACR,CAAC;AAEM,IAAMI,QAAQ,GAAAb,OAAA,CAAAa,QAAA,GAAG,SAAXA,QAAQA,CAAA,EAAS;EAC5B,oBACEtB,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAAAZ,MAAA,CAAAO,OAAA,CAAAM,QAAA,qBACEb,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACT,KAAA,CAAAW,IAAI;IAACC,OAAO,EAAC;EAAI,GAAC,sBAA0B,CAAO,eACpDf,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACR,KAAA,CAAAY,IAAI;IAACI,KAAK,EAAC,MAAM;IAACC,EAAE,EAAE,CAAE;IAACE,EAAE,EAAC,GAAG;IAACC,IAAI,EAAC;EAAO,GAAC,sBAE9C,CAAO,eACPxB,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACT,KAAA,CAAAW,IAAI;IAACC,OAAO,EAAC;EAAI,GAAC,yDAEnB,CAAO,CACN;AAEP,CAAC;AAEDO,QAAQ,CAACL,KAAK,GAAG;EACfC,IAAI,EAAE;AACR,CAAC"}
+{"version":3,"file":"Skip.story.js","names":["_react","_interopRequireDefault","require","_Text","_Skip","_storybookBlocklist","obj","__esModule","default","_default","exports","component","Skip","title","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","Default","args","children","render","createElement","Fragment","Text","variant","story","WithSpacing","width","my","SkipLink","as","href"],"sources":["../../../src/elements/Skip/Skip.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Text } from \"../Text\"\nimport { Skip } from \"./Skip\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Skip,\n  title: \"Components/Skip\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A skip link component for accessibility, allowing keyboard users to skip to main content.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    children: \"Skip to main content\",\n  },\n  render: (args) => (\n    <>\n      <Text variant=\"sm\">Press &lt;tab&gt; to focus</Text>\n      <Skip {...args} />\n      <Text variant=\"sm\">\n        It should not interfere with the normal flow of content\n      </Text>\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic skip button for accessibility navigation.\",\n      },\n    },\n  },\n}\n\nexport const WithSpacing = {\n  args: {\n    children: \"Skip to main content\",\n    width: \"100%\",\n    my: 1,\n  },\n  render: (args) => (\n    <>\n      <Text variant=\"sm\">Press &lt;tab&gt; to focus</Text>\n      <Skip {...args} />\n      <Text variant=\"sm\">\n        It should not interfere with the normal flow of content\n      </Text>\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Skip button with custom spacing and width.\",\n      },\n    },\n  },\n}\n\nexport const SkipLink = {\n  args: {\n    children: \"Skip to main content\",\n    width: \"100%\",\n    my: 1,\n    as: \"a\",\n    href: \"#main\",\n  },\n  render: (args) => (\n    <>\n      <Text variant=\"sm\">Press &lt;tab&gt; to focus</Text>\n      <Skip {...args} />\n      <Text variant=\"sm\">\n        It should not interfere with the normal flow of content\n      </Text>\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Skip link rendered as an anchor element with href.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

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

@@ -1,11 +1,46 @@
 import React from "react";
-import { SpacerProps } from "./Spacer";
 declare const _default: {
-    title: string;
     component: {
-        ({ x, y, ...restProps }: SpacerProps): React.JSX.Element;
+        ({ x, y, ...restProps }: import("./Spacer").SpacerProps): React.JSX.Element;
         displayName: string;
     };
+    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 VerticalSpacing: {
+    args: {
+        y: number;
+    };
+    render: (args: any) => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const HorizontalSpacing: {
+    args: {
+        x: number;
+    };
+    render: (args: any) => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};