@artsy/palette 45.13.1 → 45.14.0-canary.1497.33065.0

package/dist/esm/elements/Carousel/paginate.js

@@ -0,0 +1,105 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+/**
+ * Sums all values, building from the previous
+ * @param xs list of values to compound
+ */
+export var compound = function compound(xs) {
+  // @ts-expect-error  MIGRATE_STRICT_MODE
+  return xs.reduce(function (p, n) {
+    return p.concat((+p.slice(-1) || 0) + n);
+  }, []);
+};
+
+/**
+ * Build an array of offsets
+ * @param viewport window width
+ * @param values array of cell widths
+ */
+export var chunk = function chunk(_ref) {
+  var viewport = _ref.viewport,
+    values = _ref.values;
+  return values.reduce(function (acc, value) {
+    var prev = acc[acc.length - 1];
+    if (prev + value <= viewport) {
+      acc[acc.length - 1] += value;
+      return acc;
+    }
+    return [].concat(_toConsumableArray(acc), [value]);
+  }, [0]);
+};
+
+/** Align last page to the left or right */
+
+var paginateCarouselByCell = function paginateCarouselByCell(_ref2) {
+  var values = _ref2.values,
+    viewport = _ref2.viewport;
+  var sum = values.reduce(function (acc, curr) {
+    return acc + curr;
+  }, 0);
+
+  // No need to paginate
+  if (sum <= viewport) {
+    return [0];
+  }
+  var offsets = compound(values);
+  var lastOffset = offsets[offsets.length - 1];
+
+  // Get the offset when the last cell is fully displayed
+  // and aligned to the right at the end of the carousel
+  var offsetToLastCell = lastOffset - viewport;
+
+  // Ignore some offsets whose value exceeds the offset of the last cell
+  // when it is displayed and aligned to the right
+  var edges = offsets.filter(function (offset) {
+    return offsetToLastCell > offset;
+  });
+  return [0].concat(_toConsumableArray(edges), [offsetToLastCell]);
+};
+
+/**
+ * Creates an array of offsets based on the given viewport
+ * @param viewport window width
+ * @param values array of cell widths
+ * @param alignment align last page to the left or right
+ */
+export var paginateCarousel = function paginateCarousel(_ref3) {
+  var viewport = _ref3.viewport,
+    values = _ref3.values,
+    _ref3$alignment = _ref3.alignment,
+    alignment = _ref3$alignment === void 0 ? "right" : _ref3$alignment,
+    _ref3$paginateBy = _ref3.paginateBy,
+    paginateBy = _ref3$paginateBy === void 0 ? "page" : _ref3$paginateBy;
+  if (paginateBy === "cell") {
+    return paginateCarouselByCell({
+      values: values,
+      viewport: viewport
+    });
+  }
+  var offsets = chunk({
+    viewport: viewport,
+    values: values
+  });
+
+  // Only a single page — no need to paginate
+  if (offsets.length === 1) {
+    return [0];
+  }
+
+  // Last page align right
+  if (alignment === "right") {
+    var edges = compound(offsets);
+    var head = edges.slice(0, -2);
+    var tail = edges[edges.length - 1] - viewport;
+    return [0].concat(_toConsumableArray(head), [tail]);
+  }
+
+  // Last page align left
+  var pages = compound(offsets).slice(0, -1);
+  return [0].concat(_toConsumableArray(pages));
+};
+//# sourceMappingURL=paginate.js.map

package/dist/esm/elements/Carousel/paginate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paginate.js","names":["compound","xs","reduce","p","n","concat","slice","chunk","_ref","viewport","values","acc","value","prev","length","_toConsumableArray","paginateCarouselByCell","_ref2","sum","curr","offsets","lastOffset","offsetToLastCell","edges","filter","offset","paginateCarousel","_ref3","_ref3$alignment","alignment","_ref3$paginateBy","paginateBy","head","tail","pages"],"sources":["../../../../src/elements/Carousel/paginate.ts"],"sourcesContent":["/**\n * Sums all values, building from the previous\n * @param xs list of values to compound\n */\nexport const compound = (xs: number[]): number[] => {\n  // @ts-expect-error  MIGRATE_STRICT_MODE\n  return xs.reduce((p, n) => p.concat((+p.slice(-1) || 0) + n), [])\n}\n\n/**\n * Build an array of offsets\n * @param viewport window width\n * @param values array of cell widths\n */\nexport const chunk = ({\n  viewport,\n  values,\n}: {\n  viewport: number\n  values: number[]\n}) => {\n  return values.reduce(\n    (acc, value) => {\n      const prev = acc[acc.length - 1]\n      if (prev + value <= viewport) {\n        acc[acc.length - 1] += value\n        return acc\n      }\n      return [...acc, value]\n    },\n    [0]\n  )\n}\n\n/** Align last page to the left or right */\nexport type CarouselPaginationAlignment = \"left\" | \"right\"\n\nexport type CarouselPaginateBy = \"page\" | \"cell\"\n\ninterface PaginateCarouselProps {\n  viewport: number\n  values: number[]\n  alignment?: CarouselPaginationAlignment\n  paginateBy?: CarouselPaginateBy\n}\n\nconst paginateCarouselByCell = ({\n  values,\n  viewport,\n}: Pick<PaginateCarouselProps, \"values\" | \"viewport\">) => {\n  const sum = values.reduce((acc, curr) => acc + curr, 0)\n\n  // No need to paginate\n  if (sum <= viewport) {\n    return [0]\n  }\n\n  const offsets = compound(values)\n  const lastOffset = offsets[offsets.length - 1]\n\n  // Get the offset when the last cell is fully displayed\n  // and aligned to the right at the end of the carousel\n  const offsetToLastCell = lastOffset - viewport\n\n  // Ignore some offsets whose value exceeds the offset of the last cell\n  // when it is displayed and aligned to the right\n  const edges = offsets.filter((offset) => offsetToLastCell > offset)\n\n  return [0, ...edges, offsetToLastCell]\n}\n\n/**\n * Creates an array of offsets based on the given viewport\n * @param viewport window width\n * @param values array of cell widths\n * @param alignment align last page to the left or right\n */\nexport const paginateCarousel = ({\n  viewport,\n  values,\n  alignment = \"right\",\n  paginateBy = \"page\",\n}: PaginateCarouselProps) => {\n  if (paginateBy === \"cell\") {\n    return paginateCarouselByCell({ values, viewport })\n  }\n\n  const offsets = chunk({ viewport, values })\n\n  // Only a single page — no need to paginate\n  if (offsets.length === 1) {\n    return [0]\n  }\n\n  // Last page align right\n  if (alignment === \"right\") {\n    const edges = compound(offsets)\n    const head = edges.slice(0, -2)\n    const tail = edges[edges.length - 1] - viewport\n    return [0, ...head, tail]\n  }\n\n  // Last page align left\n  const pages = compound(offsets).slice(0, -1)\n\n  return [0, ...pages]\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA,OAAO,IAAMA,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,EAAY,EAAe;EAClD;EACA,OAAOA,EAAE,CAACC,MAAM,CAAC,UAACC,CAAC,EAAEC,CAAC;IAAA,OAAKD,CAAC,CAACE,MAAM,CAAC,CAAC,CAACF,CAAC,CAACG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAIF,CAAC,CAAC;EAAA,GAAE,EAAE,CAAC;AACnE,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMG,KAAK,GAAG,SAARA,KAAKA,CAAAC,IAAA,EAMZ;EAAA,IALJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,MAAM,GAAAF,IAAA,CAANE,MAAM;EAKN,OAAOA,MAAM,CAACR,MAAM,CAClB,UAACS,GAAG,EAAEC,KAAK,EAAK;IACd,IAAMC,IAAI,GAAGF,GAAG,CAACA,GAAG,CAACG,MAAM,GAAG,CAAC,CAAC;IAChC,IAAID,IAAI,GAAGD,KAAK,IAAIH,QAAQ,EAAE;MAC5BE,GAAG,CAACA,GAAG,CAACG,MAAM,GAAG,CAAC,CAAC,IAAIF,KAAK;MAC5B,OAAOD,GAAG;IACZ;IACA,UAAAN,MAAA,CAAAU,kBAAA,CAAWJ,GAAG,IAAEC,KAAK;EACvB,CAAC,EACD,CAAC,CAAC,CAAC,CACJ;AACH,CAAC;;AAED;;AAYA,IAAMI,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAAC,KAAA,EAG8B;EAAA,IAFxDP,MAAM,GAAAO,KAAA,CAANP,MAAM;IACND,QAAQ,GAAAQ,KAAA,CAARR,QAAQ;EAER,IAAMS,GAAG,GAAGR,MAAM,CAACR,MAAM,CAAC,UAACS,GAAG,EAAEQ,IAAI;IAAA,OAAKR,GAAG,GAAGQ,IAAI;EAAA,GAAE,CAAC,CAAC;;EAEvD;EACA,IAAID,GAAG,IAAIT,QAAQ,EAAE;IACnB,OAAO,CAAC,CAAC,CAAC;EACZ;EAEA,IAAMW,OAAO,GAAGpB,QAAQ,CAACU,MAAM,CAAC;EAChC,IAAMW,UAAU,GAAGD,OAAO,CAACA,OAAO,CAACN,MAAM,GAAG,CAAC,CAAC;;EAE9C;EACA;EACA,IAAMQ,gBAAgB,GAAGD,UAAU,GAAGZ,QAAQ;;EAE9C;EACA;EACA,IAAMc,KAAK,GAAGH,OAAO,CAACI,MAAM,CAAC,UAACC,MAAM;IAAA,OAAKH,gBAAgB,GAAGG,MAAM;EAAA,EAAC;EAEnE,QAAQ,CAAC,EAAApB,MAAA,CAAAU,kBAAA,CAAKQ,KAAK,IAAED,gBAAgB;AACvC,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,KAAA,EAKA;EAAA,IAJ3BlB,QAAQ,GAAAkB,KAAA,CAARlB,QAAQ;IACRC,MAAM,GAAAiB,KAAA,CAANjB,MAAM;IAAAkB,eAAA,GAAAD,KAAA,CACNE,SAAS;IAATA,SAAS,GAAAD,eAAA,cAAG,OAAO,GAAAA,eAAA;IAAAE,gBAAA,GAAAH,KAAA,CACnBI,UAAU;IAAVA,UAAU,GAAAD,gBAAA,cAAG,MAAM,GAAAA,gBAAA;EAEnB,IAAIC,UAAU,KAAK,MAAM,EAAE;IACzB,OAAOf,sBAAsB,CAAC;MAAEN,MAAM,EAANA,MAAM;MAAED,QAAQ,EAARA;IAAS,CAAC,CAAC;EACrD;EAEA,IAAMW,OAAO,GAAGb,KAAK,CAAC;IAAEE,QAAQ,EAARA,QAAQ;IAAEC,MAAM,EAANA;EAAO,CAAC,CAAC;;EAE3C;EACA,IAAIU,OAAO,CAACN,MAAM,KAAK,CAAC,EAAE;IACxB,OAAO,CAAC,CAAC,CAAC;EACZ;;EAEA;EACA,IAAIe,SAAS,KAAK,OAAO,EAAE;IACzB,IAAMN,KAAK,GAAGvB,QAAQ,CAACoB,OAAO,CAAC;IAC/B,IAAMY,IAAI,GAAGT,KAAK,CAACjB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC/B,IAAM2B,IAAI,GAAGV,KAAK,CAACA,KAAK,CAACT,MAAM,GAAG,CAAC,CAAC,GAAGL,QAAQ;IAC/C,QAAQ,CAAC,EAAAJ,MAAA,CAAAU,kBAAA,CAAKiB,IAAI,IAAEC,IAAI;EAC1B;;EAEA;EACA,IAAMC,KAAK,GAAGlC,QAAQ,CAACoB,OAAO,CAAC,CAACd,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAE5C,QAAQ,CAAC,EAAAD,MAAA,CAAAU,kBAAA,CAAKmB,KAAK;AACrB,CAAC"}

package/dist/esm/elements/CarouselBar/CarouselBar.js

@@ -0,0 +1,14 @@
+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); }
+import React from "react";
+import { ProgressBar } from "../ProgressBar";
+export var CarouselBar = function CarouselBar(props) {
+  return /*#__PURE__*/React.createElement(ProgressBar, _extends({
+    height: "1px",
+    highlight: "mono100",
+    mt: 0,
+    mb: 0,
+    transition: "transform 250ms"
+  }, props));
+};
+CarouselBar.displayName = "CarouselBar";
+//# sourceMappingURL=CarouselBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselBar.js","names":["React","ProgressBar","CarouselBar","props","createElement","_extends","height","highlight","mt","mb","transition","displayName"],"sources":["../../../../src/elements/CarouselBar/CarouselBar.tsx"],"sourcesContent":["import React from \"react\"\nimport { ProgressBar, ProgressBarProps } from \"../ProgressBar\"\n\nexport type CarouselBarProps = ProgressBarProps\n\nexport const CarouselBar: React.FC<\n  React.PropsWithChildren<CarouselBarProps>\n> = (props) => {\n  return (\n    <ProgressBar\n      height=\"1px\"\n      highlight=\"mono100\"\n      mt={0}\n      mb={0}\n      transition=\"transform 250ms\"\n      {...props}\n    />\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW;AAIpB,OAAO,IAAMC,WAEZ,GAAG,SAFSA,WAEZA,CAAIC,KAAK,EAAK;EACb,oBACEH,KAAA,CAAAI,aAAA,CAACH,WAAW,EAAAI,QAAA;IACVC,MAAM,EAAC,KAAK;IACZC,SAAS,EAAC,SAAS;IACnBC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAE,CAAE;IACNC,UAAU,EAAC;EAAiB,GACxBP,KAAK,EACT;AAEN,CAAC;AAbYD,WAEZ,CAAAS,WAAA"}

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

@@ -0,0 +1,43 @@
+import { CarouselBar } from "./CarouselBar";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  title: "Components/CarouselBar",
+  component: CarouselBar,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A carousel progress bar component that displays completion progress as a percentage."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    percentComplete: 40
+  }
+};
+export var Empty = {
+  args: {
+    percentComplete: 0
+  }
+};
+export var AlmostEmpty = {
+  args: {
+    percentComplete: 1
+  }
+};
+export var HalfComplete = {
+  args: {
+    percentComplete: 50
+  }
+};
+export var Complete = {
+  args: {
+    percentComplete: 100
+  }
+};
+//# sourceMappingURL=CarouselBar.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselBar.story.js","names":["CarouselBar","STORYBOOK_PROPS_BLOCKLIST","title","component","tags","parameters","docs","description","controls","exclude","Default","args","percentComplete","Empty","AlmostEmpty","HalfComplete","Complete"],"sources":["../../../../src/elements/CarouselBar/CarouselBar.story.tsx"],"sourcesContent":["import { CarouselBar } from \"./CarouselBar\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  title: \"Components/CarouselBar\",\n  component: CarouselBar,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A carousel progress bar component that displays completion progress as a percentage.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    percentComplete: 40,\n  },\n}\n\nexport const Empty = {\n  args: {\n    percentComplete: 0,\n  },\n}\n\nexport const AlmostEmpty = {\n  args: {\n    percentComplete: 1,\n  },\n}\n\nexport const HalfComplete = {\n  args: {\n    percentComplete: 50,\n  },\n}\n\nexport const Complete = {\n  args: {\n    percentComplete: 100,\n  },\n}\n"],"mappings":"AAAA,SAASA,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;IACF,CAAC;IACDK,QAAQ,EAAE;MACNC,OAAO,EAAER;IACX;EACJ;AACF,CAAC;AAED,OAAO,IAAMS,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,eAAe,EAAE;EACnB;AACF,CAAC;AAED,OAAO,IAAMC,KAAK,GAAG;EACnBF,IAAI,EAAE;IACJC,eAAe,EAAE;EACnB;AACF,CAAC;AAED,OAAO,IAAME,WAAW,GAAG;EACzBH,IAAI,EAAE;IACJC,eAAe,EAAE;EACnB;AACF,CAAC;AAED,OAAO,IAAMG,YAAY,GAAG;EAC1BJ,IAAI,EAAE;IACJC,eAAe,EAAE;EACnB;AACF,CAAC;AAED,OAAO,IAAMI,QAAQ,GAAG;EACtBL,IAAI,EAAE;IACJC,eAAe,EAAE;EACnB;AACF,CAAC"}

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

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

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

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

package/dist/esm/elements/Checkbox/Check.js

@@ -0,0 +1,45 @@
+var _excluded = ["disabled", "selected"];
+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 from "react";
+import styled from "styled-components";
+import CheckmarkIcon from "@artsy/icons/CheckmarkIcon";
+import { Box } from "../Box";
+import { CHECK_STATES } from "./tokens";
+/** Toggeable check mark */
+export var Check = function Check(_ref) {
+  var disabled = _ref.disabled,
+    selected = _ref.selected,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    mr: 1,
+    border: "1px solid",
+    disabled: disabled,
+    selected: selected
+  }, rest), /*#__PURE__*/React.createElement(CheckmarkIcon, {
+    "aria-hidden": true
+  }));
+};
+Check.displayName = "Check";
+var Container = styled(Box).withConfig({
+  displayName: "Check__Container",
+  componentId: "sc-mkx5fy-0"
+})(["width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:background-color 0.25s,border-color 0.25s,color 0.25s;", ";"], function (props) {
+  var mode = function () {
+    switch (true) {
+      case props.focus:
+        return CHECK_STATES.focus;
+      case props.hover:
+        return CHECK_STATES.hover;
+      case props.error:
+        return CHECK_STATES.error;
+      case props.disabled:
+        return CHECK_STATES.disabled;
+      default:
+        return CHECK_STATES.default;
+    }
+  }();
+  return props.selected ? mode.selected : mode.resting;
+});
+//# sourceMappingURL=Check.js.map

package/dist/esm/elements/Checkbox/Check.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Check.js","names":["React","styled","CheckmarkIcon","Box","CHECK_STATES","Check","_ref","disabled","selected","rest","_objectWithoutProperties","_excluded","createElement","Container","_extends","mr","border","displayName","withConfig","componentId","props","mode","focus","hover","error","default","resting"],"sources":["../../../../src/elements/Checkbox/Check.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport CheckmarkIcon from \"@artsy/icons/CheckmarkIcon\"\nimport { Box } from \"../Box\"\nimport { CHECK_STATES } from \"./tokens\"\n\nexport interface CheckProps {\n  disabled?: boolean\n  error?: boolean\n  hover?: boolean\n  focus?: boolean\n  selected?: boolean\n}\n\n/** Toggeable check mark */\nexport const Check: React.FC<React.PropsWithChildren<CheckProps>> = ({\n  disabled,\n  selected,\n  ...rest\n}) => {\n  return (\n    <Container\n      mr={1}\n      border=\"1px solid\"\n      disabled={disabled}\n      selected={selected}\n      {...rest}\n    >\n      <CheckmarkIcon aria-hidden />\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<CheckProps>`\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.25s, border-color 0.25s, color 0.25s;\n\n  ${(props) => {\n    const mode = (() => {\n      switch (true) {\n        case props.focus:\n          return CHECK_STATES.focus\n        case props.hover:\n          return CHECK_STATES.hover\n        case props.error:\n          return CHECK_STATES.error\n        case props.disabled:\n          return CHECK_STATES.disabled\n        default:\n          return CHECK_STATES.default\n      }\n    })()\n\n    return props.selected ? mode.selected : mode.resting\n  }};\n`\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,OAAOC,aAAa,MAAM,4BAA4B;AACtD,SAASC,GAAG;AACZ,SAASC,YAAY;AAUrB;AACA,OAAO,IAAMC,KAAoD,GAAG,SAAvDA,KAAoDA,CAAAC,IAAA,EAI3D;EAAA,IAHJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACLC,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAEP,oBACEX,KAAA,CAAAY,aAAA,CAACC,SAAS,EAAAC,QAAA;IACRC,EAAE,EAAE,CAAE;IACNC,MAAM,EAAC,WAAW;IAClBT,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA;EAAS,GACfC,IAAI,gBAERT,KAAA,CAAAY,aAAA,CAACV,aAAa;IAAC;EAAW,EAAG,CACnB;AAEhB,CAAC;AAhBYG,KAAoD,CAAAY,WAAA;AAkBjE,IAAMJ,SAAS,GAAGZ,MAAM,CAACE,GAAG,CAAC,CAAAe,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,6JAQzB,UAACC,KAAK,EAAK;EACX,IAAMC,IAAI,GAAI,YAAM;IAClB,QAAQ,IAAI;MACV,KAAKD,KAAK,CAACE,KAAK;QACd,OAAOlB,YAAY,CAACkB,KAAK;MAC3B,KAAKF,KAAK,CAACG,KAAK;QACd,OAAOnB,YAAY,CAACmB,KAAK;MAC3B,KAAKH,KAAK,CAACI,KAAK;QACd,OAAOpB,YAAY,CAACoB,KAAK;MAC3B,KAAKJ,KAAK,CAACb,QAAQ;QACjB,OAAOH,YAAY,CAACG,QAAQ;MAC9B;QACE,OAAOH,YAAY,CAACqB,OAAO;IAAA;EAEjC,CAAC,EAAG;EAEJ,OAAOL,KAAK,CAACZ,QAAQ,GAAGa,IAAI,CAACb,QAAQ,GAAGa,IAAI,CAACK,OAAO;AACtD,CAAC,CACF"}

package/dist/esm/elements/Checkbox/Check.story.js

@@ -0,0 +1,81 @@
+import { Check } from "./Check";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: Check,
+  title: "Components/Check",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A simple checkbox component that can be selected, disabled, or show error states."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    selected: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic checkbox in unselected state."
+      }
+    }
+  }
+};
+export var Selected = {
+  args: {
+    selected: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Checkbox in selected state."
+      }
+    }
+  }
+};
+export var Disabled = {
+  args: {
+    disabled: true,
+    selected: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Disabled checkbox that cannot be interacted with."
+      }
+    }
+  }
+};
+export var DisabledSelected = {
+  args: {
+    disabled: true,
+    selected: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Disabled checkbox in selected state."
+      }
+    }
+  }
+};
+export var WithError = {
+  args: {
+    error: true,
+    selected: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Checkbox showing error state."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Check.story.js.map

package/dist/esm/elements/Checkbox/Check.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Check.story.js","names":["Check","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","selected","story","Selected","Disabled","disabled","DisabledSelected","WithError","error"],"sources":["../../../../src/elements/Checkbox/Check.story.tsx"],"sourcesContent":["import { Check } from \"./Check\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Check,\n  title: \"Components/Check\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A simple checkbox component that can be selected, disabled, or show error states.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    selected: false,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic checkbox in unselected state.\",\n      },\n    },\n  },\n}\n\nexport const Selected = {\n  args: {\n    selected: true,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Checkbox in selected state.\",\n      },\n    },\n  },\n}\n\nexport const Disabled = {\n  args: {\n    disabled: true,\n    selected: false,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Disabled checkbox that cannot be interacted with.\",\n      },\n    },\n  },\n}\n\nexport const DisabledSelected = {\n  args: {\n    disabled: true,\n    selected: true,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Disabled checkbox in selected state.\",\n      },\n    },\n  },\n}\n\nexport const WithError = {\n  args: {\n    error: true,\n    selected: false,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Checkbox showing error state.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,SAASA,KAAK;AACd,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEF,KAAK;EAChBG,KAAK,EAAE,kBAAkB;EACzBC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ;IACF,CAAC;IACDM,QAAQ,EAAE;MACNC,OAAO,EAAER;IACX;EACJ;AACF,CAAC;AAED,OAAO,IAAMS,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,QAAQ,EAAE;EACZ,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,QAAQ,GAAG;EACtBH,IAAI,EAAE;IACJC,QAAQ,EAAE;EACZ,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAME,QAAQ,GAAG;EACtBJ,IAAI,EAAE;IACJK,QAAQ,EAAE,IAAI;IACdJ,QAAQ,EAAE;EACZ,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMI,gBAAgB,GAAG;EAC9BN,IAAI,EAAE;IACJK,QAAQ,EAAE,IAAI;IACdJ,QAAQ,EAAE;EACZ,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMK,SAAS,GAAG;EACvBP,IAAI,EAAE;IACJQ,KAAK,EAAE,IAAI;IACXP,QAAQ,EAAE;EACZ,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

package/dist/esm/elements/Checkbox/Checkbox.js

@@ -0,0 +1,74 @@
+var _excluded = ["selected", "children", "error", "disabled", "hover", "focus", "onSelect", "onClick"];
+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 from "react";
+import styled, { css } from "styled-components";
+import { isText } from "../../helpers/isText";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+import { Check } from "./Check";
+import { CHECK_STATES, CHECKBOX_STATES } from "./tokens";
+/** A checkbox */
+export var Checkbox = function Checkbox(_ref) {
+  var _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected,
+    children = _ref.children,
+    error = _ref.error,
+    disabled = _ref.disabled,
+    hover = _ref.hover,
+    focus = _ref.focus,
+    onSelect = _ref.onSelect,
+    onClick = _ref.onClick,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var isSelectable = !disabled && onSelect !== undefined;
+  var handleClick = function handleClick(event) {
+    if (isSelectable && onSelect) {
+      onSelect(!selected);
+    }
+    if (onClick !== undefined) {
+      onClick(event);
+    }
+  };
+  var handleKeyPress = function handleKeyPress(event) {
+    if (event.key === " " && isSelectable && onSelect) {
+      event.preventDefault();
+      onSelect(!selected);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    display: "flex",
+    alignItems: "center",
+    onClick: handleClick,
+    tabIndex: disabled ? -1 : 0,
+    onKeyPress: handleKeyPress,
+    role: "checkbox",
+    "aria-checked": selected,
+    selected: selected,
+    hover: hover,
+    focus: focus,
+    disabled: disabled,
+    error: error
+  }, rest), /*#__PURE__*/React.createElement(Check, {
+    selected: selected,
+    error: error,
+    disabled: disabled,
+    focus: focus,
+    hover: hover
+  }), /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    flex: 1
+  }, isText(children) ? /*#__PURE__*/React.createElement(Text, {
+    variant: "sm-display",
+    lineHeight: 1
+  }, children) : children));
+};
+Checkbox.displayName = "Checkbox";
+var Container = styled(Box).withConfig({
+  displayName: "Checkbox__Container",
+  componentId: "sc-j97vg8-0"
+})(["user-select:none;", ""], function (props) {
+  return css(["", " ", " ", " ", " ", " &:hover{", "}&:focus-visible{", " > div:first-of-type{", "}}&:disabled{", "}"], props.selected ? CHECKBOX_STATES.selected : CHECKBOX_STATES.default, props.focus && CHECKBOX_STATES.focus, props.hover && CHECKBOX_STATES.hover, props.disabled && CHECKBOX_STATES.disabled, props.error && CHECKBOX_STATES.error, !props.error && css(["", " > div:first-of-type{", "}"], CHECKBOX_STATES.hover, props.selected ? CHECK_STATES.hover.selected : CHECK_STATES.hover.resting), CHECKBOX_STATES.focus, props.selected ? CHECK_STATES.focus.selected : CHECK_STATES.focus.resting, CHECKBOX_STATES.disabled);
+});
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":["React","styled","css","isText","Box","Flex","Text","Check","CHECK_STATES","CHECKBOX_STATES","Checkbox","_ref","_ref$selected","selected","children","error","disabled","hover","focus","onSelect","onClick","rest","_objectWithoutProperties","_excluded","isSelectable","undefined","handleClick","event","handleKeyPress","key","preventDefault","createElement","Container","_extends","display","alignItems","tabIndex","onKeyPress","role","flex","variant","lineHeight","displayName","withConfig","componentId","props","default","resting"],"sources":["../../../../src/elements/Checkbox/Checkbox.tsx"],"sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { isText } from \"../../helpers/isText\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Check } from \"./Check\"\nimport { CHECK_STATES, CHECKBOX_STATES } from \"./tokens\"\n\nexport interface CheckboxProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable checkbox interactions */\n  disabled?: boolean\n  /** Select the checkbox on render */\n  selected?: boolean\n  /** Show an error indicator */\n  error?: boolean\n  /** Used to force the checkbox into the visual hover state */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Callback when selected */\n  onSelect?: (selected: boolean) => void\n}\n\n/** A checkbox */\nexport const Checkbox: React.FC<React.PropsWithChildren<CheckboxProps>> = ({\n  selected = false,\n  children,\n  error,\n  disabled,\n  hover,\n  focus,\n  onSelect,\n  onClick,\n  ...rest\n}) => {\n  const isSelectable = !disabled && onSelect !== undefined\n\n  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (isSelectable && onSelect) {\n      onSelect(!selected)\n    }\n\n    if (onClick !== undefined) {\n      onClick(event)\n    }\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \" && isSelectable && onSelect) {\n      event.preventDefault()\n      onSelect(!selected)\n    }\n  }\n\n  return (\n    <Container\n      display=\"flex\"\n      alignItems=\"center\"\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      role=\"checkbox\"\n      aria-checked={selected}\n      selected={selected}\n      hover={hover}\n      focus={focus}\n      disabled={disabled}\n      error={error}\n      {...rest}\n    >\n      <Check\n        selected={selected}\n        error={error}\n        disabled={disabled}\n        focus={focus}\n        hover={hover}\n      />\n\n      <Flex alignItems=\"center\" flex={1}>\n        {isText(children) ? (\n          <Text variant=\"sm-display\" lineHeight={1}>\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </Flex>\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<{\n  selected: boolean\n  hover?: boolean\n  focus?: boolean\n  disabled?: boolean\n  error?: boolean\n}>`\n  user-select: none;\n\n  ${(props) => {\n    return css`\n      ${props.selected ? CHECKBOX_STATES.selected : CHECKBOX_STATES.default}\n      ${props.focus && CHECKBOX_STATES.focus}\n      ${props.hover && CHECKBOX_STATES.hover}\n      ${props.disabled && CHECKBOX_STATES.disabled}\n      ${props.error && CHECKBOX_STATES.error}\n\n      &:hover {\n        ${!props.error &&\n        css`\n          ${CHECKBOX_STATES.hover}\n\n          // Check\n          > div:first-of-type {\n            ${props.selected\n              ? CHECK_STATES.hover.selected\n              : CHECK_STATES.hover.resting}\n          }\n        `}\n      }\n\n      &:focus-visible {\n        ${CHECKBOX_STATES.focus}\n\n        // Check\n         > div:first-of-type {\n          ${props.selected\n            ? CHECK_STATES.focus.selected\n            : CHECK_STATES.focus.resting}\n        }\n      }\n\n      &:disabled {\n        ${CHECKBOX_STATES.disabled}\n      }\n    `\n  }}\n`\n"],"mappings":"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"}

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

@@ -0,0 +1,86 @@
+import React from "react";
+import { Checkbox } from "./Checkbox";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Checkbox component provides a selectable input with label support. Includes states for selected, disabled, error, focus, and hover interactions."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+export var Unchecked = {
+  args: {
+    children: "Checkbox label"
+  }
+};
+export var Checked = {
+  args: {
+    children: "Checked checkbox",
+    selected: true
+  }
+};
+export var WithError = {
+  args: {
+    children: "Checkbox with error",
+    error: true
+  }
+};
+export var Disabled = {
+  args: {
+    children: "Disabled checkbox",
+    disabled: true
+  }
+};
+export var DisabledAndChecked = {
+  args: {
+    children: "Disabled and checked",
+    disabled: true,
+    selected: true
+  }
+};
+export var Focus = {
+  args: {
+    children: "Focused checkbox",
+    focus: true
+  }
+};
+export var Hover = {
+  args: {
+    children: "Hovered checkbox",
+    hover: true
+  }
+};
+export var FocusAndSelected = {
+  args: {
+    children: "Focused and selected",
+    focus: true,
+    selected: true
+  }
+};
+export var HoverAndSelected = {
+  args: {
+    children: "Hovered and selected",
+    hover: true,
+    selected: true
+  }
+};
+export var WithCustomChildren = {
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "A label ", /*#__PURE__*/React.createElement(React.Fragment, null, "(", 2 + 2, ")"))
+  }
+};
+export var FullWidth = {
+  args: {
+    width: "100%",
+    children: "Full width checkbox"
+  }
+};
+//# sourceMappingURL=Checkbox.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.story.js","names":["React","Checkbox","STORYBOOK_PROPS_BLOCKLIST","title","component","tags","parameters","docs","description","controls","exclude","Unchecked","args","children","Checked","selected","WithError","error","Disabled","disabled","DisabledAndChecked","Focus","focus","Hover","hover","FocusAndSelected","HoverAndSelected","WithCustomChildren","createElement","Fragment","FullWidth","width"],"sources":["../../../../src/elements/Checkbox/Checkbox.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Checkbox } from \"./Checkbox\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  title: \"Components/Checkbox\",\n  component: Checkbox,\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"Checkbox component provides a selectable input with label support. Includes states for selected, disabled, error, focus, and hover interactions.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Unchecked = {\n  args: {\n    children: \"Checkbox label\",\n  },\n}\n\nexport const Checked = {\n  args: {\n    children: \"Checked checkbox\",\n    selected: true,\n  },\n}\n\nexport const WithError = {\n  args: {\n    children: \"Checkbox with error\",\n    error: true,\n  },\n}\n\nexport const Disabled = {\n  args: {\n    children: \"Disabled checkbox\",\n    disabled: true,\n  },\n}\n\nexport const DisabledAndChecked = {\n  args: {\n    children: \"Disabled and checked\",\n    disabled: true,\n    selected: true,\n  },\n}\n\nexport const Focus = {\n  args: {\n    children: \"Focused checkbox\",\n    focus: true,\n  },\n}\n\nexport const Hover = {\n  args: {\n    children: \"Hovered checkbox\",\n    hover: true,\n  },\n}\n\nexport const FocusAndSelected = {\n  args: {\n    children: \"Focused and selected\",\n    focus: true,\n    selected: true,\n  },\n}\n\nexport const HoverAndSelected = {\n  args: {\n    children: \"Hovered and selected\",\n    hover: true,\n    selected: true,\n  },\n}\n\nexport const WithCustomChildren = {\n  args: {\n    children: (\n      <>\n        A label <>({2 + 2})</>\n      </>\n    ),\n  },\n}\n\nexport const FullWidth = {\n  args: {\n    width: \"100%\",\n    children: \"Full width checkbox\",\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ;AACjB,SAASC,yBAAyB;AAElC,eAAe;EACbC,KAAK,EAAE,qBAAqB;EAC5BC,SAAS,EAAEH,QAAQ;EACnBI,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,SAAS,GAAG;EACvBC,IAAI,EAAE;IACJC,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMC,OAAO,GAAG;EACrBF,IAAI,EAAE;IACJC,QAAQ,EAAE,kBAAkB;IAC5BE,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMC,SAAS,GAAG;EACvBJ,IAAI,EAAE;IACJC,QAAQ,EAAE,qBAAqB;IAC/BI,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,IAAMC,QAAQ,GAAG;EACtBN,IAAI,EAAE;IACJC,QAAQ,EAAE,mBAAmB;IAC7BM,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMC,kBAAkB,GAAG;EAChCR,IAAI,EAAE;IACJC,QAAQ,EAAE,sBAAsB;IAChCM,QAAQ,EAAE,IAAI;IACdJ,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMM,KAAK,GAAG;EACnBT,IAAI,EAAE;IACJC,QAAQ,EAAE,kBAAkB;IAC5BS,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,IAAMC,KAAK,GAAG;EACnBX,IAAI,EAAE;IACJC,QAAQ,EAAE,kBAAkB;IAC5BW,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,IAAMC,gBAAgB,GAAG;EAC9Bb,IAAI,EAAE;IACJC,QAAQ,EAAE,sBAAsB;IAChCS,KAAK,EAAE,IAAI;IACXP,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMW,gBAAgB,GAAG;EAC9Bd,IAAI,EAAE;IACJC,QAAQ,EAAE,sBAAsB;IAChCW,KAAK,EAAE,IAAI;IACXT,QAAQ,EAAE;EACZ;AACF,CAAC;AAED,OAAO,IAAMY,kBAAkB,GAAG;EAChCf,IAAI,EAAE;IACJC,QAAQ,eACNb,KAAA,CAAA4B,aAAA,CAAA5B,KAAA,CAAA6B,QAAA,QAAE,UACQ,eAAA7B,KAAA,CAAA4B,aAAA,CAAA5B,KAAA,CAAA6B,QAAA,QAAE,GAAC,EAAC,CAAC,GAAG,CAAC,EAAC,GAAC,CAAG;EAG5B;AACF,CAAC;AAED,OAAO,IAAMC,SAAS,GAAG;EACvBlB,IAAI,EAAE;IACJmB,KAAK,EAAE,MAAM;IACblB,QAAQ,EAAE;EACZ;AACF,CAAC"}

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

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

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

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

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

@@ -0,0 +1,33 @@
+import { themeGet } from "@styled-system/theme-get";
+import { css } from "styled-components";
+export var CHECK_STATES = {
+  default: {
+    resting: css(["background-color:", ";border-color:", ";color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono30"), themeGet("colors.mono0")),
+    selected: css(["background-color:", ";border-color:", ";color:", ";"], themeGet("colors.mono100"), themeGet("colors.mono100"), themeGet("colors.mono0"))
+  },
+  disabled: {
+    resting: css(["background-color:", ";border-color:", ";color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono30"), themeGet("colors.mono0")),
+    selected: css(["background-color:", ";border-color:", ";color:", ";"], themeGet("colors.mono30"), themeGet("colors.mono30"), themeGet("colors.mono0"))
+  },
+  hover: {
+    resting: css(["background-color:", ";border-color:", ";color:", ";"], themeGet("colors.mono0"), themeGet("colors.blue100"), themeGet("colors.mono0")),
+    selected: css(["background-color:", ";border-color:", ";color:", ";"], themeGet("colors.blue100"), themeGet("colors.blue100"), themeGet("colors.mono0"))
+  },
+  focus: {
+    resting: css(["background-color:", ";border-color:", ";color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono100"), themeGet("colors.mono0")),
+    selected: css(["background-color:", ";border-color:", ";color:", ";"], themeGet("colors.mono100"), themeGet("colors.mono100"), themeGet("colors.mono0"))
+  },
+  error: {
+    resting: css(["background-color:", ";border-color:", ";color:", ";"], themeGet("colors.mono0"), themeGet("colors.red100"), themeGet("colors.mono0")),
+    selected: css(["background-color:", ";border-color:", ";color:", ";"], themeGet("colors.red100"), themeGet("colors.red100"), themeGet("colors.mono0"))
+  }
+};
+export var CHECKBOX_STATES = {
+  default: css(["color:", ";"], themeGet("colors.mono60")),
+  selected: css(["color:", ";"], themeGet("colors.mono100")),
+  focus: css(["text-decoration:underline;color:", ";"], themeGet("colors.mono100")),
+  hover: css(["text-decoration:underline;color:", ";"], themeGet("colors.blue100")),
+  disabled: css(["pointer-events:none;color:", ";"], themeGet("colors.mono30")),
+  error: css(["color:", ";"], themeGet("colors.red100"))
+};
+//# sourceMappingURL=tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":["themeGet","css","CHECK_STATES","default","resting","selected","disabled","hover","focus","error","CHECKBOX_STATES"],"sources":["../../../../src/elements/Checkbox/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\n\nexport const CHECK_STATES = {\n  default: {\n    resting: css`\n      background-color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono30\")};\n      color: ${themeGet(\"colors.mono0\")};\n    `,\n    selected: css`\n      background-color: ${themeGet(\"colors.mono100\")};\n      border-color: ${themeGet(\"colors.mono100\")};\n      color: ${themeGet(\"colors.mono0\")};\n    `,\n  },\n  disabled: {\n    resting: css`\n      background-color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono30\")};\n      color: ${themeGet(\"colors.mono0\")};\n    `,\n    selected: css`\n      background-color: ${themeGet(\"colors.mono30\")};\n      border-color: ${themeGet(\"colors.mono30\")};\n      color: ${themeGet(\"colors.mono0\")};\n    `,\n  },\n  hover: {\n    resting: css`\n      background-color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.mono0\")};\n    `,\n    selected: css`\n      background-color: ${themeGet(\"colors.blue100\")};\n      border-color: ${themeGet(\"colors.blue100\")};\n      color: ${themeGet(\"colors.mono0\")};\n    `,\n  },\n  focus: {\n    resting: css`\n      background-color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono100\")};\n      color: ${themeGet(\"colors.mono0\")};\n    `,\n    selected: css`\n      background-color: ${themeGet(\"colors.mono100\")};\n      border-color: ${themeGet(\"colors.mono100\")};\n      color: ${themeGet(\"colors.mono0\")};\n    `,\n  },\n  error: {\n    resting: css`\n      background-color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.red100\")};\n      color: ${themeGet(\"colors.mono0\")};\n    `,\n    selected: css`\n      background-color: ${themeGet(\"colors.red100\")};\n      border-color: ${themeGet(\"colors.red100\")};\n      color: ${themeGet(\"colors.mono0\")};\n    `,\n  },\n} as const\n\nexport const CHECKBOX_STATES = {\n  default: css`\n    color: ${themeGet(\"colors.mono60\")};\n  `,\n  selected: css`\n    color: ${themeGet(\"colors.mono100\")};\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  disabled: css`\n    pointer-events: none;\n    color: ${themeGet(\"colors.mono30\")};\n  `,\n  error: css`\n    color: ${themeGet(\"colors.red100\")};\n  `,\n} as const\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAAQ,mBAAmB;AAEvC,OAAO,IAAMC,YAAY,GAAG;EAC1BC,OAAO,EAAE;IACPC,OAAO,EAAEH,GAAG,0DACUD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,eAAe,CAAC,EAChCA,QAAQ,CAAC,cAAc,CAAC,CAClC;IACDK,QAAQ,EAAEJ,GAAG,0DACSD,QAAQ,CAAC,gBAAgB,CAAC,EAC9BA,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,cAAc,CAAC;EAErC,CAAC;EACDM,QAAQ,EAAE;IACRF,OAAO,EAAEH,GAAG,0DACUD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,eAAe,CAAC,EAChCA,QAAQ,CAAC,cAAc,CAAC,CAClC;IACDK,QAAQ,EAAEJ,GAAG,0DACSD,QAAQ,CAAC,eAAe,CAAC,EAC7BA,QAAQ,CAAC,eAAe,CAAC,EAChCA,QAAQ,CAAC,cAAc,CAAC;EAErC,CAAC;EACDO,KAAK,EAAE;IACLH,OAAO,EAAEH,GAAG,0DACUD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,cAAc,CAAC,CAClC;IACDK,QAAQ,EAAEJ,GAAG,0DACSD,QAAQ,CAAC,gBAAgB,CAAC,EAC9BA,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,cAAc,CAAC;EAErC,CAAC;EACDQ,KAAK,EAAE;IACLJ,OAAO,EAAEH,GAAG,0DACUD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,cAAc,CAAC,CAClC;IACDK,QAAQ,EAAEJ,GAAG,0DACSD,QAAQ,CAAC,gBAAgB,CAAC,EAC9BA,QAAQ,CAAC,gBAAgB,CAAC,EACjCA,QAAQ,CAAC,cAAc,CAAC;EAErC,CAAC;EACDS,KAAK,EAAE;IACLL,OAAO,EAAEH,GAAG,0DACUD,QAAQ,CAAC,cAAc,CAAC,EAC5BA,QAAQ,CAAC,eAAe,CAAC,EAChCA,QAAQ,CAAC,cAAc,CAAC,CAClC;IACDK,QAAQ,EAAEJ,GAAG,0DACSD,QAAQ,CAAC,eAAe,CAAC,EAC7BA,QAAQ,CAAC,eAAe,CAAC,EAChCA,QAAQ,CAAC,cAAc,CAAC;EAErC;AACF,CAAU;AAEV,OAAO,IAAMU,eAAe,GAAG;EAC7BP,OAAO,EAAEF,GAAG,kBACDD,QAAQ,CAAC,eAAe,CAAC,CACnC;EACDK,QAAQ,EAAEJ,GAAG,kBACFD,QAAQ,CAAC,gBAAgB,CAAC,CACpC;EACDQ,KAAK,EAAEP,GAAG,4CAECD,QAAQ,CAAC,gBAAgB,CAAC,CACpC;EACDO,KAAK,EAAEN,GAAG,4CAECD,QAAQ,CAAC,gBAAgB,CAAC,CACpC;EACDM,QAAQ,EAAEL,GAAG,sCAEFD,QAAQ,CAAC,eAAe,CAAC,CACnC;EACDS,KAAK,EAAER,GAAG,kBACCD,QAAQ,CAAC,eAAe,CAAC;AAEtC,CAAU"}