@artsy/palette 44.1.0 → 44.2.0

package/dist/elements/Spacer/Spacer.story.js

@@ -3,71 +3,73 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
-var _v = require("@artsy/palette-tokens/dist/themes/v3");
+exports.default = exports.VerticalSpacing = exports.HorizontalSpacing = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _storybookStates = require("storybook-states");
 var _Box = require("../Box");
-var _Spacer2 = require("./Spacer");
+var _Spacer = require("./Spacer");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var _default = exports.default = {
+  component: _Spacer.Spacer,
   title: "Components/Spacer",
-  component: _Spacer2.Spacer
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A spacing component that creates horizontal (x) or vertical (y) space between elements."
+      }
+    },
+    controls: {
+      exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
 };
-var VALUES = Object.keys(_v.THEME.space).sort(function (a, b) {
-  return Number(a) - Number(b);
-}).map(function (value) {
-  return Number(value);
-});
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [].concat(_toConsumableArray(VALUES.map(function (value) {
-      return {
-        y: value
-      };
-    })), _toConsumableArray(VALUES.map(function (value) {
-      return {
-        x: value
-      };
-    })))
-  }, function (_ref) {
-    var x = _ref.x,
-      y = _ref.y;
-    if (y) {
-      return /*#__PURE__*/_react.default.createElement(_Spacer, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
-        height: 2,
-        width: 100,
-        bg: "mono60"
-      }), /*#__PURE__*/_react.default.createElement(_Spacer2.Spacer, {
-        y: y
-      }), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-        height: 2,
-        width: 100,
-        bg: "mono60"
-      }));
+var VerticalSpacing = exports.VerticalSpacing = {
+  args: {
+    y: 2
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      height: 2,
+      width: 100,
+      bg: "mono60"
+    }), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, args), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      height: 2,
+      width: 100,
+      bg: "mono60"
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Vertical spacing using the y prop."
+      }
     }
-    return /*#__PURE__*/_react.default.createElement(_Spacer, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+  }
+};
+var HorizontalSpacing = exports.HorizontalSpacing = {
+  args: {
+    x: 2
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
       display: "flex"
     }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
       height: 100,
       width: 2,
       bg: "mono60"
-    }), /*#__PURE__*/_react.default.createElement(_Spacer2.Spacer, {
-      x: x
-    }), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    }), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, args), /*#__PURE__*/_react.default.createElement(_Box.Box, {
       height: 100,
       width: 2,
       bg: "mono60"
-    })));
-  });
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Horizontal spacing using the x prop."
+      }
+    }
+  }
 };
-Default.displayName = "Default";
-var _Spacer = _Box.Box;
-_Spacer.displayName = "Spacer";
 //# sourceMappingURL=Spacer.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spacer.story.js","names":["_v","require","_react","_interopRequireDefault","_storybookStates","_Box","_Spacer2","obj","__esModule","default","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","slice","constructor","name","Array","from","test","iter","Symbol","iterator","isArray","len","length","i","arr2","_default","exports","title","component","Spacer","VALUES","keys","THEME","space","sort","a","b","Number","map","value","Default","createElement","States","states","concat","y","x","_ref","_Spacer","Box","height","width","bg","display","displayName"],"sources":["../../../src/elements/Spacer/Spacer.story.tsx"],"sourcesContent":["import { THEME } from \"@artsy/palette-tokens/dist/themes/v3\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { Spacer, SpacerProps } from \"./Spacer\"\n\nexport default {\n  title: \"Components/Spacer\",\n  component: Spacer,\n}\n\nconst VALUES = Object.keys(THEME.space)\n  .sort((a, b) => {\n    return Number(a) - Number(b)\n  })\n  .map((value) => Number(value))\n\nexport const Default = () => {\n  return (\n    <States<SpacerProps>\n      states={[\n        ...VALUES.map((value) => ({ y: value })),\n        ...VALUES.map((value) => ({ x: value })),\n      ]}\n    >\n      {({ x, y }) => {\n        if (y) {\n          return (\n            <_Spacer>\n              <Box height={2} width={100} bg=\"mono60\" />\n\n              <Spacer y={y} />\n\n              <Box height={2} width={100} bg=\"mono60\" />\n            </_Spacer>\n          )\n        }\n\n        return (\n          <_Spacer>\n            <Box display=\"flex\">\n              <Box height={100} width={2} bg=\"mono60\" />\n\n              <Spacer x={x} />\n\n              <Box height={100} width={2} bg=\"mono60\" />\n            </Box>\n          </_Spacer>\n        )\n      }}\n    </States>\n  )\n}\n\nconst _Spacer = Box\n_Spacer.displayName = \"Spacer\"\n"],"mappings":"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"}
+{"version":3,"file":"Spacer.story.js","names":["_react","_interopRequireDefault","require","_Box","_Spacer","_storybookBlocklist","obj","__esModule","default","_default","exports","component","Spacer","title","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","VerticalSpacing","args","y","render","createElement","Box","height","width","bg","story","HorizontalSpacing","x","display"],"sources":["../../../src/elements/Spacer/Spacer.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Box } from \"../Box\"\nimport { Spacer } from \"./Spacer\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Spacer,\n  title: \"Components/Spacer\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A spacing component that creates horizontal (x) or vertical (y) space between elements.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const VerticalSpacing = {\n  args: {\n    y: 2,\n  },\n  render: (args) => (\n    <Box>\n      <Box height={2} width={100} bg=\"mono60\" />\n      <Spacer {...args} />\n      <Box height={2} width={100} bg=\"mono60\" />\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Vertical spacing using the y prop.\",\n      },\n    },\n  },\n}\n\nexport const HorizontalSpacing = {\n  args: {\n    x: 2,\n  },\n  render: (args) => (\n    <Box display=\"flex\">\n      <Box height={100} width={2} bg=\"mono60\" />\n      <Spacer {...args} />\n      <Box height={100} width={2} bg=\"mono60\" />\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Horizontal spacing using the x prop.\",\n      },\n    },\n  },\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AAA0E,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAE3D;EACbG,SAAS,EAAEC,cAAM;EACjBC,KAAK,EAAE,mBAAmB;EAC1BC,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,eAAe,GAAAX,OAAA,CAAAW,eAAA,GAAG;EAC7BC,IAAI,EAAE;IACJC,CAAC,EAAE;EACL,CAAC;EACDC,MAAM,EAAE,SAARA,MAAMA,CAAGF,IAAI;IAAA,oBACXtB,MAAA,CAAAQ,OAAA,CAAAiB,aAAA,CAACtB,IAAA,CAAAuB,GAAG,qBACF1B,MAAA,CAAAQ,OAAA,CAAAiB,aAAA,CAACtB,IAAA,CAAAuB,GAAG;MAACC,MAAM,EAAE,CAAE;MAACC,KAAK,EAAE,GAAI;MAACC,EAAE,EAAC;IAAQ,EAAG,eAC1C7B,MAAA,CAAAQ,OAAA,CAAAiB,aAAA,CAACrB,OAAA,CAAAQ,MAAM,EAAKU,IAAI,CAAI,eACpBtB,MAAA,CAAAQ,OAAA,CAAAiB,aAAA,CAACtB,IAAA,CAAAuB,GAAG;MAACC,MAAM,EAAE,CAAE;MAACC,KAAK,EAAE,GAAI;MAACC,EAAE,EAAC;IAAQ,EAAG,CACtC;EAAA,CACP;EACDd,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXa,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAEM,IAAMC,iBAAiB,GAAArB,OAAA,CAAAqB,iBAAA,GAAG;EAC/BT,IAAI,EAAE;IACJU,CAAC,EAAE;EACL,CAAC;EACDR,MAAM,EAAE,SAARA,MAAMA,CAAGF,IAAI;IAAA,oBACXtB,MAAA,CAAAQ,OAAA,CAAAiB,aAAA,CAACtB,IAAA,CAAAuB,GAAG;MAACO,OAAO,EAAC;IAAM,gBACjBjC,MAAA,CAAAQ,OAAA,CAAAiB,aAAA,CAACtB,IAAA,CAAAuB,GAAG;MAACC,MAAM,EAAE,GAAI;MAACC,KAAK,EAAE,CAAE;MAACC,EAAE,EAAC;IAAQ,EAAG,eAC1C7B,MAAA,CAAAQ,OAAA,CAAAiB,aAAA,CAACrB,OAAA,CAAAQ,MAAM,EAAKU,IAAI,CAAI,eACpBtB,MAAA,CAAAQ,OAAA,CAAAiB,aAAA,CAACtB,IAAA,CAAAuB,GAAG;MAACC,MAAM,EAAE,GAAI;MAACC,KAAK,EAAE,CAAE;MAACC,EAAE,EAAC;IAAQ,EAAG,CACtC;EAAA,CACP;EACDd,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXa,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

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

@@ -1,18 +1,58 @@
-import React from "react";
 declare const _default: {
+    component: import("react").FC<import("react").PropsWithChildren<import("./Spinner").SpinnerProps>>;
     title: string;
+    tags: string[];
     parameters: {
         chromatic: {
             disable: boolean;
         };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        controls: {
+            exclude: string[];
+        };
     };
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const DefaultSpinner: () => React.JSX.Element;
-export declare const SpinnerWithDelayedShow: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+export declare const Default: {
+    args: {
+        position: string;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const Small: {
+    args: {
+        size: string;
+        color: string;
+        position: string;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const WithDelay: {
+    args: {
+        delay: number;
+        position: string;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };

package/dist/elements/Spinner/Spinner.story.js

@@ -3,44 +3,64 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SpinnerWithDelayedShow = exports.DefaultSpinner = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _storybookStates = require("storybook-states");
+exports.default = exports.WithDelay = exports.Small = exports.Default = void 0;
 var _Spinner = require("./Spinner");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 var _default = exports.default = {
+  component: _Spinner.Spinner,
   title: "Components/Spinner",
+  tags: ["autodocs"],
   parameters: {
     chromatic: {
       disable: true
+    },
+    docs: {
+      description: {
+        component: "A loading spinner component with different sizes and colors, optionally with a delay before showing."
+      }
+    },
+    controls: {
+      exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
     }
   }
 };
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{}, {
-      color: "brand",
-      size: "small",
-      m: 2
-    }, {
-      size: ["small", "medium", "large"]
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, {
+var Default = exports.Default = {
+  args: {
     position: "static"
-  }));
-};
-Default.displayName = "Default";
-var DefaultSpinner = exports.DefaultSpinner = function DefaultSpinner() {
-  return /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, null);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic spinner with default styling."
+      }
+    }
+  }
 };
-DefaultSpinner.displayName = "DefaultSpinner";
-var SpinnerWithDelayedShow = exports.SpinnerWithDelayedShow = function SpinnerWithDelayedShow() {
-  return /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, {
-    delay: 1000
-  });
+var Small = exports.Small = {
+  args: {
+    size: "small",
+    color: "brand",
+    position: "static"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Small spinner with brand color."
+      }
+    }
+  }
 };
-SpinnerWithDelayedShow.displayName = "SpinnerWithDelayedShow";
-SpinnerWithDelayedShow.story = {
-  name: "Spinner with delayed show"
+var WithDelay = exports.WithDelay = {
+  args: {
+    delay: 1000,
+    position: "static"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Spinner that shows after a 1 second delay."
+      }
+    }
+  }
 };
 //# sourceMappingURL=Spinner.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_Spinner","obj","__esModule","default","_default","exports","title","parameters","chromatic","disable","Default","createElement","States","states","color","size","m","Spinner","position","displayName","DefaultSpinner","SpinnerWithDelayedShow","delay","story","name"],"sources":["../../../src/elements/Spinner/Spinner.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Spinner, SpinnerProps } from \"./Spinner\"\n\nexport default {\n  title: \"Components/Spinner\",\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const Default = () => (\n  <States<SpinnerProps>\n    states={[\n      {},\n      { color: \"brand\", size: \"small\", m: 2 },\n      { size: [\"small\", \"medium\", \"large\"] },\n    ]}\n  >\n    <Spinner position=\"static\" />\n  </States>\n)\n\nexport const DefaultSpinner = () => {\n  return <Spinner />\n}\n\nexport const SpinnerWithDelayedShow = () => {\n  return <Spinner delay={1000} />\n}\n\nSpinnerWithDelayedShow.story = {\n  name: \"Spinner with delayed show\",\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAAiD,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAElC;EACbG,KAAK,EAAE,oBAAoB;EAC3BC,UAAU,EAAE;IAAEC,SAAS,EAAE;MAAEC,OAAO,EAAE;IAAK;EAAE;AAC7C,CAAC;AAEM,IAAMC,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG,SAAVA,OAAOA,CAAA;EAAA,oBAClBd,MAAA,CAAAO,OAAA,CAAAQ,aAAA,CAACZ,gBAAA,CAAAa,MAAM;IACLC,MAAM,EAAE,CACN,CAAC,CAAC,EACF;MAAEC,KAAK,EAAE,OAAO;MAAEC,IAAI,EAAE,OAAO;MAAEC,CAAC,EAAE;IAAE,CAAC,EACvC;MAAED,IAAI,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO;IAAE,CAAC;EACtC,gBAEFnB,MAAA,CAAAO,OAAA,CAAAQ,aAAA,CAACX,QAAA,CAAAiB,OAAO;IAACC,QAAQ,EAAC;EAAQ,EAAG,CACtB;AAAA,CACV;AAVYR,OAAO,CAAAS,WAAA;AAYb,IAAMC,cAAc,GAAAf,OAAA,CAAAe,cAAA,GAAG,SAAjBA,cAAcA,CAAA,EAAS;EAClC,oBAAOxB,MAAA,CAAAO,OAAA,CAAAQ,aAAA,CAACX,QAAA,CAAAiB,OAAO,OAAG;AACpB,CAAC;AAFYG,cAAc,CAAAD,WAAA;AAIpB,IAAME,sBAAsB,GAAAhB,OAAA,CAAAgB,sBAAA,GAAG,SAAzBA,sBAAsBA,CAAA,EAAS;EAC1C,oBAAOzB,MAAA,CAAAO,OAAA,CAAAQ,aAAA,CAACX,QAAA,CAAAiB,OAAO;IAACK,KAAK,EAAE;EAAK,EAAG;AACjC,CAAC;AAFYD,sBAAsB,CAAAF,WAAA;AAInCE,sBAAsB,CAACE,KAAK,GAAG;EAC7BC,IAAI,EAAE;AACR,CAAC"}
+{"version":3,"file":"Spinner.story.js","names":["_Spinner","require","_storybookBlocklist","_default","exports","default","component","Spinner","title","tags","parameters","chromatic","disable","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","Default","args","position","story","Small","size","color","WithDelay","delay"],"sources":["../../../src/elements/Spinner/Spinner.story.tsx"],"sourcesContent":["import { Spinner } from \"./Spinner\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Spinner,\n  title: \"Components/Spinner\",\n  tags: [\"autodocs\"],\n  parameters: {\n    chromatic: { disable: true },\n    docs: {\n      description: {\n        component:\n          \"A loading spinner component with different sizes and colors, optionally with a delay before showing.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    position: \"static\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic spinner with default styling.\",\n      },\n    },\n  },\n}\n\nexport const Small = {\n  args: {\n    size: \"small\",\n    color: \"brand\",\n    position: \"static\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Small spinner with brand color.\",\n      },\n    },\n  },\n}\n\nexport const WithDelay = {\n  args: {\n    delay: 1000,\n    position: \"static\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Spinner that shows after a 1 second delay.\",\n      },\n    },\n  },\n}\n"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AAA0E,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAE3D;EACbC,SAAS,EAAEC,gBAAO;EAClBC,KAAK,EAAE,oBAAoB;EAC3BC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,SAAS,EAAE;MAAEC,OAAO,EAAE;IAAK,CAAC;IAC5BC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXR,SAAS,EACP;MACJ;IACF,CAAC;IACDS,QAAQ,EAAE;MACNC,OAAO,EAAEC;IACX;EACJ;AACF,CAAC;AAEM,IAAMC,OAAO,GAAAd,OAAA,CAAAc,OAAA,GAAG;EACrBC,IAAI,EAAE;IACJC,QAAQ,EAAE;EACZ,CAAC;EACDV,UAAU,EAAE;IACVG,IAAI,EAAE;MACJC,WAAW,EAAE;QACXO,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAEM,IAAMC,KAAK,GAAAlB,OAAA,CAAAkB,KAAA,GAAG;EACnBH,IAAI,EAAE;IACJI,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE,OAAO;IACdJ,QAAQ,EAAE;EACZ,CAAC;EACDV,UAAU,EAAE;IACVG,IAAI,EAAE;MACJC,WAAW,EAAE;QACXO,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAEM,IAAMI,SAAS,GAAArB,OAAA,CAAAqB,SAAA,GAAG;EACvBN,IAAI,EAAE;IACJO,KAAK,EAAE,IAAI;IACXN,QAAQ,EAAE;EACZ,CAAC;EACDV,UAAU,EAAE;IACVG,IAAI,EAAE;MACJC,WAAW,EAAE;QACXO,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

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

@@ -1,6 +1,50 @@
 import React from "react";
 declare const _default: {
     title: string;
+    component: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Box").BoxProps> & import("../Box").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;
+    }, import("./Stack").StackProps>> & 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: {
+        gap: number;
+        children: React.JSX.Element;
+    };
+};
+export declare const NoGap: {
+    args: {
+        gap: number;
+        children: React.JSX.Element;
+    };
+};
+export declare const SmallGap: {
+    args: {
+        gap: number;
+        children: React.JSX.Element;
+    };
+};
+export declare const HorizontalDirection: {
+    args: {
+        gap: number;
+        flexDirection: string;
+        children: React.JSX.Element;
+    };
+};
+export declare const ResponsiveGap: {
+    args: {
+        gap: number[];
+        children: React.JSX.Element;
+    };
+};

package/dist/elements/Stack/Stack.story.js

@@ -3,44 +3,92 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
+exports.default = exports.SmallGap = exports.ResponsiveGap = exports.NoGap = exports.HorizontalDirection = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _storybookStates = require("storybook-states");
 var _Stack = require("../Stack");
 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/Stack"
+  title: "Components/Stack",
+  component: _Stack.Stack,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Stack component provides a flex-based layout for arranging children with consistent spacing. Supports both vertical and horizontal arrangements with customizable gaps."
+      },
+      controls: {
+        exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
 };
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{
-      gap: 0
-    }, {
-      gap: 1
-    }, {
-      gap: 2,
-      flexDirection: "row"
-    }, {
-      gap: 2
-    }, {
-      gap: [2, 4]
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_Stack.Stack, {
-    gap: 0
-  }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "yellow100"
-  }, "1"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "yellow100"
-  }, "2"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "yellow100"
-  }, "3"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "yellow100"
-  }, "4"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "yellow100"
-  }, "5"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "yellow100"
-  }, "6")));
+var Default = exports.Default = {
+  args: {
+    gap: 2,
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "1"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "2"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "3"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "4"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "5"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "6"))
+  }
+};
+var NoGap = exports.NoGap = {
+  args: {
+    gap: 0,
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "1"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "2"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "3"))
+  }
+};
+var SmallGap = exports.SmallGap = {
+  args: {
+    gap: 1,
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "1"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "2"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "3"))
+  }
+};
+var HorizontalDirection = exports.HorizontalDirection = {
+  args: {
+    gap: 2,
+    flexDirection: "row",
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "1"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "2"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "3"))
+  }
+};
+var ResponsiveGap = exports.ResponsiveGap = {
+  args: {
+    gap: [2, 4],
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "1"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "2"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "yellow100"
+    }, "3"))
+  }
 };
-Default.displayName = "Default";
 //# sourceMappingURL=Stack.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_Stack","_Box","obj","__esModule","default","_default","exports","title","Default","createElement","States","states","gap","flexDirection","Stack","Box","bg","displayName"],"sources":["../../../src/elements/Stack/Stack.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Stack, StackProps } from \"../Stack\"\nimport { Box } from \"../Box\"\n\nexport default {\n  title: \"Components/Stack\",\n}\n\nexport const Default = () => {\n  return (\n    <States<StackProps>\n      states={[\n        { gap: 0 },\n        { gap: 1 },\n        { gap: 2, flexDirection: \"row\" },\n        { gap: 2 },\n        { gap: [2, 4] },\n      ]}\n    >\n      <Stack gap={0}>\n        <Box bg=\"yellow100\">1</Box>\n        <Box bg=\"yellow100\">2</Box>\n        <Box bg=\"yellow100\">3</Box>\n        <Box bg=\"yellow100\">4</Box>\n        <Box bg=\"yellow100\">5</Box>\n        <Box bg=\"yellow100\">6</Box>\n      </Stack>\n    </States>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,IAAA,GAAAH,OAAA;AAA4B,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEb;EACbG,KAAK,EAAE;AACT,CAAC;AAEM,IAAMC,OAAO,GAAAF,OAAA,CAAAE,OAAA,GAAG,SAAVA,OAAOA,CAAA,EAAS;EAC3B,oBACEZ,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACV,gBAAA,CAAAW,MAAM;IACLC,MAAM,EAAE,CACN;MAAEC,GAAG,EAAE;IAAE,CAAC,EACV;MAAEA,GAAG,EAAE;IAAE,CAAC,EACV;MAAEA,GAAG,EAAE,CAAC;MAAEC,aAAa,EAAE;IAAM,CAAC,EAChC;MAAED,GAAG,EAAE;IAAE,CAAC,EACV;MAAEA,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;IAAE,CAAC;EACf,gBAEFhB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACT,MAAA,CAAAc,KAAK;IAACF,GAAG,EAAE;EAAE,gBACZhB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACR,IAAA,CAAAc,GAAG;IAACC,EAAE,EAAC;EAAW,GAAC,GAAC,CAAM,eAC3BpB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACR,IAAA,CAAAc,GAAG;IAACC,EAAE,EAAC;EAAW,GAAC,GAAC,CAAM,eAC3BpB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACR,IAAA,CAAAc,GAAG;IAACC,EAAE,EAAC;EAAW,GAAC,GAAC,CAAM,eAC3BpB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACR,IAAA,CAAAc,GAAG;IAACC,EAAE,EAAC;EAAW,GAAC,GAAC,CAAM,eAC3BpB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACR,IAAA,CAAAc,GAAG;IAACC,EAAE,EAAC;EAAW,GAAC,GAAC,CAAM,eAC3BpB,MAAA,CAAAQ,OAAA,CAAAK,aAAA,CAACR,IAAA,CAAAc,GAAG;IAACC,EAAE,EAAC;EAAW,GAAC,GAAC,CAAM,CACrB,CACD;AAEb,CAAC;AArBYR,OAAO,CAAAS,WAAA"}
+{"version":3,"file":"Stack.story.js","names":["_react","_interopRequireDefault","require","_Stack","_Box","_storybookBlocklist","obj","__esModule","default","_default","exports","title","component","Stack","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","Default","args","gap","children","createElement","Fragment","Box","bg","NoGap","SmallGap","HorizontalDirection","flexDirection","ResponsiveGap"],"sources":["../../../src/elements/Stack/Stack.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Stack } from \"../Stack\"\nimport { Box } from \"../Box\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  title: \"Components/Stack\",\n  component: Stack,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Stack component provides a flex-based layout for arranging children with consistent spacing. Supports both vertical and horizontal arrangements with customizable gaps.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    gap: 2,\n    children: (\n      <>\n        <Box bg=\"yellow100\">1</Box>\n        <Box bg=\"yellow100\">2</Box>\n        <Box bg=\"yellow100\">3</Box>\n        <Box bg=\"yellow100\">4</Box>\n        <Box bg=\"yellow100\">5</Box>\n        <Box bg=\"yellow100\">6</Box>\n      </>\n    ),\n  },\n}\n\nexport const NoGap = {\n  args: {\n    gap: 0,\n    children: (\n      <>\n        <Box bg=\"yellow100\">1</Box>\n        <Box bg=\"yellow100\">2</Box>\n        <Box bg=\"yellow100\">3</Box>\n      </>\n    ),\n  },\n}\n\nexport const SmallGap = {\n  args: {\n    gap: 1,\n    children: (\n      <>\n        <Box bg=\"yellow100\">1</Box>\n        <Box bg=\"yellow100\">2</Box>\n        <Box bg=\"yellow100\">3</Box>\n      </>\n    ),\n  },\n}\n\nexport const HorizontalDirection = {\n  args: {\n    gap: 2,\n    flexDirection: \"row\",\n    children: (\n      <>\n        <Box bg=\"yellow100\">1</Box>\n        <Box bg=\"yellow100\">2</Box>\n        <Box bg=\"yellow100\">3</Box>\n      </>\n    ),\n  },\n}\n\nexport const ResponsiveGap = {\n  args: {\n    gap: [2, 4],\n    children: (\n      <>\n        <Box bg=\"yellow100\">1</Box>\n        <Box bg=\"yellow100\">2</Box>\n        <Box bg=\"yellow100\">3</Box>\n      </>\n    ),\n  },\n}\n"],"mappings":"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"}

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

@@ -1,6 +1,29 @@
 import React from "react";
 declare const _default: {
+    component: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<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>, import("..").BorderBoxProps>> & 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: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

package/dist/elements/StackableBorderBox/StackableBorderBox.story.js

@@ -9,17 +9,36 @@ var _StackableBorderBox = require("./StackableBorderBox");
 var _Avatar = require("../Avatar/Avatar");
 var _Flex = require("../Flex");
 var _Button = require("../Button");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = exports.default = {
-  title: "Components/StackableBorderBox"
+  component: _StackableBorderBox.StackableBorderBox,
+  title: "Components/StackableBorderBox",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A bordered container component designed to be stacked with other border boxes."
+      }
+    },
+    controls: {
+      exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
 };
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StackableBorderBox.StackableBorderBox, null, /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
-    size: "xs",
-    src: "https://picsum.photos/seed/example/110/110"
-  })), /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
-    size: "xs",
-    src: "https://picsum.photos/seed/example/110/110"
-  })), /*#__PURE__*/_react.default.createElement(_Button.Button, null, "Click me"))), /*#__PURE__*/_react.default.createElement(_StackableBorderBox.StackableBorderBox, null, "2"), /*#__PURE__*/_react.default.createElement(_StackableBorderBox.StackableBorderBox, null, "3"), /*#__PURE__*/_react.default.createElement(_StackableBorderBox.StackableBorderBox, null, "4"));
+var Default = exports.Default = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StackableBorderBox.StackableBorderBox, null, /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
+      size: "xs",
+      src: "https://picsum.photos/seed/example/110/110"
+    }), /*#__PURE__*/_react.default.createElement(_Button.Button, null, "Click me"))), /*#__PURE__*/_react.default.createElement(_StackableBorderBox.StackableBorderBox, null, "Second Box"), /*#__PURE__*/_react.default.createElement(_StackableBorderBox.StackableBorderBox, null, "Third Box"), /*#__PURE__*/_react.default.createElement(_StackableBorderBox.StackableBorderBox, null, "Fourth Box"));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Multiple stackable border boxes demonstrating visual connection."
+      }
+    }
+  }
 };
 //# sourceMappingURL=StackableBorderBox.story.js.map