@artsy/palette 45.13.1 → 45.14.0-canary.1497.33065.0

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

@@ -0,0 +1,60 @@
+import React from "react";
+import { Box } from "../Box";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  title: "Components/Box",
+  component: Box,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Box is a fundamental layout primitive component that provides a flexible container with styled-system props for spacing, layout, color, and typography."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+export var Default = {
+  args: {
+    children: "This is a Box component",
+    p: 2,
+    bg: "yellow100"
+  }
+};
+export var WithGap = {
+  args: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 2,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+      bg: "yellow100",
+      p: 1
+    }, "1"), /*#__PURE__*/React.createElement(Box, {
+      bg: "yellow100",
+      p: 1
+    }, "2"), /*#__PURE__*/React.createElement(Box, {
+      bg: "yellow100",
+      p: 1
+    }, "3"))
+  }
+};
+export var ResponsiveGap = {
+  args: {
+    display: "flex",
+    flexDirection: "column",
+    gap: [1, 3],
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+      bg: "yellow100",
+      p: 1
+    }, "Responsive"), /*#__PURE__*/React.createElement(Box, {
+      bg: "yellow100",
+      p: 1
+    }, "Gap"), /*#__PURE__*/React.createElement(Box, {
+      bg: "yellow100",
+      p: 1
+    }, "Values"))
+  }
+};
+//# sourceMappingURL=Box.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Box.story.js","names":["React","Box","STORYBOOK_PROPS_BLOCKLIST","title","component","tags","parameters","docs","description","controls","exclude","Default","args","children","p","bg","WithGap","display","flexDirection","gap","createElement","Fragment","ResponsiveGap"],"sources":["../../../../src/elements/Box/Box.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Box } from \"../Box\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  title: \"Components/Box\",\n  component: Box,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Box is a fundamental layout primitive component that provides a flexible container with styled-system props for spacing, layout, color, and typography.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    children: \"This is a Box component\",\n    p: 2,\n    bg: \"yellow100\",\n  },\n}\n\nexport const WithGap = {\n  args: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: 2,\n    children: (\n      <>\n        <Box bg=\"yellow100\" p={1}>\n          1\n        </Box>\n        <Box bg=\"yellow100\" p={1}>\n          2\n        </Box>\n        <Box bg=\"yellow100\" p={1}>\n          3\n        </Box>\n      </>\n    ),\n  },\n}\n\nexport const ResponsiveGap = {\n  args: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: [1, 3],\n    children: (\n      <>\n        <Box bg=\"yellow100\" p={1}>\n          Responsive\n        </Box>\n        <Box bg=\"yellow100\" p={1}>\n          Gap\n        </Box>\n        <Box bg=\"yellow100\" p={1}>\n          Values\n        </Box>\n      </>\n    ),\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG;AACZ,SAASC,yBAAyB;AAElC,eAAe;EACbC,KAAK,EAAE,gBAAgB;EACvBC,SAAS,EAAEH,GAAG;EACdI,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,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,QAAQ,EAAE,yBAAyB;IACnCC,CAAC,EAAE,CAAC;IACJC,EAAE,EAAE;EACN;AACF,CAAC;AAED,OAAO,IAAMC,OAAO,GAAG;EACrBJ,IAAI,EAAE;IACJK,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,QAAQ;IACvBC,GAAG,EAAE,CAAC;IACNN,QAAQ,eACNb,KAAA,CAAAoB,aAAA,CAAApB,KAAA,CAAAqB,QAAA,qBACErB,KAAA,CAAAoB,aAAA,CAACnB,GAAG;MAACc,EAAE,EAAC,WAAW;MAACD,CAAC,EAAE;IAAE,GAAC,GAE1B,CAAM,eACNd,KAAA,CAAAoB,aAAA,CAACnB,GAAG;MAACc,EAAE,EAAC,WAAW;MAACD,CAAC,EAAE;IAAE,GAAC,GAE1B,CAAM,eACNd,KAAA,CAAAoB,aAAA,CAACnB,GAAG;MAACc,EAAE,EAAC,WAAW;MAACD,CAAC,EAAE;IAAE,GAAC,GAE1B,CAAM;EAGZ;AACF,CAAC;AAED,OAAO,IAAMQ,aAAa,GAAG;EAC3BV,IAAI,EAAE;IACJK,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,QAAQ;IACvBC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IACXN,QAAQ,eACNb,KAAA,CAAAoB,aAAA,CAAApB,KAAA,CAAAqB,QAAA,qBACErB,KAAA,CAAAoB,aAAA,CAACnB,GAAG;MAACc,EAAE,EAAC,WAAW;MAACD,CAAC,EAAE;IAAE,GAAC,YAE1B,CAAM,eACNd,KAAA,CAAAoB,aAAA,CAACnB,GAAG;MAACc,EAAE,EAAC,WAAW;MAACD,CAAC,EAAE;IAAE,GAAC,KAE1B,CAAM,eACNd,KAAA,CAAAoB,aAAA,CAACnB,GAAG;MAACc,EAAE,EAAC,WAAW;MAACD,CAAC,EAAE;IAAE,GAAC,QAE1B,CAAM;EAGZ;AACF,CAAC"}

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

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

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

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

package/dist/esm/elements/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,54 @@
+var _excluded = ["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 { themeGet } from "@styled-system/theme-get";
+import React from "react";
+import styled from "styled-components";
+import { flattenChildren } from "../../helpers/flattenChildren";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { Join } from "../Join";
+import { Text } from "../Text";
+var Li = styled(Text).withConfig({
+  displayName: "Breadcrumbs__Li",
+  componentId: "sc-1ve5xfq-0"
+})(["> a{color:", ";text-decoration:none;&:hover{color:", ";text-decoration:underline;}}&:last-of-type{> a{color:", ";&:hover{color:", ";text-decoration:none;}}}"], themeGet("colors.mono60"), themeGet("colors.blue100"), themeGet("colors.mono100"), themeGet("colors.mono100"));
+
+/** Breadcrumbs extends Box */
+
+/**
+ * A breadcrumb trail consists of a list of links to the parent pages of the
+ * current page in hierarchical order. It helps users find their place within
+ * a website or web application. Breadcrumbs are often placed horizontally
+ * before a page's main content.
+ */
+export var Breadcrumbs = function Breadcrumbs(_ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var cells = flattenChildren(children);
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "nav",
+    "aria-label": "Breadcrumb"
+  }, rest), /*#__PURE__*/React.createElement(Flex, {
+    as: "ol"
+  }, /*#__PURE__*/React.createElement(Join, {
+    separator: /*#__PURE__*/React.createElement(Text, {
+      as: "span",
+      size: "xs",
+      color: "mono60",
+      mx: 1,
+      "aria-hidden": "true"
+    }, "/")
+  }, cells.map(function (cell, i) {
+    return /*#__PURE__*/React.createElement(Li, {
+      as: "li",
+      size: "xs",
+      key: i
+    }, i === cells.length - 1 ? /*#__PURE__*/React.cloneElement(cell, {
+      "aria-current": "page"
+    }) : cell);
+  }))));
+};
+Breadcrumbs.displayName = "Breadcrumbs";
+//# sourceMappingURL=Breadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","names":["themeGet","React","styled","flattenChildren","Box","Flex","Join","Text","Li","withConfig","displayName","componentId","Breadcrumbs","_ref","children","rest","_objectWithoutProperties","_excluded","cells","createElement","_extends","as","separator","size","color","mx","map","cell","i","key","length","cloneElement"],"sources":["../../../../src/elements/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Join } from \"../Join\"\nimport { Text } from \"../Text\"\n\nconst Li = styled(Text)`\n  > a {\n    color: ${themeGet(\"colors.mono60\")};\n    text-decoration: none;\n\n    &:hover {\n      color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    }\n  }\n\n  &:last-of-type {\n    > a {\n      color: ${themeGet(\"colors.mono100\")};\n\n      &:hover {\n        color: ${themeGet(\"colors.mono100\")};\n        text-decoration: none;\n      }\n    }\n  }\n`\n\n/** Breadcrumbs extends Box */\nexport type BreadcrumbsProps = BoxProps\n\n/**\n * A breadcrumb trail consists of a list of links to the parent pages of the\n * current page in hierarchical order. It helps users find their place within\n * a website or web application. Breadcrumbs are often placed horizontally\n * before a page's main content.\n */\nexport const Breadcrumbs: React.FC<\n  React.PropsWithChildren<BreadcrumbsProps>\n> = ({ children, ...rest }) => {\n  const cells = flattenChildren(children)\n\n  return (\n    <Box as=\"nav\" aria-label=\"Breadcrumb\" {...rest}>\n      <Flex as=\"ol\">\n        <Join\n          separator={\n            <Text as=\"span\" size=\"xs\" color=\"mono60\" mx={1} aria-hidden=\"true\">\n              /\n            </Text>\n          }\n        >\n          {cells.map((cell: React.ReactElement<any>, i) => {\n            return (\n              <Li as=\"li\" size=\"xs\" key={i}>\n                {i === cells.length - 1\n                  ? React.cloneElement(cell, { \"aria-current\": \"page\" })\n                  : cell}\n              </Li>\n            )\n          })}\n        </Join>\n      </Flex>\n    </Box>\n  )\n}\n"],"mappings":";;;;AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,eAAe;AACxB,SAASC,GAAG;AACZ,SAASC,IAAI;AACb,SAASC,IAAI;AACb,SAASC,IAAI;AAEb,IAAMC,EAAE,GAAGN,MAAM,CAACK,IAAI,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qKAEVX,QAAQ,CAAC,eAAe,CAAC,EAIvBA,QAAQ,CAAC,gBAAgB,CAAC,EAO1BA,QAAQ,CAAC,gBAAgB,CAAC,EAGxBA,QAAQ,CAAC,gBAAgB,CAAC,CAK1C;;AAED;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMY,WAEZ,GAAG,SAFSA,WAEZA,CAAAC,IAAA,EAA8B;EAAA,IAAxBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAKC,IAAI,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EACtB,IAAMC,KAAK,GAAGf,eAAe,CAACW,QAAQ,CAAC;EAEvC,oBACEb,KAAA,CAAAkB,aAAA,CAACf,GAAG,EAAAgB,QAAA;IAACC,EAAE,EAAC,KAAK;IAAC,cAAW;EAAY,GAAKN,IAAI,gBAC5Cd,KAAA,CAAAkB,aAAA,CAACd,IAAI;IAACgB,EAAE,EAAC;EAAI,gBACXpB,KAAA,CAAAkB,aAAA,CAACb,IAAI;IACHgB,SAAS,eACPrB,KAAA,CAAAkB,aAAA,CAACZ,IAAI;MAACc,EAAE,EAAC,MAAM;MAACE,IAAI,EAAC,IAAI;MAACC,KAAK,EAAC,QAAQ;MAACC,EAAE,EAAE,CAAE;MAAC,eAAY;IAAM,GAAC,GAEnE;EACD,GAEAP,KAAK,CAACQ,GAAG,CAAC,UAACC,IAA6B,EAAEC,CAAC,EAAK;IAC/C,oBACE3B,KAAA,CAAAkB,aAAA,CAACX,EAAE;MAACa,EAAE,EAAC,IAAI;MAACE,IAAI,EAAC,IAAI;MAACM,GAAG,EAAED;IAAE,GAC1BA,CAAC,KAAKV,KAAK,CAACY,MAAM,GAAG,CAAC,gBACnB7B,KAAK,CAAC8B,YAAY,CAACJ,IAAI,EAAE;MAAE,cAAc,EAAE;IAAO,CAAC,CAAC,GACpDA,IAAI,CACL;EAET,CAAC,CAAC,CACG,CACF,CACH;AAEV,CAAC;AA5BYf,WAEZ,CAAAF,WAAA"}

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

@@ -0,0 +1,48 @@
+import React from "react";
+import { Breadcrumbs } from "./Breadcrumbs";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  title: "Components/Breadcrumbs",
+  component: Breadcrumbs,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Breadcrumbs component provides navigation links showing the user's location in the site hierarchy. Automatically adds separators between navigation items."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+export var Default = {
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", {
+      href: "#1"
+    }, "Level 01"), /*#__PURE__*/React.createElement("a", {
+      href: "#2"
+    }, "Level 02"), /*#__PURE__*/React.createElement("a", {
+      href: "#3"
+    }, "Level 03"), /*#__PURE__*/React.createElement("a", {
+      href: "#4"
+    }, "Level 04"))
+  }
+};
+export var TwoLevels = {
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", {
+      href: "#1"
+    }, "Level 01"), /*#__PURE__*/React.createElement("a", {
+      href: "#2"
+    }, "Level 02"))
+  }
+};
+export var SingleLevel = {
+  args: {
+    children: /*#__PURE__*/React.createElement("a", {
+      href: "#1"
+    }, "Level 01")
+  }
+};
+//# sourceMappingURL=Breadcrumbs.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.story.js","names":["React","Breadcrumbs","STORYBOOK_PROPS_BLOCKLIST","title","component","tags","parameters","docs","description","controls","exclude","Default","args","children","createElement","Fragment","href","TwoLevels","SingleLevel"],"sources":["../../../../src/elements/Breadcrumbs/Breadcrumbs.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Breadcrumbs } from \"./Breadcrumbs\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  title: \"Components/Breadcrumbs\",\n  component: Breadcrumbs,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Breadcrumbs component provides navigation links showing the user's location in the site hierarchy. Automatically adds separators between navigation items.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    children: (\n      <>\n        <a href=\"#1\">Level 01</a>\n        <a href=\"#2\">Level 02</a>\n        <a href=\"#3\">Level 03</a>\n        <a href=\"#4\">Level 04</a>\n      </>\n    ),\n  },\n}\n\nexport const TwoLevels = {\n  args: {\n    children: (\n      <>\n        <a href=\"#1\">Level 01</a>\n        <a href=\"#2\">Level 02</a>\n      </>\n    ),\n  },\n}\n\nexport const SingleLevel = {\n  args: {\n    children: <a href=\"#1\">Level 01</a>,\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW;AACpB,SAASC,yBAAyB;AAElC,eAAe;EACbC,KAAK,EAAE,wBAAwB;EAC/BC,SAAS,EAAEH,WAAW;EACtBI,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,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,QAAQ,eACNb,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAe,QAAA,qBACEf,KAAA,CAAAc,aAAA;MAAGE,IAAI,EAAC;IAAI,GAAC,UAAQ,CAAI,eACzBhB,KAAA,CAAAc,aAAA;MAAGE,IAAI,EAAC;IAAI,GAAC,UAAQ,CAAI,eACzBhB,KAAA,CAAAc,aAAA;MAAGE,IAAI,EAAC;IAAI,GAAC,UAAQ,CAAI,eACzBhB,KAAA,CAAAc,aAAA;MAAGE,IAAI,EAAC;IAAI,GAAC,UAAQ,CAAI;EAG/B;AACF,CAAC;AAED,OAAO,IAAMC,SAAS,GAAG;EACvBL,IAAI,EAAE;IACJC,QAAQ,eACNb,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAe,QAAA,qBACEf,KAAA,CAAAc,aAAA;MAAGE,IAAI,EAAC;IAAI,GAAC,UAAQ,CAAI,eACzBhB,KAAA,CAAAc,aAAA;MAAGE,IAAI,EAAC;IAAI,GAAC,UAAQ,CAAI;EAG/B;AACF,CAAC;AAED,OAAO,IAAME,WAAW,GAAG;EACzBN,IAAI,EAAE;IACJC,QAAQ,eAAEb,KAAA,CAAAc,aAAA;MAAGE,IAAI,EAAC;IAAI,GAAC,UAAQ;EACjC;AACF,CAAC"}

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

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

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

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

package/dist/esm/elements/Button/Button.js

@@ -0,0 +1,142 @@
+var _excluded = ["children", "loading", "success", "size", "onClick", "alignItems", "justifyContent", "variant", "Icon"];
+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 composeRefs from "@seznam/compose-react-refs";
+import React, { useEffect, useRef } from "react";
+import styled, { css } from "styled-components";
+import { variant } from "styled-system";
+import CheckmarkIcon from "@artsy/icons/CheckmarkIcon";
+import { THEME } from "../../themes";
+import { boxMixin } from "../Box";
+import { Spinner } from "../Spinner";
+import { Text } from "../Text";
+import { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from "./tokens";
+export var Button = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var children = _ref.children,
+    loading = _ref.loading,
+    success = _ref.success,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "large" : _ref$size,
+    onClick = _ref.onClick,
+    _ref$alignItems = _ref.alignItems,
+    alignItems = _ref$alignItems === void 0 ? "center" : _ref$alignItems,
+    _ref$justifyContent = _ref.justifyContent,
+    justifyContent = _ref$justifyContent === void 0 ? "center" : _ref$justifyContent,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "primaryBlack" : _ref$variant,
+    Icon = _ref.Icon,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var ref = useRef(null);
+  var handleClick = function handleClick(event) {
+    if (!loading && onClick) {
+      onClick(event);
+    }
+  };
+  useEffect(function () {
+    if (loading && ref.current !== null) {
+      var _ref$current;
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.blur();
+    }
+  }, [loading]);
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    ref: composeRefs(ref, forwardedRef),
+    onClick: handleClick,
+    size: size,
+    $loading: loading,
+    success: success,
+    tabIndex: loading ? -1 : 0,
+    display: "inline-flex",
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    variant: variant
+  }, rest), loading && /*#__PURE__*/React.createElement(Spinner, {
+    size: size,
+    color: "currentColor"
+  }), /*#__PURE__*/React.createElement(Text, {
+    lineHeight: 1,
+    variant: getTextVariant(size),
+    opacity: loading ? 0 : 1,
+    display: "flex",
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    width: "100%"
+  }, !success && Icon && /*#__PURE__*/React.createElement(Icon, {
+    fill: "currentColor",
+    mr: 0.5,
+    ml: -0.5,
+    "aria-hidden": "true"
+  }), success && /*#__PURE__*/React.createElement(CheckmarkIcon, {
+    fill: "currentColor",
+    mr: 0.5,
+    ml: -0.5,
+    "aria-hidden": "true"
+  }), children));
+});
+Button.displayName = "Button";
+export var buttonMixin = css(["cursor:pointer;position:relative;white-space:nowrap;font-weight:normal;text-align:center;border:1px solid;text-decoration:none;transition:color 0.25s ease,border-color 0.25s ease,background-color 0.25s ease,box-shadow 0.25s ease;"]);
+var Container = styled.button.withConfig({
+  displayName: "Button__Container",
+  componentId: "sc-1bhxy1c-0"
+})(["", ";", " ", " ", ";", ";"], buttonMixin, variant({
+  prop: "size",
+  variants: BUTTON_SIZES
+}), function (props) {
+  // Handle props driven states
+  if (props.hover) {
+    return variant({
+      variants: BUTTON_VARIANTS.hover
+    });
+  }
+  if (props.active) {
+    return variant({
+      variants: BUTTON_VARIANTS.active
+    });
+  }
+  if (props.success) {
+    return variant({
+      variants: BUTTON_VARIANTS.success
+    });
+  }
+  if (props.focus) {
+    return css(["outline:0;", ""], variant({
+      variants: BUTTON_VARIANTS.focus
+    }));
+  }
+  if (props.$loading) {
+    return css(["cursor:auto;transition:none;pointer-events:none;", ""], variant({
+      variants: BUTTON_VARIANTS.loading
+    }));
+  }
+  if (props.disabled) {
+    return css(["pointer-events:none;", ""], variant({
+      variants: BUTTON_VARIANTS.disabled
+    }));
+  }
+  return variant({
+    variants: BUTTON_VARIANTS.default
+  });
+}, function () {
+  // Handle pseudo classes
+  return css(["@media ", "{&:hover{", "}}&:focus{outline:0;", "}&:active{", "}&:disabled{pointer-events:none;", "}"], THEME.mediaQueries.hover, variant({
+    variants: BUTTON_VARIANTS.hover
+  }), variant({
+    variants: BUTTON_VARIANTS.focus
+  }), variant({
+    variants: BUTTON_VARIANTS.active
+  }), variant({
+    variants: BUTTON_VARIANTS.disabled
+  }));
+}, boxMixin);
+var getTextVariant = function getTextVariant(size) {
+  if (typeof size === "string") {
+    return BUTTON_TEXT_SIZES[size];
+  }
+  if (Array.isArray(size)) {
+    return size.map(function (s) {
+      return BUTTON_TEXT_SIZES[s];
+    });
+  }
+  return BUTTON_TEXT_SIZES.large;
+};
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":["composeRefs","React","useEffect","useRef","styled","css","variant","CheckmarkIcon","THEME","boxMixin","Spinner","Text","BUTTON_SIZES","BUTTON_TEXT_SIZES","BUTTON_VARIANTS","Button","forwardRef","_ref","forwardedRef","children","loading","success","_ref$size","size","onClick","_ref$alignItems","alignItems","_ref$justifyContent","justifyContent","_ref$variant","Icon","rest","_objectWithoutProperties","_excluded","ref","handleClick","event","current","_ref$current","blur","createElement","Container","_extends","$loading","tabIndex","display","color","lineHeight","getTextVariant","opacity","width","fill","mr","ml","displayName","buttonMixin","button","withConfig","componentId","prop","variants","props","hover","active","focus","disabled","default","mediaQueries","Array","isArray","map","s","large"],"sources":["../../../../src/elements/Button/Button.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, { useEffect, useRef } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { ResponsiveValue, variant } from \"styled-system\"\nimport CheckmarkIcon from \"@artsy/icons/CheckmarkIcon\"\nimport { TextVariant } from \"@artsy/palette-tokens/dist/typography/v3\"\nimport { THEME } from \"../../themes\"\nimport { boxMixin, BoxProps } from \"../Box\"\nimport { Spinner } from \"../Spinner\"\nimport { Text, TextProps } from \"../Text\"\nimport { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from \"./tokens\"\nimport { ButtonSize, ButtonVariant } from \"./types\"\n\nexport interface ButtonProps\n  extends BoxProps,\n    React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * @description\n   * The theme of the button. It's possible to pass an array that\n   * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n   * @example\n   * \"primaryBlack\"\n   * \"primaryWhite\"\n   * [\"primaryGray\", \"secondaryBlack\"]\n   * @see {@link ButtonVariant}\n   */\n  variant?: ResponsiveValue<ButtonVariant>\n  /** Size of the button */\n  size?: ResponsiveValue<ButtonSize>\n  /** Displays a loader in the button */\n  loading?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces active state */\n  active?: boolean\n  /** Forces success state */\n  success?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<\n    React.PropsWithChildren<BoxProps & { fill?: ResponsiveValue<string> }>\n  >\n}\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(\n  (\n    {\n      children,\n      loading,\n      success,\n      size = \"large\",\n      onClick,\n      alignItems = \"center\",\n      justifyContent = \"center\",\n      variant = \"primaryBlack\",\n      Icon,\n      ...rest\n    },\n    forwardedRef\n  ) => {\n    const ref = useRef<HTMLButtonElement | null>(null)\n\n    const handleClick = (\n      event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n    ) => {\n      if (!loading && onClick) {\n        onClick(event)\n      }\n    }\n\n    useEffect(() => {\n      if (loading && ref.current !== null) {\n        ref.current?.blur()\n      }\n    }, [loading])\n\n    return (\n      <Container\n        ref={composeRefs(ref, forwardedRef) as any}\n        onClick={handleClick}\n        size={size}\n        $loading={loading}\n        success={success}\n        tabIndex={loading ? -1 : 0}\n        display=\"inline-flex\"\n        alignItems={alignItems}\n        justifyContent={justifyContent}\n        variant={variant}\n        {...rest}\n      >\n        {loading && <Spinner size={size} color=\"currentColor\" />}\n\n        <Text\n          lineHeight={1}\n          variant={getTextVariant(size)}\n          opacity={loading ? 0 : 1}\n          display=\"flex\"\n          alignItems={alignItems}\n          justifyContent={justifyContent}\n          width=\"100%\"\n        >\n          {!success && Icon && (\n            <Icon fill=\"currentColor\" mr={0.5} ml={-0.5} aria-hidden=\"true\" />\n          )}\n\n          {success && (\n            <CheckmarkIcon\n              fill=\"currentColor\"\n              mr={0.5}\n              ml={-0.5}\n              aria-hidden=\"true\"\n            />\n          )}\n\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButton.displayName = \"Button\"\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"active\" | \"disabled\" | \"focus\" | \"hover\" | \"size\" | \"success\"\n> & {\n  $loading?: boolean\n}\n\nexport const buttonMixin = css`\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  font-weight: normal;\n  text-align: center;\n  border: 1px solid;\n  text-decoration: none;\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n`\n\nconst Container = styled.button<ContainerProps & ButtonProps>`\n  ${buttonMixin};\n\n  /* Handle sizing */\n  ${variant({ prop: \"size\", variants: BUTTON_SIZES })}\n\n  ${(props) => {\n    // Handle props driven states\n    if (props.hover) {\n      return variant({ variants: BUTTON_VARIANTS.hover })\n    }\n\n    if (props.active) {\n      return variant({ variants: BUTTON_VARIANTS.active })\n    }\n\n    if (props.success) {\n      return variant({ variants: BUTTON_VARIANTS.success })\n    }\n\n    if (props.focus) {\n      return css`\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      `\n    }\n\n    if (props.$loading) {\n      return css`\n        cursor: auto;\n        transition: none;\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.loading })}\n      `\n    }\n\n    if (props.disabled) {\n      return css`\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      `\n    }\n\n    return variant({ variants: BUTTON_VARIANTS.default })\n  }}\n\n  ${() => {\n    // Handle pseudo classes\n    return css`\n      @media ${THEME.mediaQueries.hover} {\n        &:hover {\n          ${variant({ variants: BUTTON_VARIANTS.hover })}\n        }\n      }\n\n      &:focus {\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      }\n\n      &:active {\n        ${variant({ variants: BUTTON_VARIANTS.active })}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      }\n    `\n  }};\n\n  ${boxMixin};\n`\n\nconst getTextVariant = (\n  size: ResponsiveValue<ButtonSize>\n): TextProps[\"variant\"] => {\n  if (typeof size === \"string\") {\n    return BUTTON_TEXT_SIZES[size]\n  }\n\n  if (Array.isArray(size)) {\n    return size.map((s) => BUTTON_TEXT_SIZES[s!] as TextVariant)\n  }\n\n  return BUTTON_TEXT_SIZES.large\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,142 @@
+import BellStrokeIcon from "@artsy/icons/BellStrokeIcon";
+import { Button } from "./index";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  title: "Components/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Button component provides a clickable interface element with multiple variants, sizes, and states. Supports loading states, icons, and can be rendered as different HTML elements."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+export var Default = {
+  args: {
+    children: "Button"
+  }
+};
+export var Primary = {
+  args: {
+    variant: "primary",
+    children: "Primary Button"
+  }
+};
+export var Secondary = {
+  args: {
+    variant: "secondary",
+    children: "Secondary Button"
+  }
+};
+export var Large = {
+  args: {
+    size: "large",
+    children: "Large Button"
+  }
+};
+export var Small = {
+  args: {
+    size: "small",
+    children: "Small Button"
+  }
+};
+export var WithIconBasic = {
+  args: {
+    children: "Create an Alert",
+    variant: "secondaryBlack",
+    size: "small",
+    Icon: BellStrokeIcon
+  }
+};
+export var LoadingState = {
+  args: {
+    children: "Loading Button",
+    loading: true
+  }
+};
+export var Disabled = {
+  args: {
+    children: "Disabled Button",
+    disabled: true
+  }
+};
+export var Success = {
+  args: {
+    children: "Success Button",
+    success: true
+  }
+};
+export var Focus = {
+  args: {
+    children: "Focused Button",
+    focus: true
+  }
+};
+export var Hover = {
+  args: {
+    children: "Hovered Button",
+    hover: true
+  }
+};
+export var Active = {
+  args: {
+    children: "Active Button",
+    active: true
+  }
+};
+export var PrimaryWhite = {
+  args: {
+    variant: "primaryWhite",
+    children: "Primary White Button"
+  }
+};
+export var SecondaryWhite = {
+  args: {
+    variant: "secondaryWhite",
+    children: "Secondary White Button"
+  }
+};
+export var SecondaryBlack = {
+  args: {
+    variant: "secondaryBlack",
+    children: "Secondary Black Button"
+  }
+};
+export var AutoFocus = {
+  args: {
+    autoFocus: true,
+    children: "Auto Focused Button"
+  }
+};
+export var NotKeyboardFocusable = {
+  args: {
+    tabIndex: -1,
+    children: "Not Keyboard Focusable"
+  }
+};
+export var FullWidth = {
+  args: {
+    display: "block",
+    width: "100%",
+    children: "Full Width Button"
+  }
+};
+export var AsAnchor = {
+  args: {
+    as: "a",
+    href: "#example",
+    children: "This is an anchor tag"
+  }
+};
+export var ResponsiveSize = {
+  args: {
+    size: ["small", "large"],
+    children: "Resize Viewport"
+  }
+};
+//# sourceMappingURL=Button.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.story.js","names":["BellStrokeIcon","Button","STORYBOOK_PROPS_BLOCKLIST","title","component","tags","parameters","docs","description","controls","exclude","Default","args","children","Primary","variant","Secondary","Large","size","Small","WithIconBasic","Icon","LoadingState","loading","Disabled","disabled","Success","success","Focus","focus","Hover","hover","Active","active","PrimaryWhite","SecondaryWhite","SecondaryBlack","AutoFocus","autoFocus","NotKeyboardFocusable","tabIndex","FullWidth","display","width","AsAnchor","as","href","ResponsiveSize"],"sources":["../../../../src/elements/Button/Button.story.tsx"],"sourcesContent":["import BellStrokeIcon from \"@artsy/icons/BellStrokeIcon\"\nimport { Button } from \"./index\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  title: \"Components/Button\",\n  component: Button,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Button component provides a clickable interface element with multiple variants, sizes, and states. Supports loading states, icons, and can be rendered as different HTML elements.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    children: \"Button\",\n  },\n}\n\nexport const Primary = {\n  args: {\n    variant: \"primary\",\n    children: \"Primary Button\",\n  },\n}\n\nexport const Secondary = {\n  args: {\n    variant: \"secondary\",\n    children: \"Secondary Button\",\n  },\n}\n\nexport const Large = {\n  args: {\n    size: \"large\",\n    children: \"Large Button\",\n  },\n}\n\nexport const Small = {\n  args: {\n    size: \"small\",\n    children: \"Small Button\",\n  },\n}\n\nexport const WithIconBasic = {\n  args: {\n    children: \"Create an Alert\",\n    variant: \"secondaryBlack\",\n    size: \"small\",\n    Icon: BellStrokeIcon,\n  },\n}\n\nexport const LoadingState = {\n  args: {\n    children: \"Loading Button\",\n    loading: true,\n  },\n}\n\nexport const Disabled = {\n  args: {\n    children: \"Disabled Button\",\n    disabled: true,\n  },\n}\n\nexport const Success = {\n  args: {\n    children: \"Success Button\",\n    success: true,\n  },\n}\n\nexport const Focus = {\n  args: {\n    children: \"Focused Button\",\n    focus: true,\n  },\n}\n\nexport const Hover = {\n  args: {\n    children: \"Hovered Button\",\n    hover: true,\n  },\n}\n\nexport const Active = {\n  args: {\n    children: \"Active Button\",\n    active: true,\n  },\n}\n\nexport const PrimaryWhite = {\n  args: {\n    variant: \"primaryWhite\",\n    children: \"Primary White Button\",\n  },\n}\n\nexport const SecondaryWhite = {\n  args: {\n    variant: \"secondaryWhite\",\n    children: \"Secondary White Button\",\n  },\n}\n\nexport const SecondaryBlack = {\n  args: {\n    variant: \"secondaryBlack\",\n    children: \"Secondary Black Button\",\n  },\n}\n\nexport const AutoFocus = {\n  args: {\n    autoFocus: true,\n    children: \"Auto Focused Button\",\n  },\n}\n\nexport const NotKeyboardFocusable = {\n  args: {\n    tabIndex: -1,\n    children: \"Not Keyboard Focusable\",\n  },\n}\n\nexport const FullWidth = {\n  args: {\n    display: \"block\",\n    width: \"100%\",\n    children: \"Full Width Button\",\n  },\n}\n\nexport const AsAnchor = {\n  args: {\n    as: \"a\",\n    href: \"#example\",\n    children: \"This is an anchor tag\",\n  },\n}\n\nexport const ResponsiveSize = {\n  args: {\n    size: [\"small\", \"large\"],\n    children: \"Resize Viewport\",\n  },\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,5 @@
+export * from "./Button";
+export * from "./types";
+export { buttonMixin } from "./Button";
+export * from "./tokens";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["buttonMixin"],"sources":["../../../../src/elements/Button/index.ts"],"sourcesContent":["export * from \"./Button\"\nexport * from \"./types\"\nexport { buttonMixin } from \"./Button\"\nexport * from \"./tokens\"\n"],"mappings":"AAAA;AACA;AACA,SAASA,WAAW;AACpB"}