@artsy/palette 38.15.0 → 39.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_helpers","_RequiredField","_Box","_Text","_Tooltip","_tokens","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Select","forwardRef","_ref","ref","description","disabled","error","focus","hover","id","options","required","selected","title","onSelect","onChange","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","selectProps","_useState","useState","_useState2","selectedOption","setSelectedOption","_useState3","_useState4","isFocused","setIsFocused","_useState5","_useState6","isHovered","setIsHovered","createElement","Box","width","Tooltip","pointer","content","placement","Text","variant","color","textAlign","Container","mt","onMouseEnter","onMouseLeave","onFocus","onBlur","optionSelected","event","map","_ref2","text","StyledLabel","htmlFor","RequiredField","ml","exports","displayName","resetMixin","css","caretMixin","themeGet","_ref3","styled","withConfig","componentId","props","SELECT_STATES","completed","label","FORM_ELEMENT_TRANSITION"],"sources":["../../../src/elements/Select/Select.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, {\n  forwardRef,\n  ForwardRefExoticComponent,\n  Ref,\n  useState,\n} from \"react\"\nimport styled, { css } 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: ForwardRefExoticComponent<\n  SelectProps & { ref?: Ref<HTMLElement> }\n> = forwardRef(\n  (\n    {\n      description,\n      disabled,\n      error,\n      focus,\n      hover,\n      id,\n      name,\n      options,\n      required,\n      selected,\n      title,\n      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=\"black60\" 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\n/** Creates a small caret */\nexport const caretMixin = css`\n  &::after {\n    content: \"\";\n    cursor: inherit;\n    width: 0;\n    height: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: ${themeGet(\"space.1\")};\n    pointer-events: none;\n    border-left: 4px solid transparent;\n    border-right: 4px solid transparent;\n    border-top: 4px solid\n      ${({ disabled }) => {\n        return disabled\n          ? themeGet(\"colors.black10\")\n          : themeGet(\"colors.black100\")\n      }};\n  }\n`\n\ntype ContainerProps = Required<\n  Pick<SelectProps, \"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.black30\")};\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.white100\")};\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","require","_react","_interopRequireWildcard","_styledComponents","_helpers","_RequiredField","_Box","_Text","_Tooltip","_tokens","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Select","forwardRef","_ref","ref","description","disabled","error","focus","hover","id","options","required","selected","title","onSelect","onChange","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","selectProps","_useState","useState","_useState2","selectedOption","setSelectedOption","_useState3","_useState4","isFocused","setIsFocused","_useState5","_useState6","isHovered","setIsHovered","createElement","Box","width","Tooltip","pointer","content","placement","Text","variant","color","textAlign","Container","mt","onMouseEnter","onMouseLeave","onFocus","onBlur","optionSelected","event","map","_ref2","text","StyledLabel","htmlFor","RequiredField","ml","exports","displayName","resetMixin","css","caretMixin","themeGet","_ref3","styled","withConfig","componentId","props","SELECT_STATES","completed","label","FORM_ELEMENT_TRANSITION"],"sources":["../../../src/elements/Select/Select.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, {\n  forwardRef,\n  ForwardRefExoticComponent,\n  Ref,\n  useState,\n} 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: ForwardRefExoticComponent<\n  SelectProps & { ref?: Ref<HTMLElement> }\n> = forwardRef(\n  (\n    {\n      description,\n      disabled,\n      error,\n      focus,\n      hover,\n      id,\n      name,\n      options,\n      required,\n      selected,\n      title,\n      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=\"black60\" 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\n          ? themeGet(\"colors.black10\")\n          : themeGet(\"colors.black100\")\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.black30\")};\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.white100\")};\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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","SELECT_STATES","default","css","themeGet","_ref","optionSelected","focus","_ref2","hover","_ref3","disabled","completed","_ref4","_ref5","error","exports"],"sources":["../../../src/elements/Select/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\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.black100\")};\n    border-color: ${themeGet(\"colors.black30\")};\n\n    + label {\n      color: ${themeGet(\"colors.black60\")};\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 }) =>\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.black100\")};\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 }) =>\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.black60\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.black60\")};\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 }) =>\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.black60\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.black60\")};\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 }) =>\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.black30\")};\n    border-color: ${themeGet(\"colors.black30\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.black30\")};\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 }) =>\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.black100\")};\n    border-color: ${themeGet(\"colors.red100\")};\n\n    + label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAGO,IAAME,aAAiC,GAAG;EAC/CC,OAAO,MAAEC,qBAAG,gOAEG,IAAAC,kBAAQ,EAAC,kCAAkC,CAAC,EAChD,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EACtB,IAAAA,kBAAQ,EAAC,kCAAkC,CAAC,EAK5C,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EASjD,UAAAC,IAAA;IAAA,IAAGC,cAAc,GAAAD,IAAA,CAAdC,cAAc;IAAA,OACjBA,cAAc,QACdH,qBAAG,yFAGc,IAAAC,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDG,KAAK,MAAEJ,qBAAG,oOACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EAajD,UAAAI,KAAA;IAAA,IAAGF,cAAc,GAAAE,KAAA,CAAdF,cAAc;IAAA,OACjB,CAACA,cAAc,QACfH,qBAAG,0CAIF;EAAA,EACJ;EACDM,KAAK,MAAEN,qBAAG,sLACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAKnC,UAAAM,KAAA;IAAA,IAAGJ,cAAc,GAAAI,KAAA,CAAdJ,cAAc;MAAEK,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAA,OAC3B,CAACL,cAAc,IACf,CAACK,QAAQ,QACTR,qBAAG,sDAEU,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,CAGtC;EAAA,EACJ;EACDQ,SAAS,MAAET,qBAAG,gMACI,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAKtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EASjD,UAAAS,KAAA;IAAA,IAAGP,cAAc,GAAAO,KAAA,CAAdP,cAAc;IAAA,OACjBA,cAAc,QACdH,qBAAG,yFAGc,IAAAC,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDO,QAAQ,MAAER,qBAAG,gOACF,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAMtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EASjD,UAAAU,KAAA;IAAA,IAAGR,cAAc,GAAAQ,KAAA,CAAdR,cAAc;IAAA,OACjBA,cAAc,QACdH,qBAAG,yFAGc,IAAAC,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDW,KAAK,MAAEZ,qBAAG,yDACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC;AAGxC,CAAC;AAAAY,OAAA,CAAAf,aAAA,GAAAA,aAAA"}
+{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","SELECT_STATES","default","css","themeGet","_ref","optionSelected","focus","_ref2","hover","_ref3","disabled","completed","_ref4","_ref5","error","exports"],"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.black100\")};\n    border-color: ${themeGet(\"colors.black30\")};\n\n    + label {\n      color: ${themeGet(\"colors.black60\")};\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.black100\")};\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.black60\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.black60\")};\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.black60\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.black60\")};\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.black30\")};\n    border-color: ${themeGet(\"colors.black30\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.black30\")};\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.black100\")};\n    border-color: ${themeGet(\"colors.red100\")};\n\n    + label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAQO,IAAME,aAAiC,GAAG;EAC/CC,OAAO,MAAEC,qBAAG,gOAEG,IAAAC,kBAAQ,EAAC,kCAAkC,CAAC,EAChD,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EACtB,IAAAA,kBAAQ,EAAC,kCAAkC,CAAC,EAK5C,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EASjD,UAAAC,IAAA;IAAA,IAAGC,cAAc,GAAAD,IAAA,CAAdC,cAAc;IAAA,OACjBA,cAAc,QACdH,qBAAG,yFAGc,IAAAC,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDG,KAAK,MAAEJ,qBAAG,oOACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EAajD,UAAAI,KAAA;IAAA,IAAGF,cAAc,GAAAE,KAAA,CAAdF,cAAc;IAAA,OACjB,CAACA,cAAc,QACfH,qBAAG,0CAIF;EAAA,EACJ;EACDM,KAAK,MAAEN,qBAAG,sLACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI1B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAKnC,UAAAM,KAAA;IAAA,IAAGJ,cAAc,GAAAI,KAAA,CAAdJ,cAAc;MAAEK,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAA,OAC3B,CAACL,cAAc,IACf,CAACK,QAAQ,QACTR,qBAAG,sDAEU,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,CAGtC;EAAA,EACJ;EACDQ,SAAS,MAAET,qBAAG,gMACI,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAKtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EASjD,UAAAS,KAAA;IAAA,IAAGP,cAAc,GAAAO,KAAA,CAAdP,cAAc;IAAA,OACjBA,cAAc,QACdH,qBAAG,yFAGc,IAAAC,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDO,QAAQ,MAAER,qBAAG,gOACF,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAMtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,EASjD,UAAAU,KAAA;IAAA,IAAGR,cAAc,GAAAQ,KAAA,CAAdR,cAAc;IAAA,OACjBA,cAAc,QACdH,qBAAG,yFAGc,IAAAC,kBAAQ,EAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDW,KAAK,MAAEZ,qBAAG,yDACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC;AAGxC,CAAC;AAAAY,OAAA,CAAAf,aAAA,GAAAA,aAAA"}

package/dist/elements/Separator/Separator.d.ts

@@ -5,4 +5,4 @@ export interface SeparatorProps extends SpaceProps, WidthProps, BorderProps, Col
 /**
  * A horizontal divider whose width and spacing can be adjusted
  */
-export declare const Separator: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & SeparatorProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & SeparatorProps>;
+export declare const Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SeparatorProps>> & string;

package/dist/elements/Shelf/ShelfNavigation.js

@@ -23,7 +23,7 @@ var STATES = {
 };
 var Arrow = (0, _styledComponents.default)(_Clickable.Clickable).withConfig({
   displayName: "ShelfNavigation__Arrow",
-  componentId: "myqxb5-0"
+  componentId: "sc-myqxb5-0"
 })(["height:50px;width:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;transition:opacity 250ms,color 250ms,border-color 250ms,box-shadow 0.25s ease;color:", ";background-color:", ";border:1px solid ", ";border-radius:50%;pointer-events:auto;> svg{fill:currentColor;}", " &:hover{", "}&:focus{", "}&:disabled{", "}"], (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.white100"), (0, _themeGet.themeGet)("colors.black5"), function (props) {
   return (0, _styledComponents.css)(["", " ", " ", ""], props.hover && STATES.hover, props.focus && STATES.focus, props.disabled && STATES.focus);
 }, STATES.hover, STATES.focus, STATES.disabled);

package/dist/elements/Shelf/ShelfScrollBar.js

@@ -140,19 +140,19 @@ exports.ShelfScrollBar = ShelfScrollBar;
 ShelfScrollBar.displayName = "ShelfScrollBar";
 var Track = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "ShelfScrollBar__Track",
-  componentId: "iwm55u-0"
+  componentId: "sc-iwm55u-0"
 })(["position:relative;height:3px;width:100%;"]);
 var TrackHitArea = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "ShelfScrollBar__TrackHitArea",
-  componentId: "iwm55u-1"
+  componentId: "sc-iwm55u-1"
 })(["position:absolute;top:-10px;bottom:-10px;right:0;left:0;width:100%;"]);
 var Thumb = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "ShelfScrollBar__Thumb",
-  componentId: "iwm55u-2"
+  componentId: "sc-iwm55u-2"
 })([""]);
 var HitArea = (0, _styledComponents.default)(_Clickable.Clickable).withConfig({
   displayName: "ShelfScrollBar__HitArea",
-  componentId: "iwm55u-3"
+  componentId: "sc-iwm55u-3"
 })(["position:absolute;top:-10px;bottom:-10px;width:100%;left:0;opacity:0;transition:opacity 250ms;&:hover{opacity:1;}&:after{content:\"\";display:block;position:absolute;left:0;width:100%;background-color:", ";top:50%;margin-top:-1.5px;height:3px;}"], (0, _themeGet.themeGet)("colors.black100"));
 var buildScrollBar = function buildScrollBar(_ref2) {
   var trackWidth = _ref2.trackWidth,

package/dist/elements/Skeleton/Skeleton.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
-import { StyledComponentClass } from "styled-components";
 import { BoxProps } from "../Box";
 import { TextProps } from "../Text";
 /** SkeletonProps */
 export declare type SkeletonBoxProps = BoxProps;
 /** A black10 Box */
-export declare const SkeletonBox: StyledComponentClass<SkeletonBoxProps, any>;
+export declare const SkeletonBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, keyof BoxProps | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
 /** SkeletonTextProps */
 export declare type SkeletonTextProps = TextProps;
 /**

package/dist/elements/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","names":["_themeGet","require","_react","_interopRequireDefault","_styledComponents","_interopRequireWildcard","_styledSystem","_splitProps","_Box","_Text","_excluded","_excluded2","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","SkeletonBox","styled","Box","withConfig","displayName","componentId","exports","defaultProps","bg","splitBorderProps","splitProps","border","SkeletonTextOverlay","SkeletonText","_ref","children","rest","_splitBorderProps","_splitBorderProps2","borderProps","textProps","createElement","Text","color","as","display","position","FADE_ANIMATION","keyframes","SkeletonFade","themeGet","Skeleton","_ref2","top","right","bottom","left"],"sources":["../../../src/elements/Skeleton/Skeleton.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled, { keyframes, StyledComponentClass } from \"styled-components\"\nimport { border, BorderProps } from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text, TextProps } from \"../Text\"\n\n/** SkeletonProps */\nexport type SkeletonBoxProps = BoxProps\n\n/** A black10 Box */\nexport const SkeletonBox: StyledComponentClass<SkeletonBoxProps, any> = styled(\n  Box\n)``\nSkeletonBox.defaultProps = { bg: \"black10\" }\nSkeletonBox.displayName = \"SkeletonBox\"\n\nconst splitBorderProps = splitProps<BorderProps>(border)\n\n/** SkeletonTextProps */\nexport type SkeletonTextProps = TextProps\n\nconst SkeletonTextOverlay = styled(SkeletonBox)`\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 0.25em);\n  transform: translateY(-50%);\n`\n\n/**\n * Allows you to create boxes the exact dimensions of a given piece of text\n */\nexport const SkeletonText: React.FC<SkeletonTextProps> = ({\n  children,\n  ...rest\n}) => {\n  const [borderProps, textProps] = splitBorderProps(rest)\n\n  return (\n    <Text color=\"transparent\" {...textProps}>\n      <Box as=\"span\" display=\"inline-flex\" position=\"relative\" aria-hidden>\n        {children}\n\n        <SkeletonTextOverlay {...borderProps} />\n      </Box>\n    </Text>\n  )\n}\n\nconst FADE_ANIMATION = keyframes`\n  0% { opacity: 0.5; }\n  50% { opacity: 0; }\n  100% { opacity: 0.5; }\n`\n\nconst SkeletonFade = styled(Box)`\n  background-color: ${themeGet(\"colors.white100\")};\n  animation: ${FADE_ANIMATION} 2s ease-in-out infinite;\n`\n\nexport type SkeletonProps = BoxProps\n\n/**\n * Animated wrapper for Skeletons\n */\nexport const Skeleton: React.FC<SkeletonProps> = ({ children, ...rest }) => {\n  return (\n    <Box position=\"relative\" {...rest}>\n      {children}\n\n      <SkeletonFade position=\"absolute\" top={0} right={0} bottom={0} left={0} />\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Skeleton.js","names":["_themeGet","require","_react","_interopRequireDefault","_styledComponents","_interopRequireWildcard","_styledSystem","_splitProps","_Box","_Text","_excluded","_excluded2","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","SkeletonBox","styled","Box","withConfig","displayName","componentId","exports","defaultProps","bg","splitBorderProps","splitProps","border","SkeletonTextOverlay","SkeletonText","_ref","children","rest","_splitBorderProps","_splitBorderProps2","borderProps","textProps","createElement","Text","color","as","display","position","FADE_ANIMATION","keyframes","SkeletonFade","themeGet","Skeleton","_ref2","top","right","bottom","left"],"sources":["../../../src/elements/Skeleton/Skeleton.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { border, BorderProps } from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text, TextProps } from \"../Text\"\n\n/** SkeletonProps */\nexport type SkeletonBoxProps = BoxProps\n\n/** A black10 Box */\nexport const SkeletonBox = styled(Box)``\nSkeletonBox.defaultProps = { bg: \"black10\" }\nSkeletonBox.displayName = \"SkeletonBox\"\n\nconst splitBorderProps = splitProps<BorderProps>(border)\n\n/** SkeletonTextProps */\nexport type SkeletonTextProps = TextProps\n\nconst SkeletonTextOverlay = styled(SkeletonBox)`\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 0.25em);\n  transform: translateY(-50%);\n`\n\n/**\n * Allows you to create boxes the exact dimensions of a given piece of text\n */\nexport const SkeletonText: React.FC<SkeletonTextProps> = ({\n  children,\n  ...rest\n}) => {\n  const [borderProps, textProps] = splitBorderProps(rest)\n\n  return (\n    <Text color=\"transparent\" {...textProps}>\n      <Box as=\"span\" display=\"inline-flex\" position=\"relative\" aria-hidden>\n        {children}\n\n        <SkeletonTextOverlay {...borderProps} />\n      </Box>\n    </Text>\n  )\n}\n\nconst FADE_ANIMATION = keyframes`\n  0% { opacity: 0.5; }\n  50% { opacity: 0; }\n  100% { opacity: 0.5; }\n`\n\nconst SkeletonFade = styled(Box)`\n  background-color: ${themeGet(\"colors.white100\")};\n  animation: ${FADE_ANIMATION} 2s ease-in-out infinite;\n`\n\nexport type SkeletonProps = BoxProps\n\n/**\n * Animated wrapper for Skeletons\n */\nexport const Skeleton: React.FC<SkeletonProps> = ({ children, ...rest }) => {\n  return (\n    <Box position=\"relative\" {...rest}>\n      {children}\n\n      <SkeletonFade position=\"absolute\" top={0} right={0} bottom={0} left={0} />\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/elements/Skip/Skip.js

@@ -16,7 +16,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; }
 var Container = (0, _styledComponents.default)(_Clickable.Clickable).withConfig({
   displayName: "Skip__Container",
-  componentId: "o4qt2-0"
+  componentId: "sc-o4qt2-0"
 })(["display:block;text-decoration:underline;outline:0;&:not(:focus):not(:active){", "}"], _VisuallyHidden.visuallyHiddenMixin);
 
 /**

package/dist/elements/Stack/Stack.d.ts

@@ -8,8 +8,6 @@ export declare type StackProps = BoxProps & {
  * `Stack` is `Box` with` display: flex` and `flex-direction: column`.
  * `gap` is required
  */
-export declare const Stack: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BoxProps & {
-    gap: ResponsiveValue<string | number>;
-}, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BoxProps & {
-    gap: ResponsiveValue<string | number>;
-}>;
+export declare const Stack: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, keyof BoxProps | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, StackProps>> & string;

package/dist/elements/StackableBorderBox/StackableBorderBox.d.ts

@@ -4,4 +4,6 @@ export declare type StackableBorderBoxProps = BorderBoxProps;
 /**
  * A stackable border box is a BorderBox that shares borders with its siblings.
  */
-export declare const StackableBorderBox: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("..").BoxProps & BorderBoxProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("..").BoxProps & BorderBoxProps>;
+export declare const StackableBorderBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("..").BoxProps> & import("..").BoxProps, keyof import("..").BoxProps | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>, BorderBoxProps>> & string;

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

@@ -1,22 +1,15 @@
 /// <reference types="react" />
 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"> & {
+export declare const Sup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("..").BoxProps> & import("..").BoxProps, keyof import("..").BoxProps | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "gap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textTransform" | "top" | "verticalAlign" | "width" | "zIndex" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "lineClamp" | "margin" | "overflow" | "padding" | "bg" | "borderX" | "borderY" | "size" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "textColor" | "variant" | "hyphenate" | "overflowEllipsis"> & 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<"xxxl" | "xxl" | "xl" | "lg" | "lg-display" | "md" | "sm" | "sm-display" | "xs" | "xxs" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     textColor?: import("styled-system").ResponsiveValue<"black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue200" | "blue150" | "blue100" | "brand" | "blue15" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     lineClamp?: number | undefined;
-} & {
+} & import("..").BoxProps & {
     hyphenate?: boolean | undefined;
     overflowEllipsis?: boolean | undefined;
     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<"xxxl" | "xxl" | "xl" | "lg" | "lg-display" | "md" | "sm" | "sm-display" | "xs" | "xxs" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    textColor?: import("styled-system").ResponsiveValue<"black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue200" | "blue150" | "blue100" | "brand" | "blue15" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    lineClamp?: number | undefined;
-} & {
-    hyphenate?: boolean | undefined;
-    overflowEllipsis?: boolean | undefined;
-    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;
-}>;
+}, never>> & string;

package/dist/elements/Swiper/Swiper.d.ts

@@ -3,11 +3,19 @@ import { BoxProps } from "../Box";
 /** SwiperRailProps */
 export declare type SwiperRailProps = BoxProps;
 /** A `SwiperRail` slides back and forth within the viewport */
-export declare const SwiperRail: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & BoxProps, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & BoxProps>;
+export declare const SwiperRail: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, keyof BoxProps | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, {
+    as?: React.ElementType<any> | undefined;
+}>> & string;
 /** SwiperCellProps */
 export declare type SwiperCellProps = BoxProps;
 /** A `SwiperCell` wraps a single child in the carousel */
-export declare const SwiperCell: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & BoxProps, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & BoxProps>;
+export declare const SwiperCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, keyof BoxProps | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, {
+    as?: React.ElementType<any> | undefined;
+}>> & string;
 declare type ScrollSnapAlign = "none" | "start" | "end" | "center";
 /** SwiperProps */
 export declare type SwiperProps = BoxProps & {

package/dist/elements/Swiper/Swiper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Swiper.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_useCursor2","_visuallyDisableScrollbar","_Box","_Carousel","_activeIndex","_percentage","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Container","styled","Box","withConfig","displayName","componentId","visuallyDisableScrollbar","SwiperRail","exports","defaultProps","display","SwiperCell","Swiper","_ref","_ref$initialIndex","initialIndex","children","_ref$snap","snap","_ref$Rail","Rail","_ref$Cell","Cell","onChange","onPageCountChange","rest","containerRef","useRef","cells","useMemo","Children","toArray","filter","isValidElement","map","child","ref","createRef","_useCursor","useCursor","initialCursor","max","index","cursor","setCursor","useEffect","cell","current","scrollIntoView","inline","block","rail","handleScroll","progress","percentage","viewport","clientWidth","total","scrollWidth","left","scrollLeft","page","activeIndex","addEventListener","passive","removeEventListener","createElement","mx","my","as","_ref2","isLast","pr","CELL_GAP_PADDING_AMOUNT","undefined","style","scrollSnapAlign"],"sources":["../../../src/elements/Swiper/Swiper.tsx"],"sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { useCursor } from \"use-cursor\"\nimport { visuallyDisableScrollbar } from \"../../helpers/visuallyDisableScrollbar\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CELL_GAP_PADDING_AMOUNT } from \"../Carousel\"\nimport { activeIndex } from \"./activeIndex\"\nimport { percentage } from \"./percentage\"\n\nconst Container = styled(Box)`\n  display: flex;\n  height: 100%;\n  padding: 0;\n  list-style: none;\n  overflow-y: hidden;\n  overflow-x: scroll;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n  ${visuallyDisableScrollbar}\n`\n\n/** SwiperRailProps */\nexport type SwiperRailProps = BoxProps\n\n/** A `SwiperRail` slides back and forth within the viewport */\nexport const SwiperRail = styled(Box)`\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n`\n\nSwiperRail.defaultProps = {\n  display: \"flex\",\n}\n\n/** SwiperCellProps */\nexport type SwiperCellProps = BoxProps\n\n/** A `SwiperCell` wraps a single child in the carousel */\nexport const SwiperCell = styled(Box)`\n  white-space: normal;\n`\n\ntype ScrollSnapAlign = \"none\" | \"start\" | \"end\" | \"center\"\n\n/** SwiperProps */\nexport type SwiperProps = BoxProps & {\n  initialIndex?: number\n  snap?: ScrollSnapAlign\n  children: React.ReactNode\n  Rail?: typeof SwiperRail | React.FC<SwiperRailProps>\n  /**\n   * If providing a custom `Cell` you must forward a ref so\n   * that cell widths can be calculated.\n   */\n  Cell?: React.ForwardRefExoticComponent<SwiperCellProps>\n  onChange?(index: number): void\n  onPageCountChange?(count: number): void\n}\n\n/**\n * A `Swiper` is like a `Carousel` but for touch devices. It accepts children\n * or a series of children that are JSX elements. It presents them in a\n * horizontal rail and when the width exceeds the width of the viewport, allows\n * for horitonzal swiping (or scrolling) with the option to snap to elements.\n */\nexport const Swiper: React.FC<SwiperProps> = ({\n  initialIndex = 0,\n  children,\n  snap = \"none\",\n  Rail = SwiperRail,\n  Cell = SwiperCell,\n  onChange,\n  onPageCountChange,\n  ...rest\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n\n  const cells = useMemo(\n    () =>\n      Children.toArray(children)\n        .filter(isValidElement)\n        .map((child) => ({ child, ref: createRef<HTMLDivElement>() })),\n    [children]\n  )\n\n  const { index, cursor, setCursor } = useCursor({\n    initialCursor: initialIndex,\n    max: cells.length,\n  })\n\n  useEffect(() => {\n    /**\n     * If on initial mount there is an `initialIndex` other than `0`,\n     * scroll it into view. The dependency array is left empty as we explicitly\n     * only want this to run on mount, and ignore any updates to `initialIndex`,\n     * which are handled separately below.\n     */\n    if (initialIndex === 0) return\n    const cell = cells[initialIndex]\n    if (!cell) return\n    cell.ref.current!.scrollIntoView({ inline: \"start\", block: \"nearest\" })\n  }, [])\n\n  useEffect(() => {\n    /**\n     * Since `cursor` tracks progress, if `cursor` and `initialIndex` are out\n     * of sync then that means the index has been changed programmatically\n     * and we should scroll the cell corresponding with that index into view.\n     */\n    if (initialIndex !== cursor) {\n      const cell = cells[initialIndex]\n      if (!cell) return\n      cell.ref.current!.scrollIntoView({ inline: \"start\", block: \"nearest\" })\n    }\n  }, [initialIndex])\n\n  useEffect(() => {\n    // Not mounted\n    if (!containerRef.current) return\n\n    // No need to track progress\n    if (!onChange) return\n\n    const { current: rail } = containerRef\n\n    const handleScroll = () => {\n      const progress = percentage({\n        viewport: rail.clientWidth,\n        total: rail.scrollWidth,\n        left: rail.scrollLeft,\n      })\n\n      const page = activeIndex({ progress, length: cells.length })\n\n      setCursor(page)\n    }\n\n    rail.addEventListener(\"scroll\", handleScroll, { passive: true })\n    return () => {\n      rail.removeEventListener(\"scroll\", handleScroll)\n    }\n  }, [cells])\n\n  useEffect(() => {\n    onChange && onChange(index)\n  }, [onChange, index])\n\n  useEffect(() => {\n    onPageCountChange && onPageCountChange(cells.length)\n  }, [onPageCountChange, cells.length])\n\n  return (\n    <Container ref={containerRef as any} mx={0} my={0} {...rest}>\n      <Rail as=\"ul\">\n        {cells.map(({ child, ref }, i) => {\n          const isLast = i === cells.length - 1\n\n          return (\n            <Cell\n              as=\"li\"\n              key={i}\n              ref={ref}\n              pr={!isLast ? CELL_GAP_PADDING_AMOUNT : undefined}\n              style={{ scrollSnapAlign: snap }}\n            >\n              {child}\n            </Cell>\n          )\n        })}\n      </Rail>\n    </Container>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Swiper.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_useCursor2","_visuallyDisableScrollbar","_Box","_Carousel","_activeIndex","_percentage","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Container","styled","Box","withConfig","displayName","componentId","visuallyDisableScrollbar","SwiperRail","exports","defaultProps","display","SwiperCell","Swiper","_ref","_ref$initialIndex","initialIndex","children","_ref$snap","snap","_ref$Rail","Rail","_ref$Cell","Cell","onChange","onPageCountChange","rest","containerRef","useRef","cells","useMemo","Children","toArray","filter","isValidElement","map","child","ref","createRef","_useCursor","useCursor","initialCursor","max","index","cursor","setCursor","useEffect","cell","current","scrollIntoView","inline","block","rail","handleScroll","progress","percentage","viewport","clientWidth","total","scrollWidth","left","scrollLeft","page","activeIndex","addEventListener","passive","removeEventListener","createElement","mx","my","as","_ref2","isLast","pr","CELL_GAP_PADDING_AMOUNT","undefined","style","scrollSnapAlign"],"sources":["../../../src/elements/Swiper/Swiper.tsx"],"sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { useCursor } from \"use-cursor\"\nimport { visuallyDisableScrollbar } from \"../../helpers/visuallyDisableScrollbar\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CELL_GAP_PADDING_AMOUNT } from \"../Carousel\"\nimport { activeIndex } from \"./activeIndex\"\nimport { percentage } from \"./percentage\"\n\nconst Container = styled(Box)`\n  display: flex;\n  height: 100%;\n  padding: 0;\n  list-style: none;\n  overflow-y: hidden;\n  overflow-x: scroll;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n  ${visuallyDisableScrollbar}\n`\n\n/** SwiperRailProps */\nexport type SwiperRailProps = BoxProps\n\n/** A `SwiperRail` slides back and forth within the viewport */\nexport const SwiperRail = styled(Box)<{ as?: React.ElementType }>`\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n`\n\nSwiperRail.defaultProps = {\n  display: \"flex\",\n}\n\n/** SwiperCellProps */\nexport type SwiperCellProps = BoxProps\n\n/** A `SwiperCell` wraps a single child in the carousel */\nexport const SwiperCell = styled(Box)<{ as?: React.ElementType }>`\n  white-space: normal;\n`\n\ntype ScrollSnapAlign = \"none\" | \"start\" | \"end\" | \"center\"\n\n/** SwiperProps */\nexport type SwiperProps = BoxProps & {\n  initialIndex?: number\n  snap?: ScrollSnapAlign\n  children: React.ReactNode\n  Rail?: typeof SwiperRail | React.FC<SwiperRailProps>\n  /**\n   * If providing a custom `Cell` you must forward a ref so\n   * that cell widths can be calculated.\n   */\n  Cell?: React.ForwardRefExoticComponent<SwiperCellProps>\n  onChange?(index: number): void\n  onPageCountChange?(count: number): void\n}\n\n/**\n * A `Swiper` is like a `Carousel` but for touch devices. It accepts children\n * or a series of children that are JSX elements. It presents them in a\n * horizontal rail and when the width exceeds the width of the viewport, allows\n * for horitonzal swiping (or scrolling) with the option to snap to elements.\n */\nexport const Swiper: React.FC<SwiperProps> = ({\n  initialIndex = 0,\n  children,\n  snap = \"none\",\n  Rail = SwiperRail,\n  Cell = SwiperCell,\n  onChange,\n  onPageCountChange,\n  ...rest\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null)\n\n  const cells = useMemo(\n    () =>\n      Children.toArray(children)\n        .filter(isValidElement)\n        .map((child) => ({ child, ref: createRef<HTMLDivElement>() })),\n    [children]\n  )\n\n  const { index, cursor, setCursor } = useCursor({\n    initialCursor: initialIndex,\n    max: cells.length,\n  })\n\n  useEffect(() => {\n    /**\n     * If on initial mount there is an `initialIndex` other than `0`,\n     * scroll it into view. The dependency array is left empty as we explicitly\n     * only want this to run on mount, and ignore any updates to `initialIndex`,\n     * which are handled separately below.\n     */\n    if (initialIndex === 0) return\n    const cell = cells[initialIndex]\n    if (!cell) return\n    cell.ref.current!.scrollIntoView({ inline: \"start\", block: \"nearest\" })\n  }, [])\n\n  useEffect(() => {\n    /**\n     * Since `cursor` tracks progress, if `cursor` and `initialIndex` are out\n     * of sync then that means the index has been changed programmatically\n     * and we should scroll the cell corresponding with that index into view.\n     */\n    if (initialIndex !== cursor) {\n      const cell = cells[initialIndex]\n      if (!cell) return\n      cell.ref.current!.scrollIntoView({ inline: \"start\", block: \"nearest\" })\n    }\n  }, [initialIndex])\n\n  useEffect(() => {\n    // Not mounted\n    if (!containerRef.current) return\n\n    // No need to track progress\n    if (!onChange) return\n\n    const { current: rail } = containerRef\n\n    const handleScroll = () => {\n      const progress = percentage({\n        viewport: rail.clientWidth,\n        total: rail.scrollWidth,\n        left: rail.scrollLeft,\n      })\n\n      const page = activeIndex({ progress, length: cells.length })\n\n      setCursor(page)\n    }\n\n    rail.addEventListener(\"scroll\", handleScroll, { passive: true })\n    return () => {\n      rail.removeEventListener(\"scroll\", handleScroll)\n    }\n  }, [cells])\n\n  useEffect(() => {\n    onChange && onChange(index)\n  }, [onChange, index])\n\n  useEffect(() => {\n    onPageCountChange && onPageCountChange(cells.length)\n  }, [onPageCountChange, cells.length])\n\n  return (\n    <Container ref={containerRef as any} mx={0} my={0} {...rest}>\n      <Rail as=\"ul\">\n        {cells.map(({ child, ref }, i) => {\n          const isLast = i === cells.length - 1\n\n          return (\n            <Cell\n              as=\"li\"\n              key={i}\n              ref={ref}\n              pr={!isLast ? CELL_GAP_PADDING_AMOUNT : undefined}\n              style={{ scrollSnapAlign: snap }}\n            >\n              {child}\n            </Cell>\n          )\n        })}\n      </Rail>\n    </Container>\n  )\n}\n"],"mappings":"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"}

package/dist/elements/Text/Text.d.ts

@@ -27,9 +27,9 @@ export declare type TextTransform = "none" | "capitalize" | "uppercase" | "lower
 /** styled functions for Text */
 export declare const textMixin: import("styled-system").styleFn;
 /** Adds ellipsis to overflowing text */
-export declare const overflowEllipsisMixin: import("styled-components").InterpolationValue[];
+export declare const overflowEllipsisMixin: import("styled-components").RuleSet<object>;
 /** Adds hyphenation to overflowing text */
-export declare const hyphenate: import("styled-components").InterpolationValue[];
+export declare const hyphenate: import("styled-components").RuleSet<object>;
 /** TextProps */
 export declare type TextProps = BaseTextProps & BoxProps & {
     hyphenate?: boolean;
@@ -38,50 +38,6 @@ export declare type TextProps = BaseTextProps & BoxProps & {
     lineClamp?: ResponsiveValue<number>;
 };
 /** Text */
-export declare const Text: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BoxProps & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
-    /**
-     * @description
-     * Variants of the text. Possible to pass an array that
-     * behaves accordingly to the media breakpoints ["sm", "md", "lg", "xl"]
-     * @example
-     * "sm"
-     * "md"
-     * ["md", "sm"]
-     * @see {@link TextVariant}
-     */
-    variant?: ResponsiveValue<"xxxl" | "xxl" | "xl" | "lg" | "lg-display" | "md" | "sm" | "sm-display" | "xs" | "xxs" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    textColor?: ResponsiveValue<"black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue200" | "blue150" | "blue100" | "brand" | "blue15" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    /**
-     * Max number of lines before truncating the content with an ellipsis at the end of the last line.
-     * Overwriting display is required for this.
-     */
-    lineClamp?: number | undefined;
-} & {
-    hyphenate?: boolean | undefined;
-    overflowEllipsis?: boolean | undefined;
-    textTransform?: ResponsiveValue<TextTransform, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    lineClamp?: ResponsiveValue<number, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-}, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & BoxProps & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
-    /**
-     * @description
-     * Variants of the text. Possible to pass an array that
-     * behaves accordingly to the media breakpoints ["sm", "md", "lg", "xl"]
-     * @example
-     * "sm"
-     * "md"
-     * ["md", "sm"]
-     * @see {@link TextVariant}
-     */
-    variant?: ResponsiveValue<"xxxl" | "xxl" | "xl" | "lg" | "lg-display" | "md" | "sm" | "sm-display" | "xs" | "xxs" | "bq", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    textColor?: ResponsiveValue<"black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue200" | "blue150" | "blue100" | "brand" | "blue15" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10", Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    /**
-     * Max number of lines before truncating the content with an ellipsis at the end of the last line.
-     * Overwriting display is required for this.
-     */
-    lineClamp?: number | undefined;
-} & {
-    hyphenate?: boolean | undefined;
-    overflowEllipsis?: boolean | undefined;
-    textTransform?: ResponsiveValue<TextTransform, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    lineClamp?: ResponsiveValue<number, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-}>;
+export declare const Text: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, keyof BoxProps | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, TextProps>> & string;

package/dist/elements/TextArea/TextArea.js

@@ -121,12 +121,12 @@ exports.TextArea = TextArea;
 TextArea.displayName = "TextArea";
 var StyledTextArea = _styledComponents.default.textarea.withConfig({
   displayName: "TextArea__StyledTextArea",
-  componentId: "tnq35k-0"
+  componentId: "sc-tnq35k-0"
 })(["appearance:none;display:block;width:100%;background-color:", ";padding:", ";resize:vertical;transition:border-color 0.25s,color 0.25s;outline:none;border:1px solid;border-radius:3px;font-family:", ";::placeholder{transition:color 0.25s,opacity 0.25s;}", ""], (0, _themeGet.themeGet)("colors.white100"), (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("fonts.sans"), function (props) {
-  return (0, _styledComponents.css)(["", " ", " ", " ", " ", " ", " &:hover{", "}&:not(:placeholder-shown){", " ", "}&:focus{outline:none;", ":not(:placeholder-shown){", " ", "}}&:disabled{cursor:default;", "}", ""], _tokens.TEXTAREA_STATES.default, props.hover && _tokens.TEXTAREA_STATES.hover, props.focus && _tokens.TEXTAREA_STATES.focus, props.active && _tokens.TEXTAREA_STATES.active, props.disabled && _tokens.TEXTAREA_STATES.disabled, props.error && _tokens.TEXTAREA_STATES.error, _tokens.TEXTAREA_STATES.hover, _tokens.TEXTAREA_STATES.completed, props.error && _tokens.TEXTAREA_STATES.error, _tokens.TEXTAREA_STATES.focus, !!props.placeholder && _tokens.TEXTAREA_STATES.active, props.error && _tokens.TEXTAREA_STATES.error, _tokens.TEXTAREA_STATES.disabled, props.title && (0, _styledComponents.css)(["::placeholder{opacity:0;}"]));
+  return (0, _styledComponents.css)(["", " ", " ", " ", " ", " ", " &:hover{", "}&:not(:placeholder-shown){", " ", "}&:focus{outline:none;", " :not(:placeholder-shown){", " ", "}}&:disabled{cursor:default;", "}", ""], _tokens.TEXTAREA_STATES.default, props.hover && _tokens.TEXTAREA_STATES.hover, props.focus && _tokens.TEXTAREA_STATES.focus, props.active && _tokens.TEXTAREA_STATES.active, props.disabled && _tokens.TEXTAREA_STATES.disabled, props.error && _tokens.TEXTAREA_STATES.error, _tokens.TEXTAREA_STATES.hover, _tokens.TEXTAREA_STATES.completed, props.error && _tokens.TEXTAREA_STATES.error, _tokens.TEXTAREA_STATES.focus, !!props.placeholder && _tokens.TEXTAREA_STATES.active, props.error && _tokens.TEXTAREA_STATES.error, _tokens.TEXTAREA_STATES.disabled, props.title && (0, _styledComponents.css)(["::placeholder{opacity:0;}"]));
 });
 var StyledLabel = _styledComponents.default.label.withConfig({
   displayName: "TextArea__StyledLabel",
-  componentId: "tnq35k-1"
+  componentId: "sc-tnq35k-1"
 })(["position:absolute;top:25px;left:6px;padding:0 5px;background-color:transparent;transform:translateY(-50%);transition:", ";transition-property:color,transform,padding,font-size;font-family:", ";pointer-events:none;& > span{background-color:", ";height:100%;width:100%;display:block;position:absolute;top:0;left:0;z-index:-1;transition:", ";transition-property:height,top;transition-delay:0.1s;}"], _helpers.FORM_ELEMENT_TRANSITION, (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("colors.white100"), _helpers.FORM_ELEMENT_TRANSITION);
 //# sourceMappingURL=TextArea.js.map