@artsy/palette 45.14.0-canary.1497.33065.0 → 45.14.0-canary.1497.33070.0

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","names":["React","Box","ProgressBar","_ref","percentComplete","_ref$highlight","highlight","_ref$showBackground","showBackground","_ref$transition","transition","rest","_objectWithoutProperties","_excluded","createElement","_extends","tabIndex","role","height","position","overflow","mt","mb","bg","width","style","transform","concat","backfaceVisibility","displayName"],"sources":["../../../../src/elements/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React from \"react\"\nimport { Color } from \"../../themes/types\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport interface ProgressBarProps extends BoxProps {\n  percentComplete: number\n  highlight?: Color\n  showBackground?: boolean\n  transition?: string\n}\n\n/** ProgressBar */\nexport const ProgressBar: React.FC<\n  React.PropsWithChildren<ProgressBarProps>\n> = ({\n  percentComplete,\n  highlight = \"brand\",\n  showBackground = true,\n  transition = \"transform 1s ease\",\n  ...rest\n}) => {\n  return (\n    <Box\n      tabIndex={0}\n      role=\"progressbar\"\n      aria-valuenow={percentComplete}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      height=\"2px\"\n      position=\"relative\"\n      overflow=\"hidden\"\n      mt={0.5}\n      mb={1}\n      bg={showBackground ? \"mono30\" : \"transparent\"}\n      {...rest}\n    >\n      <Box\n        bg={highlight}\n        width=\"100%\"\n        height=\"100%\"\n        style={{\n          transition,\n          transform: `translateX(-${100 - percentComplete}%)`,\n          backfaceVisibility: \"hidden\",\n        }}\n      />\n    </Box>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,GAAG;AASZ;AACA,OAAO,IAAMC,WAEZ,GAAG,SAFSA,WAEZA,CAAAC,IAAA,EAMK;EAAA,IALJC,eAAe,GAAAD,IAAA,CAAfC,eAAe;IAAAC,cAAA,GAAAF,IAAA,CACfG,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,OAAO,GAAAA,cAAA;IAAAE,mBAAA,GAAAJ,IAAA,CACnBK,cAAc;IAAdA,cAAc,GAAAD,mBAAA,cAAG,IAAI,GAAAA,mBAAA;IAAAE,eAAA,GAAAN,IAAA,CACrBO,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,mBAAmB,GAAAA,eAAA;IAC7BE,IAAI,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAEP,oBACEb,KAAA,CAAAc,aAAA,CAACb,GAAG,EAAAc,QAAA;IACFC,QAAQ,EAAE,CAAE;IACZC,IAAI,EAAC,aAAa;IAClB,iBAAeb,eAAgB;IAC/B,iBAAe,CAAE;IACjB,iBAAe,GAAI;IACnBc,MAAM,EAAC,KAAK;IACZC,QAAQ,EAAC,UAAU;IACnBC,QAAQ,EAAC,QAAQ;IACjBC,EAAE,EAAE,GAAI;IACRC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAEf,cAAc,GAAG,QAAQ,GAAG;EAAc,GAC1CG,IAAI,gBAERX,KAAA,CAAAc,aAAA,CAACb,GAAG;IACFsB,EAAE,EAAEjB,SAAU;IACdkB,KAAK,EAAC,MAAM;IACZN,MAAM,EAAC,MAAM;IACbO,KAAK,EAAE;MACLf,UAAU,EAAVA,UAAU;MACVgB,SAAS,iBAAAC,MAAA,CAAiB,GAAG,GAAGvB,eAAe,OAAI;MACnDwB,kBAAkB,EAAE;IACtB;EAAE,EACF,CACE;AAEV,CAAC;AApCY1B,WAEZ,CAAA2B,WAAA"}
+{"version":3,"file":"ProgressBar.js","names":["React","Color","Box","BoxProps","ProgressBar","_ref","percentComplete","_ref$highlight","highlight","_ref$showBackground","showBackground","_ref$transition","transition","rest","_objectWithoutProperties","_excluded","createElement","_extends","tabIndex","role","height","position","overflow","mt","mb","bg","width","style","transform","concat","backfaceVisibility","displayName"],"sources":["../../../../src/elements/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React from \"react\"\nimport { Color } from \"../../themes/types\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport interface ProgressBarProps extends BoxProps {\n  percentComplete: number\n  highlight?: Color\n  showBackground?: boolean\n  transition?: string\n}\n\n/** ProgressBar */\nexport const ProgressBar: React.FC<\n  React.PropsWithChildren<ProgressBarProps>\n> = ({\n  percentComplete,\n  highlight = \"brand\",\n  showBackground = true,\n  transition = \"transform 1s ease\",\n  ...rest\n}) => {\n  return (\n    <Box\n      tabIndex={0}\n      role=\"progressbar\"\n      aria-valuenow={percentComplete}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      height=\"2px\"\n      position=\"relative\"\n      overflow=\"hidden\"\n      mt={0.5}\n      mb={1}\n      bg={showBackground ? \"mono30\" : \"transparent\"}\n      {...rest}\n    >\n      <Box\n        bg={highlight}\n        width=\"100%\"\n        height=\"100%\"\n        style={{\n          transition,\n          transform: `translateX(-${100 - percentComplete}%)`,\n          backfaceVisibility: \"hidden\",\n        }}\n      />\n    </Box>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK;AACd,SAASC,GAAG,EAAEC,QAAQ;AAStB;AACA,OAAO,IAAMC,WAEZ,GAAG,SAFSA,WAEZA,CAAAC,IAAA,EAMK;EAAA,IALJC,eAAe,GAAAD,IAAA,CAAfC,eAAe;IAAAC,cAAA,GAAAF,IAAA,CACfG,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,OAAO,GAAAA,cAAA;IAAAE,mBAAA,GAAAJ,IAAA,CACnBK,cAAc;IAAdA,cAAc,GAAAD,mBAAA,cAAG,IAAI,GAAAA,mBAAA;IAAAE,eAAA,GAAAN,IAAA,CACrBO,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,mBAAmB,GAAAA,eAAA;IAC7BE,IAAI,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAEP,oBACEf,KAAA,CAAAgB,aAAA,CAACd,GAAG,EAAAe,QAAA;IACFC,QAAQ,EAAE,CAAE;IACZC,IAAI,EAAC,aAAa;IAClB,iBAAeb,eAAgB;IAC/B,iBAAe,CAAE;IACjB,iBAAe,GAAI;IACnBc,MAAM,EAAC,KAAK;IACZC,QAAQ,EAAC,UAAU;IACnBC,QAAQ,EAAC,QAAQ;IACjBC,EAAE,EAAE,GAAI;IACRC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAEf,cAAc,GAAG,QAAQ,GAAG;EAAc,GAC1CG,IAAI,gBAERb,KAAA,CAAAgB,aAAA,CAACd,GAAG;IACFuB,EAAE,EAAEjB,SAAU;IACdkB,KAAK,EAAC,MAAM;IACZN,MAAM,EAAC,MAAM;IACbO,KAAK,EAAE;MACLf,UAAU,EAAVA,UAAU;MACVgB,SAAS,iBAAAC,MAAA,CAAiB,GAAG,GAAGvB,eAAe,OAAI;MACnDwB,kBAAkB,EAAE;IACtB;EAAE,EACF,CACE;AAEV,CAAC;AApCY1B,WAEZ,CAAA2B,WAAA"}

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

@@ -5,7 +5,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from "react";
 import styled from "styled-components";
 import { variant } from "styled-system";
-import { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 import { Clickable } from "../Clickable";
 import { VisuallyHidden } from "../VisuallyHidden";
 var VARIANTS = {

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

@@ -1 +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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"}
+{"version":3,"file":"ProgressDots.js","names":["React","styled","variant","Box","BoxProps","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/Radio/Radio.js

@@ -4,7 +4,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; }
 import React from "react";
 import styled, { css } from "styled-components";
-import { Flex } from "../../elements/Flex";
+import { Flex, FlexProps } from "../../elements/Flex";
 import { isText } from "../../helpers/isText";
 import { Text } from "../Text";
 import { RadioDot } from "./RadioDot";

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

@@ -1 +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":"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"}
+{"version":3,"file":"Radio.js","names":["React","styled","css","Flex","FlexProps","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,EAAEC,SAAS;AACxB,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,oBACEb,KAAA,CAAAkC,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,gBAERxB,KAAA,CAAAkC,aAAA,CAAC/B,IAAI;IACHwC,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,gBAEN/C,KAAA,CAAAkC,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,eAEPjB,KAAA,CAAAkC,aAAA,CAAC/B,IAAI;IAAC6C,aAAa,EAAC,QAAQ;IAACC,IAAI,EAAE;EAAE,gBACnCjD,KAAA,CAAAkC,aAAA,CAAC/B,IAAI;IAACmC,UAAU,EAAC,QAAQ;IAACW,IAAI,EAAE;EAAE,GAC/B5C,MAAM,CAAC2B,KAAK,CAAC,gBACZhC,KAAA,CAAAkC,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,gBAClBjC,KAAA,CAAAkC,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,GAAGlC,MAAM,CAACE,IAAI,CAAC,CAAAsD,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,aAQ1B,UAACC,KAAK,EAAK;EACX,OAAOzD,GAAG,mHACNyD,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,IACfZ,GAAG,wBACCO,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/tokens.js

@@ -1,5 +1,7 @@
 import { themeGet } from "@styled-system/theme-get";
 import { css } from "styled-components";
+import { ResponsiveValue } from "styled-system";
+import { TextVariant } from "../../Theme";
 export var RADIO_DOT_STATES = {
   default: {
     resting: css(["border:1px solid;color:", ";border-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono30")),

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

@@ -1 +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"}
+{"version":3,"file":"tokens.js","names":["themeGet","css","ResponsiveValue","TextVariant","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;AACvC,SAASC,eAAe,QAAQ,eAAe;AAC/C,SAASC,WAAW;AAEpB,OAAO,IAAMC,gBAAgB,GAAG;EAC9BC,OAAO,EAAE;IACPC,OAAO,EAAEL,GAAG,qDAEDD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,CAC1C;IACDO,QAAQ,EAAEN,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,gBAAgB,CAAC;EAElD,CAAC;EACDQ,KAAK,EAAE;IACLF,OAAO,EAAEL,GAAG,qDAEDD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,gBAAgB,CAAC,CAC3C;IACDO,QAAQ,EAAEN,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,gBAAgB,CAAC;EAElD,CAAC;EACDS,QAAQ,EAAE;IACRH,OAAO,EAAEL,GAAG,qDAEDD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,CAC1C;IACDO,QAAQ,EAAEN,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,eAAe,CAAC;EAEjD,CAAC;EACDU,KAAK,EAAE;IACLJ,OAAO,EAAEL,GAAG,qDAEDD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,CAC1C;IACDO,QAAQ,EAAEN,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,eAAe,CAAC;EAEjD,CAAC;EACDW,KAAK,EAAE;IACLL,OAAO,EAAEL,GAAG,kFAGMD,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,cAAc,CAAC,CAC7C;IACDO,QAAQ,EAAEN,GAAG,2EAEFD,QAAQ,CAAC,cAAc,CAAC,EACjBA,QAAQ,CAAC,gBAAgB,CAAC,EACtBA,QAAQ,CAAC,gBAAgB,CAAC;EAElD;AACF,CAAC;AAED,OAAO,IAAMY,YAAY,GAAG;EAC1BP,OAAO,EAAEJ,GAAG,kBACDD,QAAQ,CAAC,eAAe,CAAC,CACnC;EACDQ,KAAK,EAAEP,GAAG,uEACCD,QAAQ,CAAC,gBAAgB,CAAC,CAMpC;EACDO,QAAQ,EAAEN,GAAG,kBACFD,QAAQ,CAAC,gBAAgB,CAAC,CACpC;EACDW,KAAK,EAAEV,GAAG,uEACCD,QAAQ,CAAC,gBAAgB,CAAC,CAMpC;EACDS,QAAQ,EAAER,GAAG,sCAEFD,QAAQ,CAAC,eAAe,CAAC,CACnC;EACDU,KAAK,EAAET,GAAG,kBACCD,QAAQ,CAAC,eAAe,CAAC;AAEtC,CAAU;AAQV,OAAO,IAAMa,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"}

package/dist/esm/elements/RadioGroup/RadioGroup.js

@@ -28,7 +28,8 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 import React from "react";
-import { Flex } from "../Flex";
+import { Flex, FlexProps } from "../Flex";
+import { RadioProps } from "../Radio";
 import { Text } from "../Text";
 /**
  * A stateful collection of Radio buttons

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["React","Flex","Text","RadioGroup","_React$Component","_this2$props$defaultV","_this2","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","state","selectedOption","props","defaultValue","onSelect","_ref","value","update","deselectable","setState","_inherits","_createClass","key","componentDidUpdate","prevProps","renderRadioButtons","_this3","Children","map","children","child","cloneElement","disabled","undefined","selected","_child$props$onSelect","_child$props","call","render","_this$props","disabledText","_onSelect","_defaultValue","_children","rest","_objectWithoutProperties","_excluded","createElement","_extends","flexDirection","variant","mb","color","Component","displayName"],"sources":["../../../../src/elements/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React from \"react\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { RadioProps } from \"../Radio\"\nimport { Text } from \"../Text\"\n\nexport interface RadioGroupProps<T> 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: T) => void\n  /** Default value of radio button */\n  defaultValue?: T\n  /** Child <Radio /> elements */\n  children:\n    | Array<React.ReactElement<RadioProps<T>>>\n    | React.ReactElement<RadioProps<T>>\n}\n\ninterface RadioGroupState<T> {\n  selectedOption: T | null\n}\n\n/**\n * A stateful collection of Radio buttons\n */\nexport class RadioGroup<T> extends React.Component<\n  RadioGroupProps<T>,\n  RadioGroupState<T>\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<T>>) => {\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      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onSelect: _onSelect,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      defaultValue: _defaultValue,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      children: _children,\n      ...rest\n    } = this.props\n    return (\n      <Flex flexDirection=\"column\" {...rest}>\n        {disabled && disabledText && (\n          <Text variant=\"xs\" mb={1} color=\"mono60\">\n            {disabledText}\n          </Text>\n        )}\n\n        {this.renderRadioButtons()}\n      </Flex>\n    )\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AAEb,SAASC,IAAI;AAuBb;AACA;AACA;AACA,WAAaC,UAAU,0BAAAC,gBAAA;EAAA,SAAAD,WAAA;IAAA,IAAAE,qBAAA;IAAA,IAAAC,MAAA;IAAAC,eAAA,OAAAJ,UAAA;IAAA,SAAAK,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,MAAA,GAAAQ,UAAA,OAAAX,UAAA,KAAAY,MAAA,CAAAJ,IAAA;IAAAL,MAAA,CAIrBU,KAAK,GAAG;MACNC,cAAc,GAAAZ,qBAAA,GAAEC,MAAA,CAAKY,KAAK,CAACC,YAAY,cAAAd,qBAAA,cAAAA,qBAAA,GAAI;IAC7C,CAAC;IAAAC,MAAA,CAUDc,QAAQ,GAAG,UAAAC,IAAA,EAAe;MAAA,IAAZC,KAAK,GAAAD,IAAA,CAALC,KAAK;MACjB;MACA,IAAMC,MAAM,GAAG,SAATA,MAAMA,CAAA,EAAS;QACnB,IAAIjB,MAAA,CAAKY,KAAK,CAACE,QAAQ,EAAE;UACvBd,MAAA,CAAKY,KAAK,CAACE,QAAQ,CAACd,MAAA,CAAKU,KAAK,CAACC,cAAc,CAAE;QACjD;MACF,CAAC;MAED,IAAIX,MAAA,CAAKY,KAAK,CAACM,YAAY,EAAE;QAC3B,IAAIlB,MAAA,CAAKU,KAAK,CAACC,cAAc,KAAKK,KAAK,EAAE;UACvChB,MAAA,CAAKmB,QAAQ,CACX;YACER,cAAc,EAAE;UAClB,CAAC,EACDM,MAAM,CACP;UACD;QACF;MACF;MAEAjB,MAAA,CAAKmB,QAAQ,CAAC;QAAER,cAAc,EAAEK;MAAM,CAAC,EAAEC,MAAM,CAAC;IAClD,CAAC;IAAA,OAAAjB,MAAA;EAAA;EAAAoB,SAAA,CAAAvB,UAAA,EAAAC,gBAAA;EAAA,OAAAuB,YAAA,CAAAxB,UAAA;IAAAyB,GAAA;IAAAN,KAAA,EA7BD,SAAAO,kBAAkBA,CAACC,SAAS,EAAE;MAC5B,IAAIA,SAAS,CAACX,YAAY,KAAK,IAAI,CAACD,KAAK,CAACC,YAAY,EAAE;QACtD,IAAI,CAACM,QAAQ,CAAC;UACZR,cAAc,EAAE,IAAI,CAACC,KAAK,CAACC;QAC7B,CAAC,CAAC;MACJ;IACF;EAAC;IAAAS,GAAA;IAAAN,KAAA,EAyBD,SAAAS,kBAAkBA,CAAA,EAAG;MAAA,IAAAC,MAAA;MACnB,OAAOhC,KAAK,CAACiC,QAAQ,CAACC,GAAG,CACvB,IAAI,CAAChB,KAAK,CAACiB,QAAQ,EACnB,UAACC,KAAwC,EAAK;QAC5C,oBAAOpC,KAAK,CAACqC,YAAY,CAACD,KAAK,EAAE;UAC/BE,QAAQ,EACNF,KAAK,CAAClB,KAAK,CAACoB,QAAQ,KAAKC,SAAS,GAC9BH,KAAK,CAAClB,KAAK,CAACoB,QAAQ,GACpBN,MAAI,CAACd,KAAK,CAACoB,QAAQ;UACzBlB,QAAQ,EAAEgB,KAAK,CAAClB,KAAK,CAACE,QAAQ,GAC1B,UAACoB,QAAQ,EAAK;YAAA,IAAAC,qBAAA,EAAAC,YAAA;YACZV,MAAI,CAACZ,QAAQ,CAACoB,QAAQ,CAAC;YACvB,CAAAC,qBAAA,IAAAC,YAAA,GAAAN,KAAK,CAAClB,KAAK,EAACE,QAAQ,cAAAqB,qBAAA,uBAApBA,qBAAA,CAAAE,IAAA,CAAAD,YAAA,EAAuBF,QAAQ,CAAC;UAClC,CAAC,GACDR,MAAI,CAACZ,QAAQ;UACjB;UACAoB,QAAQ,EAAER,MAAI,CAAChB,KAAK,CAACC,cAAc,KAAKmB,KAAK,CAAClB,KAAK,CAACI;QACtD,CAAC,CAAC;MACJ,CAAC,CACF;IACH;EAAC;IAAAM,GAAA;IAAAN,KAAA,EAED,SAAAsB,MAAMA,CAAA,EAAG;MACP,IAAAC,WAAA,GAUI,IAAI,CAAC3B,KAAK;QATZoB,QAAQ,GAAAO,WAAA,CAARP,QAAQ;QACRQ,YAAY,GAAAD,WAAA,CAAZC,YAAY;QAEFC,SAAS,GAAAF,WAAA,CAAnBzB,QAAQ;QAEM4B,aAAa,GAAAH,WAAA,CAA3B1B,YAAY;QAEF8B,SAAS,GAAAJ,WAAA,CAAnBV,QAAQ;QACLe,IAAI,GAAAC,wBAAA,CAAAN,WAAA,EAAAO,SAAA;MAET,oBACEpD,KAAA,CAAAqD,aAAA,CAACpD,IAAI,EAAAqD,QAAA;QAACC,aAAa,EAAC;MAAQ,GAAKL,IAAI,GAClCZ,QAAQ,IAAIQ,YAAY,iBACvB9C,KAAA,CAAAqD,aAAA,CAACnD,IAAI;QAACsD,OAAO,EAAC,IAAI;QAACC,EAAE,EAAE,CAAE;QAACC,KAAK,EAAC;MAAQ,GACrCZ,YAAY,CAEhB,EAEA,IAAI,CAACf,kBAAkB,EAAE,CACrB;IAEX;EAAC;AAAA,EApFgC/B,KAAK,CAAC2D,SAAS;AAArCxD,UAAU,CAAAyD,WAAA"}
+{"version":3,"file":"RadioGroup.js","names":["React","Flex","FlexProps","RadioProps","Text","RadioGroup","_React$Component","_this2$props$defaultV","_this2","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","state","selectedOption","props","defaultValue","onSelect","_ref","value","update","deselectable","setState","_inherits","_createClass","key","componentDidUpdate","prevProps","renderRadioButtons","_this3","Children","map","children","child","cloneElement","disabled","undefined","selected","_child$props$onSelect","_child$props","call","render","_this$props","disabledText","_onSelect","_defaultValue","_children","rest","_objectWithoutProperties","_excluded","createElement","_extends","flexDirection","variant","mb","color","Component","displayName"],"sources":["../../../../src/elements/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React from \"react\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { RadioProps } from \"../Radio\"\nimport { Text } from \"../Text\"\n\nexport interface RadioGroupProps<T> 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: T) => void\n  /** Default value of radio button */\n  defaultValue?: T\n  /** Child <Radio /> elements */\n  children:\n    | Array<React.ReactElement<RadioProps<T>>>\n    | React.ReactElement<RadioProps<T>>\n}\n\ninterface RadioGroupState<T> {\n  selectedOption: T | null\n}\n\n/**\n * A stateful collection of Radio buttons\n */\nexport class RadioGroup<T> extends React.Component<\n  RadioGroupProps<T>,\n  RadioGroupState<T>\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<T>>) => {\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      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onSelect: _onSelect,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      defaultValue: _defaultValue,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      children: _children,\n      ...rest\n    } = this.props\n    return (\n      <Flex flexDirection=\"column\" {...rest}>\n        {disabled && disabledText && (\n          <Text variant=\"xs\" mb={1} color=\"mono60\">\n            {disabledText}\n          </Text>\n        )}\n\n        {this.renderRadioButtons()}\n      </Flex>\n    )\n  }\n}\n"],"mappings":"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"}

package/dist/esm/elements/Range/Range.js

@@ -17,7 +17,7 @@ import { useEffect, useRef, useState } from "react";
 import styled, { css } from "styled-components";
 import { useUpdateEffect } from "../../utils";
 import { remapValue } from "../../utils/remapValue";
-import { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 import { Flex } from "../Flex";
 export var RANGE_HANDLE_SIZE = 24;
 export var Range = function Range(_ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"Range.js","names":["themeGet","React","useEffect","useRef","useState","styled","css","useUpdateEffect","remapValue","Box","Flex","RANGE_HANDLE_SIZE","Range","_ref","ariaLabels","min","max","step","_ref$value","value","onChange","rest","_objectWithoutProperties","_excluded","minRef","maxRef","_useState","_useState2","_slicedToArray","values","setValues","_useState3","_useState4","maxWidth","setMaxWidth","handleMinChange","_ref2","target","valueAsNumber","handleMaxChange","_ref3","handleResize","current","offsetWidth","requestAnimationFrame","window","addEventListener","passive","removeEventListener","_toConsumableArray","selectionRectangle","concat","maxRectangle","createElement","Track","Selection","style","clip","Slider","ref","onInput","displayName","withConfig","componentId","railStyles","handleStyles","input","defaultProps","type"],"sources":["../../../../src/elements/Range/Range.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport * as React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { useUpdateEffect } from \"../../utils\"\nimport { remapValue } from \"../../utils/remapValue\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\n\nexport const RANGE_HANDLE_SIZE = 24\n\nexport interface RangeProps extends BoxProps {\n  ariaLabels?: [string, string]\n  min: number\n  max: number\n  step: number\n  value?: number[]\n  onChange?: (range: [number, number]) => void\n}\n\nexport const Range: React.FC<React.PropsWithChildren<RangeProps>> = ({\n  ariaLabels,\n  min,\n  max,\n  step,\n  value = [0, max],\n  onChange,\n  ...rest\n}) => {\n  const minRef = useRef<HTMLInputElement | null>(null)\n  const maxRef = useRef<HTMLInputElement | null>(null)\n\n  const [values, setValues] = useState(value)\n\n  const [maxWidth, setMaxWidth] = useState(0)\n\n  const handleMinChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value > values[1] - step) return\n    setValues([value, values[1]])\n    onChange?.([value, values[1]])\n  }\n\n  const handleMaxChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value < values[0] + step) return\n    setValues([values[0], value])\n    onChange?.([values[0], value])\n  }\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (!maxRef.current) return\n      setMaxWidth(maxRef.current.offsetWidth)\n    }\n\n    requestAnimationFrame(handleResize)\n\n    window.addEventListener(\"resize\", handleResize, { passive: true })\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize)\n    }\n  }, [])\n\n  // Sync local state with value prop\n  useUpdateEffect(() => {\n    setValues(value)\n  }, [...value])\n\n  const selectionRectangle = `rect(0, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px, 2px, ${remapValue(\n    values[0],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  const maxRectangle = `rect(0, ${maxWidth}px, ${RANGE_HANDLE_SIZE}px, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  return (\n    <Track {...rest}>\n      <Selection style={{ clip: selectionRectangle }} />\n\n      <Slider\n        ref={minRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMinChange}\n        value={values[0]}\n        aria-label={ariaLabels?.[0]}\n      />\n\n      <Slider\n        ref={maxRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMaxChange}\n        value={values[1]}\n        style={{ clip: maxRectangle }}\n        aria-label={ariaLabels?.[1]}\n      />\n    </Track>\n  )\n}\n\nconst Track = styled(Flex)`\n  align-items: center;\n  position: relative;\n  height: ${RANGE_HANDLE_SIZE}px;\n\n  &:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    height: 2px;\n    left: 0;\n    right: 0;\n    top: 50%;\n    margin-top: -1px;\n    background-color: ${themeGet(\"colors.mono30\")};\n  }\n`\n\nconst Selection = styled(Box)`\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  top: 50%;\n  margin-top: -1px;\n  background-color: ${themeGet(\"colors.brand\")};\n`\n\nconst railStyles = css`\n  width: 100%;\n  height: ${RANGE_HANDLE_SIZE}px;\n`\n\nconst handleStyles = css`\n  user-select: none;\n  cursor: grab;\n  width: ${RANGE_HANDLE_SIZE}px;\n  height: ${RANGE_HANDLE_SIZE}px;\n  background-color: ${themeGet(\"colors.mono0\")};\n  border-radius: 50%;\n  border: 1px solid ${themeGet(\"colors.mono10\")};\n  box-shadow: ${themeGet(\"effects.flatShadow\")};\n`\n\nconst Slider = styled.input`\n  appearance: none;\n  background: transparent;\n  position: relative;\n  margin: 0;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  &::-webkit-slider-runnable-track {\n    ${railStyles}\n  }\n\n  &::-moz-range-track {\n    ${railStyles}\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    ${handleStyles}\n  }\n\n  &::-moz-range-thumb {\n    ${handleStyles}\n  }\n\n  &:active {\n    &::-webkit-slider-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.mono5\")};\n    }\n\n    &::-moz-range-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.mono5\")};\n    }\n  }\n`\n\nSlider.defaultProps = {\n  type: \"range\",\n}\n"],"mappings":"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"}
+{"version":3,"file":"Range.js","names":["themeGet","React","useEffect","useRef","useState","styled","css","useUpdateEffect","remapValue","Box","BoxProps","Flex","RANGE_HANDLE_SIZE","Range","_ref","ariaLabels","min","max","step","_ref$value","value","onChange","rest","_objectWithoutProperties","_excluded","minRef","maxRef","_useState","_useState2","_slicedToArray","values","setValues","_useState3","_useState4","maxWidth","setMaxWidth","handleMinChange","_ref2","target","valueAsNumber","handleMaxChange","_ref3","handleResize","current","offsetWidth","requestAnimationFrame","window","addEventListener","passive","removeEventListener","_toConsumableArray","selectionRectangle","concat","maxRectangle","createElement","Track","Selection","style","clip","Slider","ref","onInput","displayName","withConfig","componentId","railStyles","handleStyles","input","defaultProps","type"],"sources":["../../../../src/elements/Range/Range.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport * as React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { useUpdateEffect } from \"../../utils\"\nimport { remapValue } from \"../../utils/remapValue\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\n\nexport const RANGE_HANDLE_SIZE = 24\n\nexport interface RangeProps extends BoxProps {\n  ariaLabels?: [string, string]\n  min: number\n  max: number\n  step: number\n  value?: number[]\n  onChange?: (range: [number, number]) => void\n}\n\nexport const Range: React.FC<React.PropsWithChildren<RangeProps>> = ({\n  ariaLabels,\n  min,\n  max,\n  step,\n  value = [0, max],\n  onChange,\n  ...rest\n}) => {\n  const minRef = useRef<HTMLInputElement | null>(null)\n  const maxRef = useRef<HTMLInputElement | null>(null)\n\n  const [values, setValues] = useState(value)\n\n  const [maxWidth, setMaxWidth] = useState(0)\n\n  const handleMinChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value > values[1] - step) return\n    setValues([value, values[1]])\n    onChange?.([value, values[1]])\n  }\n\n  const handleMaxChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value < values[0] + step) return\n    setValues([values[0], value])\n    onChange?.([values[0], value])\n  }\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (!maxRef.current) return\n      setMaxWidth(maxRef.current.offsetWidth)\n    }\n\n    requestAnimationFrame(handleResize)\n\n    window.addEventListener(\"resize\", handleResize, { passive: true })\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize)\n    }\n  }, [])\n\n  // Sync local state with value prop\n  useUpdateEffect(() => {\n    setValues(value)\n  }, [...value])\n\n  const selectionRectangle = `rect(0, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px, 2px, ${remapValue(\n    values[0],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  const maxRectangle = `rect(0, ${maxWidth}px, ${RANGE_HANDLE_SIZE}px, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  return (\n    <Track {...rest}>\n      <Selection style={{ clip: selectionRectangle }} />\n\n      <Slider\n        ref={minRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMinChange}\n        value={values[0]}\n        aria-label={ariaLabels?.[0]}\n      />\n\n      <Slider\n        ref={maxRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMaxChange}\n        value={values[1]}\n        style={{ clip: maxRectangle }}\n        aria-label={ariaLabels?.[1]}\n      />\n    </Track>\n  )\n}\n\nconst Track = styled(Flex)`\n  align-items: center;\n  position: relative;\n  height: ${RANGE_HANDLE_SIZE}px;\n\n  &:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    height: 2px;\n    left: 0;\n    right: 0;\n    top: 50%;\n    margin-top: -1px;\n    background-color: ${themeGet(\"colors.mono30\")};\n  }\n`\n\nconst Selection = styled(Box)`\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  top: 50%;\n  margin-top: -1px;\n  background-color: ${themeGet(\"colors.brand\")};\n`\n\nconst railStyles = css`\n  width: 100%;\n  height: ${RANGE_HANDLE_SIZE}px;\n`\n\nconst handleStyles = css`\n  user-select: none;\n  cursor: grab;\n  width: ${RANGE_HANDLE_SIZE}px;\n  height: ${RANGE_HANDLE_SIZE}px;\n  background-color: ${themeGet(\"colors.mono0\")};\n  border-radius: 50%;\n  border: 1px solid ${themeGet(\"colors.mono10\")};\n  box-shadow: ${themeGet(\"effects.flatShadow\")};\n`\n\nconst Slider = styled.input`\n  appearance: none;\n  background: transparent;\n  position: relative;\n  margin: 0;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  &::-webkit-slider-runnable-track {\n    ${railStyles}\n  }\n\n  &::-moz-range-track {\n    ${railStyles}\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    ${handleStyles}\n  }\n\n  &::-moz-range-thumb {\n    ${handleStyles}\n  }\n\n  &:active {\n    &::-webkit-slider-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.mono5\")};\n    }\n\n    &::-moz-range-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.mono5\")};\n    }\n  }\n`\n\nSlider.defaultProps = {\n  type: \"range\",\n}\n"],"mappings":"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"}

package/dist/esm/elements/ResponsiveBox/ResponsiveBox.js

@@ -11,7 +11,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; }
 import { paddingBottom, scale } from "proportional-scale";
 import React from "react";
-import { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 
 /** ResponsiveBoxMaxDimensions */
 

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveBox.js","names":["paddingBottom","scale","React","Box","responsiveScale","args","maxWidth","width","aspectWidth","height","aspectHeight","rest","_objectWithoutProperties","_excluded","scaled","_objectSpread","concat","ResponsiveBox","_ref","children","_excluded2","createElement","_extends","position","overflow","style","aspectRatio","displayName"],"sources":["../../../../src/elements/ResponsiveBox/ResponsiveBox.tsx"],"sourcesContent":["import { paddingBottom, scale } from \"proportional-scale\"\nimport React from \"react\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** ResponsiveBoxMaxDimensions */\nexport type ResponsiveBoxMaxDimensions =\n  | {\n      maxWidth: number\n      maxHeight: number\n    }\n  | { maxWidth: number }\n  | { maxHeight: number }\n  | { maxWidth: \"100%\" }\n\nexport interface ResponsiveBoxAspectDimensions {\n  aspectWidth: number\n  aspectHeight: number\n}\n\nconst responsiveScale = (\n  args: ResponsiveBoxAspectDimensions & ResponsiveBoxMaxDimensions\n) => {\n  if (\"maxWidth\" in args && args.maxWidth === \"100%\") {\n    return {\n      maxWidth: \"100%\",\n      paddingBottom: paddingBottom({\n        width: args.aspectWidth,\n        height: args.aspectHeight,\n      }),\n    }\n  }\n\n  const { aspectWidth: width, aspectHeight: height, ...rest } = args\n  const scaled = scale({ width, height, ...rest })\n\n  return {\n    maxWidth: `${scaled.width}px`,\n    paddingBottom: scaled.paddingBottom,\n  }\n}\n\n/** ResponsiveBoxProps */\nexport type ResponsiveBoxProps = Omit<BoxProps, \"maxWidth\" | \"maxHeight\"> &\n  ResponsiveBoxAspectDimensions &\n  ResponsiveBoxMaxDimensions\n\n/** ResponsiveBox */\nexport const ResponsiveBox: React.FC<React.PropsWithChildren<ResponsiveBoxProps>> = ({\n  aspectWidth,\n  aspectHeight,\n  children,\n  ...rest\n}) => {\n  const scaled = responsiveScale({ aspectHeight, aspectWidth, ...rest })\n\n  return (\n    <Box\n      position=\"relative\"\n      width=\"100%\"\n      overflow=\"hidden\"\n      style={{\n        aspectRatio: `${aspectWidth} / ${aspectHeight}`,\n        maxWidth: scaled.maxWidth,\n      }}\n      {...rest}\n    >\n      {children}\n    </Box>\n  )\n}\n\nResponsiveBox.displayName = \"ResponsiveBox\"\n"],"mappings":";;;;;;;;;;;AAAA,SAASA,aAAa,EAAEC,KAAK,QAAQ,oBAAoB;AACzD,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG;;AAEZ;;AAeA,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CACnBC,IAAgE,EAC7D;EACH,IAAI,UAAU,IAAIA,IAAI,IAAIA,IAAI,CAACC,QAAQ,KAAK,MAAM,EAAE;IAClD,OAAO;MACLA,QAAQ,EAAE,MAAM;MAChBN,aAAa,EAAEA,aAAa,CAAC;QAC3BO,KAAK,EAAEF,IAAI,CAACG,WAAW;QACvBC,MAAM,EAAEJ,IAAI,CAACK;MACf,CAAC;IACH,CAAC;EACH;EAEA,IAAqBH,KAAK,GAAoCF,IAAI,CAA1DG,WAAW;IAAuBC,MAAM,GAAcJ,IAAI,CAAtCK,YAAY;IAAaC,IAAI,GAAAC,wBAAA,CAAKP,IAAI,EAAAQ,SAAA;EAClE,IAAMC,MAAM,GAAGb,KAAK,CAAAc,aAAA;IAAGR,KAAK,EAALA,KAAK;IAAEE,MAAM,EAANA;EAAM,GAAKE,IAAI,EAAG;EAEhD,OAAO;IACLL,QAAQ,KAAAU,MAAA,CAAKF,MAAM,CAACP,KAAK,OAAI;IAC7BP,aAAa,EAAEc,MAAM,CAACd;EACxB,CAAC;AACH,CAAC;;AAED;;AAKA;AACA,OAAO,IAAMiB,aAAoE,GAAG,SAAvEA,aAAoEA,CAAAC,IAAA,EAK3E;EAAA,IAJJV,WAAW,GAAAU,IAAA,CAAXV,WAAW;IACXE,YAAY,GAAAQ,IAAA,CAAZR,YAAY;IACZS,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACLR,IAAI,GAAAC,wBAAA,CAAAM,IAAA,EAAAE,UAAA;EAEP,IAAMN,MAAM,GAAGV,eAAe,CAAAW,aAAA;IAAGL,YAAY,EAAZA,YAAY;IAAEF,WAAW,EAAXA;EAAW,GAAKG,IAAI,EAAG;EAEtE,oBACET,KAAA,CAAAmB,aAAA,CAAClB,GAAG,EAAAmB,QAAA;IACFC,QAAQ,EAAC,UAAU;IACnBhB,KAAK,EAAC,MAAM;IACZiB,QAAQ,EAAC,QAAQ;IACjBC,KAAK,EAAE;MACLC,WAAW,KAAAV,MAAA,CAAKR,WAAW,SAAAQ,MAAA,CAAMN,YAAY,CAAE;MAC/CJ,QAAQ,EAAEQ,MAAM,CAACR;IACnB;EAAE,GACEK,IAAI,GAEPQ,QAAQ,CACL;AAEV,CAAC;AAtBYF,aAAoE,CAAAU,WAAA;AAwBjFV,aAAa,CAACU,WAAW,GAAG,eAAe"}
+{"version":3,"file":"ResponsiveBox.js","names":["paddingBottom","scale","React","Box","BoxProps","responsiveScale","args","maxWidth","width","aspectWidth","height","aspectHeight","rest","_objectWithoutProperties","_excluded","scaled","_objectSpread","concat","ResponsiveBox","_ref","children","_excluded2","createElement","_extends","position","overflow","style","aspectRatio","displayName"],"sources":["../../../../src/elements/ResponsiveBox/ResponsiveBox.tsx"],"sourcesContent":["import { paddingBottom, scale } from \"proportional-scale\"\nimport React from \"react\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** ResponsiveBoxMaxDimensions */\nexport type ResponsiveBoxMaxDimensions =\n  | {\n      maxWidth: number\n      maxHeight: number\n    }\n  | { maxWidth: number }\n  | { maxHeight: number }\n  | { maxWidth: \"100%\" }\n\nexport interface ResponsiveBoxAspectDimensions {\n  aspectWidth: number\n  aspectHeight: number\n}\n\nconst responsiveScale = (\n  args: ResponsiveBoxAspectDimensions & ResponsiveBoxMaxDimensions\n) => {\n  if (\"maxWidth\" in args && args.maxWidth === \"100%\") {\n    return {\n      maxWidth: \"100%\",\n      paddingBottom: paddingBottom({\n        width: args.aspectWidth,\n        height: args.aspectHeight,\n      }),\n    }\n  }\n\n  const { aspectWidth: width, aspectHeight: height, ...rest } = args\n  const scaled = scale({ width, height, ...rest })\n\n  return {\n    maxWidth: `${scaled.width}px`,\n    paddingBottom: scaled.paddingBottom,\n  }\n}\n\n/** ResponsiveBoxProps */\nexport type ResponsiveBoxProps = Omit<BoxProps, \"maxWidth\" | \"maxHeight\"> &\n  ResponsiveBoxAspectDimensions &\n  ResponsiveBoxMaxDimensions\n\n/** ResponsiveBox */\nexport const ResponsiveBox: React.FC<React.PropsWithChildren<ResponsiveBoxProps>> = ({\n  aspectWidth,\n  aspectHeight,\n  children,\n  ...rest\n}) => {\n  const scaled = responsiveScale({ aspectHeight, aspectWidth, ...rest })\n\n  return (\n    <Box\n      position=\"relative\"\n      width=\"100%\"\n      overflow=\"hidden\"\n      style={{\n        aspectRatio: `${aspectWidth} / ${aspectHeight}`,\n        maxWidth: scaled.maxWidth,\n      }}\n      {...rest}\n    >\n      {children}\n    </Box>\n  )\n}\n\nResponsiveBox.displayName = \"ResponsiveBox\"\n"],"mappings":";;;;;;;;;;;AAAA,SAASA,aAAa,EAAEC,KAAK,QAAQ,oBAAoB;AACzD,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,EAAEC,QAAQ;;AAEtB;;AAeA,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CACnBC,IAAgE,EAC7D;EACH,IAAI,UAAU,IAAIA,IAAI,IAAIA,IAAI,CAACC,QAAQ,KAAK,MAAM,EAAE;IAClD,OAAO;MACLA,QAAQ,EAAE,MAAM;MAChBP,aAAa,EAAEA,aAAa,CAAC;QAC3BQ,KAAK,EAAEF,IAAI,CAACG,WAAW;QACvBC,MAAM,EAAEJ,IAAI,CAACK;MACf,CAAC;IACH,CAAC;EACH;EAEA,IAAqBH,KAAK,GAAoCF,IAAI,CAA1DG,WAAW;IAAuBC,MAAM,GAAcJ,IAAI,CAAtCK,YAAY;IAAaC,IAAI,GAAAC,wBAAA,CAAKP,IAAI,EAAAQ,SAAA;EAClE,IAAMC,MAAM,GAAGd,KAAK,CAAAe,aAAA;IAAGR,KAAK,EAALA,KAAK;IAAEE,MAAM,EAANA;EAAM,GAAKE,IAAI,EAAG;EAEhD,OAAO;IACLL,QAAQ,KAAAU,MAAA,CAAKF,MAAM,CAACP,KAAK,OAAI;IAC7BR,aAAa,EAAEe,MAAM,CAACf;EACxB,CAAC;AACH,CAAC;;AAED;;AAKA;AACA,OAAO,IAAMkB,aAAoE,GAAG,SAAvEA,aAAoEA,CAAAC,IAAA,EAK3E;EAAA,IAJJV,WAAW,GAAAU,IAAA,CAAXV,WAAW;IACXE,YAAY,GAAAQ,IAAA,CAAZR,YAAY;IACZS,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACLR,IAAI,GAAAC,wBAAA,CAAAM,IAAA,EAAAE,UAAA;EAEP,IAAMN,MAAM,GAAGV,eAAe,CAAAW,aAAA;IAAGL,YAAY,EAAZA,YAAY;IAAEF,WAAW,EAAXA;EAAW,GAAKG,IAAI,EAAG;EAEtE,oBACEV,KAAA,CAAAoB,aAAA,CAACnB,GAAG,EAAAoB,QAAA;IACFC,QAAQ,EAAC,UAAU;IACnBhB,KAAK,EAAC,MAAM;IACZiB,QAAQ,EAAC,QAAQ;IACjBC,KAAK,EAAE;MACLC,WAAW,KAAAV,MAAA,CAAKR,WAAW,SAAAQ,MAAA,CAAMN,YAAY,CAAE;MAC/CJ,QAAQ,EAAEQ,MAAM,CAACR;IACnB;EAAE,GACEK,IAAI,GAEPQ,QAAQ,CACL;AAEV,CAAC;AAtBYF,aAAoE,CAAAU,WAAA;AAwBjFV,aAAa,CAACU,WAAW,GAAG,eAAe"}

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

@@ -10,7 +10,7 @@ import styled from "styled-components";
 import { Box } from "../Box";
 import { Text } from "../Text";
 import { Image } from "../Image";
-import { ResponsiveBox } from "./ResponsiveBox";
+import { ResponsiveBox, ResponsiveBoxAspectDimensions, ResponsiveBoxMaxDimensions, ResponsiveBoxProps } from "./ResponsiveBox";
 import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
 var Measure = function Measure(props) {
   var _useState = useState({

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveBox.story.js","names":["React","useEffect","useRef","useState","styled","Box","Text","Image","ResponsiveBox","STORYBOOK_PROPS_BLOCKLIST","Measure","props","_useState","width","height","_useState2","_slicedToArray","dimensions","setDimensions","ref","check","current","offsetWidth","offsetHeight","requestAnimationFrame","window","addEventListener","removeEventListener","createElement","p","variant","color","aspectWidth","aspectHeight","Fragment","maxHeight","maxWidth","join","displayName","EXAMPLE_ASPECTS","EXAMPLE_MAXIMUMS","component","title","tags","parameters","docs","description","controls","exclude","Basic","render","map","aspect","i","maximum","j","_extends","key","bg","my","story","MaxWidth100","Masonry","withConfig","componentId","ColumnsWithResponsiveImages","Array","fill","_","orientation","mb","lazyLoad","src","concat","srcSet"],"sources":["../../../../src/elements/ResponsiveBox/ResponsiveBox.story.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Image } from \"../Image\"\nimport {\n  ResponsiveBox,\n  ResponsiveBoxAspectDimensions,\n  ResponsiveBoxMaxDimensions,\n  ResponsiveBoxProps,\n} from \"./ResponsiveBox\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst Measure: React.FC<React.PropsWithChildren<ResponsiveBoxProps>> = (\n  props\n) => {\n  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n\n  const ref = useRef<null | HTMLDivElement>(null)\n\n  const check = () => {\n    if (!ref.current) return\n    setDimensions({\n      width: ref.current!.offsetWidth,\n      height: ref.current!.offsetHeight,\n    })\n  }\n\n  useEffect(() => {\n    requestAnimationFrame(check)\n    window.addEventListener(\"resize\", check)\n    return () => {\n      window.removeEventListener(\"resize\", check)\n    }\n  })\n\n  return (\n    <Box width=\"100%\" height=\"100%\" p={1} ref={ref as any}>\n      <Text variant=\"xs\" color=\"mono0\">\n        {props.aspectWidth}:{props.aspectHeight}\n        <br />\n        {(\"maxWidth\" in props || \"maxHeight\" in props) && (\n          <>\n            with max dimensions of{\" \"}\n            {[\n              (props as any).maxHeight || 0,\n              (props as any).maxWidth || \"_\",\n            ].join(\" × \")}\n            <br />\n          </>\n        )}\n        Renders @ {dimensions.width} × {dimensions.height}\n      </Text>\n    </Box>\n  )\n}\n\nconst EXAMPLE_ASPECTS: ResponsiveBoxAspectDimensions[] = [\n  { aspectWidth: 300, aspectHeight: 400 },\n  { aspectWidth: 400, aspectHeight: 300 },\n]\n\nconst EXAMPLE_MAXIMUMS: ResponsiveBoxMaxDimensions[] = [\n  { maxHeight: 200, maxWidth: 200 },\n  { maxHeight: 400, maxWidth: 400 },\n  { maxHeight: 400 },\n  { maxWidth: 400 },\n  { maxHeight: 600, maxWidth: 600 },\n  { maxHeight: 100, maxWidth: 600 },\n  { maxHeight: 1024, maxWidth: 1024 },\n]\n\nexport default {\n  component: ResponsiveBox,\n  title: \"Components/ResponsiveBox\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A responsive container that maintains aspect ratio and optionally constrains maximum dimensions.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Basic = {\n  render: () => (\n    <>\n      {EXAMPLE_ASPECTS.map((aspect, i) =>\n        EXAMPLE_MAXIMUMS.map((maximum, j) => {\n          return (\n            <ResponsiveBox\n              key={[i, j].join(\".\")}\n              {...aspect}\n              {...maximum}\n              bg=\"brand\"\n              my={2}\n            >\n              <Measure {...aspect} {...maximum} />\n            </ResponsiveBox>\n          )\n        })\n      )}\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Basic responsive boxes with various aspect ratios and maximum dimensions.\",\n      },\n    },\n  },\n}\n\nexport const MaxWidth100 = {\n  render: () => (\n    <>\n      {EXAMPLE_ASPECTS.map((aspect, i) => {\n        return (\n          <ResponsiveBox key={i} {...aspect} maxWidth=\"100%\" bg=\"brand\" my={2}>\n            <Measure {...aspect} maxWidth=\"100%\" />\n          </ResponsiveBox>\n        )\n      })}\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Responsive boxes constrained to 100% maximum width.\",\n      },\n    },\n  },\n}\n\nconst Masonry = styled(Box)`\n  column-count: 3;\n\n  * {\n    break-inside: avoid;\n  }\n`\n\nexport const ColumnsWithResponsiveImages = {\n  render: () => (\n    <Masonry>\n      {new Array(12).fill(0).map((_, i) => {\n        const orientation = i % 3 === 0 ? \"portrait\" : \"landscape\"\n        const width = orientation === \"portrait\" ? 200 : 300\n        const height = orientation === \"portrait\" ? 300 : 200\n\n        return (\n          // Simply being wrapped in an extra `Box` causes a image loading bug in Chrome\n          <Box key={i}>\n            <ResponsiveBox\n              aspectWidth={width}\n              aspectHeight={height}\n              maxWidth=\"100%\"\n              bg=\"mono10\"\n              mb={2}\n            >\n              <Image\n                lazyLoad\n                width=\"100%\"\n                height=\"100%\"\n                src={`https://picsum.photos/seed/${i}/${width}/${height}`}\n                srcSet={`https://picsum.photos/seed/${i}/${width}/${height} 1x, https://picsum.photos/seed/${i}/${\n                  width * 2\n                }/${height * 2} 2x`}\n              />\n            </ResponsiveBox>\n          </Box>\n        )\n      })}\n    </Masonry>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Responsive images in a masonry layout with different orientations.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"ResponsiveBox.story.js","names":["React","useEffect","useRef","useState","styled","Box","Text","Image","ResponsiveBox","ResponsiveBoxAspectDimensions","ResponsiveBoxMaxDimensions","ResponsiveBoxProps","STORYBOOK_PROPS_BLOCKLIST","Measure","props","_useState","width","height","_useState2","_slicedToArray","dimensions","setDimensions","ref","check","current","offsetWidth","offsetHeight","requestAnimationFrame","window","addEventListener","removeEventListener","createElement","p","variant","color","aspectWidth","aspectHeight","Fragment","maxHeight","maxWidth","join","displayName","EXAMPLE_ASPECTS","EXAMPLE_MAXIMUMS","component","title","tags","parameters","docs","description","controls","exclude","Basic","render","map","aspect","i","maximum","j","_extends","key","bg","my","story","MaxWidth100","Masonry","withConfig","componentId","ColumnsWithResponsiveImages","Array","fill","_","orientation","mb","lazyLoad","src","concat","srcSet"],"sources":["../../../../src/elements/ResponsiveBox/ResponsiveBox.story.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Image } from \"../Image\"\nimport {\n  ResponsiveBox,\n  ResponsiveBoxAspectDimensions,\n  ResponsiveBoxMaxDimensions,\n  ResponsiveBoxProps,\n} from \"./ResponsiveBox\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst Measure: React.FC<React.PropsWithChildren<ResponsiveBoxProps>> = (\n  props\n) => {\n  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n\n  const ref = useRef<null | HTMLDivElement>(null)\n\n  const check = () => {\n    if (!ref.current) return\n    setDimensions({\n      width: ref.current!.offsetWidth,\n      height: ref.current!.offsetHeight,\n    })\n  }\n\n  useEffect(() => {\n    requestAnimationFrame(check)\n    window.addEventListener(\"resize\", check)\n    return () => {\n      window.removeEventListener(\"resize\", check)\n    }\n  })\n\n  return (\n    <Box width=\"100%\" height=\"100%\" p={1} ref={ref as any}>\n      <Text variant=\"xs\" color=\"mono0\">\n        {props.aspectWidth}:{props.aspectHeight}\n        <br />\n        {(\"maxWidth\" in props || \"maxHeight\" in props) && (\n          <>\n            with max dimensions of{\" \"}\n            {[\n              (props as any).maxHeight || 0,\n              (props as any).maxWidth || \"_\",\n            ].join(\" × \")}\n            <br />\n          </>\n        )}\n        Renders @ {dimensions.width} × {dimensions.height}\n      </Text>\n    </Box>\n  )\n}\n\nconst EXAMPLE_ASPECTS: ResponsiveBoxAspectDimensions[] = [\n  { aspectWidth: 300, aspectHeight: 400 },\n  { aspectWidth: 400, aspectHeight: 300 },\n]\n\nconst EXAMPLE_MAXIMUMS: ResponsiveBoxMaxDimensions[] = [\n  { maxHeight: 200, maxWidth: 200 },\n  { maxHeight: 400, maxWidth: 400 },\n  { maxHeight: 400 },\n  { maxWidth: 400 },\n  { maxHeight: 600, maxWidth: 600 },\n  { maxHeight: 100, maxWidth: 600 },\n  { maxHeight: 1024, maxWidth: 1024 },\n]\n\nexport default {\n  component: ResponsiveBox,\n  title: \"Components/ResponsiveBox\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A responsive container that maintains aspect ratio and optionally constrains maximum dimensions.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Basic = {\n  render: () => (\n    <>\n      {EXAMPLE_ASPECTS.map((aspect, i) =>\n        EXAMPLE_MAXIMUMS.map((maximum, j) => {\n          return (\n            <ResponsiveBox\n              key={[i, j].join(\".\")}\n              {...aspect}\n              {...maximum}\n              bg=\"brand\"\n              my={2}\n            >\n              <Measure {...aspect} {...maximum} />\n            </ResponsiveBox>\n          )\n        })\n      )}\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Basic responsive boxes with various aspect ratios and maximum dimensions.\",\n      },\n    },\n  },\n}\n\nexport const MaxWidth100 = {\n  render: () => (\n    <>\n      {EXAMPLE_ASPECTS.map((aspect, i) => {\n        return (\n          <ResponsiveBox key={i} {...aspect} maxWidth=\"100%\" bg=\"brand\" my={2}>\n            <Measure {...aspect} maxWidth=\"100%\" />\n          </ResponsiveBox>\n        )\n      })}\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Responsive boxes constrained to 100% maximum width.\",\n      },\n    },\n  },\n}\n\nconst Masonry = styled(Box)`\n  column-count: 3;\n\n  * {\n    break-inside: avoid;\n  }\n`\n\nexport const ColumnsWithResponsiveImages = {\n  render: () => (\n    <Masonry>\n      {new Array(12).fill(0).map((_, i) => {\n        const orientation = i % 3 === 0 ? \"portrait\" : \"landscape\"\n        const width = orientation === \"portrait\" ? 200 : 300\n        const height = orientation === \"portrait\" ? 300 : 200\n\n        return (\n          // Simply being wrapped in an extra `Box` causes a image loading bug in Chrome\n          <Box key={i}>\n            <ResponsiveBox\n              aspectWidth={width}\n              aspectHeight={height}\n              maxWidth=\"100%\"\n              bg=\"mono10\"\n              mb={2}\n            >\n              <Image\n                lazyLoad\n                width=\"100%\"\n                height=\"100%\"\n                src={`https://picsum.photos/seed/${i}/${width}/${height}`}\n                srcSet={`https://picsum.photos/seed/${i}/${width}/${height} 1x, https://picsum.photos/seed/${i}/${\n                  width * 2\n                }/${height * 2} 2x`}\n              />\n            </ResponsiveBox>\n          </Box>\n        )\n      })}\n    </Masonry>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"Responsive images in a masonry layout with different orientations.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/Select/Select.js

@@ -10,10 +10,10 @@ 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; }
 import { themeGet } from "@styled-system/theme-get";
 import React, { forwardRef, useState } from "react";
-import styled, { css } from "styled-components";
+import styled, { css, ExecutionContext } from "styled-components";
 import { FORM_ELEMENT_TRANSITION } from "../../helpers";
 import { RequiredField } from "../../shared/RequiredField";
-import { Box, splitBoxProps } from "../Box";
+import { Box, BoxProps, splitBoxProps } from "../Box";
 import { Text } from "../Text";
 import { Tooltip } from "../Tooltip";
 import { SELECT_STATES } from "./tokens";

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["themeGet","React","forwardRef","useState","styled","css","FORM_ELEMENT_TRANSITION","RequiredField","Box","splitBoxProps","Text","Tooltip","SELECT_STATES","Select","_ref","ref","description","disabled","error","focus","hover","id","name","options","required","selected","title","onSelect","onChange","value","rest","_objectWithoutProperties","_excluded","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","selectProps","_useState","_useState2","selectedOption","setSelectedOption","_useState3","_useState4","isFocused","setIsFocused","_useState5","_useState6","isHovered","setIsHovered","createElement","_extends","width","pointer","content","placement","variant","color","textAlign","Container","mt","onMouseEnter","onMouseLeave","onFocus","onBlur","optionSelected","event","target","map","_ref2","text","key","StyledLabel","htmlFor","ml","displayName","resetMixin","caretMixin","_ref3","withConfig","componentId","props","default","completed","label"],"sources":["../../../../src/elements/Select/Select.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, useState } from \"react\"\nimport styled, { css, ExecutionContext } from \"styled-components\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\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.SelectHTMLAttributes<HTMLSelectElement>, \"onSelect\" | \"size\"> {\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  onSelect?: (value: string) => void\n}\n\n/** A drop-down select menu */\nexport const Select = forwardRef<HTMLElement, SelectProps>(\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      onSelect,\n      onChange,\n      value,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, selectProps] = splitBoxProps(rest)\n    // due to :has not available in Firefox yet, we need to add the styles to the label using JS\n    const [selectedOption, setSelectedOption] = useState(selected || value)\n    const [isFocused, setIsFocused] = useState(false)\n    const [isHovered, setIsHovered] = useState(false)\n\n    return (\n      <Box width=\"100%\" {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Container\n          mt={!!title && !description ? 1 : 0}\n          disabled={!!disabled}\n          hover={!!hover || isHovered}\n          error={error!}\n          focus={!!focus || isFocused}\n          title={title}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          optionSelected={!!selectedOption}\n        >\n          <select\n            ref={ref as any}\n            id={id}\n            disabled={disabled}\n            name={name}\n            value={selected || value}\n            onChange={(event) => {\n              onSelect && onSelect(event.target.value)\n              onChange && onChange(event)\n              setSelectedOption(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\n          {!!title && (\n            <StyledLabel htmlFor={id}>\n              {title}\n\n              <span />\n            </StyledLabel>\n          )}\n        </Container>\n\n        {required && !(error && typeof error === \"string\") && (\n          <RequiredField mt={0.5} ml={1} disabled={disabled} />\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} ml={1} 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\ninterface CaretProps extends ExecutionContext {\n  disabled?: boolean\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 }: CaretProps) => {\n        return disabled ? themeGet(\"colors.mono10\") : themeGet(\"colors.mono100\")\n      }};\n  }\n`\n\ntype ContainerProps = Required<\n  Pick<SelectProps, \"disabled\" | \"error\" | \"hover\" | \"focus\">\n  // adding optionSelected here to use it locally without adding it to the Select's props\n> & { optionSelected: boolean }\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: 1px solid;\n    border-radius: 3px;\n    border-color: ${themeGet(\"colors.mono30\")};\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        &:not(:focus):not(:has(option[value=\"\"]:checked)) {\n          ${!(props.disabled || props.focus) && SELECT_STATES.completed}\n          ${props.error && SELECT_STATES.error}\n        }\n\n        &:not(:focus) {\n          // Firefox polyfill for :has\n          ${!!props.optionSelected &&\n          css`\n            ${!(props.disabled || props.focus) && SELECT_STATES.completed}\n            ${props.error && SELECT_STATES.error}\n          `}\n        }\n\n        &:not(:focus):has(option[value=\"\"]:checked) {\n          ${props.title &&\n          css`\n            color: transparent;\n          `}\n        }\n\n        &:not(:focus) {\n          // Firefox polyfill for :has\n          ${props.title &&\n          !props.optionSelected &&\n          css`\n            color: transparent;\n          `}\n        }\n      `\n    }};\n  }\n\n  ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, font-size, transform;\n  background-color: transparent;\n  font-family: ${themeGet(\"fonts.sans\")};\n\n  & > span {\n    background-color: ${themeGet(\"colors.mono0\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["themeGet","React","forwardRef","useState","styled","css","ExecutionContext","FORM_ELEMENT_TRANSITION","RequiredField","Box","BoxProps","splitBoxProps","Text","Tooltip","SELECT_STATES","Select","_ref","ref","description","disabled","error","focus","hover","id","name","options","required","selected","title","onSelect","onChange","value","rest","_objectWithoutProperties","_excluded","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","selectProps","_useState","_useState2","selectedOption","setSelectedOption","_useState3","_useState4","isFocused","setIsFocused","_useState5","_useState6","isHovered","setIsHovered","createElement","_extends","width","pointer","content","placement","variant","color","textAlign","Container","mt","onMouseEnter","onMouseLeave","onFocus","onBlur","optionSelected","event","target","map","_ref2","text","key","StyledLabel","htmlFor","ml","displayName","resetMixin","caretMixin","_ref3","withConfig","componentId","props","default","completed","label"],"sources":["../../../../src/elements/Select/Select.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, useState } from \"react\"\nimport styled, { css, ExecutionContext } from \"styled-components\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\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.SelectHTMLAttributes<HTMLSelectElement>, \"onSelect\" | \"size\"> {\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  onSelect?: (value: string) => void\n}\n\n/** A drop-down select menu */\nexport const Select = forwardRef<HTMLElement, SelectProps>(\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      onSelect,\n      onChange,\n      value,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, selectProps] = splitBoxProps(rest)\n    // due to :has not available in Firefox yet, we need to add the styles to the label using JS\n    const [selectedOption, setSelectedOption] = useState(selected || value)\n    const [isFocused, setIsFocused] = useState(false)\n    const [isHovered, setIsHovered] = useState(false)\n\n    return (\n      <Box width=\"100%\" {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Container\n          mt={!!title && !description ? 1 : 0}\n          disabled={!!disabled}\n          hover={!!hover || isHovered}\n          error={error!}\n          focus={!!focus || isFocused}\n          title={title}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          optionSelected={!!selectedOption}\n        >\n          <select\n            ref={ref as any}\n            id={id}\n            disabled={disabled}\n            name={name}\n            value={selected || value}\n            onChange={(event) => {\n              onSelect && onSelect(event.target.value)\n              onChange && onChange(event)\n              setSelectedOption(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\n          {!!title && (\n            <StyledLabel htmlFor={id}>\n              {title}\n\n              <span />\n            </StyledLabel>\n          )}\n        </Container>\n\n        {required && !(error && typeof error === \"string\") && (\n          <RequiredField mt={0.5} ml={1} disabled={disabled} />\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} ml={1} 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\ninterface CaretProps extends ExecutionContext {\n  disabled?: boolean\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 }: CaretProps) => {\n        return disabled ? themeGet(\"colors.mono10\") : themeGet(\"colors.mono100\")\n      }};\n  }\n`\n\ntype ContainerProps = Required<\n  Pick<SelectProps, \"disabled\" | \"error\" | \"hover\" | \"focus\">\n  // adding optionSelected here to use it locally without adding it to the Select's props\n> & { optionSelected: boolean }\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: 1px solid;\n    border-radius: 3px;\n    border-color: ${themeGet(\"colors.mono30\")};\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        &:not(:focus):not(:has(option[value=\"\"]:checked)) {\n          ${!(props.disabled || props.focus) && SELECT_STATES.completed}\n          ${props.error && SELECT_STATES.error}\n        }\n\n        &:not(:focus) {\n          // Firefox polyfill for :has\n          ${!!props.optionSelected &&\n          css`\n            ${!(props.disabled || props.focus) && SELECT_STATES.completed}\n            ${props.error && SELECT_STATES.error}\n          `}\n        }\n\n        &:not(:focus):has(option[value=\"\"]:checked) {\n          ${props.title &&\n          css`\n            color: transparent;\n          `}\n        }\n\n        &:not(:focus) {\n          // Firefox polyfill for :has\n          ${props.title &&\n          !props.optionSelected &&\n          css`\n            color: transparent;\n          `}\n        }\n      `\n    }};\n  }\n\n  ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  pointer-events: none;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, font-size, transform;\n  background-color: transparent;\n  font-family: ${themeGet(\"fonts.sans\")};\n\n  & > span {\n    background-color: ${themeGet(\"colors.mono0\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n`\n"],"mappings":";;;;;;;;;;AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,QAAQ,QAAQ,OAAO;AACnD,OAAOC,MAAM,IAAIC,GAAG,EAAEC,gBAAgB,QAAQ,mBAAmB;AACjE,SAASC,uBAAuB;AAChC,SAASC,aAAa;AACtB,SAASC,GAAG,EAAEC,QAAQ,EAAEC,aAAa;AACrC,SAASC,IAAI;AACb,SAASC,OAAO;AAChB,SAASC,aAAa;AAuBtB;AACA,OAAO,IAAMC,MAAM,gBAAGb,UAAU,CAC9B,UAAAc,IAAA,EAkBEC,GAAG,EACA;EAAA,IAjBDC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IACXC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,KAAK,GAAAL,IAAA,CAALK,KAAK;IACLC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,EAAE,GAAAP,IAAA,CAAFO,EAAE;IACFC,IAAI,GAAAR,IAAA,CAAJQ,IAAI;IACJC,OAAO,GAAAT,IAAA,CAAPS,OAAO;IACPC,QAAQ,GAAAV,IAAA,CAARU,QAAQ;IACRC,QAAQ,GAAAX,IAAA,CAARW,QAAQ;IACRC,KAAK,GAAAZ,IAAA,CAALY,KAAK;IACLC,QAAQ,GAAAb,IAAA,CAARa,QAAQ;IACRC,SAAQ,GAAAd,IAAA,CAARc,QAAQ;IACRC,KAAK,GAAAf,IAAA,CAALe,KAAK;IACFC,IAAI,GAAAC,wBAAA,CAAAjB,IAAA,EAAAkB,SAAA;EAIT,IAAAC,cAAA,GAAgCxB,aAAa,CAACqB,IAAI,CAAC;IAAAI,eAAA,GAAAC,cAAA,CAAAF,cAAA;IAA5CG,QAAQ,GAAAF,eAAA;IAAEG,WAAW,GAAAH,eAAA;EAC5B;EACA,IAAAI,SAAA,GAA4CrC,QAAQ,CAACwB,QAAQ,IAAII,KAAK,CAAC;IAAAU,UAAA,GAAAJ,cAAA,CAAAG,SAAA;IAAhEE,cAAc,GAAAD,UAAA;IAAEE,iBAAiB,GAAAF,UAAA;EACxC,IAAAG,UAAA,GAAkCzC,QAAQ,CAAC,KAAK,CAAC;IAAA0C,UAAA,GAAAR,cAAA,CAAAO,UAAA;IAA1CE,SAAS,GAAAD,UAAA;IAAEE,YAAY,GAAAF,UAAA;EAC9B,IAAAG,UAAA,GAAkC7C,QAAQ,CAAC,KAAK,CAAC;IAAA8C,UAAA,GAAAZ,cAAA,CAAAW,UAAA;IAA1CE,SAAS,GAAAD,UAAA;IAAEE,YAAY,GAAAF,UAAA;EAE9B,oBACEhD,KAAA,CAAAmD,aAAA,CAAC3C,GAAG,EAAA4C,QAAA;IAACC,KAAK,EAAC;EAAM,GAAKhB,QAAQ,GAC3B,CAAC,CAACpB,WAAW,iBACZjB,KAAA,CAAAmD,aAAA,CAACvC,OAAO;IAAC0C,OAAO;IAACC,OAAO,EAAEtC,WAAY;IAACuC,SAAS,EAAC;EAAS,gBACxDxD,KAAA,CAAAmD,aAAA,CAACxC,IAAI;IAAC8C,OAAO,EAAC,IAAI;IAACC,KAAK,EAAC,QAAQ;IAACC,SAAS,EAAC;EAAO,gBACjD3D,KAAA,CAAAmD,aAAA,YAAG,eAAa,CAAI,CACf,CAEV,eAEDnD,KAAA,CAAAmD,aAAA,CAACS,SAAS;IACRC,EAAE,EAAE,CAAC,CAAClC,KAAK,IAAI,CAACV,WAAW,GAAG,CAAC,GAAG,CAAE;IACpCC,QAAQ,EAAE,CAAC,CAACA,QAAS;IACrBG,KAAK,EAAE,CAAC,CAACA,KAAK,IAAI4B,SAAU;IAC5B9B,KAAK,EAAEA,KAAO;IACdC,KAAK,EAAE,CAAC,CAACA,KAAK,IAAIyB,SAAU;IAC5BlB,KAAK,EAAEA,KAAM;IACbmC,YAAY,EAAE,SAAdA,YAAYA,CAAA;MAAA,OAAQZ,YAAY,CAAC,IAAI,CAAC;IAAA,CAAC;IACvCa,YAAY,EAAE,SAAdA,YAAYA,CAAA;MAAA,OAAQb,YAAY,CAAC,KAAK,CAAC;IAAA,CAAC;IACxCc,OAAO,EAAE,SAATA,OAAOA,CAAA;MAAA,OAAQlB,YAAY,CAAC,IAAI,CAAC;IAAA,CAAC;IAClCmB,MAAM,EAAE,SAARA,MAAMA,CAAA;MAAA,OAAQnB,YAAY,CAAC,KAAK,CAAC;IAAA,CAAC;IAClCoB,cAAc,EAAE,CAAC,CAACzB;EAAe,gBAEjCzC,KAAA,CAAAmD,aAAA,WAAAC,QAAA;IACEpC,GAAG,EAAEA,GAAW;IAChBM,EAAE,EAAEA,EAAG;IACPJ,QAAQ,EAAEA,QAAS;IACnBK,IAAI,EAAEA,IAAK;IACXO,KAAK,EAAEJ,QAAQ,IAAII,KAAM;IACzBD,QAAQ,EAAE,SAAVA,QAAQA,CAAGsC,KAAK,EAAK;MACnBvC,QAAQ,IAAIA,QAAQ,CAACuC,KAAK,CAACC,MAAM,CAACtC,KAAK,CAAC;MACxCD,SAAQ,IAAIA,SAAQ,CAACsC,KAAK,CAAC;MAC3BzB,iBAAiB,CAACyB,KAAK,CAACC,MAAM,CAACtC,KAAK,CAAC;IACvC;EAAE,GACEQ,WAAW,GAEdd,OAAO,CAAC6C,GAAG,CAAC,UAAAC,KAAA,EAAqB;IAAA,IAAlBxC,KAAK,GAAAwC,KAAA,CAALxC,KAAK;MAAEyC,IAAI,GAAAD,KAAA,CAAJC,IAAI;IACzB,oBACEvE,KAAA,CAAAmD,aAAA;MAAQrB,KAAK,EAAEA,KAAM;MAAC0C,GAAG,EAAE1C;IAAM,GAC9ByC,IAAI,CACE;EAEb,CAAC,CAAC,CACK,EAER,CAAC,CAAC5C,KAAK,iBACN3B,KAAA,CAAAmD,aAAA,CAACsB,WAAW;IAACC,OAAO,EAAEpD;EAAG,GACtBK,KAAK,eAEN3B,KAAA,CAAAmD,aAAA,cAAQ,CAEX,CACS,EAEX1B,QAAQ,IAAI,EAAEN,KAAK,IAAI,OAAOA,KAAK,KAAK,QAAQ,CAAC,iBAChDnB,KAAA,CAAAmD,aAAA,CAAC5C,aAAa;IAACsD,EAAE,EAAE,GAAI;IAACc,EAAE,EAAE,CAAE;IAACzD,QAAQ,EAAEA;EAAS,EACnD,EAEAC,KAAK,IAAI,OAAOA,KAAK,KAAK,QAAQ,iBACjCnB,KAAA,CAAAmD,aAAA,CAACxC,IAAI;IAAC8C,OAAO,EAAC,IAAI;IAACI,EAAE,EAAE,GAAI;IAACc,EAAE,EAAE,CAAE;IAACjB,KAAK,EAAC;EAAQ,GAC9CvC,KAAK,CAET,CACG;AAEV,CAAC,CACF;AAEDL,MAAM,CAAC8D,WAAW,GAAG,QAAQ;AAE7B,IAAMC,UAAU,GAAGzE,GAAG,gNAiBrB;AAMD;AACA,OAAO,IAAM0E,UAAU,GAAG1E,GAAG,iPAShBL,QAAQ,CAAC,SAAS,CAAC,EAKxB,UAAAgF,KAAA,EAA8B;EAAA,IAA3B7D,QAAQ,GAAA6D,KAAA,CAAR7D,QAAQ;EACX,OAAOA,QAAQ,GAAGnB,QAAQ,CAAC,eAAe,CAAC,GAAGA,QAAQ,CAAC,gBAAgB,CAAC;AAC1E,CAAC,CAEN;AAOD,IAAM6D,SAAS,GAAGzD,MAAM,CAACK,GAAG,CAAC,CAAAwE,UAAA;EAAAJ,WAAA;EAAAK,WAAA;AAAA,mQAKvBJ,UAAU,EAGQ9E,QAAQ,CAAC,SAAS,CAAC,EACxBA,QAAQ,CAAC,YAAY,CAAC,EAGrBA,QAAQ,CAAC,eAAe,CAAC,EAKvC,UAACmF,KAAK,EAAK;EACX,OAAO9E,GAAG,gPACNS,aAAa,CAACsE,OAAO,EAErBD,KAAK,CAAC7D,KAAK,IAAIR,aAAa,CAACQ,KAAK,EAClC6D,KAAK,CAAC9D,KAAK,IAAIP,aAAa,CAACO,KAAK,EAClC8D,KAAK,CAAChE,QAAQ,IAAIL,aAAa,CAACK,QAAQ,EACxCgE,KAAK,CAAC/D,KAAK,IAAIN,aAAa,CAACM,KAAK,EAGhCN,aAAa,CAACQ,KAAK,EAInBR,aAAa,CAACO,KAAK,EAKnBP,aAAa,CAACK,QAAQ,EAItB,EAAEgE,KAAK,CAAChE,QAAQ,IAAIgE,KAAK,CAAC9D,KAAK,CAAC,IAAIP,aAAa,CAACuE,SAAS,EAC3DF,KAAK,CAAC/D,KAAK,IAAIN,aAAa,CAACM,KAAK,EAKlC,CAAC,CAAC+D,KAAK,CAAChB,cAAc,IACxB9D,GAAG,gBACC,EAAE8E,KAAK,CAAChE,QAAQ,IAAIgE,KAAK,CAAC9D,KAAK,CAAC,IAAIP,aAAa,CAACuE,SAAS,EAC3DF,KAAK,CAAC/D,KAAK,IAAIN,aAAa,CAACM,KAAK,CACrC,EAIC+D,KAAK,CAACvD,KAAK,IACbvB,GAAG,wBAEF,EAKC8E,KAAK,CAACvD,KAAK,IACb,CAACuD,KAAK,CAAChB,cAAc,IACrB9D,GAAG,wBAEF;AAGP,CAAC,EAGD0E,UAAU,CACb;AAED,IAAML,WAAW,GAAGtE,MAAM,CAACkF,KAAK,CAAAL,UAAA;EAAAJ,WAAA;EAAAK,WAAA;AAAA,yYAOhB3E,uBAAuB,EAGtBP,QAAQ,CAAC,YAAY,CAAC,EAGfA,QAAQ,CAAC,cAAc,CAAC,EAQ9BO,uBAAuB,CAIxC"}

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

@@ -1,5 +1,6 @@
 import { themeGet } from "@styled-system/theme-get";
-import { css } from "styled-components";
+import { css, ExecutionContext } from "styled-components";
+import { State } from "./types";
 export var SELECT_STATES = {
   default: css(["height:50px;font-size:", ";color:", ";border-color:", ";+ label{color:", ";font-size:", ";}&:not(:has(option[value=\"\"]:checked)) + label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}", ""], themeGet("textVariants.sm-display.fontSize"), themeGet("colors.mono100"), themeGet("colors.mono30"), themeGet("colors.mono60"), themeGet("textVariants.sm-display.fontSize"), themeGet("textVariants.xs.fontSize"), function (_ref) {
     var optionSelected = _ref.optionSelected;

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

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["themeGet","css","SELECT_STATES","default","_ref","optionSelected","focus","_ref2","hover","_ref3","disabled","completed","_ref4","_ref5","error"],"sources":["../../../../src/elements/Select/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, ExecutionContext } from \"styled-components\"\nimport { State } from \"./types\"\n\ninterface SelectProps extends ExecutionContext {\n  optionSelected?: boolean\n  disabled?: boolean\n}\n\nexport const SELECT_STATES: Record<State, any> = {\n  default: css`\n    height: 50px;\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:has(option[value=\"\"]:checked) + label {\n      text-decoration: underline;\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      !optionSelected &&\n      css`\n        + label {\n          text-decoration: underline;\n        }\n      `}\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    &:has(option[value=\"\"]:checked):not(:disabled) + label {\n      color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected, disabled }: SelectProps) =>\n      !optionSelected &&\n      !disabled &&\n      css`\n        + label {\n          color: ${themeGet(\"colors.blue100\")};\n          text-decoration: underline;\n        }\n      `}\n  `,\n  completed: css`\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.mono30\")};\n      text-decoration: none;\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  error: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.red100\")};\n\n    + label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAA0B,mBAAmB;AAQzD,OAAO,IAAMC,aAAiC,GAAG;EAC/CC,OAAO,EAAEF,GAAG,+NAEGD,QAAQ,CAAC,kCAAkC,CAAC,EAChDA,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,EAK5CA,QAAQ,CAAC,0BAA0B,CAAC,EASjD,UAAAI,IAAA;IAAA,IAAGC,cAAc,GAAAD,IAAA,CAAdC,cAAc;IAAA,OACjBA,cAAc,IACdJ,GAAG,wFAGcD,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDM,KAAK,EAAEL,GAAG,mOACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAI/BA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,EAajD,UAAAO,KAAA;IAAA,IAAGF,cAAc,GAAAE,KAAA,CAAdF,cAAc;IAAA,OACjB,CAACA,cAAc,IACfJ,GAAG,yCAIF;EAAA,EACJ;EACDO,KAAK,EAAEP,GAAG,qLACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,gBAAgB,CAAC,EAKnC,UAAAS,KAAA;IAAA,IAAGJ,cAAc,GAAAI,KAAA,CAAdJ,cAAc;MAAEK,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAA,OAC3B,CAACL,cAAc,IACf,CAACK,QAAQ,IACTT,GAAG,qDAEUD,QAAQ,CAAC,gBAAgB,CAAC,CAGtC;EAAA,EACJ;EACDW,SAAS,EAAEV,GAAG,+LACID,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAKrBA,QAAQ,CAAC,0BAA0B,CAAC,EASjD,UAAAY,KAAA;IAAA,IAAGP,cAAc,GAAAO,KAAA,CAAdP,cAAc;IAAA,OACjBA,cAAc,IACdJ,GAAG,wFAGcD,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDU,QAAQ,EAAET,GAAG,+NACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAMrBA,QAAQ,CAAC,0BAA0B,CAAC,EASjD,UAAAa,KAAA;IAAA,IAAGR,cAAc,GAAAQ,KAAA,CAAdR,cAAc;IAAA,OACjBA,cAAc,IACdJ,GAAG,wFAGcD,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDc,KAAK,EAAEb,GAAG,wDACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC;AAGxC,CAAC"}
+{"version":3,"file":"tokens.js","names":["themeGet","css","ExecutionContext","State","SELECT_STATES","default","_ref","optionSelected","focus","_ref2","hover","_ref3","disabled","completed","_ref4","_ref5","error"],"sources":["../../../../src/elements/Select/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, ExecutionContext } from \"styled-components\"\nimport { State } from \"./types\"\n\ninterface SelectProps extends ExecutionContext {\n  optionSelected?: boolean\n  disabled?: boolean\n}\n\nexport const SELECT_STATES: Record<State, any> = {\n  default: css`\n    height: 50px;\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:has(option[value=\"\"]:checked) + label {\n      text-decoration: underline;\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      !optionSelected &&\n      css`\n        + label {\n          text-decoration: underline;\n        }\n      `}\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    &:has(option[value=\"\"]:checked):not(:disabled) + label {\n      color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected, disabled }: SelectProps) =>\n      !optionSelected &&\n      !disabled &&\n      css`\n        + label {\n          color: ${themeGet(\"colors.blue100\")};\n          text-decoration: underline;\n        }\n      `}\n  `,\n  completed: css`\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.mono30\")};\n      text-decoration: none;\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  error: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.red100\")};\n\n    + label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,EAAEC,gBAAgB,QAAQ,mBAAmB;AACzD,SAASC,KAAK;AAOd,OAAO,IAAMC,aAAiC,GAAG;EAC/CC,OAAO,EAAEJ,GAAG,+NAEGD,QAAQ,CAAC,kCAAkC,CAAC,EAChDA,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,EAK5CA,QAAQ,CAAC,0BAA0B,CAAC,EASjD,UAAAM,IAAA;IAAA,IAAGC,cAAc,GAAAD,IAAA,CAAdC,cAAc;IAAA,OACjBA,cAAc,IACdN,GAAG,wFAGcD,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDQ,KAAK,EAAEP,GAAG,mOACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAI/BA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,EAajD,UAAAS,KAAA;IAAA,IAAGF,cAAc,GAAAE,KAAA,CAAdF,cAAc;IAAA,OACjB,CAACA,cAAc,IACfN,GAAG,yCAIF;EAAA,EACJ;EACDS,KAAK,EAAET,GAAG,qLACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,gBAAgB,CAAC,EAKnC,UAAAW,KAAA;IAAA,IAAGJ,cAAc,GAAAI,KAAA,CAAdJ,cAAc;MAAEK,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAA,OAC3B,CAACL,cAAc,IACf,CAACK,QAAQ,IACTX,GAAG,qDAEUD,QAAQ,CAAC,gBAAgB,CAAC,CAGtC;EAAA,EACJ;EACDa,SAAS,EAAEZ,GAAG,+LACID,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAKrBA,QAAQ,CAAC,0BAA0B,CAAC,EASjD,UAAAc,KAAA;IAAA,IAAGP,cAAc,GAAAO,KAAA,CAAdP,cAAc;IAAA,OACjBA,cAAc,IACdN,GAAG,wFAGcD,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDY,QAAQ,EAAEX,GAAG,+NACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAMrBA,QAAQ,CAAC,0BAA0B,CAAC,EASjD,UAAAe,KAAA;IAAA,IAAGR,cAAc,GAAAQ,KAAA,CAAdR,cAAc;IAAA,OACjBA,cAAc,IACdN,GAAG,wFAGcD,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDgB,KAAK,EAAEf,GAAG,wDACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC;AAGxC,CAAC"}

package/dist/esm/elements/SelectInput/SelectInput.js

@@ -15,12 +15,13 @@ import styled, { css } from "styled-components";
 import { height as systemHeight } from "styled-system";
 import { useContainsFocus, usePosition, useWidthOf } from "../../utils";
 import { Box, splitBoxProps } from "../Box";
-import { Text } from "../Text";
+import { InputProps } from "../Input";
+import { Text, TextProps } from "../Text";
 import { SELECT_INPUT_STATES } from "./tokens";
 import { RequiredField } from "../../shared/RequiredField";
-import { SelectInputList } from "./SelectInputList";
+import { Option, SelectInputList } from "./SelectInputList";
 import { caretMixin } from "../Select";
-import { Clickable } from "../Clickable";
+import { Clickable, ClickableProps } from "../Clickable";
 export var SelectInput = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var className = _ref.className,
     enableSearch = _ref.enableSearch,