@artsy/palette 44.0.1 → 44.2.0

package/dist/elements/Input/Input.story.js

@@ -1,121 +1,123 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithState = exports.Styled = exports.Required = exports.Default = exports.CustomHeight = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _storybookStates = require("storybook-states");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _Button = require("../Button");
+exports.default = exports.WithTitle = exports.WithMaxLength = exports.WithError = exports.WithDescription = exports.WithCounter = exports.RequiredField = exports.LongTitle = exports.HoverState = exports.FocusState = exports.EmailInput = exports.Disabled = exports.CustomWidth = exports.CustomHeight = exports.Basic = exports.ActiveState = void 0;
 var _Input = require("./Input");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 var _default = exports.default = {
-  title: "Components/Input"
-};
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{}, {
-      title: "Your offer",
-      name: "offer"
-    }, {
-      focus: true
-    }, {
-      hover: true
-    }, {
-      active: true
-    }, {
-      error: "Something went wrong."
-    }, {
-      disabled: true
-    }, {
-      disabled: true,
-      value: "Example value"
-    }, {
-      title: "Your offer with a big title",
-      name: "offer-big-title"
-    }, {
-      title: "Your offer with a really really long title",
-      name: "offer-really-long-title"
-    }, {
-      title: "Your offer",
-      required: true
-    }, {
-      title: "Your offer",
-      maxLength: 50
-    }, {
-      title: "Your offer",
-      required: true,
-      maxLength: 50,
-      showCounter: true
-    }, {
-      title: "Your offer",
-      description: "This is my description"
-    }, {
-      width: "50%"
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
-    placeholder: "Start typing\u2026"
-  }));
-};
-Default.displayName = "Default";
-var StyledInput = (0, _styledComponents.default)(_Input.Input).withConfig({
-  displayName: "Inputstory__StyledInput",
-  componentId: "sc-f9xdyp-0"
-})(["border:1px solid red;> input{border:2px solid green;}"]);
-var Styled = exports.Styled = function Styled() {
-  return /*#__PURE__*/_react.default.createElement(StyledInput, {
-    placeholder: "style should target container div"
-  });
-};
-Styled.displayName = "Styled";
-var Required = exports.Required = function Required() {
-  return /*#__PURE__*/_react.default.createElement("form", null, /*#__PURE__*/_react.default.createElement(_Input.Input, {
-    title: "Example",
+  title: "Components/Input",
+  component: _Input.Input,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Input component provides a text input field with built-in validation, error states, and accessibility features. Supports titles, placeholders, required fields, and character limits."
+      },
+      controls: {
+        exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+var Basic = exports.Basic = {
+  args: {
+    placeholder: "Enter text here"
+  }
+};
+var WithTitle = exports.WithTitle = {
+  args: {
+    title: "Your Name",
+    placeholder: "Enter your name"
+  }
+};
+var RequiredField = exports.RequiredField = {
+  args: {
+    title: "Email Address",
     required: true,
-    placeholder: "Submission should be blocked unless this has a value"
-  }), /*#__PURE__*/_react.default.createElement(_Input.Input, {
-    mt: 1,
-    title: "Email",
+    placeholder: "Enter your email"
+  }
+};
+var WithError = exports.WithError = {
+  args: {
+    title: "Your Offer",
+    error: "This field is required",
+    value: "Invalid input"
+  }
+};
+var Disabled = exports.Disabled = {
+  args: {
+    title: "Disabled Input",
+    disabled: true,
+    value: "Cannot edit this"
+  }
+};
+var WithMaxLength = exports.WithMaxLength = {
+  args: {
+    title: "Short Message",
+    maxLength: 50,
+    placeholder: "Maximum 50 characters"
+  }
+};
+var WithDescription = exports.WithDescription = {
+  args: {
+    title: "Your Offer",
+    description: "This is my description",
+    placeholder: "Start typing..."
+  }
+};
+var WithCounter = exports.WithCounter = {
+  args: {
+    title: "Your Offer",
     required: true,
-    placeholder: "Requires a valid email",
-    type: "email"
-  }), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    mt: 1
-  }, "Submit"));
-};
-Required.displayName = "Required";
-var WithState = exports.WithState = function WithState() {
-  var _useState = (0, _react.useState)(""),
-    _useState2 = _slicedToArray(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  return /*#__PURE__*/_react.default.createElement(_Input.Input, {
-    title: "Example",
-    value: value,
-    onChange: function onChange(e) {
-      return setValue(e.currentTarget.value);
-    },
-    placeholder: "Start typing\u2026",
     maxLength: 50,
-    showCounter: true
-  });
+    showCounter: true,
+    placeholder: "Start typing..."
+  }
+};
+var LongTitle = exports.LongTitle = {
+  args: {
+    title: "Your offer with a really really long title",
+    placeholder: "Start typing..."
+  }
+};
+var CustomWidth = exports.CustomWidth = {
+  args: {
+    width: "50%",
+    placeholder: "Start typing..."
+  }
 };
-WithState.displayName = "WithState";
-var CustomHeight = exports.CustomHeight = function CustomHeight() {
-  return /*#__PURE__*/_react.default.createElement(_Input.Input, {
+var EmailInput = exports.EmailInput = {
+  args: {
+    title: "Email",
+    type: "email",
+    required: true,
+    placeholder: "Enter your email address"
+  }
+};
+var CustomHeight = exports.CustomHeight = {
+  args: {
     height: 40,
     placeholder: "Input is 40px in height"
-  });
+  }
+};
+var FocusState = exports.FocusState = {
+  args: {
+    focus: true,
+    placeholder: "This input is focused"
+  }
+};
+var HoverState = exports.HoverState = {
+  args: {
+    hover: true,
+    placeholder: "This input is hovered"
+  }
+};
+var ActiveState = exports.ActiveState = {
+  args: {
+    active: true,
+    placeholder: "This input is active"
+  }
 };
-CustomHeight.displayName = "CustomHeight";
 //# sourceMappingURL=Input.story.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.story.js","names":["_react","_interopRequireWildcard","require","_storybookStates","_styledComponents","_interopRequireDefault","_Button","_Input","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_default","exports","title","Default","createElement","States","states","focus","hover","active","error","disabled","required","maxLength","showCounter","description","width","Input","placeholder","displayName","StyledInput","styled","withConfig","componentId","Styled","Required","mt","type","Button","WithState","_useState","useState","_useState2","setValue","onChange","e","currentTarget","CustomHeight","height"],"sources":["../../../src/elements/Input/Input.story.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Button } from \"../Button\"\nimport { Input, InputProps } from \"./Input\"\n\nexport default {\n  title: \"Components/Input\",\n}\n\nexport const Default = () => {\n  return (\n    <States<InputProps>\n      states={[\n        {},\n        { title: \"Your offer\", name: \"offer\" },\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { error: \"Something went wrong.\" },\n        { disabled: true },\n        { disabled: true, value: \"Example value\" },\n        { title: \"Your offer with a big title\", name: \"offer-big-title\" },\n        {\n          title: \"Your offer with a really really long title\",\n          name: \"offer-really-long-title\",\n        },\n        { title: \"Your offer\", required: true },\n        { title: \"Your offer\", maxLength: 50 },\n        {\n          title: \"Your offer\",\n          required: true,\n          maxLength: 50,\n          showCounter: true,\n        },\n        { title: \"Your offer\", description: \"This is my description\" },\n        { width: \"50%\" },\n      ]}\n    >\n      <Input placeholder=\"Start typing…\" />\n    </States>\n  )\n}\n\nconst StyledInput = styled(Input)`\n  border: 1px solid red;\n\n  > input {\n    border: 2px solid green;\n  }\n`\n\nexport const Styled = () => {\n  return <StyledInput placeholder=\"style should target container div\" />\n}\n\nexport const Required = () => {\n  return (\n    <form>\n      <Input\n        title=\"Example\"\n        required\n        placeholder=\"Submission should be blocked unless this has a value\"\n      />\n\n      <Input\n        mt={1}\n        title=\"Email\"\n        required\n        placeholder=\"Requires a valid email\"\n        type=\"email\"\n      />\n\n      <Button mt={1}>Submit</Button>\n    </form>\n  )\n}\n\nexport const WithState = () => {\n  const [value, setValue] = useState(\"\")\n\n  return (\n    <Input\n      title=\"Example\"\n      value={value}\n      onChange={(e) => setValue(e.currentTarget.value)}\n      placeholder=\"Start typing…\"\n      maxLength={50}\n      showCounter\n    />\n  )\n}\n\nexport const CustomHeight = () => {\n  return <Input height={40} placeholder=\"Input is 40px in height\" />\n}\n"],"mappings":"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"}
+{"version":3,"file":"Input.story.js","names":["_Input","require","_storybookBlocklist","_default","exports","default","title","component","Input","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","Basic","args","placeholder","WithTitle","RequiredField","required","WithError","error","value","Disabled","disabled","WithMaxLength","maxLength","WithDescription","WithCounter","showCounter","LongTitle","CustomWidth","width","EmailInput","type","CustomHeight","height","FocusState","focus","HoverState","hover","ActiveState","active"],"sources":["../../../src/elements/Input/Input.story.tsx"],"sourcesContent":["import { Input } from \"./Input\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  title: \"Components/Input\",\n  component: Input,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Input component provides a text input field with built-in validation, error states, and accessibility features. Supports titles, placeholders, required fields, and character limits.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Basic = {\n  args: {\n    placeholder: \"Enter text here\",\n  },\n}\n\nexport const WithTitle = {\n  args: {\n    title: \"Your Name\",\n    placeholder: \"Enter your name\",\n  },\n}\n\nexport const RequiredField = {\n  args: {\n    title: \"Email Address\",\n    required: true,\n    placeholder: \"Enter your email\",\n  },\n}\n\nexport const WithError = {\n  args: {\n    title: \"Your Offer\",\n    error: \"This field is required\",\n    value: \"Invalid input\",\n  },\n}\n\nexport const Disabled = {\n  args: {\n    title: \"Disabled Input\",\n    disabled: true,\n    value: \"Cannot edit this\",\n  },\n}\n\nexport const WithMaxLength = {\n  args: {\n    title: \"Short Message\",\n    maxLength: 50,\n    placeholder: \"Maximum 50 characters\",\n  },\n}\n\nexport const WithDescription = {\n  args: {\n    title: \"Your Offer\",\n    description: \"This is my description\",\n    placeholder: \"Start typing...\",\n  },\n}\n\nexport const WithCounter = {\n  args: {\n    title: \"Your Offer\",\n    required: true,\n    maxLength: 50,\n    showCounter: true,\n    placeholder: \"Start typing...\",\n  },\n}\n\nexport const LongTitle = {\n  args: {\n    title: \"Your offer with a really really long title\",\n    placeholder: \"Start typing...\",\n  },\n}\n\nexport const CustomWidth = {\n  args: {\n    width: \"50%\",\n    placeholder: \"Start typing...\",\n  },\n}\n\nexport const EmailInput = {\n  args: {\n    title: \"Email\",\n    type: \"email\",\n    required: true,\n    placeholder: \"Enter your email address\",\n  },\n}\n\nexport const CustomHeight = {\n  args: {\n    height: 40,\n    placeholder: \"Input is 40px in height\",\n  },\n}\n\nexport const FocusState = {\n  args: {\n    focus: true,\n    placeholder: \"This input is focused\",\n  },\n}\n\nexport const HoverState = {\n  args: {\n    hover: true,\n    placeholder: \"This input is hovered\",\n  },\n}\n\nexport const ActiveState = {\n  args: {\n    active: true,\n    placeholder: \"This input is active\",\n  },\n}\n"],"mappings":"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"}

package/dist/elements/Join/Join.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-interface JoinProps {
+export interface JoinProps {
     separator: React.ReactElement<any>;
 }
 /**
@@ -23,4 +23,3 @@ interface JoinProps {
  * <child3/>
  */
 export declare const Join: React.FC<React.PropsWithChildren<JoinProps>>;
-export {};

package/dist/elements/Join/Join.js.map

@@ -1 +1 @@
-{"version":3,"file":"Join.js","names":["_react","_interopRequireDefault","require","_flattenChildren","obj","__esModule","default","Join","exports","_ref","separator","children","elements","flattenChildren","createElement","Fragment","reduce","acc","element","currentIndex","push","React","cloneElement","key","concat","length"],"sources":["../../../src/elements/Join/Join.tsx"],"sourcesContent":["import React from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\n\ninterface JoinProps {\n  separator: React.ReactElement<any>\n}\n\n/**\n * `Join` is a higher order component that renders a separator component\n * between each of `Join`'s direct children.\n *\n * @example\n *\n *  <Join separator={<SomeComponent/>}>\n *    <child1/>\n *    <child2/>\n *    <child3/>\n *  </Join>\n *\n * which renders\n *\n * <child1/>\n * <SomeComponent/>\n * <child2/>\n * <SomeComponent/>\n * <child3/>\n */\nexport const Join: React.FC<React.PropsWithChildren<JoinProps>> = ({ separator, children }) => {\n  const elements = flattenChildren(children)\n\n  return (\n    <>\n      {elements.reduce((acc, element, currentIndex) => {\n        acc.push(\n          // @ts-expect-error  MIGRATE_STRICT_MODE\n          React.cloneElement(element, {\n            key: `join-${currentIndex}`,\n          })\n        )\n\n        if (currentIndex !== elements.length - 1) {\n          acc.push(\n            // @ts-expect-error  MIGRATE_STRICT_MODE\n            separator &&\n              React.cloneElement(separator, {\n                key: `join-sep-${currentIndex}`,\n              })\n          )\n        }\n\n        return acc\n      }, [])}\n    </>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAA+D,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAM/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMG,IAAkD,GAAAC,OAAA,CAAAD,IAAA,GAAG,SAArDA,IAAkDA,CAAAE,IAAA,EAAgC;EAAA,IAA1BC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;EACtF,IAAMC,QAAQ,GAAG,IAAAC,gCAAe,EAACF,QAAQ,CAAC;EAE1C,oBACEX,MAAA,CAAAM,OAAA,CAAAQ,aAAA,CAAAd,MAAA,CAAAM,OAAA,CAAAS,QAAA,QACGH,QAAQ,CAACI,MAAM,CAAC,UAACC,GAAG,EAAEC,OAAO,EAAEC,YAAY,EAAK;IAC/CF,GAAG,CAACG,IAAI;IAAA;IACN;IACAC,cAAK,CAACC,YAAY,CAACJ,OAAO,EAAE;MAC1BK,GAAG,UAAAC,MAAA,CAAUL,YAAY;IAC3B,CAAC,CAAC,CACH;IAED,IAAIA,YAAY,KAAKP,QAAQ,CAACa,MAAM,GAAG,CAAC,EAAE;MACxCR,GAAG,CAACG,IAAI;MACN;MACAV,SAAS,iBACPW,cAAK,CAACC,YAAY,CAACZ,SAAS,EAAE;QAC5Ba,GAAG,cAAAC,MAAA,CAAcL,YAAY;MAC/B,CAAC,CAAC,CACL;IACH;IAEA,OAAOF,GAAG;EACZ,CAAC,EAAE,EAAE,CAAC,CACL;AAEP,CAAC"}
+{"version":3,"file":"Join.js","names":["_react","_interopRequireDefault","require","_flattenChildren","obj","__esModule","default","Join","exports","_ref","separator","children","elements","flattenChildren","createElement","Fragment","reduce","acc","element","currentIndex","push","React","cloneElement","key","concat","length"],"sources":["../../../src/elements/Join/Join.tsx"],"sourcesContent":["import React from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\n\nexport interface JoinProps {\n  separator: React.ReactElement<any>\n}\n\n/**\n * `Join` is a higher order component that renders a separator component\n * between each of `Join`'s direct children.\n *\n * @example\n *\n *  <Join separator={<SomeComponent/>}>\n *    <child1/>\n *    <child2/>\n *    <child3/>\n *  </Join>\n *\n * which renders\n *\n * <child1/>\n * <SomeComponent/>\n * <child2/>\n * <SomeComponent/>\n * <child3/>\n */\nexport const Join: React.FC<React.PropsWithChildren<JoinProps>> = ({\n  separator,\n  children,\n}) => {\n  const elements = flattenChildren(children)\n\n  return (\n    <>\n      {elements.reduce((acc, element, currentIndex) => {\n        acc.push(\n          // @ts-expect-error  MIGRATE_STRICT_MODE\n          React.cloneElement(element, {\n            key: `join-${currentIndex}`,\n          })\n        )\n\n        if (currentIndex !== elements.length - 1) {\n          acc.push(\n            // @ts-expect-error  MIGRATE_STRICT_MODE\n            separator &&\n              React.cloneElement(separator, {\n                key: `join-sep-${currentIndex}`,\n              })\n          )\n        }\n\n        return acc\n      }, [])}\n    </>\n  )\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAA+D,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAM/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMG,IAAkD,GAAAC,OAAA,CAAAD,IAAA,GAAG,SAArDA,IAAkDA,CAAAE,IAAA,EAGzD;EAAA,IAFJC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;EAER,IAAMC,QAAQ,GAAG,IAAAC,gCAAe,EAACF,QAAQ,CAAC;EAE1C,oBACEX,MAAA,CAAAM,OAAA,CAAAQ,aAAA,CAAAd,MAAA,CAAAM,OAAA,CAAAS,QAAA,QACGH,QAAQ,CAACI,MAAM,CAAC,UAACC,GAAG,EAAEC,OAAO,EAAEC,YAAY,EAAK;IAC/CF,GAAG,CAACG,IAAI;IAAA;IACN;IACAC,cAAK,CAACC,YAAY,CAACJ,OAAO,EAAE;MAC1BK,GAAG,UAAAC,MAAA,CAAUL,YAAY;IAC3B,CAAC,CAAC,CACH;IAED,IAAIA,YAAY,KAAKP,QAAQ,CAACa,MAAM,GAAG,CAAC,EAAE;MACxCR,GAAG,CAACG,IAAI;MACN;MACAV,SAAS,iBACPW,cAAK,CAACC,YAAY,CAACZ,SAAS,EAAE;QAC5Ba,GAAG,cAAAC,MAAA,CAAcL,YAAY;MAC/B,CAAC,CAAC,CACL;IACH;IAEA,OAAOF,GAAG;EACZ,CAAC,EAAE,EAAE,CAAC,CACL;AAEP,CAAC"}

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

@@ -1,24 +1,69 @@
 import React from "react";
 declare const _default: {
+    component: React.FC<React.PropsWithChildren<import("./Join").JoinProps>>;
     title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        controls: {
+            exclude: string[];
+        };
+    };
 };
 export default _default;
 export declare const WithMultipleComponents: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    args: {
+        separator: React.JSX.Element;
+        children: React.JSX.Element[];
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };
 export declare const WithOneComponent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    args: {
+        separator: React.JSX.Element;
+        children: React.JSX.Element;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };
 export declare const WithSomeOfTheChildrenEmpty: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    args: {
+        separator: React.JSX.Element;
+        children: React.JSX.Element[];
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const WithNestedChildren: {
+    args: {
+        separator: React.JSX.Element;
+        children: React.JSX.Element[];
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
     };
 };
-export declare const WithNestedChildren: () => React.JSX.Element;

package/dist/elements/Join/Join.story.js

@@ -10,6 +10,7 @@ var _Box = require("../Box");
 var _Separator = require("../Separator");
 var _Text = require("../Text");
 var _Join = require("./Join");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -85,75 +86,138 @@ var NonBlankComponent = /*#__PURE__*/function (_Component2) {
 }(_react.Component);
 NonBlankComponent.displayName = "NonBlankComponent";
 var _default = exports.default = {
-  title: "Components/Join"
+  component: _Join.Join,
+  title: "Components/Join",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A utility component that joins child elements with a separator, filtering out null/undefined children."
+      }
+    },
+    controls: {
+      exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
 };
-var WithMultipleComponents = exports.WithMultipleComponents = function WithMultipleComponents() {
-  return /*#__PURE__*/_react.default.createElement(_Join.Join, {
+var WithMultipleComponents = exports.WithMultipleComponents = {
+  args: {
     separator: /*#__PURE__*/_react.default.createElement(_Separator.Separator, {
       my: 1
-    })
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "First in the list"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "Second in the list"));
-};
-WithMultipleComponents.displayName = "WithMultipleComponents";
-WithMultipleComponents.story = {
-  name: "with multiple components"
+    }),
+    children: [/*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: "1",
+      variant: "sm-display"
+    }, "First in the list"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: "2",
+      variant: "sm-display"
+    }, "Second in the list")]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Join component with multiple children separated by a separator."
+      }
+    }
+  }
 };
-var WithOneComponent = exports.WithOneComponent = function WithOneComponent() {
-  return /*#__PURE__*/_react.default.createElement(_Join.Join, {
+var WithOneComponent = exports.WithOneComponent = {
+  args: {
     separator: /*#__PURE__*/_react.default.createElement(_Separator.Separator, {
       my: 1
-    })
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "Only one component here"));
-};
-WithOneComponent.displayName = "WithOneComponent";
-WithOneComponent.story = {
-  name: "with one component"
+    }),
+    children: /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "sm-display"
+    }, "Only one component here")
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Join component with a single child (no separator shown)."
+      }
+    }
+  }
 };
-var WithSomeOfTheChildrenEmpty = exports.WithSomeOfTheChildrenEmpty = function WithSomeOfTheChildrenEmpty() {
-  return /*#__PURE__*/_react.default.createElement(_Join.Join, {
+var WithSomeOfTheChildrenEmpty = exports.WithSomeOfTheChildrenEmpty = {
+  args: {
     separator: /*#__PURE__*/_react.default.createElement(_Separator.Separator, {
       my: 1
-    })
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "First in the list"), /*#__PURE__*/_react.default.createElement(BlankFunction, null), /*#__PURE__*/_react.default.createElement(NonBlankFunction, null), /*#__PURE__*/_react.default.createElement(BlankFC, null), /*#__PURE__*/_react.default.createElement(NonBlankFC, null), /*#__PURE__*/_react.default.createElement(BlankComponent, null), /*#__PURE__*/_react.default.createElement(NonBlankComponent, null), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    m: "2"
-  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "Some div with the content")), /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "Another box with content"), /*#__PURE__*/_react.default.createElement("div", null));
-};
-WithSomeOfTheChildrenEmpty.displayName = "WithSomeOfTheChildrenEmpty";
-WithSomeOfTheChildrenEmpty.story = {
-  name: "with some of the children empty"
+    }),
+    children: [/*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: "1",
+      variant: "sm-display"
+    }, "First in the list"), /*#__PURE__*/_react.default.createElement(BlankFunction, {
+      key: "2"
+    }), /*#__PURE__*/_react.default.createElement(NonBlankFunction, {
+      key: "3"
+    }), /*#__PURE__*/_react.default.createElement(BlankFC, {
+      key: "4"
+    }), /*#__PURE__*/_react.default.createElement(NonBlankFC, {
+      key: "5"
+    }), /*#__PURE__*/_react.default.createElement(BlankComponent, {
+      key: "6"
+    }), /*#__PURE__*/_react.default.createElement(NonBlankComponent, {
+      key: "7"
+    }), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      key: "8",
+      m: "2"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      key: "9"
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "sm-display"
+    }, "Some div with the content")), /*#__PURE__*/_react.default.createElement("div", {
+      key: "10"
+    }), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: "11",
+      variant: "sm-display"
+    }, "Another box with content"), /*#__PURE__*/_react.default.createElement("div", {
+      key: "12"
+    })]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Join component that filters out null/empty children and only shows separators between visible content."
+      }
+    }
+  }
 };
-var WithNestedChildren = exports.WithNestedChildren = function WithNestedChildren() {
-  return /*#__PURE__*/_react.default.createElement(_Join.Join, {
+var WithNestedChildren = exports.WithNestedChildren = {
+  args: {
     separator: /*#__PURE__*/_react.default.createElement(_Separator.Separator, {
       my: 1
-    })
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "First in the list"), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "Second in the list"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "Third in the list"), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "Fourth in the list"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "Fifth in the list")), /*#__PURE__*/_react.default.createElement(_Box.Box, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "These two lines"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display"
-  }, "Are grouped")), /*#__PURE__*/_react.default.createElement(_Text.Text, null, "End of list")));
+    }),
+    children: [/*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: "1",
+      variant: "sm-display"
+    }, "First in the list"), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: "2",
+      variant: "sm-display"
+    }, "Second in the list"), ",", /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: "3",
+      variant: "sm-display"
+    }, "Third in the list"), ",", /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: "4",
+      variant: "sm-display"
+    }, "Fourth in the list"), ",", /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: "5",
+      variant: "sm-display"
+    }, "Fifth in the list"), ","), ",", /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      key: "6"
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "sm-display"
+    }, "These two lines"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "sm-display"
+    }, "Are grouped")), ",", /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      key: "7"
+    }, "End of list"), ",")]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Join component with nested children and groups, showing separators only between visible content."
+      }
+    }
+  }
 };
-WithNestedChildren.displayName = "WithNestedChildren";
 //# sourceMappingURL=Join.story.js.map