@artsy/palette 45.13.1 → 45.14.0-canary.1497.33065.0

package/dist/esm/elements/Banner/Banner.story.js

@@ -0,0 +1,59 @@
+import { Banner } from "./Banner";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  title: "Components/Banner",
+  component: Banner,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Banner component for displaying important messages to users with various styles and dismissible options."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+export var DefaultLight = {
+  args: {
+    children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae natus assumenda distinctio, voluptatum magni.",
+    dismissable: true,
+    variant: "defaultLight"
+  }
+};
+export var DefaultDark = {
+  args: {
+    children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae natus assumenda distinctio, voluptatum magni.",
+    dismissable: true,
+    variant: "defaultDark"
+  }
+};
+export var Success = {
+  args: {
+    children: "Operation completed successfully!",
+    dismissable: true,
+    variant: "success"
+  }
+};
+export var Error = {
+  args: {
+    children: "An error occurred. Please try again.",
+    dismissable: true,
+    variant: "error"
+  }
+};
+export var Brand = {
+  args: {
+    children: "Welcome to our brand new feature!",
+    dismissable: true,
+    variant: "brand"
+  }
+};
+export var NonDismissable = {
+  args: {
+    children: "This banner cannot be dismissed.",
+    dismissable: false
+  }
+};
+//# sourceMappingURL=Banner.story.js.map

package/dist/esm/elements/Banner/Banner.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.story.js","names":["Banner","STORYBOOK_PROPS_BLOCKLIST","title","component","tags","parameters","docs","description","controls","exclude","DefaultLight","args","children","dismissable","variant","DefaultDark","Success","Error","Brand","NonDismissable"],"sources":["../../../../src/elements/Banner/Banner.story.tsx"],"sourcesContent":["import { Banner } from \"./Banner\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  title: \"Components/Banner\",\n  component: Banner,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Banner component for displaying important messages to users with various styles and dismissible options.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const DefaultLight = {\n  args: {\n    children:\n      \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae natus assumenda distinctio, voluptatum magni.\",\n    dismissable: true,\n    variant: \"defaultLight\",\n  },\n}\n\nexport const DefaultDark = {\n  args: {\n    children:\n      \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae natus assumenda distinctio, voluptatum magni.\",\n    dismissable: true,\n    variant: \"defaultDark\",\n  },\n}\n\nexport const Success = {\n  args: {\n    children: \"Operation completed successfully!\",\n    dismissable: true,\n    variant: \"success\",\n  },\n}\n\nexport const Error = {\n  args: {\n    children: \"An error occurred. Please try again.\",\n    dismissable: true,\n    variant: \"error\",\n  },\n}\n\nexport const Brand = {\n  args: {\n    children: \"Welcome to our brand new feature!\",\n    dismissable: true,\n    variant: \"brand\",\n  },\n}\n\nexport const NonDismissable = {\n  args: {\n    children: \"This banner cannot be dismissed.\",\n    dismissable: false,\n  },\n}\n"],"mappings":"AAAA,SAASA,MAAM;AACf,SAASC,yBAAyB;AAElC,eAAe;EACbC,KAAK,EAAE,mBAAmB;EAC1BC,SAAS,EAAEH,MAAM;EACjBI,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXJ,SAAS,EACP;MACJ,CAAC;MACDK,QAAQ,EAAE;QACRC,OAAO,EAAER;MACX;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMS,YAAY,GAAG;EAC1BC,IAAI,EAAE;IACJC,QAAQ,EACN,wHAAwH;IAC1HC,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE;EACX;AACF,CAAC;AAED,OAAO,IAAMC,WAAW,GAAG;EACzBJ,IAAI,EAAE;IACJC,QAAQ,EACN,wHAAwH;IAC1HC,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE;EACX;AACF,CAAC;AAED,OAAO,IAAME,OAAO,GAAG;EACrBL,IAAI,EAAE;IACJC,QAAQ,EAAE,mCAAmC;IAC7CC,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE;EACX;AACF,CAAC;AAED,OAAO,IAAMG,KAAK,GAAG;EACnBN,IAAI,EAAE;IACJC,QAAQ,EAAE,sCAAsC;IAChDC,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE;EACX;AACF,CAAC;AAED,OAAO,IAAMI,KAAK,GAAG;EACnBP,IAAI,EAAE;IACJC,QAAQ,EAAE,mCAAmC;IAC7CC,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE;EACX;AACF,CAAC;AAED,OAAO,IAAMK,cAAc,GAAG;EAC5BR,IAAI,EAAE;IACJC,QAAQ,EAAE,kCAAkC;IAC5CC,WAAW,EAAE;EACf;AACF,CAAC"}

package/dist/esm/elements/Banner/index.js

@@ -0,0 +1,2 @@
+export * from "./Banner";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/Banner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/Banner/index.tsx"],"sourcesContent":["export * from \"./Banner\"\n"],"mappings":"AAAA"}

package/dist/esm/elements/BaseTabs/BaseTab.js

@@ -0,0 +1,40 @@
+import styled, { css } from "styled-components";
+import { Clickable } from "../Clickable";
+import { Text } from "../Text";
+import { STATES } from "./tokens";
+
+/**
+ * Utilize as="a" or as={Component} to alter functionality
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+/**
+ * Extends `Text`. Should always be nested within a `BaseTabs` container.
+ *
+ * Use the `as` prop to alter behavior.
+ * E.g.: `<BaseTab as={RouterLink} to="/foo">Foo</BaseTab>`
+ * or `<BaseTab as={Clickable} onClick={handleClick}>Foo</BaseTab>`
+ */
+export var BaseTab = styled(Text).withConfig({
+  displayName: "BaseTab",
+  componentId: "sc-1qn17bx-0"
+})(["display:flex;width:100%;position:relative;text-decoration:none;white-space:nowrap;z-index:1;", ""], function (props) {
+  return css(["", " ", " ", " ", " &:hover:not(:disabled){", "}&:focus{outline:0;", "}"], STATES.default, props.hover && STATES.hover, props.focus && STATES.focus, props.active && STATES.active, STATES.hover, STATES.focus);
+});
+BaseTab.defaultProps = {
+  variant: "sm",
+  mb: "-1px",
+  alignItems: "flex-start",
+  justifyContent: "center",
+  textAlign: "center"
+};
+BaseTab.displayName = "BaseTab";
+
+/**
+ * So this is interesting: We can trick styled-components into correcting the CSS specificity (Text > Clickable)
+ * by simply including a Clickable here.
+ */
+// @ts-expect-error  MIGRATE_STRICT_MODE
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+var __Ignore__ = Clickable;
+//# sourceMappingURL=BaseTab.js.map

package/dist/esm/elements/BaseTabs/BaseTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTab.js","names":["styled","css","Clickable","Text","STATES","BaseTab","withConfig","displayName","componentId","props","default","hover","focus","active","defaultProps","variant","mb","alignItems","justifyContent","textAlign","__Ignore__"],"sources":["../../../../src/elements/BaseTabs/BaseTab.tsx"],"sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Clickable } from \"../Clickable\"\nimport { Text, TextProps } from \"../Text\"\nimport { STATES } from \"./tokens\"\n\n/**\n * Utilize as=\"a\" or as={Component} to alter functionality\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type BaseTabProps<C extends React.ComponentType<React.PropsWithChildren<unknown>> = any> = TextProps & {\n  active?: boolean\n  focus?: boolean\n  hover?: boolean\n} & React.ComponentPropsWithoutRef<C> & { as?: C }\n\n/**\n * Extends `Text`. Should always be nested within a `BaseTabs` container.\n *\n * Use the `as` prop to alter behavior.\n * E.g.: `<BaseTab as={RouterLink} to=\"/foo\">Foo</BaseTab>`\n * or `<BaseTab as={Clickable} onClick={handleClick}>Foo</BaseTab>`\n */\nexport const BaseTab = styled(Text)<BaseTabProps>`\n  display: flex;\n  width: 100%;\n  position: relative;\n  text-decoration: none;\n  white-space: nowrap;\n  z-index: 1;\n\n  ${(props) => {\n    return css`\n      ${STATES.default}\n      ${props.hover && STATES.hover}\n      ${props.focus && STATES.focus}\n      ${props.active && STATES.active}\n\n      &:hover:not(:disabled) {\n        ${STATES.hover}\n      }\n\n      &:focus {\n        outline: 0;\n        ${STATES.focus}\n      }\n    `\n  }}\n`\n\nBaseTab.defaultProps = {\n  variant: \"sm\",\n  mb: \"-1px\",\n  alignItems: \"flex-start\",\n  justifyContent: \"center\",\n  textAlign: \"center\",\n}\n\nBaseTab.displayName = \"BaseTab\"\n\n/**\n * So this is interesting: We can trick styled-components into correcting the CSS specificity (Text > Clickable)\n * by simply including a Clickable here.\n */\n// @ts-expect-error  MIGRATE_STRICT_MODE\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst __Ignore__ = Clickable\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,SAAS;AAClB,SAASC,IAAI;AACb,SAASC,MAAM;;AAEf;AACA;AACA;AACA;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAGL,MAAM,CAACG,IAAI,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yGAQ/B,UAACC,KAAK,EAAK;EACX,OAAOR,GAAG,8EACNG,MAAM,CAACM,OAAO,EACdD,KAAK,CAACE,KAAK,IAAIP,MAAM,CAACO,KAAK,EAC3BF,KAAK,CAACG,KAAK,IAAIR,MAAM,CAACQ,KAAK,EAC3BH,KAAK,CAACI,MAAM,IAAIT,MAAM,CAACS,MAAM,EAG3BT,MAAM,CAACO,KAAK,EAKZP,MAAM,CAACQ,KAAK;AAGpB,CAAC,CACF;AAEDP,OAAO,CAACS,YAAY,GAAG;EACrBC,OAAO,EAAE,IAAI;EACbC,EAAE,EAAE,MAAM;EACVC,UAAU,EAAE,YAAY;EACxBC,cAAc,EAAE,QAAQ;EACxBC,SAAS,EAAE;AACb,CAAC;AAEDd,OAAO,CAACE,WAAW,GAAG,SAAS;;AAE/B;AACA;AACA;AACA;AACA;AACA;AACA,IAAMa,UAAU,GAAGlB,SAAS"}

package/dist/esm/elements/BaseTabs/BaseTabs.js

@@ -0,0 +1,37 @@
+var _excluded = ["fill", "children"];
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { forwardRef, useMemo } from "react";
+import { flattenChildren } from "../../helpers/flattenChildren";
+import { Box } from "../Box";
+import { HorizontalOverflow } from "../HorizontalOverflow/HorizontalOverflow";
+import { Join } from "../Join";
+
+/** Extends `Box` */
+
+/** Extends `Box`, provides configurable gutter */
+export var BaseTabs = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var fill = _ref.fill,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var cells = useMemo(function () {
+    return flattenChildren(children);
+  }, [children]);
+  return /*#__PURE__*/React.createElement(HorizontalOverflow, _extends({
+    ref: forwardedRef,
+    borderBottom: "1px solid",
+    borderBottomColor: "mono10"
+  }, rest), /*#__PURE__*/React.createElement(Join, {
+    separator: /*#__PURE__*/React.createElement(React.Fragment, null)
+  }, cells.map(function (child, i) {
+    return /*#__PURE__*/React.createElement(Box, {
+      key: i,
+      display: "inline-flex",
+      textAlign: "center",
+      flex: fill ? 1 : undefined
+    }, child);
+  })));
+});
+BaseTabs.displayName = "BaseTabs";
+//# sourceMappingURL=BaseTabs.js.map

package/dist/esm/elements/BaseTabs/BaseTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTabs.js","names":["React","forwardRef","useMemo","flattenChildren","Box","HorizontalOverflow","Join","BaseTabs","_ref","forwardedRef","fill","children","rest","_objectWithoutProperties","_excluded","cells","createElement","_extends","ref","borderBottom","borderBottomColor","separator","Fragment","map","child","i","key","display","textAlign","flex","undefined","displayName"],"sources":["../../../../src/elements/BaseTabs/BaseTabs.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { Box, BoxProps } from \"../Box\"\nimport { HorizontalOverflow } from \"../HorizontalOverflow/HorizontalOverflow\"\nimport { Join } from \"../Join\"\n\n/** Extends `Box` */\nexport type BaseTabsProps = BoxProps &\n  Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n    /**\n     * Enable if tabs should fill the width of the container\n     * (as opposed to left-align)\n     */\n    fill?: boolean\n    children: React.ReactNode\n  }\n\n/** Extends `Box`, provides configurable gutter */\nexport const BaseTabs: React.ForwardRefExoticComponent<\n  BaseTabsProps & React.RefAttributes<HTMLDivElement>\n> = forwardRef(({ fill, children, ...rest }, forwardedRef) => {\n  const cells = useMemo(() => flattenChildren(children), [children])\n\n  return (\n    <HorizontalOverflow\n      ref={forwardedRef}\n      borderBottom=\"1px solid\"\n      borderBottomColor=\"mono10\"\n      {...rest}\n    >\n      <Join separator={<></>}>\n        {cells.map((child, i) => {\n          return (\n            <Box\n              key={i}\n              display=\"inline-flex\"\n              textAlign=\"center\"\n              flex={fill ? 1 : undefined}\n            >\n              {child}\n            </Box>\n          )\n        })}\n      </Join>\n    </HorizontalOverflow>\n  )\n})\n\nBaseTabs.displayName = \"BaseTabs\"\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,SAASC,eAAe;AACxB,SAASC,GAAG;AACZ,SAASC,kBAAkB;AAC3B,SAASC,IAAI;;AAEb;;AAWA;AACA,OAAO,IAAMC,QAEZ,gBAAGN,UAAU,CAAC,UAAAO,IAAA,EAA8BC,YAAY,EAAK;EAAA,IAA5CC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAKC,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EACvC,IAAMC,KAAK,GAAGb,OAAO,CAAC;IAAA,OAAMC,eAAe,CAACQ,QAAQ,CAAC;EAAA,GAAE,CAACA,QAAQ,CAAC,CAAC;EAElE,oBACEX,KAAA,CAAAgB,aAAA,CAACX,kBAAkB,EAAAY,QAAA;IACjBC,GAAG,EAAET,YAAa;IAClBU,YAAY,EAAC,WAAW;IACxBC,iBAAiB,EAAC;EAAQ,GACtBR,IAAI,gBAERZ,KAAA,CAAAgB,aAAA,CAACV,IAAI;IAACe,SAAS,eAAErB,KAAA,CAAAgB,aAAA,CAAAhB,KAAA,CAAAsB,QAAA;EAAM,GACpBP,KAAK,CAACQ,GAAG,CAAC,UAACC,KAAK,EAAEC,CAAC,EAAK;IACvB,oBACEzB,KAAA,CAAAgB,aAAA,CAACZ,GAAG;MACFsB,GAAG,EAAED,CAAE;MACPE,OAAO,EAAC,aAAa;MACrBC,SAAS,EAAC,QAAQ;MAClBC,IAAI,EAAEnB,IAAI,GAAG,CAAC,GAAGoB;IAAU,GAE1BN,KAAK,CACF;EAEV,CAAC,CAAC,CACG,CACY;AAEzB,CAAC,CAAC;AAEFjB,QAAQ,CAACwB,WAAW,GAAG,UAAU"}

package/dist/esm/elements/BaseTabs/BaseTabs.story.js

@@ -0,0 +1,126 @@
+var _excluded = ["to", "children"];
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { fn } from "@storybook/test";
+import React from "react";
+import { BaseTab, BaseTabs } from "../BaseTabs";
+import { Box } from "../Box";
+import { Clickable } from "../Clickable";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+
+// Fake `RouterLink`
+var RouterLink = function RouterLink(_ref) {
+  var to = _ref.to,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: to
+  }, rest), children);
+};
+RouterLink.displayName = "RouterLink";
+export default {
+  title: "Components/BaseTabs",
+  component: BaseTabs,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "BaseTabs component for creating tabbed navigation interfaces. Provides horizontal overflow handling and supports various tab configurations including fill width and custom tab implementations."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+export var Default = {
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseTab, null, "First"), /*#__PURE__*/React.createElement(BaseTab, null, "Second"), /*#__PURE__*/React.createElement(BaseTab, {
+      active: true
+    }, "Active"), /*#__PURE__*/React.createElement(BaseTab, null, "Last"))
+  }
+};
+export var WithFill = {
+  args: {
+    fill: true,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseTab, null, "First"), /*#__PURE__*/React.createElement(BaseTab, null, "Second"), /*#__PURE__*/React.createElement(BaseTab, {
+      active: true
+    }, "Active"), /*#__PURE__*/React.createElement(BaseTab, null, "Last"))
+  }
+};
+export var AsAnchorTags = {
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseTab, {
+      as: "a",
+      href: "#overview"
+    }, "Overview"), /*#__PURE__*/React.createElement(BaseTab, {
+      as: "a",
+      href: "#cv"
+    }, "CV"), /*#__PURE__*/React.createElement(BaseTab, {
+      as: "a",
+      href: "#shows",
+      active: true
+    }, "Shows"), /*#__PURE__*/React.createElement(BaseTab, {
+      as: "a",
+      href: "#articles"
+    }, "Articles"))
+  }
+};
+export var AsClickable = {
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseTab, {
+      as: Clickable,
+      onClick: fn()
+    }, "Overview"), /*#__PURE__*/React.createElement(BaseTab, {
+      as: Clickable,
+      onClick: fn()
+    }, "CV"), /*#__PURE__*/React.createElement(BaseTab, {
+      as: Clickable,
+      onClick: fn(),
+      active: true
+    }, "Shows"), /*#__PURE__*/React.createElement(BaseTab, {
+      as: Clickable,
+      onClick: fn()
+    }, "Articles"))
+  }
+};
+export var AsRouterLink = {
+  args: {
+    children: /*#__PURE__*/React.createElement(BaseTab, {
+      as: RouterLink,
+      to: "#example",
+      activeClassName: "active"
+    }, "Example")
+  }
+};
+export var Overflowing = {
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseTab, null, "Artworks (580656)"), /*#__PURE__*/React.createElement(BaseTab, {
+      active: true
+    }, "Artists (8)"), /*#__PURE__*/React.createElement(BaseTab, null, "Collections (7)"), /*#__PURE__*/React.createElement(BaseTab, null, "Artist Series (13)"), /*#__PURE__*/React.createElement(BaseTab, null, "Galleries (4)"), /*#__PURE__*/React.createElement(BaseTab, null, "Shows (3667)"), /*#__PURE__*/React.createElement(BaseTab, null, "Categories (21)"), /*#__PURE__*/React.createElement(BaseTab, null, "Articles (656)"), /*#__PURE__*/React.createElement(BaseTab, null, "Auctions (23)"), /*#__PURE__*/React.createElement(BaseTab, null, "More (46)"))
+  }
+};
+export var BreakingOutOfContainerMargin = {
+  args: {
+    mx: -6,
+    px: 6,
+    children: /*#__PURE__*/React.createElement(BaseTab, {
+      active: true
+    }, "Rail border should extend past container")
+  },
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(Box, {
+      m: 6,
+      bg: "mono10"
+    }, /*#__PURE__*/React.createElement(Story, null));
+  }]
+};
+export var NestedChildren = {
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseTab, null, "First"), /*#__PURE__*/React.createElement(BaseTab, null, "Second"), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseTab, {
+      active: true
+    }, "Active"), /*#__PURE__*/React.createElement(BaseTab, null, "Last")))
+  }
+};
+//# sourceMappingURL=BaseTabs.story.js.map

package/dist/esm/elements/BaseTabs/BaseTabs.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTabs.story.js","names":["fn","React","BaseTab","BaseTabs","Box","Clickable","STORYBOOK_PROPS_BLOCKLIST","RouterLink","_ref","to","children","rest","_objectWithoutProperties","_excluded","createElement","_extends","href","displayName","title","component","tags","parameters","docs","description","controls","exclude","Default","args","Fragment","active","WithFill","fill","AsAnchorTags","as","AsClickable","onClick","AsRouterLink","activeClassName","Overflowing","BreakingOutOfContainerMargin","mx","px","decorators","Story","m","bg","NestedChildren"],"sources":["../../../../src/elements/BaseTabs/BaseTabs.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React from \"react\"\nimport { BaseTab, BaseTabs } from \"../BaseTabs\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\n// Fake `RouterLink`\nconst RouterLink: React.FC<React.PropsWithChildren<{ to: string }>> = ({\n  to,\n  children,\n  ...rest\n}) => {\n  return (\n    <a href={to} {...rest}>\n      {children}\n    </a>\n  )\n}\n\nexport default {\n  title: \"Components/BaseTabs\",\n  component: BaseTabs,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"BaseTabs component for creating tabbed navigation interfaces. Provides horizontal overflow handling and supports various tab configurations including fill width and custom tab implementations.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    children: (\n      <>\n        <BaseTab>First</BaseTab>\n        <BaseTab>Second</BaseTab>\n        <BaseTab active>Active</BaseTab>\n        <BaseTab>Last</BaseTab>\n      </>\n    ),\n  },\n}\n\nexport const WithFill = {\n  args: {\n    fill: true,\n    children: (\n      <>\n        <BaseTab>First</BaseTab>\n        <BaseTab>Second</BaseTab>\n        <BaseTab active>Active</BaseTab>\n        <BaseTab>Last</BaseTab>\n      </>\n    ),\n  },\n}\n\nexport const AsAnchorTags = {\n  args: {\n    children: (\n      <>\n        <BaseTab as=\"a\" href=\"#overview\">\n          Overview\n        </BaseTab>\n        <BaseTab as=\"a\" href=\"#cv\">\n          CV\n        </BaseTab>\n        <BaseTab as=\"a\" href=\"#shows\" active>\n          Shows\n        </BaseTab>\n        <BaseTab as=\"a\" href=\"#articles\">\n          Articles\n        </BaseTab>\n      </>\n    ),\n  },\n}\n\nexport const AsClickable = {\n  args: {\n    children: (\n      <>\n        <BaseTab as={Clickable} onClick={fn()}>\n          Overview\n        </BaseTab>\n        <BaseTab as={Clickable} onClick={fn()}>\n          CV\n        </BaseTab>\n        <BaseTab as={Clickable} onClick={fn()} active>\n          Shows\n        </BaseTab>\n        <BaseTab as={Clickable} onClick={fn()}>\n          Articles\n        </BaseTab>\n      </>\n    ),\n  },\n}\n\nexport const AsRouterLink = {\n  args: {\n    children: (\n      <BaseTab as={RouterLink} to=\"#example\" activeClassName=\"active\">\n        Example\n      </BaseTab>\n    ),\n  },\n}\n\nexport const Overflowing = {\n  args: {\n    children: (\n      <>\n        <BaseTab>Artworks (580656)</BaseTab>\n        <BaseTab active>Artists (8)</BaseTab>\n        <BaseTab>Collections (7)</BaseTab>\n        <BaseTab>Artist Series (13)</BaseTab>\n        <BaseTab>Galleries (4)</BaseTab>\n        <BaseTab>Shows (3667)</BaseTab>\n        <BaseTab>Categories (21)</BaseTab>\n        <BaseTab>Articles (656)</BaseTab>\n        <BaseTab>Auctions (23)</BaseTab>\n        <BaseTab>More (46)</BaseTab>\n      </>\n    ),\n  },\n}\n\nexport const BreakingOutOfContainerMargin = {\n  args: {\n    mx: -6,\n    px: 6,\n    children: (\n      <BaseTab active>Rail border should extend past container</BaseTab>\n    ),\n  },\n  decorators: [\n    (Story) => (\n      <Box m={6} bg=\"mono10\">\n        <Story />\n      </Box>\n    ),\n  ],\n}\n\nexport const NestedChildren = {\n  args: {\n    children: (\n      <>\n        <BaseTab>First</BaseTab>\n        <BaseTab>Second</BaseTab>\n        <>\n          <BaseTab active>Active</BaseTab>\n          <BaseTab>Last</BaseTab>\n        </>\n      </>\n    ),\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/BaseTabs/index.js

@@ -0,0 +1,3 @@
+export * from "./BaseTab";
+export * from "./BaseTabs";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/BaseTabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/BaseTabs/index.ts"],"sourcesContent":["export * from \"./BaseTab\"\nexport * from \"./BaseTabs\"\n"],"mappings":"AAAA;AACA"}

package/dist/esm/elements/BaseTabs/tokens.js

@@ -0,0 +1,9 @@
+import { themeGet } from "@styled-system/theme-get";
+import { css } from "styled-components";
+export var STATES = {
+  default: css(["height:40px;padding:0 ", ";color:", ";border-bottom:1px solid transparent;"], themeGet("space.2"), themeGet("colors.mono60")),
+  active: css(["outline:0;color:", ";border-bottom-color:", ";&:hover{text-decoration:none !important;color:inherit !important;}"], themeGet("colors.mono100"), themeGet("colors.mono100")),
+  focus: css(["text-decoration:underline;color:", ";"], themeGet("colors.mono100")),
+  hover: css(["text-decoration:underline;color:", ";"], themeGet("colors.blue100"))
+};
+//# sourceMappingURL=tokens.js.map

package/dist/esm/elements/BaseTabs/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":["themeGet","css","STATES","default","active","focus","hover"],"sources":["../../../../src/elements/BaseTabs/tokens.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\n\nexport const STATES = {\n  default: css`\n    height: 40px;\n    padding: 0 ${themeGet(\"space.2\")};\n    color: ${themeGet(\"colors.mono60\")};\n    border-bottom: 1px solid transparent;\n  `,\n  active: css`\n    outline: 0;\n    color: ${themeGet(\"colors.mono100\")};\n    border-bottom-color: ${themeGet(\"colors.mono100\")};\n\n    &:hover {\n      text-decoration: none !important;\n      color: inherit !important;\n    }\n  `,\n  focus: css`\n    text-decoration: underline;\n    color: ${themeGet(\"colors.mono100\")};\n  `,\n  hover: css`\n    text-decoration: underline;\n    color: ${themeGet(\"colors.blue100\")};\n  `,\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAAQ,mBAAmB;AAEvC,OAAO,IAAMC,MAAM,GAAG;EACpBC,OAAO,EAAEF,GAAG,iFAEGD,QAAQ,CAAC,SAAS,CAAC,EACvBA,QAAQ,CAAC,eAAe,CAAC,CAEnC;EACDI,MAAM,EAAEH,GAAG,uHAEAD,QAAQ,CAAC,gBAAgB,CAAC,EACZA,QAAQ,CAAC,gBAAgB,CAAC,CAMlD;EACDK,KAAK,EAAEJ,GAAG,4CAECD,QAAQ,CAAC,gBAAgB,CAAC,CACpC;EACDM,KAAK,EAAEL,GAAG,4CAECD,QAAQ,CAAC,gBAAgB,CAAC;AAEvC,CAAC"}

package/dist/esm/elements/BorderBox/BorderBox.js

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import { Box } from "../Box";
+/**
+ * A `div` that has a common border and padding set by default
+ * @deprecated: Use `Box` along with props e.g. `border="1px solid" borderColor="mono10" p={2}`,
+ * as needed.
+ */
+export var BorderBox = styled(Box).withConfig({
+  displayName: "BorderBox",
+  componentId: "sc-18mwadn-0"
+})(["border-width:1px;border-style:solid;"]);
+BorderBox.displayName = "BorderBox";
+BorderBox.defaultProps = {
+  borderColor: "mono10",
+  p: 2
+};
+//# sourceMappingURL=BorderBox.js.map

package/dist/esm/elements/BorderBox/BorderBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BorderBox.js","names":["styled","Box","BorderBox","withConfig","displayName","componentId","defaultProps","borderColor","p"],"sources":["../../../../src/elements/BorderBox/BorderBox.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport type BorderBoxProps = BoxProps\n\n/**\n * A `div` that has a common border and padding set by default\n * @deprecated: Use `Box` along with props e.g. `border=\"1px solid\" borderColor=\"mono10\" p={2}`,\n * as needed.\n */\nexport const BorderBox = styled(Box)`\n  border-width: 1px;\n  border-style: solid;\n`\n\nBorderBox.displayName = \"BorderBox\"\n\nBorderBox.defaultProps = {\n  borderColor: \"mono10\",\n  p: 2,\n}\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG;AAIZ;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAGF,MAAM,CAACC,GAAG,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4CAGnC;AAEDH,SAAS,CAACE,WAAW,GAAG,WAAW;AAEnCF,SAAS,CAACI,YAAY,GAAG;EACvBC,WAAW,EAAE,QAAQ;EACrBC,CAAC,EAAE;AACL,CAAC"}

package/dist/esm/elements/BorderBox/BorderBoxBase.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import { Flex } from "../Flex";
+/**
+ * A `div` that has a common border and padding set by default
+ * @deprecated: Use `Box`
+ */
+export var BorderBoxBase = styled(Flex).withConfig({
+  displayName: "BorderBoxBase",
+  componentId: "sc-1072ama-0"
+})(["border-width:1px;border-style:solid;"]);
+BorderBoxBase.defaultProps = {
+  borderColor: "mono10",
+  p: 2
+};
+//# sourceMappingURL=BorderBoxBase.js.map

package/dist/esm/elements/BorderBox/BorderBoxBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BorderBoxBase.js","names":["styled","Flex","BorderBoxBase","withConfig","displayName","componentId","defaultProps","borderColor","p"],"sources":["../../../../src/elements/BorderBox/BorderBoxBase.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Flex, FlexProps } from \"../Flex\"\n\nexport interface BorderBoxProps extends FlexProps {\n  hover?: boolean\n}\n\n/**\n * A `div` that has a common border and padding set by default\n * @deprecated: Use `Box`\n */\nexport const BorderBoxBase = styled(Flex)<BorderBoxProps>`\n  border-width: 1px;\n  border-style: solid;\n`\n\nBorderBoxBase.defaultProps = {\n  borderColor: \"mono10\",\n  p: 2,\n}\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,IAAI;AAMb;AACA;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAGF,MAAM,CAACC,IAAI,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4CAGxC;AAEDH,aAAa,CAACI,YAAY,GAAG;EAC3BC,WAAW,EAAE,QAAQ;EACrBC,CAAC,EAAE;AACL,CAAC"}

package/dist/esm/elements/BorderBox/index.js

@@ -0,0 +1,3 @@
+export * from "./BorderBox";
+export { BorderBoxProps } from "./BorderBoxBase";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/BorderBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["BorderBoxProps"],"sources":["../../../../src/elements/BorderBox/index.tsx"],"sourcesContent":["export * from \"./BorderBox\"\nexport { BorderBoxProps } from \"./BorderBoxBase\"\n"],"mappings":"AAAA;AACA,SAASA,cAAc"}

package/dist/esm/elements/BorderedRadio/BorderedRadio.js

@@ -0,0 +1,9 @@
+import { themeGet } from "@styled-system/theme-get";
+import styled from "styled-components";
+import { Radio } from "../Radio";
+/** A radio button with a border */
+export var BorderedRadio = styled(Radio).withConfig({
+  displayName: "BorderedRadio",
+  componentId: "sc-1499ebf-0"
+})(["padding:", ";border-radius:2px;border:1px solid ", ";transition:background-color 0.25s;&:hover:not(:disabled){background-color:", ";}&:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;}&:not(:last-child){border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;}"], themeGet("space.2"), themeGet("colors.mono10"), themeGet("colors.mono5"));
+//# sourceMappingURL=BorderedRadio.js.map

package/dist/esm/elements/BorderedRadio/BorderedRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BorderedRadio.js","names":["themeGet","styled","Radio","BorderedRadio","withConfig","displayName","componentId"],"sources":["../../../../src/elements/BorderedRadio/BorderedRadio.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport styled from \"styled-components\"\nimport { Radio, RadioProps } from \"../Radio\"\n\nexport type BorderedRadioProps<T = any> = RadioProps<T>\n\n/** A radio button with a border */\nexport const BorderedRadio = styled(Radio)<BorderedRadioProps>`\n  padding: ${themeGet(\"space.2\")};\n  border-radius: 2px;\n  border: 1px solid ${themeGet(\"colors.mono10\")};\n  transition: background-color 0.25s;\n\n  &:hover:not(:disabled) {\n    background-color: ${themeGet(\"colors.mono5\")};\n  }\n\n  &:not(:first-child) {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  &:not(:last-child) {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n`\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,KAAK;AAId;AACA,OAAO,IAAMC,aAAa,GAAGF,MAAM,CAACC,KAAK,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mTAC7BN,QAAQ,CAAC,SAAS,CAAC,EAEVA,QAAQ,CAAC,eAAe,CAAC,EAIvBA,QAAQ,CAAC,cAAc,CAAC,CAa/C"}

package/dist/esm/elements/BorderedRadio/BorderedRadio.story.js

@@ -0,0 +1,99 @@
+import { fn } from "@storybook/test";
+import React from "react";
+import { RadioGroup } from "../RadioGroup";
+import { BorderedRadio } from "./BorderedRadio";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  title: "Components/BorderedRadio",
+  component: BorderedRadio,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "BorderedRadio component provides a radio button with border styling. Designed to be used within RadioGroup for creating radio button lists with consistent visual borders."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+export var Default = {
+  args: {
+    value: "option1",
+    children: "Option 1"
+  }
+};
+export var WithPreselected = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(RadioGroup, {
+      defaultValue: "Aural",
+      onSelect: fn()
+    }, /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Visual"
+    }, "Visual"), /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Linguistic"
+    }, "Linguistic"), /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Spatial"
+    }, "Spatial"), /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Aural"
+    }, "Aural"), /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Gestural"
+    }, "Gestural"));
+  }
+};
+export var WithDeselectable = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(RadioGroup, {
+      deselectable: true,
+      onSelect: fn()
+    }, /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Visual"
+    }, "Visual"), /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Linguistic"
+    }, "Linguistic"), /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Spatial"
+    }, "Spatial"), /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Aural"
+    }, "Aural"), /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Gestural"
+    }, "Gestural"));
+  }
+};
+export var WithDisabledOption = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(RadioGroup, {
+      onSelect: fn()
+    }, /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Visual"
+    }, "Visual"), /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Linguistic",
+      disabled: true
+    }, "Linguistic (Disabled)"), /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Spatial"
+    }, "Spatial"), /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Aural"
+    }, "Aural"), /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Gestural"
+    }, "Gestural"));
+  }
+};
+export var WithErrorState = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(RadioGroup, {
+      onSelect: fn()
+    }, /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Visual"
+    }, "Visual"), /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Linguistic"
+    }, "Linguistic"), /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Spatial",
+      error: true
+    }, "Spatial (Error)"), /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Aural"
+    }, "Aural"), /*#__PURE__*/React.createElement(BorderedRadio, {
+      value: "Gestural"
+    }, "Gestural"));
+  }
+};
+//# sourceMappingURL=BorderedRadio.story.js.map

package/dist/esm/elements/BorderedRadio/BorderedRadio.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BorderedRadio.story.js","names":["fn","React","RadioGroup","BorderedRadio","STORYBOOK_PROPS_BLOCKLIST","title","component","tags","parameters","docs","description","controls","exclude","Default","args","value","children","WithPreselected","render","createElement","defaultValue","onSelect","WithDeselectable","deselectable","WithDisabledOption","disabled","WithErrorState","error"],"sources":["../../../../src/elements/BorderedRadio/BorderedRadio.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React from \"react\"\nimport { RadioGroup } from \"../RadioGroup\"\nimport { BorderedRadio } from \"./BorderedRadio\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  title: \"Components/BorderedRadio\",\n  component: BorderedRadio,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"BorderedRadio component provides a radio button with border styling. Designed to be used within RadioGroup for creating radio button lists with consistent visual borders.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    value: \"option1\",\n    children: \"Option 1\",\n  },\n}\n\nexport const WithPreselected = {\n  render: () => (\n    <RadioGroup defaultValue=\"Aural\" onSelect={fn()}>\n      <BorderedRadio value=\"Visual\">Visual</BorderedRadio>\n      <BorderedRadio value=\"Linguistic\">Linguistic</BorderedRadio>\n      <BorderedRadio value=\"Spatial\">Spatial</BorderedRadio>\n      <BorderedRadio value=\"Aural\">Aural</BorderedRadio>\n      <BorderedRadio value=\"Gestural\">Gestural</BorderedRadio>\n    </RadioGroup>\n  ),\n}\n\nexport const WithDeselectable = {\n  render: () => (\n    <RadioGroup deselectable onSelect={fn()}>\n      <BorderedRadio value=\"Visual\">Visual</BorderedRadio>\n      <BorderedRadio value=\"Linguistic\">Linguistic</BorderedRadio>\n      <BorderedRadio value=\"Spatial\">Spatial</BorderedRadio>\n      <BorderedRadio value=\"Aural\">Aural</BorderedRadio>\n      <BorderedRadio value=\"Gestural\">Gestural</BorderedRadio>\n    </RadioGroup>\n  ),\n}\n\nexport const WithDisabledOption = {\n  render: () => (\n    <RadioGroup onSelect={fn()}>\n      <BorderedRadio value=\"Visual\">Visual</BorderedRadio>\n      <BorderedRadio value=\"Linguistic\" disabled>\n        Linguistic (Disabled)\n      </BorderedRadio>\n      <BorderedRadio value=\"Spatial\">Spatial</BorderedRadio>\n      <BorderedRadio value=\"Aural\">Aural</BorderedRadio>\n      <BorderedRadio value=\"Gestural\">Gestural</BorderedRadio>\n    </RadioGroup>\n  ),\n}\n\nexport const WithErrorState = {\n  render: () => (\n    <RadioGroup onSelect={fn()}>\n      <BorderedRadio value=\"Visual\">Visual</BorderedRadio>\n      <BorderedRadio value=\"Linguistic\">Linguistic</BorderedRadio>\n      <BorderedRadio value=\"Spatial\" error>\n        Spatial (Error)\n      </BorderedRadio>\n      <BorderedRadio value=\"Aural\">Aural</BorderedRadio>\n      <BorderedRadio value=\"Gestural\">Gestural</BorderedRadio>\n    </RadioGroup>\n  ),\n}\n"],"mappings":"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"}

package/dist/esm/elements/BorderedRadio/index.js

@@ -0,0 +1,2 @@
+export * from "./BorderedRadio";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/BorderedRadio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/BorderedRadio/index.ts"],"sourcesContent":["export * from \"./BorderedRadio\"\n"],"mappings":"AAAA"}

package/dist/esm/elements/Box/Box.js

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { background, border, boxShadow, color, compose, flexbox, gridArea, layout, position, space, system, textAlign } from "styled-system";
+import { splitProps } from "../../utils/splitProps";
+var gap = system({
+  gap: {
+    property: "gap",
+    scale: "space"
+  }
+});
+export var pointerEvents = system({
+  pointerEvents: {
+    property: "pointerEvents",
+    scale: "pointerEvents" // Optional if you're using a theme scale
+  }
+});
+
+/**
+ * All the system functions for Box
+ */
+export var boxMixin = compose(background, border, boxShadow, color, flexbox, gap, gridArea, layout, pointerEvents, position, space, textAlign);
+
+/**
+ * Box is just a `View` or `div` (depending on the platform) with common styled-systems
+ * hooks.
+ */
+export var Box = styled.div.withConfig({
+  displayName: "Box",
+  componentId: "sc-15se88d-0"
+})(["", ""], boxMixin);
+Box.displayName = "Box";
+
+/** Splits out props into valid and invalid BoxProps */
+export var splitBoxProps = splitProps(boxMixin);
+//# sourceMappingURL=Box.js.map

package/dist/esm/elements/Box/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","names":["styled","background","border","boxShadow","color","compose","flexbox","gridArea","layout","position","space","system","textAlign","splitProps","gap","property","scale","pointerEvents","boxMixin","Box","div","withConfig","displayName","componentId","splitBoxProps"],"sources":["../../../../src/elements/Box/Box.tsx"],"sourcesContent":["import styled, { CSSProperties } from \"styled-components\"\nimport {\n  background,\n  BackgroundProps,\n  border,\n  BorderProps,\n  boxShadow,\n  BoxShadowProps,\n  color,\n  ColorProps,\n  compose,\n  flexbox,\n  FlexboxProps,\n  gridArea,\n  GridAreaProps,\n  layout,\n  LayoutProps,\n  position,\n  PositionProps,\n  ResponsiveValue,\n  space,\n  SpaceProps,\n  system,\n  textAlign,\n  TextAlignProps,\n} from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\n\nconst gap = system({\n  gap: {\n    property: \"gap\",\n    scale: \"space\",\n  },\n})\n\nexport const pointerEvents = system({\n  pointerEvents: {\n    property: \"pointerEvents\",\n    scale: \"pointerEvents\", // Optional if you're using a theme scale\n  },\n})\n\nexport interface BoxProps\n  extends BackgroundProps,\n    BorderProps,\n    BoxShadowProps,\n    Omit<ColorProps, \"color\">,\n    FlexboxProps,\n    GridAreaProps,\n    LayoutProps,\n    PositionProps,\n    SpaceProps,\n    TextAlignProps {\n  gap?: ResponsiveValue<string | number>\n  pointerEvents?: ResponsiveValue<CSSProperties[\"pointerEvents\"]>\n}\n\n/**\n * All the system functions for Box\n */\nexport const boxMixin = compose(\n  background,\n  border,\n  boxShadow,\n  color,\n  flexbox,\n  gap,\n  gridArea,\n  layout,\n  pointerEvents,\n  position,\n  space,\n  textAlign\n)\n\n/**\n * Box is just a `View` or `div` (depending on the platform) with common styled-systems\n * hooks.\n */\nexport const Box = styled.div<BoxProps>`\n  ${boxMixin}\n`\n\nBox.displayName = \"Box\"\n\n/** Splits out props into valid and invalid BoxProps */\nexport const splitBoxProps = splitProps<BoxProps>(boxMixin)\n"],"mappings":"AAAA,OAAOA,MAAM,MAAyB,mBAAmB;AACzD,SACEC,UAAU,EAEVC,MAAM,EAENC,SAAS,EAETC,KAAK,EAELC,OAAO,EACPC,OAAO,EAEPC,QAAQ,EAERC,MAAM,EAENC,QAAQ,EAGRC,KAAK,EAELC,MAAM,EACNC,SAAS,QAEJ,eAAe;AACtB,SAASC,UAAU;AAEnB,IAAMC,GAAG,GAAGH,MAAM,CAAC;EACjBG,GAAG,EAAE;IACHC,QAAQ,EAAE,KAAK;IACfC,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAEF,OAAO,IAAMC,aAAa,GAAGN,MAAM,CAAC;EAClCM,aAAa,EAAE;IACbF,QAAQ,EAAE,eAAe;IACzBC,KAAK,EAAE,eAAe,CAAE;EAC1B;AACF,CAAC,CAAC;;AAiBF;AACA;AACA;AACA,OAAO,IAAME,QAAQ,GAAGb,OAAO,CAC7BJ,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,KAAK,EACLE,OAAO,EACPQ,GAAG,EACHP,QAAQ,EACRC,MAAM,EACNS,aAAa,EACbR,QAAQ,EACRC,KAAK,EACLE,SAAS,CACV;;AAED;AACA;AACA;AACA;AACA,OAAO,IAAMO,GAAG,GAAGnB,MAAM,CAACoB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACzBL,QAAQ,CACX;AAEDC,GAAG,CAACG,WAAW,GAAG,KAAK;;AAEvB;AACA,OAAO,IAAME,aAAa,GAAGX,UAAU,CAAWK,QAAQ,CAAC"}