@artsy/palette 45.13.0 → 45.14.0-canary.1497.33065.0

package/dist/esm/elements/ProgressDots/ProgressDots.js

@@ -0,0 +1,85 @@
+var _excluded = ["activeIndex", "amount", "variant", "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 from "styled-components";
+import { variant } from "styled-system";
+import { Box } from "../Box";
+import { Clickable } from "../Clickable";
+import { VisuallyHidden } from "../VisuallyHidden";
+var VARIANTS = {
+  dot: {
+    width: "5px",
+    height: "5px",
+    borderRadius: "50%"
+  },
+  dash: {
+    height: "1px",
+    flex: 1
+  }
+};
+
+/** ProgressDotsProps */
+
+/**
+ * Renders an `amount` of dots and announces progress when updated
+ */
+export var ProgressDots = function ProgressDots(_ref) {
+  var activeIndex = _ref.activeIndex,
+    amount = _ref.amount,
+    _ref$variant = _ref.variant,
+    indicatorVariant = _ref$variant === void 0 ? "dot" : _ref$variant,
+    onClick = _ref.onClick,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, _extends({
+    role: onClick ? "tablist" : "presentation",
+    "aria-label": onClick ? "Progress indicators" : undefined,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    my: 0.5
+  }, rest), Array.from(Array(amount)).map(function (_, i) {
+    var isActive = i === activeIndex;
+    var indicator = /*#__PURE__*/React.createElement(Indicator, {
+      key: i,
+      variant: indicatorVariant,
+      bg: isActive ? "mono100" : "mono30",
+      mx: 0.5
+    });
+    var handleClick = function handleClick() {
+      return onClick && onClick(i);
+    };
+    if (onClick) {
+      return /*#__PURE__*/React.createElement(Clickable, {
+        key: i,
+        role: "tab",
+        "aria-label": "Go to ".concat(i + 1, " of ").concat(amount),
+        "aria-selected": isActive,
+        "aria-current": isActive ? "page" : undefined,
+        display: "block",
+        position: "relative",
+        width: indicatorVariant === "dash" ? "100%" : "auto",
+        onClick: handleClick
+      }, /*#__PURE__*/React.createElement(Box, {
+        position: "absolute",
+        top: -10,
+        bottom: -10,
+        left: 0,
+        width: "100%"
+      }), indicator);
+    }
+    return indicator;
+  })), /*#__PURE__*/React.createElement(VisuallyHidden, {
+    "aria-live": "polite",
+    "aria-atomic": "true"
+  }, activeIndex + 1, " of ", amount));
+};
+var Indicator = styled(Box).withConfig({
+  displayName: "ProgressDots__Indicator",
+  componentId: "sc-1ri84c3-0"
+})(["", " transition:background-color 250ms;"], variant({
+  variants: VARIANTS
+}));
+Indicator.displayName = "Indicator";
+//# sourceMappingURL=ProgressDots.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressDots.js","names":["React","styled","variant","Box","Clickable","VisuallyHidden","VARIANTS","dot","width","height","borderRadius","dash","flex","ProgressDots","_ref","activeIndex","amount","_ref$variant","indicatorVariant","onClick","rest","_objectWithoutProperties","_excluded","createElement","Fragment","_extends","role","undefined","display","alignItems","justifyContent","my","Array","from","map","_","i","isActive","indicator","Indicator","key","bg","mx","handleClick","concat","position","top","bottom","left","withConfig","displayName","componentId","variants"],"sources":["../../../../src/elements/ProgressDots/ProgressDots.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\n\nconst VARIANTS = {\n  dot: {\n    width: \"5px\",\n    height: \"5px\",\n    borderRadius: \"50%\",\n  },\n  dash: {\n    height: \"1px\",\n    flex: 1,\n  },\n}\n\ntype Variant = keyof typeof VARIANTS\n\n/** ProgressDotsProps */\nexport interface ProgressDotsProps extends BoxProps {\n  activeIndex: number\n  amount: number\n  variant?: Variant\n  onClick?: (index: number) => void\n}\n\n/**\n * Renders an `amount` of dots and announces progress when updated\n */\nexport const ProgressDots: React.FC<\n  React.PropsWithChildren<ProgressDotsProps>\n> = ({\n  activeIndex,\n  amount,\n  variant: indicatorVariant = \"dot\",\n  onClick,\n  ...rest\n}) => {\n  return (\n    <>\n      <Box\n        role={onClick ? \"tablist\" : \"presentation\"}\n        aria-label={onClick ? \"Progress indicators\" : undefined}\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        my={0.5}\n        {...rest}\n      >\n        {Array.from(Array(amount)).map((_, i) => {\n          const isActive = i === activeIndex\n          const indicator = (\n            <Indicator\n              key={i}\n              variant={indicatorVariant}\n              bg={isActive ? \"mono100\" : \"mono30\"}\n              mx={0.5}\n            />\n          )\n\n          const handleClick = () => onClick && onClick(i)\n\n          if (onClick) {\n            return (\n              <Clickable\n                key={i}\n                role=\"tab\"\n                aria-label={`Go to ${i + 1} of ${amount}`}\n                aria-selected={isActive}\n                aria-current={isActive ? \"page\" : undefined}\n                display=\"block\"\n                position=\"relative\"\n                width={indicatorVariant === \"dash\" ? \"100%\" : \"auto\"}\n                onClick={handleClick}\n              >\n                {/* Pads out hit area. */}\n                <Box\n                  position=\"absolute\"\n                  top={-10}\n                  bottom={-10}\n                  left={0}\n                  width=\"100%\"\n                />\n\n                {indicator}\n              </Clickable>\n            )\n          }\n\n          return indicator\n        })}\n      </Box>\n\n      <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n        {activeIndex + 1} of {amount}\n      </VisuallyHidden>\n    </>\n  )\n}\n\nconst Indicator = styled(Box)<{\n  variant: Variant\n  onClick?: (index: number) => void\n}>`\n  ${variant({ variants: VARIANTS })}\n  transition: background-color 250ms;\n`\n\nIndicator.displayName = \"Indicator\"\n"],"mappings":"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"}

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

@@ -0,0 +1,148 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { fn } from "@storybook/test";
+import React, { useState } from "react";
+import { ProgressDots } from "./ProgressDots";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: ProgressDots,
+  title: "Components/ProgressDots",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A navigation component displaying a series of dots or dashes to indicate progress or position."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    activeIndex: 0,
+    amount: 5
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic progress dots showing position in a sequence."
+      }
+    }
+  }
+};
+export var DotVariants = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px"
+      }
+    }, /*#__PURE__*/React.createElement(ProgressDots, {
+      activeIndex: 0,
+      amount: 5
+    }), /*#__PURE__*/React.createElement(ProgressDots, {
+      activeIndex: 2,
+      amount: 5
+    }), /*#__PURE__*/React.createElement(ProgressDots, {
+      activeIndex: 4,
+      amount: 5
+    }), /*#__PURE__*/React.createElement(ProgressDots, {
+      activeIndex: 0,
+      amount: 25
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Dot variant with different active indices and amounts."
+      }
+    }
+  }
+};
+export var DashVariants = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px"
+      }
+    }, /*#__PURE__*/React.createElement(ProgressDots, {
+      variant: "dash",
+      activeIndex: 0,
+      amount: 5
+    }), /*#__PURE__*/React.createElement(ProgressDots, {
+      variant: "dash",
+      activeIndex: 2,
+      amount: 5
+    }), /*#__PURE__*/React.createElement(ProgressDots, {
+      variant: "dash",
+      activeIndex: 4,
+      amount: 5
+    }), /*#__PURE__*/React.createElement(ProgressDots, {
+      variant: "dash",
+      activeIndex: 0,
+      amount: 25
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Dash variant with different active indices and amounts."
+      }
+    }
+  }
+};
+export var Interactive = {
+  render: function render() {
+    var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      index = _useState2[0],
+      setIndex = _useState2[1];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProgressDots, {
+      activeIndex: index,
+      amount: 5,
+      my: 2,
+      onClick: setIndex
+    }), /*#__PURE__*/React.createElement(ProgressDots, {
+      variant: "dash",
+      activeIndex: index,
+      amount: 5,
+      my: 2,
+      onClick: setIndex
+    }));
+  },
+  parameters: {
+    chromatic: {
+      disable: true
+    },
+    docs: {
+      description: {
+        story: "Interactive progress dots that respond to clicks."
+      }
+    }
+  }
+};
+export var Clickable = {
+  args: {
+    variant: "dash",
+    activeIndex: 0,
+    amount: 5,
+    onClick: fn()
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Progress dots with click handler functionality."
+      }
+    }
+  }
+};
+//# sourceMappingURL=ProgressDots.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressDots.story.js","names":["fn","React","useState","ProgressDots","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","activeIndex","amount","story","DotVariants","render","createElement","style","display","flexDirection","gap","DashVariants","variant","Interactive","_useState","_useState2","_slicedToArray","index","setIndex","Fragment","my","onClick","chromatic","disable","Clickable"],"sources":["../../../../src/elements/ProgressDots/ProgressDots.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React, { useState } from \"react\"\nimport { ProgressDots } from \"./ProgressDots\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: ProgressDots,\n  title: \"Components/ProgressDots\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A navigation component displaying a series of dots or dashes to indicate progress or position.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    activeIndex: 0,\n    amount: 5,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic progress dots showing position in a sequence.\",\n      },\n    },\n  },\n}\n\nexport const DotVariants = {\n  render: () => (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <ProgressDots activeIndex={0} amount={5} />\n      <ProgressDots activeIndex={2} amount={5} />\n      <ProgressDots activeIndex={4} amount={5} />\n      <ProgressDots activeIndex={0} amount={25} />\n    </div>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Dot variant with different active indices and amounts.\",\n      },\n    },\n  },\n}\n\nexport const DashVariants = {\n  render: () => (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <ProgressDots variant=\"dash\" activeIndex={0} amount={5} />\n      <ProgressDots variant=\"dash\" activeIndex={2} amount={5} />\n      <ProgressDots variant=\"dash\" activeIndex={4} amount={5} />\n      <ProgressDots variant=\"dash\" activeIndex={0} amount={25} />\n    </div>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Dash variant with different active indices and amounts.\",\n      },\n    },\n  },\n}\n\nexport const Interactive = {\n  render: () => {\n    const [index, setIndex] = useState(0)\n\n    return (\n      <>\n        <ProgressDots\n          activeIndex={index}\n          amount={5}\n          my={2}\n          onClick={setIndex}\n        />\n        <ProgressDots\n          variant=\"dash\"\n          activeIndex={index}\n          amount={5}\n          my={2}\n          onClick={setIndex}\n        />\n      </>\n    )\n  },\n  parameters: {\n    chromatic: { disable: true },\n    docs: {\n      description: {\n        story: \"Interactive progress dots that respond to clicks.\",\n      },\n    },\n  },\n}\n\nexport const Clickable = {\n  args: {\n    variant: \"dash\",\n    activeIndex: 0,\n    amount: 5,\n    onClick: fn(),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Progress dots with click handler functionality.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

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

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

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

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

package/dist/esm/elements/Radio/Radio.js

@@ -0,0 +1,90 @@
+var _excluded = ["children", "disabled", "hover", "focus", "error", "label", "selected", "value", "size", "onSelect"];
+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 { Flex } from "../../elements/Flex";
+import { isText } from "../../helpers/isText";
+import { Text } from "../Text";
+import { RadioDot } from "./RadioDot";
+import { RADIO_DOT_STATES, RADIO_STATES, RADIO_SIZES } from "./tokens";
+/** A Radio button */
+export var Radio = function Radio(_ref) {
+  var children = _ref.children,
+    disabled = _ref.disabled,
+    hover = _ref.hover,
+    focus = _ref.focus,
+    error = _ref.error,
+    label = _ref.label,
+    selected = _ref.selected,
+    value = _ref.value,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "sm" : _ref$size,
+    onSelect = _ref.onSelect,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var handleClick = function handleClick() {
+    onSelect && onSelect({
+      selected: !selected,
+      value: value
+    });
+  };
+  var handleKeyPress = function handleKeyPress(event) {
+    if (event.key === " ") {
+      event.preventDefault();
+      onSelect && onSelect({
+        selected: !selected,
+        value: value
+      });
+    }
+  };
+
+  // TODO: Re-name props to match <Input />
+  var title = label ? label : children;
+  var description = label ? children : null;
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    as: "label",
+    alignItems: "center",
+    role: "radio",
+    "aria-checked": selected,
+    onClick: handleClick,
+    tabIndex: disabled ? -1 : 0,
+    onKeyPress: handleKeyPress,
+    disabled: disabled,
+    hover: hover,
+    focus: focus,
+    selected: selected,
+    error: error
+  }, rest), /*#__PURE__*/React.createElement(Flex, {
+    height: RADIO_SIZES[size].dotSize,
+    width: RADIO_SIZES[size].dotSize,
+    alignSelf: "start",
+    mr: 1
+  }, /*#__PURE__*/React.createElement(RadioDot, {
+    disabled: disabled,
+    hover: hover,
+    focus: focus,
+    selected: selected,
+    error: error
+  })), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "column",
+    flex: 1
+  }, /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    flex: 1
+  }, isText(title) ? /*#__PURE__*/React.createElement(Text, {
+    variant: RADIO_SIZES[size].labelFontSize,
+    lineHeight: description ? undefined : 1
+  }, title) : title), isText(description) ? /*#__PURE__*/React.createElement(Text, {
+    variant: RADIO_SIZES[size].descriptionFontSize,
+    color: "mono60"
+  }, description) : description));
+};
+Radio.displayName = "Radio";
+var Container = styled(Flex).withConfig({
+  displayName: "Radio__Container",
+  componentId: "sc-dpre3w-0"
+})(["", ""], function (props) {
+  return css(["", " ", " ", " ", " ", " &:hover{", "}&:focus-visible{", " > ", "{", "}}&:disabled{pointer-events:none;", "}"], props.selected ? RADIO_STATES.selected : RADIO_STATES.default, props.focus && RADIO_STATES.focus, props.hover && RADIO_STATES.hover, props.disabled && RADIO_STATES.disabled, props.error && RADIO_STATES.error, !props.error && !props.disabled && css(["", " > ", "{", "}"], RADIO_STATES.hover, RadioDot, props.selected ? RADIO_DOT_STATES.hover.selected : RADIO_DOT_STATES.hover.resting), RADIO_STATES.focus, RadioDot, props.selected ? RADIO_DOT_STATES.focus.selected : RADIO_DOT_STATES.focus.resting, RADIO_STATES.disabled);
+});
+//# sourceMappingURL=Radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","names":["React","styled","css","Flex","isText","Text","RadioDot","RADIO_DOT_STATES","RADIO_STATES","RADIO_SIZES","Radio","_ref","children","disabled","hover","focus","error","label","selected","value","_ref$size","size","onSelect","rest","_objectWithoutProperties","_excluded","handleClick","handleKeyPress","event","key","preventDefault","title","description","createElement","Container","_extends","as","alignItems","role","onClick","tabIndex","onKeyPress","height","dotSize","width","alignSelf","mr","flexDirection","flex","variant","labelFontSize","lineHeight","undefined","descriptionFontSize","color","displayName","withConfig","componentId","props","default","resting"],"sources":["../../../../src/elements/Radio/Radio.tsx"],"sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Flex, FlexProps } from \"../../elements/Flex\"\nimport { isText } from \"../../helpers/isText\"\nimport { Text } from \"../Text\"\nimport { RadioDot } from \"./RadioDot\"\nimport { RADIO_DOT_STATES, RADIO_STATES, RADIO_SIZES } from \"./tokens\"\n\nexport interface RadioProps<T>\n  extends FlexProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable interactions */\n  disabled?: boolean\n  /** Select the button on render. If the Radio is inside a RadioGroup, use RadioGroup.defaultValue instead. */\n  selected?: boolean\n  /** Show an error indicator */\n  error?: boolean\n  /** Show hover state on render */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Value of radio button */\n  value?: T\n  /** Name of the radio button */\n  name?: string\n  /** The label content, if not specified the children will be used  */\n  label?: React.ReactNode\n  /** The radio size, if not specified, \"sm\" will be used  */\n  size?: keyof typeof RADIO_SIZES\n  /** Callback when selected */\n  onSelect?: (selected: { selected: boolean; value: T }) => void\n}\n\n/** A Radio button */\nexport const Radio = <T,>({\n  children,\n  disabled,\n  hover,\n  focus,\n  error,\n  label,\n  selected,\n  value,\n  size = \"sm\",\n  onSelect,\n  ...rest\n}: RadioProps<T>) => {\n  const handleClick = () => {\n    onSelect && onSelect({ selected: !selected, value: value! })\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \") {\n      event.preventDefault()\n      onSelect && onSelect({ selected: !selected, value: value! })\n    }\n  }\n\n  // TODO: Re-name props to match <Input />\n  const title = label ? label : children\n  const description = label ? children : null\n\n  return (\n    <Container\n      as=\"label\"\n      alignItems=\"center\"\n      role=\"radio\"\n      aria-checked={selected}\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      disabled={disabled}\n      hover={hover}\n      focus={focus}\n      selected={selected}\n      error={error}\n      {...rest}\n    >\n      <Flex\n        height={RADIO_SIZES[size].dotSize}\n        width={RADIO_SIZES[size].dotSize}\n        alignSelf=\"start\"\n        mr={1}\n      >\n        <RadioDot\n          disabled={disabled}\n          hover={hover}\n          focus={focus}\n          selected={selected}\n          error={error}\n        />\n      </Flex>\n\n      <Flex flexDirection=\"column\" flex={1}>\n        <Flex alignItems=\"center\" flex={1}>\n          {isText(title) ? (\n            <Text\n              variant={RADIO_SIZES[size].labelFontSize}\n              lineHeight={description ? undefined : 1}\n            >\n              {title}\n            </Text>\n          ) : (\n            title\n          )}\n        </Flex>\n\n        {isText(description) ? (\n          <Text variant={RADIO_SIZES[size].descriptionFontSize} color=\"mono60\">\n            {description}\n          </Text>\n        ) : (\n          description\n        )}\n      </Flex>\n    </Container>\n  )\n}\n\nconst Container = styled(Flex)<{\n  disabled?: boolean\n  error?: boolean\n  hover?: boolean\n  focus?: boolean\n  selected?: boolean\n  as?: React.ElementType\n}>`\n  ${(props) => {\n    return css`\n      ${props.selected ? RADIO_STATES.selected : RADIO_STATES.default}\n      ${props.focus && RADIO_STATES.focus}\n      ${props.hover && RADIO_STATES.hover}\n      ${props.disabled && RADIO_STATES.disabled}\n      ${props.error && RADIO_STATES.error}\n\n      &:hover {\n        ${!props.error &&\n        !props.disabled &&\n        css`\n          ${RADIO_STATES.hover}\n\n          // Radio\n          > ${RadioDot} {\n            ${props.selected\n              ? RADIO_DOT_STATES.hover.selected\n              : RADIO_DOT_STATES.hover.resting}\n          }\n        `}\n      }\n\n      &:focus-visible {\n        ${RADIO_STATES.focus}\n\n        // Radio\n        > ${RadioDot} {\n          ${props.selected\n            ? RADIO_DOT_STATES.focus.selected\n            : RADIO_DOT_STATES.focus.resting}\n        }\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${RADIO_STATES.disabled}\n      }\n    `\n  }}\n`\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,IAAI;AACb,SAASC,MAAM;AACf,SAASC,IAAI;AACb,SAASC,QAAQ;AACjB,SAASC,gBAAgB,EAAEC,YAAY,EAAEC,WAAW;AA2BpD;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAKA,CAAAC,IAAA,EAYG;EAAA,IAXnBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,KAAK,GAAAL,IAAA,CAALK,KAAK;IACLC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IACRC,KAAK,GAAAR,IAAA,CAALQ,KAAK;IAAAC,SAAA,GAAAT,IAAA,CACLU,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,IAAI,GAAAA,SAAA;IACXE,QAAQ,GAAAX,IAAA,CAARW,QAAQ;IACLC,IAAI,GAAAC,wBAAA,CAAAb,IAAA,EAAAc,SAAA;EAEP,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxBJ,QAAQ,IAAIA,QAAQ,CAAC;MAAEJ,QAAQ,EAAE,CAACA,QAAQ;MAAEC,KAAK,EAAEA;IAAO,CAAC,CAAC;EAC9D,CAAC;EAED,IAAMQ,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,KAA0C,EAAK;IACrE,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE;MACtBR,QAAQ,IAAIA,QAAQ,CAAC;QAAEJ,QAAQ,EAAE,CAACA,QAAQ;QAAEC,KAAK,EAAEA;MAAO,CAAC,CAAC;IAC9D;EACF,CAAC;;EAED;EACA,IAAMY,KAAK,GAAGd,KAAK,GAAGA,KAAK,GAAGL,QAAQ;EACtC,IAAMoB,WAAW,GAAGf,KAAK,GAAGL,QAAQ,GAAG,IAAI;EAE3C,oBACEZ,KAAA,CAAAiC,aAAA,CAACC,SAAS,EAAAC,QAAA;IACRC,EAAE,EAAC,OAAO;IACVC,UAAU,EAAC,QAAQ;IACnBC,IAAI,EAAC,OAAO;IACZ,gBAAcpB,QAAS;IACvBqB,OAAO,EAAEb,WAAY;IACrBc,QAAQ,EAAE3B,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;IAC5B4B,UAAU,EAAEd,cAAe;IAC3Bd,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA,KAAM;IACbC,KAAK,EAAEA,KAAM;IACbG,QAAQ,EAAEA,QAAS;IACnBF,KAAK,EAAEA;EAAM,GACTO,IAAI,gBAERvB,KAAA,CAAAiC,aAAA,CAAC9B,IAAI;IACHuC,MAAM,EAAEjC,WAAW,CAACY,IAAI,CAAC,CAACsB,OAAQ;IAClCC,KAAK,EAAEnC,WAAW,CAACY,IAAI,CAAC,CAACsB,OAAQ;IACjCE,SAAS,EAAC,OAAO;IACjBC,EAAE,EAAE;EAAE,gBAEN9C,KAAA,CAAAiC,aAAA,CAAC3B,QAAQ;IACPO,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA,KAAM;IACbC,KAAK,EAAEA,KAAM;IACbG,QAAQ,EAAEA,QAAS;IACnBF,KAAK,EAAEA;EAAM,EACb,CACG,eAEPhB,KAAA,CAAAiC,aAAA,CAAC9B,IAAI;IAAC4C,aAAa,EAAC,QAAQ;IAACC,IAAI,EAAE;EAAE,gBACnChD,KAAA,CAAAiC,aAAA,CAAC9B,IAAI;IAACkC,UAAU,EAAC,QAAQ;IAACW,IAAI,EAAE;EAAE,GAC/B5C,MAAM,CAAC2B,KAAK,CAAC,gBACZ/B,KAAA,CAAAiC,aAAA,CAAC5B,IAAI;IACH4C,OAAO,EAAExC,WAAW,CAACY,IAAI,CAAC,CAAC6B,aAAc;IACzCC,UAAU,EAAEnB,WAAW,GAAGoB,SAAS,GAAG;EAAE,GAEvCrB,KAAK,CACD,GAEPA,KACD,CACI,EAEN3B,MAAM,CAAC4B,WAAW,CAAC,gBAClBhC,KAAA,CAAAiC,aAAA,CAAC5B,IAAI;IAAC4C,OAAO,EAAExC,WAAW,CAACY,IAAI,CAAC,CAACgC,mBAAoB;IAACC,KAAK,EAAC;EAAQ,GACjEtB,WAAW,CACP,GAEPA,WACD,CACI,CACG;AAEhB,CAAC;AAnFYtB,KAAK,CAAA6C,WAAA;AAqFlB,IAAMrB,SAAS,GAAGjC,MAAM,CAACE,IAAI,CAAC,CAAAqD,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,aAQ1B,UAACC,KAAK,EAAK;EACX,OAAOxD,GAAG,mHACNwD,KAAK,CAACxC,QAAQ,GAAGV,YAAY,CAACU,QAAQ,GAAGV,YAAY,CAACmD,OAAO,EAC7DD,KAAK,CAAC3C,KAAK,IAAIP,YAAY,CAACO,KAAK,EACjC2C,KAAK,CAAC5C,KAAK,IAAIN,YAAY,CAACM,KAAK,EACjC4C,KAAK,CAAC7C,QAAQ,IAAIL,YAAY,CAACK,QAAQ,EACvC6C,KAAK,CAAC1C,KAAK,IAAIR,YAAY,CAACQ,KAAK,EAG/B,CAAC0C,KAAK,CAAC1C,KAAK,IACd,CAAC0C,KAAK,CAAC7C,QAAQ,IACfX,GAAG,wBACCM,YAAY,CAACM,KAAK,EAGhBR,QAAQ,EACRoD,KAAK,CAACxC,QAAQ,GACZX,gBAAgB,CAACO,KAAK,CAACI,QAAQ,GAC/BX,gBAAgB,CAACO,KAAK,CAAC8C,OAAO,CAErC,EAICpD,YAAY,CAACO,KAAK,EAGhBT,QAAQ,EACRoD,KAAK,CAACxC,QAAQ,GACZX,gBAAgB,CAACQ,KAAK,CAACG,QAAQ,GAC/BX,gBAAgB,CAACQ,KAAK,CAAC6C,OAAO,EAMlCpD,YAAY,CAACK,QAAQ;AAG7B,CAAC,CACF"}

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

@@ -0,0 +1,120 @@
+import React from "react";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+import { Radio } from "./Radio";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: Radio,
+  title: "Components/Radio",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A radio button input component with support for labels, descriptions, and various states."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    children: "A label"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic radio button with a simple label."
+      }
+    }
+  }
+};
+export var Selected = {
+  args: {
+    selected: true,
+    children: "Selected radio"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Radio button in selected state."
+      }
+    }
+  }
+};
+export var Disabled = {
+  args: {
+    disabled: true,
+    children: "Disabled radio"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Disabled radio button that cannot be interacted with."
+      }
+    }
+  }
+};
+export var WithError = {
+  args: {
+    error: true,
+    children: "Radio with error"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Radio button showing error state."
+      }
+    }
+  }
+};
+export var WithDescription = {
+  args: {
+    label: "A label that takes up multiple lines",
+    width: "200px",
+    children: "This is my description"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Radio button with both label and description text."
+      }
+    }
+  }
+};
+export var SmallSize = {
+  args: {
+    label: "Small radio",
+    size: "sm",
+    children: "This is my description"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Small sized radio button."
+      }
+    }
+  }
+};
+export var SplitLabel = {
+  args: {
+    children: /*#__PURE__*/React.createElement(Flex, {
+      justifyContent: "space-between",
+      flex: 1
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "sm-display"
+    }, "Label"), /*#__PURE__*/React.createElement(Text, {
+      variant: "xs",
+      color: "mono60"
+    }, "Subtitle"))
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Radio button with custom split label layout."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Radio.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.story.js","names":["React","Flex","Text","Radio","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","children","story","Selected","selected","Disabled","disabled","WithError","error","WithDescription","label","width","SmallSize","size","SplitLabel","createElement","justifyContent","flex","variant","color"],"sources":["../../../../src/elements/Radio/Radio.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Radio } from \"./Radio\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Radio,\n  title: \"Components/Radio\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A radio button input component with support for labels, descriptions, and various states.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    children: \"A label\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic radio button with a simple label.\",\n      },\n    },\n  },\n}\n\nexport const Selected = {\n  args: {\n    selected: true,\n    children: \"Selected radio\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Radio button in selected state.\",\n      },\n    },\n  },\n}\n\nexport const Disabled = {\n  args: {\n    disabled: true,\n    children: \"Disabled radio\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Disabled radio button that cannot be interacted with.\",\n      },\n    },\n  },\n}\n\nexport const WithError = {\n  args: {\n    error: true,\n    children: \"Radio with error\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Radio button showing error state.\",\n      },\n    },\n  },\n}\n\nexport const WithDescription = {\n  args: {\n    label: \"A label that takes up multiple lines\",\n    width: \"200px\",\n    children: \"This is my description\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Radio button with both label and description text.\",\n      },\n    },\n  },\n}\n\nexport const SmallSize = {\n  args: {\n    label: \"Small radio\",\n    size: \"sm\",\n    children: \"This is my description\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Small sized radio button.\",\n      },\n    },\n  },\n}\n\nexport const SplitLabel = {\n  args: {\n    children: (\n      <Flex justifyContent=\"space-between\" flex={1}>\n        <Text variant=\"sm-display\">Label</Text>\n        <Text variant=\"xs\" color=\"mono60\">\n          Subtitle\n        </Text>\n      </Flex>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Radio button with custom split label layout.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,IAAI;AACb,SAASC,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;IACJI,QAAQ,EAAE,IAAI;IACdH,QAAQ,EAAE;EACZ,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMG,QAAQ,GAAG;EACtBL,IAAI,EAAE;IACJM,QAAQ,EAAE,IAAI;IACdL,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;AAED,OAAO,IAAMO,eAAe,GAAG;EAC7BT,IAAI,EAAE;IACJU,KAAK,EAAE,sCAAsC;IAC7CC,KAAK,EAAE,OAAO;IACdV,QAAQ,EAAE;EACZ,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMU,SAAS,GAAG;EACvBZ,IAAI,EAAE;IACJU,KAAK,EAAE,aAAa;IACpBG,IAAI,EAAE,IAAI;IACVZ,QAAQ,EAAE;EACZ,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMY,UAAU,GAAG;EACxBd,IAAI,EAAE;IACJC,QAAQ,eACNf,KAAA,CAAA6B,aAAA,CAAC5B,IAAI;MAAC6B,cAAc,EAAC,eAAe;MAACC,IAAI,EAAE;IAAE,gBAC3C/B,KAAA,CAAA6B,aAAA,CAAC3B,IAAI;MAAC8B,OAAO,EAAC;IAAY,GAAC,OAAK,CAAO,eACvChC,KAAA,CAAA6B,aAAA,CAAC3B,IAAI;MAAC8B,OAAO,EAAC,IAAI;MAACC,KAAK,EAAC;IAAQ,GAAC,UAElC,CAAO;EAGb,CAAC;EACDzB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

package/dist/esm/elements/Radio/RadioDot.js

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import { Box } from "../Box";
+import { RADIO_DOT_STATES } from "./tokens";
+export var RadioDot = styled(Box).withConfig({
+  displayName: "RadioDot",
+  componentId: "sc-1m6kyb-0"
+})(["width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color 0.25s,border-color 0.25s,color 0.25s;", ";&::after{content:\"\";display:block;width:12px;height:12px;border-radius:50%;transition:background-color 0.25s;background-color:currentColor;}"], function (props) {
+  var mode = function () {
+    switch (true) {
+      case props.disabled:
+        return RADIO_DOT_STATES.disabled;
+      case props.hover:
+        return RADIO_DOT_STATES.hover;
+      case props.focus:
+        return RADIO_DOT_STATES.focus;
+      case props.error:
+        return RADIO_DOT_STATES.error;
+      default:
+        return RADIO_DOT_STATES.default;
+    }
+  }();
+  return props.selected ? mode.selected : mode.resting;
+});
+//# sourceMappingURL=RadioDot.js.map

package/dist/esm/elements/Radio/RadioDot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioDot.js","names":["styled","Box","RADIO_DOT_STATES","RadioDot","withConfig","displayName","componentId","props","mode","disabled","hover","focus","error","default","selected","resting"],"sources":["../../../../src/elements/Radio/RadioDot.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { RADIO_DOT_STATES } from \"./tokens\"\n\nexport interface CheckProps {\n  disabled?: boolean\n  error?: boolean\n  hover?: boolean\n  focus?: boolean\n  selected?: boolean\n}\n\nexport const RadioDot = styled(Box)<CheckProps>`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\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.disabled:\n          return RADIO_DOT_STATES.disabled\n        case props.hover:\n          return RADIO_DOT_STATES.hover\n        case props.focus:\n          return RADIO_DOT_STATES.focus\n        case props.error:\n          return RADIO_DOT_STATES.error\n        default:\n          return RADIO_DOT_STATES.default\n      }\n    })()\n\n    return props.selected ? mode.selected : mode.resting\n  }};\n\n  /* Dot  */\n  &::after {\n    content: \"\";\n    display: block;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    transition: background-color 0.25s;\n    background-color: currentColor;\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG;AACZ,SAASC,gBAAgB;AAUzB,OAAO,IAAMC,QAAQ,GAAGH,MAAM,CAACC,GAAG,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2UAU/B,UAACC,KAAK,EAAK;EACX,IAAMC,IAAI,GAAI,YAAM;IAClB,QAAQ,IAAI;MACV,KAAKD,KAAK,CAACE,QAAQ;QACjB,OAAOP,gBAAgB,CAACO,QAAQ;MAClC,KAAKF,KAAK,CAACG,KAAK;QACd,OAAOR,gBAAgB,CAACQ,KAAK;MAC/B,KAAKH,KAAK,CAACI,KAAK;QACd,OAAOT,gBAAgB,CAACS,KAAK;MAC/B,KAAKJ,KAAK,CAACK,KAAK;QACd,OAAOV,gBAAgB,CAACU,KAAK;MAC/B;QACE,OAAOV,gBAAgB,CAACW,OAAO;IAAA;EAErC,CAAC,EAAG;EAEJ,OAAON,KAAK,CAACO,QAAQ,GAAGN,IAAI,CAACM,QAAQ,GAAGN,IAAI,CAACO,OAAO;AACtD,CAAC,CAYF"}

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

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

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

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

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

@@ -0,0 +1,50 @@
+import { themeGet } from "@styled-system/theme-get";
+import { css } from "styled-components";
+export var RADIO_DOT_STATES = {
+  default: {
+    resting: css(["border:1px solid;color:", ";border-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono30")),
+    selected: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono100"), themeGet("colors.mono100"))
+  },
+  focus: {
+    resting: css(["border:1px solid;color:", ";border-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono100")),
+    selected: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono100"), themeGet("colors.mono100"))
+  },
+  disabled: {
+    resting: css(["border:1px solid;color:", ";border-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono30")),
+    selected: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono30"), themeGet("colors.mono30"))
+  },
+  error: {
+    resting: css(["border:1px solid;color:", ";border-color:", ";"], themeGet("colors.mono0"), themeGet("colors.red100")),
+    selected: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], themeGet("colors.mono0"), themeGet("colors.red100"), themeGet("colors.red100"))
+  },
+  hover: {
+    resting: css(["border:1px solid;color:transparent;border-color:", ";background-color:", ";"], themeGet("colors.blue100"), themeGet("colors.mono0")),
+    selected: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], themeGet("colors.mono0"), themeGet("colors.blue100"), themeGet("colors.blue100"))
+  }
+};
+export var RADIO_STATES = {
+  default: css(["color:", ";"], themeGet("colors.mono60")),
+  focus: css(["color:", ";> div > div:first-of-type{text-decoration:underline;}"], themeGet("colors.mono100")),
+  selected: css(["color:", ";"], themeGet("colors.mono100")),
+  hover: css(["color:", ";> div > div:first-of-type{text-decoration:underline;}"], themeGet("colors.blue100")),
+  disabled: css(["pointer-events:none;color:", ";"], themeGet("colors.mono30")),
+  error: css(["color:", ";"], themeGet("colors.red100"))
+};
+export var RADIO_SIZES = {
+  sm: {
+    labelFontSize: "sm-display",
+    descriptionFontSize: "xs",
+    dotSize: "20px"
+  },
+  md: {
+    labelFontSize: "md",
+    descriptionFontSize: "sm",
+    dotSize: "25px"
+  },
+  lg: {
+    labelFontSize: "lg-display",
+    descriptionFontSize: "md",
+    dotSize: "32px"
+  }
+};
+//# sourceMappingURL=tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":["themeGet","css","RADIO_DOT_STATES","default","resting","selected","focus","disabled","error","hover","RADIO_STATES","RADIO_SIZES","sm","labelFontSize","descriptionFontSize","dotSize","md","lg"],"sources":["../../../../src/elements/Radio/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { ResponsiveValue } from \"styled-system\"\nimport { TextVariant } from \"../../Theme\"\n\nexport const RADIO_DOT_STATES = {\n  default: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono30\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono100\")};\n      background-color: ${themeGet(\"colors.mono100\")};\n    `,\n  },\n  focus: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono100\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono100\")};\n      background-color: ${themeGet(\"colors.mono100\")};\n    `,\n  },\n  disabled: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono30\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.mono30\")};\n      background-color: ${themeGet(\"colors.mono30\")};\n    `,\n  },\n  error: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.red100\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.red100\")};\n      background-color: ${themeGet(\"colors.red100\")};\n    `,\n  },\n  hover: {\n    resting: css`\n      border: 1px solid;\n      color: transparent;\n      border-color: ${themeGet(\"colors.blue100\")};\n      background-color: ${themeGet(\"colors.mono0\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.mono0\")};\n      border-color: ${themeGet(\"colors.blue100\")};\n      background-color: ${themeGet(\"colors.blue100\")};\n    `,\n  },\n}\n\nexport const RADIO_STATES = {\n  default: css`\n    color: ${themeGet(\"colors.mono60\")};\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n\n    /* Label */\n    > div > div:first-of-type {\n      text-decoration: underline;\n    }\n  `,\n  selected: css`\n    color: ${themeGet(\"colors.mono100\")};\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n\n    /* Label */\n    > div > div:first-of-type {\n      text-decoration: underline;\n    }\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\ninterface SizeVariant {\n  labelFontSize: ResponsiveValue<TextVariant>\n  descriptionFontSize: ResponsiveValue<TextVariant>\n  dotSize: string\n}\n\nexport const RADIO_SIZES: Record<string, SizeVariant> = {\n  sm: {\n    labelFontSize: \"sm-display\",\n    descriptionFontSize: \"xs\",\n    dotSize: \"20px\",\n  },\n  md: {\n    labelFontSize: \"md\",\n    descriptionFontSize: \"sm\",\n    dotSize: \"25px\",\n  },\n  lg: {\n    labelFontSize: \"lg-display\",\n    descriptionFontSize: \"md\",\n    dotSize: \"32px\",\n  },\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAAQ,mBAAmB;AAIvC,OAAO,IAAMC,gBAAgB,GAAG;EAC9BC,OAAO,EAAE;IACPC,OAAO,EAAEH,GAAG,qDAEDD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,CAC1C;IACDK,QAAQ,EAAEJ,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,gBAAgB,CAAC;EAElD,CAAC;EACDM,KAAK,EAAE;IACLF,OAAO,EAAEH,GAAG,qDAEDD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,gBAAgB,CAAC,CAC3C;IACDK,QAAQ,EAAEJ,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,gBAAgB,CAAC;EAElD,CAAC;EACDO,QAAQ,EAAE;IACRH,OAAO,EAAEH,GAAG,qDAEDD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,CAC1C;IACDK,QAAQ,EAAEJ,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,eAAe,CAAC;EAEjD,CAAC;EACDQ,KAAK,EAAE;IACLJ,OAAO,EAAEH,GAAG,qDAEDD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,CAC1C;IACDK,QAAQ,EAAEJ,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,eAAe,CAAC;EAEjD,CAAC;EACDS,KAAK,EAAE;IACLL,OAAO,EAAEH,GAAG,kFAGMD,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,cAAc,CAAC,CAC7C;IACDK,QAAQ,EAAEJ,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,gBAAgB,CAAC;EAElD;AACF,CAAC;AAED,OAAO,IAAMU,YAAY,GAAG;EAC1BP,OAAO,EAAEF,GAAG,kBACDD,QAAQ,CAAC,eAAe,CAAC,CACnC;EACDM,KAAK,EAAEL,GAAG,uEACCD,QAAQ,CAAC,gBAAgB,CAAC,CAMpC;EACDK,QAAQ,EAAEJ,GAAG,kBACFD,QAAQ,CAAC,gBAAgB,CAAC,CACpC;EACDS,KAAK,EAAER,GAAG,uEACCD,QAAQ,CAAC,gBAAgB,CAAC,CAMpC;EACDO,QAAQ,EAAEN,GAAG,sCAEFD,QAAQ,CAAC,eAAe,CAAC,CACnC;EACDQ,KAAK,EAAEP,GAAG,kBACCD,QAAQ,CAAC,eAAe,CAAC;AAEtC,CAAU;AAQV,OAAO,IAAMW,WAAwC,GAAG;EACtDC,EAAE,EAAE;IACFC,aAAa,EAAE,YAAY;IAC3BC,mBAAmB,EAAE,IAAI;IACzBC,OAAO,EAAE;EACX,CAAC;EACDC,EAAE,EAAE;IACFH,aAAa,EAAE,IAAI;IACnBC,mBAAmB,EAAE,IAAI;IACzBC,OAAO,EAAE;EACX,CAAC;EACDE,EAAE,EAAE;IACFJ,aAAa,EAAE,YAAY;IAC3BC,mBAAmB,EAAE,IAAI;IACzBC,OAAO,EAAE;EACX;AACF,CAAC"}