@artsy/palette 44.0.1 → 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":"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"}

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

@@ -10,7 +10,7 @@ export interface MultiSelectProps extends BoxProps {
     error?: string | boolean;
     focus?: boolean;
     hover?: boolean;
-    /** Initial values to be selected */
+    /** Selected values (updating the list will refresh the internal selection and re-render the component) */
     selected?: Option["value"][];
     name?: string;
     options: Option[];

package/dist/elements/MultiSelect/MultiSelect.js

@@ -66,6 +66,10 @@ var MultiSelect = exports.MultiSelect = function MultiSelect(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     selection = _useState4[0],
     setSelection = _useState4[1];
+  (0, _react.useEffect)(function () {
+    var newSelectedOptions = valuesToOptions(selected, options);
+    setSelection(newSelectedOptions);
+  }, [selected.toString()]);
 
   // Yields focus back and forth between popover and anchor
   (0, _useUpdateEffect.useUpdateEffect)(function () {

package/dist/elements/MultiSelect/MultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_helpers","_RequiredField","_utils","_useUpdateEffect","_useWidthOf2","_Box","_Checkbox","_Clickable","_Select","_Text","_Tooltip","_tokens","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","iter","Symbol","iterator","Array","from","isArray","_arrayLikeToArray","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_nonIterableRest","o","minLen","n","toString","slice","constructor","name","test","len","arr2","_i","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","MultiSelect","exports","_ref","_ref$autoOpen","autoOpen","complete","description","disabled","error","focus","hover","_ref$selected","selected","_ref$name","options","required","title","onBlur","onFocus","onSelect","rest","selectedOptions","valuesToOptions","_useState","useState","_useState2","visible","setVisible","_useState3","_useState4","selection","setSelection","useUpdateEffect","tooltipRef","current","anchorRef","handleVisible","handleHide","useEffect","handleKeydown","event","document","addEventListener","removeEventListener","_usePosition","usePosition","position","offset","active","_useWidthOf","useWidthOf","ref","width","useClickOutside","onClickOutside","when","type","handleSelect","option","prevSelection","nextSelection","concat","filter","_ref2","createElement","Box","Tooltip","pointer","content","placement","Text","variant","color","textAlign","Container","mt","onClick","lineHeight","overflowEllipsis","reverse","map","s","text","join","StyledLabel","htmlFor","Options","tabIndex","zIndex","bg","Checkbox","height","px","includes","RequiredField","ml","displayName","values","styled","withConfig","componentId","themeGet","Clickable","props","css","MULTISELECT_STATES","completed","caretMixin","label","FORM_ELEMENT_TRANSITION"],"sources":["../../../src/elements/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { useClickOutside, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Checkbox } from \"../Checkbox\"\nimport { Clickable } from \"../Clickable\"\nimport { caretMixin, Option } from \"../Select\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { MULTISELECT_STATES } from \"./tokens\"\n\nexport interface MultiSelectProps extends BoxProps {\n  /** Whether to open the dropdown automatically on mount or render (default: false) */\n  autoOpen?: boolean\n  complete?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  /** Initial values to be selected */\n  selected?: Option[\"value\"][]\n  name?: string\n  options: Option[]\n  required?: boolean\n  title?: string\n  onBlur?: (selection: Option[]) => void\n  onFocus?: () => void\n  onSelect?: (selection: Option[]) => void\n\n  visible?: boolean\n}\n\n/** A drop-down multi-select menu */\nexport const MultiSelect: React.FC<\n  React.PropsWithChildren<MultiSelectProps>\n> = ({\n  autoOpen = false,\n  complete,\n  description,\n  disabled,\n  error,\n  focus,\n  hover,\n  selected = [],\n  name = \"Select\",\n  options,\n  required,\n  title,\n  onBlur,\n  onFocus,\n  onSelect,\n  ...rest\n}) => {\n  const selectedOptions = valuesToOptions(selected, options)\n\n  const [visible, setVisible] = useState(autoOpen)\n  const [selection, setSelection] = useState<Option[]>(selectedOptions || [])\n\n  // Yields focus back and forth between popover and anchor\n  useUpdateEffect(() => {\n    if (visible && tooltipRef.current) {\n      tooltipRef.current.focus()\n      return\n    }\n\n    if (!anchorRef.current) return\n    anchorRef.current.focus()\n  }, [visible])\n\n  const handleVisible = () => {\n    setVisible(true)\n    onFocus?.()\n  }\n\n  const handleHide = () => {\n    setVisible(false)\n    onBlur?.(selection)\n  }\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        handleHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [])\n  const { anchorRef, tooltipRef } = usePosition({\n    position: \"bottom\",\n    offset: 10,\n    active: visible,\n  })\n\n  const { width } = useWidthOf({ ref: anchorRef })\n\n  useClickOutside({\n    ref: tooltipRef,\n    onClickOutside: handleHide,\n    when: visible,\n    type: \"click\",\n  })\n\n  const handleSelect = (option: Option) => {\n    return (selected: boolean) => {\n      const prevSelection = selection\n      const nextSelection = selected\n        ? [...prevSelection, option]\n        : prevSelection.filter(({ value }) => option.value !== value)\n\n      setSelection(nextSelection)\n      onSelect?.(nextSelection)\n    }\n  }\n\n  return (\n    <Box width=\"100%\" {...rest}>\n      {!!description && (\n        <Tooltip pointer content={description} placement=\"top-end\">\n          <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n            <u>What is this?</u>\n          </Text>\n        </Tooltip>\n      )}\n\n      <Container\n        mt={!!title && !description ? 1 : 0}\n        ref={anchorRef as any}\n        onClick={handleVisible}\n        complete={complete || selection.length > 0}\n        disabled={!!disabled}\n        error={error}\n        focus={!!focus}\n        hover={!!hover}\n        title={title}\n        visible={visible}\n        {...rest}\n      >\n        <Text variant=\"sm\" lineHeight={1} overflowEllipsis>\n          {selection.length > 0\n            ? [...selection]\n                .reverse()\n                .map((s) => s.text)\n                .join(\", \")\n            : name}\n        </Text>\n\n        {!!title && <StyledLabel htmlFor={name}>{title}</StyledLabel>}\n      </Container>\n\n      {visible && (\n        <Options\n          tabIndex={0}\n          ref={tooltipRef as any}\n          zIndex={1}\n          bg=\"mono0\"\n          width={width}\n        >\n          {options.map((option) => {\n            return (\n              <Checkbox\n                key={option.value}\n                height={50}\n                px={1}\n                selected={selection.map((o) => o.value).includes(option.value)}\n                onSelect={handleSelect(option)}\n              >\n                {option.text}\n              </Checkbox>\n            )\n          })}\n        </Options>\n      )}\n\n      {required && !(error && typeof error === \"string\") && (\n        <RequiredField mt={0.5} ml={1} disabled={disabled} />\n      )}\n\n      {error && typeof error === \"string\" && (\n        <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n          {error}\n        </Text>\n      )}\n    </Box>\n  )\n}\n\nconst valuesToOptions = (\n  values: Option[\"value\"][],\n  options: Option[]\n): Option[] => {\n  return options.filter((option) => values.includes(option.value))\n}\n\nconst Options = styled(Box)`\n  position: fixed;\n  z-index: 1;\n  max-height: 300px;\n  text-align: left;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n\ntype ContainerProps = Pick<\n  MultiSelectProps,\n  \"complete\" | \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"visible\"\n>\n\nconst Container = styled(Clickable)<ContainerProps>`\n  position: relative;\n  width: 100%;\n  /* 24px = space.1 + 4px-wide caret + space.1 */\n  padding: 16px 24px 16px ${themeGet(\"space.1\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n  border: 1px solid;\n  border-radius: 3px;\n  border-color: ${themeGet(\"colors.mono30\")};\n  cursor: pointer;\n  line-height: 1;\n  transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n  background-color: ${themeGet(\"colors.mono0\")};\n\n  ${(props) => {\n    return css`\n      ${MULTISELECT_STATES.default}\n      ${props.complete && MULTISELECT_STATES.completed}\n      ${props.hover && MULTISELECT_STATES.hover}\n      ${props.focus && MULTISELECT_STATES.focus}\n      ${props.disabled && MULTISELECT_STATES.disabled}\n      ${props.error && MULTISELECT_STATES.error}\n\n      &:hover {\n        ${MULTISELECT_STATES.hover}\n      }\n\n      ${props.visible && MULTISELECT_STATES.focus}\n\n      &:disabled {\n        cursor: default;\n        ${MULTISELECT_STATES.disabled}\n      }\n\n      // Hide text behind title when it's visible\n      ${props.title &&\n      !props.complete &&\n      !props.visible &&\n      css`\n        color: transparent !important;\n      `}\n    `\n  }}\n\n  ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  background-color: ${themeGet(\"colors.mono0\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n`\n"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_helpers","_RequiredField","_utils","_useUpdateEffect","_useWidthOf2","_Box","_Checkbox","_Clickable","_Select","_Text","_Tooltip","_tokens","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","iter","Symbol","iterator","Array","from","isArray","_arrayLikeToArray","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_nonIterableRest","o","minLen","n","toString","slice","constructor","name","test","len","arr2","_i","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","MultiSelect","exports","_ref","_ref$autoOpen","autoOpen","complete","description","disabled","error","focus","hover","_ref$selected","selected","_ref$name","options","required","title","onBlur","onFocus","onSelect","rest","selectedOptions","valuesToOptions","_useState","useState","_useState2","visible","setVisible","_useState3","_useState4","selection","setSelection","useEffect","newSelectedOptions","useUpdateEffect","tooltipRef","current","anchorRef","handleVisible","handleHide","handleKeydown","event","document","addEventListener","removeEventListener","_usePosition","usePosition","position","offset","active","_useWidthOf","useWidthOf","ref","width","useClickOutside","onClickOutside","when","type","handleSelect","option","prevSelection","nextSelection","concat","filter","_ref2","createElement","Box","Tooltip","pointer","content","placement","Text","variant","color","textAlign","Container","mt","onClick","lineHeight","overflowEllipsis","reverse","map","s","text","join","StyledLabel","htmlFor","Options","tabIndex","zIndex","bg","Checkbox","height","px","includes","RequiredField","ml","displayName","values","styled","withConfig","componentId","themeGet","Clickable","props","css","MULTISELECT_STATES","completed","caretMixin","label","FORM_ELEMENT_TRANSITION"],"sources":["../../../src/elements/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { useClickOutside, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Checkbox } from \"../Checkbox\"\nimport { Clickable } from \"../Clickable\"\nimport { caretMixin, Option } from \"../Select\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { MULTISELECT_STATES } from \"./tokens\"\n\nexport interface MultiSelectProps extends BoxProps {\n  /** Whether to open the dropdown automatically on mount or render (default: false) */\n  autoOpen?: boolean\n  complete?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  /** Selected values (updating the list will refresh the internal selection and re-render the component) */\n  selected?: Option[\"value\"][]\n  name?: string\n  options: Option[]\n  required?: boolean\n  title?: string\n  onBlur?: (selection: Option[]) => void\n  onFocus?: () => void\n  onSelect?: (selection: Option[]) => void\n\n  visible?: boolean\n}\n\n/** A drop-down multi-select menu */\nexport const MultiSelect: React.FC<\n  React.PropsWithChildren<MultiSelectProps>\n> = ({\n  autoOpen = false,\n  complete,\n  description,\n  disabled,\n  error,\n  focus,\n  hover,\n  selected = [],\n  name = \"Select\",\n  options,\n  required,\n  title,\n  onBlur,\n  onFocus,\n  onSelect,\n  ...rest\n}) => {\n  const selectedOptions = valuesToOptions(selected, options)\n\n  const [visible, setVisible] = useState(autoOpen)\n  const [selection, setSelection] = useState<Option[]>(selectedOptions || [])\n\n  useEffect(() => {\n    const newSelectedOptions = valuesToOptions(selected, options)\n    setSelection(newSelectedOptions)\n  }, [selected.toString()])\n\n  // Yields focus back and forth between popover and anchor\n  useUpdateEffect(() => {\n    if (visible && tooltipRef.current) {\n      tooltipRef.current.focus()\n      return\n    }\n\n    if (!anchorRef.current) return\n    anchorRef.current.focus()\n  }, [visible])\n\n  const handleVisible = () => {\n    setVisible(true)\n    onFocus?.()\n  }\n\n  const handleHide = () => {\n    setVisible(false)\n    onBlur?.(selection)\n  }\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        handleHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [])\n  const { anchorRef, tooltipRef } = usePosition({\n    position: \"bottom\",\n    offset: 10,\n    active: visible,\n  })\n\n  const { width } = useWidthOf({ ref: anchorRef })\n\n  useClickOutside({\n    ref: tooltipRef,\n    onClickOutside: handleHide,\n    when: visible,\n    type: \"click\",\n  })\n\n  const handleSelect = (option: Option) => {\n    return (selected: boolean) => {\n      const prevSelection = selection\n      const nextSelection = selected\n        ? [...prevSelection, option]\n        : prevSelection.filter(({ value }) => option.value !== value)\n\n      setSelection(nextSelection)\n      onSelect?.(nextSelection)\n    }\n  }\n\n  return (\n    <Box width=\"100%\" {...rest}>\n      {!!description && (\n        <Tooltip pointer content={description} placement=\"top-end\">\n          <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n            <u>What is this?</u>\n          </Text>\n        </Tooltip>\n      )}\n\n      <Container\n        mt={!!title && !description ? 1 : 0}\n        ref={anchorRef as any}\n        onClick={handleVisible}\n        complete={complete || selection.length > 0}\n        disabled={!!disabled}\n        error={error}\n        focus={!!focus}\n        hover={!!hover}\n        title={title}\n        visible={visible}\n        {...rest}\n      >\n        <Text variant=\"sm\" lineHeight={1} overflowEllipsis>\n          {selection.length > 0\n            ? [...selection]\n                .reverse()\n                .map((s) => s.text)\n                .join(\", \")\n            : name}\n        </Text>\n\n        {!!title && <StyledLabel htmlFor={name}>{title}</StyledLabel>}\n      </Container>\n\n      {visible && (\n        <Options\n          tabIndex={0}\n          ref={tooltipRef as any}\n          zIndex={1}\n          bg=\"mono0\"\n          width={width}\n        >\n          {options.map((option) => {\n            return (\n              <Checkbox\n                key={option.value}\n                height={50}\n                px={1}\n                selected={selection.map((o) => o.value).includes(option.value)}\n                onSelect={handleSelect(option)}\n              >\n                {option.text}\n              </Checkbox>\n            )\n          })}\n        </Options>\n      )}\n\n      {required && !(error && typeof error === \"string\") && (\n        <RequiredField mt={0.5} ml={1} disabled={disabled} />\n      )}\n\n      {error && typeof error === \"string\" && (\n        <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n          {error}\n        </Text>\n      )}\n    </Box>\n  )\n}\n\nconst valuesToOptions = (\n  values: Option[\"value\"][],\n  options: Option[]\n): Option[] => {\n  return options.filter((option) => values.includes(option.value))\n}\n\nconst Options = styled(Box)`\n  position: fixed;\n  z-index: 1;\n  max-height: 300px;\n  text-align: left;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n\ntype ContainerProps = Pick<\n  MultiSelectProps,\n  \"complete\" | \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"visible\"\n>\n\nconst Container = styled(Clickable)<ContainerProps>`\n  position: relative;\n  width: 100%;\n  /* 24px = space.1 + 4px-wide caret + space.1 */\n  padding: 16px 24px 16px ${themeGet(\"space.1\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n  border: 1px solid;\n  border-radius: 3px;\n  border-color: ${themeGet(\"colors.mono30\")};\n  cursor: pointer;\n  line-height: 1;\n  transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n  background-color: ${themeGet(\"colors.mono0\")};\n\n  ${(props) => {\n    return css`\n      ${MULTISELECT_STATES.default}\n      ${props.complete && MULTISELECT_STATES.completed}\n      ${props.hover && MULTISELECT_STATES.hover}\n      ${props.focus && MULTISELECT_STATES.focus}\n      ${props.disabled && MULTISELECT_STATES.disabled}\n      ${props.error && MULTISELECT_STATES.error}\n\n      &:hover {\n        ${MULTISELECT_STATES.hover}\n      }\n\n      ${props.visible && MULTISELECT_STATES.focus}\n\n      &:disabled {\n        cursor: default;\n        ${MULTISELECT_STATES.disabled}\n      }\n\n      // Hide text behind title when it's visible\n      ${props.title &&\n      !props.complete &&\n      !props.visible &&\n      css`\n        color: transparent !important;\n      `}\n    `\n  }}\n\n  ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  background-color: ${themeGet(\"colors.mono0\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n`\n"],"mappings":"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"}

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

@@ -1,7 +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;