@artsy/palette 24.1.1 → 24.2.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# v24.2.0 (Fri Sep 09 2022)
+
+#### 🚀  Enhancement
+
+- feat(TX-649): create radio size variants [#1205](https://github.com/artsy/palette/pull/1205) ([@rquartararo](https://github.com/rquartararo))
+
+#### Authors: 1
+
+- Rachel Quartararo ([@rquartararo](https://github.com/rquartararo))
+
+---
+
+# v24.1.2 (Fri Sep 02 2022)
+
+#### 🐛  Bug Fix
+
+- refactor(Select): add useForwardRef [#1204](https://github.com/artsy/palette/pull/1204) ([@laurabeth](https://github.com/laurabeth))
+- cleanup ([@laurabeth](https://github.com/laurabeth))
+- refactor Select into ForwardRef component ([@laurabeth](https://github.com/laurabeth))
+
+#### Authors: 1
+
+- Laura Bhayani ([@laurabeth](https://github.com/laurabeth))
+
+---
+
 # v24.1.1 (Tue Aug 30 2022)
 
 #### 🐛  Bug Fix

package/dist/elements/BorderedRadio/BorderedRadio.d.ts

@@ -65,7 +65,7 @@ export declare const BorderedRadio: import("styled-components").StyledComponentC
     maxHeight?: import("styled-system").ResponsiveValue<import("csstype").MaxHeightProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     display?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     verticalAlign?: import("styled-system").ResponsiveValue<import("csstype").VerticalAlignProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    size?: import("styled-system").ResponsiveValue<import("csstype").HeightProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    size?: string | undefined;
     overflow?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     overflowX?: import("styled-system").ResponsiveValue<import("csstype").OverflowXProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     overflowY?: import("styled-system").ResponsiveValue<import("csstype").OverflowYProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;

package/dist/elements/Radio/Radio.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { FlexProps } from "../../elements/Flex";
+import { RADIO_SIZES } from "./tokens";
 export interface RadioProps extends FlexProps, Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
     /** Disable interactions */
     disabled?: boolean;
@@ -17,6 +18,8 @@ export interface RadioProps extends FlexProps, Omit<React.HTMLAttributes<HTMLDiv
     name?: string;
     /** The label content, if not specified the children will be used  */
     label?: React.ReactNode;
+    /** The radio size, if not specified, "sm" will be used  */
+    size?: keyof typeof RADIO_SIZES;
     /** Callback when selected */
     onSelect?: (selected: {
         selected: boolean;

package/dist/elements/Radio/Radio.js

@@ -21,7 +21,7 @@ var _RadioDot = require("./RadioDot");
 
 var _tokens = require("./tokens");
 
-var _excluded = ["children", "disabled", "hover", "focus", "error", "label", "selected", "value", "onSelect"];
+var _excluded = ["children", "disabled", "hover", "focus", "error", "label", "selected", "value", "size", "onSelect"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -45,6 +45,8 @@ var Radio = function Radio(_ref) {
       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);
 
@@ -81,24 +83,28 @@ var Radio = function Radio(_ref) {
     focus: focus,
     selected: selected,
     error: error
-  }, rest), /*#__PURE__*/_react.default.createElement(_RadioDot.RadioDot, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    height: _tokens.RADIO_SIZES[size].dotSize,
+    width: _tokens.RADIO_SIZES[size].dotSize,
+    alignSelf: "start",
+    mr: 1
+  }, /*#__PURE__*/_react.default.createElement(_RadioDot.RadioDot, {
     disabled: disabled,
     hover: hover,
     focus: focus,
     selected: selected,
-    error: error,
-    mr: 1
-  }), /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    error: error
+  })), /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
     flexDirection: "column",
     flex: 1
   }, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
     alignItems: "center",
     flex: 1
   }, (0, _isText.isText)(title) ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "sm-display",
+    variant: _tokens.RADIO_SIZES[size].labelFontSize,
     lineHeight: description ? undefined : 1
   }, title) : title), (0, _isText.isText)(description) ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs",
+    variant: _tokens.RADIO_SIZES[size].descriptionFontSize,
     color: "black60"
   }, description) : description));
 };
@@ -109,6 +115,6 @@ var Container = (0, _styledComponents.default)(_Flex.Flex).withConfig({
   displayName: "Radio__Container",
   componentId: "dpre3w-0"
 })(["", ""], function (props) {
-  return (0, _styledComponents.css)(["", " ", " ", " ", " ", " &:hover{", "}&:focus{", " > div:first-of-type{", "}}&:disabled{pointer-events:none;", "}"], props.selected ? _tokens.RADIO_STATES.selected : _tokens.RADIO_STATES.default, props.focus && _tokens.RADIO_STATES.focus, props.hover && _tokens.RADIO_STATES.hover, props.disabled && _tokens.RADIO_STATES.disabled, props.error && _tokens.RADIO_STATES.error, !props.error && !props.disabled && (0, _styledComponents.css)(["", " > div:first-of-type{", "}"], _tokens.RADIO_STATES.hover, props.selected ? _tokens.RADIO_DOT_STATES.hover.selected : _tokens.RADIO_DOT_STATES.hover.resting), _tokens.RADIO_STATES.focus, props.selected ? _tokens.RADIO_DOT_STATES.focus.selected : _tokens.RADIO_DOT_STATES.focus.resting, _tokens.RADIO_STATES.disabled);
+  return (0, _styledComponents.css)(["", " ", " ", " ", " ", " &:hover{", "}&:focus{", " > ", "{", "}}&:disabled{pointer-events:none;", "}"], props.selected ? _tokens.RADIO_STATES.selected : _tokens.RADIO_STATES.default, props.focus && _tokens.RADIO_STATES.focus, props.hover && _tokens.RADIO_STATES.hover, props.disabled && _tokens.RADIO_STATES.disabled, props.error && _tokens.RADIO_STATES.error, !props.error && !props.disabled && (0, _styledComponents.css)(["", " > ", "{", "}"], _tokens.RADIO_STATES.hover, _RadioDot.RadioDot, props.selected ? _tokens.RADIO_DOT_STATES.hover.selected : _tokens.RADIO_DOT_STATES.hover.resting), _tokens.RADIO_STATES.focus, _RadioDot.RadioDot, props.selected ? _tokens.RADIO_DOT_STATES.focus.selected : _tokens.RADIO_DOT_STATES.focus.resting, _tokens.RADIO_STATES.disabled);
 });
 //# sourceMappingURL=Radio.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Radio/Radio.tsx"],"names":["Radio","children","disabled","hover","focus","error","label","selected","value","onSelect","rest","handleClick","handleKeyPress","event","key","preventDefault","title","description","undefined","Container","Flex","props","css","RADIO_STATES","default","RADIO_DOT_STATES","resting"],"mappings":"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","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 } from \"./tokens\"\n\nexport interface RadioProps\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?: string\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  /** Callback when selected */\n  onSelect?: (selected: { selected: boolean; value: string }) => void\n}\n\n/** A Radio button */\nexport const Radio: React.FC<RadioProps> = ({\n  children,\n  disabled,\n  hover,\n  focus,\n  error,\n  label,\n  selected,\n  value,\n  onSelect,\n  ...rest\n}) => {\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      <RadioDot\n        disabled={disabled}\n        hover={hover}\n        focus={focus}\n        selected={selected}\n        error={error}\n        mr={1}\n      />\n\n      <Flex flexDirection=\"column\" flex={1}>\n        <Flex alignItems=\"center\" flex={1}>\n          {isText(title) ? (\n            <Text variant=\"sm-display\" lineHeight={description ? undefined : 1}>\n              {title}\n            </Text>\n          ) : (\n            title\n          )}\n        </Flex>\n\n        {isText(description) ? (\n          <Text variant=\"xs\" color=\"black60\">\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}>`\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          > div:first-of-type {\n            ${props.selected\n              ? RADIO_DOT_STATES.hover.selected\n              : RADIO_DOT_STATES.hover.resting}\n          }\n        `}\n      }\n\n      &:focus {\n        ${RADIO_STATES.focus}\n\n        // Radio\n        > div:first-of-type {\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"],"file":"Radio.js"}
+{"version":3,"sources":["../../../src/elements/Radio/Radio.tsx"],"names":["Radio","children","disabled","hover","focus","error","label","selected","value","size","onSelect","rest","handleClick","handleKeyPress","event","key","preventDefault","title","description","RADIO_SIZES","dotSize","labelFontSize","undefined","descriptionFontSize","Container","Flex","props","css","RADIO_STATES","default","RadioDot","RADIO_DOT_STATES","resting"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AA2BA;AACO,IAAMA,KAA2B,GAAG,SAA9BA,KAA8B,OAYrC;AAAA,MAXJC,QAWI,QAXJA,QAWI;AAAA,MAVJC,QAUI,QAVJA,QAUI;AAAA,MATJC,KASI,QATJA,KASI;AAAA,MARJC,KAQI,QARJA,KAQI;AAAA,MAPJC,KAOI,QAPJA,KAOI;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,uBAHJC,IAGI;AAAA,MAHJA,IAGI,0BAHG,IAGH;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBF,IAAAA,QAAQ,IAAIA,QAAQ,CAAC;AAAEH,MAAAA,QAAQ,EAAE,CAACA,QAAb;AAAuBC,MAAAA,KAAK,EAAEA;AAA9B,KAAD,CAApB;AACD,GAFD;;AAIA,MAAMK,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAAgD;AACrE,QAAIA,KAAK,CAACC,GAAN,KAAc,GAAlB,EAAuB;AACrBD,MAAAA,KAAK,CAACE,cAAN;AACAN,MAAAA,QAAQ,IAAIA,QAAQ,CAAC;AAAEH,QAAAA,QAAQ,EAAE,CAACA,QAAb;AAAuBC,QAAAA,KAAK,EAAEA;AAA9B,OAAD,CAApB;AACD;AACF,GALD,CALI,CAYJ;;;AACA,MAAMS,KAAK,GAAGX,KAAK,GAAGA,KAAH,GAAWL,QAA9B;AACA,MAAMiB,WAAW,GAAGZ,KAAK,GAAGL,QAAH,GAAc,IAAvC;AAEA,sBACE,6BAAC,SAAD;AACE,IAAA,EAAE,EAAC,OADL;AAEE,IAAA,UAAU,EAAC,QAFb;AAGE,IAAA,IAAI,EAAC,OAHP;AAIE,oBAAcM,QAJhB;AAKE,IAAA,OAAO,EAAEK,WALX;AAME,IAAA,QAAQ,EAAEV,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAN5B;AAOE,IAAA,UAAU,EAAEW,cAPd;AAQE,IAAA,QAAQ,EAAEX,QARZ;AASE,IAAA,KAAK,EAAEC,KATT;AAUE,IAAA,KAAK,EAAEC,KAVT;AAWE,IAAA,QAAQ,EAAEG,QAXZ;AAYE,IAAA,KAAK,EAAEF;AAZT,KAaMM,IAbN,gBAeE,6BAAC,UAAD;AACE,IAAA,MAAM,EAAEQ,oBAAYV,IAAZ,EAAkBW,OAD5B;AAEE,IAAA,KAAK,EAAED,oBAAYV,IAAZ,EAAkBW,OAF3B;AAGE,IAAA,SAAS,EAAC,OAHZ;AAIE,IAAA,EAAE,EAAE;AAJN,kBAME,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAElB,QADZ;AAEE,IAAA,KAAK,EAAEC,KAFT;AAGE,IAAA,KAAK,EAAEC,KAHT;AAIE,IAAA,QAAQ,EAAEG,QAJZ;AAKE,IAAA,KAAK,EAAEF;AALT,IANF,CAfF,eA8BE,6BAAC,UAAD;AAAM,IAAA,aAAa,EAAC,QAApB;AAA6B,IAAA,IAAI,EAAE;AAAnC,kBACE,6BAAC,UAAD;AAAM,IAAA,UAAU,EAAC,QAAjB;AAA0B,IAAA,IAAI,EAAE;AAAhC,KACG,oBAAOY,KAAP,iBACC,6BAAC,UAAD;AACE,IAAA,OAAO,EAAEE,oBAAYV,IAAZ,EAAkBY,aAD7B;AAEE,IAAA,UAAU,EAAEH,WAAW,GAAGI,SAAH,GAAe;AAFxC,KAIGL,KAJH,CADD,GAQCA,KATJ,CADF,EAcG,oBAAOC,WAAP,iBACC,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAEC,oBAAYV,IAAZ,EAAkBc,mBAAjC;AAAsD,IAAA,KAAK,EAAC;AAA5D,KACGL,WADH,CADD,GAKCA,WAnBJ,CA9BF,CADF;AAuDD,CAnFM;;;AAAMlB,K;AAqFb,IAAMwB,SAAS,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,aAOX,UAACC,KAAD,EAAW;AACX,aAAOC,qBAAP,4GACID,KAAK,CAACnB,QAAN,GAAiBqB,qBAAarB,QAA9B,GAAyCqB,qBAAaC,OAD1D,EAEIH,KAAK,CAACtB,KAAN,IAAewB,qBAAaxB,KAFhC,EAGIsB,KAAK,CAACvB,KAAN,IAAeyB,qBAAazB,KAHhC,EAIIuB,KAAK,CAACxB,QAAN,IAAkB0B,qBAAa1B,QAJnC,EAKIwB,KAAK,CAACrB,KAAN,IAAeuB,qBAAavB,KALhC,EAQM,CAACqB,KAAK,CAACrB,KAAP,IACF,CAACqB,KAAK,CAACxB,QADL,QAEFyB,qBAFE,yBAGEC,qBAAazB,KAHf,EAMI2B,kBANJ,EAOIJ,KAAK,CAACnB,QAAN,GACEwB,yBAAiB5B,KAAjB,CAAuBI,QADzB,GAEEwB,yBAAiB5B,KAAjB,CAAuB6B,OAT7B,CARN,EAuBMJ,qBAAaxB,KAvBnB,EA0BQ0B,kBA1BR,EA2BQJ,KAAK,CAACnB,QAAN,GACEwB,yBAAiB3B,KAAjB,CAAuBG,QADzB,GAEEwB,yBAAiB3B,KAAjB,CAAuB4B,OA7BjC,EAmCMJ,qBAAa1B,QAnCnB;AAsCD,CA9CY,CAAf","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\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?: string\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: string }) => void\n}\n\n/** A Radio button */\nexport const Radio: React.FC<RadioProps> = ({\n  children,\n  disabled,\n  hover,\n  focus,\n  error,\n  label,\n  selected,\n  value,\n  size = \"sm\",\n  onSelect,\n  ...rest\n}) => {\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=\"black60\">\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}>`\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 {\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"],"file":"Radio.js"}

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

@@ -47,17 +47,21 @@ var Default = function Default() {
       error: true,
       selected: true
     }, {
-      label: "A label",
+      label: "A label that takes up multiple lines",
+      width: "200px",
       children: "This is my description"
     }, {
-      label: /*#__PURE__*/_react.default.createElement(_Text.Text, {
-        variant: "xs",
-        color: "blue100"
-      }, "Small Custom Label")
+      label: "A small sized radio",
+      size: "sm",
+      children: "This is my description"
+    }, {
+      label: "A medium sized radio",
+      size: "md",
+      children: "This is my description"
     }, {
-      label: /*#__PURE__*/_react.default.createElement(_Text.Text, {
-        variant: "lg-display"
-      }, "Large Custom Label")
+      label: "A large sized radio",
+      size: "lg",
+      children: "This is my description"
     }]
   }, /*#__PURE__*/_react.default.createElement(_Radio.Radio, null, "A label"));
 };
@@ -70,7 +74,7 @@ var SplitLabel = function SplitLabel() {
     justifyContent: "space-between",
     flex: 1
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "lg-display"
+    variant: "sm-display"
   }, "Label"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "xs",
     color: "black60"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Radio/Radio.story.tsx"],"names":["title","Default","selected","focus","hover","disabled","error","label","children","SplitLabel"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAFM,EAGN;AAAEC,MAAAA,KAAK,EAAE;AAAT,KAHM,EAIN;AAAEA,MAAAA,KAAK,EAAE,IAAT;AAAeD,MAAAA,QAAQ,EAAE;AAAzB,KAJM,EAKN;AAAEE,MAAAA,KAAK,EAAE;AAAT,KALM,EAMN;AAAEA,MAAAA,KAAK,EAAE,IAAT;AAAeF,MAAAA,QAAQ,EAAE;AAAzB,KANM,EAON;AAAEG,MAAAA,QAAQ,EAAE;AAAZ,KAPM,EAQN;AAAEA,MAAAA,QAAQ,EAAE,IAAZ;AAAkBH,MAAAA,QAAQ,EAAE;AAA5B,KARM,EASN;AAAEI,MAAAA,KAAK,EAAE;AAAT,KATM,EAUN;AAAEA,MAAAA,KAAK,EAAE,IAAT;AAAeJ,MAAAA,QAAQ,EAAE;AAAzB,KAVM,EAWN;AAAEK,MAAAA,KAAK,EAAE,SAAT;AAAoBC,MAAAA,QAAQ,EAAE;AAA9B,KAXM,EAYN;AACED,MAAAA,KAAK,eACH,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC,IAAd;AAAmB,QAAA,KAAK,EAAC;AAAzB;AAFJ,KAZM,EAmBN;AAAEA,MAAAA,KAAK,eAAE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd;AAAT,KAnBM;AADV,kBAuBE,6BAAC,YAAD,kBAvBF,CADF;AA2BD,CA5BM;;;AAAMN,O;;AA8BN,IAAMQ,UAAU,GAAG,SAAbA,UAAa,GAAM;AAC9B,sBACE,6BAAC,YAAD,qBACE,6BAAC,UAAD;AAAM,IAAA,cAAc,EAAC,eAArB;AAAqC,IAAA,IAAI,EAAE;AAA3C,kBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,aADF,eAGE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,IAAd;AAAmB,IAAA,KAAK,EAAC;AAAzB,gBAHF,CADF,CADF;AAWD,CAZM;;;AAAMA,U","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Radio, RadioProps } from \"./Radio\"\n\nexport default {\n  title: \"Components/Radio\",\n}\n\nexport const Default = () => {\n  return (\n    <States<RadioProps>\n      states={[\n        {},\n        { selected: true },\n        { focus: true },\n        { focus: true, selected: true },\n        { hover: true },\n        { hover: true, selected: true },\n        { disabled: true },\n        { disabled: true, selected: true },\n        { error: true },\n        { error: true, selected: true },\n        { label: \"A label\", children: \"This is my description\" },\n        {\n          label: (\n            <Text variant=\"xs\" color=\"blue100\">\n              Small Custom Label\n            </Text>\n          ),\n        },\n        { label: <Text variant=\"lg-display\">Large Custom Label</Text> },\n      ]}\n    >\n      <Radio>A label</Radio>\n    </States>\n  )\n}\n\nexport const SplitLabel = () => {\n  return (\n    <Radio>\n      <Flex justifyContent=\"space-between\" flex={1}>\n        <Text variant=\"lg-display\">Label</Text>\n\n        <Text variant=\"xs\" color=\"black60\">\n          Subtitle\n        </Text>\n      </Flex>\n    </Radio>\n  )\n}\n"],"file":"Radio.story.js"}
+{"version":3,"sources":["../../../src/elements/Radio/Radio.story.tsx"],"names":["title","Default","selected","focus","hover","disabled","error","label","width","children","size","SplitLabel"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAFM,EAGN;AAAEC,MAAAA,KAAK,EAAE;AAAT,KAHM,EAIN;AAAEA,MAAAA,KAAK,EAAE,IAAT;AAAeD,MAAAA,QAAQ,EAAE;AAAzB,KAJM,EAKN;AAAEE,MAAAA,KAAK,EAAE;AAAT,KALM,EAMN;AAAEA,MAAAA,KAAK,EAAE,IAAT;AAAeF,MAAAA,QAAQ,EAAE;AAAzB,KANM,EAON;AAAEG,MAAAA,QAAQ,EAAE;AAAZ,KAPM,EAQN;AAAEA,MAAAA,QAAQ,EAAE,IAAZ;AAAkBH,MAAAA,QAAQ,EAAE;AAA5B,KARM,EASN;AAAEI,MAAAA,KAAK,EAAE;AAAT,KATM,EAUN;AAAEA,MAAAA,KAAK,EAAE,IAAT;AAAeJ,MAAAA,QAAQ,EAAE;AAAzB,KAVM,EAWN;AACEK,MAAAA,KAAK,EAAE,sCADT;AAEEC,MAAAA,KAAK,EAAE,OAFT;AAGEC,MAAAA,QAAQ,EAAE;AAHZ,KAXM,EAgBN;AACEF,MAAAA,KAAK,EAAE,qBADT;AAEEG,MAAAA,IAAI,EAAE,IAFR;AAGED,MAAAA,QAAQ,EAAE;AAHZ,KAhBM,EAqBN;AACEF,MAAAA,KAAK,EAAE,sBADT;AAEEG,MAAAA,IAAI,EAAE,IAFR;AAGED,MAAAA,QAAQ,EAAE;AAHZ,KArBM,EA0BN;AACEF,MAAAA,KAAK,EAAE,qBADT;AAEEG,MAAAA,IAAI,EAAE,IAFR;AAGED,MAAAA,QAAQ,EAAE;AAHZ,KA1BM;AADV,kBAkCE,6BAAC,YAAD,kBAlCF,CADF;AAsCD,CAvCM;;;AAAMR,O;;AAyCN,IAAMU,UAAU,GAAG,SAAbA,UAAa,GAAM;AAC9B,sBACE,6BAAC,YAAD,qBACE,6BAAC,UAAD;AAAM,IAAA,cAAc,EAAC,eAArB;AAAqC,IAAA,IAAI,EAAE;AAA3C,kBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,aADF,eAGE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,IAAd;AAAmB,IAAA,KAAK,EAAC;AAAzB,gBAHF,CADF,CADF;AAWD,CAZM;;;AAAMA,U","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Radio, RadioProps } from \"./Radio\"\n\nexport default {\n  title: \"Components/Radio\",\n}\n\nexport const Default = () => {\n  return (\n    <States<RadioProps>\n      states={[\n        {},\n        { selected: true },\n        { focus: true },\n        { focus: true, selected: true },\n        { hover: true },\n        { hover: true, selected: true },\n        { disabled: true },\n        { disabled: true, selected: true },\n        { error: true },\n        { error: true, selected: true },\n        {\n          label: \"A label that takes up multiple lines\",\n          width: \"200px\",\n          children: \"This is my description\",\n        },\n        {\n          label: \"A small sized radio\",\n          size: \"sm\",\n          children: \"This is my description\",\n        },\n        {\n          label: \"A medium sized radio\",\n          size: \"md\",\n          children: \"This is my description\",\n        },\n        {\n          label: \"A large sized radio\",\n          size: \"lg\",\n          children: \"This is my description\",\n        },\n      ]}\n    >\n      <Radio>A label</Radio>\n    </States>\n  )\n}\n\nexport const SplitLabel = () => {\n  return (\n    <Radio>\n      <Flex justifyContent=\"space-between\" flex={1}>\n        <Text variant=\"sm-display\">Label</Text>\n\n        <Text variant=\"xs\" color=\"black60\">\n          Subtitle\n        </Text>\n      </Flex>\n    </Radio>\n  )\n}\n"],"file":"Radio.story.js"}

package/dist/elements/Radio/RadioDot.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var RadioDot = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "RadioDot",
   componentId: "sc-1m6kyb-0"
-})(["width:20px;height:20px;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) {
+})(["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:

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Radio/RadioDot.tsx"],"names":["RadioDot","Box","props","mode","disabled","RADIO_DOT_STATES","hover","focus","error","default","selected","resting"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAUO,IAAMA,QAAQ,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,2UAUjB,UAACC,KAAD,EAAW;AACX,MAAMC,IAAI,GAAI,YAAM;AAClB,YAAQ,IAAR;AACE,WAAKD,KAAK,CAACE,QAAX;AACE,eAAOC,yBAAiBD,QAAxB;;AACF,WAAKF,KAAK,CAACI,KAAX;AACE,eAAOD,yBAAiBC,KAAxB;;AACF,WAAKJ,KAAK,CAACK,KAAX;AACE,eAAOF,yBAAiBE,KAAxB;;AACF,WAAKL,KAAK,CAACM,KAAX;AACE,eAAOH,yBAAiBG,KAAxB;;AACF;AACE,eAAOH,yBAAiBI,OAAxB;AAVJ;AAYD,GAbY,EAAb;;AAeA,SAAOP,KAAK,CAACQ,QAAN,GAAiBP,IAAI,CAACO,QAAtB,GAAiCP,IAAI,CAACQ,OAA7C;AACD,CA3BkB,CAAd","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: 20px;\n  height: 20px;\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"],"file":"RadioDot.js"}
+{"version":3,"sources":["../../../src/elements/Radio/RadioDot.tsx"],"names":["RadioDot","Box","props","mode","disabled","RADIO_DOT_STATES","hover","focus","error","default","selected","resting"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAUO,IAAMA,QAAQ,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,2UAUjB,UAACC,KAAD,EAAW;AACX,MAAMC,IAAI,GAAI,YAAM;AAClB,YAAQ,IAAR;AACE,WAAKD,KAAK,CAACE,QAAX;AACE,eAAOC,yBAAiBD,QAAxB;;AACF,WAAKF,KAAK,CAACI,KAAX;AACE,eAAOD,yBAAiBC,KAAxB;;AACF,WAAKJ,KAAK,CAACK,KAAX;AACE,eAAOF,yBAAiBE,KAAxB;;AACF,WAAKL,KAAK,CAACM,KAAX;AACE,eAAOH,yBAAiBG,KAAxB;;AACF;AACE,eAAOH,yBAAiBI,OAAxB;AAVJ;AAYD,GAbY,EAAb;;AAeA,SAAOP,KAAK,CAACQ,QAAN,GAAiBP,IAAI,CAACO,QAAtB,GAAiCP,IAAI,CAACQ,OAA7C;AACD,CA3BkB,CAAd","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"],"file":"RadioDot.js"}

package/dist/elements/Radio/tokens.d.ts

@@ -1,3 +1,5 @@
+import { ResponsiveValue } from "styled-system";
+import { TextVariant } from "../../Theme";
 export declare const RADIO_DOT_STATES: {
     default: {
         resting: import("styled-components").FlattenInterpolation<any>[];
@@ -28,3 +30,10 @@ export declare const RADIO_STATES: {
     readonly disabled: import("styled-components").FlattenInterpolation<any>[];
     readonly error: import("styled-components").FlattenInterpolation<any>[];
 };
+interface SizeVariant {
+    labelFontSize: ResponsiveValue<TextVariant>;
+    descriptionFontSize: ResponsiveValue<TextVariant>;
+    dotSize: string;
+}
+export declare const RADIO_SIZES: Record<string, SizeVariant>;
+export {};

package/dist/elements/Radio/tokens.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RADIO_STATES = exports.RADIO_DOT_STATES = void 0;
+exports.RADIO_STATES = exports.RADIO_SIZES = exports.RADIO_DOT_STATES = void 0;
 
 var _themeGet = require("@styled-system/theme-get");
 
@@ -41,4 +41,22 @@ var RADIO_STATES = {
   error: (0, _styledComponents.css)(["color:", ";"], (0, _themeGet.themeGet)("colors.red100"))
 };
 exports.RADIO_STATES = RADIO_STATES;
+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"
+  }
+};
+exports.RADIO_SIZES = RADIO_SIZES;
 //# sourceMappingURL=tokens.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Radio/tokens.ts"],"names":["RADIO_DOT_STATES","default","resting","css","selected","focus","disabled","error","hover","RADIO_STATES"],"mappings":";;;;;;;AAAA;;AACA;;AAEO,IAAMA,gBAAgB,GAAG;AAC9BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,OAAO,MAAEC,qBAAF,sDAEI,wBAAS,iBAAT,CAFJ,EAGW,wBAAS,gBAAT,CAHX,CADA;AAMPC,IAAAA,QAAQ,MAAED,qBAAF,4EAEG,wBAAS,iBAAT,CAFH,EAGU,wBAAS,iBAAT,CAHV,EAIc,wBAAS,iBAAT,CAJd;AAND,GADqB;AAc9BE,EAAAA,KAAK,EAAE;AACLH,IAAAA,OAAO,MAAEC,qBAAF,sDAEI,wBAAS,iBAAT,CAFJ,EAGW,wBAAS,iBAAT,CAHX,CADF;AAMLC,IAAAA,QAAQ,MAAED,qBAAF,4EAEG,wBAAS,iBAAT,CAFH,EAGU,wBAAS,iBAAT,CAHV,EAIc,wBAAS,iBAAT,CAJd;AANH,GAduB;AA2B9BG,EAAAA,QAAQ,EAAE;AACRJ,IAAAA,OAAO,MAAEC,qBAAF,sDAEI,wBAAS,iBAAT,CAFJ,EAGW,wBAAS,gBAAT,CAHX,CADC;AAMRC,IAAAA,QAAQ,MAAED,qBAAF,4EAEG,wBAAS,iBAAT,CAFH,EAGU,wBAAS,gBAAT,CAHV,EAIc,wBAAS,gBAAT,CAJd;AANA,GA3BoB;AAwC9BI,EAAAA,KAAK,EAAE;AACLL,IAAAA,OAAO,MAAEC,qBAAF,sDAEI,wBAAS,iBAAT,CAFJ,EAGW,wBAAS,eAAT,CAHX,CADF;AAMLC,IAAAA,QAAQ,MAAED,qBAAF,4EAEG,wBAAS,iBAAT,CAFH,EAGU,wBAAS,eAAT,CAHV,EAIc,wBAAS,eAAT,CAJd;AANH,GAxCuB;AAqD9BK,EAAAA,KAAK,EAAE;AACLN,IAAAA,OAAO,MAAEC,qBAAF,mFAGW,wBAAS,gBAAT,CAHX,EAIe,wBAAS,iBAAT,CAJf,CADF;AAOLC,IAAAA,QAAQ,MAAED,qBAAF,4EAEG,wBAAS,iBAAT,CAFH,EAGU,wBAAS,gBAAT,CAHV,EAIc,wBAAS,gBAAT,CAJd;AAPH;AArDuB,CAAzB;;AAqEA,IAAMM,YAAY,GAAG;AAC1BR,EAAAA,OAAO,MAAEE,qBAAF,mBACI,wBAAS,gBAAT,CADJ,CADmB;AAI1BE,EAAAA,KAAK,MAAEF,qBAAF,wEACM,wBAAS,iBAAT,CADN,CAJqB;AAY1BC,EAAAA,QAAQ,MAAED,qBAAF,mBACG,wBAAS,iBAAT,CADH,CAZkB;AAe1BK,EAAAA,KAAK,MAAEL,qBAAF,wEACM,wBAAS,gBAAT,CADN,CAfqB;AAuB1BG,EAAAA,QAAQ,MAAEH,qBAAF,uCAEG,wBAAS,gBAAT,CAFH,CAvBkB;AA2B1BI,EAAAA,KAAK,MAAEJ,qBAAF,mBACM,wBAAS,eAAT,CADN;AA3BqB,CAArB","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\n\nexport const RADIO_DOT_STATES = {\n  default: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.black30\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.black100\")};\n      background-color: ${themeGet(\"colors.black100\")};\n    `,\n  },\n  focus: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.black100\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.black100\")};\n      background-color: ${themeGet(\"colors.black100\")};\n    `,\n  },\n  disabled: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.black30\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.black30\")};\n      background-color: ${themeGet(\"colors.black30\")};\n    `,\n  },\n  error: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.red100\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.white100\")};\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.white100\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.white100\")};\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.black60\")};\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.black100\")};\n\n    /* Label */\n    > div > div:first-of-type {\n      text-decoration: underline;\n    }\n  `,\n  selected: css`\n    color: ${themeGet(\"colors.black100\")};\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.black30\")};\n  `,\n  error: css`\n    color: ${themeGet(\"colors.red100\")};\n  `,\n} as const\n"],"file":"tokens.js"}
+{"version":3,"sources":["../../../src/elements/Radio/tokens.ts"],"names":["RADIO_DOT_STATES","default","resting","css","selected","focus","disabled","error","hover","RADIO_STATES","RADIO_SIZES","sm","labelFontSize","descriptionFontSize","dotSize","md","lg"],"mappings":";;;;;;;AAAA;;AACA;;AAIO,IAAMA,gBAAgB,GAAG;AAC9BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,OAAO,MAAEC,qBAAF,sDAEI,wBAAS,iBAAT,CAFJ,EAGW,wBAAS,gBAAT,CAHX,CADA;AAMPC,IAAAA,QAAQ,MAAED,qBAAF,4EAEG,wBAAS,iBAAT,CAFH,EAGU,wBAAS,iBAAT,CAHV,EAIc,wBAAS,iBAAT,CAJd;AAND,GADqB;AAc9BE,EAAAA,KAAK,EAAE;AACLH,IAAAA,OAAO,MAAEC,qBAAF,sDAEI,wBAAS,iBAAT,CAFJ,EAGW,wBAAS,iBAAT,CAHX,CADF;AAMLC,IAAAA,QAAQ,MAAED,qBAAF,4EAEG,wBAAS,iBAAT,CAFH,EAGU,wBAAS,iBAAT,CAHV,EAIc,wBAAS,iBAAT,CAJd;AANH,GAduB;AA2B9BG,EAAAA,QAAQ,EAAE;AACRJ,IAAAA,OAAO,MAAEC,qBAAF,sDAEI,wBAAS,iBAAT,CAFJ,EAGW,wBAAS,gBAAT,CAHX,CADC;AAMRC,IAAAA,QAAQ,MAAED,qBAAF,4EAEG,wBAAS,iBAAT,CAFH,EAGU,wBAAS,gBAAT,CAHV,EAIc,wBAAS,gBAAT,CAJd;AANA,GA3BoB;AAwC9BI,EAAAA,KAAK,EAAE;AACLL,IAAAA,OAAO,MAAEC,qBAAF,sDAEI,wBAAS,iBAAT,CAFJ,EAGW,wBAAS,eAAT,CAHX,CADF;AAMLC,IAAAA,QAAQ,MAAED,qBAAF,4EAEG,wBAAS,iBAAT,CAFH,EAGU,wBAAS,eAAT,CAHV,EAIc,wBAAS,eAAT,CAJd;AANH,GAxCuB;AAqD9BK,EAAAA,KAAK,EAAE;AACLN,IAAAA,OAAO,MAAEC,qBAAF,mFAGW,wBAAS,gBAAT,CAHX,EAIe,wBAAS,iBAAT,CAJf,CADF;AAOLC,IAAAA,QAAQ,MAAED,qBAAF,4EAEG,wBAAS,iBAAT,CAFH,EAGU,wBAAS,gBAAT,CAHV,EAIc,wBAAS,gBAAT,CAJd;AAPH;AArDuB,CAAzB;;AAqEA,IAAMM,YAAY,GAAG;AAC1BR,EAAAA,OAAO,MAAEE,qBAAF,mBACI,wBAAS,gBAAT,CADJ,CADmB;AAI1BE,EAAAA,KAAK,MAAEF,qBAAF,wEACM,wBAAS,iBAAT,CADN,CAJqB;AAY1BC,EAAAA,QAAQ,MAAED,qBAAF,mBACG,wBAAS,iBAAT,CADH,CAZkB;AAe1BK,EAAAA,KAAK,MAAEL,qBAAF,wEACM,wBAAS,gBAAT,CADN,CAfqB;AAuB1BG,EAAAA,QAAQ,MAAEH,qBAAF,uCAEG,wBAAS,gBAAT,CAFH,CAvBkB;AA2B1BI,EAAAA,KAAK,MAAEJ,qBAAF,mBACM,wBAAS,eAAT,CADN;AA3BqB,CAArB;;AAsCA,IAAMO,WAAwC,GAAG;AACtDC,EAAAA,EAAE,EAAE;AACFC,IAAAA,aAAa,EAAE,YADb;AAEFC,IAAAA,mBAAmB,EAAE,IAFnB;AAGFC,IAAAA,OAAO,EAAE;AAHP,GADkD;AAMtDC,EAAAA,EAAE,EAAE;AACFH,IAAAA,aAAa,EAAE,IADb;AAEFC,IAAAA,mBAAmB,EAAE,IAFnB;AAGFC,IAAAA,OAAO,EAAE;AAHP,GANkD;AAWtDE,EAAAA,EAAE,EAAE;AACFJ,IAAAA,aAAa,EAAE,YADb;AAEFC,IAAAA,mBAAmB,EAAE,IAFnB;AAGFC,IAAAA,OAAO,EAAE;AAHP;AAXkD,CAAjD","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.white100\")};\n      border-color: ${themeGet(\"colors.black30\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.black100\")};\n      background-color: ${themeGet(\"colors.black100\")};\n    `,\n  },\n  focus: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.black100\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.black100\")};\n      background-color: ${themeGet(\"colors.black100\")};\n    `,\n  },\n  disabled: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.black30\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.black30\")};\n      background-color: ${themeGet(\"colors.black30\")};\n    `,\n  },\n  error: {\n    resting: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.white100\")};\n      border-color: ${themeGet(\"colors.red100\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.white100\")};\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.white100\")};\n    `,\n    selected: css`\n      border: 1px solid;\n      color: ${themeGet(\"colors.white100\")};\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.black60\")};\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.black100\")};\n\n    /* Label */\n    > div > div:first-of-type {\n      text-decoration: underline;\n    }\n  `,\n  selected: css`\n    color: ${themeGet(\"colors.black100\")};\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.black30\")};\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"],"file":"tokens.js"}

package/dist/elements/RadioGroup/RadioGroup.d.ts

@@ -16,7 +16,7 @@ export interface RadioGroupProps extends FlexProps {
     /** Default value of radio button */
     defaultValue?: string;
     /** Child <Radio /> elements */
-    children: Array<React.ReactElement<RadioProps>>;
+    children: Array<React.ReactElement<RadioProps>> | React.ReactElement<RadioProps>;
 }
 interface RadioGroupState {
     selectedOption: string | null;

package/dist/elements/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/RadioGroup/RadioGroup.tsx"],"names":["RadioGroup","state","selectedOption","props","defaultValue","onSelect","value","update","deselectable","setState","prevProps","React","Children","map","children","child","cloneElement","disabled","undefined","selected","disabledText","others","renderRadioButtons","Component"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA;AACA;AACA;AACA;AACA;IACaA,U;;;;;;;;;;;;;;;UAIXC,K,GAAQ;AACNC,MAAAA,cAAc,EAAE,MAAKC,KAAL,CAAWC,YAAX,IAA2B;AADrC,K;;UAYRC,Q,GAAW,gBAAe;AAAA,UAAZC,KAAY,QAAZA,KAAY;;AACxB;AACA,UAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACnB,YAAI,MAAKJ,KAAL,CAAWE,QAAf,EAAyB;AACvB,gBAAKF,KAAL,CAAWE,QAAX,CAAoB,MAAKJ,KAAL,CAAWC,cAA/B;AACD;AACF,OAJD;;AAMA,UAAI,MAAKC,KAAL,CAAWK,YAAf,EAA6B;AAC3B,YAAI,MAAKP,KAAL,CAAWC,cAAX,KAA8BI,KAAlC,EAAyC;AACvC,gBAAKG,QAAL,CACE;AACEP,YAAAA,cAAc,EAAE;AADlB,WADF,EAIEK,MAJF;;AAMA;AACD;AACF;;AAED,YAAKE,QAAL,CAAc;AAAEP,QAAAA,cAAc,EAAEI;AAAlB,OAAd,EAAyCC,MAAzC;AACD,K;;;;;;;WA7BD,4BAAmBG,SAAnB,EAA8B;AAC5B,UAAIA,SAAS,CAACN,YAAV,KAA2B,KAAKD,KAAL,CAAWC,YAA1C,EAAwD;AACtD,aAAKK,QAAL,CAAc;AACZP,UAAAA,cAAc,EAAE,KAAKC,KAAL,CAAWC;AADf,SAAd;AAGD;AACF;;;WAyBD,8BAAqB;AAAA;;AACnB,aAAOO,eAAMC,QAAN,CAAeC,GAAf,CACL,KAAKV,KAAL,CAAWW,QADN,EAEL,UAACC,KAAD,EAA2C;AACzC,4BAAOJ,eAAMK,YAAN,CAAmBD,KAAnB,EAA0B;AAC/BE,UAAAA,QAAQ,EACNF,KAAK,CAACZ,KAAN,CAAYc,QAAZ,KAAyBC,SAAzB,GACIH,KAAK,CAACZ,KAAN,CAAYc,QADhB,GAEI,MAAI,CAACd,KAAL,CAAWc,QAJc;AAK/BZ,UAAAA,QAAQ,EAAEU,KAAK,CAACZ,KAAN,CAAYE,QAAZ,GACN,UAACc,QAAD,EAAc;AAAA;;AACZ,YAAA,MAAI,CAACd,QAAL,CAAcc,QAAd;;AACA,qDAAAJ,KAAK,CAACZ,KAAN,EAAYE,QAAZ,mGAAuBc,QAAvB;AACD,WAJK,GAKN,MAAI,CAACd,QAVsB;AAW/B;AACAc,UAAAA,QAAQ,EAAE,MAAI,CAAClB,KAAL,CAAWC,cAAX,KAA8Ba,KAAK,CAACZ,KAAN,CAAYG;AAZrB,SAA1B,CAAP;AAcD,OAjBI,CAAP;AAmBD;;;WAED,kBAAS;AACP,wBAOI,KAAKH,KAPT;AAAA,UACEc,QADF,eACEA,QADF;AAAA,UAEEG,YAFF,eAEEA,YAFF;AAAA,UAGEf,QAHF,eAGEA,QAHF;AAAA,UAIED,YAJF,eAIEA,YAJF;AAAA,UAKEU,QALF,eAKEA,QALF;AAAA,UAMKO,MANL;;AAQA,0BACE,6BAAC,UAAD;AAAM,QAAA,aAAa,EAAC;AAApB,SAAiCA,MAAjC,GACGJ,QAAQ,IAAIG,YAAZ,iBACC,6BAAC,gBAAD;AAAM,QAAA,IAAI,EAAC,GAAX;AAAe,QAAA,EAAE,EAAE,GAAnB;AAAwB,QAAA,KAAK,EAAC;AAA9B,SACGA,YADH,CAFJ,EAMG,KAAKE,kBAAL,EANH,CADF;AAUD;;;;EAhF6BX,eAAMY,S;;;AAAzBvB,U","sourcesContent":["import React from \"react\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { RadioProps } from \"../Radio\"\nimport { Sans } from \"../Typography\"\n\n/**\n * Spec: zpl.io/bAvnwlB\n */\n\nexport interface RadioGroupProps extends FlexProps {\n  /** Ability to deselect the selection */\n  deselectable?: boolean\n  /** Disable interactions */\n  disabled?: boolean\n  /** Text to display when disabled */\n  disabledText?: string\n  /** Callback when selected */\n  onSelect?: (selectedOption: string) => void\n  /** Default value of radio button */\n  defaultValue?: string\n  /** Child <Radio /> elements */\n  children: Array<React.ReactElement<RadioProps>>\n}\n\ninterface RadioGroupState {\n  selectedOption: string | null\n}\n\n/**\n * A stateful collection of Radio buttons\n *\n * Spec: zpl.io/bAvnwlB\n */\nexport class RadioGroup extends React.Component<\n  RadioGroupProps,\n  RadioGroupState\n> {\n  state = {\n    selectedOption: this.props.defaultValue || null,\n  }\n\n  componentDidUpdate(prevProps) {\n    if (prevProps.defaultValue !== this.props.defaultValue) {\n      this.setState({\n        selectedOption: this.props.defaultValue!,\n      })\n    }\n  }\n\n  onSelect = ({ value }) => {\n    // After state update, call back up the tree with the latest state\n    const update = () => {\n      if (this.props.onSelect) {\n        this.props.onSelect(this.state.selectedOption!)\n      }\n    }\n\n    if (this.props.deselectable) {\n      if (this.state.selectedOption === value) {\n        this.setState(\n          {\n            selectedOption: null,\n          },\n          update\n        )\n        return\n      }\n    }\n\n    this.setState({ selectedOption: value }, update)\n  }\n\n  renderRadioButtons() {\n    return React.Children.map(\n      this.props.children,\n      (child: React.ReactElement<RadioProps>) => {\n        return React.cloneElement(child, {\n          disabled:\n            child.props.disabled !== undefined\n              ? child.props.disabled\n              : this.props.disabled,\n          onSelect: child.props.onSelect\n            ? (selected) => {\n                this.onSelect(selected)\n                child.props.onSelect?.(selected)\n              }\n            : this.onSelect,\n          // FIXME: Throw an error `child.props.selected' is set once we enable the dev code elimination.\n          selected: this.state.selectedOption === child.props.value,\n        })\n      }\n    )\n  }\n\n  render() {\n    const {\n      disabled,\n      disabledText,\n      onSelect,\n      defaultValue,\n      children,\n      ...others\n    } = this.props\n    return (\n      <Flex flexDirection=\"column\" {...others}>\n        {disabled && disabledText && (\n          <Sans size=\"2\" my={0.3} color=\"black60\">\n            {disabledText}\n          </Sans>\n        )}\n        {this.renderRadioButtons()}\n      </Flex>\n    )\n  }\n}\n"],"file":"RadioGroup.js"}
+{"version":3,"sources":["../../../src/elements/RadioGroup/RadioGroup.tsx"],"names":["RadioGroup","state","selectedOption","props","defaultValue","onSelect","value","update","deselectable","setState","prevProps","React","Children","map","children","child","cloneElement","disabled","undefined","selected","disabledText","others","renderRadioButtons","Component"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AACA;AACA;AACA;AACA;IACaA,U;;;;;;;;;;;;;;;UAIXC,K,GAAQ;AACNC,MAAAA,cAAc,EAAE,MAAKC,KAAL,CAAWC,YAAX,IAA2B;AADrC,K;;UAYRC,Q,GAAW,gBAAe;AAAA,UAAZC,KAAY,QAAZA,KAAY;;AACxB;AACA,UAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACnB,YAAI,MAAKJ,KAAL,CAAWE,QAAf,EAAyB;AACvB,gBAAKF,KAAL,CAAWE,QAAX,CAAoB,MAAKJ,KAAL,CAAWC,cAA/B;AACD;AACF,OAJD;;AAMA,UAAI,MAAKC,KAAL,CAAWK,YAAf,EAA6B;AAC3B,YAAI,MAAKP,KAAL,CAAWC,cAAX,KAA8BI,KAAlC,EAAyC;AACvC,gBAAKG,QAAL,CACE;AACEP,YAAAA,cAAc,EAAE;AADlB,WADF,EAIEK,MAJF;;AAMA;AACD;AACF;;AAED,YAAKE,QAAL,CAAc;AAAEP,QAAAA,cAAc,EAAEI;AAAlB,OAAd,EAAyCC,MAAzC;AACD,K;;;;;;;WA7BD,4BAAmBG,SAAnB,EAA8B;AAC5B,UAAIA,SAAS,CAACN,YAAV,KAA2B,KAAKD,KAAL,CAAWC,YAA1C,EAAwD;AACtD,aAAKK,QAAL,CAAc;AACZP,UAAAA,cAAc,EAAE,KAAKC,KAAL,CAAWC;AADf,SAAd;AAGD;AACF;;;WAyBD,8BAAqB;AAAA;;AACnB,aAAOO,eAAMC,QAAN,CAAeC,GAAf,CACL,KAAKV,KAAL,CAAWW,QADN,EAEL,UAACC,KAAD,EAA2C;AACzC,4BAAOJ,eAAMK,YAAN,CAAmBD,KAAnB,EAA0B;AAC/BE,UAAAA,QAAQ,EACNF,KAAK,CAACZ,KAAN,CAAYc,QAAZ,KAAyBC,SAAzB,GACIH,KAAK,CAACZ,KAAN,CAAYc,QADhB,GAEI,MAAI,CAACd,KAAL,CAAWc,QAJc;AAK/BZ,UAAAA,QAAQ,EAAEU,KAAK,CAACZ,KAAN,CAAYE,QAAZ,GACN,UAACc,QAAD,EAAc;AAAA;;AACZ,YAAA,MAAI,CAACd,QAAL,CAAcc,QAAd;;AACA,qDAAAJ,KAAK,CAACZ,KAAN,EAAYE,QAAZ,mGAAuBc,QAAvB;AACD,WAJK,GAKN,MAAI,CAACd,QAVsB;AAW/B;AACAc,UAAAA,QAAQ,EAAE,MAAI,CAAClB,KAAL,CAAWC,cAAX,KAA8Ba,KAAK,CAACZ,KAAN,CAAYG;AAZrB,SAA1B,CAAP;AAcD,OAjBI,CAAP;AAmBD;;;WAED,kBAAS;AACP,wBAOI,KAAKH,KAPT;AAAA,UACEc,QADF,eACEA,QADF;AAAA,UAEEG,YAFF,eAEEA,YAFF;AAAA,UAGEf,QAHF,eAGEA,QAHF;AAAA,UAIED,YAJF,eAIEA,YAJF;AAAA,UAKEU,QALF,eAKEA,QALF;AAAA,UAMKO,MANL;;AAQA,0BACE,6BAAC,UAAD;AAAM,QAAA,aAAa,EAAC;AAApB,SAAiCA,MAAjC,GACGJ,QAAQ,IAAIG,YAAZ,iBACC,6BAAC,gBAAD;AAAM,QAAA,IAAI,EAAC,GAAX;AAAe,QAAA,EAAE,EAAE,GAAnB;AAAwB,QAAA,KAAK,EAAC;AAA9B,SACGA,YADH,CAFJ,EAMG,KAAKE,kBAAL,EANH,CADF;AAUD;;;;EAhF6BX,eAAMY,S;;;AAAzBvB,U","sourcesContent":["import React from \"react\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { RadioProps } from \"../Radio\"\nimport { Sans } from \"../Typography\"\n\n/**\n * Spec: zpl.io/bAvnwlB\n */\n\nexport interface RadioGroupProps extends FlexProps {\n  /** Ability to deselect the selection */\n  deselectable?: boolean\n  /** Disable interactions */\n  disabled?: boolean\n  /** Text to display when disabled */\n  disabledText?: string\n  /** Callback when selected */\n  onSelect?: (selectedOption: string) => void\n  /** Default value of radio button */\n  defaultValue?: string\n  /** Child <Radio /> elements */\n  children:\n    | Array<React.ReactElement<RadioProps>>\n    | React.ReactElement<RadioProps>\n}\n\ninterface RadioGroupState {\n  selectedOption: string | null\n}\n\n/**\n * A stateful collection of Radio buttons\n *\n * Spec: zpl.io/bAvnwlB\n */\nexport class RadioGroup extends React.Component<\n  RadioGroupProps,\n  RadioGroupState\n> {\n  state = {\n    selectedOption: this.props.defaultValue || null,\n  }\n\n  componentDidUpdate(prevProps) {\n    if (prevProps.defaultValue !== this.props.defaultValue) {\n      this.setState({\n        selectedOption: this.props.defaultValue!,\n      })\n    }\n  }\n\n  onSelect = ({ value }) => {\n    // After state update, call back up the tree with the latest state\n    const update = () => {\n      if (this.props.onSelect) {\n        this.props.onSelect(this.state.selectedOption!)\n      }\n    }\n\n    if (this.props.deselectable) {\n      if (this.state.selectedOption === value) {\n        this.setState(\n          {\n            selectedOption: null,\n          },\n          update\n        )\n        return\n      }\n    }\n\n    this.setState({ selectedOption: value }, update)\n  }\n\n  renderRadioButtons() {\n    return React.Children.map(\n      this.props.children,\n      (child: React.ReactElement<RadioProps>) => {\n        return React.cloneElement(child, {\n          disabled:\n            child.props.disabled !== undefined\n              ? child.props.disabled\n              : this.props.disabled,\n          onSelect: child.props.onSelect\n            ? (selected) => {\n                this.onSelect(selected)\n                child.props.onSelect?.(selected)\n              }\n            : this.onSelect,\n          // FIXME: Throw an error `child.props.selected' is set once we enable the dev code elimination.\n          selected: this.state.selectedOption === child.props.value,\n        })\n      }\n    )\n  }\n\n  render() {\n    const {\n      disabled,\n      disabledText,\n      onSelect,\n      defaultValue,\n      children,\n      ...others\n    } = this.props\n    return (\n      <Flex flexDirection=\"column\" {...others}>\n        {disabled && disabledText && (\n          <Sans size=\"2\" my={0.3} color=\"black60\">\n            {disabledText}\n          </Sans>\n        )}\n        {this.renderRadioButtons()}\n      </Flex>\n    )\n  }\n}\n"],"file":"RadioGroup.js"}

package/dist/elements/RadioGroup/RadioGroup.story.js

@@ -13,14 +13,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _storybookStates = require("storybook-states");
 
+var _Spacer = require("../Spacer");
+
 var _Button = require("../Button");
 
 var _Radio = require("../Radio/Radio");
 
-var _Text = require("../Text");
-
 var _RadioGroup = require("./RadioGroup");
 
+var _Join = require("../Join");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -56,13 +58,17 @@ var Default = function Default() {
     }]
   }, /*#__PURE__*/_react.default.createElement(_RadioGroup.RadioGroup, {
     onSelect: (0, _addonActions.action)("onSelect")
+  }, /*#__PURE__*/_react.default.createElement(_Join.Join, {
+    separator: /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+      mb: 0.5
+    })
   }, ["Visual", "Linguistic", "Spatial", "Aural", "Gestural"].map(function (value) {
     return /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
       key: value,
       value: value,
-      label: /*#__PURE__*/_react.default.createElement(_Text.Text, null, value)
+      label: value
     });
-  })));
+  }))));
 };
 
 exports.Default = Default;
@@ -85,6 +91,8 @@ var WithDefaultValue = function WithDefaultValue() {
   }, /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
     value: "SHIP",
     label: "Provide shipping address"
+  }), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+    mb: 0.5
   }), /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
     value: "PICKUP",
     label: "Arrange for pickup"

package/dist/elements/RadioGroup/RadioGroup.story.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/RadioGroup/RadioGroup.story.tsx"],"names":["title","Default","defaultValue","deselectable","disabled","disabledText","map","value","WithDefaultValue","setValue","story","name"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,YAAY,EAAE;AAAhB,KAFM,EAGN;AAAEC,MAAAA,YAAY,EAAE;AAAhB,KAHM,EAIN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAJM,EAKN;AAAEA,MAAAA,QAAQ,EAAE,IAAZ;AAAkBC,MAAAA,YAAY,EAAE;AAAhC,KALM;AADV,kBASE,6BAAC,sBAAD;AAAY,IAAA,QAAQ,EAAE,0BAAO,UAAP;AAAtB,KACG,CAAC,QAAD,EAAW,YAAX,EAAyB,SAAzB,EAAoC,OAApC,EAA6C,UAA7C,EAAyDC,GAAzD,CACC,UAACC,KAAD,EAAW;AACT,wBACE,6BAAC,YAAD;AAAO,MAAA,GAAG,EAAEA,KAAZ;AAAmB,MAAA,KAAK,EAAEA,KAA1B;AAAiC,MAAA,KAAK,eAAE,6BAAC,UAAD,QAAOA,KAAP;AAAxC,MADF;AAGD,GALF,CADH,CATF,CADF;AAqBD,CAtBM;;;AAAMN,O;;AAwBN,IAAMO,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AACpC,kBAAiC,qBAAS,QAAT,CAAjC;AAAA;AAAA,MAAON,YAAP;AAAA,MAAqBO,QAArB;;AAEA,sBACE,yEACE,6BAAC,cAAD;AACE,IAAA,EAAE,EAAE,CADN;AAEE,IAAA,OAAO,EAAE,mBAAM;AACbA,MAAAA,QAAQ,CAACP,YAAY,KAAK,QAAjB,GAA4B,MAA5B,GAAqC,QAAtC,CAAR;AACD;AAJH,+BAMyBA,YANzB,CADF,eAUE,6BAAC,sBAAD;AAAY,IAAA,YAAY,EAAEA,YAA1B;AAAwC,IAAA,QAAQ,EAAE,0BAAO,UAAP;AAAlD,kBACE,6BAAC,YAAD;AAAO,IAAA,KAAK,EAAC,MAAb;AAAoB,IAAA,KAAK,EAAC;AAA1B,IADF,eAEE,6BAAC,YAAD;AAAO,IAAA,KAAK,EAAC,QAAb;AAAsB,IAAA,KAAK,EAAC;AAA5B,IAFF,CAVF,CADF;AAiBD,CApBM;;;AAsBPM,gBAAgB,CAACE,KAAjB,GAAyB;AACvBC,EAAAA,IAAI,EAAE;AADiB,CAAzB","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Button } from \"../Button\"\nimport { Radio } from \"../Radio/Radio\"\nimport { Text } from \"../Text\"\nimport { RadioGroup, RadioGroupProps } from \"./RadioGroup\"\n\nexport default {\n  title: \"Components/RadioGroup\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<RadioGroupProps>>\n      states={[\n        {},\n        { defaultValue: \"Aural\" },\n        { deselectable: true },\n        { disabled: true },\n        { disabled: true, disabledText: \"Reason for disabled\" },\n      ]}\n    >\n      <RadioGroup onSelect={action(\"onSelect\")}>\n        {[\"Visual\", \"Linguistic\", \"Spatial\", \"Aural\", \"Gestural\"].map(\n          (value) => {\n            return (\n              <Radio key={value} value={value} label={<Text>{value}</Text>} />\n            )\n          }\n        )}\n      </RadioGroup>\n    </States>\n  )\n}\n\nexport const WithDefaultValue = () => {\n  const [defaultValue, setValue] = useState(\"PICKUP\")\n\n  return (\n    <>\n      <Button\n        mb={2}\n        onClick={() => {\n          setValue(defaultValue === \"PICKUP\" ? \"SHIP\" : \"PICKUP\")\n        }}\n      >\n        Toggle default value: {defaultValue}\n      </Button>\n\n      <RadioGroup defaultValue={defaultValue} onSelect={action(\"onSelect\")}>\n        <Radio value=\"SHIP\" label=\"Provide shipping address\" />\n        <Radio value=\"PICKUP\" label=\"Arrange for pickup\" />\n      </RadioGroup>\n    </>\n  )\n}\n\nWithDefaultValue.story = {\n  name: \"With default value\",\n}\n"],"file":"RadioGroup.story.js"}
+{"version":3,"sources":["../../../src/elements/RadioGroup/RadioGroup.story.tsx"],"names":["title","Default","defaultValue","deselectable","disabled","disabledText","map","value","WithDefaultValue","setValue","story","name"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,YAAY,EAAE;AAAhB,KAFM,EAGN;AAAEC,MAAAA,YAAY,EAAE;AAAhB,KAHM,EAIN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAJM,EAKN;AAAEA,MAAAA,QAAQ,EAAE,IAAZ;AAAkBC,MAAAA,YAAY,EAAE;AAAhC,KALM;AADV,kBASE,6BAAC,sBAAD;AAAY,IAAA,QAAQ,EAAE,0BAAO,UAAP;AAAtB,kBACE,6BAAC,UAAD;AAAM,IAAA,SAAS,eAAE,6BAAC,cAAD;AAAQ,MAAA,EAAE,EAAE;AAAZ;AAAjB,KACG,CAAC,QAAD,EAAW,YAAX,EAAyB,SAAzB,EAAoC,OAApC,EAA6C,UAA7C,EAAyDC,GAAzD,CACC,UAACC,KAAD,EAAW;AACT,wBAAO,6BAAC,YAAD;AAAO,MAAA,GAAG,EAAEA,KAAZ;AAAmB,MAAA,KAAK,EAAEA,KAA1B;AAAiC,MAAA,KAAK,EAAEA;AAAxC,MAAP;AACD,GAHF,CADH,CADF,CATF,CADF;AAqBD,CAtBM;;;AAAMN,O;;AAwBN,IAAMO,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AACpC,kBAAiC,qBAAS,QAAT,CAAjC;AAAA;AAAA,MAAON,YAAP;AAAA,MAAqBO,QAArB;;AAEA,sBACE,yEACE,6BAAC,cAAD;AACE,IAAA,EAAE,EAAE,CADN;AAEE,IAAA,OAAO,EAAE,mBAAM;AACbA,MAAAA,QAAQ,CAACP,YAAY,KAAK,QAAjB,GAA4B,MAA5B,GAAqC,QAAtC,CAAR;AACD;AAJH,+BAMyBA,YANzB,CADF,eAUE,6BAAC,sBAAD;AAAY,IAAA,YAAY,EAAEA,YAA1B;AAAwC,IAAA,QAAQ,EAAE,0BAAO,UAAP;AAAlD,kBACE,6BAAC,YAAD;AAAO,IAAA,KAAK,EAAC,MAAb;AAAoB,IAAA,KAAK,EAAC;AAA1B,IADF,eAEE,6BAAC,cAAD;AAAQ,IAAA,EAAE,EAAE;AAAZ,IAFF,eAGE,6BAAC,YAAD;AAAO,IAAA,KAAK,EAAC,QAAb;AAAsB,IAAA,KAAK,EAAC;AAA5B,IAHF,CAVF,CADF;AAkBD,CArBM;;;AAuBPM,gBAAgB,CAACE,KAAjB,GAAyB;AACvBC,EAAAA,IAAI,EAAE;AADiB,CAAzB","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Spacer } from \"../Spacer\"\nimport { Button } from \"../Button\"\nimport { Radio } from \"../Radio/Radio\"\nimport { RadioGroup, RadioGroupProps } from \"./RadioGroup\"\nimport { Join } from \"../Join\"\n\nexport default {\n  title: \"Components/RadioGroup\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<RadioGroupProps>>\n      states={[\n        {},\n        { defaultValue: \"Aural\" },\n        { deselectable: true },\n        { disabled: true },\n        { disabled: true, disabledText: \"Reason for disabled\" },\n      ]}\n    >\n      <RadioGroup onSelect={action(\"onSelect\")}>\n        <Join separator={<Spacer mb={0.5} />}>\n          {[\"Visual\", \"Linguistic\", \"Spatial\", \"Aural\", \"Gestural\"].map(\n            (value) => {\n              return <Radio key={value} value={value} label={value} />\n            }\n          )}\n        </Join>\n      </RadioGroup>\n    </States>\n  )\n}\n\nexport const WithDefaultValue = () => {\n  const [defaultValue, setValue] = useState(\"PICKUP\")\n\n  return (\n    <>\n      <Button\n        mb={2}\n        onClick={() => {\n          setValue(defaultValue === \"PICKUP\" ? \"SHIP\" : \"PICKUP\")\n        }}\n      >\n        Toggle default value: {defaultValue}\n      </Button>\n\n      <RadioGroup defaultValue={defaultValue} onSelect={action(\"onSelect\")}>\n        <Radio value=\"SHIP\" label=\"Provide shipping address\" />\n        <Spacer mb={0.5} />\n        <Radio value=\"PICKUP\" label=\"Arrange for pickup\" />\n      </RadioGroup>\n    </>\n  )\n}\n\nWithDefaultValue.story = {\n  name: \"With default value\",\n}\n"],"file":"RadioGroup.story.js"}

package/dist/elements/Select/Select.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ForwardRefExoticComponent, Ref } from "react";
 import { BoxProps } from "../Box";
 import { Variant } from "./types";
 export interface Option {
@@ -20,6 +20,8 @@ export interface SelectProps extends BoxProps, Omit<React.HTMLAttributes<HTMLSel
     onSelect?: (value: string) => void;
 }
 /** A drop-down select menu */
-export declare const Select: React.FC<SelectProps>;
+export declare const Select: ForwardRefExoticComponent<SelectProps & {
+    ref?: Ref<HTMLElement>;
+}>;
 /** Creates a small caret */
 export declare const caretMixin: import("styled-components").FlattenInterpolation<any>[];

package/dist/elements/Select/Select.js

@@ -9,7 +9,7 @@ exports.caretMixin = exports.Select = void 0;
 
 var _themeGet = require("@styled-system/theme-get");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -27,8 +27,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign || 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -48,7 +46,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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; }
 
 /** A drop-down select menu */
-var Select = function Select(_ref) {
+var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var description = _ref.description,
       disabled = _ref.disabled,
       error = _ref.error,
@@ -99,6 +97,7 @@ var Select = function Select(_ref) {
     focus: !!focus,
     mt: variant !== "inline" && (title || description) ? 0.5 : 0
   }, /*#__PURE__*/_react.default.createElement("select", _extends({
+    ref: ref,
     id: id,
     disabled: disabled,
     name: name,
@@ -118,8 +117,7 @@ var Select = function Select(_ref) {
     mt: 0.5,
     color: "red100"
   }, error));
-};
-
+});
 exports.Select = Select;
 Select.displayName = "Select";
 var resetMixin = (0, _styledComponents.css)(["appearance:none;background:none;border:none;outline:0;text-indent:0.01px;text-overflow:\"\";border-radius:0;&:-moz-focusring{color:transparent;text-shadow:0 0 0 black;}option:not(:checked){color:black;}"]);

package/dist/elements/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Select/Select.tsx"],"names":["Select","description","disabled","error","focus","hover","id","name","options","required","selected","title","variant","onSelect","rest","boxProps","selectProps","flexDirection","alignItems","for","undefined","event","target","value","map","text","resetMixin","css","caretMixin","Container","Box","props","SELECT_STATES","default"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Variant } from \"./types\"\nimport { SELECT_STATES } from \"./tokens\"\n\nexport interface Option {\n  value: string\n  text: string\n}\n\nexport interface SelectProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLSelectElement>, \"onSelect\"> {\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  name?: string\n  options: Option[]\n  required?: boolean\n  selected?: string\n  title?: string\n  variant?: Variant\n  onSelect?: (value: string) => void\n}\n\n/** A drop-down select menu */\nexport const Select: React.FC<SelectProps> = ({\n  description,\n  disabled,\n  error,\n  focus,\n  hover,\n  id,\n  name,\n  options,\n  required,\n  selected,\n  title,\n  variant = \"default\",\n  onSelect,\n  ...rest\n}) => {\n  const [boxProps, selectProps] = splitBoxProps(rest)\n\n  return (\n    <Box width=\"100%\" {...boxProps}>\n      <Flex\n        as=\"label\"\n        {...(variant === \"inline\"\n          ? {\n              flexDirection: \"row\",\n              alignItems: \"center\",\n            }\n          : {\n              flexDirection: \"column\",\n              alignItems: \"flex-start\",\n            })}\n        {...(id ? { for: id } : {})}\n      >\n        <div>\n          {title && (\n            <Text\n              variant=\"xs\"\n              lineHeight={\n                variant === \"inline\" && description === undefined\n                  ? 1\n                  : undefined\n              }\n            >\n              {title}\n              {required && (\n                <Box as=\"span\" color=\"brand\">\n                  *\n                </Box>\n              )}\n            </Text>\n          )}\n\n          {description && (\n            <Text variant=\"xs\" color=\"black60\">\n              {description}\n            </Text>\n          )}\n        </div>\n\n        <Container\n          variant={variant}\n          disabled={!!disabled}\n          hover={!!hover}\n          error={error!}\n          focus={!!focus}\n          mt={variant !== \"inline\" && (title || description) ? 0.5 : 0}\n        >\n          <select\n            id={id}\n            disabled={disabled}\n            name={name}\n            value={selected}\n            onChange={(event) => {\n              onSelect && onSelect(event.target.value)\n            }}\n            {...selectProps}\n          >\n            {options.map(({ value, text }) => {\n              return (\n                <option value={value} key={value}>\n                  {text}\n                </option>\n              )\n            })}\n          </select>\n        </Container>\n      </Flex>\n\n      {error && typeof error === \"string\" && (\n        <Text variant=\"xs\" mt={0.5} color=\"red100\">\n          {error}\n        </Text>\n      )}\n    </Box>\n  )\n}\n\nconst resetMixin = css`\n  appearance: none;\n  background: none;\n  border: none;\n  outline: 0;\n  text-indent: 0.01px;\n  text-overflow: \"\";\n  border-radius: 0;\n\n  &:-moz-focusring {\n    color: transparent;\n    text-shadow: 0 0 0 black;\n  }\n\n  option:not(:checked) {\n    color: black; /* prevent <option>s from becoming transparent as well */\n  }\n`\n\n/** Creates a small caret */\nexport const caretMixin = css`\n  &::after {\n    content: \"\";\n    cursor: inherit;\n    width: 0;\n    height: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: ${themeGet(\"space.1\")};\n    pointer-events: none;\n    border-left: 4px solid transparent;\n    border-right: 4px solid transparent;\n    border-top: 4px solid\n      ${({ disabled }) => {\n        return disabled\n          ? themeGet(\"colors.black10\")\n          : themeGet(\"colors.black100\")\n      }};\n  }\n`\n\ntype ContainerProps = Required<\n  Pick<SelectProps, \"variant\" | \"disabled\" | \"error\" | \"hover\" | \"focus\">\n>\n\nconst Container = styled(Box)<ContainerProps>`\n  position: relative;\n  width: 100%;\n\n  > select {\n    ${resetMixin};\n    width: 100%;\n    /* 24px = space.1 + 4px-wide caret + space.1 */\n    padding: 0 24px 0 ${themeGet(\"space.1\")};\n    font-family: ${themeGet(\"fonts.sans\")};\n    border: 0;\n    border-bottom: 1px solid;\n    cursor: pointer;\n    line-height: 1;\n    transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n\n    ${(props) => {\n      return css`\n        ${SELECT_STATES.default}\n\n        ${props.hover && SELECT_STATES.hover}\n        ${props.focus && SELECT_STATES.focus}\n        ${props.disabled && SELECT_STATES.disabled}\n        ${props.error && SELECT_STATES.error}\n\n        &:hover {\n          ${SELECT_STATES.hover}\n        }\n\n        &:focus {\n          ${SELECT_STATES.focus}\n        }\n\n        &:disabled {\n          cursor: default;\n          ${SELECT_STATES.disabled}\n        }\n      `\n    }};\n  }\n\n  ${caretMixin}\n`\n"],"file":"Select.js"}
+{"version":3,"sources":["../../../src/elements/Select/Select.tsx"],"names":["Select","ref","description","disabled","error","focus","hover","id","name","options","required","selected","title","variant","onSelect","rest","boxProps","selectProps","flexDirection","alignItems","for","undefined","event","target","value","map","text","displayName","resetMixin","css","caretMixin","Container","Box","props","SELECT_STATES","default"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, ForwardRefExoticComponent, Ref } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Variant } from \"./types\"\nimport { SELECT_STATES } from \"./tokens\"\n\nexport interface Option {\n  value: string\n  text: string\n}\n\nexport interface SelectProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLSelectElement>, \"onSelect\"> {\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  name?: string\n  options: Option[]\n  required?: boolean\n  selected?: string\n  title?: string\n  variant?: Variant\n  onSelect?: (value: string) => void\n}\n\n/** A drop-down select menu */\nexport const Select: ForwardRefExoticComponent<\n  SelectProps & { ref?: Ref<HTMLElement> }\n> = forwardRef(\n  (\n    {\n      description,\n      disabled,\n      error,\n      focus,\n      hover,\n      id,\n      name,\n      options,\n      required,\n      selected,\n      title,\n      variant = \"default\",\n      onSelect,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, selectProps] = splitBoxProps(rest)\n\n    return (\n      <Box width=\"100%\" {...boxProps}>\n        <Flex\n          as=\"label\"\n          {...(variant === \"inline\"\n            ? {\n                flexDirection: \"row\",\n                alignItems: \"center\",\n              }\n            : {\n                flexDirection: \"column\",\n                alignItems: \"flex-start\",\n              })}\n          {...(id ? { for: id } : {})}\n        >\n          <div>\n            {title && (\n              <Text\n                variant=\"xs\"\n                lineHeight={\n                  variant === \"inline\" && description === undefined\n                    ? 1\n                    : undefined\n                }\n              >\n                {title}\n                {required && (\n                  <Box as=\"span\" color=\"brand\">\n                    *\n                  </Box>\n                )}\n              </Text>\n            )}\n\n            {description && (\n              <Text variant=\"xs\" color=\"black60\">\n                {description}\n              </Text>\n            )}\n          </div>\n\n          <Container\n            variant={variant}\n            disabled={!!disabled}\n            hover={!!hover}\n            error={error!}\n            focus={!!focus}\n            mt={variant !== \"inline\" && (title || description) ? 0.5 : 0}\n          >\n            <select\n              ref={ref as any}\n              id={id}\n              disabled={disabled}\n              name={name}\n              value={selected}\n              onChange={(event) => {\n                onSelect && onSelect(event.target.value)\n              }}\n              {...selectProps}\n            >\n              {options.map(({ value, text }) => {\n                return (\n                  <option value={value} key={value}>\n                    {text}\n                  </option>\n                )\n              })}\n            </select>\n          </Container>\n        </Flex>\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} color=\"red100\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nSelect.displayName = \"Select\"\n\nconst resetMixin = css`\n  appearance: none;\n  background: none;\n  border: none;\n  outline: 0;\n  text-indent: 0.01px;\n  text-overflow: \"\";\n  border-radius: 0;\n\n  &:-moz-focusring {\n    color: transparent;\n    text-shadow: 0 0 0 black;\n  }\n\n  option:not(:checked) {\n    color: black; /* prevent <option>s from becoming transparent as well */\n  }\n`\n\n/** Creates a small caret */\nexport const caretMixin = css`\n  &::after {\n    content: \"\";\n    cursor: inherit;\n    width: 0;\n    height: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: ${themeGet(\"space.1\")};\n    pointer-events: none;\n    border-left: 4px solid transparent;\n    border-right: 4px solid transparent;\n    border-top: 4px solid\n      ${({ disabled }) => {\n        return disabled\n          ? themeGet(\"colors.black10\")\n          : themeGet(\"colors.black100\")\n      }};\n  }\n`\n\ntype ContainerProps = Required<\n  Pick<SelectProps, \"variant\" | \"disabled\" | \"error\" | \"hover\" | \"focus\">\n>\n\nconst Container = styled(Box)<ContainerProps>`\n  position: relative;\n  width: 100%;\n\n  > select {\n    ${resetMixin};\n    width: 100%;\n    /* 24px = space.1 + 4px-wide caret + space.1 */\n    padding: 0 24px 0 ${themeGet(\"space.1\")};\n    font-family: ${themeGet(\"fonts.sans\")};\n    border: 0;\n    border-bottom: 1px solid;\n    cursor: pointer;\n    line-height: 1;\n    transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n\n    ${(props) => {\n      return css`\n        ${SELECT_STATES.default}\n\n        ${props.hover && SELECT_STATES.hover}\n        ${props.focus && SELECT_STATES.focus}\n        ${props.disabled && SELECT_STATES.disabled}\n        ${props.error && SELECT_STATES.error}\n\n        &:hover {\n          ${SELECT_STATES.hover}\n        }\n\n        &:focus {\n          ${SELECT_STATES.focus}\n        }\n\n        &:disabled {\n          cursor: default;\n          ${SELECT_STATES.disabled}\n        }\n      `\n    }};\n  }\n\n  ${caretMixin}\n`\n"],"file":"Select.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "24.1.1",
+  "version": "24.2.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -176,5 +176,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "4dd251eb273fddf064e69ca3a153a984843f757e"
+  "gitHead": "315c874858183346ba9e3d3d2f5cdd403251aee7"
 }