@artsy/palette 22.1.0 → 23.0.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Radio/Radio.tsx"],"names":["Radio","children","disabled","hover","focus","error","label","selected","value","onSelect","rest","tokens","v2","titleVariant","descriptionVariant","v3","handleClick","handleKeyPress","event","key","preventDefault","title","description","undefined","Container","Flex","props","states","radio","V2_RADIO_STATES","dot","V2_RADIO_DOT_STATES","V3_RADIO_STATES","V3_RADIO_DOT_STATES","css","default","resting"],"mappings":"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","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Flex, FlexProps } from \"../../elements/Flex\"\nimport { isText } from \"../../helpers/isText\"\nimport { getThemeConfig, useThemeConfig } from \"../../Theme\"\nimport { Text } from \"../Text\"\nimport { RadioDot } from \"./RadioDot\"\nimport {\n  RADIO_DOT_STATES as V2_RADIO_DOT_STATES,\n  RADIO_STATES as V2_RADIO_STATES,\n} from \"./tokens/v2\"\nimport {\n  RADIO_DOT_STATES as V3_RADIO_DOT_STATES,\n  RADIO_STATES as V3_RADIO_STATES,\n} from \"./tokens/v3\"\n\nexport interface RadioProps\n  extends FlexProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable interactions */\n  disabled?: boolean\n  /** Select the button on render. If the Radio is inside a RadioGroup, use RadioGroup.defaultValue instead. */\n  selected?: boolean\n  /** Show an error indicator */\n  error?: boolean\n  /** Show hover state on render */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Value of radio button */\n  value?: string\n  /** Name of the radio button */\n  name?: string\n  /** The label content, if not specified the children will be used  */\n  label?: React.ReactNode\n  /** Callback when selected */\n  onSelect?: (selected: { selected: boolean; value: string }) => void\n}\n\n/** A Radio button */\nexport const Radio: React.FC<RadioProps> = ({\n  children,\n  disabled,\n  hover,\n  focus,\n  error,\n  label,\n  selected,\n  value,\n  onSelect,\n  ...rest\n}) => {\n  const tokens = useThemeConfig({\n    v2: {\n      titleVariant: \"text\" as TextVariant,\n      descriptionVariant: \"small\" as TextVariant,\n    },\n    v3: {\n      titleVariant: \"sm-display\" as TextVariant,\n      descriptionVariant: \"xs\" as TextVariant,\n    },\n  })\n\n  const handleClick = () => {\n    onSelect && onSelect({ selected: !selected, value: value! })\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \") {\n      event.preventDefault()\n      onSelect && onSelect({ selected: !selected, value: value! })\n    }\n  }\n\n  // TODO: Re-name props to match <Input />\n  const title = label ? label : children\n  const description = label ? children : null\n\n  return (\n    <Container\n      as=\"label\"\n      alignItems=\"center\"\n      role=\"radio\"\n      aria-checked={selected}\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      disabled={disabled}\n      hover={hover}\n      focus={focus}\n      selected={selected}\n      error={error}\n      {...rest}\n    >\n      <RadioDot\n        disabled={disabled}\n        hover={hover}\n        focus={focus}\n        selected={selected}\n        error={error}\n        mr={1}\n      />\n\n      <Flex flexDirection=\"column\" flex={1}>\n        <Flex alignItems=\"center\" flex={1}>\n          {isText(title) ? (\n            <Text\n              variant={tokens.titleVariant}\n              lineHeight={description ? undefined : 1}\n            >\n              {title}\n            </Text>\n          ) : (\n            title\n          )}\n        </Flex>\n\n        {isText(description) ? (\n          <Text variant={tokens.descriptionVariant} color=\"black60\">\n            {description}\n          </Text>\n        ) : (\n          description\n        )}\n      </Flex>\n    </Container>\n  )\n}\n\nconst Container = styled(Flex)<{\n  disabled?: boolean\n  error?: boolean\n  hover?: boolean\n  focus?: boolean\n  selected?: boolean\n}>`\n  ${(props) => {\n    const states = getThemeConfig(props, {\n      v2: { radio: V2_RADIO_STATES, dot: V2_RADIO_DOT_STATES },\n      v3: { radio: V3_RADIO_STATES, dot: V3_RADIO_DOT_STATES },\n    })\n\n    return css`\n      ${props.selected ? states.radio.selected : states.radio.default}\n      ${props.focus && states.radio.focus}\n      ${props.hover && states.radio.hover}\n      ${props.disabled && states.radio.disabled}\n      ${props.error && states.radio.error}\n\n      &:hover {\n        ${!props.error &&\n        !props.disabled &&\n        css`\n          ${states.radio.hover}\n\n          // Radio\n          > div:first-of-type {\n            ${props.selected\n              ? states.dot.hover.selected\n              : states.dot.hover.resting}\n          }\n        `}\n      }\n\n      &:focus {\n        ${states.radio.focus}\n\n        // Radio\n        > div:first-of-type {\n          ${props.selected\n            ? states.dot.focus.selected\n            : states.dot.focus.resting}\n        }\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${states.radio.disabled}\n      }\n    `\n  }}\n`\n"],"file":"Radio.js"}
+{"version":3,"sources":["../../../src/elements/Radio/Radio.tsx"],"names":["Radio","children","disabled","hover","focus","error","label","selected","value","onSelect","rest","handleClick","handleKeyPress","event","key","preventDefault","title","description","undefined","Container","Flex","props","css","RADIO_STATES","default","RADIO_DOT_STATES","resting"],"mappings":"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","sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Flex, FlexProps } from \"../../elements/Flex\"\nimport { isText } from \"../../helpers/isText\"\nimport { Text } from \"../Text\"\nimport { RadioDot } from \"./RadioDot\"\nimport { RADIO_DOT_STATES, RADIO_STATES } from \"./tokens\"\n\nexport interface RadioProps\n  extends FlexProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable interactions */\n  disabled?: boolean\n  /** Select the button on render. If the Radio is inside a RadioGroup, use RadioGroup.defaultValue instead. */\n  selected?: boolean\n  /** Show an error indicator */\n  error?: boolean\n  /** Show hover state on render */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Value of radio button */\n  value?: string\n  /** Name of the radio button */\n  name?: string\n  /** The label content, if not specified the children will be used  */\n  label?: React.ReactNode\n  /** Callback when selected */\n  onSelect?: (selected: { selected: boolean; value: string }) => void\n}\n\n/** A Radio button */\nexport const Radio: React.FC<RadioProps> = ({\n  children,\n  disabled,\n  hover,\n  focus,\n  error,\n  label,\n  selected,\n  value,\n  onSelect,\n  ...rest\n}) => {\n  const handleClick = () => {\n    onSelect && onSelect({ selected: !selected, value: value! })\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \") {\n      event.preventDefault()\n      onSelect && onSelect({ selected: !selected, value: value! })\n    }\n  }\n\n  // TODO: Re-name props to match <Input />\n  const title = label ? label : children\n  const description = label ? children : null\n\n  return (\n    <Container\n      as=\"label\"\n      alignItems=\"center\"\n      role=\"radio\"\n      aria-checked={selected}\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      disabled={disabled}\n      hover={hover}\n      focus={focus}\n      selected={selected}\n      error={error}\n      {...rest}\n    >\n      <RadioDot\n        disabled={disabled}\n        hover={hover}\n        focus={focus}\n        selected={selected}\n        error={error}\n        mr={1}\n      />\n\n      <Flex flexDirection=\"column\" flex={1}>\n        <Flex alignItems=\"center\" flex={1}>\n          {isText(title) ? (\n            <Text variant=\"sm-display\" lineHeight={description ? undefined : 1}>\n              {title}\n            </Text>\n          ) : (\n            title\n          )}\n        </Flex>\n\n        {isText(description) ? (\n          <Text variant=\"xs\" color=\"black60\">\n            {description}\n          </Text>\n        ) : (\n          description\n        )}\n      </Flex>\n    </Container>\n  )\n}\n\nconst Container = styled(Flex)<{\n  disabled?: boolean\n  error?: boolean\n  hover?: boolean\n  focus?: boolean\n  selected?: boolean\n}>`\n  ${(props) => {\n    return css`\n      ${props.selected ? RADIO_STATES.selected : RADIO_STATES.default}\n      ${props.focus && RADIO_STATES.focus}\n      ${props.hover && RADIO_STATES.hover}\n      ${props.disabled && RADIO_STATES.disabled}\n      ${props.error && RADIO_STATES.error}\n\n      &:hover {\n        ${!props.error &&\n        !props.disabled &&\n        css`\n          ${RADIO_STATES.hover}\n\n          // Radio\n          > div:first-of-type {\n            ${props.selected\n              ? RADIO_DOT_STATES.hover.selected\n              : RADIO_DOT_STATES.hover.resting}\n          }\n        `}\n      }\n\n      &:focus {\n        ${RADIO_STATES.focus}\n\n        // Radio\n        > div:first-of-type {\n          ${props.selected\n            ? RADIO_DOT_STATES.focus.selected\n            : RADIO_DOT_STATES.focus.resting}\n        }\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${RADIO_STATES.disabled}\n      }\n    `\n  }}\n`\n"],"file":"Radio.js"}

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

@@ -51,7 +51,7 @@ var Default = function Default() {
       children: "This is my description"
     }, {
       label: /*#__PURE__*/_react.default.createElement(_Text.Text, {
-        variant: "small",
+        variant: "xs",
         color: "blue100"
       }, "Small Custom Label")
     }, {

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

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

package/dist/elements/Radio/RadioDot.js

@@ -7,13 +7,9 @@ exports.RadioDot = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Theme = require("../../Theme");
-
 var _Box = require("../Box");
 
-var _v = require("./tokens/v2");
-
-var _v2 = require("./tokens/v3");
+var _tokens = require("./tokens");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -21,27 +17,22 @@ var RadioDot = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "RadioDot",
   componentId: "sc-1m6kyb-0"
 })(["width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color 0.25s,border-color 0.25s,color 0.25s;", ";&::after{content:\"\";display:block;width:12px;height:12px;border-radius:50%;transition:background-color 0.25s;background-color:currentColor;}"], function (props) {
-  var modes = (0, _Theme.getThemeConfig)(props, {
-    v2: _v.RADIO_DOT_STATES,
-    v3: _v2.RADIO_DOT_STATES
-  });
-
   var mode = function () {
     switch (true) {
       case props.disabled:
-        return modes.disabled;
+        return _tokens.RADIO_DOT_STATES.disabled;
 
       case props.hover:
-        return modes.hover;
+        return _tokens.RADIO_DOT_STATES.hover;
 
       case props.focus:
-        return modes.focus;
+        return _tokens.RADIO_DOT_STATES.focus;
 
       case props.error:
-        return modes.error;
+        return _tokens.RADIO_DOT_STATES.error;
 
       default:
-        return modes.default;
+        return _tokens.RADIO_DOT_STATES.default;
     }
   }();
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Radio/RadioDot.tsx"],"names":["RadioDot","Box","props","modes","v2","V2_RADIO_DOT_STATES","v3","V3_RADIO_DOT_STATES","mode","disabled","hover","focus","error","default","selected","resting"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAUO,IAAMA,QAAQ,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,2UAUjB,UAACC,KAAD,EAAW;AACX,MAAMC,KAAK,GAAG,2BAAeD,KAAf,EAAsB;AAClCE,IAAAA,EAAE,EAAEC,mBAD8B;AAElCC,IAAAA,EAAE,EAAEC;AAF8B,GAAtB,CAAd;;AAKA,MAAMC,IAAI,GAAI,YAAM;AAClB,YAAQ,IAAR;AACE,WAAKN,KAAK,CAACO,QAAX;AACE,eAAON,KAAK,CAACM,QAAb;;AACF,WAAKP,KAAK,CAACQ,KAAX;AACE,eAAOP,KAAK,CAACO,KAAb;;AACF,WAAKR,KAAK,CAACS,KAAX;AACE,eAAOR,KAAK,CAACQ,KAAb;;AACF,WAAKT,KAAK,CAACU,KAAX;AACE,eAAOT,KAAK,CAACS,KAAb;;AACF;AACE,eAAOT,KAAK,CAACU,OAAb;AAVJ;AAYD,GAbY,EAAb;;AAeA,SAAOX,KAAK,CAACY,QAAN,GAAiBN,IAAI,CAACM,QAAtB,GAAiCN,IAAI,CAACO,OAA7C;AACD,CAhCkB,CAAd","sourcesContent":["import styled from \"styled-components\"\nimport { getThemeConfig } from \"../../Theme\"\nimport { Box } from \"../Box\"\nimport { RADIO_DOT_STATES as V2_RADIO_DOT_STATES } from \"./tokens/v2\"\nimport { RADIO_DOT_STATES as V3_RADIO_DOT_STATES } from \"./tokens/v3\"\n\nexport interface CheckProps {\n  disabled?: boolean\n  error?: boolean\n  hover?: boolean\n  focus?: boolean\n  selected?: boolean\n}\n\nexport const RadioDot = styled(Box)<CheckProps>`\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: background-color 0.25s, border-color 0.25s, color 0.25s;\n\n  ${(props) => {\n    const modes = getThemeConfig(props, {\n      v2: V2_RADIO_DOT_STATES,\n      v3: V3_RADIO_DOT_STATES,\n    })\n\n    const mode = (() => {\n      switch (true) {\n        case props.disabled:\n          return modes.disabled\n        case props.hover:\n          return modes.hover\n        case props.focus:\n          return modes.focus\n        case props.error:\n          return modes.error\n        default:\n          return modes.default\n      }\n    })()\n\n    return props.selected ? mode.selected : mode.resting\n  }};\n\n  /* Dot  */\n  &::after {\n    content: \"\";\n    display: block;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    transition: background-color 0.25s;\n    background-color: currentColor;\n  }\n`\n"],"file":"RadioDot.js"}
+{"version":3,"sources":["../../../src/elements/Radio/RadioDot.tsx"],"names":["RadioDot","Box","props","mode","disabled","RADIO_DOT_STATES","hover","focus","error","default","selected","resting"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAUO,IAAMA,QAAQ,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,2UAUjB,UAACC,KAAD,EAAW;AACX,MAAMC,IAAI,GAAI,YAAM;AAClB,YAAQ,IAAR;AACE,WAAKD,KAAK,CAACE,QAAX;AACE,eAAOC,yBAAiBD,QAAxB;;AACF,WAAKF,KAAK,CAACI,KAAX;AACE,eAAOD,yBAAiBC,KAAxB;;AACF,WAAKJ,KAAK,CAACK,KAAX;AACE,eAAOF,yBAAiBE,KAAxB;;AACF,WAAKL,KAAK,CAACM,KAAX;AACE,eAAOH,yBAAiBG,KAAxB;;AACF;AACE,eAAOH,yBAAiBI,OAAxB;AAVJ;AAYD,GAbY,EAAb;;AAeA,SAAOP,KAAK,CAACQ,QAAN,GAAiBP,IAAI,CAACO,QAAtB,GAAiCP,IAAI,CAACQ,OAA7C;AACD,CA3BkB,CAAd","sourcesContent":["import styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { RADIO_DOT_STATES } from \"./tokens\"\n\nexport interface CheckProps {\n  disabled?: boolean\n  error?: boolean\n  hover?: boolean\n  focus?: boolean\n  selected?: boolean\n}\n\nexport const RadioDot = styled(Box)<CheckProps>`\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: background-color 0.25s, border-color 0.25s, color 0.25s;\n\n  ${(props) => {\n    const mode = (() => {\n      switch (true) {\n        case props.disabled:\n          return RADIO_DOT_STATES.disabled\n        case props.hover:\n          return RADIO_DOT_STATES.hover\n        case props.focus:\n          return RADIO_DOT_STATES.focus\n        case props.error:\n          return RADIO_DOT_STATES.error\n        default:\n          return RADIO_DOT_STATES.default\n      }\n    })()\n\n    return props.selected ? mode.selected : mode.resting\n  }};\n\n  /* Dot  */\n  &::after {\n    content: \"\";\n    display: block;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    transition: background-color 0.25s;\n    background-color: currentColor;\n  }\n`\n"],"file":"RadioDot.js"}

package/dist/elements/Radio/{tokens/v3.js → tokens.js}

@@ -41,4 +41,4 @@ var RADIO_STATES = {
   error: (0, _styledComponents.css)(["color:", ";"], (0, _themeGet.themeGet)("colors.red100"))
 };
 exports.RADIO_STATES = RADIO_STATES;
-//# sourceMappingURL=v3.js.map
+//# sourceMappingURL=tokens.js.map

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

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

package/dist/elements/ReadMore/ReadMore.js

@@ -52,7 +52,8 @@ var ReadMoreOrLessLink = function ReadMoreOrLessLink(_ref) {
     cursor: "pointer",
     textDecoration: "underline"
   }, rest), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "mediumText"
+    variant: "xs",
+    fontWeight: "bold"
   }, children)));
 };
 
@@ -79,6 +80,11 @@ var ReadMore = function ReadMore(_ref3) {
       onReadLessClicked = _ref3.onReadLessClicked,
       onReadMoreClicked = _ref3.onReadMoreClicked;
 
+  var _useState = (0, _react.useState)(!!isExpanded),
+      _useState2 = _slicedToArray(_useState, 2),
+      expanded = _useState2[0],
+      setExpanded = _useState2[1];
+
   if (typeof expandedHTML !== "string") {
     return null;
   }
@@ -87,11 +93,6 @@ var ReadMore = function ReadMore(_ref3) {
   var truncatedHTML = (0, _truncHtml.default)(expandedHTML, maxChars).html;
   var visible = charCount > maxChars;
 
-  var _useState = (0, _react.useState)(!!isExpanded),
-      _useState2 = _slicedToArray(_useState, 2),
-      expanded = _useState2[0],
-      setExpanded = _useState2[1];
-
   var handleClick = function handleClick() {
     if (disabled) return;
     setExpanded(function (expandedState) {

package/dist/elements/ReadMore/ReadMore.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ReadMore/ReadMore.tsx"],"names":["ReadMoreOrLessLink","children","rest","displayName","Container","styled","div","isExpanded","HTML_TAG_REGEX","ReadMore","expandedHTML","content","disabled","maxChars","Infinity","onReadLessClicked","onReadMoreClicked","charCount","replace","length","truncatedHTML","html","visible","expanded","setExpanded","handleClick","expandedState","__html"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,kBAA4C,GAAG,SAA/CA,kBAA+C,OAG/C;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,sBACE,4DACG,GADH,eAEE,6BAAC,oBAAD;AACE,qBAAc,OADhB;AAEE,IAAA,MAAM,EAAC,SAFT;AAGE,IAAA,cAAc,EAAC;AAHjB,KAIMA,IAJN,gBAME,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAA4BD,QAA5B,CANF,CAFF,CADF;AAaD,CAjBD;;AAmBAD,kBAAkB,CAACG,WAAnB,GAAiC,oBAAjC;;AAEA,IAAMC,SAAS,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,oFAIA;AAAA,MAAGC,UAAH,SAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,OAAH,GAAa,QAA5C;AAAA,CAJA,CAAf;;AAYAH,SAAS,CAACD,WAAV,GAAwB,WAAxB;AAEA,IAAMK,cAAc,GAAG,eAAvB;;AAWA;AACO,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,QAO3C;AAAA,MANKC,YAML,SANJC,OAMI;AAAA,MALJC,QAKI,SALJA,QAKI;AAAA,MAJJL,UAII,SAJJA,UAII;AAAA,6BAHJM,QAGI;AAAA,MAHJA,QAGI,+BAHOC,QAGP;AAAA,MAFJC,iBAEI,SAFJA,iBAEI;AAAA,MADJC,iBACI,SADJA,iBACI;;AACJ,MAAI,OAAON,YAAP,KAAwB,QAA5B,EAAsC;AACpC,WAAO,IAAP;AACD;;AACD,MAAMO,SAAS,GAAGP,YAAY,CAACQ,OAAb,CAAqBV,cAArB,EAAqC,EAArC,EAAyCW,MAA3D;AAEA,MAAMC,aAAa,GAAG,wBAASV,YAAT,EAAuBG,QAAvB,EAAiCQ,IAAvD;AAEA,MAAMC,OAAO,GAAGL,SAAS,GAAGJ,QAA5B;;AACA,kBAAgC,qBAAS,CAAC,CAACN,UAAX,CAAhC;AAAA;AAAA,MAAOgB,QAAP;AAAA,MAAiBC,WAAjB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIb,QAAJ,EAAc;AACdY,IAAAA,WAAW,CAAC,UAACE,aAAD;AAAA,aAAmB,CAACA,aAApB;AAAA,KAAD,CAAX;AAEAH,IAAAA,QAAQ,GACJR,iBAAiB,IAAIA,iBAAiB,EADlC,GAEJC,iBAAiB,IAAIA,iBAAiB,EAF1C;AAGD,GAPD;;AASA,MAAI,CAACM,OAAL,EAAc;AACZ,wBACE;AACE,MAAA,uBAAuB,EAAE;AACvBK,QAAAA,MAAM,EAAEjB;AADe;AAD3B,MADF;AAOD;;AAED,sBACE,6BAAC,SAAD;AAAW,IAAA,OAAO,EAAEe,WAApB;AAAiC,IAAA,UAAU,EAAEF;AAA7C,kBACE;AACE,IAAA,uBAAuB,EAAE;AACvBI,MAAAA,MAAM,EAAEJ,QAAQ,GAAGb,YAAH,GAAkBU;AADX;AAD3B,IADF,eAOE,6BAAC,kBAAD,QACGG,QAAQ,GAAG,WAAH,GAAiB,WAD5B,CAPF,CADF;AAaD,CAlDM;;;AAAMd,Q","sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport truncate from \"trunc-html\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Text } from \"../Text\"\n\nconst ReadMoreOrLessLink: React.FC<ClickableProps> = ({\n  children,\n  ...rest\n}) => {\n  return (\n    <>\n      {\" \"}\n      <Clickable\n        aria-expanded=\"false\"\n        cursor=\"pointer\"\n        textDecoration=\"underline\"\n        {...rest}\n      >\n        <Text variant=\"mediumText\">{children}</Text>\n      </Clickable>\n    </>\n  )\n}\n\nReadMoreOrLessLink.displayName = \"ReadMoreOrLessLink\"\n\nconst Container = styled.div<{ isExpanded: boolean }>`\n  cursor: pointer;\n\n  > span {\n    display: ${({ isExpanded }) => (isExpanded ? \"block\" : \"inline\")};\n  }\n\n  > span > *:last-child {\n    display: inherit;\n  }\n`\n\nContainer.displayName = \"Container\"\n\nconst HTML_TAG_REGEX = /(<([^>]+)>)/gi\n\nexport interface ReadMoreProps {\n  content: string\n  disabled?: boolean\n  isExpanded?: boolean\n  maxChars?: number\n  onReadLessClicked?: () => void\n  onReadMoreClicked?: () => void\n}\n\n/** ReadMore */\nexport const ReadMore: React.FC<ReadMoreProps> = ({\n  content: expandedHTML,\n  disabled,\n  isExpanded,\n  maxChars = Infinity,\n  onReadLessClicked,\n  onReadMoreClicked,\n}) => {\n  if (typeof expandedHTML !== \"string\") {\n    return null\n  }\n  const charCount = expandedHTML.replace(HTML_TAG_REGEX, \"\").length\n\n  const truncatedHTML = truncate(expandedHTML, maxChars).html\n\n  const visible = charCount > maxChars\n  const [expanded, setExpanded] = useState(!!isExpanded)\n\n  const handleClick = () => {\n    if (disabled) return\n    setExpanded((expandedState) => !expandedState)\n\n    expanded\n      ? onReadLessClicked && onReadLessClicked()\n      : onReadMoreClicked && onReadMoreClicked()\n  }\n\n  if (!visible) {\n    return (\n      <span\n        dangerouslySetInnerHTML={{\n          __html: expandedHTML,\n        }}\n      />\n    )\n  }\n\n  return (\n    <Container onClick={handleClick} isExpanded={expanded}>\n      <span\n        dangerouslySetInnerHTML={{\n          __html: expanded ? expandedHTML : truncatedHTML,\n        }}\n      />\n\n      <ReadMoreOrLessLink>\n        {expanded ? \"Read less\" : \"Read more\"}\n      </ReadMoreOrLessLink>\n    </Container>\n  )\n}\n"],"file":"ReadMore.js"}
+{"version":3,"sources":["../../../src/elements/ReadMore/ReadMore.tsx"],"names":["ReadMoreOrLessLink","children","rest","displayName","Container","styled","div","isExpanded","HTML_TAG_REGEX","ReadMore","expandedHTML","content","disabled","maxChars","Infinity","onReadLessClicked","onReadMoreClicked","expanded","setExpanded","charCount","replace","length","truncatedHTML","html","visible","handleClick","expandedState","__html"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,kBAA4C,GAAG,SAA/CA,kBAA+C,OAG/C;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,sBACE,4DACG,GADH,eAEE,6BAAC,oBAAD;AACE,qBAAc,OADhB;AAEE,IAAA,MAAM,EAAC,SAFT;AAGE,IAAA,cAAc,EAAC;AAHjB,KAIMA,IAJN,gBAME,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,IAAd;AAAmB,IAAA,UAAU,EAAC;AAA9B,KACGD,QADH,CANF,CAFF,CADF;AAeD,CAnBD;;AAqBAD,kBAAkB,CAACG,WAAnB,GAAiC,oBAAjC;;AAEA,IAAMC,SAAS,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,oFAIA;AAAA,MAAGC,UAAH,SAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,OAAH,GAAa,QAA5C;AAAA,CAJA,CAAf;;AAYAH,SAAS,CAACD,WAAV,GAAwB,WAAxB;AAEA,IAAMK,cAAc,GAAG,eAAvB;;AAWA;AACO,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,QAO3C;AAAA,MANKC,YAML,SANJC,OAMI;AAAA,MALJC,QAKI,SALJA,QAKI;AAAA,MAJJL,UAII,SAJJA,UAII;AAAA,6BAHJM,QAGI;AAAA,MAHJA,QAGI,+BAHOC,QAGP;AAAA,MAFJC,iBAEI,SAFJA,iBAEI;AAAA,MADJC,iBACI,SADJA,iBACI;;AACJ,kBAAgC,qBAAS,CAAC,CAACT,UAAX,CAAhC;AAAA;AAAA,MAAOU,QAAP;AAAA,MAAiBC,WAAjB;;AAEA,MAAI,OAAOR,YAAP,KAAwB,QAA5B,EAAsC;AACpC,WAAO,IAAP;AACD;;AACD,MAAMS,SAAS,GAAGT,YAAY,CAACU,OAAb,CAAqBZ,cAArB,EAAqC,EAArC,EAAyCa,MAA3D;AAEA,MAAMC,aAAa,GAAG,wBAASZ,YAAT,EAAuBG,QAAvB,EAAiCU,IAAvD;AAEA,MAAMC,OAAO,GAAGL,SAAS,GAAGN,QAA5B;;AAEA,MAAMY,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIb,QAAJ,EAAc;AACdM,IAAAA,WAAW,CAAC,UAACQ,aAAD;AAAA,aAAmB,CAACA,aAApB;AAAA,KAAD,CAAX;AAEAT,IAAAA,QAAQ,GACJF,iBAAiB,IAAIA,iBAAiB,EADlC,GAEJC,iBAAiB,IAAIA,iBAAiB,EAF1C;AAGD,GAPD;;AASA,MAAI,CAACQ,OAAL,EAAc;AACZ,wBACE;AACE,MAAA,uBAAuB,EAAE;AACvBG,QAAAA,MAAM,EAAEjB;AADe;AAD3B,MADF;AAOD;;AAED,sBACE,6BAAC,SAAD;AAAW,IAAA,OAAO,EAAEe,WAApB;AAAiC,IAAA,UAAU,EAAER;AAA7C,kBACE;AACE,IAAA,uBAAuB,EAAE;AACvBU,MAAAA,MAAM,EAAEV,QAAQ,GAAGP,YAAH,GAAkBY;AADX;AAD3B,IADF,eAOE,6BAAC,kBAAD,QACGL,QAAQ,GAAG,WAAH,GAAiB,WAD5B,CAPF,CADF;AAaD,CAnDM;;;AAAMR,Q","sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport truncate from \"trunc-html\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Text } from \"../Text\"\n\nconst ReadMoreOrLessLink: React.FC<ClickableProps> = ({\n  children,\n  ...rest\n}) => {\n  return (\n    <>\n      {\" \"}\n      <Clickable\n        aria-expanded=\"false\"\n        cursor=\"pointer\"\n        textDecoration=\"underline\"\n        {...rest}\n      >\n        <Text variant=\"xs\" fontWeight=\"bold\">\n          {children}\n        </Text>\n      </Clickable>\n    </>\n  )\n}\n\nReadMoreOrLessLink.displayName = \"ReadMoreOrLessLink\"\n\nconst Container = styled.div<{ isExpanded: boolean }>`\n  cursor: pointer;\n\n  > span {\n    display: ${({ isExpanded }) => (isExpanded ? \"block\" : \"inline\")};\n  }\n\n  > span > *:last-child {\n    display: inherit;\n  }\n`\n\nContainer.displayName = \"Container\"\n\nconst HTML_TAG_REGEX = /(<([^>]+)>)/gi\n\nexport interface ReadMoreProps {\n  content: string\n  disabled?: boolean\n  isExpanded?: boolean\n  maxChars?: number\n  onReadLessClicked?: () => void\n  onReadMoreClicked?: () => void\n}\n\n/** ReadMore */\nexport const ReadMore: React.FC<ReadMoreProps> = ({\n  content: expandedHTML,\n  disabled,\n  isExpanded,\n  maxChars = Infinity,\n  onReadLessClicked,\n  onReadMoreClicked,\n}) => {\n  const [expanded, setExpanded] = useState(!!isExpanded)\n\n  if (typeof expandedHTML !== \"string\") {\n    return null\n  }\n  const charCount = expandedHTML.replace(HTML_TAG_REGEX, \"\").length\n\n  const truncatedHTML = truncate(expandedHTML, maxChars).html\n\n  const visible = charCount > maxChars\n\n  const handleClick = () => {\n    if (disabled) return\n    setExpanded((expandedState) => !expandedState)\n\n    expanded\n      ? onReadLessClicked && onReadLessClicked()\n      : onReadMoreClicked && onReadMoreClicked()\n  }\n\n  if (!visible) {\n    return (\n      <span\n        dangerouslySetInnerHTML={{\n          __html: expandedHTML,\n        }}\n      />\n    )\n  }\n\n  return (\n    <Container onClick={handleClick} isExpanded={expanded}>\n      <span\n        dangerouslySetInnerHTML={{\n          __html: expanded ? expandedHTML : truncatedHTML,\n        }}\n      />\n\n      <ReadMoreOrLessLink>\n        {expanded ? \"Read less\" : \"Read more\"}\n      </ReadMoreOrLessLink>\n    </Container>\n  )\n}\n"],"file":"ReadMore.js"}

package/dist/elements/ReadMore/ReadMore.story.js

@@ -85,7 +85,7 @@ WithCustomizableTypography.story = {
 
 var WithCustomizableTypography2 = function WithCustomizableTypography2() {
   return /*#__PURE__*/_react.default.createElement(_HTML.HTML, {
-    variant: "largeTitle"
+    variant: "lg"
   }, /*#__PURE__*/_react.default.createElement(_ReadMore.ReadMore, {
     maxChars: 300,
     content: "<p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate{\" \"}\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ReadMore/ReadMore.story.tsx"],"names":["title","WithCharacterCap","story","name","ShortContent","AsString","CharacterCapWithHtml","WithCustomizableTypography","WithCustomizableTypography2","CharacterCapWithHtmlDisabled"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AACpC,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF;AAcD,CAfM;;;AAAMA,gB;AAiBbA,gBAAgB,CAACC,KAAjB,GAAyB;AACvBC,EAAAA,IAAI,EAAE;AADiB,CAAzB;;AAIO,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AAChC,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF;AASD,CAVM;;;AAAMA,Y;AAYbA,YAAY,CAACF,KAAb,GAAqB;AACnBC,EAAAA,IAAI,EAAE;AADa,CAArB;;AAIO,IAAME,QAAQ,GAAG,SAAXA,QAAW,GAAM;AAC5B,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO,EAAC;AAFV,IADF;AAMD,CAPM;;;AAAMA,Q;AASbA,QAAQ,CAACH,KAAT,GAAiB;AACfC,EAAAA,IAAI,EAAE;AADS,CAAjB;;AAIO,IAAMG,oBAAoB,GAAG,SAAvBA,oBAAuB,GAAM;AACxC,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF;AA0BD,CA3BM;;;AAAMA,oB;AA6BbA,oBAAoB,CAACJ,KAArB,GAA6B;AAC3BC,EAAAA,IAAI,EAAE;AADqB,CAA7B;;AAIO,IAAMI,0BAA0B,GAAG,SAA7BA,0BAA6B,GAAM;AAC9C,sBACE,6BAAC,UAAD,qBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF,CADF;AA8BD,CA/BM;;;AAAMA,0B;AAiCbA,0BAA0B,CAACL,KAA3B,GAAmC;AACjCC,EAAAA,IAAI,EAAE;AAD2B,CAAnC;;AAIO,IAAMK,2BAA2B,GAAG,SAA9BA,2BAA8B,GAAM;AAC/C,sBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,kBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF,CADF;AA6BD,CA9BM;;;AAAMA,2B;AAgCbA,2BAA2B,CAACN,KAA5B,GAAoC;AAClCC,EAAAA,IAAI,EAAE;AAD4B,CAApC;;AAIO,IAAMM,4BAA4B,GAAG,SAA/BA,4BAA+B,GAAM;AAChD,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,MADV;AAEE,IAAA,QAAQ,EAAE,GAFZ;AAGE,IAAA,OAAO;AAHT,IADF;AAeD,CAhBM;;;AAAMA,4B;AAkBbA,4BAA4B,CAACP,KAA7B,GAAqC;AACnCC,EAAAA,IAAI,EAAE;AAD6B,CAArC","sourcesContent":["import React from \"react\"\nimport { HTML } from \"../HTML\"\nimport { ReadMore } from \"./ReadMore\"\n\nexport default {\n  title: \"Components/ReadMore\",\n}\n\nexport const WithCharacterCap = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n    />\n  )\n}\n\nWithCharacterCap.story = {\n  name: \"With character cap\",\n}\n\nexport const ShortContent = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>.\n        </div>`}\n    />\n  )\n}\n\nShortContent.story = {\n  name: \"Short content\",\n}\n\nexport const AsString = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content=\"Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa. Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa.\"\n    />\n  )\n}\n\nAsString.story = {\n  name: \"As string\",\n}\n\nexport const CharacterCapWithHtml = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<p>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa. Donald Judd, widely\n          regarded as one of the most significant American artists of the\n          post-war period, is perhaps best-known for the large-scale outdoor\n          installations and long, spacious interiors he designed in Marfa.\n        </p>\n        <hr />\n        <p>\n          <strong>Lorem ipsum dolor</strong> sit amet consectetur adipisicing\n          elit. Ducimus eligendi obcaecati voluptate{\" \"}\n          <em>molestias vero nobis voluptatum</em>, tenetur dolorum assumenda.\n        </p>\n        <p>\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n          eveniet aliquid laborum fugiat quibusdam id suscipit est temporibus\n          labore sint aliquam, laudantium tempore. Tenetur adipisci cumque\n          alias facilis animi. Illum.\n        </p>`}\n    />\n  )\n}\n\nCharacterCapWithHtml.story = {\n  name: \"Character cap with HTML\",\n}\n\nexport const WithCustomizableTypography = () => {\n  return (\n    <HTML>\n      <ReadMore\n        maxChars={300}\n        content={`\n            <p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate{\" \"}\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  )\n}\n\nWithCustomizableTypography.story = {\n  name: \"With customizable typography\",\n}\n\nexport const WithCustomizableTypography2 = () => {\n  return (\n    <HTML variant=\"largeTitle\">\n      <ReadMore\n        maxChars={300}\n        content={`<p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate{\" \"}\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  )\n}\n\nWithCustomizableTypography2.story = {\n  name: \"With customizable typography (2)\",\n}\n\nexport const CharacterCapWithHtmlDisabled = () => {\n  return (\n    <ReadMore\n      disabled\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n    />\n  )\n}\n\nCharacterCapWithHtmlDisabled.story = {\n  name: \"Character cap with html (disabled)\",\n}\n"],"file":"ReadMore.story.js"}
+{"version":3,"sources":["../../../src/elements/ReadMore/ReadMore.story.tsx"],"names":["title","WithCharacterCap","story","name","ShortContent","AsString","CharacterCapWithHtml","WithCustomizableTypography","WithCustomizableTypography2","CharacterCapWithHtmlDisabled"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AACpC,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF;AAcD,CAfM;;;AAAMA,gB;AAiBbA,gBAAgB,CAACC,KAAjB,GAAyB;AACvBC,EAAAA,IAAI,EAAE;AADiB,CAAzB;;AAIO,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AAChC,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF;AASD,CAVM;;;AAAMA,Y;AAYbA,YAAY,CAACF,KAAb,GAAqB;AACnBC,EAAAA,IAAI,EAAE;AADa,CAArB;;AAIO,IAAME,QAAQ,GAAG,SAAXA,QAAW,GAAM;AAC5B,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO,EAAC;AAFV,IADF;AAMD,CAPM;;;AAAMA,Q;AASbA,QAAQ,CAACH,KAAT,GAAiB;AACfC,EAAAA,IAAI,EAAE;AADS,CAAjB;;AAIO,IAAMG,oBAAoB,GAAG,SAAvBA,oBAAuB,GAAM;AACxC,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF;AA0BD,CA3BM;;;AAAMA,oB;AA6BbA,oBAAoB,CAACJ,KAArB,GAA6B;AAC3BC,EAAAA,IAAI,EAAE;AADqB,CAA7B;;AAIO,IAAMI,0BAA0B,GAAG,SAA7BA,0BAA6B,GAAM;AAC9C,sBACE,6BAAC,UAAD,qBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF,CADF;AA8BD,CA/BM;;;AAAMA,0B;AAiCbA,0BAA0B,CAACL,KAA3B,GAAmC;AACjCC,EAAAA,IAAI,EAAE;AAD2B,CAAnC;;AAIO,IAAMK,2BAA2B,GAAG,SAA9BA,2BAA8B,GAAM;AAC/C,sBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,kBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE,GADZ;AAEE,IAAA,OAAO;AAFT,IADF,CADF;AA6BD,CA9BM;;;AAAMA,2B;AAgCbA,2BAA2B,CAACN,KAA5B,GAAoC;AAClCC,EAAAA,IAAI,EAAE;AAD4B,CAApC;;AAIO,IAAMM,4BAA4B,GAAG,SAA/BA,4BAA+B,GAAM;AAChD,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,MADV;AAEE,IAAA,QAAQ,EAAE,GAFZ;AAGE,IAAA,OAAO;AAHT,IADF;AAeD,CAhBM;;;AAAMA,4B;AAkBbA,4BAA4B,CAACP,KAA7B,GAAqC;AACnCC,EAAAA,IAAI,EAAE;AAD6B,CAArC","sourcesContent":["import React from \"react\"\nimport { HTML } from \"../HTML\"\nimport { ReadMore } from \"./ReadMore\"\n\nexport default {\n  title: \"Components/ReadMore\",\n}\n\nexport const WithCharacterCap = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n    />\n  )\n}\n\nWithCharacterCap.story = {\n  name: \"With character cap\",\n}\n\nexport const ShortContent = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>.\n        </div>`}\n    />\n  )\n}\n\nShortContent.story = {\n  name: \"Short content\",\n}\n\nexport const AsString = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content=\"Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa. Donald Judd, widely regarded as one of the most significant American artists of the post-war period, is perhaps best-known for the large-scale outdoor installations and long, spacious interiors he designed in Marfa.\"\n    />\n  )\n}\n\nAsString.story = {\n  name: \"As string\",\n}\n\nexport const CharacterCapWithHtml = () => {\n  return (\n    <ReadMore\n      maxChars={300}\n      content={`<p>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa. Donald Judd, widely\n          regarded as one of the most significant American artists of the\n          post-war period, is perhaps best-known for the large-scale outdoor\n          installations and long, spacious interiors he designed in Marfa.\n        </p>\n        <hr />\n        <p>\n          <strong>Lorem ipsum dolor</strong> sit amet consectetur adipisicing\n          elit. Ducimus eligendi obcaecati voluptate{\" \"}\n          <em>molestias vero nobis voluptatum</em>, tenetur dolorum assumenda.\n        </p>\n        <p>\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n          eveniet aliquid laborum fugiat quibusdam id suscipit est temporibus\n          labore sint aliquam, laudantium tempore. Tenetur adipisci cumque\n          alias facilis animi. Illum.\n        </p>`}\n    />\n  )\n}\n\nCharacterCapWithHtml.story = {\n  name: \"Character cap with HTML\",\n}\n\nexport const WithCustomizableTypography = () => {\n  return (\n    <HTML>\n      <ReadMore\n        maxChars={300}\n        content={`\n            <p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate{\" \"}\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  )\n}\n\nWithCustomizableTypography.story = {\n  name: \"With customizable typography\",\n}\n\nexport const WithCustomizableTypography2 = () => {\n  return (\n    <HTML variant=\"lg\">\n      <ReadMore\n        maxChars={300}\n        content={`<p>\n              Donald Judd, widely regarded as one of the most significant\n              American artists of <a href=\"#\">the post-war period</a>, is\n              perhaps best-known for the large-scale outdoor installations and\n              long, spacious interiors he designed in Marfa. Donald Judd, widely\n              regarded as one of the most significant American artists of the\n              post-war period, is perhaps best-known for the large-scale outdoor\n              installations and long, spacious interiors he designed in Marfa.\n            </p>\n            <hr />\n            <p>\n              <strong>Lorem ipsum dolor</strong> sit amet consectetur\n              adipisicing elit. Ducimus eligendi obcaecati voluptate{\" \"}\n              <em>molestias vero nobis voluptatum</em>, tenetur dolorum\n              assumenda.\n            </p>\n            <p>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis\n              eveniet aliquid laborum fugiat quibusdam id suscipit est\n              temporibus labore sint aliquam, laudantium tempore. Tenetur\n              adipisci cumque alias facilis animi. Illum.\n            </p>`}\n      />\n    </HTML>\n  )\n}\n\nWithCustomizableTypography2.story = {\n  name: \"With customizable typography (2)\",\n}\n\nexport const CharacterCapWithHtmlDisabled = () => {\n  return (\n    <ReadMore\n      disabled\n      maxChars={300}\n      content={`<div>\n          Donald Judd, widely regarded as one of the most significant American\n          artists of <a href=\"#\">the post-war period</a>, is perhaps best-known\n          for the large-scale outdoor installations and long, spacious interiors\n          he designed in Marfa. Donald Judd, widely regarded as one of the most\n          significant American artists of the post-war period, is perhaps\n          best-known for the large-scale outdoor installations and long,\n          spacious interiors he designed in Marfa.\n        </div>`}\n    />\n  )\n}\n\nCharacterCapWithHtmlDisabled.story = {\n  name: \"Character cap with html (disabled)\",\n}\n"],"file":"ReadMore.story.js"}

package/dist/elements/Skip/Skip.js

@@ -49,9 +49,10 @@ var Skip = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwardedRef)
     bg: "black10"
   }, rest), /*#__PURE__*/_react.default.createElement(_Text.Text, {
     p: 1,
-    variant: "text"
+    variant: "sm"
   }, children));
 });
 
 exports.Skip = Skip;
+Skip.displayName = "Skip";
 //# sourceMappingURL=Skip.js.map

package/dist/elements/Skip/Skip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Skip/Skip.tsx"],"names":["Container","Clickable","visuallyHiddenMixin","Skip","React","forwardRef","forwardedRef","children","rest"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,SAAS,GAAG,+BAAOC,oBAAP,CAAH;AAAA;AAAA;AAAA,2FAMTC,mCANS,CAAf;AAUA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMC,IAAI,gBAAGC,eAAMC,UAAN,CAClB,gBAAmCC,YAAnC,EAAoD;AAAA,MAAjDC,QAAiD,QAAjDA,QAAiD;AAAA,MAApCC,IAAoC;;AAClD,sBACE,6BAAC,SAAD;AACE,IAAA,GAAG,EAAEF,YADP;AAEE,IAAA,OAAO,EAAC,OAFV;AAGE,IAAA,EAAE,EAAC;AAHL,KAIME,IAJN,gBAME,6BAAC,UAAD;AAAM,IAAA,CAAC,EAAE,CAAT;AAAY,IAAA,OAAO,EAAC;AAApB,KACGD,QADH,CANF,CADF;AAYD,CAdiB,CAAb","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { visuallyHiddenMixin } from \"../VisuallyHidden\"\n\nconst Container = styled(Clickable)`\n  display: block;\n  text-decoration: underline;\n  outline: 0;\n\n  &:not(:focus):not(:active) {\n    ${visuallyHiddenMixin}\n  }\n`\n\n/**\n * Either a button or an anchor tag\n */\nexport type SkipProps =\n  | ClickableProps\n  | (ClickableProps & {\n      as: \"a\"\n      href: string\n    })\n\n/**\n * Skip link or button.\n * Utilize `as=\"a\"` for an anchor tag to link to landmark IDs.\n * Used, for example, to skip to content in the nav.\n * Is visually hidden until focused, which reveals it.\n */\nexport const Skip = React.forwardRef(\n  ({ children, ...rest }: SkipProps, forwardedRef) => {\n    return (\n      <Container\n        ref={forwardedRef as any}\n        display=\"block\"\n        bg=\"black10\"\n        {...rest}\n      >\n        <Text p={1} variant=\"text\">\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n"],"file":"Skip.js"}
+{"version":3,"sources":["../../../src/elements/Skip/Skip.tsx"],"names":["Container","Clickable","visuallyHiddenMixin","Skip","React","forwardRef","forwardedRef","children","rest","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,SAAS,GAAG,+BAAOC,oBAAP,CAAH;AAAA;AAAA;AAAA,2FAMTC,mCANS,CAAf;AAUA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMC,IAAI,gBAAGC,eAAMC,UAAN,CAClB,gBAAmCC,YAAnC,EAAoD;AAAA,MAAjDC,QAAiD,QAAjDA,QAAiD;AAAA,MAApCC,IAAoC;;AAClD,sBACE,6BAAC,SAAD;AACE,IAAA,GAAG,EAAEF,YADP;AAEE,IAAA,OAAO,EAAC,OAFV;AAGE,IAAA,EAAE,EAAC;AAHL,KAIME,IAJN,gBAME,6BAAC,UAAD;AAAM,IAAA,CAAC,EAAE,CAAT;AAAY,IAAA,OAAO,EAAC;AAApB,KACGD,QADH,CANF,CADF;AAYD,CAdiB,CAAb;;;AAiBPJ,IAAI,CAACM,WAAL,GAAmB,MAAnB","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Text } from \"../Text\"\nimport { visuallyHiddenMixin } from \"../VisuallyHidden\"\n\nconst Container = styled(Clickable)`\n  display: block;\n  text-decoration: underline;\n  outline: 0;\n\n  &:not(:focus):not(:active) {\n    ${visuallyHiddenMixin}\n  }\n`\n\n/**\n * Either a button or an anchor tag\n */\nexport type SkipProps =\n  | ClickableProps\n  | (ClickableProps & {\n      as: \"a\"\n      href: string\n    })\n\n/**\n * Skip link or button.\n * Utilize `as=\"a\"` for an anchor tag to link to landmark IDs.\n * Used, for example, to skip to content in the nav.\n * Is visually hidden until focused, which reveals it.\n */\nexport const Skip = React.forwardRef(\n  ({ children, ...rest }: SkipProps, forwardedRef) => {\n    return (\n      <Container\n        ref={forwardedRef as any}\n        display=\"block\"\n        bg=\"black10\"\n        {...rest}\n      >\n        <Text p={1} variant=\"sm\">\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nSkip.displayName = \"Skip\"\n"],"file":"Skip.js"}

package/dist/elements/Skip/Skip.story.js

@@ -20,9 +20,9 @@ exports.default = _default;
 
 var SkipButton = function SkipButton() {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "text"
+    variant: "sm"
   }, "Press <tab> to focus"), /*#__PURE__*/_react.default.createElement(_Skip.Skip, null, "Skip to main content"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "text"
+    variant: "sm"
   }, "It should not interfere with the normal flow of content"));
 };
 
@@ -33,12 +33,12 @@ SkipButton.story = {
 
 var SkipButtonWithSpacing = function SkipButtonWithSpacing() {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "text"
+    variant: "sm"
   }, "Press <tab> to focus"), /*#__PURE__*/_react.default.createElement(_Skip.Skip, {
     width: "100%",
     my: 1
   }, "Skip to main content"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "text"
+    variant: "sm"
   }, "It should not interfere with the normal flow of content"));
 };
 
@@ -49,14 +49,14 @@ SkipButtonWithSpacing.story = {
 
 var SkipLink = function SkipLink() {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "text"
+    variant: "sm"
   }, "Press <tab> to focus"), /*#__PURE__*/_react.default.createElement(_Skip.Skip, {
     width: "100%",
     my: 1,
     as: "a",
     href: "#main"
   }, "Skip to main content"), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "text"
+    variant: "sm"
   }, "It should not interfere with the normal flow of content"));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Skip/Skip.story.tsx"],"names":["title","SkipButton","story","name","SkipButtonWithSpacing","SkipLink"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AAC9B,sBACE,yEACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,4BADF,eAEE,6BAAC,UAAD,+BAFF,eAGE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,+DAHF,CADF;AASD,CAVM;;;AAYPA,UAAU,CAACC,KAAX,GAAmB;AACjBC,EAAAA,IAAI,EAAE;AADW,CAAnB;;AAIO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,GAAM;AACzC,sBACE,yEACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,4BADF,eAEE,6BAAC,UAAD;AAAM,IAAA,KAAK,EAAC,MAAZ;AAAmB,IAAA,EAAE,EAAE;AAAvB,4BAFF,eAKE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,+DALF,CADF;AAWD,CAZM;;;AAcPA,qBAAqB,CAACF,KAAtB,GAA8B;AAC5BC,EAAAA,IAAI,EAAE;AADsB,CAA9B;;AAIO,IAAME,QAAQ,GAAG,SAAXA,QAAW,GAAM;AAC5B,sBACE,yEACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,4BADF,eAEE,6BAAC,UAAD;AAAM,IAAA,KAAK,EAAC,MAAZ;AAAmB,IAAA,EAAE,EAAE,CAAvB;AAA0B,IAAA,EAAE,EAAC,GAA7B;AAAiC,IAAA,IAAI,EAAC;AAAtC,4BAFF,eAKE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,+DALF,CADF;AAWD,CAZM;;;AAcPA,QAAQ,CAACH,KAAT,GAAiB;AACfC,EAAAA,IAAI,EAAE;AADS,CAAjB","sourcesContent":["import React from \"react\"\nimport { Text } from \"../Text\"\nimport { Skip } from \"./Skip\"\n\nexport default {\n  title: \"Components/Skip\",\n}\n\nexport const SkipButton = () => {\n  return (\n    <>\n      <Text variant=\"text\">Press &lt;tab&gt; to focus</Text>\n      <Skip>Skip to main content</Skip>\n      <Text variant=\"text\">\n        It should not interfere with the normal flow of content\n      </Text>\n    </>\n  )\n}\n\nSkipButton.story = {\n  name: \"Skip button\",\n}\n\nexport const SkipButtonWithSpacing = () => {\n  return (\n    <>\n      <Text variant=\"text\">Press &lt;tab&gt; to focus</Text>\n      <Skip width=\"100%\" my={1}>\n        Skip to main content\n      </Skip>\n      <Text variant=\"text\">\n        It should not interfere with the normal flow of content\n      </Text>\n    </>\n  )\n}\n\nSkipButtonWithSpacing.story = {\n  name: \"Skip button with spacing\",\n}\n\nexport const SkipLink = () => {\n  return (\n    <>\n      <Text variant=\"text\">Press &lt;tab&gt; to focus</Text>\n      <Skip width=\"100%\" my={1} as=\"a\" href=\"#main\">\n        Skip to main content\n      </Skip>\n      <Text variant=\"text\">\n        It should not interfere with the normal flow of content\n      </Text>\n    </>\n  )\n}\n\nSkipLink.story = {\n  name: \"Skip link\",\n}\n"],"file":"Skip.story.js"}
+{"version":3,"sources":["../../../src/elements/Skip/Skip.story.tsx"],"names":["title","SkipButton","story","name","SkipButtonWithSpacing","SkipLink"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AAC9B,sBACE,yEACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,4BADF,eAEE,6BAAC,UAAD,+BAFF,eAGE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,+DAHF,CADF;AASD,CAVM;;;AAYPA,UAAU,CAACC,KAAX,GAAmB;AACjBC,EAAAA,IAAI,EAAE;AADW,CAAnB;;AAIO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,GAAM;AACzC,sBACE,yEACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,4BADF,eAEE,6BAAC,UAAD;AAAM,IAAA,KAAK,EAAC,MAAZ;AAAmB,IAAA,EAAE,EAAE;AAAvB,4BAFF,eAKE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,+DALF,CADF;AAWD,CAZM;;;AAcPA,qBAAqB,CAACF,KAAtB,GAA8B;AAC5BC,EAAAA,IAAI,EAAE;AADsB,CAA9B;;AAIO,IAAME,QAAQ,GAAG,SAAXA,QAAW,GAAM;AAC5B,sBACE,yEACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,4BADF,eAEE,6BAAC,UAAD;AAAM,IAAA,KAAK,EAAC,MAAZ;AAAmB,IAAA,EAAE,EAAE,CAAvB;AAA0B,IAAA,EAAE,EAAC,GAA7B;AAAiC,IAAA,IAAI,EAAC;AAAtC,4BAFF,eAKE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,+DALF,CADF;AAWD,CAZM;;;AAcPA,QAAQ,CAACH,KAAT,GAAiB;AACfC,EAAAA,IAAI,EAAE;AADS,CAAjB","sourcesContent":["import React from \"react\"\nimport { Text } from \"../Text\"\nimport { Skip } from \"./Skip\"\n\nexport default {\n  title: \"Components/Skip\",\n}\n\nexport const SkipButton = () => {\n  return (\n    <>\n      <Text variant=\"sm\">Press &lt;tab&gt; to focus</Text>\n      <Skip>Skip to main content</Skip>\n      <Text variant=\"sm\">\n        It should not interfere with the normal flow of content\n      </Text>\n    </>\n  )\n}\n\nSkipButton.story = {\n  name: \"Skip button\",\n}\n\nexport const SkipButtonWithSpacing = () => {\n  return (\n    <>\n      <Text variant=\"sm\">Press &lt;tab&gt; to focus</Text>\n      <Skip width=\"100%\" my={1}>\n        Skip to main content\n      </Skip>\n      <Text variant=\"sm\">\n        It should not interfere with the normal flow of content\n      </Text>\n    </>\n  )\n}\n\nSkipButtonWithSpacing.story = {\n  name: \"Skip button with spacing\",\n}\n\nexport const SkipLink = () => {\n  return (\n    <>\n      <Text variant=\"sm\">Press &lt;tab&gt; to focus</Text>\n      <Skip width=\"100%\" my={1} as=\"a\" href=\"#main\">\n        Skip to main content\n      </Skip>\n      <Text variant=\"sm\">\n        It should not interfere with the normal flow of content\n      </Text>\n    </>\n  )\n}\n\nSkipLink.story = {\n  name: \"Skip link\",\n}\n"],"file":"Skip.story.js"}

package/dist/elements/Stepper/Stepper.js

@@ -11,8 +11,6 @@ var _CheckIcon = require("../../svgs/CheckIcon");
 
 var _ChevronIcon = require("../../svgs/ChevronIcon");
 
-var _Theme = require("../../Theme");
-
 var _BaseTabs = require("../BaseTabs");
 
 var _Box = require("../Box");
@@ -23,7 +21,7 @@ var _Flex = require("../Flex");
 
 var _Tabs = require("../Tabs");
 
-var _excluded = ["currentStepIndex", "disableNavigation", "initialTabIndex", "children", "fill"];
+var _excluded = ["currentStepIndex", "disableNavigation", "initialTabIndex", "children"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -40,38 +38,8 @@ var Stepper = function Stepper(_ref) {
       _ref$initialTabIndex = _ref.initialTabIndex,
       initialTabIndex = _ref$initialTabIndex === void 0 ? 0 : _ref$initialTabIndex,
       children = _ref.children,
-      fill = _ref.fill,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var tokens = (0, _Theme.useThemeConfig)({
-    v2: {
-      fill: fill,
-      joinSeparator: /*#__PURE__*/_react.default.createElement(_ChevronIcon.ChevronIcon, {
-        fill: "black30",
-        width: 12,
-        mx: 2
-      }),
-      inlineSeparator: null,
-      verticalAlignment: "center",
-      horizontalAlignment: "center",
-      checkAlignment: "left",
-      textVariant: "mediumText"
-    },
-    v3: {
-      fill: true,
-      joinSeparator: null,
-      inlineSeparator: /*#__PURE__*/_react.default.createElement(_ChevronIcon.ChevronIcon, {
-        fill: "black60",
-        height: 10,
-        ml: 1
-      }),
-      verticalAlignment: "center",
-      horizontalAlignment: "flex-start",
-      checkAlignment: "right",
-      textVariant: "sm"
-    }
-  });
-
   var _useTabs = (0, _Tabs.useTabs)({
     children: children,
     initialTabIndex: initialTabIndex
@@ -84,8 +52,7 @@ var Stepper = function Stepper(_ref) {
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BaseTabs.BaseTabs, _extends({
     ref: ref,
-    separator: tokens.joinSeparator,
-    fill: tokens.fill
+    fill: true
   }, rest), tabs.map(function (tab, i) {
     return /*#__PURE__*/_react.default.createElement(_BaseTabs.BaseTab, {
       key: i,
@@ -95,25 +62,26 @@ var Stepper = function Stepper(_ref) {
       disabled: disableNavigation || i > currentStepIndex,
       onClick: handleClick(i),
       active: i === activeTabIndex,
-      variant: tokens.textVariant,
-      justifyContent: tokens.horizontalAlignment
+      variant: "sm",
+      justifyContent: "flex-start"
     }, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
-      alignItems: tokens.verticalAlignment,
+      alignItems: "center",
       justifyContent: "space-between",
       flex: 1
     }, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
-      alignItems: tokens.verticalAlignment
-    }, currentStepIndex > i && tokens.checkAlignment === "left" && /*#__PURE__*/_react.default.createElement(_CheckIcon.CheckIcon, {
-      fill: "green100",
-      mr: 1
-    }), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      alignItems: "center"
+    }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
       color: i > currentStepIndex ? "black30" : undefined
-    }, tab.child.props.name), currentStepIndex > i && tokens.checkAlignment === "right" && /*#__PURE__*/_react.default.createElement(_CheckIcon.CheckIcon, {
+    }, tab.child.props.name), currentStepIndex > i && /*#__PURE__*/_react.default.createElement(_CheckIcon.CheckIcon, {
       width: 16,
       height: 16,
       fill: "green100",
       ml: 1
-    })), tokens.inlineSeparator));
+    })), /*#__PURE__*/_react.default.createElement(_ChevronIcon.ChevronIcon, {
+      fill: "black60",
+      height: 10,
+      ml: 1
+    })));
   })), activeTab.current.child);
 };
 /** StepProps */

package/dist/elements/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Stepper/Stepper.tsx"],"names":["Stepper","currentStepIndex","disableNavigation","initialTabIndex","children","fill","rest","tokens","v2","joinSeparator","inlineSeparator","verticalAlignment","horizontalAlignment","checkAlignment","textVariant","v3","tabs","activeTab","activeTabIndex","handleClick","ref","map","tab","i","Clickable","undefined","child","props","name","current","Step","defaultProps","mb"],"mappings":"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","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport React from \"react\"\nimport { CheckIcon } from \"../../svgs/CheckIcon\"\nimport { ChevronIcon } from \"../../svgs/ChevronIcon\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { BaseTab, BaseTabs } from \"../BaseTabs\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { TabProps, TabsProps, useTabs } from \"../Tabs\"\n\nexport interface StepperProps extends TabsProps {\n  /** The step user currently is at (e.g. previous steps completed) */\n  currentStepIndex: number\n  /** Prevents the tabs from being directly clickable */\n  disableNavigation?: boolean\n}\n\n/** Stepper */\nexport const Stepper: React.FC<StepperProps> = ({\n  currentStepIndex,\n  disableNavigation,\n  initialTabIndex = 0,\n  children,\n  fill,\n  ...rest\n}) => {\n  const tokens = useThemeConfig({\n    v2: {\n      fill,\n      joinSeparator: <ChevronIcon fill=\"black30\" width={12} mx={2} />,\n      inlineSeparator: null,\n      verticalAlignment: \"center\",\n      horizontalAlignment: \"center\",\n      checkAlignment: \"left\",\n      textVariant: \"mediumText\" as TextVariant,\n    },\n    v3: {\n      fill: true,\n      joinSeparator: null,\n      inlineSeparator: <ChevronIcon fill=\"black60\" height={10} ml={1} />,\n      verticalAlignment: \"center\",\n      horizontalAlignment: \"flex-start\",\n      checkAlignment: \"right\",\n      textVariant: \"sm\" as TextVariant,\n    },\n  })\n\n  const { tabs, activeTab, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n  })\n\n  return (\n    <>\n      <BaseTabs\n        ref={ref}\n        separator={tokens.joinSeparator!}\n        fill={tokens.fill}\n        {...rest}\n      >\n        {tabs.map((tab, i) => {\n          return (\n            <BaseTab\n              key={i}\n              as={Clickable}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              disabled={disableNavigation || i > currentStepIndex}\n              onClick={handleClick(i)}\n              active={i === activeTabIndex}\n              variant={tokens.textVariant}\n              justifyContent={tokens.horizontalAlignment}\n            >\n              <Flex\n                alignItems={tokens.verticalAlignment}\n                justifyContent=\"space-between\"\n                flex={1}\n              >\n                <Flex alignItems={tokens.verticalAlignment}>\n                  {currentStepIndex > i && tokens.checkAlignment === \"left\" && (\n                    <CheckIcon fill=\"green100\" mr={1} />\n                  )}\n\n                  <Box color={i > currentStepIndex ? \"black30\" : undefined}>\n                    {tab.child.props.name}\n                  </Box>\n\n                  {currentStepIndex > i &&\n                    tokens.checkAlignment === \"right\" && (\n                      <CheckIcon\n                        width={16}\n                        height={16}\n                        fill=\"green100\"\n                        ml={1}\n                      />\n                    )}\n                </Flex>\n\n                {tokens.inlineSeparator}\n              </Flex>\n            </BaseTab>\n          )\n        })}\n      </BaseTabs>\n\n      {activeTab.current.child}\n    </>\n  )\n}\n\n/** StepProps */\nexport type StepProps = TabProps\n\n/**\n * An individual step.\n * Does nothing on its own; props are dealt with inside of Steps.\n */\nexport const Step: React.FC<StepProps> = ({ children }) => <>{children}</>\n\nStepper.defaultProps = {\n  mb: 2,\n}\n"],"file":"Stepper.js"}
+{"version":3,"sources":["../../../src/elements/Stepper/Stepper.tsx"],"names":["Stepper","currentStepIndex","disableNavigation","initialTabIndex","children","rest","tabs","activeTab","activeTabIndex","handleClick","ref","map","tab","i","Clickable","undefined","child","props","name","current","Step","defaultProps","mb"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AASA;AACO,IAAMA,OAA+B,GAAG,SAAlCA,OAAkC,OAMzC;AAAA,MALJC,gBAKI,QALJA,gBAKI;AAAA,MAJJC,iBAII,QAJJA,iBAII;AAAA,kCAHJC,eAGI;AAAA,MAHJA,eAGI,qCAHc,CAGd;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,iBAA8D,mBAAQ;AACpED,IAAAA,QAAQ,EAARA,QADoE;AAEpED,IAAAA,eAAe,EAAfA;AAFoE,GAAR,CAA9D;AAAA,MAAQG,IAAR,YAAQA,IAAR;AAAA,MAAcC,SAAd,YAAcA,SAAd;AAAA,MAAyBC,cAAzB,YAAyBA,cAAzB;AAAA,MAAyCC,WAAzC,YAAyCA,WAAzC;AAAA,MAAsDC,GAAtD,YAAsDA,GAAtD;;AAKA,sBACE,yEACE,6BAAC,kBAAD;AAAU,IAAA,GAAG,EAAEA,GAAf;AAAoB,IAAA,IAAI;AAAxB,KAA6BL,IAA7B,GACGC,IAAI,CAACK,GAAL,CAAS,UAACC,GAAD,EAAMC,CAAN,EAAY;AACpB,wBACE,6BAAC,iBAAD;AACE,MAAA,GAAG,EAAEA,CADP;AAEE,MAAA,EAAE,EAAEC,oBAFN;AAGE,MAAA,GAAG,EAAEF,GAAG,CAACF,GAHX;AAIE,uBAAeG,CAAC,KAAKL,cAJvB;AAKE,MAAA,QAAQ,EAAEN,iBAAiB,IAAIW,CAAC,GAAGZ,gBALrC;AAME,MAAA,OAAO,EAAEQ,WAAW,CAACI,CAAD,CANtB;AAOE,MAAA,MAAM,EAAEA,CAAC,KAAKL,cAPhB;AAQE,MAAA,OAAO,EAAC,IARV;AASE,MAAA,cAAc,EAAC;AATjB,oBAWE,6BAAC,UAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC,eAAzC;AAAyD,MAAA,IAAI,EAAE;AAA/D,oBACE,6BAAC,UAAD;AAAM,MAAA,UAAU,EAAC;AAAjB,oBACE,6BAAC,QAAD;AAAK,MAAA,KAAK,EAAEK,CAAC,GAAGZ,gBAAJ,GAAuB,SAAvB,GAAmCc;AAA/C,OACGH,GAAG,CAACI,KAAJ,CAAUC,KAAV,CAAgBC,IADnB,CADF,EAKGjB,gBAAgB,GAAGY,CAAnB,iBACC,6BAAC,oBAAD;AAAW,MAAA,KAAK,EAAE,EAAlB;AAAsB,MAAA,MAAM,EAAE,EAA9B;AAAkC,MAAA,IAAI,EAAC,UAAvC;AAAkD,MAAA,EAAE,EAAE;AAAtD,MANJ,CADF,eAWE,6BAAC,wBAAD;AAAa,MAAA,IAAI,EAAC,SAAlB;AAA4B,MAAA,MAAM,EAAE,EAApC;AAAwC,MAAA,EAAE,EAAE;AAA5C,MAXF,CAXF,CADF;AA2BD,GA5BA,CADH,CADF,EAiCGN,SAAS,CAACY,OAAV,CAAkBH,KAjCrB,CADF;AAqCD,CAjDM;AAmDP;;;;;AAGA;AACA;AACA;AACA;AACO,IAAMI,IAAyB,GAAG,SAA5BA,IAA4B;AAAA,MAAGhB,QAAH,SAAGA,QAAH;AAAA,sBAAkB,4DAAGA,QAAH,CAAlB;AAAA,CAAlC;;;AAEPJ,OAAO,CAACqB,YAAR,GAAuB;AACrBC,EAAAA,EAAE,EAAE;AADiB,CAAvB","sourcesContent":["import React from \"react\"\nimport { CheckIcon } from \"../../svgs/CheckIcon\"\nimport { ChevronIcon } from \"../../svgs/ChevronIcon\"\nimport { BaseTab, BaseTabs } from \"../BaseTabs\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { TabProps, TabsProps, useTabs } from \"../Tabs\"\n\nexport interface StepperProps extends TabsProps {\n  /** The step user currently is at (e.g. previous steps completed) */\n  currentStepIndex: number\n  /** Prevents the tabs from being directly clickable */\n  disableNavigation?: boolean\n}\n\n/** Stepper */\nexport const Stepper: React.FC<StepperProps> = ({\n  currentStepIndex,\n  disableNavigation,\n  initialTabIndex = 0,\n  children,\n  ...rest\n}) => {\n  const { tabs, activeTab, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n  })\n\n  return (\n    <>\n      <BaseTabs ref={ref} fill {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <BaseTab\n              key={i}\n              as={Clickable}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              disabled={disableNavigation || i > currentStepIndex}\n              onClick={handleClick(i)}\n              active={i === activeTabIndex}\n              variant=\"sm\"\n              justifyContent=\"flex-start\"\n            >\n              <Flex alignItems=\"center\" justifyContent=\"space-between\" flex={1}>\n                <Flex alignItems=\"center\">\n                  <Box color={i > currentStepIndex ? \"black30\" : undefined}>\n                    {tab.child.props.name}\n                  </Box>\n\n                  {currentStepIndex > i && (\n                    <CheckIcon width={16} height={16} fill=\"green100\" ml={1} />\n                  )}\n                </Flex>\n\n                <ChevronIcon fill=\"black60\" height={10} ml={1} />\n              </Flex>\n            </BaseTab>\n          )\n        })}\n      </BaseTabs>\n\n      {activeTab.current.child}\n    </>\n  )\n}\n\n/** StepProps */\nexport type StepProps = TabProps\n\n/**\n * An individual step.\n * Does nothing on its own; props are dealt with inside of Steps.\n */\nexport const Step: React.FC<StepProps> = ({ children }) => <>{children}</>\n\nStepper.defaultProps = {\n  mb: 2,\n}\n"],"file":"Stepper.js"}

package/dist/elements/Sup/Sup.d.ts

@@ -2,7 +2,7 @@
 import { TextProps } from "../Text";
 export declare type SupProps = TextProps;
 export declare const Sup: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("..").BoxProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
-    variant?: import("styled-system").ResponsiveValue<import("@artsy/palette-tokens/dist/typography/types").TextVariant, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: import("styled-system").ResponsiveValue<"xxxl" | "xxl" | "xl" | "lg" | "lg-display" | "md" | "sm" | "sm-display" | "xs" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textColor?: import("styled-system").ResponsiveValue<"black100" | "black80" | "black60" | "black30" | "black10" | "black5" | "blue100" | "blue10" | "copper100" | "copper10" | "green100" | "green10" | "purple100" | "brand" | "purple30" | "purple5" | "red100" | "red10" | "yellow100" | "yellow30" | "yellow10" | "white100", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineClamp?: number | undefined;
 } & {
@@ -10,7 +10,7 @@ export declare const Sup: import("styled-components").StyledComponentClass<impor
     textTransform?: import("styled-system").ResponsiveValue<import("../Text").TextTransform, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineClamp?: import("styled-system").ResponsiveValue<number, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
 }, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("..").BoxProps & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
-    variant?: import("styled-system").ResponsiveValue<import("@artsy/palette-tokens/dist/typography/types").TextVariant, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: import("styled-system").ResponsiveValue<"xxxl" | "xxl" | "xl" | "lg" | "lg-display" | "md" | "sm" | "sm-display" | "xs" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textColor?: import("styled-system").ResponsiveValue<"black100" | "black80" | "black60" | "black30" | "black10" | "black5" | "blue100" | "blue10" | "copper100" | "copper10" | "green100" | "green10" | "purple100" | "brand" | "purple30" | "purple5" | "red100" | "red10" | "yellow100" | "yellow30" | "yellow10" | "white100", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineClamp?: number | undefined;
 } & {

package/dist/elements/Swiper/Swiper.story.js

@@ -78,7 +78,7 @@ var Demo = function Demo(_ref) {
       p: 1,
       textAlign: "center"
     }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-      variant: "caption"
+      variant: "xs"
     }, i + 1));
   })));
 };
@@ -171,7 +171,8 @@ ProgressDotsExample.story = {
 var CustomRailAndCells = function CustomRailAndCells() {
   return /*#__PURE__*/_react.default.createElement(Demo, {
     snap: "start",
-    widths: ["100%", "100%", "100%", "100%"],
+    widths: ["100%", "100%", "100%", "100%"] // eslint-disable-next-line react/display-name
+    ,
     Cell: /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return /*#__PURE__*/_react.default.createElement(_2.SwiperCell, _extends({}, props, {
         ref: ref,