@artsy/palette 44.1.0 → 44.2.0

package/dist/elements/SelectInput/SelectInputList.story.js

@@ -5,38 +5,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _storybookStates = require("storybook-states");
 var _SelectInputList = require("./SelectInputList");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var _default = exports.default = {
-  title: "Components/SelectInputList"
-};
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{}]
-  }, /*#__PURE__*/_react.default.createElement(_SelectInputList.SelectInputList, {
-    options: EXAMPLE_COUNTRIES,
-    onSelect: function onSelect(option) {
-      return console.log(option);
+  component: _SelectInputList.SelectInputList,
+  title: "Components/SelectInputList",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A dropdown list component for select inputs, supporting search and keyboard navigation."
+      }
     },
-    onClose: function onClose() {
-      return console.log("close");
+    controls: {
+      exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
     }
-  }));
+  }
 };
-Default.displayName = "Default";
 var EXAMPLE_COUNTRIES = [{
   text: "🇦🇫 +93",
   name: "Afghanistan",
   value: "af",
   countryCode: "+93",
   flag: "🇦🇫"
-}, {
-  text: "🇦🇽 +358",
-  name: "Aland Islands",
-  value: "ax",
-  countryCode: "+358",
-  flag: "🇦🇽"
 }, {
   text: "🇦🇱 +355",
   name: "Albania",
@@ -49,149 +42,27 @@ var EXAMPLE_COUNTRIES = [{
   value: "dz",
   countryCode: "+213",
   flag: "🇩🇿"
-}, {
-  text: "🇦🇸 +1684",
-  name: "American Samoa",
-  value: "as",
-  countryCode: "+1684",
-  flag: "🇦🇸"
-}, {
-  text: "🇦🇩 +376",
-  name: "Andorra",
-  value: "ad",
-  countryCode: "+376",
-  flag: "🇦🇩"
-}, {
-  text: "🇦🇴 +244",
-  name: "Angola",
-  value: "ao",
-  countryCode: "+244",
-  flag: "🇦🇴"
-}, {
-  text: "🇦🇮 +1264",
-  name: "Anguilla",
-  value: "ai",
-  countryCode: "+1264",
-  flag: "🇦🇮"
-}, {
-  text: "🇦🇶 +672",
-  name: "Antarctica",
-  value: "aq",
-  countryCode: "+672",
-  flag: "🇦🇶"
-}, {
-  text: "🇦🇬 +1268",
-  name: "Antigua and Barbuda",
-  value: "ag",
-  countryCode: "+1268",
-  flag: "🇦🇬"
-}, {
-  text: "🇦🇷 +54",
-  name: "Argentina",
-  value: "ar",
-  countryCode: "+54",
-  flag: "🇦🇷"
-}, {
-  text: "🇦🇲 +374",
-  name: "Armenia",
-  value: "am",
-  countryCode: "+374",
-  flag: "🇦🇲"
-}, {
-  text: "🇦🇼 +297",
-  name: "Aruba",
-  value: "aw",
-  countryCode: "+297",
-  flag: "🇦🇼"
-}, {
-  text: "🇦🇺 +61",
-  name: "Australia",
-  value: "au",
-  countryCode: "+61",
-  flag: "🇦🇺"
-}, {
-  text: "🇦🇹 +43",
-  name: "Austria",
-  value: "at",
-  countryCode: "+43",
-  flag: "🇦🇹"
-}, {
-  text: "🇦🇿 +994",
-  name: "Azerbaijan",
-  value: "az",
-  countryCode: "+994",
-  flag: "🇦🇿"
-}, {
-  text: "🇧🇸 +1242",
-  name: "Bahamas",
-  value: "bs",
-  countryCode: "+1242",
-  flag: "🇧🇸"
-}, {
-  text: "🇧🇭 +973",
-  name: "Bahrain",
-  value: "bh",
-  countryCode: "+973",
-  flag: "🇧🇭"
-}, {
-  text: "🇧🇩 +880",
-  name: "Bangladesh",
-  value: "bd",
-  countryCode: "+880",
-  flag: "🇧🇩"
-}, {
-  text: "🇧🇧 +1246",
-  name: "Barbados",
-  value: "bb",
-  countryCode: "+1246",
-  flag: "🇧🇧"
-}, {
-  text: "🇧🇾 +375",
-  name: "Belarus",
-  value: "by",
-  countryCode: "+375",
-  flag: "🇧🇾"
-}, {
-  text: "🇧🇪 +32",
-  name: "Belgium",
-  value: "be",
-  countryCode: "+32",
-  flag: "🇧🇪"
-}, {
-  text: "🇧🇿 +501",
-  name: "Belize",
-  value: "bz",
-  countryCode: "+501",
-  flag: "🇧🇿"
-}, {
-  text: "🇧🇯 +229",
-  name: "Benin",
-  value: "bj",
-  countryCode: "+229",
-  flag: "🇧🇯"
-}, {
-  text: "🇧🇲 +1441",
-  name: "Bermuda",
-  value: "bm",
-  countryCode: "+1441",
-  flag: "🇧🇲"
-}, {
-  text: "🇧🇹 +975",
-  name: "Bhutan",
-  value: "bt",
-  countryCode: "+975",
-  flag: "🇧🇹"
-}, {
-  text: "🇧🇴 +591",
-  name: "Bolivia",
-  value: "bo",
-  countryCode: "+591",
-  flag: "🇧🇴"
-}, {
-  text: "🇧🇦 +387",
-  name: "Bosnia and Herzegovina",
-  value: "ba",
-  countryCode: "+387",
-  flag: "🇧🇦"
 }];
+var Default = exports.Default = {
+  args: {
+    options: EXAMPLE_COUNTRIES
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react.default.createElement(_SelectInputList.SelectInputList, _extends({}, args, {
+      onSelect: function onSelect(option) {
+        return console.log(option);
+      },
+      onClose: function onClose() {
+        return console.log("close");
+      }
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Default SelectInputList with example countries."
+      }
+    }
+  }
+};
 //# sourceMappingURL=SelectInputList.story.js.map

package/dist/elements/SelectInput/SelectInputList.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInputList.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_SelectInputList","obj","__esModule","default","_default","exports","title","Default","createElement","States","states","SelectInputList","options","EXAMPLE_COUNTRIES","onSelect","option","console","log","onClose","displayName","text","name","value","countryCode","flag"],"sources":["../../../src/elements/SelectInput/SelectInputList.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { SelectInputList, SelectInputListProps } from \"./SelectInputList\"\n\nexport default {\n  title: \"Components/SelectInputList\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<SelectInputListProps>> states={[{}]}>\n      <SelectInputList\n        options={EXAMPLE_COUNTRIES}\n        onSelect={(option) => console.log(option)}\n        onClose={() => console.log(\"close\")}\n      />\n    </States>\n  )\n}\n\nconst EXAMPLE_COUNTRIES = [\n  {\n    text: \"🇦🇫 +93\",\n    name: \"Afghanistan\",\n    value: \"af\",\n    countryCode: \"+93\",\n    flag: \"🇦🇫\",\n  },\n  {\n    text: \"🇦🇽 +358\",\n    name: \"Aland Islands\",\n    value: \"ax\",\n    countryCode: \"+358\",\n    flag: \"🇦🇽\",\n  },\n  {\n    text: \"🇦🇱 +355\",\n    name: \"Albania\",\n    value: \"al\",\n    countryCode: \"+355\",\n    flag: \"🇦🇱\",\n  },\n  {\n    text: \"🇩🇿 +213\",\n    name: \"Algeria\",\n    value: \"dz\",\n    countryCode: \"+213\",\n    flag: \"🇩🇿\",\n  },\n  {\n    text: \"🇦🇸 +1684\",\n    name: \"American Samoa\",\n    value: \"as\",\n    countryCode: \"+1684\",\n    flag: \"🇦🇸\",\n  },\n  {\n    text: \"🇦🇩 +376\",\n    name: \"Andorra\",\n    value: \"ad\",\n    countryCode: \"+376\",\n    flag: \"🇦🇩\",\n  },\n  {\n    text: \"🇦🇴 +244\",\n    name: \"Angola\",\n    value: \"ao\",\n    countryCode: \"+244\",\n    flag: \"🇦🇴\",\n  },\n  {\n    text: \"🇦🇮 +1264\",\n    name: \"Anguilla\",\n    value: \"ai\",\n    countryCode: \"+1264\",\n    flag: \"🇦🇮\",\n  },\n  {\n    text: \"🇦🇶 +672\",\n    name: \"Antarctica\",\n    value: \"aq\",\n    countryCode: \"+672\",\n    flag: \"🇦🇶\",\n  },\n  {\n    text: \"🇦🇬 +1268\",\n    name: \"Antigua and Barbuda\",\n    value: \"ag\",\n    countryCode: \"+1268\",\n    flag: \"🇦🇬\",\n  },\n  {\n    text: \"🇦🇷 +54\",\n    name: \"Argentina\",\n    value: \"ar\",\n    countryCode: \"+54\",\n    flag: \"🇦🇷\",\n  },\n  {\n    text: \"🇦🇲 +374\",\n    name: \"Armenia\",\n    value: \"am\",\n    countryCode: \"+374\",\n    flag: \"🇦🇲\",\n  },\n  {\n    text: \"🇦🇼 +297\",\n    name: \"Aruba\",\n    value: \"aw\",\n    countryCode: \"+297\",\n    flag: \"🇦🇼\",\n  },\n  {\n    text: \"🇦🇺 +61\",\n    name: \"Australia\",\n    value: \"au\",\n    countryCode: \"+61\",\n    flag: \"🇦🇺\",\n  },\n  {\n    text: \"🇦🇹 +43\",\n    name: \"Austria\",\n    value: \"at\",\n    countryCode: \"+43\",\n    flag: \"🇦🇹\",\n  },\n  {\n    text: \"🇦🇿 +994\",\n    name: \"Azerbaijan\",\n    value: \"az\",\n    countryCode: \"+994\",\n    flag: \"🇦🇿\",\n  },\n  {\n    text: \"🇧🇸 +1242\",\n    name: \"Bahamas\",\n    value: \"bs\",\n    countryCode: \"+1242\",\n    flag: \"🇧🇸\",\n  },\n  {\n    text: \"🇧🇭 +973\",\n    name: \"Bahrain\",\n    value: \"bh\",\n    countryCode: \"+973\",\n    flag: \"🇧🇭\",\n  },\n  {\n    text: \"🇧🇩 +880\",\n    name: \"Bangladesh\",\n    value: \"bd\",\n    countryCode: \"+880\",\n    flag: \"🇧🇩\",\n  },\n  {\n    text: \"🇧🇧 +1246\",\n    name: \"Barbados\",\n    value: \"bb\",\n    countryCode: \"+1246\",\n    flag: \"🇧🇧\",\n  },\n  {\n    text: \"🇧🇾 +375\",\n    name: \"Belarus\",\n    value: \"by\",\n    countryCode: \"+375\",\n    flag: \"🇧🇾\",\n  },\n  {\n    text: \"🇧🇪 +32\",\n    name: \"Belgium\",\n    value: \"be\",\n    countryCode: \"+32\",\n    flag: \"🇧🇪\",\n  },\n  {\n    text: \"🇧🇿 +501\",\n    name: \"Belize\",\n    value: \"bz\",\n    countryCode: \"+501\",\n    flag: \"🇧🇿\",\n  },\n  {\n    text: \"🇧🇯 +229\",\n    name: \"Benin\",\n    value: \"bj\",\n    countryCode: \"+229\",\n    flag: \"🇧🇯\",\n  },\n  {\n    text: \"🇧🇲 +1441\",\n    name: \"Bermuda\",\n    value: \"bm\",\n    countryCode: \"+1441\",\n    flag: \"🇧🇲\",\n  },\n  {\n    text: \"🇧🇹 +975\",\n    name: \"Bhutan\",\n    value: \"bt\",\n    countryCode: \"+975\",\n    flag: \"🇧🇹\",\n  },\n  {\n    text: \"🇧🇴 +591\",\n    name: \"Bolivia\",\n    value: \"bo\",\n    countryCode: \"+591\",\n    flag: \"🇧🇴\",\n  },\n  {\n    text: \"🇧🇦 +387\",\n    name: \"Bosnia and Herzegovina\",\n    value: \"ba\",\n    countryCode: \"+387\",\n    flag: \"🇧🇦\",\n  },\n]\n"],"mappings":"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"}
+{"version":3,"file":"SelectInputList.story.js","names":["_react","_interopRequireDefault","require","_SelectInputList","_storybookBlocklist","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_default","exports","component","SelectInputList","title","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","EXAMPLE_COUNTRIES","text","name","value","countryCode","flag","Default","args","options","render","createElement","onSelect","option","console","log","onClose","story"],"sources":["../../../src/elements/SelectInput/SelectInputList.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { SelectInputList } from \"./SelectInputList\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: SelectInputList,\n  title: \"Components/SelectInputList\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A dropdown list component for select inputs, supporting search and keyboard navigation.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nconst EXAMPLE_COUNTRIES = [\n  {\n    text: \"🇦🇫 +93\",\n    name: \"Afghanistan\",\n    value: \"af\",\n    countryCode: \"+93\",\n    flag: \"🇦🇫\",\n  },\n  {\n    text: \"🇦🇱 +355\",\n    name: \"Albania\",\n    value: \"al\",\n    countryCode: \"+355\",\n    flag: \"🇦🇱\",\n  },\n  {\n    text: \"🇩🇿 +213\",\n    name: \"Algeria\",\n    value: \"dz\",\n    countryCode: \"+213\",\n    flag: \"🇩🇿\",\n  },\n]\n\nexport const Default = {\n  args: {\n    options: EXAMPLE_COUNTRIES,\n  },\n  render: (args) => (\n    <SelectInputList\n      {...args}\n      onSelect={(option) => console.log(option)}\n      onClose={() => console.log(\"close\")}\n    />\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Default SelectInputList with example countries.\",\n      },\n    },\n  },\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AAA0E,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AAAA,IAAAQ,QAAA,GAAAC,OAAA,CAAAhB,OAAA,GAE3D;EACbiB,SAAS,EAAEC,gCAAe;EAC1BC,KAAK,EAAE,4BAA4B;EACnCC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXN,SAAS,EACP;MACJ;IACF,CAAC;IACDO,QAAQ,EAAE;MACRC,OAAO,EAAEC;IACX;EACF;AACF,CAAC;AAED,IAAMC,iBAAiB,GAAG,CACxB;EACEC,IAAI,EAAE,UAAU;EAChBC,IAAI,EAAE,aAAa;EACnBC,KAAK,EAAE,IAAI;EACXC,WAAW,EAAE,KAAK;EAClBC,IAAI,EAAE;AACR,CAAC,EACD;EACEJ,IAAI,EAAE,WAAW;EACjBC,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE,IAAI;EACXC,WAAW,EAAE,MAAM;EACnBC,IAAI,EAAE;AACR,CAAC,EACD;EACEJ,IAAI,EAAE,WAAW;EACjBC,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE,IAAI;EACXC,WAAW,EAAE,MAAM;EACnBC,IAAI,EAAE;AACR,CAAC,CACF;AAEM,IAAMC,OAAO,GAAAjB,OAAA,CAAAiB,OAAA,GAAG;EACrBC,IAAI,EAAE;IACJC,OAAO,EAAER;EACX,CAAC;EACDS,MAAM,EAAE,SAARA,MAAMA,CAAGF,IAAI;IAAA,oBACXzC,MAAA,CAAAO,OAAA,CAAAqC,aAAA,CAACzC,gBAAA,CAAAsB,eAAe,EAAAjB,QAAA,KACViC,IAAI;MACRI,QAAQ,EAAE,SAAVA,QAAQA,CAAGC,MAAM;QAAA,OAAKC,OAAO,CAACC,GAAG,CAACF,MAAM,CAAC;MAAA,CAAC;MAC1CG,OAAO,EAAE,SAATA,OAAOA,CAAA;QAAA,OAAQF,OAAO,CAACC,GAAG,CAAC,OAAO,CAAC;MAAA;IAAC,GACpC;EAAA,CACH;EACDpB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXoB,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

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

@@ -1,6 +1,68 @@
-import React from "react";
 declare const _default: {
+    component: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("./Separator").SeparatorProps>> & 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 Default: {
+    args: {
+        as: string;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const WithColor: {
+    args: {
+        as: string;
+        color: string;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const WithBorderColor: {
+    args: {
+        as: string;
+        borderColor: string;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const WithSpacing: {
+    args: {
+        as: string;
+        borderWidth: number;
+        my: number;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

package/dist/elements/Separator/Separator.story.js

@@ -3,27 +3,74 @@
 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.WithSpacing = exports.WithColor = exports.WithBorderColor = exports.Default = void 0;
 var _Separator = require("./Separator");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 var _default = exports.default = {
-  title: "Components/Separator"
+  component: _Separator.Separator,
+  title: "Components/Separator",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A horizontal line separator component with customizable colors and styling."
+      }
+    },
+    controls: {
+      exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
 };
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{}, {
-      color: "mono30"
-    }, {
-      borderColor: "red100"
-    }, {
-      borderWidth: 5,
-      my: 2
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_Separator.Separator, {
+var Default = exports.Default = {
+  args: {
     as: "hr"
-  }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic horizontal line separator."
+      }
+    }
+  }
+};
+var WithColor = exports.WithColor = {
+  args: {
+    as: "hr",
+    color: "mono30"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Separator with custom color."
+      }
+    }
+  }
+};
+var WithBorderColor = exports.WithBorderColor = {
+  args: {
+    as: "hr",
+    borderColor: "red100"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Separator with custom border color."
+      }
+    }
+  }
+};
+var WithSpacing = exports.WithSpacing = {
+  args: {
+    as: "hr",
+    borderWidth: 5,
+    my: 2
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Separator with custom width and vertical spacing."
+      }
+    }
+  }
 };
-Default.displayName = "Default";
 //# sourceMappingURL=Separator.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Separator.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_Separator","obj","__esModule","default","_default","exports","title","Default","createElement","States","states","color","borderColor","borderWidth","my","Separator","as","displayName"],"sources":["../../../src/elements/Separator/Separator.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Separator, SeparatorProps } from \"./Separator\"\n\nexport default {\n  title: \"Components/Separator\",\n}\n\nexport const Default = () => {\n  return (\n    <States<SeparatorProps>\n      states={[\n        {},\n        { color: \"mono30\" },\n        { borderColor: \"red100\" },\n        { borderWidth: 5, my: 2 },\n      ]}\n    >\n      <Separator as=\"hr\" />\n    </States>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAAuD,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAExC;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,CAAC,CAAC,EACF;MAAEC,KAAK,EAAE;IAAS,CAAC,EACnB;MAAEC,WAAW,EAAE;IAAS,CAAC,EACzB;MAAEC,WAAW,EAAE,CAAC;MAAEC,EAAE,EAAE;IAAE,CAAC;EACzB,gBAEFlB,MAAA,CAAAO,OAAA,CAAAK,aAAA,CAACR,UAAA,CAAAe,SAAS;IAACC,EAAE,EAAC;EAAI,EAAG,CACd;AAEb,CAAC;AAbYT,OAAO,CAAAU,WAAA"}
+{"version":3,"file":"Separator.story.js","names":["_Separator","require","_storybookBlocklist","_default","exports","default","component","Separator","title","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","Default","args","as","story","WithColor","color","WithBorderColor","borderColor","WithSpacing","borderWidth","my"],"sources":["../../../src/elements/Separator/Separator.story.tsx"],"sourcesContent":["import { Separator } from \"./Separator\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Separator,\n  title: \"Components/Separator\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A horizontal line separator component with customizable colors and styling.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    as: \"hr\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic horizontal line separator.\",\n      },\n    },\n  },\n}\n\nexport const WithColor = {\n  args: {\n    as: \"hr\",\n    color: \"mono30\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Separator with custom color.\",\n      },\n    },\n  },\n}\n\nexport const WithBorderColor = {\n  args: {\n    as: \"hr\",\n    borderColor: \"red100\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Separator with custom border color.\",\n      },\n    },\n  },\n}\n\nexport const WithSpacing = {\n  args: {\n    as: \"hr\",\n    borderWidth: 5,\n    my: 2,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Separator with custom width and vertical spacing.\",\n      },\n    },\n  },\n}\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AAA0E,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAE3D;EACbC,SAAS,EAAEC,oBAAS;EACpBC,KAAK,EAAE,sBAAsB;EAC7BC,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,EAAE,EAAE;EACN,CAAC;EACDR,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXO,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAEM,IAAMC,SAAS,GAAAhB,OAAA,CAAAgB,SAAA,GAAG;EACvBH,IAAI,EAAE;IACJC,EAAE,EAAE,IAAI;IACRG,KAAK,EAAE;EACT,CAAC;EACDX,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXO,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAEM,IAAMG,eAAe,GAAAlB,OAAA,CAAAkB,eAAA,GAAG;EAC7BL,IAAI,EAAE;IACJC,EAAE,EAAE,IAAI;IACRK,WAAW,EAAE;EACf,CAAC;EACDb,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXO,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAEM,IAAMK,WAAW,GAAApB,OAAA,CAAAoB,WAAA,GAAG;EACzBP,IAAI,EAAE;IACJC,EAAE,EAAE,IAAI;IACRO,WAAW,EAAE,CAAC;IACdC,EAAE,EAAE;EACN,CAAC;EACDhB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXO,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

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

@@ -1,17 +1,149 @@
 import React from "react";
 declare const _default: {
+    component: React.FC<React.PropsWithChildren<import("./Shelf").ShelfProps>>;
     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 DifferingAmounts: () => React.JSX.Element;
-export declare const NavigationButtons: () => React.JSX.Element;
+export declare const Default: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const CenterAligned: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const NoProgress: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const SingleItem: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const FewItems: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const ManyItems: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const TenItems: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const NavigationDefault: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const NavigationHover: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const NavigationFocus: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const NavigationDisabled: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const NavigationHoverFocus: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
 export declare const ClientSideUpdates: {
-    (): React.JSX.Element;
-    story: {
-        parameters: {
-            chromatic: {
-                disable: boolean;
+    render: () => React.JSX.Element;
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+        docs: {
+            description: {
+                story: string;
             };
         };
     };