@artsy/palette 44.1.0 → 44.2.0

package/dist/elements/ModalDialog/ModalDialogContent.story.js

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
+exports.default = exports.WithTitleAndLogo = exports.WithTitleAndFooter = exports.WithTitle = exports.WithLongTitle = exports.WithLogo = exports.WithFooter = exports.ShortContent = exports.Default = exports.CustomHeader = exports.Complete = void 0;
 var _test = require("@storybook/test");
 var _react = _interopRequireDefault(require("react"));
-var _storybookStates = require("storybook-states");
 var _ModalDialogContent = require("./ModalDialogContent");
 var _Text = require("../Text");
 var _Button = require("../Button");
@@ -17,59 +16,195 @@ var _Box = require("../Box");
 var _ChevronLeftIcon = _interopRequireDefault(require("@artsy/icons/ChevronLeftIcon"));
 var _ArtsyLogoIcon = _interopRequireDefault(require("@artsy/icons/ArtsyLogoIcon"));
 var _CloseIcon = _interopRequireDefault(require("@artsy/icons/CloseIcon"));
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = exports.default = {
-  title: "Components/ModalDialogContent"
+  component: _ModalDialogContent.ModalDialogContent,
+  title: "Components/ModalDialogContent",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Content component for modal dialogs with title, body, and action sections."
+      },
+      controls: {
+        exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
 };
-var EXAMPLE_LONG_NAME = "Egypt, Thebes, Wadi Qubbanet el-Qirud, New Kingdom, Late Dynasty 18 or early Dynasty 19";
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{
-      children: /*#__PURE__*/_react.default.createElement(_Text.Text, {
-        variant: "sm",
-        bg: "mono10"
-      }, "Content shorter than width")
-    }, {
-      children: /*#__PURE__*/_react.default.createElement(_Text.Text, {
-        variant: "sm"
-      }, "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur?")
-    }, {
-      title: "Modal Title"
-    }, {
-      title: "Modal Title with a longer title or headline text that runs on for mutliple lines"
-    }, {
-      title: "Pneumonoultramicroscopicsilicovolcanoconiosis"
-    }, {
-      title: "Sign up to discover new works by ".concat(EXAMPLE_LONG_NAME, " and more artists you love")
-    }, {
-      hasLogo: true
-    }, {
+var modalContent = /*#__PURE__*/_react.default.createElement(_Join.Join, {
+  separator: /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+    y: 1
+  })
+}, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+  variant: "sm"
+}, "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur?"), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+  placeholder: "Enter your name",
+  autoComplete: "name"
+}), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+  placeholder: "Enter your email",
+  type: "email",
+  autoComplete: "email"
+}));
+var Default = exports.Default = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, {
+      onClose: (0, _test.fn)(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic modal dialog content without title or footer."
+      }
+    }
+  }
+};
+var ShortContent = exports.ShortContent = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, {
+      onClose: (0, _test.fn)(),
+      maxHeight: 400
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "sm",
+      bg: "mono10"
+    }, "Content shorter than width"));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal with short content."
+      }
+    }
+  }
+};
+var WithTitle = exports.WithTitle = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, {
       title: "Modal Title",
-      hasLogo: true
-    }, {
-      children: /*#__PURE__*/_react.default.createElement(_Text.Text, {
-        variant: "sm"
-      }, "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur?"),
-      footer: /*#__PURE__*/_react.default.createElement(_Button.Button, {
-        width: "100%"
-      }, "Confirm")
-    }, {
+      onClose: (0, _test.fn)(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal dialog with a title."
+      }
+    }
+  }
+};
+var WithLongTitle = exports.WithLongTitle = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, {
+      title: "Modal Title with a longer title or headline text that runs on for multiple lines",
+      onClose: (0, _test.fn)(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal dialog with a long title that wraps to multiple lines."
+      }
+    }
+  }
+};
+var WithLogo = exports.WithLogo = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, {
+      hasLogo: true,
+      onClose: (0, _test.fn)(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal dialog with logo displayed."
+      }
+    }
+  }
+};
+var WithTitleAndLogo = exports.WithTitleAndLogo = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, {
       title: "Modal Title",
+      hasLogo: true,
+      onClose: (0, _test.fn)(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal dialog with both title and logo."
+      }
+    }
+  }
+};
+var WithFooter = exports.WithFooter = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, {
       footer: /*#__PURE__*/_react.default.createElement(_Button.Button, {
         width: "100%"
-      }, "Confirm")
-    }, {
-      title: "Modal Title with a longer title or headline text that runs on for mutliple lines",
+      }, "Confirm"),
+      onClose: (0, _test.fn)(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal dialog with footer action button."
+      }
+    }
+  }
+};
+var WithTitleAndFooter = exports.WithTitleAndFooter = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, {
+      title: "Modal Title",
       footer: /*#__PURE__*/_react.default.createElement(_Button.Button, {
         width: "100%"
-      }, "Confirm")
-    }, {
-      title: "Modal Title with a longer title or headline text that runs on for mutliple lines",
+      }, "Confirm"),
+      onClose: (0, _test.fn)(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal dialog with title and footer button."
+      }
+    }
+  }
+};
+var Complete = exports.Complete = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, {
+      title: "Modal Title with a longer title or headline text that runs on for multiple lines",
       hasLogo: true,
       footer: /*#__PURE__*/_react.default.createElement(_Button.Button, {
         width: "100%"
-      }, "Confirm")
-    }, {
+      }, "Confirm"),
+      onClose: (0, _test.fn)(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Complete modal dialog with title, logo, content, and footer."
+      }
+    }
+  }
+};
+var CustomHeader = exports.CustomHeader = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, {
       title: /*#__PURE__*/_react.default.createElement(_Box.Box, {
         display: "flex",
         alignItems: "center",
@@ -77,27 +212,17 @@ var Default = exports.Default = function Default() {
         p: 2
       }, /*#__PURE__*/_react.default.createElement(_ChevronLeftIcon.default, null), /*#__PURE__*/_react.default.createElement(_ArtsyLogoIcon.default, {
         height: 30
-      }), /*#__PURE__*/_react.default.createElement(_CloseIcon.default, null))
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, {
-    onClose: (0, _test.fn)(),
-    maxHeight: 400
-  }, /*#__PURE__*/_react.default.createElement(_Join.Join, {
-    separator: /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
-      y: 1
-    })
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm"
-  }, "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae nihil minima praesentium, quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam."), /*#__PURE__*/_react.default.createElement(_Input.Input, {
-    placeholder: "Enter your name",
-    autoComplete: "name"
-  }), /*#__PURE__*/_react.default.createElement(_Input.Input, {
-    placeholder: "Enter your email",
-    type: "email",
-    autoComplete: "email"
-  }), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm"
-  }, "Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae nihil minima praesentium, quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae nihil minima praesentium, quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae nihil minima praesentium, quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore!"))));
+      }), /*#__PURE__*/_react.default.createElement(_CloseIcon.default, null)),
+      onClose: (0, _test.fn)(),
+      maxHeight: 400
+    }, modalContent);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Modal dialog with custom header containing navigation icons."
+      }
+    }
+  }
 };
-Default.displayName = "Default";
 //# sourceMappingURL=ModalDialogContent.story.js.map

package/dist/elements/ModalDialog/ModalDialogContent.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDialogContent.story.js","names":["_test","require","_react","_interopRequireDefault","_storybookStates","_ModalDialogContent","_Text","_Button","_Input","_Join","_Spacer","_Box","_ChevronLeftIcon","_ArtsyLogoIcon","_CloseIcon","obj","__esModule","default","_default","exports","title","EXAMPLE_LONG_NAME","Default","createElement","States","states","children","Text","variant","bg","concat","hasLogo","footer","Button","width","Box","display","alignItems","justifyContent","p","height","ModalDialogContent","onClose","fn","maxHeight","Join","separator","Spacer","y","Input","placeholder","autoComplete","type","displayName"],"sources":["../../../src/elements/ModalDialog/ModalDialogContent.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport {\n  ModalDialogContent,\n  ModalDialogContentProps,\n} from \"./ModalDialogContent\"\nimport { Text } from \"../Text\"\nimport { Button } from \"../Button\"\nimport { Input } from \"../Input\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Box } from \"../Box\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ArtsyLogoIcon from \"@artsy/icons/ArtsyLogoIcon\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\n\nexport default {\n  title: \"Components/ModalDialogContent\",\n}\n\nconst EXAMPLE_LONG_NAME =\n  \"Egypt, Thebes, Wadi Qubbanet el-Qirud, New Kingdom, Late Dynasty 18 or early Dynasty 19\"\n\nexport const Default = () => {\n  return (\n    <States<Partial<ModalDialogContentProps>>\n      states={[\n        {\n          children: (\n            <Text variant=\"sm\" bg=\"mono10\">\n              Content shorter than width\n            </Text>\n          ),\n        },\n        {\n          children: (\n            <Text variant=\"sm\">\n              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque,\n              neque voluptates! Sapiente, sint magnam. Assumenda, hic eius\n              asperiores iure explicabo itaque accusantium, consectetur aut sit\n              maxime culpa ab aliquid consequatur?\n            </Text>\n          ),\n        },\n        { title: \"Modal Title\" },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n        },\n        { title: \"Pneumonoultramicroscopicsilicovolcanoconiosis\" },\n        {\n          title: `Sign up to discover new works by ${EXAMPLE_LONG_NAME} and more artists you love`,\n        },\n        { hasLogo: true },\n        { title: \"Modal Title\", hasLogo: true },\n        {\n          children: (\n            <Text variant=\"sm\">\n              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque,\n              neque voluptates! Sapiente, sint magnam. Assumenda, hic eius\n              asperiores iure explicabo itaque accusantium, consectetur aut sit\n              maxime culpa ab aliquid consequatur?\n            </Text>\n          ),\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n        { title: \"Modal Title\", footer: <Button width=\"100%\">Confirm</Button> },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n          hasLogo: true,\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n        {\n          title: (\n            <Box\n              display=\"flex\"\n              alignItems=\"center\"\n              justifyContent=\"space-between\"\n              p={2}\n            >\n              <ChevronLeftIcon />\n              <ArtsyLogoIcon height={30} />\n              <CloseIcon />\n            </Box>\n          ),\n        },\n      ]}\n    >\n      <ModalDialogContent onClose={fn()} maxHeight={400}>\n        <Join separator={<Spacer y={1} />}>\n          <Text variant=\"sm\">\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque,\n            neque voluptates! Sapiente, sint magnam. Assumenda, hic eius\n            asperiores iure explicabo itaque accusantium, consectetur aut sit\n            maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet\n            consectetur adipisicing elit. Quam enim vel accusamus dolor\n            voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae\n            nihil minima praesentium, quaerat cupiditate amet dolor similique\n            corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit.\n            Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae\n            eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam\n            nisi voluptatem inventore! Lorem ipsum, dolor sit amet consectetur\n            adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam.\n          </Text>\n\n          <Input placeholder=\"Enter your name\" autoComplete=\"name\" />\n\n          <Input\n            placeholder=\"Enter your email\"\n            type=\"email\"\n            autoComplete=\"email\"\n          />\n\n          <Text variant=\"sm\">\n            Assumenda, hic eius asperiores iure explicabo itaque accusantium,\n            consectetur aut sit maxime culpa ab aliquid consequatur? Lorem,\n            ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel\n            accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum\n            asperiores quae nihil minima praesentium, quaerat cupiditate amet\n            dolor similique corporis? Lorem, ipsum dolor sit amet consectetur\n            adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro\n            molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur\n            vitae animi ullam nisi voluptatem inventore! Lorem ipsum, dolor sit\n            amet consectetur adipisicing elit. Eaque, neque voluptates!\n            Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo\n            itaque accusantium, consectetur aut sit maxime culpa ab aliquid\n            consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing\n            elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta\n            blanditiis debitis rerum asperiores quae nihil minima praesentium,\n            quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor\n            sit amet consectetur adipisicing elit. Quibusdam, eaque placeat\n            mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo\n            ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore!\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque,\n            neque voluptates! Sapiente, sint magnam. Assumenda, hic eius\n            asperiores iure explicabo itaque accusantium, consectetur aut sit\n            maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet\n            consectetur adipisicing elit. Quam enim vel accusamus dolor\n            voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae\n            nihil minima praesentium, quaerat cupiditate amet dolor similique\n            corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit.\n            Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae\n            eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam\n            nisi voluptatem inventore!\n          </Text>\n        </Join>\n      </ModalDialogContent>\n    </States>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"ModalDialogContent.story.js","names":["_test","require","_react","_interopRequireDefault","_ModalDialogContent","_Text","_Button","_Input","_Join","_Spacer","_Box","_ChevronLeftIcon","_ArtsyLogoIcon","_CloseIcon","_storybookBlocklist","obj","__esModule","default","_default","exports","component","ModalDialogContent","title","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","modalContent","createElement","Join","separator","Spacer","y","Text","variant","Input","placeholder","autoComplete","type","Default","render","onClose","fn","maxHeight","story","ShortContent","bg","WithTitle","WithLongTitle","WithLogo","hasLogo","WithTitleAndLogo","WithFooter","footer","Button","width","WithTitleAndFooter","Complete","CustomHeader","Box","display","alignItems","justifyContent","p","height"],"sources":["../../../src/elements/ModalDialog/ModalDialogContent.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React from \"react\"\nimport { ModalDialogContent } from \"./ModalDialogContent\"\nimport { Text } from \"../Text\"\nimport { Button } from \"../Button\"\nimport { Input } from \"../Input\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Box } from \"../Box\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ArtsyLogoIcon from \"@artsy/icons/ArtsyLogoIcon\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: ModalDialogContent,\n  title: \"Components/ModalDialogContent\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Content component for modal dialogs with title, body, and action sections.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nconst modalContent = (\n  <Join separator={<Spacer y={1} />}>\n    <Text variant=\"sm\">\n      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque\n      voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure\n      explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid\n      consequatur?\n    </Text>\n    <Input placeholder=\"Enter your name\" autoComplete=\"name\" />\n    <Input placeholder=\"Enter your email\" type=\"email\" autoComplete=\"email\" />\n  </Join>\n)\n\nexport const Default = {\n  render: () => (\n    <ModalDialogContent onClose={fn()} maxHeight={400}>\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic modal dialog content without title or footer.\",\n      },\n    },\n  },\n}\n\nexport const ShortContent = {\n  render: () => (\n    <ModalDialogContent onClose={fn()} maxHeight={400}>\n      <Text variant=\"sm\" bg=\"mono10\">\n        Content shorter than width\n      </Text>\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Modal with short content.\",\n      },\n    },\n  },\n}\n\nexport const WithTitle = {\n  render: () => (\n    <ModalDialogContent title=\"Modal Title\" onClose={fn()} maxHeight={400}>\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Modal dialog with a title.\",\n      },\n    },\n  },\n}\n\nexport const WithLongTitle = {\n  render: () => (\n    <ModalDialogContent\n      title=\"Modal Title with a longer title or headline text that runs on for multiple lines\"\n      onClose={fn()}\n      maxHeight={400}\n    >\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Modal dialog with a long title that wraps to multiple lines.\",\n      },\n    },\n  },\n}\n\nexport const WithLogo = {\n  render: () => (\n    <ModalDialogContent hasLogo onClose={fn()} maxHeight={400}>\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Modal dialog with logo displayed.\",\n      },\n    },\n  },\n}\n\nexport const WithTitleAndLogo = {\n  render: () => (\n    <ModalDialogContent\n      title=\"Modal Title\"\n      hasLogo\n      onClose={fn()}\n      maxHeight={400}\n    >\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Modal dialog with both title and logo.\",\n      },\n    },\n  },\n}\n\nexport const WithFooter = {\n  render: () => (\n    <ModalDialogContent\n      footer={<Button width=\"100%\">Confirm</Button>}\n      onClose={fn()}\n      maxHeight={400}\n    >\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Modal dialog with footer action button.\",\n      },\n    },\n  },\n}\n\nexport const WithTitleAndFooter = {\n  render: () => (\n    <ModalDialogContent\n      title=\"Modal Title\"\n      footer={<Button width=\"100%\">Confirm</Button>}\n      onClose={fn()}\n      maxHeight={400}\n    >\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Modal dialog with title and footer button.\",\n      },\n    },\n  },\n}\n\nexport const Complete = {\n  render: () => (\n    <ModalDialogContent\n      title=\"Modal Title with a longer title or headline text that runs on for multiple lines\"\n      hasLogo\n      footer={<Button width=\"100%\">Confirm</Button>}\n      onClose={fn()}\n      maxHeight={400}\n    >\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Complete modal dialog with title, logo, content, and footer.\",\n      },\n    },\n  },\n}\n\nexport const CustomHeader = {\n  render: () => (\n    <ModalDialogContent\n      title={\n        <Box\n          display=\"flex\"\n          alignItems=\"center\"\n          justifyContent=\"space-between\"\n          p={2}\n        >\n          <ChevronLeftIcon />\n          <ArtsyLogoIcon height={30} />\n          <CloseIcon />\n        </Box>\n      }\n      onClose={fn()}\n      maxHeight={400}\n    >\n      {modalContent}\n    </ModalDialogContent>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Modal dialog with custom header containing navigation icons.\",\n      },\n    },\n  },\n}\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAP,OAAA;AACA,IAAAQ,OAAA,GAAAR,OAAA;AACA,IAAAS,IAAA,GAAAT,OAAA;AACA,IAAAU,gBAAA,GAAAR,sBAAA,CAAAF,OAAA;AACA,IAAAW,cAAA,GAAAT,sBAAA,CAAAF,OAAA;AACA,IAAAY,UAAA,GAAAV,sBAAA,CAAAF,OAAA;AACA,IAAAa,mBAAA,GAAAb,OAAA;AAA0E,SAAAE,uBAAAY,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAE3D;EACbG,SAAS,EAAEC,sCAAkB;EAC7BC,KAAK,EAAE,+BAA+B;EACtCC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXN,SAAS,EACP;MACJ,CAAC;MACDO,QAAQ,EAAE;QACRC,OAAO,EAAEC;MACX;IACF;EACF;AACF,CAAC;AAED,IAAMC,YAAY,gBAChB5B,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAACvB,KAAA,CAAAwB,IAAI;EAACC,SAAS,eAAE/B,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAACtB,OAAA,CAAAyB,MAAM;IAACC,CAAC,EAAE;EAAE;AAAI,gBAChCjC,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAAC1B,KAAA,CAAA+B,IAAI;EAACC,OAAO,EAAC;AAAI,GAAC,sOAKnB,CAAO,eACPnC,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAACxB,MAAA,CAAA+B,KAAK;EAACC,WAAW,EAAC,iBAAiB;EAACC,YAAY,EAAC;AAAM,EAAG,eAC3DtC,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAACxB,MAAA,CAAA+B,KAAK;EAACC,WAAW,EAAC,kBAAkB;EAACE,IAAI,EAAC,OAAO;EAACD,YAAY,EAAC;AAAO,EAAG,CAE7E;AAEM,IAAME,OAAO,GAAAvB,OAAA,CAAAuB,OAAA,GAAG;EACrBC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJzC,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAAC3B,mBAAA,CAAAiB,kBAAkB;MAACuB,OAAO,EAAE,IAAAC,QAAE,GAAG;MAACC,SAAS,EAAE;IAAI,GAC/ChB,YAAY,CACM;EAAA,CACtB;EACDN,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXqB,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAEM,IAAMC,YAAY,GAAA7B,OAAA,CAAA6B,YAAA,GAAG;EAC1BL,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJzC,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAAC3B,mBAAA,CAAAiB,kBAAkB;MAACuB,OAAO,EAAE,IAAAC,QAAE,GAAG;MAACC,SAAS,EAAE;IAAI,gBAChD5C,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAAC1B,KAAA,CAAA+B,IAAI;MAACC,OAAO,EAAC,IAAI;MAACY,EAAE,EAAC;IAAQ,GAAC,4BAE/B,CAAO,CACY;EAAA,CACtB;EACDzB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXqB,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAEM,IAAMG,SAAS,GAAA/B,OAAA,CAAA+B,SAAA,GAAG;EACvBP,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJzC,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAAC3B,mBAAA,CAAAiB,kBAAkB;MAACC,KAAK,EAAC,aAAa;MAACsB,OAAO,EAAE,IAAAC,QAAE,GAAG;MAACC,SAAS,EAAE;IAAI,GACnEhB,YAAY,CACM;EAAA,CACtB;EACDN,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXqB,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAEM,IAAMI,aAAa,GAAAhC,OAAA,CAAAgC,aAAA,GAAG;EAC3BR,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJzC,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAAC3B,mBAAA,CAAAiB,kBAAkB;MACjBC,KAAK,EAAC,kFAAkF;MACxFsB,OAAO,EAAE,IAAAC,QAAE,GAAG;MACdC,SAAS,EAAE;IAAI,GAEdhB,YAAY,CACM;EAAA,CACtB;EACDN,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXqB,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAEM,IAAMK,QAAQ,GAAAjC,OAAA,CAAAiC,QAAA,GAAG;EACtBT,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJzC,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAAC3B,mBAAA,CAAAiB,kBAAkB;MAACgC,OAAO;MAACT,OAAO,EAAE,IAAAC,QAAE,GAAG;MAACC,SAAS,EAAE;IAAI,GACvDhB,YAAY,CACM;EAAA,CACtB;EACDN,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXqB,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAEM,IAAMO,gBAAgB,GAAAnC,OAAA,CAAAmC,gBAAA,GAAG;EAC9BX,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJzC,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAAC3B,mBAAA,CAAAiB,kBAAkB;MACjBC,KAAK,EAAC,aAAa;MACnB+B,OAAO;MACPT,OAAO,EAAE,IAAAC,QAAE,GAAG;MACdC,SAAS,EAAE;IAAI,GAEdhB,YAAY,CACM;EAAA,CACtB;EACDN,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXqB,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAEM,IAAMQ,UAAU,GAAApC,OAAA,CAAAoC,UAAA,GAAG;EACxBZ,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJzC,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAAC3B,mBAAA,CAAAiB,kBAAkB;MACjBmC,MAAM,eAAEtD,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAACzB,OAAA,CAAAmD,MAAM;QAACC,KAAK,EAAC;MAAM,GAAC,SAAO,CAAU;MAC9Cd,OAAO,EAAE,IAAAC,QAAE,GAAG;MACdC,SAAS,EAAE;IAAI,GAEdhB,YAAY,CACM;EAAA,CACtB;EACDN,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXqB,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAEM,IAAMY,kBAAkB,GAAAxC,OAAA,CAAAwC,kBAAA,GAAG;EAChChB,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJzC,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAAC3B,mBAAA,CAAAiB,kBAAkB;MACjBC,KAAK,EAAC,aAAa;MACnBkC,MAAM,eAAEtD,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAACzB,OAAA,CAAAmD,MAAM;QAACC,KAAK,EAAC;MAAM,GAAC,SAAO,CAAU;MAC9Cd,OAAO,EAAE,IAAAC,QAAE,GAAG;MACdC,SAAS,EAAE;IAAI,GAEdhB,YAAY,CACM;EAAA,CACtB;EACDN,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXqB,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAEM,IAAMa,QAAQ,GAAAzC,OAAA,CAAAyC,QAAA,GAAG;EACtBjB,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJzC,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAAC3B,mBAAA,CAAAiB,kBAAkB;MACjBC,KAAK,EAAC,kFAAkF;MACxF+B,OAAO;MACPG,MAAM,eAAEtD,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAACzB,OAAA,CAAAmD,MAAM;QAACC,KAAK,EAAC;MAAM,GAAC,SAAO,CAAU;MAC9Cd,OAAO,EAAE,IAAAC,QAAE,GAAG;MACdC,SAAS,EAAE;IAAI,GAEdhB,YAAY,CACM;EAAA,CACtB;EACDN,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXqB,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAEM,IAAMc,YAAY,GAAA1C,OAAA,CAAA0C,YAAA,GAAG;EAC1BlB,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJzC,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAAC3B,mBAAA,CAAAiB,kBAAkB;MACjBC,KAAK,eACHpB,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAACrB,IAAA,CAAAoD,GAAG;QACFC,OAAO,EAAC,MAAM;QACdC,UAAU,EAAC,QAAQ;QACnBC,cAAc,EAAC,eAAe;QAC9BC,CAAC,EAAE;MAAE,gBAELhE,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAACpB,gBAAA,CAAAM,OAAe,OAAG,eACnBf,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAACnB,cAAA,CAAAK,OAAa;QAACkD,MAAM,EAAE;MAAG,EAAG,eAC7BjE,MAAA,CAAAe,OAAA,CAAAc,aAAA,CAAClB,UAAA,CAAAI,OAAS,OAAG,CAEhB;MACD2B,OAAO,EAAE,IAAAC,QAAE,GAAG;MACdC,SAAS,EAAE;IAAI,GAEdhB,YAAY,CACM;EAAA,CACtB;EACDN,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXqB,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

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

@@ -1,8 +1,125 @@
 import React from "react";
 declare const _default: {
     title: string;
+    component: React.FC<React.PropsWithChildren<import("./MultiSelect").MultiSelectProps>>;
+    tags: string[];
+    parameters: {
+        docs: {
+            controls: {
+                exclude: string[];
+            };
+        };
+    };
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const Example: () => React.JSX.Element;
+export declare const Default: {
+    args: {
+        name: string;
+        options: {
+            text: string;
+            value: string;
+        }[];
+        onSelect: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export declare const Focus: {
+    args: {
+        name: string;
+        options: {
+            text: string;
+            value: string;
+        }[];
+        onSelect: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        focus: boolean;
+    };
+};
+export declare const Hover: {
+    args: {
+        name: string;
+        options: {
+            text: string;
+            value: string;
+        }[];
+        onSelect: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        hover: boolean;
+    };
+};
+export declare const Complete: {
+    args: {
+        name: string;
+        options: {
+            text: string;
+            value: string;
+        }[];
+        onSelect: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        complete: boolean;
+    };
+};
+export declare const WithError: {
+    args: {
+        name: string;
+        options: {
+            text: string;
+            value: string;
+        }[];
+        onSelect: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        error: string;
+    };
+};
+export declare const Disabled: {
+    args: {
+        name: string;
+        options: {
+            text: string;
+            value: string;
+        }[];
+        onSelect: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        disabled: boolean;
+    };
+};
+export declare const WithTitle: {
+    args: {
+        name: string;
+        title: string;
+        options: {
+            text: string;
+            value: string;
+        }[];
+        onSelect: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export declare const Required: {
+    args: {
+        name: string;
+        title: string;
+        options: {
+            text: string;
+            value: string;
+        }[];
+        onSelect: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        required: boolean;
+    };
+};
+export declare const WithDescription: {
+    args: {
+        name: string;
+        title: string;
+        description: string;
+        options: {
+            text: string;
+            value: string;
+        }[];
+        onSelect: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export declare const WithStateTracking: {
+    args: {
+        name: string;
+        options: {
+            text: string;
+            value: string;
+        }[];
+    };
+    render: (args: any) => React.JSX.Element;
+};
 export declare const CustomSelectionLogic: () => React.JSX.Element;

package/dist/elements/MultiSelect/MultiSelect.story.js

@@ -4,13 +4,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Example = exports.Default = exports.CustomSelectionLogic = void 0;
+exports.default = exports.WithTitle = exports.WithStateTracking = exports.WithError = exports.WithDescription = exports.Required = exports.Hover = exports.Focus = exports.Disabled = exports.Default = exports.CustomSelectionLogic = exports.Complete = void 0;
 var _test = require("@storybook/test");
 var _react = _interopRequireWildcard(require("react"));
-var _storybookStates = require("storybook-states");
 var _MultiSelect = require("./MultiSelect");
+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 _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); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -23,7 +24,16 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 _default = exports.default = {
-  title: "Components/MultiSelect"
+  title: "Components/MultiSelect",
+  component: _MultiSelect.MultiSelect,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      controls: {
+        exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
 };
 var OPTIONS = [{
   text: "Painting",
@@ -41,55 +51,101 @@ var OPTIONS = [{
   text: "Mixed Media",
   value: "mixed-media"
 }];
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{}, {
-      focus: true
-    }, {
-      hover: true
-    }, {
-      complete: true
-    }, {
-      error: "Something went wrong."
-    }, {
-      disabled: true
-    }, {
-      title: "Medium",
-      name: "Select"
-    }, {
-      title: "Medium",
-      name: "Select",
-      required: true
-    }, {
-      title: "Medium",
-      name: "Select",
-      description: "Materials or support"
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_MultiSelect.MultiSelect, {
+var Default = exports.Default = {
+  args: {
     name: "Medium",
     options: OPTIONS,
     onSelect: (0, _test.fn)()
-  }));
+  }
+};
+var Focus = exports.Focus = {
+  args: {
+    name: "Medium",
+    options: OPTIONS,
+    onSelect: (0, _test.fn)(),
+    focus: true
+  }
+};
+var Hover = exports.Hover = {
+  args: {
+    name: "Medium",
+    options: OPTIONS,
+    onSelect: (0, _test.fn)(),
+    hover: true
+  }
+};
+var Complete = exports.Complete = {
+  args: {
+    name: "Medium",
+    options: OPTIONS,
+    onSelect: (0, _test.fn)(),
+    complete: true
+  }
+};
+var WithError = exports.WithError = {
+  args: {
+    name: "Medium",
+    options: OPTIONS,
+    onSelect: (0, _test.fn)(),
+    error: "Something went wrong."
+  }
+};
+var Disabled = exports.Disabled = {
+  args: {
+    name: "Medium",
+    options: OPTIONS,
+    onSelect: (0, _test.fn)(),
+    disabled: true
+  }
+};
+var WithTitle = exports.WithTitle = {
+  args: {
+    name: "Select",
+    title: "Medium",
+    options: OPTIONS,
+    onSelect: (0, _test.fn)()
+  }
 };
-Default.displayName = "Default";
-var Example = exports.Example = function Example() {
-  var _useReducer = (0, _react.useReducer)(function (state, newFilter) {
-      return _objectSpread(_objectSpread({}, state), newFilter);
-    }, {}),
-    _useReducer2 = _slicedToArray(_useReducer, 2),
-    filters = _useReducer2[0],
-    setFilter = _useReducer2[1];
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify(filters)), /*#__PURE__*/_react.default.createElement(_MultiSelect.MultiSelect, {
+var Required = exports.Required = {
+  args: {
+    name: "Select",
+    title: "Medium",
     options: OPTIONS,
+    onSelect: (0, _test.fn)(),
+    required: true
+  }
+};
+var WithDescription = exports.WithDescription = {
+  args: {
+    name: "Select",
+    title: "Medium",
+    description: "Materials or support",
+    options: OPTIONS,
+    onSelect: (0, _test.fn)()
+  }
+};
+var WithStateTracking = exports.WithStateTracking = {
+  args: {
     name: "Size",
-    onSelect: function onSelect(sizes) {
-      setFilter({
-        sizes: sizes.map(function (size) {
-          return size.value;
-        })
-      });
-    }
-  }));
+    options: OPTIONS
+  },
+  render: function render(args) {
+    var _useReducer = (0, _react.useReducer)(function (state, newFilter) {
+        return _objectSpread(_objectSpread({}, state), newFilter);
+      }, {}),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      filters = _useReducer2[0],
+      setFilter = _useReducer2[1];
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify(filters)), /*#__PURE__*/_react.default.createElement(_MultiSelect.MultiSelect, _extends({}, args, {
+      onSelect: function onSelect(sizes) {
+        setFilter({
+          sizes: sizes.map(function (size) {
+            return size.value;
+          })
+        });
+      }
+    })));
+  }
 };
 var CustomSelectionLogic = exports.CustomSelectionLogic = function CustomSelectionLogic() {
   var _React$useState = _react.default.useState([]),