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

package/dist/esm/elements/Text/Text.js

@@ -1,8 +1,7 @@
-import { TEXT_VARIANTS, TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
+import { TEXT_VARIANTS } from "@artsy/palette-tokens/dist/typography/v3";
 import styled, { css } from "styled-components";
-import { color, ColorProps, compose, ResponsiveValue, style, system, typography, TypographyProps, variant } from "styled-system";
-import { Color } from "../../Theme";
-import { Box, BoxProps } from "../Box";
+import { color, compose, style, system, typography, variant } from "styled-system";
+import { Box } from "../Box";
 
 /** BaseTextProps */
 

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

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["TEXT_VARIANTS","TextVariant","styled","css","color","ColorProps","compose","ResponsiveValue","style","system","typography","TypographyProps","variant","Color","Box","BoxProps","textColor","prop","cssProperty","key","textTransform","textMixin","overflowEllipsisMixin","hyphenate","Text","withConfig","displayName","componentId","variants","props","overflowEllipsis","lineClamp","defaultProps","fontFamily"],"sources":["../../../../src/elements/Text/Text.tsx"],"sourcesContent":["import {\n  TEXT_VARIANTS,\n  TextVariant,\n} from \"@artsy/palette-tokens/dist/typography/v3\"\nimport styled, { css } from \"styled-components\"\nimport {\n  color,\n  ColorProps,\n  compose,\n  ResponsiveValue,\n  style,\n  system,\n  typography,\n  TypographyProps,\n  variant,\n} from \"styled-system\"\nimport { Color } from \"../../Theme\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** BaseTextProps */\nexport type BaseTextProps = TypographyProps &\n  Omit<ColorProps, \"color\"> & {\n    /**\n     * @description\n     * Variants of the text. Possible to pass an array that\n     * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n     * @example\n     * \"sm\"\n     * \"md\"\n     * [\"md\", \"sm\"]\n     * @see {@link TextVariant}\n     */\n    variant?: ResponsiveValue<TextVariant>\n    textColor?: ResponsiveValue<Color>\n    /**\n     * Max number of lines before truncating the content with an ellipsis at the end of the last line.\n     * Overwriting display is required for this.\n     */\n    lineClamp?: number\n  }\n\nconst textColor = style({\n  prop: \"textColor\",\n  cssProperty: \"color\",\n  key: \"colors\",\n})\n\nexport type TextTransform =\n  | \"none\"\n  | \"capitalize\"\n  | \"uppercase\"\n  | \"lowercase\"\n  | \"initial\"\n  | \"inherit\"\n\nconst textTransform = system({ textTransform: true })\n\n/** styled functions for Text */\nexport const textMixin = compose(typography, color, textColor, textTransform)\n\n/** Adds ellipsis to overflowing text */\nexport const overflowEllipsisMixin = css`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\n/** Adds hyphenation to overflowing text */\nexport const hyphenate = css`\n  word-wrap: break-word;\n  word-break: break-word;\n  hyphens: auto;\n`\n\n/** TextProps */\nexport type TextProps = BaseTextProps &\n  BoxProps & {\n    hyphenate?: boolean\n    overflowEllipsis?: boolean\n    textTransform?: ResponsiveValue<TextTransform>\n    lineClamp?: ResponsiveValue<number>\n  }\n\n/** Text */\nexport const Text = styled(Box)<TextProps>`\n  && {\n    ${variant({ variants: TEXT_VARIANTS })}\n    ${textMixin}\n\n    ${(props) => {\n      return css`\n        ${props.hyphenate && hyphenate}\n        ${props.overflowEllipsis && overflowEllipsisMixin}\n        ${props.lineClamp &&\n        css`\n          display: -webkit-box;\n          -webkit-box-orient: vertical;\n          -webkit-line-clamp: ${props.lineClamp};\n          line-clamp: ${props.lineClamp};\n          overflow: hidden;\n        `}\n      `\n    }}\n  }\n`\n\nText.displayName = \"Text\"\n\nText.defaultProps = {\n  fontFamily: \"sans\",\n  variant: \"sm\",\n}\n"],"mappings":"AAAA,SACEA,aAAa,EACbC,WAAW,QACN,0CAA0C;AACjD,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SACEC,KAAK,EACLC,UAAU,EACVC,OAAO,EACPC,eAAe,EACfC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,eAAe,EACfC,OAAO,QACF,eAAe;AACtB,SAASC,KAAK;AACd,SAASC,GAAG,EAAEC,QAAQ;;AAEtB;;AAsBA,IAAMC,SAAS,GAAGR,KAAK,CAAC;EACtBS,IAAI,EAAE,WAAW;EACjBC,WAAW,EAAE,OAAO;EACpBC,GAAG,EAAE;AACP,CAAC,CAAC;AAUF,IAAMC,aAAa,GAAGX,MAAM,CAAC;EAAEW,aAAa,EAAE;AAAK,CAAC,CAAC;;AAErD;AACA,OAAO,IAAMC,SAAS,GAAGf,OAAO,CAACI,UAAU,EAAEN,KAAK,EAAEY,SAAS,EAAEI,aAAa,CAAC;;AAE7E;AACA,OAAO,IAAME,qBAAqB,GAAGnB,GAAG,gEAIvC;;AAED;AACA,OAAO,IAAMoB,SAAS,GAAGpB,GAAG,8DAI3B;;AAED;;AASA;AACA,OAAO,IAAMqB,IAAI,GAAGtB,MAAM,CAACY,GAAG,CAAC,CAAAW,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2BAEzBf,OAAO,CAAC;EAAEgB,QAAQ,EAAE5B;AAAc,CAAC,CAAC,EACpCqB,SAAS,EAET,UAACQ,KAAK,EAAK;EACX,OAAO1B,GAAG,qBACN0B,KAAK,CAACN,SAAS,IAAIA,SAAS,EAC5BM,KAAK,CAACC,gBAAgB,IAAIR,qBAAqB,EAC/CO,KAAK,CAACE,SAAS,IACjB5B,GAAG,+GAGqB0B,KAAK,CAACE,SAAS,EACvBF,KAAK,CAACE,SAAS,CAE9B;AAEL,CAAC,CAEJ;AAEDP,IAAI,CAACE,WAAW,GAAG,MAAM;AAEzBF,IAAI,CAACQ,YAAY,GAAG;EAClBC,UAAU,EAAE,MAAM;EAClBrB,OAAO,EAAE;AACX,CAAC"}
+{"version":3,"file":"Text.js","names":["TEXT_VARIANTS","styled","css","color","compose","style","system","typography","variant","Box","textColor","prop","cssProperty","key","textTransform","textMixin","overflowEllipsisMixin","hyphenate","Text","withConfig","displayName","componentId","variants","props","overflowEllipsis","lineClamp","defaultProps","fontFamily"],"sources":["../../../../src/elements/Text/Text.tsx"],"sourcesContent":["import {\n  TEXT_VARIANTS,\n  TextVariant,\n} from \"@artsy/palette-tokens/dist/typography/v3\"\nimport styled, { css } from \"styled-components\"\nimport {\n  color,\n  ColorProps,\n  compose,\n  ResponsiveValue,\n  style,\n  system,\n  typography,\n  TypographyProps,\n  variant,\n} from \"styled-system\"\nimport { Color } from \"../../Theme\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** BaseTextProps */\nexport type BaseTextProps = TypographyProps &\n  Omit<ColorProps, \"color\"> & {\n    /**\n     * @description\n     * Variants of the text. Possible to pass an array that\n     * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n     * @example\n     * \"sm\"\n     * \"md\"\n     * [\"md\", \"sm\"]\n     * @see {@link TextVariant}\n     */\n    variant?: ResponsiveValue<TextVariant>\n    textColor?: ResponsiveValue<Color>\n    /**\n     * Max number of lines before truncating the content with an ellipsis at the end of the last line.\n     * Overwriting display is required for this.\n     */\n    lineClamp?: number\n  }\n\nconst textColor = style({\n  prop: \"textColor\",\n  cssProperty: \"color\",\n  key: \"colors\",\n})\n\nexport type TextTransform =\n  | \"none\"\n  | \"capitalize\"\n  | \"uppercase\"\n  | \"lowercase\"\n  | \"initial\"\n  | \"inherit\"\n\nconst textTransform = system({ textTransform: true })\n\n/** styled functions for Text */\nexport const textMixin = compose(typography, color, textColor, textTransform)\n\n/** Adds ellipsis to overflowing text */\nexport const overflowEllipsisMixin = css`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\n/** Adds hyphenation to overflowing text */\nexport const hyphenate = css`\n  word-wrap: break-word;\n  word-break: break-word;\n  hyphens: auto;\n`\n\n/** TextProps */\nexport type TextProps = BaseTextProps &\n  BoxProps & {\n    hyphenate?: boolean\n    overflowEllipsis?: boolean\n    textTransform?: ResponsiveValue<TextTransform>\n    lineClamp?: ResponsiveValue<number>\n  }\n\n/** Text */\nexport const Text = styled(Box)<TextProps>`\n  && {\n    ${variant({ variants: TEXT_VARIANTS })}\n    ${textMixin}\n\n    ${(props) => {\n      return css`\n        ${props.hyphenate && hyphenate}\n        ${props.overflowEllipsis && overflowEllipsisMixin}\n        ${props.lineClamp &&\n        css`\n          display: -webkit-box;\n          -webkit-box-orient: vertical;\n          -webkit-line-clamp: ${props.lineClamp};\n          line-clamp: ${props.lineClamp};\n          overflow: hidden;\n        `}\n      `\n    }}\n  }\n`\n\nText.displayName = \"Text\"\n\nText.defaultProps = {\n  fontFamily: \"sans\",\n  variant: \"sm\",\n}\n"],"mappings":"AAAA,SACEA,aAAa,QAER,0CAA0C;AACjD,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SACEC,KAAK,EAELC,OAAO,EAEPC,KAAK,EACLC,MAAM,EACNC,UAAU,EAEVC,OAAO,QACF,eAAe;AAEtB,SAASC,GAAG;;AAEZ;;AAsBA,IAAMC,SAAS,GAAGL,KAAK,CAAC;EACtBM,IAAI,EAAE,WAAW;EACjBC,WAAW,EAAE,OAAO;EACpBC,GAAG,EAAE;AACP,CAAC,CAAC;AAUF,IAAMC,aAAa,GAAGR,MAAM,CAAC;EAAEQ,aAAa,EAAE;AAAK,CAAC,CAAC;;AAErD;AACA,OAAO,IAAMC,SAAS,GAAGX,OAAO,CAACG,UAAU,EAAEJ,KAAK,EAAEO,SAAS,EAAEI,aAAa,CAAC;;AAE7E;AACA,OAAO,IAAME,qBAAqB,GAAGd,GAAG,gEAIvC;;AAED;AACA,OAAO,IAAMe,SAAS,GAAGf,GAAG,8DAI3B;;AAED;;AASA;AACA,OAAO,IAAMgB,IAAI,GAAGjB,MAAM,CAACQ,GAAG,CAAC,CAAAU,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2BAEzBb,OAAO,CAAC;EAAEc,QAAQ,EAAEtB;AAAc,CAAC,CAAC,EACpCe,SAAS,EAET,UAACQ,KAAK,EAAK;EACX,OAAOrB,GAAG,qBACNqB,KAAK,CAACN,SAAS,IAAIA,SAAS,EAC5BM,KAAK,CAACC,gBAAgB,IAAIR,qBAAqB,EAC/CO,KAAK,CAACE,SAAS,IACjBvB,GAAG,+GAGqBqB,KAAK,CAACE,SAAS,EACvBF,KAAK,CAACE,SAAS,CAE9B;AAEL,CAAC,CAEJ;AAEDP,IAAI,CAACE,WAAW,GAAG,MAAM;AAEzBF,IAAI,CAACQ,YAAY,GAAG;EAClBC,UAAU,EAAE,MAAM;EAClBnB,OAAO,EAAE;AACX,CAAC"}

package/dist/esm/elements/TextArea/TextArea.js

@@ -12,7 +12,7 @@ import { themeGet } from "@styled-system/theme-get";
 import React, { useCallback, useMemo, useState } from "react";
 import styled, { css } from "styled-components";
 import { RequiredField } from "../../shared/RequiredField";
-import { Box, BoxProps, splitBoxProps } from "../Box";
+import { Box, splitBoxProps } from "../Box";
 import { Text } from "../Text";
 import { Tooltip } from "../Tooltip";
 import { TEXTAREA_STATES } from "./tokens";

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["themeGet","React","useCallback","useMemo","useState","styled","css","RequiredField","Box","BoxProps","splitBoxProps","Text","Tooltip","TEXTAREA_STATES","FORM_ELEMENT_TRANSITION","TextArea","forwardRef","_ref","ref","error","disabled","focus","hover","characterLimit","characterLimitHelper","title","description","_ref$defaultValue","defaultValue","required","onChange","rest","_objectWithoutProperties","_excluded","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","inputProps","_useState","_useState2","value","setValue","characterLimitExceeded","text","Boolean","length","characterLimitReached","handleChange","event","nextValue","currentTarget","exceedsCharacterLimit","hasError","showCharacterLimitReached","createElement","_extends","width","pointer","content","placement","variant","color","textAlign","position","mt","StyledTextArea","placeholder","StyledLabel","htmlFor","name","display","mx","flex","ml","displayName","textarea","withConfig","componentId","props","default","active","completed","label"],"sources":["../../../../src/elements/TextArea/TextArea.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback, useMemo, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { TEXTAREA_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface TextAreaProps\n  extends BoxProps,\n    Omit<\n      React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n      \"onChange\" | \"title\"\n    > {\n  active?: boolean\n  characterLimit?: number\n  characterLimitHelper?: boolean\n  defaultValue?: string\n  description?: React.ReactNode\n  required?: boolean\n  title?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  onChange?(result: TextAreaChange): void\n}\n\nexport interface TextAreaChange {\n  value: string\n  exceedsCharacterLimit: boolean\n}\n\n/** TextArea */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      error,\n      disabled,\n      focus,\n      hover,\n      characterLimit,\n      characterLimitHelper,\n      title,\n      description,\n      defaultValue = \"\",\n      required,\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const [value, setValue] = useState(defaultValue)\n\n    const characterLimitExceeded = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length > characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const characterLimitReached = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length >= characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.({\n          value: nextValue,\n          exceedsCharacterLimit: characterLimitExceeded(nextValue),\n        })\n      },\n      [characterLimitExceeded, onChange]\n    )\n\n    const hasError = useMemo(\n      () => Boolean(error || characterLimitExceeded(value)),\n      [characterLimitExceeded, error, value]\n    )\n\n    const showCharacterLimitReached =\n      characterLimitHelper &&\n      typeof characterLimit !== \"undefined\" &&\n      characterLimitReached(value)\n\n    return (\n      <Box width=\"100%\" {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Box position=\"relative\" mt={!!title && !description ? 1 : 0}>\n          <StyledTextArea\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={hasError}\n            onChange={handleChange}\n            defaultValue={defaultValue}\n            required={required}\n            title={title}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n        </Box>\n\n        {(required || characterLimit) && !(error && typeof error === \"string\") && (\n          <Box display=\"flex\" mt={0.5} mx={1}>\n            {required && !showCharacterLimitReached && (\n              <RequiredField flex={1} disabled={disabled} />\n            )}\n\n            {showCharacterLimitReached && (\n              <Text flex={1} variant=\"xs\" color=\"mono60\" textAlign=\"left\">\n                Character limit reached\n              </Text>\n            )}\n\n            {typeof characterLimit !== \"undefined\" && (\n              <Text\n                flex={1}\n                variant=\"xs\"\n                color={characterLimitExceeded(value) ? \"red100\" : \"mono60\"}\n                textAlign=\"right\"\n              >\n                {value.length}/{characterLimit}\n              </Text>\n            )}\n          </Box>\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" color=\"red100\" mt={0.5} ml={1}>\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nTextArea.displayName = \"TextArea\"\n\ntype StyledTextAreaProps = Pick<\n  TextAreaProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\"\n>\n\nconst StyledTextArea = styled.textarea<StyledTextAreaProps>`\n  appearance: none;\n  display: block;\n  width: 100%;\n  background-color: ${themeGet(\"colors.mono0\")};\n  padding: ${themeGet(\"space.1\")};\n  resize: vertical;\n  transition: border-color 0.25s, color 0.25s;\n  outline: none;\n  border: 1px solid;\n  border-radius: 3px;\n  font-family: ${themeGet(\"fonts.sans\")};\n\n  &::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${TEXTAREA_STATES.default}\n      ${props.hover && TEXTAREA_STATES.hover}\n      ${props.focus && TEXTAREA_STATES.focus}\n      ${props.active && TEXTAREA_STATES.active}\n      ${props.disabled && TEXTAREA_STATES.disabled}\n      ${props.error && TEXTAREA_STATES.error}\n\n      &:hover {\n        ${TEXTAREA_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${TEXTAREA_STATES.completed}\n        ${props.error && TEXTAREA_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${TEXTAREA_STATES.focus}\n\n        :not(:placeholder-shown) {\n          ${!!props.placeholder && TEXTAREA_STATES.active}\n          ${props.error && TEXTAREA_STATES.error}\n        }\n\n        &::placeholder {\n          opacity: 1;\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${TEXTAREA_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        &::placeholder {\n          opacity: 0;\n        }\n      `}\n    `\n  }}\n`\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 25px;\n  left: 6px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n\n  & > span {\n    background-color: ${themeGet(\"colors.mono0\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"TextArea.js","names":["themeGet","React","useCallback","useMemo","useState","styled","css","RequiredField","Box","splitBoxProps","Text","Tooltip","TEXTAREA_STATES","FORM_ELEMENT_TRANSITION","TextArea","forwardRef","_ref","ref","error","disabled","focus","hover","characterLimit","characterLimitHelper","title","description","_ref$defaultValue","defaultValue","required","onChange","rest","_objectWithoutProperties","_excluded","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","inputProps","_useState","_useState2","value","setValue","characterLimitExceeded","text","Boolean","length","characterLimitReached","handleChange","event","nextValue","currentTarget","exceedsCharacterLimit","hasError","showCharacterLimitReached","createElement","_extends","width","pointer","content","placement","variant","color","textAlign","position","mt","StyledTextArea","placeholder","StyledLabel","htmlFor","name","display","mx","flex","ml","displayName","textarea","withConfig","componentId","props","default","active","completed","label"],"sources":["../../../../src/elements/TextArea/TextArea.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback, useMemo, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { TEXTAREA_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface TextAreaProps\n  extends BoxProps,\n    Omit<\n      React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n      \"onChange\" | \"title\"\n    > {\n  active?: boolean\n  characterLimit?: number\n  characterLimitHelper?: boolean\n  defaultValue?: string\n  description?: React.ReactNode\n  required?: boolean\n  title?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  onChange?(result: TextAreaChange): void\n}\n\nexport interface TextAreaChange {\n  value: string\n  exceedsCharacterLimit: boolean\n}\n\n/** TextArea */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      error,\n      disabled,\n      focus,\n      hover,\n      characterLimit,\n      characterLimitHelper,\n      title,\n      description,\n      defaultValue = \"\",\n      required,\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const [value, setValue] = useState(defaultValue)\n\n    const characterLimitExceeded = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length > characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const characterLimitReached = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length >= characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.({\n          value: nextValue,\n          exceedsCharacterLimit: characterLimitExceeded(nextValue),\n        })\n      },\n      [characterLimitExceeded, onChange]\n    )\n\n    const hasError = useMemo(\n      () => Boolean(error || characterLimitExceeded(value)),\n      [characterLimitExceeded, error, value]\n    )\n\n    const showCharacterLimitReached =\n      characterLimitHelper &&\n      typeof characterLimit !== \"undefined\" &&\n      characterLimitReached(value)\n\n    return (\n      <Box width=\"100%\" {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Box position=\"relative\" mt={!!title && !description ? 1 : 0}>\n          <StyledTextArea\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={hasError}\n            onChange={handleChange}\n            defaultValue={defaultValue}\n            required={required}\n            title={title}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n        </Box>\n\n        {(required || characterLimit) && !(error && typeof error === \"string\") && (\n          <Box display=\"flex\" mt={0.5} mx={1}>\n            {required && !showCharacterLimitReached && (\n              <RequiredField flex={1} disabled={disabled} />\n            )}\n\n            {showCharacterLimitReached && (\n              <Text flex={1} variant=\"xs\" color=\"mono60\" textAlign=\"left\">\n                Character limit reached\n              </Text>\n            )}\n\n            {typeof characterLimit !== \"undefined\" && (\n              <Text\n                flex={1}\n                variant=\"xs\"\n                color={characterLimitExceeded(value) ? \"red100\" : \"mono60\"}\n                textAlign=\"right\"\n              >\n                {value.length}/{characterLimit}\n              </Text>\n            )}\n          </Box>\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" color=\"red100\" mt={0.5} ml={1}>\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nTextArea.displayName = \"TextArea\"\n\ntype StyledTextAreaProps = Pick<\n  TextAreaProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\"\n>\n\nconst StyledTextArea = styled.textarea<StyledTextAreaProps>`\n  appearance: none;\n  display: block;\n  width: 100%;\n  background-color: ${themeGet(\"colors.mono0\")};\n  padding: ${themeGet(\"space.1\")};\n  resize: vertical;\n  transition: border-color 0.25s, color 0.25s;\n  outline: none;\n  border: 1px solid;\n  border-radius: 3px;\n  font-family: ${themeGet(\"fonts.sans\")};\n\n  &::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${TEXTAREA_STATES.default}\n      ${props.hover && TEXTAREA_STATES.hover}\n      ${props.focus && TEXTAREA_STATES.focus}\n      ${props.active && TEXTAREA_STATES.active}\n      ${props.disabled && TEXTAREA_STATES.disabled}\n      ${props.error && TEXTAREA_STATES.error}\n\n      &:hover {\n        ${TEXTAREA_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${TEXTAREA_STATES.completed}\n        ${props.error && TEXTAREA_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${TEXTAREA_STATES.focus}\n\n        :not(:placeholder-shown) {\n          ${!!props.placeholder && TEXTAREA_STATES.active}\n          ${props.error && TEXTAREA_STATES.error}\n        }\n\n        &::placeholder {\n          opacity: 1;\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${TEXTAREA_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        &::placeholder {\n          opacity: 0;\n        }\n      `}\n    `\n  }}\n`\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 25px;\n  left: 6px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n\n  & > span {\n    background-color: ${themeGet(\"colors.mono0\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n`\n"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
 import { themeGet } from "@styled-system/theme-get";
 import { css } from "styled-components";
-import { State } from "./types";
 export var TEXTAREA_STATES = {
   default: css(["min-height:", ";font-size:", ";line-height:", ";color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";font-size:", ";}"], themeGet("space.12"), themeGet("textVariants.sm-display.fontSize"), themeGet("textVariants.sm.lineHeight"), themeGet("colors.mono100"), themeGet("colors.mono30"), themeGet("colors.mono60"), themeGet("colors.mono60"), themeGet("textVariants.sm-display.fontSize")),
   focus: css(["color:", ";border-color:", ";::placeholder{color:", ";opacity:1;}& + label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], themeGet("colors.mono100"), themeGet("colors.blue100"), themeGet("colors.mono60"), themeGet("colors.blue100"), themeGet("textVariants.xs.fontSize")),

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

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["themeGet","css","State","TEXTAREA_STATES","default","focus","hover","active","completed","disabled","error"],"sources":["../../../../src/elements/TextArea/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\n\nexport const TEXTAREA_STATES: Record<State, any> = {\n  default: css`\n    min-height: ${themeGet(\"space.12\")};\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    line-height: ${themeGet(\"textVariants.sm.lineHeight\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n      opacity: 1;\n    }\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  hover: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n  `,\n  active: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\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  completed: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    & + label {\n      color: ${themeGet(\"colors.mono60\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    background-color: transparent;\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n\n    &:not(:placeholder-shown) + label {\n      color: ${themeGet(\"colors.mono30\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:placeholder-shown + label {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n  `,\n  error: css`\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & + label {\n      color: ${themeGet(\"colors.red100\")};\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"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAAQ,mBAAmB;AACvC,SAASC,KAAK;AAEd,OAAO,IAAMC,eAAmC,GAAG;EACjDC,OAAO,EAAEH,GAAG,mJACID,QAAQ,CAAC,UAAU,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,EAC1CA,QAAQ,CAAC,4BAA4B,CAAC,EAC5CA,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,CAE5D;EACDK,KAAK,EAAEJ,GAAG,sKACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAG/BA,QAAQ,CAAC,eAAe,CAAC,EAKzBA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EACDM,KAAK,EAAEL,GAAG,oFACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,CAEtC;EACDO,MAAM,EAAEN,GAAG,4JACAD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAG/BA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EACDQ,SAAS,EAAEP,GAAG,kIACHD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EACDS,QAAQ,EAAER,GAAG,yPACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,EASxCA,QAAQ,CAAC,eAAe,CAAC,CAErC;EACDU,KAAK,EAAET,GAAG,uHACQD,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC;AAQvD,CAAC"}
+{"version":3,"file":"tokens.js","names":["themeGet","css","TEXTAREA_STATES","default","focus","hover","active","completed","disabled","error"],"sources":["../../../../src/elements/TextArea/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\n\nexport const TEXTAREA_STATES: Record<State, any> = {\n  default: css`\n    min-height: ${themeGet(\"space.12\")};\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    line-height: ${themeGet(\"textVariants.sm.lineHeight\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n      opacity: 1;\n    }\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  hover: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n  `,\n  active: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\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  completed: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    & + label {\n      color: ${themeGet(\"colors.mono60\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    background-color: transparent;\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n\n    &:not(:placeholder-shown) + label {\n      color: ${themeGet(\"colors.mono30\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:placeholder-shown + label {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n  `,\n  error: css`\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & + label {\n      color: ${themeGet(\"colors.red100\")};\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"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAAQ,mBAAmB;AAGvC,OAAO,IAAMC,eAAmC,GAAG;EACjDC,OAAO,EAAEF,GAAG,mJACID,QAAQ,CAAC,UAAU,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,EAC1CA,QAAQ,CAAC,4BAA4B,CAAC,EAC5CA,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,CAE5D;EACDI,KAAK,EAAEH,GAAG,sKACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAG/BA,QAAQ,CAAC,eAAe,CAAC,EAKzBA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EACDK,KAAK,EAAEJ,GAAG,oFACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,CAEtC;EACDM,MAAM,EAAEL,GAAG,4JACAD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAG/BA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EACDO,SAAS,EAAEN,GAAG,kIACHD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EACDQ,QAAQ,EAAEP,GAAG,yPACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,EASxCA,QAAQ,CAAC,eAAe,CAAC,CAErC;EACDS,KAAK,EAAER,GAAG,uHACQD,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC;AAQvD,CAAC"}

package/dist/esm/elements/Toasts/Toast.js

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

package/dist/esm/elements/Toasts/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","names":["React","styled","variant","Box","BoxProps","Flex","Clickable","Text","Toast","_ref","id","action","description","message","onClose","rest","_objectWithoutProperties","_excluded","handleClick","createElement","Container","_extends","width","px","py","bg","color","role","tabIndex","onClick","onKeyPress","event","key","style","cursor","alignItems","justifyContent","textDecoration","label","displayName","TOAST_VARIANTS","backgroundColor","alert","success","error","withConfig","componentId","variants"],"sources":["../../../../src/elements/Toasts/Toast.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\n\nexport type ToastVariant = keyof typeof TOAST_VARIANTS\n\nexport interface ToastProps extends BoxProps {\n  id: string\n  action?: {\n    label: string\n    onClick(): void\n  }\n  description?: string\n  message: string\n  onClose?(id: string): void\n  variant?: ToastVariant\n}\n\nexport const Toast: React.FC<React.PropsWithChildren<ToastProps>> = ({\n  id,\n  action,\n  description,\n  message,\n  onClose,\n  ...rest\n}) => {\n  const handleClick = () => {\n    onClose?.(id)\n  }\n\n  return (\n    <Container\n      width=\"100%\"\n      px={2}\n      py={1}\n      bg=\"mono100\"\n      color=\"mono0\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleClick}\n      onKeyPress={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          onClose?.(id)\n        }\n      }}\n      style={{ cursor: \"pointer\" }}\n      {...rest}\n    >\n      <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n        <Text variant=\"sm-display\">{message}</Text>\n\n        {action && (\n          <Clickable onClick={action.onClick} textDecoration=\"underline\">\n            <Text variant=\"xs\">{action.label}</Text>\n          </Clickable>\n        )}\n      </Flex>\n\n      {description && <Text variant=\"xs\">{description}</Text>}\n    </Container>\n  )\n}\n\nexport const TOAST_VARIANTS = {\n  message: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n  alert: {\n    backgroundColor: \"blue100\",\n    color: \"mono0\",\n  },\n  success: {\n    backgroundColor: \"green100\",\n    color: \"mono0\",\n  },\n  error: {\n    backgroundColor: \"red100\",\n    color: \"mono0\",\n  },\n}\n\nconst Container = styled(Box)`\n  ${variant({ variants: TOAST_VARIANTS })}\n  user-select: none;\n`\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,GAAG,EAAEC,QAAQ;AACtB,SAASC,IAAI;AACb,SAASC,SAAS;AAClB,SAASC,IAAI;AAgBb,OAAO,IAAMC,KAAoD,GAAG,SAAvDA,KAAoDA,CAAAC,IAAA,EAO3D;EAAA,IANJC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IACXC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACJC,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAEP,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxBJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGJ,EAAE,CAAC;EACf,CAAC;EAED,oBACEV,KAAA,CAAAmB,aAAA,CAACC,SAAS,EAAAC,QAAA;IACRC,KAAK,EAAC,MAAM;IACZC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAC,SAAS;IACZC,KAAK,EAAC,OAAO;IACbC,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE,CAAE;IACZC,OAAO,EAAEX,WAAY;IACrBY,UAAU,EAAE,SAAZA,UAAUA,CAAGC,KAAK,EAAK;MACrB,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;QAC9ClB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGJ,EAAE,CAAC;MACf;IACF,CAAE;IACFuB,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAU;EAAE,GACzBnB,IAAI,gBAERf,KAAA,CAAAmB,aAAA,CAACd,IAAI;IAAC8B,UAAU,EAAC,YAAY;IAACC,cAAc,EAAC;EAAe,gBAC1DpC,KAAA,CAAAmB,aAAA,CAACZ,IAAI;IAACL,OAAO,EAAC;EAAY,GAAEW,OAAO,CAAQ,EAE1CF,MAAM,iBACLX,KAAA,CAAAmB,aAAA,CAACb,SAAS;IAACuB,OAAO,EAAElB,MAAM,CAACkB,OAAQ;IAACQ,cAAc,EAAC;EAAW,gBAC5DrC,KAAA,CAAAmB,aAAA,CAACZ,IAAI;IAACL,OAAO,EAAC;EAAI,GAAES,MAAM,CAAC2B,KAAK,CAAQ,CAE3C,CACI,EAEN1B,WAAW,iBAAIZ,KAAA,CAAAmB,aAAA,CAACZ,IAAI;IAACL,OAAO,EAAC;EAAI,GAAEU,WAAW,CAAQ,CAC7C;AAEhB,CAAC;AA3CYJ,KAAoD,CAAA+B,WAAA;AA6CjE,OAAO,IAAMC,cAAc,GAAG;EAC5B3B,OAAO,EAAE;IACP4B,eAAe,EAAE,SAAS;IAC1Bf,KAAK,EAAE;EACT,CAAC;EACDgB,KAAK,EAAE;IACLD,eAAe,EAAE,SAAS;IAC1Bf,KAAK,EAAE;EACT,CAAC;EACDiB,OAAO,EAAE;IACPF,eAAe,EAAE,UAAU;IAC3Bf,KAAK,EAAE;EACT,CAAC;EACDkB,KAAK,EAAE;IACLH,eAAe,EAAE,QAAQ;IACzBf,KAAK,EAAE;EACT;AACF,CAAC;AAED,IAAMN,SAAS,GAAGnB,MAAM,CAACE,GAAG,CAAC,CAAA0C,UAAA;EAAAN,WAAA;EAAAO,WAAA;AAAA,+BACzB5C,OAAO,CAAC;EAAE6C,QAAQ,EAAEP;AAAe,CAAC,CAAC,CAExC"}
+{"version":3,"file":"Toast.js","names":["React","styled","variant","Box","Flex","Clickable","Text","Toast","_ref","id","action","description","message","onClose","rest","_objectWithoutProperties","_excluded","handleClick","createElement","Container","_extends","width","px","py","bg","color","role","tabIndex","onClick","onKeyPress","event","key","style","cursor","alignItems","justifyContent","textDecoration","label","displayName","TOAST_VARIANTS","backgroundColor","alert","success","error","withConfig","componentId","variants"],"sources":["../../../../src/elements/Toasts/Toast.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\n\nexport type ToastVariant = keyof typeof TOAST_VARIANTS\n\nexport interface ToastProps extends BoxProps {\n  id: string\n  action?: {\n    label: string\n    onClick(): void\n  }\n  description?: string\n  message: string\n  onClose?(id: string): void\n  variant?: ToastVariant\n}\n\nexport const Toast: React.FC<React.PropsWithChildren<ToastProps>> = ({\n  id,\n  action,\n  description,\n  message,\n  onClose,\n  ...rest\n}) => {\n  const handleClick = () => {\n    onClose?.(id)\n  }\n\n  return (\n    <Container\n      width=\"100%\"\n      px={2}\n      py={1}\n      bg=\"mono100\"\n      color=\"mono0\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleClick}\n      onKeyPress={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          onClose?.(id)\n        }\n      }}\n      style={{ cursor: \"pointer\" }}\n      {...rest}\n    >\n      <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n        <Text variant=\"sm-display\">{message}</Text>\n\n        {action && (\n          <Clickable onClick={action.onClick} textDecoration=\"underline\">\n            <Text variant=\"xs\">{action.label}</Text>\n          </Clickable>\n        )}\n      </Flex>\n\n      {description && <Text variant=\"xs\">{description}</Text>}\n    </Container>\n  )\n}\n\nexport const TOAST_VARIANTS = {\n  message: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n  alert: {\n    backgroundColor: \"blue100\",\n    color: \"mono0\",\n  },\n  success: {\n    backgroundColor: \"green100\",\n    color: \"mono0\",\n  },\n  error: {\n    backgroundColor: \"red100\",\n    color: \"mono0\",\n  },\n}\n\nconst Container = styled(Box)`\n  ${variant({ variants: TOAST_VARIANTS })}\n  user-select: none;\n`\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,GAAG;AACZ,SAASC,IAAI;AACb,SAASC,SAAS;AAClB,SAASC,IAAI;AAgBb,OAAO,IAAMC,KAAoD,GAAG,SAAvDA,KAAoDA,CAAAC,IAAA,EAO3D;EAAA,IANJC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IACXC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACJC,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAEP,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxBJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGJ,EAAE,CAAC;EACf,CAAC;EAED,oBACET,KAAA,CAAAkB,aAAA,CAACC,SAAS,EAAAC,QAAA;IACRC,KAAK,EAAC,MAAM;IACZC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAC,SAAS;IACZC,KAAK,EAAC,OAAO;IACbC,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE,CAAE;IACZC,OAAO,EAAEX,WAAY;IACrBY,UAAU,EAAE,SAAZA,UAAUA,CAAGC,KAAK,EAAK;MACrB,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;QAC9ClB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGJ,EAAE,CAAC;MACf;IACF,CAAE;IACFuB,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAU;EAAE,GACzBnB,IAAI,gBAERd,KAAA,CAAAkB,aAAA,CAACd,IAAI;IAAC8B,UAAU,EAAC,YAAY;IAACC,cAAc,EAAC;EAAe,gBAC1DnC,KAAA,CAAAkB,aAAA,CAACZ,IAAI;IAACJ,OAAO,EAAC;EAAY,GAAEU,OAAO,CAAQ,EAE1CF,MAAM,iBACLV,KAAA,CAAAkB,aAAA,CAACb,SAAS;IAACuB,OAAO,EAAElB,MAAM,CAACkB,OAAQ;IAACQ,cAAc,EAAC;EAAW,gBAC5DpC,KAAA,CAAAkB,aAAA,CAACZ,IAAI;IAACJ,OAAO,EAAC;EAAI,GAAEQ,MAAM,CAAC2B,KAAK,CAAQ,CAE3C,CACI,EAEN1B,WAAW,iBAAIX,KAAA,CAAAkB,aAAA,CAACZ,IAAI;IAACJ,OAAO,EAAC;EAAI,GAAES,WAAW,CAAQ,CAC7C;AAEhB,CAAC;AA3CYJ,KAAoD,CAAA+B,WAAA;AA6CjE,OAAO,IAAMC,cAAc,GAAG;EAC5B3B,OAAO,EAAE;IACP4B,eAAe,EAAE,SAAS;IAC1Bf,KAAK,EAAE;EACT,CAAC;EACDgB,KAAK,EAAE;IACLD,eAAe,EAAE,SAAS;IAC1Bf,KAAK,EAAE;EACT,CAAC;EACDiB,OAAO,EAAE;IACPF,eAAe,EAAE,UAAU;IAC3Bf,KAAK,EAAE;EACT,CAAC;EACDkB,KAAK,EAAE;IACLH,eAAe,EAAE,QAAQ;IACzBf,KAAK,EAAE;EACT;AACF,CAAC;AAED,IAAMN,SAAS,GAAGlB,MAAM,CAACE,GAAG,CAAC,CAAAyC,UAAA;EAAAN,WAAA;EAAAO,WAAA;AAAA,+BACzB3C,OAAO,CAAC;EAAE4C,QAAQ,EAAEP;AAAe,CAAC,CAAC,CAExC"}

package/dist/esm/elements/Toasts/Toasts.js

@@ -5,7 +5,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from "react";
 import { VisuallyHidden } from "../VisuallyHidden";
-import { Box, BoxProps } from "../Box";
+import { Box } from "../Box";
 import { Join } from "../Join";
 import { Spacer } from "../Spacer";
 import { Toast } from "./Toast";

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

@@ -1 +1 @@
-{"version":3,"file":"Toasts.js","names":["React","VisuallyHidden","Box","BoxProps","Join","Spacer","Toast","useToasts","Toasts","_ref","_ref$limit","limit","rest","_objectWithoutProperties","_excluded","_useToasts","toasts","createElement","Fragment","separator","y","takeRight","map","_ref2","id","_excluded2","_extends","key","toast","i","message","description","xs","arguments","length","undefined","slice"],"sources":["../../../../src/elements/Toasts/Toasts.tsx"],"sourcesContent":["import React from \"react\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Toast } from \"./Toast\"\nimport { useToasts } from \"./useToasts\"\n\nexport interface ToastsProps extends BoxProps {\n  limit?: number\n}\n\nexport const Toasts: React.FC<React.PropsWithChildren<ToastsProps>> = ({ limit = 5, ...rest }) => {\n  const { toasts } = useToasts()\n\n  return (\n    <>\n      <Box {...rest}>\n        <Join separator={<Spacer y={1} />}>\n          {takeRight(toasts, limit).map(({ id, ...rest }) => (\n            <Toast key={id} id={id} {...rest} />\n          ))}\n        </Join>\n      </Box>\n\n      <VisuallyHidden\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        {toasts.map((toast, i) => {\n          return (\n            <div key={i}>\n              {toast.message} - {toast.description}\n            </div>\n          )\n        })}\n      </VisuallyHidden>\n    </>\n  )\n}\n\nconst takeRight = <T,>(xs: T[], limit = 1) => {\n  if (xs.length < limit) {\n    return xs\n  }\n\n  return xs.slice(xs.length - limit, xs.length)\n}\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc;AACvB,SAASC,GAAG,EAAEC,QAAQ;AACtB,SAASC,IAAI;AACb,SAASC,MAAM;AACf,SAASC,KAAK;AACd,SAASC,SAAS;AAMlB,OAAO,IAAMC,MAAsD,GAAG,SAAzDA,MAAsDA,CAAAC,IAAA,EAA+B;EAAA,IAAAC,UAAA,GAAAD,IAAA,CAAzBE,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,CAAC,GAAAA,UAAA;IAAKE,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACzF,IAAAC,UAAA,GAAmBR,SAAS,EAAE;IAAtBS,MAAM,GAAAD,UAAA,CAANC,MAAM;EAEd,oBACEhB,KAAA,CAAAiB,aAAA,CAAAjB,KAAA,CAAAkB,QAAA,qBACElB,KAAA,CAAAiB,aAAA,CAACf,GAAG,EAAKU,IAAI,eACXZ,KAAA,CAAAiB,aAAA,CAACb,IAAI;IAACe,SAAS,eAAEnB,KAAA,CAAAiB,aAAA,CAACZ,MAAM;MAACe,CAAC,EAAE;IAAE;EAAI,GAC/BC,SAAS,CAACL,MAAM,EAAEL,KAAK,CAAC,CAACW,GAAG,CAAC,UAAAC,KAAA;IAAA,IAAGC,EAAE,GAAAD,KAAA,CAAFC,EAAE;MAAKZ,IAAI,GAAAC,wBAAA,CAAAU,KAAA,EAAAE,UAAA;IAAA,oBAC1CzB,KAAA,CAAAiB,aAAA,CAACX,KAAK,EAAAoB,QAAA;MAACC,GAAG,EAAEH,EAAG;MAACA,EAAE,EAAEA;IAAG,GAAKZ,IAAI,EAAI;EAAA,CACrC,CAAC,CACG,CACH,eAENZ,KAAA,CAAAiB,aAAA,CAAChB,cAAc;IACb,aAAU,WAAW;IACrB,eAAY,MAAM;IAClB,iBAAc;EAAW,GAExBe,MAAM,CAACM,GAAG,CAAC,UAACM,KAAK,EAAEC,CAAC,EAAK;IACxB,oBACE7B,KAAA,CAAAiB,aAAA;MAAKU,GAAG,EAAEE;IAAE,GACTD,KAAK,CAACE,OAAO,EAAC,KAAG,EAACF,KAAK,CAACG,WAAW,CAChC;EAEV,CAAC,CAAC,CACa,CAChB;AAEP,CAAC;AAED,IAAMV,SAAS,GAAG,SAAZA,SAASA,CAAQW,EAAO,EAAgB;EAAA,IAAdrB,KAAK,GAAAsB,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;EACvC,IAAID,EAAE,CAACE,MAAM,GAAGvB,KAAK,EAAE;IACrB,OAAOqB,EAAE;EACX;EAEA,OAAOA,EAAE,CAACI,KAAK,CAACJ,EAAE,CAACE,MAAM,GAAGvB,KAAK,EAAEqB,EAAE,CAACE,MAAM,CAAC;AAC/C,CAAC"}
+{"version":3,"file":"Toasts.js","names":["React","VisuallyHidden","Box","Join","Spacer","Toast","useToasts","Toasts","_ref","_ref$limit","limit","rest","_objectWithoutProperties","_excluded","_useToasts","toasts","createElement","Fragment","separator","y","takeRight","map","_ref2","id","_excluded2","_extends","key","toast","i","message","description","xs","arguments","length","undefined","slice"],"sources":["../../../../src/elements/Toasts/Toasts.tsx"],"sourcesContent":["import React from \"react\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Toast } from \"./Toast\"\nimport { useToasts } from \"./useToasts\"\n\nexport interface ToastsProps extends BoxProps {\n  limit?: number\n}\n\nexport const Toasts: React.FC<React.PropsWithChildren<ToastsProps>> = ({ limit = 5, ...rest }) => {\n  const { toasts } = useToasts()\n\n  return (\n    <>\n      <Box {...rest}>\n        <Join separator={<Spacer y={1} />}>\n          {takeRight(toasts, limit).map(({ id, ...rest }) => (\n            <Toast key={id} id={id} {...rest} />\n          ))}\n        </Join>\n      </Box>\n\n      <VisuallyHidden\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        {toasts.map((toast, i) => {\n          return (\n            <div key={i}>\n              {toast.message} - {toast.description}\n            </div>\n          )\n        })}\n      </VisuallyHidden>\n    </>\n  )\n}\n\nconst takeRight = <T,>(xs: T[], limit = 1) => {\n  if (xs.length < limit) {\n    return xs\n  }\n\n  return xs.slice(xs.length - limit, xs.length)\n}\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc;AACvB,SAASC,GAAG;AACZ,SAASC,IAAI;AACb,SAASC,MAAM;AACf,SAASC,KAAK;AACd,SAASC,SAAS;AAMlB,OAAO,IAAMC,MAAsD,GAAG,SAAzDA,MAAsDA,CAAAC,IAAA,EAA+B;EAAA,IAAAC,UAAA,GAAAD,IAAA,CAAzBE,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,CAAC,GAAAA,UAAA;IAAKE,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACzF,IAAAC,UAAA,GAAmBR,SAAS,EAAE;IAAtBS,MAAM,GAAAD,UAAA,CAANC,MAAM;EAEd,oBACEf,KAAA,CAAAgB,aAAA,CAAAhB,KAAA,CAAAiB,QAAA,qBACEjB,KAAA,CAAAgB,aAAA,CAACd,GAAG,EAAKS,IAAI,eACXX,KAAA,CAAAgB,aAAA,CAACb,IAAI;IAACe,SAAS,eAAElB,KAAA,CAAAgB,aAAA,CAACZ,MAAM;MAACe,CAAC,EAAE;IAAE;EAAI,GAC/BC,SAAS,CAACL,MAAM,EAAEL,KAAK,CAAC,CAACW,GAAG,CAAC,UAAAC,KAAA;IAAA,IAAGC,EAAE,GAAAD,KAAA,CAAFC,EAAE;MAAKZ,IAAI,GAAAC,wBAAA,CAAAU,KAAA,EAAAE,UAAA;IAAA,oBAC1CxB,KAAA,CAAAgB,aAAA,CAACX,KAAK,EAAAoB,QAAA;MAACC,GAAG,EAAEH,EAAG;MAACA,EAAE,EAAEA;IAAG,GAAKZ,IAAI,EAAI;EAAA,CACrC,CAAC,CACG,CACH,eAENX,KAAA,CAAAgB,aAAA,CAACf,cAAc;IACb,aAAU,WAAW;IACrB,eAAY,MAAM;IAClB,iBAAc;EAAW,GAExBc,MAAM,CAACM,GAAG,CAAC,UAACM,KAAK,EAAEC,CAAC,EAAK;IACxB,oBACE5B,KAAA,CAAAgB,aAAA;MAAKU,GAAG,EAAEE;IAAE,GACTD,KAAK,CAACE,OAAO,EAAC,KAAG,EAACF,KAAK,CAACG,WAAW,CAChC;EAEV,CAAC,CAAC,CACa,CAChB;AAEP,CAAC;AAED,IAAMV,SAAS,GAAG,SAAZA,SAASA,CAAQW,EAAO,EAAgB;EAAA,IAAdrB,KAAK,GAAAsB,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;EACvC,IAAID,EAAE,CAACE,MAAM,GAAGvB,KAAK,EAAE;IACrB,OAAOqB,EAAE;EACX;EAEA,OAAOA,EAAE,CAACI,KAAK,CAACJ,EAAE,CAACE,MAAM,GAAGvB,KAAK,EAAEqB,EAAE,CAACE,MAAM,CAAC;AAC/C,CAAC"}

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

@@ -12,7 +12,7 @@ import React, { useState } from "react";
 import { Flex } from "../Flex";
 import { Button } from "../Button";
 import { Text } from "../Text";
-import { ToastVariant, TOAST_VARIANTS } from "./Toast";
+import { TOAST_VARIANTS } from "./Toast";
 import { Toasts } from "./Toasts";
 import { ToastsProvider, useToasts } from "./useToasts";
 import { Separator } from "../Separator";

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

@@ -1 +1 @@
-{"version":3,"file":"Toasts.story.js","names":["React","useState","Flex","Button","Text","ToastVariant","TOAST_VARIANTS","Toasts","ToastsProvider","useToasts","Separator","Clickable","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Demo","render","_useToasts","sendToast","retractToast","_useState","_useState2","_slicedToArray","activeToasts","setActiveToasts","createElement","Fragment","mb","Object","keys","map","variant","captialized","charAt","toUpperCase","slice","key","size","mr","onClick","_sendToast","message","concat","onClose","closedID","filter","id","_toConsumableArray","_sendToast2","ttl","Infinity","limit","length","my","display","decorators","Story"],"sources":["../../../../src/elements/Toasts/Toasts.story.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { Flex } from \"../Flex\"\nimport { Button } from \"../Button\"\nimport { Text } from \"../Text\"\nimport { ToastVariant, TOAST_VARIANTS } from \"./Toast\"\nimport { Toasts } from \"./Toasts\"\nimport { ToastsProvider, useToasts } from \"./useToasts\"\nimport { Separator } from \"../Separator\"\nimport { Clickable } from \"../Clickable\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Toasts,\n  title: \"Components/Toasts\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A toast container component that manages multiple toast notifications with ToastsProvider.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Demo = {\n  render: () => {\n    const { sendToast, retractToast } = useToasts()\n\n    const [activeToasts, setActiveToasts] = useState<string[]>([])\n\n    return (\n      <>\n        <Flex mb={1}>\n          {(Object.keys(TOAST_VARIANTS) as ToastVariant[]).map((variant) => {\n            const captialized =\n              variant.charAt(0).toUpperCase() + variant.slice(1)\n\n            return (\n              <Button\n                key={variant}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                mr={1}\n                onClick={() => {\n                  const { id } = sendToast({\n                    variant,\n                    message: `${captialized} Title`,\n                    description: \"This is example text.\",\n                    onClose: (closedID) => {\n                      setActiveToasts((activeToasts) => {\n                        return activeToasts.filter((id) => id !== closedID)\n                      })\n                    },\n                  })\n\n                  setActiveToasts((activeToasts) => [...activeToasts, id])\n                }}\n              >\n                {captialized}\n              </Button>\n            )\n          })}\n\n          <Button\n            size=\"small\"\n            variant=\"primaryGray\"\n            onClick={() => {\n              const { id } = sendToast({\n                variant: \"message\",\n                message: \"Until manually dismissed\",\n                description:\n                  \"This toast will hang around until it's manually dismissed.\",\n                ttl: Infinity,\n                onClose: (closedID) => {\n                  setActiveToasts((activeToasts) => {\n                    return activeToasts.filter((id) => id !== closedID)\n                  })\n                },\n              })\n\n              setActiveToasts((activeToasts) => [...activeToasts, id])\n            }}\n          >\n            Until manually dismissed\n          </Button>\n        </Flex>\n\n        <Toasts limit={7} />\n\n        {activeToasts.length > 0 && (\n          <>\n            <Separator my={1} />\n\n            <Text variant=\"xs\">\n              <u>Active toasts:</u>\n\n              {activeToasts.map((id) => {\n                return (\n                  <Clickable\n                    key={id}\n                    display=\"block\"\n                    onClick={() => retractToast(id)}\n                  >\n                    Remove {id}\n                  </Clickable>\n                )\n              })}\n            </Text>\n          </>\n        )}\n      </>\n    )\n  },\n  decorators: [\n    (Story) => (\n      <ToastsProvider>\n        <Story />\n      </ToastsProvider>\n    ),\n  ],\n}\n"],"mappings":"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"}
+{"version":3,"file":"Toasts.story.js","names":["React","useState","Flex","Button","Text","TOAST_VARIANTS","Toasts","ToastsProvider","useToasts","Separator","Clickable","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Demo","render","_useToasts","sendToast","retractToast","_useState","_useState2","_slicedToArray","activeToasts","setActiveToasts","createElement","Fragment","mb","Object","keys","map","variant","captialized","charAt","toUpperCase","slice","key","size","mr","onClick","_sendToast","message","concat","onClose","closedID","filter","id","_toConsumableArray","_sendToast2","ttl","Infinity","limit","length","my","display","decorators","Story"],"sources":["../../../../src/elements/Toasts/Toasts.story.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { Flex } from \"../Flex\"\nimport { Button } from \"../Button\"\nimport { Text } from \"../Text\"\nimport { ToastVariant, TOAST_VARIANTS } from \"./Toast\"\nimport { Toasts } from \"./Toasts\"\nimport { ToastsProvider, useToasts } from \"./useToasts\"\nimport { Separator } from \"../Separator\"\nimport { Clickable } from \"../Clickable\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Toasts,\n  title: \"Components/Toasts\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A toast container component that manages multiple toast notifications with ToastsProvider.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Demo = {\n  render: () => {\n    const { sendToast, retractToast } = useToasts()\n\n    const [activeToasts, setActiveToasts] = useState<string[]>([])\n\n    return (\n      <>\n        <Flex mb={1}>\n          {(Object.keys(TOAST_VARIANTS) as ToastVariant[]).map((variant) => {\n            const captialized =\n              variant.charAt(0).toUpperCase() + variant.slice(1)\n\n            return (\n              <Button\n                key={variant}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                mr={1}\n                onClick={() => {\n                  const { id } = sendToast({\n                    variant,\n                    message: `${captialized} Title`,\n                    description: \"This is example text.\",\n                    onClose: (closedID) => {\n                      setActiveToasts((activeToasts) => {\n                        return activeToasts.filter((id) => id !== closedID)\n                      })\n                    },\n                  })\n\n                  setActiveToasts((activeToasts) => [...activeToasts, id])\n                }}\n              >\n                {captialized}\n              </Button>\n            )\n          })}\n\n          <Button\n            size=\"small\"\n            variant=\"primaryGray\"\n            onClick={() => {\n              const { id } = sendToast({\n                variant: \"message\",\n                message: \"Until manually dismissed\",\n                description:\n                  \"This toast will hang around until it's manually dismissed.\",\n                ttl: Infinity,\n                onClose: (closedID) => {\n                  setActiveToasts((activeToasts) => {\n                    return activeToasts.filter((id) => id !== closedID)\n                  })\n                },\n              })\n\n              setActiveToasts((activeToasts) => [...activeToasts, id])\n            }}\n          >\n            Until manually dismissed\n          </Button>\n        </Flex>\n\n        <Toasts limit={7} />\n\n        {activeToasts.length > 0 && (\n          <>\n            <Separator my={1} />\n\n            <Text variant=\"xs\">\n              <u>Active toasts:</u>\n\n              {activeToasts.map((id) => {\n                return (\n                  <Clickable\n                    key={id}\n                    display=\"block\"\n                    onClick={() => retractToast(id)}\n                  >\n                    Remove {id}\n                  </Clickable>\n                )\n              })}\n            </Text>\n          </>\n        )}\n      </>\n    )\n  },\n  decorators: [\n    (Story) => (\n      <ToastsProvider>\n        <Story />\n      </ToastsProvider>\n    ),\n  ],\n}\n"],"mappings":"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"}

package/dist/esm/elements/Toasts/useToasts.js

@@ -18,7 +18,6 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import React, { createContext, useContext, useReducer, useCallback, useRef, useEffect } from "react";
-import { ToastProps } from "./Toast";
 var reducer = function reducer(state, action) {
   switch (action.type) {
     case "SEND":

package/dist/esm/elements/Toasts/useToasts.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToasts.js","names":["React","createContext","useContext","useReducer","useCallback","useRef","useEffect","ToastProps","reducer","state","action","type","_objectSpread","toasts","concat","_toConsumableArray","payload","filter","_ref","id","ToastsContext","sendToast","handleClose","retractToast","ToastsProvider","_ref2","children","_useReducer","_useReducer2","_slicedToArray","dispatch","activeToasts","Map","_toast$onClose","toast","current","get","clearTimeout","timeout","delete","onClose","call","_ref3","_ref3$ttl","ttl","rest","_objectWithoutProperties","_excluded","generateId","set","Infinity","window","setTimeout","forEach","createElement","Provider","value","displayName","useToasts","_useContext","Math","random","toString","slice"],"sources":["../../../../src/elements/Toasts/useToasts.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useReducer,\n  useCallback,\n  useRef,\n  useEffect,\n} from \"react\"\nimport { ToastProps } from \"./Toast\"\n\ninterface Toast extends ToastProps {\n  id: string\n  ttl: number\n  onClose(id: string): void\n}\n\ntype Payload = Omit<Toast, \"id\" | \"ttl\" | \"onClose\"> & {\n  ttl?: number\n  onClose?(id: string): void\n}\n\ntype State = { toasts: Toast[] }\n\ntype Action =\n  | { type: \"SEND\"; payload: Toast }\n  | { type: \"RETRACT\"; payload: { id: string } }\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"SEND\":\n      return { ...state, toasts: [...state.toasts, action.payload] }\n\n    case \"RETRACT\":\n      return {\n        ...state,\n        toasts: state.toasts.filter(({ id }) => {\n          return id !== action.payload.id\n        }),\n      }\n  }\n}\n\nexport const ToastsContext = createContext<{\n  state: State\n  sendToast(toast: Payload): { id: string; handleClose: () => void }\n  retractToast(id: string): void\n}>({\n  state: { toasts: [] },\n  sendToast: () => {\n    return {\n      id: \"\",\n      handleClose: () => {\n        // NOOP\n      },\n    }\n  },\n  retractToast: () => {\n    // NOOP\n  },\n})\n\nexport const ToastsProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {\n  const [state, dispatch] = useReducer(reducer, { toasts: [] })\n\n  const activeToasts = useRef<\n    Map<\n      string,\n      {\n        timeout: number\n        onClose?: (id: string) => void\n      }\n    >\n  >(new Map())\n\n  const retractToast = useCallback((id: string) => {\n    const toast = activeToasts.current.get(id)\n\n    if (!toast) return\n\n    clearTimeout(toast.timeout)\n\n    activeToasts.current.delete(id)\n\n    dispatch({ type: \"RETRACT\", payload: { id } })\n\n    toast.onClose?.(id)\n  }, [])\n\n  const sendToast = useCallback(\n    ({ ttl = 6000, onClose, ...rest }: Payload) => {\n      const id = generateId()\n\n      const handleClose = () => {\n        retractToast(id)\n      }\n\n      dispatch({\n        type: \"SEND\",\n        payload: { ...rest, id, ttl, onClose: handleClose },\n      })\n\n      activeToasts.current.set(id, {\n        timeout: ttl !== Infinity ? window.setTimeout(handleClose, ttl) : -1,\n        onClose,\n      })\n\n      return { id, handleClose }\n    },\n    [retractToast]\n  )\n\n  useEffect(() => {\n    const toasts = activeToasts.current\n\n    return () => {\n      toasts.forEach((toast) => clearTimeout(toast.timeout))\n    }\n  }, [])\n\n  return (\n    <ToastsContext.Provider value={{ state, sendToast, retractToast }}>\n      {children}\n    </ToastsContext.Provider>\n  )\n}\n\nexport const useToasts = () => {\n  const {\n    state: { toasts },\n    sendToast,\n    retractToast,\n  } = useContext(ToastsContext)\n\n  return { toasts, sendToast, retractToast }\n}\n\nconst generateId = () => Math.random().toString(26).slice(2)\n"],"mappings":"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"}
+{"version":3,"file":"useToasts.js","names":["React","createContext","useContext","useReducer","useCallback","useRef","useEffect","reducer","state","action","type","_objectSpread","toasts","concat","_toConsumableArray","payload","filter","_ref","id","ToastsContext","sendToast","handleClose","retractToast","ToastsProvider","_ref2","children","_useReducer","_useReducer2","_slicedToArray","dispatch","activeToasts","Map","_toast$onClose","toast","current","get","clearTimeout","timeout","delete","onClose","call","_ref3","_ref3$ttl","ttl","rest","_objectWithoutProperties","_excluded","generateId","set","Infinity","window","setTimeout","forEach","createElement","Provider","value","displayName","useToasts","_useContext","Math","random","toString","slice"],"sources":["../../../../src/elements/Toasts/useToasts.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useReducer,\n  useCallback,\n  useRef,\n  useEffect,\n} from \"react\"\nimport { ToastProps } from \"./Toast\"\n\ninterface Toast extends ToastProps {\n  id: string\n  ttl: number\n  onClose(id: string): void\n}\n\ntype Payload = Omit<Toast, \"id\" | \"ttl\" | \"onClose\"> & {\n  ttl?: number\n  onClose?(id: string): void\n}\n\ntype State = { toasts: Toast[] }\n\ntype Action =\n  | { type: \"SEND\"; payload: Toast }\n  | { type: \"RETRACT\"; payload: { id: string } }\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"SEND\":\n      return { ...state, toasts: [...state.toasts, action.payload] }\n\n    case \"RETRACT\":\n      return {\n        ...state,\n        toasts: state.toasts.filter(({ id }) => {\n          return id !== action.payload.id\n        }),\n      }\n  }\n}\n\nexport const ToastsContext = createContext<{\n  state: State\n  sendToast(toast: Payload): { id: string; handleClose: () => void }\n  retractToast(id: string): void\n}>({\n  state: { toasts: [] },\n  sendToast: () => {\n    return {\n      id: \"\",\n      handleClose: () => {\n        // NOOP\n      },\n    }\n  },\n  retractToast: () => {\n    // NOOP\n  },\n})\n\nexport const ToastsProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {\n  const [state, dispatch] = useReducer(reducer, { toasts: [] })\n\n  const activeToasts = useRef<\n    Map<\n      string,\n      {\n        timeout: number\n        onClose?: (id: string) => void\n      }\n    >\n  >(new Map())\n\n  const retractToast = useCallback((id: string) => {\n    const toast = activeToasts.current.get(id)\n\n    if (!toast) return\n\n    clearTimeout(toast.timeout)\n\n    activeToasts.current.delete(id)\n\n    dispatch({ type: \"RETRACT\", payload: { id } })\n\n    toast.onClose?.(id)\n  }, [])\n\n  const sendToast = useCallback(\n    ({ ttl = 6000, onClose, ...rest }: Payload) => {\n      const id = generateId()\n\n      const handleClose = () => {\n        retractToast(id)\n      }\n\n      dispatch({\n        type: \"SEND\",\n        payload: { ...rest, id, ttl, onClose: handleClose },\n      })\n\n      activeToasts.current.set(id, {\n        timeout: ttl !== Infinity ? window.setTimeout(handleClose, ttl) : -1,\n        onClose,\n      })\n\n      return { id, handleClose }\n    },\n    [retractToast]\n  )\n\n  useEffect(() => {\n    const toasts = activeToasts.current\n\n    return () => {\n      toasts.forEach((toast) => clearTimeout(toast.timeout))\n    }\n  }, [])\n\n  return (\n    <ToastsContext.Provider value={{ state, sendToast, retractToast }}>\n      {children}\n    </ToastsContext.Provider>\n  )\n}\n\nexport const useToasts = () => {\n  const {\n    state: { toasts },\n    sendToast,\n    retractToast,\n  } = useContext(ToastsContext)\n\n  return { toasts, sendToast, retractToast }\n}\n\nconst generateId = () => Math.random().toString(26).slice(2)\n"],"mappings":"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"}

package/dist/esm/elements/Toggle/Toggle.js

@@ -4,7 +4,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from "react";
 import styled, { css } from "styled-components";
-import { Box, BoxProps } from "../Box";
+import { Box } from "../Box";
 import { SWITCH_STATES, TOGGLE_STATES } from "./tokens";
 import { themeGet } from "@styled-system/theme-get";
 /** A toggle */

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["React","styled","css","Box","BoxProps","SWITCH_STATES","TOGGLE_STATES","themeGet","Toggle","_ref","_ref$selected","selected","disabled","hover","onSelect","onClick","rest","_objectWithoutProperties","_excluded","isSelectable","undefined","handleClick","event","handleKeyPress","key","preventDefault","createElement","Container","_extends","display","alignItems","tabIndex","onKeyPress","role","Switch","displayName","withConfig","componentId","props","default"],"sources":["../../../../src/elements/Toggle/Toggle.tsx"],"sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\nimport { SWITCH_STATES, TOGGLE_STATES } from \"./tokens\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport interface ToggleProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable toggle interactions */\n  disabled?: boolean\n  /** Select the toggle on render */\n  selected?: boolean\n  /** Used to force the toggle into the visual hover state */\n  hover?: boolean\n  /** Callback when selected */\n  onSelect?: (selected: boolean) => void\n}\n\n/** A toggle */\nexport const Toggle: React.FC<React.PropsWithChildren<ToggleProps>> = ({\n  selected = false,\n  disabled,\n  hover,\n  onSelect,\n  onClick,\n  ...rest\n}) => {\n  const isSelectable = !disabled && onSelect !== undefined\n\n  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (isSelectable && onSelect) {\n      onSelect(!selected)\n    }\n\n    if (onClick) {\n      onClick(event)\n    }\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \" && isSelectable && onSelect) {\n      event.preventDefault()\n      onSelect(!selected)\n    }\n  }\n\n  return (\n    <Container\n      display=\"flex\"\n      alignItems=\"center\"\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      role=\"toggle\"\n      aria-checked={selected}\n      selected={selected}\n      disabled={disabled}\n      hover={hover}\n      {...rest}\n    >\n      <Switch selected={selected} />\n    </Container>\n  )\n}\n\nconst Switch = styled(Box)<{ selected: boolean }>`\n  width: 26px;\n  height: 26px;\n  margin: 3px;\n  border-radius: 50%;\n  transition: transform 0.3s;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n\n  ${(props) => {\n    return css`\n      ${props.selected ? SWITCH_STATES.selected : SWITCH_STATES.default}\n    `\n  }}\n`\n\nconst Container = styled(Box)<{\n  selected: boolean\n  hover?: boolean\n  disabled?: boolean\n}>`\n  user-select: none;\n  border-radius: 100px;\n  width: 51px;\n  height: 31px;\n  flex-shrink: 0;\n\n  ${(props) => {\n    return css`\n      ${props.selected ? TOGGLE_STATES.selected : TOGGLE_STATES.default}\n      ${props.hover && TOGGLE_STATES.hover}\n      ${props.disabled &&\n      (props.selected\n        ? TOGGLE_STATES.disabled.selected\n        : TOGGLE_STATES.disabled.default)}\n\n      &:hover {\n        ${TOGGLE_STATES.hover}\n      }\n    `\n  }}\n`\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,GAAG,EAAEC,QAAQ;AACtB,SAASC,aAAa,EAAEC,aAAa;AACrC,SAASC,QAAQ,QAAQ,0BAA0B;AAenD;AACA,OAAO,IAAMC,MAAsD,GAAG,SAAzDA,MAAsDA,CAAAC,IAAA,EAO7D;EAAA,IAAAC,aAAA,GAAAD,IAAA,CANJE,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAChBE,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,OAAO,GAAAN,IAAA,CAAPM,OAAO;IACJC,IAAI,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAEP,IAAMC,YAAY,GAAG,CAACP,QAAQ,IAAIE,QAAQ,KAAKM,SAAS;EAExD,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIC,KAAmD,EAAK;IAC3E,IAAIH,YAAY,IAAIL,QAAQ,EAAE;MAC5BA,QAAQ,CAAC,CAACH,QAAQ,CAAC;IACrB;IAEA,IAAII,OAAO,EAAE;MACXA,OAAO,CAACO,KAAK,CAAC;IAChB;EACF,CAAC;EAED,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAID,KAA0C,EAAK;IACrE,IAAIA,KAAK,CAACE,GAAG,KAAK,GAAG,IAAIL,YAAY,IAAIL,QAAQ,EAAE;MACjDQ,KAAK,CAACG,cAAc,EAAE;MACtBX,QAAQ,CAAC,CAACH,QAAQ,CAAC;IACrB;EACF,CAAC;EAED,oBACEX,KAAA,CAAA0B,aAAA,CAACC,SAAS,EAAAC,QAAA;IACRC,OAAO,EAAC,MAAM;IACdC,UAAU,EAAC,QAAQ;IACnBf,OAAO,EAAEM,WAAY;IACrBU,QAAQ,EAAEnB,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;IAC5BoB,UAAU,EAAET,cAAe;IAC3BU,IAAI,EAAC,QAAQ;IACb,gBAActB,QAAS;IACvBA,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA;EAAM,GACTG,IAAI,gBAERhB,KAAA,CAAA0B,aAAA,CAACQ,MAAM;IAACvB,QAAQ,EAAEA;EAAS,EAAG,CACpB;AAEhB,CAAC;AA5CYH,MAAsD,CAAA2B,WAAA;AA8CnE,IAAMD,MAAM,GAAGjC,MAAM,CAACE,GAAG,CAAC,CAAAiC,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,2GAMV9B,QAAQ,CAAC,oBAAoB,CAAC,EAE1C,UAAC+B,KAAK,EAAK;EACX,OAAOpC,GAAG,WACNoC,KAAK,CAAC3B,QAAQ,GAAGN,aAAa,CAACM,QAAQ,GAAGN,aAAa,CAACkC,OAAO;AAErE,CAAC,CACF;AAED,IAAMZ,SAAS,GAAG1B,MAAM,CAACE,GAAG,CAAC,CAAAiC,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,uFAWzB,UAACC,KAAK,EAAK;EACX,OAAOpC,GAAG,mCACNoC,KAAK,CAAC3B,QAAQ,GAAGL,aAAa,CAACK,QAAQ,GAAGL,aAAa,CAACiC,OAAO,EAC/DD,KAAK,CAACzB,KAAK,IAAIP,aAAa,CAACO,KAAK,EAClCyB,KAAK,CAAC1B,QAAQ,KACf0B,KAAK,CAAC3B,QAAQ,GACXL,aAAa,CAACM,QAAQ,CAACD,QAAQ,GAC/BL,aAAa,CAACM,QAAQ,CAAC2B,OAAO,CAAC,EAG/BjC,aAAa,CAACO,KAAK;AAG3B,CAAC,CACF"}
+{"version":3,"file":"Toggle.js","names":["React","styled","css","Box","SWITCH_STATES","TOGGLE_STATES","themeGet","Toggle","_ref","_ref$selected","selected","disabled","hover","onSelect","onClick","rest","_objectWithoutProperties","_excluded","isSelectable","undefined","handleClick","event","handleKeyPress","key","preventDefault","createElement","Container","_extends","display","alignItems","tabIndex","onKeyPress","role","Switch","displayName","withConfig","componentId","props","default"],"sources":["../../../../src/elements/Toggle/Toggle.tsx"],"sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\nimport { SWITCH_STATES, TOGGLE_STATES } from \"./tokens\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport interface ToggleProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable toggle interactions */\n  disabled?: boolean\n  /** Select the toggle on render */\n  selected?: boolean\n  /** Used to force the toggle into the visual hover state */\n  hover?: boolean\n  /** Callback when selected */\n  onSelect?: (selected: boolean) => void\n}\n\n/** A toggle */\nexport const Toggle: React.FC<React.PropsWithChildren<ToggleProps>> = ({\n  selected = false,\n  disabled,\n  hover,\n  onSelect,\n  onClick,\n  ...rest\n}) => {\n  const isSelectable = !disabled && onSelect !== undefined\n\n  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (isSelectable && onSelect) {\n      onSelect(!selected)\n    }\n\n    if (onClick) {\n      onClick(event)\n    }\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \" && isSelectable && onSelect) {\n      event.preventDefault()\n      onSelect(!selected)\n    }\n  }\n\n  return (\n    <Container\n      display=\"flex\"\n      alignItems=\"center\"\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      role=\"toggle\"\n      aria-checked={selected}\n      selected={selected}\n      disabled={disabled}\n      hover={hover}\n      {...rest}\n    >\n      <Switch selected={selected} />\n    </Container>\n  )\n}\n\nconst Switch = styled(Box)<{ selected: boolean }>`\n  width: 26px;\n  height: 26px;\n  margin: 3px;\n  border-radius: 50%;\n  transition: transform 0.3s;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n\n  ${(props) => {\n    return css`\n      ${props.selected ? SWITCH_STATES.selected : SWITCH_STATES.default}\n    `\n  }}\n`\n\nconst Container = styled(Box)<{\n  selected: boolean\n  hover?: boolean\n  disabled?: boolean\n}>`\n  user-select: none;\n  border-radius: 100px;\n  width: 51px;\n  height: 31px;\n  flex-shrink: 0;\n\n  ${(props) => {\n    return css`\n      ${props.selected ? TOGGLE_STATES.selected : TOGGLE_STATES.default}\n      ${props.hover && TOGGLE_STATES.hover}\n      ${props.disabled &&\n      (props.selected\n        ? TOGGLE_STATES.disabled.selected\n        : TOGGLE_STATES.disabled.default)}\n\n      &:hover {\n        ${TOGGLE_STATES.hover}\n      }\n    `\n  }}\n`\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,GAAG;AACZ,SAASC,aAAa,EAAEC,aAAa;AACrC,SAASC,QAAQ,QAAQ,0BAA0B;AAenD;AACA,OAAO,IAAMC,MAAsD,GAAG,SAAzDA,MAAsDA,CAAAC,IAAA,EAO7D;EAAA,IAAAC,aAAA,GAAAD,IAAA,CANJE,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAChBE,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,OAAO,GAAAN,IAAA,CAAPM,OAAO;IACJC,IAAI,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAEP,IAAMC,YAAY,GAAG,CAACP,QAAQ,IAAIE,QAAQ,KAAKM,SAAS;EAExD,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIC,KAAmD,EAAK;IAC3E,IAAIH,YAAY,IAAIL,QAAQ,EAAE;MAC5BA,QAAQ,CAAC,CAACH,QAAQ,CAAC;IACrB;IAEA,IAAII,OAAO,EAAE;MACXA,OAAO,CAACO,KAAK,CAAC;IAChB;EACF,CAAC;EAED,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAID,KAA0C,EAAK;IACrE,IAAIA,KAAK,CAACE,GAAG,KAAK,GAAG,IAAIL,YAAY,IAAIL,QAAQ,EAAE;MACjDQ,KAAK,CAACG,cAAc,EAAE;MACtBX,QAAQ,CAAC,CAACH,QAAQ,CAAC;IACrB;EACF,CAAC;EAED,oBACEV,KAAA,CAAAyB,aAAA,CAACC,SAAS,EAAAC,QAAA;IACRC,OAAO,EAAC,MAAM;IACdC,UAAU,EAAC,QAAQ;IACnBf,OAAO,EAAEM,WAAY;IACrBU,QAAQ,EAAEnB,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;IAC5BoB,UAAU,EAAET,cAAe;IAC3BU,IAAI,EAAC,QAAQ;IACb,gBAActB,QAAS;IACvBA,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA;EAAM,GACTG,IAAI,gBAERf,KAAA,CAAAyB,aAAA,CAACQ,MAAM;IAACvB,QAAQ,EAAEA;EAAS,EAAG,CACpB;AAEhB,CAAC;AA5CYH,MAAsD,CAAA2B,WAAA;AA8CnE,IAAMD,MAAM,GAAGhC,MAAM,CAACE,GAAG,CAAC,CAAAgC,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,2GAMV9B,QAAQ,CAAC,oBAAoB,CAAC,EAE1C,UAAC+B,KAAK,EAAK;EACX,OAAOnC,GAAG,WACNmC,KAAK,CAAC3B,QAAQ,GAAGN,aAAa,CAACM,QAAQ,GAAGN,aAAa,CAACkC,OAAO;AAErE,CAAC,CACF;AAED,IAAMZ,SAAS,GAAGzB,MAAM,CAACE,GAAG,CAAC,CAAAgC,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,uFAWzB,UAACC,KAAK,EAAK;EACX,OAAOnC,GAAG,mCACNmC,KAAK,CAAC3B,QAAQ,GAAGL,aAAa,CAACK,QAAQ,GAAGL,aAAa,CAACiC,OAAO,EAC/DD,KAAK,CAACzB,KAAK,IAAIP,aAAa,CAACO,KAAK,EAClCyB,KAAK,CAAC1B,QAAQ,KACf0B,KAAK,CAAC3B,QAAQ,GACXL,aAAa,CAACM,QAAQ,CAACD,QAAQ,GAC/BL,aAAa,CAACM,QAAQ,CAAC2B,OAAO,CAAC,EAG/BjC,aAAa,CAACO,KAAK;AAG3B,CAAC,CACF"}

package/dist/esm/elements/Tooltip/Tooltip.js

@@ -12,8 +12,8 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import { variant } from "styled-system";
 import { isText } from "../../helpers";
-import { Position, usePosition } from "../../utils/usePosition";
-import { Box, BoxProps } from "../Box";
+import { usePosition } from "../../utils/usePosition";
+import { Box } from "../Box";
 import { Pointer } from "../Pointer";
 import { Text } from "../Text";
 import { themeGet } from "@styled-system/theme-get";

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["React","useState","styled","variant","isText","Position","usePosition","Box","BoxProps","Pointer","Text","themeGet","TOOLTIP_VARIANTS","defaultLight","backgroundColor","color","defaultDark","Tooltip","_ref","_children$props","_children$props2","_children$props3","_children$props4","_children$props5","children","content","_ref$width","width","_ref$offset","offset","_ref$placement","placement","_ref$pointer","pointer","_ref$variant","visible","_ref$zIndex","zIndex","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","active","setActive","handleClick","prevActive","activate","deactivate","_usePosition","position","anchorRef","tooltipRef","isFlipped","state","createElement","Fragment","cloneElement","ref","tabIndex","onClick","compose","props","onMouseOver","onMouseOut","onFocus","onBlur","Tip","style","opacity","Panel","_extends","p","withConfig","displayName","componentId","variants","a","b","_len","arguments","length","args","Array","_key","apply"],"sources":["../../../../src/elements/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { isText } from \"../../helpers\"\nimport { Position, usePosition } from \"../../utils/usePosition\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Pointer } from \"../Pointer\"\nimport { Text } from \"../Text\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport const TOOLTIP_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"mono0\",\n    color: \"mono100\",\n  },\n  defaultDark: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n}\n\nexport type TooltipVariant = keyof typeof TOOLTIP_VARIANTS\n\nexport interface TooltipProps extends BoxProps {\n  /** Anchor element to attach to tooltip */\n  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  /** Content of tooltip */\n  content: React.ReactNode\n  offset?: number\n  placement?: Position\n  pointer?: boolean\n  variant?: TooltipVariant\n  visible?: boolean\n}\n\n/**\n * A tooltip\n */\nexport const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({\n  children,\n  content,\n  width = 230,\n  offset = 10,\n  placement = \"top\",\n  pointer = false,\n  variant = \"defaultLight\",\n  visible,\n  zIndex = 1,\n  ...rest\n}) => {\n  const [active, setActive] = useState(false)\n\n  const handleClick = () => {\n    setActive((prevActive) => !prevActive)\n  }\n\n  const activate = () => {\n    setActive(true)\n  }\n\n  const deactivate = () => {\n    setActive(false)\n  }\n\n  const {\n    anchorRef,\n    tooltipRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset,\n    active: visible ?? active,\n  })\n\n  return (\n    <>\n      {React.cloneElement(children, {\n        ref: anchorRef,\n        tabIndex: 0,\n        onClick: compose(handleClick, children.props?.onClick),\n        onMouseOver: compose(activate, children.props?.onMouseOver),\n        onMouseOut: compose(deactivate, children.props?.onMouseOut),\n        onFocus: compose(activate, children.props?.onFocus),\n        onBlur: compose(deactivate, children.props?.onBlur),\n      })}\n\n      <Tip\n        ref={tooltipRef as any}\n        variant={variant}\n        width={width}\n        zIndex={zIndex}\n        style={\n          // If visible is explictly set to `false` then the tooltip should be hidden\n          // Otherwise it should be visible or utilize the active state.\n          visible !== false\n            ? {\n                opacity: visible ?? active ? 1 : 0,\n              }\n            : { opacity: 0 }\n        }\n      >\n        {pointer && (\n          <Pointer\n            anchorRef={anchorRef}\n            tooltipRef={tooltipRef}\n            variant={variant}\n            placement={placement}\n            isFlipped={isFlipped}\n          />\n        )}\n\n        <Panel variant={variant} p={1} {...rest}>\n          {isText(content) ? <Text variant=\"xs\">{content}</Text> : content}\n        </Panel>\n      </Tip>\n    </>\n  )\n}\n\nconst Tip = styled(Box)<{ variant?: TooltipVariant }>`\n  position: absolute;\n  transition: opacity 250ms ease-out;\n  text-align: left;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  cursor: default;\n  pointer-events: none;\n  font-weight: normal;\n  font-style: normal;\n  ${variant({ variants: TOOLTIP_VARIANTS })}\n`\n\nconst Panel = styled(Box)<{ variant?: TooltipVariant }>`\n  ${variant({ variants: TOOLTIP_VARIANTS })}\n`\n\nconst compose = (a?: (...args: any) => any, b?: (...args: any) => any) => {\n  return (...args) => {\n    a?.(...args)\n    b?.(...args)\n  }\n}\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,MAAM;AACf,SAASC,QAAQ,EAAEC,WAAW;AAC9B,SAASC,GAAG,EAAEC,QAAQ;AACtB,SAASC,OAAO;AAChB,SAASC,IAAI;AACb,SAASC,QAAQ,QAAQ,0BAA0B;AAEnD,OAAO,IAAMC,gBAAgB,GAAG;EAC9BC,YAAY,EAAE;IACZC,eAAe,EAAE,OAAO;IACxBC,KAAK,EAAE;EACT,CAAC;EACDC,WAAW,EAAE;IACXF,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE;EACT;AACF,CAAC;AAgBD;AACA;AACA;AACA,OAAO,IAAME,OAAwD,GAAG,SAA3DA,OAAwDA,CAAAC,IAAA,EAW/D;EAAA,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;EAAA,IAVJC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IACRC,OAAO,GAAAP,IAAA,CAAPO,OAAO;IAAAC,UAAA,GAAAR,IAAA,CACPS,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,GAAG,GAAAA,UAAA;IAAAE,WAAA,GAAAV,IAAA,CACXW,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,EAAE,GAAAA,WAAA;IAAAE,cAAA,GAAAZ,IAAA,CACXa,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;IAAAE,YAAA,GAAAd,IAAA,CACjBe,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IAAAE,YAAA,GAAAhB,IAAA,CACff,OAAO;IAAPA,OAAO,GAAA+B,YAAA,cAAG,cAAc,GAAAA,YAAA;IACxBC,OAAO,GAAAjB,IAAA,CAAPiB,OAAO;IAAAC,WAAA,GAAAlB,IAAA,CACPmB,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,CAAC,GAAAA,WAAA;IACPE,IAAI,GAAAC,wBAAA,CAAArB,IAAA,EAAAsB,SAAA;EAEP,IAAAC,SAAA,GAA4BxC,QAAQ,CAAC,KAAK,CAAC;IAAAyC,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAApCG,MAAM,GAAAF,UAAA;IAAEG,SAAS,GAAAH,UAAA;EAExB,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxBD,SAAS,CAAC,UAACE,UAAU;MAAA,OAAK,CAACA,UAAU;IAAA,EAAC;EACxC,CAAC;EAED,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAA,EAAS;IACrBH,SAAS,CAAC,IAAI,CAAC;EACjB,CAAC;EAED,IAAMI,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;IACvBJ,SAAS,CAAC,KAAK,CAAC;EAClB,CAAC;EAED,IAAAK,YAAA,GAII5C,WAAW,CAAC;MACd6C,QAAQ,EAAEpB,SAAS;MACnBF,MAAM,EAANA,MAAM;MACNe,MAAM,EAAET,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIS;IACrB,CAAC,CAAC;IAPAQ,SAAS,GAAAF,YAAA,CAATE,SAAS;IACTC,UAAU,GAAAH,YAAA,CAAVG,UAAU;IACDC,SAAS,GAAAJ,YAAA,CAAlBK,KAAK,CAAID,SAAS;EAOpB,oBACEtD,KAAA,CAAAwD,aAAA,CAAAxD,KAAA,CAAAyD,QAAA,qBACGzD,KAAK,CAAC0D,YAAY,CAAClC,QAAQ,EAAE;IAC5BmC,GAAG,EAAEP,SAAS;IACdQ,QAAQ,EAAE,CAAC;IACXC,OAAO,EAAEC,OAAO,CAAChB,WAAW,GAAA3B,eAAA,GAAEK,QAAQ,CAACuC,KAAK,cAAA5C,eAAA,uBAAdA,eAAA,CAAgB0C,OAAO,CAAC;IACtDG,WAAW,EAAEF,OAAO,CAACd,QAAQ,GAAA5B,gBAAA,GAAEI,QAAQ,CAACuC,KAAK,cAAA3C,gBAAA,uBAAdA,gBAAA,CAAgB4C,WAAW,CAAC;IAC3DC,UAAU,EAAEH,OAAO,CAACb,UAAU,GAAA5B,gBAAA,GAAEG,QAAQ,CAACuC,KAAK,cAAA1C,gBAAA,uBAAdA,gBAAA,CAAgB4C,UAAU,CAAC;IAC3DC,OAAO,EAAEJ,OAAO,CAACd,QAAQ,GAAA1B,gBAAA,GAAEE,QAAQ,CAACuC,KAAK,cAAAzC,gBAAA,uBAAdA,gBAAA,CAAgB4C,OAAO,CAAC;IACnDC,MAAM,EAAEL,OAAO,CAACb,UAAU,GAAA1B,gBAAA,GAAEC,QAAQ,CAACuC,KAAK,cAAAxC,gBAAA,uBAAdA,gBAAA,CAAgB4C,MAAM;EACpD,CAAC,CAAC,eAEFnE,KAAA,CAAAwD,aAAA,CAACY,GAAG;IACFT,GAAG,EAAEN,UAAkB;IACvBlD,OAAO,EAAEA,OAAQ;IACjBwB,KAAK,EAAEA,KAAM;IACbU,MAAM,EAAEA,MAAO;IACfgC,KAAK;IACH;IACA;IACAlC,OAAO,KAAK,KAAK,GACb;MACEmC,OAAO,EAAE,CAAAnC,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIS,MAAM,IAAG,CAAC,GAAG;IACnC,CAAC,GACD;MAAE0B,OAAO,EAAE;IAAE;EAClB,GAEArC,OAAO,iBACNjC,KAAA,CAAAwD,aAAA,CAAC/C,OAAO;IACN2C,SAAS,EAAEA,SAAU;IACrBC,UAAU,EAAEA,UAAW;IACvBlD,OAAO,EAAEA,OAAQ;IACjB4B,SAAS,EAAEA,SAAU;IACrBuB,SAAS,EAAEA;EAAU,EAExB,eAEDtD,KAAA,CAAAwD,aAAA,CAACe,KAAK,EAAAC,QAAA;IAACrE,OAAO,EAAEA,OAAQ;IAACsE,CAAC,EAAE;EAAE,GAAKnC,IAAI,GACpClC,MAAM,CAACqB,OAAO,CAAC,gBAAGzB,KAAA,CAAAwD,aAAA,CAAC9C,IAAI;IAACP,OAAO,EAAC;EAAI,GAAEsB,OAAO,CAAQ,GAAGA,OAAO,CAC1D,CACJ,CACL;AAEP,CAAC;AAED,IAAM2C,GAAG,GAAGlE,MAAM,CAACK,GAAG,CAAC,CAAAmE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yKAIPjE,QAAQ,CAAC,oBAAoB,CAAC,EAK1CR,OAAO,CAAC;EAAE0E,QAAQ,EAAEjE;AAAiB,CAAC,CAAC,CAC1C;AAED,IAAM2D,KAAK,GAAGrE,MAAM,CAACK,GAAG,CAAC,CAAAmE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACrBzE,OAAO,CAAC;EAAE0E,QAAQ,EAAEjE;AAAiB,CAAC,CAAC,CAC1C;AAED,IAAMkD,OAAO,GAAG,SAAVA,OAAOA,CAAIgB,CAAyB,EAAEC,CAAyB,EAAK;EACxE,OAAO,YAAa;IAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAATC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAJF,IAAI,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IACbP,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAAQ,KAAA,SAAMH,IAAI,CAAC;IACZJ,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAAO,KAAA,SAAMH,IAAI,CAAC;EACd,CAAC;AACH,CAAC"}
+{"version":3,"file":"Tooltip.js","names":["React","useState","styled","variant","isText","usePosition","Box","Pointer","Text","themeGet","TOOLTIP_VARIANTS","defaultLight","backgroundColor","color","defaultDark","Tooltip","_ref","_children$props","_children$props2","_children$props3","_children$props4","_children$props5","children","content","_ref$width","width","_ref$offset","offset","_ref$placement","placement","_ref$pointer","pointer","_ref$variant","visible","_ref$zIndex","zIndex","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","active","setActive","handleClick","prevActive","activate","deactivate","_usePosition","position","anchorRef","tooltipRef","isFlipped","state","createElement","Fragment","cloneElement","ref","tabIndex","onClick","compose","props","onMouseOver","onMouseOut","onFocus","onBlur","Tip","style","opacity","Panel","_extends","p","withConfig","displayName","componentId","variants","a","b","_len","arguments","length","args","Array","_key","apply"],"sources":["../../../../src/elements/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { isText } from \"../../helpers\"\nimport { Position, usePosition } from \"../../utils/usePosition\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Pointer } from \"../Pointer\"\nimport { Text } from \"../Text\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport const TOOLTIP_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"mono0\",\n    color: \"mono100\",\n  },\n  defaultDark: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n}\n\nexport type TooltipVariant = keyof typeof TOOLTIP_VARIANTS\n\nexport interface TooltipProps extends BoxProps {\n  /** Anchor element to attach to tooltip */\n  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  /** Content of tooltip */\n  content: React.ReactNode\n  offset?: number\n  placement?: Position\n  pointer?: boolean\n  variant?: TooltipVariant\n  visible?: boolean\n}\n\n/**\n * A tooltip\n */\nexport const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({\n  children,\n  content,\n  width = 230,\n  offset = 10,\n  placement = \"top\",\n  pointer = false,\n  variant = \"defaultLight\",\n  visible,\n  zIndex = 1,\n  ...rest\n}) => {\n  const [active, setActive] = useState(false)\n\n  const handleClick = () => {\n    setActive((prevActive) => !prevActive)\n  }\n\n  const activate = () => {\n    setActive(true)\n  }\n\n  const deactivate = () => {\n    setActive(false)\n  }\n\n  const {\n    anchorRef,\n    tooltipRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset,\n    active: visible ?? active,\n  })\n\n  return (\n    <>\n      {React.cloneElement(children, {\n        ref: anchorRef,\n        tabIndex: 0,\n        onClick: compose(handleClick, children.props?.onClick),\n        onMouseOver: compose(activate, children.props?.onMouseOver),\n        onMouseOut: compose(deactivate, children.props?.onMouseOut),\n        onFocus: compose(activate, children.props?.onFocus),\n        onBlur: compose(deactivate, children.props?.onBlur),\n      })}\n\n      <Tip\n        ref={tooltipRef as any}\n        variant={variant}\n        width={width}\n        zIndex={zIndex}\n        style={\n          // If visible is explictly set to `false` then the tooltip should be hidden\n          // Otherwise it should be visible or utilize the active state.\n          visible !== false\n            ? {\n                opacity: visible ?? active ? 1 : 0,\n              }\n            : { opacity: 0 }\n        }\n      >\n        {pointer && (\n          <Pointer\n            anchorRef={anchorRef}\n            tooltipRef={tooltipRef}\n            variant={variant}\n            placement={placement}\n            isFlipped={isFlipped}\n          />\n        )}\n\n        <Panel variant={variant} p={1} {...rest}>\n          {isText(content) ? <Text variant=\"xs\">{content}</Text> : content}\n        </Panel>\n      </Tip>\n    </>\n  )\n}\n\nconst Tip = styled(Box)<{ variant?: TooltipVariant }>`\n  position: absolute;\n  transition: opacity 250ms ease-out;\n  text-align: left;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  cursor: default;\n  pointer-events: none;\n  font-weight: normal;\n  font-style: normal;\n  ${variant({ variants: TOOLTIP_VARIANTS })}\n`\n\nconst Panel = styled(Box)<{ variant?: TooltipVariant }>`\n  ${variant({ variants: TOOLTIP_VARIANTS })}\n`\n\nconst compose = (a?: (...args: any) => any, b?: (...args: any) => any) => {\n  return (...args) => {\n    a?.(...args)\n    b?.(...args)\n  }\n}\n"],"mappings":"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"}

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

@@ -9,14 +9,14 @@ import { fn } from "@storybook/test";
 import React, { useState } from "react";
 import { States } from "storybook-states";
 import HelpIcon from "@artsy/icons/HelpIcon";
-import { Position, POSITION } from "../../utils/usePosition";
+import { POSITION } from "../../utils/usePosition";
 import { Box } from "../Box";
 import { Button } from "../Button";
 import { Clickable } from "../Clickable";
 import { Input } from "../Input";
 import { Spacer } from "../Spacer";
 import { Text } from "../Text";
-import { Tooltip, TooltipProps } from "./Tooltip";
+import { Tooltip } from "./Tooltip";
 import { Stack } from "../Stack";
 import { Column, GridColumns } from "../GridColumns";
 import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.story.js","names":["fn","React","useState","States","HelpIcon","Position","POSITION","Box","Button","Clickable","Input","Spacer","Text","Tooltip","TooltipProps","Stack","Column","GridColumns","STORYBOOK_PROPS_BLOCKLIST","CONTENT","component","title","tags","parameters","docs","description","controls","exclude","Default","args","content","children","createElement","variant","textAlign","p","bg","color","WithClickable","onClick","chromatic","disable","Placement","render","states","Object","keys","map","placement","props","_extends","JSON","stringify","pointer","visible","maxWidth","mx","IconExample","display","alignItems","lineHeight","as","style","ml","ExternalControl","_useState","_useState2","_slicedToArray","setVisible","Fragment","PointerCentering","_useState3","_useState4","setPlacement","_useState5","_useState6","size","setSize","key","mr","mb","onMouseOver","type","min","max","value","onChange","e","parseInt","target","y","width","height","position","top","mt","left","StressTest","gap","Array","from","length","_","i","justifyContent","PositioningBug","span","flexDirection"],"sources":["../../../../src/elements/Tooltip/Tooltip.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport HelpIcon from \"@artsy/icons/HelpIcon\"\nimport { Position, POSITION } from \"../../utils/usePosition\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Clickable } from \"../Clickable\"\nimport { Input } from \"../Input\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Tooltip, TooltipProps } from \"./Tooltip\"\nimport { Stack } from \"../Stack\"\nimport { Column, GridColumns } from \"../GridColumns\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst CONTENT = \"Lorem ipsum dolor sit amet consectetur adipisicing elit?\"\n\nexport default {\n  component: Tooltip,\n  title: \"Components/Tooltip\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A tooltip component for displaying contextual information on hover or focus with various placement options.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    content: CONTENT,\n    children: (\n      <Text variant=\"xs\" textAlign=\"center\" p={1} bg=\"mono100\" color=\"mono0\">\n        This text has a tooltip\n      </Text>\n    ),\n  },\n}\n\nexport const WithClickable = {\n  tags: [\"!autodocs\"],\n  args: {\n    content: CONTENT,\n    children: (\n      <Clickable onClick={fn()}>\n        <Text variant=\"xs\" textAlign=\"center\" p={1} bg=\"mono100\" color=\"mono0\">\n          This text has a tooltip and is clickable\n        </Text>\n      </Clickable>\n    ),\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const Placement = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <States<Partial<TooltipProps>>\n        states={Object.keys(POSITION).map((placement) => ({\n          placement: placement as Position,\n        }))}\n      >\n        {(props) => {\n          return (\n            <Tooltip\n              content={JSON.stringify(props)}\n              variant=\"defaultDark\"\n              pointer\n              visible\n              {...props}\n            >\n              <Text\n                variant=\"xs\"\n                textAlign=\"center\"\n                p={1}\n                maxWidth=\"50%\"\n                mx=\"auto\"\n                bg=\"mono10\"\n              >\n                {JSON.stringify(props)}\n              </Text>\n            </Tooltip>\n          )\n        }}\n      </States>\n    )\n  },\n}\n\nexport const IconExample = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <Text variant=\"xs\" display=\"flex\" alignItems=\"center\" lineHeight={1}>\n        Hover (or focus) the icon to display the tooltip.{\" \"}\n        <Tooltip content={CONTENT} placement=\"bottom\">\n          {/* Icons don't forwardRefs so we have to wrap in a span */}\n          <Box as=\"span\" style={{ lineHeight: 0 }}>\n            <HelpIcon ml={0.5} />\n          </Box>\n        </Tooltip>\n      </Text>\n    )\n  },\n}\n\nexport const ExternalControl = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    const [visible, setVisible] = useState(false)\n\n    return (\n      <>\n        <Tooltip\n          content={CONTENT}\n          visible={visible}\n          pointer\n          variant=\"defaultDark\"\n        >\n          <Button\n            variant=\"secondaryBlack\"\n            onClick={() => {\n              setVisible((visible) => !visible)\n            }}\n          >\n            {visible ? \"Click to hide tooltip\" : \"Click to show tooltip\"}\n          </Button>\n        </Tooltip>\n      </>\n    )\n  },\n}\n\nexport const PointerCentering = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    const [placement, setPlacement] = useState<Position>(\"top\")\n    const [size, setSize] = useState(50)\n\n    return (\n      <>\n        {Object.keys(POSITION).map((placement) => {\n          return (\n            <Button\n              key={placement}\n              mr={1}\n              mb={1}\n              variant=\"secondaryBlack\"\n              size=\"small\"\n              onMouseOver={() => {\n                setPlacement(placement as Position)\n              }}\n            >\n              {placement}\n            </Button>\n          )\n        })}\n\n        <Input\n          type=\"range\"\n          min={0}\n          max={200}\n          value={size}\n          onChange={(e) => {\n            setSize(parseInt(e.target.value))\n          }}\n        />\n\n        <Spacer y={12} />\n\n        <Tooltip\n          content={CONTENT}\n          pointer\n          visible\n          variant=\"defaultDark\"\n          placement={placement}\n        >\n          <Box\n            bg=\"mono10\"\n            width={size}\n            height={size}\n            mx=\"auto\"\n            position=\"relative\"\n          >\n            <Box\n              height=\"1px\"\n              bg=\"red100\"\n              width=\"100%\"\n              position=\"absolute\"\n              top=\"50%\"\n              mt=\"-0.5px\"\n            />\n\n            <Box\n              height=\"100%\"\n              width=\"1px\"\n              bg=\"red100\"\n              position=\"absolute\"\n              left=\"50%\"\n              ml=\"-0.5px\"\n            />\n          </Box>\n        </Tooltip>\n      </>\n    )\n  },\n}\n\nexport const StressTest = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <Stack gap={1}>\n        {Array.from({ length: 3000 }).map((_, i) => {\n          return (\n            <Tooltip\n              key={i}\n              content={CONTENT}\n              pointer\n              variant=\"defaultDark\"\n              placement=\"right\"\n            >\n              <Text\n                variant=\"xs\"\n                textAlign=\"center\"\n                width={40}\n                height={40}\n                mx=\"auto\"\n                bg=\"mono10\"\n                display=\"flex\"\n                alignItems=\"center\"\n                justifyContent=\"center\"\n              >\n                {i}\n              </Text>\n            </Tooltip>\n          )\n        })}\n      </Stack>\n    )\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const PositioningBug = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <GridColumns>\n        <Column span={9}>Example left-column content</Column>\n        <Column span={3} display=\"flex\" flexDirection=\"column\" gap={2}>\n          <Tooltip content=\"Example content\">\n            <Button size=\"small\">Example tooltip trigger</Button>\n          </Tooltip>\n\n          <Text variant=\"xs\">There should not be a horizontal scrollbar</Text>\n        </Column>\n      </GridColumns>\n    )\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"Tooltip.story.js","names":["fn","React","useState","States","HelpIcon","POSITION","Box","Button","Clickable","Input","Spacer","Text","Tooltip","Stack","Column","GridColumns","STORYBOOK_PROPS_BLOCKLIST","CONTENT","component","title","tags","parameters","docs","description","controls","exclude","Default","args","content","children","createElement","variant","textAlign","p","bg","color","WithClickable","onClick","chromatic","disable","Placement","render","states","Object","keys","map","placement","props","_extends","JSON","stringify","pointer","visible","maxWidth","mx","IconExample","display","alignItems","lineHeight","as","style","ml","ExternalControl","_useState","_useState2","_slicedToArray","setVisible","Fragment","PointerCentering","_useState3","_useState4","setPlacement","_useState5","_useState6","size","setSize","key","mr","mb","onMouseOver","type","min","max","value","onChange","e","parseInt","target","y","width","height","position","top","mt","left","StressTest","gap","Array","from","length","_","i","justifyContent","PositioningBug","span","flexDirection"],"sources":["../../../../src/elements/Tooltip/Tooltip.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport HelpIcon from \"@artsy/icons/HelpIcon\"\nimport { Position, POSITION } from \"../../utils/usePosition\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Clickable } from \"../Clickable\"\nimport { Input } from \"../Input\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Tooltip, TooltipProps } from \"./Tooltip\"\nimport { Stack } from \"../Stack\"\nimport { Column, GridColumns } from \"../GridColumns\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst CONTENT = \"Lorem ipsum dolor sit amet consectetur adipisicing elit?\"\n\nexport default {\n  component: Tooltip,\n  title: \"Components/Tooltip\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A tooltip component for displaying contextual information on hover or focus with various placement options.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    content: CONTENT,\n    children: (\n      <Text variant=\"xs\" textAlign=\"center\" p={1} bg=\"mono100\" color=\"mono0\">\n        This text has a tooltip\n      </Text>\n    ),\n  },\n}\n\nexport const WithClickable = {\n  tags: [\"!autodocs\"],\n  args: {\n    content: CONTENT,\n    children: (\n      <Clickable onClick={fn()}>\n        <Text variant=\"xs\" textAlign=\"center\" p={1} bg=\"mono100\" color=\"mono0\">\n          This text has a tooltip and is clickable\n        </Text>\n      </Clickable>\n    ),\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const Placement = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <States<Partial<TooltipProps>>\n        states={Object.keys(POSITION).map((placement) => ({\n          placement: placement as Position,\n        }))}\n      >\n        {(props) => {\n          return (\n            <Tooltip\n              content={JSON.stringify(props)}\n              variant=\"defaultDark\"\n              pointer\n              visible\n              {...props}\n            >\n              <Text\n                variant=\"xs\"\n                textAlign=\"center\"\n                p={1}\n                maxWidth=\"50%\"\n                mx=\"auto\"\n                bg=\"mono10\"\n              >\n                {JSON.stringify(props)}\n              </Text>\n            </Tooltip>\n          )\n        }}\n      </States>\n    )\n  },\n}\n\nexport const IconExample = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <Text variant=\"xs\" display=\"flex\" alignItems=\"center\" lineHeight={1}>\n        Hover (or focus) the icon to display the tooltip.{\" \"}\n        <Tooltip content={CONTENT} placement=\"bottom\">\n          {/* Icons don't forwardRefs so we have to wrap in a span */}\n          <Box as=\"span\" style={{ lineHeight: 0 }}>\n            <HelpIcon ml={0.5} />\n          </Box>\n        </Tooltip>\n      </Text>\n    )\n  },\n}\n\nexport const ExternalControl = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    const [visible, setVisible] = useState(false)\n\n    return (\n      <>\n        <Tooltip\n          content={CONTENT}\n          visible={visible}\n          pointer\n          variant=\"defaultDark\"\n        >\n          <Button\n            variant=\"secondaryBlack\"\n            onClick={() => {\n              setVisible((visible) => !visible)\n            }}\n          >\n            {visible ? \"Click to hide tooltip\" : \"Click to show tooltip\"}\n          </Button>\n        </Tooltip>\n      </>\n    )\n  },\n}\n\nexport const PointerCentering = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    const [placement, setPlacement] = useState<Position>(\"top\")\n    const [size, setSize] = useState(50)\n\n    return (\n      <>\n        {Object.keys(POSITION).map((placement) => {\n          return (\n            <Button\n              key={placement}\n              mr={1}\n              mb={1}\n              variant=\"secondaryBlack\"\n              size=\"small\"\n              onMouseOver={() => {\n                setPlacement(placement as Position)\n              }}\n            >\n              {placement}\n            </Button>\n          )\n        })}\n\n        <Input\n          type=\"range\"\n          min={0}\n          max={200}\n          value={size}\n          onChange={(e) => {\n            setSize(parseInt(e.target.value))\n          }}\n        />\n\n        <Spacer y={12} />\n\n        <Tooltip\n          content={CONTENT}\n          pointer\n          visible\n          variant=\"defaultDark\"\n          placement={placement}\n        >\n          <Box\n            bg=\"mono10\"\n            width={size}\n            height={size}\n            mx=\"auto\"\n            position=\"relative\"\n          >\n            <Box\n              height=\"1px\"\n              bg=\"red100\"\n              width=\"100%\"\n              position=\"absolute\"\n              top=\"50%\"\n              mt=\"-0.5px\"\n            />\n\n            <Box\n              height=\"100%\"\n              width=\"1px\"\n              bg=\"red100\"\n              position=\"absolute\"\n              left=\"50%\"\n              ml=\"-0.5px\"\n            />\n          </Box>\n        </Tooltip>\n      </>\n    )\n  },\n}\n\nexport const StressTest = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <Stack gap={1}>\n        {Array.from({ length: 3000 }).map((_, i) => {\n          return (\n            <Tooltip\n              key={i}\n              content={CONTENT}\n              pointer\n              variant=\"defaultDark\"\n              placement=\"right\"\n            >\n              <Text\n                variant=\"xs\"\n                textAlign=\"center\"\n                width={40}\n                height={40}\n                mx=\"auto\"\n                bg=\"mono10\"\n                display=\"flex\"\n                alignItems=\"center\"\n                justifyContent=\"center\"\n              >\n                {i}\n              </Text>\n            </Tooltip>\n          )\n        })}\n      </Stack>\n    )\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const PositioningBug = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <GridColumns>\n        <Column span={9}>Example left-column content</Column>\n        <Column span={3} display=\"flex\" flexDirection=\"column\" gap={2}>\n          <Tooltip content=\"Example content\">\n            <Button size=\"small\">Example tooltip trigger</Button>\n          </Tooltip>\n\n          <Text variant=\"xs\">There should not be a horizontal scrollbar</Text>\n        </Column>\n      </GridColumns>\n    )\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/VisuallyHidden/VisuallyHidden.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { Box, BoxProps } from "../Box";
+import { Box } from "../Box";
 
 /**
  * Visually the hide element, but present in DOM so that it is accessible

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

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.js","names":["styled","css","Box","BoxProps","visuallyHiddenMixin","visuallyUnhiddenMixin","VisuallyHidden","withConfig","displayName","componentId","_ref","show"],"sources":["../../../../src/elements/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\n/**\n * Visually the hide element, but present in DOM so that it is accessible\n * for screen readers.\n * See:\n * https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/\n * https://webaim.org/techniques/css/invisiblecontent/\n * https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html\n */\nexport const visuallyHiddenMixin = css`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`\n\n/** Reset to `inherit` all properties that cause visually-hidden */\nexport const visuallyUnhiddenMixin = css`\n  clip: inherit;\n  clip-path: inherit;\n  height: inherit;\n  overflow: inherit;\n  position: inherit;\n  white-space: inherit;\n  width: inherit;\n`\n\nexport interface VisuallyHiddenProps extends BoxProps {\n  show?: boolean\n}\n\n/**\n * Visually the hide element, but present in DOM so that it is accessible\n * for screen readers.\n * See:\n * https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/\n * https://webaim.org/techniques/css/invisiblecontent/\n * https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html\n */\nexport const VisuallyHidden = styled(Box)<VisuallyHiddenProps>`\n  ${visuallyHiddenMixin}\n  ${({ show }) => show && visuallyUnhiddenMixin}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,GAAG,EAAEC,QAAQ;;AAEtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,mBAAmB,GAAGH,GAAG,wHAQrC;;AAED;AACA,OAAO,IAAMI,qBAAqB,GAAGJ,GAAG,wHAQvC;AAMD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMK,cAAc,GAAGN,MAAM,CAACE,GAAG,CAAC,CAAAK,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kBACrCL,mBAAmB,EACnB,UAAAM,IAAA;EAAA,IAAGC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EAAA,OAAOA,IAAI,IAAIN,qBAAqB;AAAA,EAC9C"}
+{"version":3,"file":"VisuallyHidden.js","names":["styled","css","Box","visuallyHiddenMixin","visuallyUnhiddenMixin","VisuallyHidden","withConfig","displayName","componentId","_ref","show"],"sources":["../../../../src/elements/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\n/**\n * Visually the hide element, but present in DOM so that it is accessible\n * for screen readers.\n * See:\n * https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/\n * https://webaim.org/techniques/css/invisiblecontent/\n * https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html\n */\nexport const visuallyHiddenMixin = css`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`\n\n/** Reset to `inherit` all properties that cause visually-hidden */\nexport const visuallyUnhiddenMixin = css`\n  clip: inherit;\n  clip-path: inherit;\n  height: inherit;\n  overflow: inherit;\n  position: inherit;\n  white-space: inherit;\n  width: inherit;\n`\n\nexport interface VisuallyHiddenProps extends BoxProps {\n  show?: boolean\n}\n\n/**\n * Visually the hide element, but present in DOM so that it is accessible\n * for screen readers.\n * See:\n * https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/\n * https://webaim.org/techniques/css/invisiblecontent/\n * https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html\n */\nexport const VisuallyHidden = styled(Box)<VisuallyHiddenProps>`\n  ${visuallyHiddenMixin}\n  ${({ show }) => show && visuallyUnhiddenMixin}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,GAAG;;AAEZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,mBAAmB,GAAGF,GAAG,wHAQrC;;AAED;AACA,OAAO,IAAMG,qBAAqB,GAAGH,GAAG,wHAQvC;AAMD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMI,cAAc,GAAGL,MAAM,CAACE,GAAG,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kBACrCL,mBAAmB,EACnB,UAAAM,IAAA;EAAA,IAAGC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EAAA,OAAOA,IAAI,IAAIN,qBAAqB;AAAA,EAC9C"}

package/dist/esm/helpers/color.js

@@ -1,4 +1,4 @@
-import { Color, THEME } from "../Theme";
+import { THEME } from "../Theme";
 
 /**
  * A helper to easily access colors when not in a styled-components or

package/dist/esm/helpers/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","names":["Color","THEME","color","colorKey","_THEME$colors$colorKe","colors"],"sources":["../../../src/helpers/color.ts"],"sourcesContent":["import { Color, THEME } from \"../Theme\"\n\n/**\n * A helper to easily access colors when not in a styled-components or\n * styled-systems context.\n *\n * @deprecated use component `color` or `borderColor` props, or `themeGet('colors.colorName')`\n */\nexport const color = (colorKey: Color | \"currentColor\") =>\n  THEME.colors[colorKey] ?? colorKey\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,KAAK;;AAErB;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAKA,CAAIC,QAAgC;EAAA,IAAAC,qBAAA;EAAA,QAAAA,qBAAA,GACpDH,KAAK,CAACI,MAAM,CAACF,QAAQ,CAAC,cAAAC,qBAAA,cAAAA,qBAAA,GAAID,QAAQ;AAAA"}
+{"version":3,"file":"color.js","names":["THEME","color","colorKey","_THEME$colors$colorKe","colors"],"sources":["../../../src/helpers/color.ts"],"sourcesContent":["import { Color, THEME } from \"../Theme\"\n\n/**\n * A helper to easily access colors when not in a styled-components or\n * styled-systems context.\n *\n * @deprecated use component `color` or `borderColor` props, or `themeGet('colors.colorName')`\n */\nexport const color = (colorKey: Color | \"currentColor\") =>\n  THEME.colors[colorKey] ?? colorKey\n"],"mappings":"AAAA,SAAgBA,KAAK;;AAErB;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAKA,CAAIC,QAAgC;EAAA,IAAAC,qBAAA;EAAA,QAAAA,qBAAA,GACpDH,KAAK,CAACI,MAAM,CAACF,QAAQ,CAAC,cAAAC,qBAAA,cAAAA,qBAAA,GAAID,QAAQ;AAAA"}