@artsy/palette 21.0.0 → 21.1.2

package/CHANGELOG.md

@@ -1,3 +1,50 @@
+# v21.1.2 (Thu Jun 23 2022)
+
+#### 🐛  Bug Fix
+
+- fix(pills): fixes hover on selected pills [#1185](https://github.com/artsy/palette/pull/1185) ([@dzucconi](https://github.com/dzucconi))
+- fix(pills): fixes hover on selected pills ([@dzucconi](https://github.com/dzucconi))
+
+#### 🏠  Internal
+
+- chore(deps): update dep typescript from 4.7.3 to v4.7.4 [#1184](https://github.com/artsy/palette/pull/1184) ([@renovate[bot]](https://github.com/renovate[bot]))
+
+#### Authors: 2
+
+- [@renovate[bot]](https://github.com/renovate[bot])
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
+# v21.1.1 (Wed Jun 15 2022)
+
+#### 🐛  Bug Fix
+
+- fix(useportal): guards on removal [#1183](https://github.com/artsy/palette/pull/1183) ([@dzucconi](https://github.com/dzucconi))
+- fix(useportal): guards on removal ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
+# v21.1.0 (Thu Jun 09 2022)
+
+#### 🚀  Enhancement
+
+- feat(button): implements responsive sizes [#1181](https://github.com/artsy/palette/pull/1181) ([@dzucconi](https://github.com/dzucconi))
+
+#### 🐛  Bug Fix
+
+- feat(button): implements responsive sizes ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
 # v21.0.0 (Wed Jun 08 2022)
 
 #### 💥  Breaking Change

package/dist/elements/Button/Button.d.ts

@@ -16,7 +16,7 @@ export interface ButtonProps extends BoxProps, React.ButtonHTMLAttributes<HTMLBu
      */
     variant?: ResponsiveValue<ButtonVariant>;
     /** Size of the button */
-    size?: ButtonSize;
+    size?: ResponsiveValue<ButtonSize>;
     /** Displays a loader in the button */
     loading?: boolean;
     /** Forces hover state */

package/dist/elements/Button/Button.js

@@ -85,7 +85,7 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwardedRef
     color: "currentColor"
   }), /*#__PURE__*/_react.default.createElement(_Text.Text, {
     lineHeight: 1,
-    variant: _tokens.BUTTON_TEXT_SIZES[size],
+    variant: getTextVariant(size),
     opacity: loading ? 0 : 1,
     display: "flex",
     alignItems: alignItems,
@@ -170,4 +170,18 @@ var Container = _styledComponents.default.button.withConfig({
     variants: _tokens.BUTTON_VARIANTS.disabled
   }));
 }, _Box.boxMixin);
+
+var getTextVariant = function getTextVariant(size) {
+  if (typeof size === "string") {
+    return _tokens.BUTTON_TEXT_SIZES[size];
+  }
+
+  if (Array.isArray(size)) {
+    return size.map(function (s) {
+      return _tokens.BUTTON_TEXT_SIZES[s];
+    });
+  }
+
+  return _tokens.BUTTON_TEXT_SIZES.large;
+};
 //# sourceMappingURL=Button.js.map

package/dist/elements/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Button/Button.tsx"],"names":["Button","React","forwardRef","forwardedRef","children","loading","success","size","onClick","alignItems","justifyContent","Icon","rest","ref","handleClick","event","current","blur","BUTTON_TEXT_SIZES","displayName","defaultProps","variant","buttonMixin","css","Container","styled","button","prop","variants","BUTTON_SIZES","props","hover","BUTTON_VARIANTS","active","focus","disabled","default","THEME_V3","mediaQueries","boxMixin"],"mappings":"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","sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, { useEffect, useRef } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { ResponsiveValue, variant } from \"styled-system\"\nimport { CheckIcon, IconProps } from \"../../svgs\"\nimport { THEME_V3 } from \"../../themes\"\nimport { boxMixin, BoxProps } from \"../Box\"\nimport { Spinner } from \"../Spinner\"\nimport { Text } from \"../Text\"\nimport { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from \"./tokens\"\nimport { ButtonSize, ButtonVariant } from \"./types\"\n\nexport interface ButtonProps\n  extends BoxProps,\n    React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * @description\n   * The theme of the button. It's possible to pass an array that\n   * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n   * @example\n   * \"primaryBlack\"\n   * \"primaryWhite\"\n   * [\"primaryGray\", \"secondaryBlack\"]\n   * @see {@link ButtonVariant}\n   */\n  variant?: ResponsiveValue<ButtonVariant>\n  /** Size of the button */\n  size?: ButtonSize\n  /** Displays a loader in the button */\n  loading?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces active state */\n  active?: boolean\n  /** Forces success state */\n  success?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<IconProps>\n}\n\nexport const Button: React.ForwardRefExoticComponent<\n  ButtonProps & { ref?: React.Ref<HTMLElement> }\n> = React.forwardRef(\n  (\n    {\n      children,\n      loading,\n      success,\n      size = \"large\",\n      onClick,\n      alignItems = \"center\",\n      justifyContent = \"center\",\n      Icon,\n      ...rest\n    },\n    forwardedRef\n  ) => {\n    const ref = useRef<HTMLButtonElement | null>(null)\n\n    const handleClick = (\n      event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n    ) => {\n      if (!loading && onClick) {\n        onClick(event)\n      }\n    }\n\n    useEffect(() => {\n      if (loading && ref.current !== null) {\n        ref.current?.blur()\n      }\n    }, [loading])\n\n    return (\n      <Container\n        ref={composeRefs(ref, forwardedRef) as any}\n        onClick={handleClick}\n        size={size}\n        loading={loading}\n        success={success}\n        tabIndex={loading ? -1 : 0}\n        display=\"inline-flex\"\n        alignItems={alignItems}\n        justifyContent={justifyContent}\n        {...rest}\n      >\n        {loading && <Spinner size={size} color=\"currentColor\" />}\n\n        <Text\n          lineHeight={1}\n          variant={BUTTON_TEXT_SIZES[size]}\n          opacity={loading ? 0 : 1}\n          display=\"flex\"\n          alignItems={alignItems}\n          justifyContent={justifyContent}\n          width=\"100%\"\n        >\n          {!success && Icon && (\n            <Icon fill=\"currentColor\" mr={0.5} aria-hidden=\"true\" />\n          )}\n\n          {success && (\n            <CheckIcon fill=\"currentColor\" mr={0.5} aria-hidden=\"true\" />\n          )}\n\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButton.displayName = \"Button\"\n\nButton.defaultProps = {\n  size: \"large\",\n  variant: \"primaryBlack\",\n}\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"active\" | \"disabled\" | \"focus\" | \"hover\" | \"loading\" | \"size\" | \"success\"\n>\n\nexport const buttonMixin = css`\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  font-weight: normal;\n  text-align: center;\n  border: 1px solid;\n  text-decoration: none;\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n`\n\nconst Container = styled.button<ContainerProps & ButtonProps>`\n  ${buttonMixin};\n\n  /* Handle sizing */\n  ${variant({ prop: \"size\", variants: BUTTON_SIZES })}\n\n  ${(props) => {\n    // Handle props driven states\n    if (props.hover) {\n      return variant({ variants: BUTTON_VARIANTS.hover })\n    }\n\n    if (props.active) {\n      return variant({ variants: BUTTON_VARIANTS.active })\n    }\n\n    if (props.success) {\n      return variant({ variants: BUTTON_VARIANTS.success })\n    }\n\n    if (props.focus) {\n      return css`\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      `\n    }\n\n    if (props.loading) {\n      return css`\n        cursor: auto;\n        transition: none;\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.loading })}\n      `\n    }\n\n    if (props.disabled) {\n      return css`\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      `\n    }\n\n    return variant({ variants: BUTTON_VARIANTS.default })\n  }}\n\n  ${() => {\n    // Handle pseudo classes\n    return css`\n      @media ${THEME_V3.mediaQueries.hover} {\n        &:hover {\n          ${variant({ variants: BUTTON_VARIANTS.hover })}\n        }\n      }\n\n      &:focus {\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      }\n\n      &:active {\n        ${variant({ variants: BUTTON_VARIANTS.active })}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      }\n    `\n  }};\n\n  ${boxMixin};\n`\n"],"file":"Button.js"}
+{"version":3,"sources":["../../../src/elements/Button/Button.tsx"],"names":["Button","React","forwardRef","forwardedRef","children","loading","success","size","onClick","alignItems","justifyContent","Icon","rest","ref","handleClick","event","current","blur","getTextVariant","displayName","defaultProps","variant","buttonMixin","css","Container","styled","button","prop","variants","BUTTON_SIZES","props","hover","BUTTON_VARIANTS","active","focus","disabled","default","THEME_V3","mediaQueries","boxMixin","BUTTON_TEXT_SIZES","Array","isArray","map","s","large"],"mappings":"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","sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, { useEffect, useRef } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { ResponsiveValue, variant } from \"styled-system\"\nimport { CheckIcon, IconProps } from \"../../svgs\"\nimport { TextVariant } from \"../../Theme\"\nimport { THEME_V3 } from \"../../themes\"\nimport { boxMixin, BoxProps } from \"../Box\"\nimport { Spinner } from \"../Spinner\"\nimport { Text, TextProps } from \"../Text\"\nimport { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from \"./tokens\"\nimport { ButtonSize, ButtonVariant } from \"./types\"\n\nexport interface ButtonProps\n  extends BoxProps,\n    React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * @description\n   * The theme of the button. It's possible to pass an array that\n   * behaves accordingly to the media breakpoints [\"sm\", \"md\", \"lg\", \"xl\"]\n   * @example\n   * \"primaryBlack\"\n   * \"primaryWhite\"\n   * [\"primaryGray\", \"secondaryBlack\"]\n   * @see {@link ButtonVariant}\n   */\n  variant?: ResponsiveValue<ButtonVariant>\n  /** Size of the button */\n  size?: ResponsiveValue<ButtonSize>\n  /** Displays a loader in the button */\n  loading?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces active state */\n  active?: boolean\n  /** Forces success state */\n  success?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<IconProps>\n}\n\nexport const Button: React.ForwardRefExoticComponent<\n  ButtonProps & { ref?: React.Ref<HTMLElement> }\n> = React.forwardRef(\n  (\n    {\n      children,\n      loading,\n      success,\n      size = \"large\",\n      onClick,\n      alignItems = \"center\",\n      justifyContent = \"center\",\n      Icon,\n      ...rest\n    },\n    forwardedRef\n  ) => {\n    const ref = useRef<HTMLButtonElement | null>(null)\n\n    const handleClick = (\n      event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n    ) => {\n      if (!loading && onClick) {\n        onClick(event)\n      }\n    }\n\n    useEffect(() => {\n      if (loading && ref.current !== null) {\n        ref.current?.blur()\n      }\n    }, [loading])\n\n    return (\n      <Container\n        ref={composeRefs(ref, forwardedRef) as any}\n        onClick={handleClick}\n        size={size}\n        loading={loading}\n        success={success}\n        tabIndex={loading ? -1 : 0}\n        display=\"inline-flex\"\n        alignItems={alignItems}\n        justifyContent={justifyContent}\n        {...rest}\n      >\n        {loading && <Spinner size={size} color=\"currentColor\" />}\n\n        <Text\n          lineHeight={1}\n          variant={getTextVariant(size)}\n          opacity={loading ? 0 : 1}\n          display=\"flex\"\n          alignItems={alignItems}\n          justifyContent={justifyContent}\n          width=\"100%\"\n        >\n          {!success && Icon && (\n            <Icon fill=\"currentColor\" mr={0.5} aria-hidden=\"true\" />\n          )}\n\n          {success && (\n            <CheckIcon fill=\"currentColor\" mr={0.5} aria-hidden=\"true\" />\n          )}\n\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButton.displayName = \"Button\"\n\nButton.defaultProps = {\n  size: \"large\",\n  variant: \"primaryBlack\",\n}\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"active\" | \"disabled\" | \"focus\" | \"hover\" | \"loading\" | \"size\" | \"success\"\n>\n\nexport const buttonMixin = css`\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  font-weight: normal;\n  text-align: center;\n  border: 1px solid;\n  text-decoration: none;\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n`\n\nconst Container = styled.button<ContainerProps & ButtonProps>`\n  ${buttonMixin};\n\n  /* Handle sizing */\n  ${variant({ prop: \"size\", variants: BUTTON_SIZES })}\n\n  ${(props) => {\n    // Handle props driven states\n    if (props.hover) {\n      return variant({ variants: BUTTON_VARIANTS.hover })\n    }\n\n    if (props.active) {\n      return variant({ variants: BUTTON_VARIANTS.active })\n    }\n\n    if (props.success) {\n      return variant({ variants: BUTTON_VARIANTS.success })\n    }\n\n    if (props.focus) {\n      return css`\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      `\n    }\n\n    if (props.loading) {\n      return css`\n        cursor: auto;\n        transition: none;\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.loading })}\n      `\n    }\n\n    if (props.disabled) {\n      return css`\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      `\n    }\n\n    return variant({ variants: BUTTON_VARIANTS.default })\n  }}\n\n  ${() => {\n    // Handle pseudo classes\n    return css`\n      @media ${THEME_V3.mediaQueries.hover} {\n        &:hover {\n          ${variant({ variants: BUTTON_VARIANTS.hover })}\n        }\n      }\n\n      &:focus {\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      }\n\n      &:active {\n        ${variant({ variants: BUTTON_VARIANTS.active })}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      }\n    `\n  }};\n\n  ${boxMixin};\n`\n\nconst getTextVariant = (\n  size: ResponsiveValue<ButtonSize>\n): TextProps[\"variant\"] => {\n  if (typeof size === \"string\") {\n    return BUTTON_TEXT_SIZES[size]\n  }\n\n  if (Array.isArray(size)) {\n    return size.map((s) => BUTTON_TEXT_SIZES[s!] as TextVariant)\n  }\n\n  return BUTTON_TEXT_SIZES.large\n}\n"],"file":"Button.js"}

package/dist/elements/Button/Button.story.d.ts

@@ -25,3 +25,4 @@ export declare const WithBoxProps: {
 export declare const Loading: () => JSX.Element;
 export declare const As: () => JSX.Element;
 export declare const WithIcon: () => JSX.Element;
+export declare const ResponsiveSize: () => JSX.Element;

package/dist/elements/Button/Button.story.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports._States = exports.WithIcon = exports.WithBoxProps = exports.Variants = exports.Sizes = exports.NativeButtonProps = exports.Loading = exports.As = void 0;
+exports.default = exports._States = exports.WithIcon = exports.WithBoxProps = exports.Variants = exports.Sizes = exports.ResponsiveSize = exports.NativeButtonProps = exports.Loading = exports.As = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -286,4 +286,13 @@ var WithIcon = function WithIcon() {
 
 exports.WithIcon = WithIcon;
 WithIcon.displayName = "WithIcon";
+
+var ResponsiveSize = function ResponsiveSize() {
+  return /*#__PURE__*/_react.default.createElement(_index.Button, {
+    size: ["small", "large"]
+  }, "Resize Viewport");
+};
+
+exports.ResponsiveSize = ResponsiveSize;
+ResponsiveSize.displayName = "ResponsiveSize";
 //# sourceMappingURL=Button.story.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Button/Button.story.tsx"],"names":["title","_States","focus","hover","active","loading","disabled","success","story","name","Sizes","BUTTON_SIZE_NAMES","map","size","variants","BUTTON_VARIANT_NAMES","variant","Display","Box","displayName","Variants","reduce","a","b","concat","props","includes","bg","color","NativeButtonProps","autoFocus","children","tabIndex","onClick","event","preventDefault","WithBoxProps","Loading","setLoading","handleClick","setTimeout","As","as","WithIcon","BellIcon"],"mappings":"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","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Join } from \"../..\"\nimport { BellIcon } from \"../../svgs/BellIcon\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { ButtonProps } from \"./Button\"\nimport { Button, BUTTON_SIZE_NAMES, BUTTON_VARIANT_NAMES } from \"./index\"\n\nexport default { title: \"Components/Button\" }\n\nexport const _States = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { loading: true },\n        { disabled: true },\n        { success: true },\n        { loading: true, disabled: true },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\n_States.story = {\n  name: \"States\",\n}\n\nexport const Sizes = () => {\n  return (\n    <States<ButtonProps> states={BUTTON_SIZE_NAMES.map((size) => ({ size }))}>\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nconst variants = BUTTON_VARIANT_NAMES.map((variant) => ({ variant }))\n\nconst Display = styled(Box)``\nDisplay.displayName = \"Button\"\n\nexport const Variants = () => {\n  return (\n    <States<ButtonProps>\n      states={([{ size: \"large\" }, { size: \"small\" }] as const)\n        .map((size) => {\n          return variants.map((variant) => ({ ...size, ...variant }))\n        })\n        .reduce((a, b) => {\n          return a.concat(b)\n        }, [])}\n    >\n      {(props) => (\n        <Display\n          p={1}\n          overflowX=\"auto\"\n          {...([\"primaryWhite\", \"secondaryWhite\"].includes(`${props.variant}`)\n            ? { bg: \"black100\", color: \"white100\" }\n            : { bg: \"white100\", color: \"black100\" })}\n        >\n          <Flex>\n            <Join separator={<Spacer ml={2} />}>\n              <Button {...props}>Default</Button>\n\n              <Button {...props} focus>\n                Focus\n              </Button>\n\n              <Button {...props} hover>\n                Hover\n              </Button>\n\n              <Button {...props} active>\n                Active\n              </Button>\n\n              <Button {...props} loading>\n                Loading\n              </Button>\n\n              <Button {...props} disabled>\n                Disabled\n              </Button>\n\n              <Button {...props} success>\n                Success\n              </Button>\n            </Join>\n          </Flex>\n        </Display>\n      )}\n    </States>\n  )\n}\n\nexport const NativeButtonProps = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        { autoFocus: true, children: \"autofocused\" },\n        { tabIndex: -1, children: \"not focusable with keyboard\" },\n        {\n          onClick: (event) => {\n            event.preventDefault()\n          },\n          children: \"correctly typed click event\",\n        },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nNativeButtonProps.story = {\n  name: \"Native button tag props\",\n}\n\nexport const WithBoxProps = () => {\n  return (\n    <States>\n      <Box border=\"1px dotted\" borderColor=\"black100\">\n        <Button display=\"block\" width=\"100%\" my={2}>\n          full width\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          with collapsing\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          margins\n        </Button>\n      </Box>\n    </States>\n  )\n}\n\nWithBoxProps.story = {\n  name: \"with BoxProps\",\n}\n\nexport const Loading = () => {\n  const [loading, setLoading] = useState(false)\n\n  const handleClick = () => {\n    if (loading) return\n    setLoading(true)\n    setTimeout(() => {\n      setLoading(false)\n    }, 1000)\n  }\n  return (\n    <States>\n      <Button loading={loading} onClick={handleClick}>\n        click to load\n      </Button>\n    </States>\n  )\n}\n\nexport const As = () => {\n  return (\n    <States states={[{}, { as: \"div\", children: \"This is a div\" }]}>\n      {/* @ts-ignore */}\n      <Button as=\"a\" href=\"#example\">\n        This is an anchor tag with an href\n      </Button>\n    </States>\n  )\n}\n\nexport const WithIcon = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { loading: true },\n        { disabled: true },\n        { loading: true, disabled: true },\n        { success: true },\n        { size: \"large\" },\n        { size: \"large\", focus: true },\n        { size: \"large\", hover: true },\n        { size: \"large\", loading: true },\n        { size: \"large\", disabled: true },\n        { size: \"large\", loading: true, disabled: true },\n        { size: \"large\", success: true },\n      ]}\n    >\n      <Button variant=\"secondaryBlack\" size=\"small\" Icon={BellIcon}>\n        Create an Alert\n      </Button>\n    </States>\n  )\n}\n"],"file":"Button.story.js"}
+{"version":3,"sources":["../../../src/elements/Button/Button.story.tsx"],"names":["title","_States","focus","hover","active","loading","disabled","success","story","name","Sizes","BUTTON_SIZE_NAMES","map","size","variants","BUTTON_VARIANT_NAMES","variant","Display","Box","displayName","Variants","reduce","a","b","concat","props","includes","bg","color","NativeButtonProps","autoFocus","children","tabIndex","onClick","event","preventDefault","WithBoxProps","Loading","setLoading","handleClick","setTimeout","As","as","WithIcon","BellIcon","ResponsiveSize"],"mappings":"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","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Join } from \"../..\"\nimport { BellIcon } from \"../../svgs/BellIcon\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { ButtonProps } from \"./Button\"\nimport { Button, BUTTON_SIZE_NAMES, BUTTON_VARIANT_NAMES } from \"./index\"\n\nexport default { title: \"Components/Button\" }\n\nexport const _States = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { loading: true },\n        { disabled: true },\n        { success: true },\n        { loading: true, disabled: true },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\n_States.story = {\n  name: \"States\",\n}\n\nexport const Sizes = () => {\n  return (\n    <States<ButtonProps> states={BUTTON_SIZE_NAMES.map((size) => ({ size }))}>\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nconst variants = BUTTON_VARIANT_NAMES.map((variant) => ({ variant }))\n\nconst Display = styled(Box)``\nDisplay.displayName = \"Button\"\n\nexport const Variants = () => {\n  return (\n    <States<ButtonProps>\n      states={([{ size: \"large\" }, { size: \"small\" }] as const)\n        .map((size) => {\n          return variants.map((variant) => ({ ...size, ...variant }))\n        })\n        .reduce((a, b) => {\n          return a.concat(b)\n        }, [])}\n    >\n      {(props) => (\n        <Display\n          p={1}\n          overflowX=\"auto\"\n          {...([\"primaryWhite\", \"secondaryWhite\"].includes(`${props.variant}`)\n            ? { bg: \"black100\", color: \"white100\" }\n            : { bg: \"white100\", color: \"black100\" })}\n        >\n          <Flex>\n            <Join separator={<Spacer ml={2} />}>\n              <Button {...props}>Default</Button>\n\n              <Button {...props} focus>\n                Focus\n              </Button>\n\n              <Button {...props} hover>\n                Hover\n              </Button>\n\n              <Button {...props} active>\n                Active\n              </Button>\n\n              <Button {...props} loading>\n                Loading\n              </Button>\n\n              <Button {...props} disabled>\n                Disabled\n              </Button>\n\n              <Button {...props} success>\n                Success\n              </Button>\n            </Join>\n          </Flex>\n        </Display>\n      )}\n    </States>\n  )\n}\n\nexport const NativeButtonProps = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        { autoFocus: true, children: \"autofocused\" },\n        { tabIndex: -1, children: \"not focusable with keyboard\" },\n        {\n          onClick: (event) => {\n            event.preventDefault()\n          },\n          children: \"correctly typed click event\",\n        },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nNativeButtonProps.story = {\n  name: \"Native button tag props\",\n}\n\nexport const WithBoxProps = () => {\n  return (\n    <States>\n      <Box border=\"1px dotted\" borderColor=\"black100\">\n        <Button display=\"block\" width=\"100%\" my={2}>\n          full width\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          with collapsing\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          margins\n        </Button>\n      </Box>\n    </States>\n  )\n}\n\nWithBoxProps.story = {\n  name: \"with BoxProps\",\n}\n\nexport const Loading = () => {\n  const [loading, setLoading] = useState(false)\n\n  const handleClick = () => {\n    if (loading) return\n    setLoading(true)\n    setTimeout(() => {\n      setLoading(false)\n    }, 1000)\n  }\n  return (\n    <States>\n      <Button loading={loading} onClick={handleClick}>\n        click to load\n      </Button>\n    </States>\n  )\n}\n\nexport const As = () => {\n  return (\n    <States states={[{}, { as: \"div\", children: \"This is a div\" }]}>\n      {/* @ts-ignore */}\n      <Button as=\"a\" href=\"#example\">\n        This is an anchor tag with an href\n      </Button>\n    </States>\n  )\n}\n\nexport const WithIcon = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { loading: true },\n        { disabled: true },\n        { loading: true, disabled: true },\n        { success: true },\n        { size: \"large\" },\n        { size: \"large\", focus: true },\n        { size: \"large\", hover: true },\n        { size: \"large\", loading: true },\n        { size: \"large\", disabled: true },\n        { size: \"large\", loading: true, disabled: true },\n        { size: \"large\", success: true },\n      ]}\n    >\n      <Button variant=\"secondaryBlack\" size=\"small\" Icon={BellIcon}>\n        Create an Alert\n      </Button>\n    </States>\n  )\n}\n\nexport const ResponsiveSize = () => {\n  return <Button size={[\"small\", \"large\"]}>Resize Viewport</Button>\n}\n"],"file":"Button.story.js"}

package/dist/elements/Pill/Pill.d.ts

@@ -11,9 +11,9 @@ export declare type PillProps = ClickableProps & {
     focus?: boolean;
     /** Forces hover state */
     hover?: boolean;
-    /** Forces active state */
+    /** Forces active state. This is for working with :active; not denoting a selected state */
     active?: boolean;
-    /** Forces selected state */
+    /** Forces selected state. Use this state to denote the selected state */
     selected?: boolean;
     /** Optional icon slot */
     Icon?: React.FunctionComponent<IconProps>;

package/dist/elements/Pill/Pill.js

@@ -84,7 +84,7 @@ var Container = (0, _styledComponents.default)(_Clickable.Clickable).withConfig(
   var _props$variant;
 
   var states = _tokens.PILL_VARIANTS[(_props$variant = props.variant) !== null && _props$variant !== void 0 ? _props$variant : "search"];
-  return (0, _styledComponents.css)(["", " ", " ", " ", " ", " ", " &:hover{", "}&:focus{outline:0;", " ", "}&:active{", "}&:disabled{pointer-events:none;", "}"], states.default, props.selected && states.selected, props.focus && states.focus, props.hover && states.hover, props.active && states.active, props.disabled && states.disabled, states.hover, states.focus, props.active && states.active, states.active, states.disabled);
+  return (0, _styledComponents.css)(["", " ", " ", " ", " ", " ", " &:hover{", "}&:focus{outline:0;", " ", "}&:active{", " ", "}&:disabled{pointer-events:none;", "}"], states.default, props.focus && states.focus, props.hover && states.hover, props.selected && states.selected, props.active && states.active, props.disabled && states.disabled, states.hover, states.focus, props.selected && states.selected, states.active, props.selected && states.selected, states.disabled);
 });
 
 var Thumbnail = _styledComponents.default.img.withConfig({

package/dist/elements/Pill/Pill.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Pill/Pill.tsx"],"names":["PILL_VARIANT_NAMES","Pill","children","Icon","rest","variant","src","srcSet","count","disabled","selected","defaultProps","Container","Clickable","props","states","PILL_VARIANTS","css","default","focus","hover","active","Thumbnail","styled","img"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport { CloseIcon, IconProps } from \"../../svgs\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Sup } from \"../Sup\"\nimport { Text } from \"../Text\"\nimport { PILL_VARIANTS } from \"./tokens\"\n\nexport const PILL_VARIANT_NAMES = [\n  \"default\",\n  \"search\",\n  \"filter\",\n  \"artist\",\n  \"badge\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\n\nexport type PillState =\n  | \"default\"\n  | \"hover\"\n  | \"focus\"\n  | \"active\"\n  | \"selected\"\n  | \"disabled\"\n\n/** PillProps */\nexport type PillProps = ClickableProps & {\n  as?: keyof JSX.IntrinsicElements | React.ComponentType\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces active state */\n  active?: boolean\n  /** Forces selected state */\n  selected?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<IconProps>\n} & (\n    | {\n        variant?: Extract<\n          PillVariant,\n          \"default\" | \"search\" | \"badge\" | \"filter\"\n        >\n      }\n    | {\n        /** `\"artist\"` pills have an optional `src` */\n        variant?: Extract<PillVariant, \"artist\">\n        /**\n         * Optional avatar; 1x or [1x, 2x]\n         * Should target 30x30 @1x, 60x60 @2x\n         */\n        src?: string | [string, string]\n      }\n    | {\n        /** `search` pills have an optional `count` */\n        variant?: Extract<PillVariant, \"search\">\n        /** Optional count */\n        count?: number\n      }\n  )\n\n/**\n * A Pill is a non-CTA button.\n * It may be used for things like active filters, search states,\n * or to denote an artist entity (possibly in the context of a card).\n */\nexport const Pill: React.FC<PillProps> = ({ children, Icon, ...rest }) => {\n  return (\n    <Container {...rest}>\n      {rest.variant === \"artist\" && (\n        <Thumbnail\n          {...(rest.src\n            ? { src: typeof rest.src === \"string\" ? rest.src : rest.src[0] }\n            : {})}\n          {...(rest.src && typeof rest.src !== \"string\" && rest.src[1]\n            ? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }\n            : {})}\n          // Intentionally empty string\n          alt=\"\"\n        />\n      )}\n\n      {Icon && <Icon fill=\"currentColor\" ml={-0.5} mr={0.5} />}\n\n      <Text\n        variant={rest.variant === \"search\" ? [\"xs\", \"sm-display\"] : \"xs\"}\n        overflowEllipsis\n      >\n        <span>{children}</span>\n\n        {rest.variant === \"search\" && \"count\" in rest && (\n          <>\n            {\" \"}\n            <Sup>{rest.count}</Sup>\n          </>\n        )}\n      </Text>\n\n      {((rest.variant === \"filter\" && !rest.disabled) ||\n        (rest.variant === \"artist\" && rest.selected)) && (\n        <CloseIcon fill=\"currentColor\" ml={0.5} width={15} height={15} />\n      )}\n    </Container>\n  )\n}\n\nPill.defaultProps = {\n  variant: \"default\",\n}\n\nconst Container = styled(Clickable)<PillProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  text-decoration: none;\n  white-space: nowrap;\n  border: 1px solid ${themeGet(\"colors.black15\")};\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n\n  ${(props) => {\n    const states = PILL_VARIANTS[props.variant ?? \"search\"]\n\n    return css`\n      ${states.default}\n      ${props.selected && states.selected}\n      ${props.focus && states.focus}\n      ${props.hover && states.hover}\n      ${props.active && states.active}\n      ${props.disabled && states.disabled}\n\n      &:hover {\n        ${states.hover}\n      }\n\n      &:focus {\n        outline: 0;\n        ${states.focus}\n        ${props.active && states.active}\n      }\n\n      &:active {\n        ${states.active}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${states.disabled}\n      }\n    `\n  }}\n`\n\nconst Thumbnail = styled.img`\n  display: block;\n  border-radius: 50%;\n  width: 30px;\n  height: 30px;\n  margin-right: ${themeGet(\"space.1\")};\n  background-color: ${themeGet(\"colors.black30\")};\n`\n"],"file":"Pill.js"}
+{"version":3,"sources":["../../../src/elements/Pill/Pill.tsx"],"names":["PILL_VARIANT_NAMES","Pill","children","Icon","rest","variant","src","srcSet","count","disabled","selected","defaultProps","Container","Clickable","props","states","PILL_VARIANTS","css","default","focus","hover","active","Thumbnail","styled","img"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport { CloseIcon, IconProps } from \"../../svgs\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Sup } from \"../Sup\"\nimport { Text } from \"../Text\"\nimport { PILL_VARIANTS } from \"./tokens\"\n\nexport const PILL_VARIANT_NAMES = [\n  \"default\",\n  \"search\",\n  \"filter\",\n  \"artist\",\n  \"badge\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\n\nexport type PillState =\n  | \"default\"\n  | \"hover\"\n  | \"focus\"\n  | \"active\"\n  | \"selected\"\n  | \"disabled\"\n\n/** PillProps */\nexport type PillProps = ClickableProps & {\n  as?: keyof JSX.IntrinsicElements | React.ComponentType\n  /** Forces focus state */\n  focus?: boolean\n  /** Forces hover state */\n  hover?: boolean\n  /** Forces active state. This is for working with :active; not denoting a selected state */\n  active?: boolean\n  /** Forces selected state. Use this state to denote the selected state */\n  selected?: boolean\n  /** Optional icon slot */\n  Icon?: React.FunctionComponent<IconProps>\n} & (\n    | {\n        variant?: Extract<\n          PillVariant,\n          \"default\" | \"search\" | \"badge\" | \"filter\"\n        >\n      }\n    | {\n        /** `\"artist\"` pills have an optional `src` */\n        variant?: Extract<PillVariant, \"artist\">\n        /**\n         * Optional avatar; 1x or [1x, 2x]\n         * Should target 30x30 @1x, 60x60 @2x\n         */\n        src?: string | [string, string]\n      }\n    | {\n        /** `search` pills have an optional `count` */\n        variant?: Extract<PillVariant, \"search\">\n        /** Optional count */\n        count?: number\n      }\n  )\n\n/**\n * A Pill is a non-CTA button.\n * It may be used for things like active filters, search states,\n * or to denote an artist entity (possibly in the context of a card).\n */\nexport const Pill: React.FC<PillProps> = ({ children, Icon, ...rest }) => {\n  return (\n    <Container {...rest}>\n      {rest.variant === \"artist\" && (\n        <Thumbnail\n          {...(rest.src\n            ? { src: typeof rest.src === \"string\" ? rest.src : rest.src[0] }\n            : {})}\n          {...(rest.src && typeof rest.src !== \"string\" && rest.src[1]\n            ? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }\n            : {})}\n          // Intentionally empty string\n          alt=\"\"\n        />\n      )}\n\n      {Icon && <Icon fill=\"currentColor\" ml={-0.5} mr={0.5} />}\n\n      <Text\n        variant={rest.variant === \"search\" ? [\"xs\", \"sm-display\"] : \"xs\"}\n        overflowEllipsis\n      >\n        <span>{children}</span>\n\n        {rest.variant === \"search\" && \"count\" in rest && (\n          <>\n            {\" \"}\n            <Sup>{rest.count}</Sup>\n          </>\n        )}\n      </Text>\n\n      {((rest.variant === \"filter\" && !rest.disabled) ||\n        (rest.variant === \"artist\" && rest.selected)) && (\n        <CloseIcon fill=\"currentColor\" ml={0.5} width={15} height={15} />\n      )}\n    </Container>\n  )\n}\n\nPill.defaultProps = {\n  variant: \"default\",\n}\n\nconst Container = styled(Clickable)<PillProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  text-decoration: none;\n  white-space: nowrap;\n  border: 1px solid ${themeGet(\"colors.black15\")};\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n\n  ${(props) => {\n    const states = PILL_VARIANTS[props.variant ?? \"search\"]\n\n    return css`\n      ${states.default}\n      ${props.focus && states.focus}\n      ${props.hover && states.hover}\n      ${props.selected && states.selected}\n      ${props.active && states.active}\n      ${props.disabled && states.disabled}\n\n      &:hover {\n        ${states.hover}\n      }\n\n      &:focus {\n        outline: 0;\n        ${states.focus}\n        ${props.selected && states.selected}\n      }\n\n      &:active {\n        ${states.active}\n        ${props.selected && states.selected}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${states.disabled}\n      }\n    `\n  }}\n`\n\nconst Thumbnail = styled.img`\n  display: block;\n  border-radius: 50%;\n  width: 30px;\n  height: 30px;\n  margin-right: ${themeGet(\"space.1\")};\n  background-color: ${themeGet(\"colors.black30\")};\n`\n"],"file":"Pill.js"}

package/dist/elements/Pill/Pill.story.d.ts

@@ -8,3 +8,4 @@ export declare const LongExampleWithTruncation: () => JSX.Element;
 export declare const SearchWithCount: () => JSX.Element;
 export declare const ArtistWithImage: () => JSX.Element;
 export declare const PillWithIcon: () => JSX.Element;
+export declare const Demo: () => JSX.Element;

package/dist/elements/Pill/Pill.story.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Variants = exports.SearchWithCount = exports.PillWithIcon = exports.LongExampleWithTruncation = exports.LinkExample = exports.ArtistWithImage = void 0;
+exports.default = exports.Variants = exports.SearchWithCount = exports.PillWithIcon = exports.LongExampleWithTruncation = exports.LinkExample = exports.Demo = exports.ArtistWithImage = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _storybookStates = require("storybook-states");
 
@@ -25,6 +27,22 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var _default = {
@@ -196,4 +214,23 @@ var PillWithIcon = function PillWithIcon() {
 
 exports.PillWithIcon = PillWithIcon;
 PillWithIcon.displayName = "PillWithIcon";
+
+var Demo = function Demo() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_Pill.Pill, {
+    selected: selected,
+    onClick: function onClick() {
+      return setSelected(function (prevActive) {
+        return !prevActive;
+      });
+    }
+  }, "Example");
+};
+
+exports.Demo = Demo;
+Demo.displayName = "Demo";
 //# sourceMappingURL=Pill.story.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Pill/Pill.story.tsx"],"names":["title","Display","Box","displayName","Variants","PILL_VARIANT_NAMES","map","variant","props","includes","bg","color","LinkExample","LongExampleWithTruncation","SearchWithCount","focus","hover","active","selected","disabled","ArtistWithImage","PillWithIcon","GraphIcon"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;AAIf,IAAMC,OAAO,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,QAAb;AACAD,OAAO,CAACE,WAAR,GAAsB,MAAtB;;AAEO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,GAAM;AAC5B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAEC,yBAAmBC,GAAnB,CAAuB,UAACC,OAAD;AAAA,aAAc;AAC3CA,QAAAA,OAAO,EAAEA;AADkC,OAAd;AAAA,KAAvB;AADV,KAKG,UAACC,KAAD;AAAA,wBACC,6BAAC,OAAD;AACE,MAAA,CAAC,EAAE,CADL;AAEE,MAAA,SAAS,EAAC;AAFZ,OAGO,CAAC,cAAD,EAAiB,gBAAjB,EAAmCC,QAAnC,WAA+CD,KAAK,CAACD,OAArD,KACD;AAAEG,MAAAA,EAAE,EAAE,UAAN;AAAkBC,MAAAA,KAAK,EAAE;AAAzB,KADC,GAED;AAAED,MAAAA,EAAE,EAAE,UAAN;AAAkBC,MAAAA,KAAK,EAAE;AAAzB,KALN,gBAOE,6BAAC,UAAD,qBACE,6BAAC,UAAD;AAAM,MAAA,SAAS,eAAE,6BAAC,cAAD;AAAQ,QAAA,EAAE,EAAE;AAAZ;AAAjB,oBACE,6BAAC,UAAD,EAAUH,KAAV,YADF,eAGE,6BAAC,UAAD,eAAUA,KAAV;AAAiB,MAAA,KAAK;AAAtB,gBAHF,eAOE,6BAAC,UAAD,eAAUA,KAAV;AAAiB,MAAA,KAAK;AAAtB,gBAPF,eAWE,6BAAC,UAAD,eAAUA,KAAV;AAAiB,MAAA,MAAM;AAAvB,iBAXF,eAeE,6BAAC,UAAD,eAAUA,KAAV;AAAiB,MAAA,QAAQ;AAAzB,mBAfF,eAmBE,6BAAC,UAAD,eAAUA,KAAV;AAAiB,MAAA,QAAQ;AAAzB,mBAnBF,CADF,CAPF,CADD;AAAA,GALH,CADF;AA2CD,CA5CM;;;AAAMJ,Q;;AA8CN,IAAMQ,WAAW,GAAG,SAAdA,WAAc,GAAM;AAC/B,sBACE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAC,QADV;AAEE,IAAA,EAAE,EAAC,GAFL,CAGE;AACA;AAJF;AAKE,IAAA,IAAI,EAAC;AALP,mBADF;AAWD,CAZM;;;AAAMA,W;;AAcN,IAAMC,yBAAyB,GAAG,SAA5BA,yBAA4B,GAAM;AAC7C,sBACE,6BAAC,UAAD;AAAM,IAAA,QAAQ,EAAE;AAAhB,iEADF;AAKD,CANM;;;AAAMA,yB;;AAQN,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AACnC,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,KAAK,EAAE;AAAT,KAFM,EAGN;AAAEC,MAAAA,KAAK,EAAE;AAAT,KAHM,EAIN;AAAEC,MAAAA,MAAM,EAAE;AAAV,KAJM,EAKN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KALM,EAMN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KANM;AADV,kBAUE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,QAAd;AAAuB,IAAA,KAAK,EAAE;AAA9B,qBAVF,CADF;AAgBD,CAjBM;;;AAAML,e;;AAmBN,IAAMM,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AACnC,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEL,MAAAA,KAAK,EAAE;AAAT,KAFM,EAGN;AAAEC,MAAAA,KAAK,EAAE;AAAT,KAHM,EAIN;AAAEC,MAAAA,MAAM,EAAE;AAAV,KAJM,EAKN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KALM,EAMN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KANM;AADV,kBAUE,6BAAC,UAAD;AACE,IAAA,OAAO,EAAC,QADV;AAEE,IAAA,GAAG,EAAE,CACH,sCADG,EAEH,sCAFG;AAFP,mBAVF,CADF;AAsBD,CAvBM;;;AAAMC,e;;AAyBN,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AAChC,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEN,MAAAA,KAAK,EAAE;AAAT,KAFM,EAGN;AAAEC,MAAAA,KAAK,EAAE;AAAT,KAHM,EAIN;AAAEC,MAAAA,MAAM,EAAE;AAAV,KAJM,EAKN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KALM,EAMN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KANM,EAON;AAAEZ,MAAAA,OAAO,EAAE;AAAX,KAPM,EAQN;AAAEA,MAAAA,OAAO,EAAE,QAAX;AAAqBQ,MAAAA,KAAK,EAAE;AAA5B,KARM,EASN;AAAER,MAAAA,OAAO,EAAE,QAAX;AAAqBS,MAAAA,KAAK,EAAE;AAA5B,KATM,EAUN;AAAET,MAAAA,OAAO,EAAE,QAAX;AAAqBU,MAAAA,MAAM,EAAE;AAA7B,KAVM,EAWN;AAAEV,MAAAA,OAAO,EAAE,QAAX;AAAqBW,MAAAA,QAAQ,EAAE;AAA/B,KAXM,EAYN;AAAEX,MAAAA,OAAO,EAAE,QAAX;AAAqBY,MAAAA,QAAQ,EAAE;AAA/B,KAZM,EAaN;AAAEZ,MAAAA,OAAO,EAAE;AAAX,KAbM,EAcN;AAAEA,MAAAA,OAAO,EAAE,QAAX;AAAqBQ,MAAAA,KAAK,EAAE;AAA5B,KAdM,EAeN;AAAER,MAAAA,OAAO,EAAE,QAAX;AAAqBS,MAAAA,KAAK,EAAE;AAA5B,KAfM,EAgBN;AAAET,MAAAA,OAAO,EAAE,QAAX;AAAqBU,MAAAA,MAAM,EAAE;AAA7B,KAhBM,EAiBN;AAAEV,MAAAA,OAAO,EAAE,QAAX;AAAqBW,MAAAA,QAAQ,EAAE;AAA/B,KAjBM,EAkBN;AAAEX,MAAAA,OAAO,EAAE,QAAX;AAAqBY,MAAAA,QAAQ,EAAE;AAA/B,KAlBM;AADV,kBAsBE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,OAAd;AAAsB,IAAA,IAAI,EAAEG;AAA5B,qBAtBF,CADF;AA4BD,CA7BM;;;AAAMD,Y","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Pill, PillProps, PillVariant, PILL_VARIANT_NAMES } from \"./Pill\"\nimport { Box } from \"../Box\"\nimport { Join } from \"../Join\"\nimport { GraphIcon } from \"../../svgs\"\nimport styled from \"styled-components\"\n\nexport default {\n  title: \"Components/Pill\",\n}\n\nconst Display = styled(Box)``\nDisplay.displayName = \"Pill\"\n\nexport const Variants = () => {\n  return (\n    <States<PillProps>\n      states={PILL_VARIANT_NAMES.map((variant) => ({\n        variant: variant as PillVariant,\n      }))}\n    >\n      {(props) => (\n        <Display\n          p={1}\n          overflowX=\"auto\"\n          {...([\"primaryWhite\", \"secondaryWhite\"].includes(`${props.variant}`)\n            ? { bg: \"black100\", color: \"white100\" }\n            : { bg: \"white100\", color: \"black100\" })}\n        >\n          <Flex>\n            <Join separator={<Spacer ml={2} />}>\n              <Pill {...props}>Default</Pill>\n\n              <Pill {...props} focus>\n                Focus\n              </Pill>\n\n              <Pill {...props} hover>\n                Hover\n              </Pill>\n\n              <Pill {...props} active>\n                Active\n              </Pill>\n\n              <Pill {...props} selected>\n                Selected\n              </Pill>\n\n              <Pill {...props} disabled>\n                Disabled\n              </Pill>\n            </Join>\n          </Flex>\n        </Display>\n      )}\n    </States>\n  )\n}\n\nexport const LinkExample = () => {\n  return (\n    <Pill\n      variant=\"artist\"\n      as=\"a\"\n      // TODO: Need a decent way of typing the threaded polymorphic `as` prop\n      // @ts-expect-error  MIGRATE_STRICT_MODE\n      href=\"#example\"\n    >\n      Artist Name\n    </Pill>\n  )\n}\n\nexport const LongExampleWithTruncation = () => {\n  return (\n    <Pill maxWidth={300}>\n      Studio Museum in Harlem Artist-in-Residence (AIR) Program\n    </Pill>\n  )\n}\n\nexport const SearchWithCount = () => {\n  return (\n    <States<PillProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { selected: true },\n        { disabled: true },\n      ]}\n    >\n      <Pill variant=\"search\" count={123}>\n        Artist Series\n      </Pill>\n    </States>\n  )\n}\n\nexport const ArtistWithImage = () => {\n  return (\n    <States<PillProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { selected: true },\n        { disabled: true },\n      ]}\n    >\n      <Pill\n        variant=\"artist\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n      >\n        Isa Genzken\n      </Pill>\n    </States>\n  )\n}\n\nexport const PillWithIcon = () => {\n  return (\n    <States<PillProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { selected: true },\n        { disabled: true },\n        { variant: \"search\" },\n        { variant: \"search\", focus: true },\n        { variant: \"search\", hover: true },\n        { variant: \"search\", active: true },\n        { variant: \"search\", selected: true },\n        { variant: \"search\", disabled: true },\n        { variant: \"filter\" },\n        { variant: \"filter\", focus: true },\n        { variant: \"filter\", hover: true },\n        { variant: \"filter\", active: true },\n        { variant: \"filter\", selected: true },\n        { variant: \"filter\", disabled: true },\n      ]}\n    >\n      <Pill variant=\"badge\" Icon={GraphIcon}>\n        Artist Series\n      </Pill>\n    </States>\n  )\n}\n"],"file":"Pill.story.js"}
+{"version":3,"sources":["../../../src/elements/Pill/Pill.story.tsx"],"names":["title","Display","Box","displayName","Variants","PILL_VARIANT_NAMES","map","variant","props","includes","bg","color","LinkExample","LongExampleWithTruncation","SearchWithCount","focus","hover","active","selected","disabled","ArtistWithImage","PillWithIcon","GraphIcon","Demo","setSelected","prevActive"],"mappings":"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","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Pill, PillProps, PillVariant, PILL_VARIANT_NAMES } from \"./Pill\"\nimport { Box } from \"../Box\"\nimport { Join } from \"../Join\"\nimport { GraphIcon } from \"../../svgs\"\nimport styled from \"styled-components\"\n\nexport default {\n  title: \"Components/Pill\",\n}\n\nconst Display = styled(Box)``\nDisplay.displayName = \"Pill\"\n\nexport const Variants = () => {\n  return (\n    <States<PillProps>\n      states={PILL_VARIANT_NAMES.map((variant) => ({\n        variant: variant as PillVariant,\n      }))}\n    >\n      {(props) => (\n        <Display\n          p={1}\n          overflowX=\"auto\"\n          {...([\"primaryWhite\", \"secondaryWhite\"].includes(`${props.variant}`)\n            ? { bg: \"black100\", color: \"white100\" }\n            : { bg: \"white100\", color: \"black100\" })}\n        >\n          <Flex>\n            <Join separator={<Spacer ml={2} />}>\n              <Pill {...props}>Default</Pill>\n\n              <Pill {...props} focus>\n                Focus\n              </Pill>\n\n              <Pill {...props} hover>\n                Hover\n              </Pill>\n\n              <Pill {...props} active>\n                Active\n              </Pill>\n\n              <Pill {...props} selected>\n                Selected\n              </Pill>\n\n              <Pill {...props} disabled>\n                Disabled\n              </Pill>\n            </Join>\n          </Flex>\n        </Display>\n      )}\n    </States>\n  )\n}\n\nexport const LinkExample = () => {\n  return (\n    <Pill\n      variant=\"artist\"\n      as=\"a\"\n      // TODO: Need a decent way of typing the threaded polymorphic `as` prop\n      // @ts-expect-error  MIGRATE_STRICT_MODE\n      href=\"#example\"\n    >\n      Artist Name\n    </Pill>\n  )\n}\n\nexport const LongExampleWithTruncation = () => {\n  return (\n    <Pill maxWidth={300}>\n      Studio Museum in Harlem Artist-in-Residence (AIR) Program\n    </Pill>\n  )\n}\n\nexport const SearchWithCount = () => {\n  return (\n    <States<PillProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { selected: true },\n        { disabled: true },\n      ]}\n    >\n      <Pill variant=\"search\" count={123}>\n        Artist Series\n      </Pill>\n    </States>\n  )\n}\n\nexport const ArtistWithImage = () => {\n  return (\n    <States<PillProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { selected: true },\n        { disabled: true },\n      ]}\n    >\n      <Pill\n        variant=\"artist\"\n        src={[\n          \"https://picsum.photos/seed/isa/30/30\",\n          \"https://picsum.photos/seed/isa/60/60\",\n        ]}\n      >\n        Isa Genzken\n      </Pill>\n    </States>\n  )\n}\n\nexport const PillWithIcon = () => {\n  return (\n    <States<PillProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { active: true },\n        { selected: true },\n        { disabled: true },\n        { variant: \"search\" },\n        { variant: \"search\", focus: true },\n        { variant: \"search\", hover: true },\n        { variant: \"search\", active: true },\n        { variant: \"search\", selected: true },\n        { variant: \"search\", disabled: true },\n        { variant: \"filter\" },\n        { variant: \"filter\", focus: true },\n        { variant: \"filter\", hover: true },\n        { variant: \"filter\", active: true },\n        { variant: \"filter\", selected: true },\n        { variant: \"filter\", disabled: true },\n      ]}\n    >\n      <Pill variant=\"badge\" Icon={GraphIcon}>\n        Artist Series\n      </Pill>\n    </States>\n  )\n}\n\nexport const Demo = () => {\n  const [selected, setSelected] = useState(false)\n  return (\n    <Pill\n      selected={selected}\n      onClick={() => setSelected((prevActive) => !prevActive)}\n    >\n      Example\n    </Pill>\n  )\n}\n"],"file":"Pill.story.js"}

package/dist/elements/Spinner/Spinner.d.ts

@@ -1,25 +1,35 @@
 import React from "react";
-import { BoxProps } from "../../../dist";
-import { Color } from "../../Theme";
-export interface SpinnerProps extends Omit<BoxProps, "size"> {
+import { ResponsiveValue } from "styled-system";
+import { BoxProps } from "../Box";
+declare const SPINNER_VARIANTS: {
+    readonly small: {
+        readonly width: 12.5;
+        readonly height: 3;
+        readonly top: "calc(50% - 1.5px)";
+        readonly left: "calc(50% - 6.25px)";
+    };
+    readonly medium: {
+        readonly width: 20;
+        readonly height: 4.8;
+        readonly top: "calc(50% - 2.4px)";
+        readonly left: "calc(50% - 10px)";
+    };
+    readonly large: {
+        readonly width: 25;
+        readonly height: 6;
+        readonly top: "calc(50% - 3px)";
+        readonly left: "calc(50% - 12.5px)";
+    };
+};
+export declare type SpinnerSize = keyof typeof SPINNER_VARIANTS;
+export interface SpinnerProps extends Omit<BoxProps, "size" | "width" | "height"> {
     /** Delay before spinner appears */
     delay?: number;
-    /** Width of the spinner */
-    width?: number;
-    /** Height of the spinner */
-    height?: number;
     /** Size of the spinner */
-    size?: "small" | "medium" | "large";
+    size?: ResponsiveValue<SpinnerSize>;
     /** Color of the spinner */
-    color?: Color | "currentColor";
+    color?: ResponsiveValue<string>;
 }
-/**
- * Returns width and height of spinner based on size
- * @param props
- */
-export declare const getSize: (props: SpinnerProps) => {
-    width: number | undefined;
-    height: number | undefined;
-};
 /** Generic Spinner component */
 export declare const Spinner: React.FC<SpinnerProps>;
+export {};

package/dist/elements/Spinner/Spinner.js

@@ -5,22 +5,24 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSize = exports.Spinner = void 0;
-
-var _themeGet = require("@styled-system/theme-get");
+exports.Spinner = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _styledSystem = require("styled-system");
+
 var _Box = require("../Box");
 
-var _excluded = ["delay"];
+var _excluded = ["delay", "color"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -37,49 +39,34 @@ 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; }
 
-/**
- * Returns width and height of spinner based on size
- * @param props
- */
-var getSize = function getSize(props) {
-  var base = {
+var SPINNER_VARIANTS = {
+  small: {
+    width: 12.5,
+    height: 3,
+    // TODO: Remove `top` and `left`
+    top: "calc(50% - 1.5px)",
+    left: "calc(50% - 6.25px)"
+  },
+  medium: {
+    width: 20,
+    height: 4.8,
+    // TODO: Remove `top` and `left`
+    top: "calc(50% - 2.4px)",
+    left: "calc(50% - 10px)"
+  },
+  large: {
     width: 25,
-    height: 6
-  };
-
-  switch (props.size) {
-    case "small":
-      return {
-        width: base.width * 0.5,
-        height: base.height * 0.5
-      };
-
-    case "medium":
-      return {
-        width: base.width * 0.8,
-        height: base.height * 0.8
-      };
-
-    case "large":
-      return {
-        width: base.width,
-        height: base.height
-      };
-
-    default:
-      return {
-        width: props.width,
-        height: props.height
-      };
+    height: 6,
+    // TODO: Remove `top` and `left`
+    top: "calc(50% - 3px)",
+    left: "calc(50% - 12.5px)"
   }
 };
 
-exports.getSize = getSize;
-var spin = (0, _styledComponents.keyframes)(["100%{transform:rotate(360deg)}"]);
 /** Generic Spinner component */
-
 var Spinner = function Spinner(_ref) {
   var delay = _ref.delay,
+      color = _ref.color,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(delay === 0),
@@ -95,32 +82,27 @@ var Spinner = function Spinner(_ref) {
       clearTimeout(timeout);
     };
   }, [delay]);
-
-  if (!show) {
-    return null;
-  }
-
-  return /*#__PURE__*/_react.default.createElement(SpinnerBar, rest);
+  if (!show) return null;
+  return /*#__PURE__*/_react.default.createElement(Bar, _extends({
+    bg: color !== null && color !== void 0 ? color : "currentColor"
+  }, rest));
 };
 
 exports.Spinner = Spinner;
 Spinner.displayName = "Spinner";
-var SpinnerBar = (0, _styledComponents.default)(_Box.Box).withConfig({
-  displayName: "Spinner__SpinnerBar",
+var spin = (0, _styledComponents.keyframes)(["100%{transform:rotate(360deg)}"]);
+var Bar = (0, _styledComponents.default)(_Box.Box).withConfig({
+  displayName: "Spinner__Bar",
   componentId: "sc-1t000ax-0"
-})(["animation:", " 1s infinite linear;", ";"], spin, function (props) {
-  var _getSize = getSize(props),
-      width = _getSize.width,
-      height = _getSize.height;
-
-  return "\n      background-color: ".concat(props.color === "currentColor" ? "currentColor" : (0, _themeGet.themeGet)("colors.".concat(props.color))(props), ";\n\n      width: ").concat(width, "px;\n      height: ").concat(height, "px;\n      top: calc(50% - ").concat(height, "px / 2);\n      left: calc(50% - ").concat(width, "px / 2);\n    ");
-}); // TODO: Remove default `position`, `top`, & `left` props
-
+})(["animation:", " 1s infinite linear;", ""], spin, (0, _styledSystem.variant)({
+  variants: SPINNER_VARIANTS,
+  prop: "size"
+}));
 Spinner.defaultProps = {
+  // TODO: Remove `position`
   position: "absolute",
   delay: 0,
-  width: 25,
-  height: 6,
+  size: "large",
   color: "black100"
 };
 Spinner.displayName = "Spinner";

package/dist/elements/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Spinner/Spinner.tsx"],"names":["getSize","props","base","width","height","size","spin","keyframes","Spinner","delay","rest","show","setShow","timeout","setTimeout","clearTimeout","SpinnerBar","Box","color","defaultProps","position","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;AAeA;AACA;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAU,CAACC,KAAD,EAAyB;AAC9C,MAAMC,IAAI,GAAG;AAAEC,IAAAA,KAAK,EAAE,EAAT;AAAaC,IAAAA,MAAM,EAAE;AAArB,GAAb;;AAEA,UAAQH,KAAK,CAACI,IAAd;AACE,SAAK,OAAL;AACE,aAAO;AACLF,QAAAA,KAAK,EAAED,IAAI,CAACC,KAAL,GAAa,GADf;AAELC,QAAAA,MAAM,EAAEF,IAAI,CAACE,MAAL,GAAc;AAFjB,OAAP;;AAKF,SAAK,QAAL;AACE,aAAO;AACLD,QAAAA,KAAK,EAAED,IAAI,CAACC,KAAL,GAAa,GADf;AAELC,QAAAA,MAAM,EAAEF,IAAI,CAACE,MAAL,GAAc;AAFjB,OAAP;;AAKF,SAAK,OAAL;AACE,aAAO;AACLD,QAAAA,KAAK,EAAED,IAAI,CAACC,KADP;AAELC,QAAAA,MAAM,EAAEF,IAAI,CAACE;AAFR,OAAP;;AAKF;AACE,aAAO;AACLD,QAAAA,KAAK,EAAEF,KAAK,CAACE,KADR;AAELC,QAAAA,MAAM,EAAEH,KAAK,CAACG;AAFT,OAAP;AApBJ;AAyBD,CA5BM;;;AA8BP,IAAME,IAAI,OAAGC,2BAAH,qCAAV;AAMA;;AACO,IAAMC,OAA+B,GAAG,SAAlCA,OAAkC,OAAwB;AAAA,MAArBC,KAAqB,QAArBA,KAAqB;AAAA,MAAXC,IAAW;;AACrE,kBAAwB,qBAASD,KAAK,KAAK,CAAnB,CAAxB;AAAA;AAAA,MAAOE,IAAP;AAAA,MAAaC,OAAb;;AAEA,wBAAU,YAAM;AACd,QAAMC,OAAO,GAAGC,UAAU,CAAC,YAAM;AAC/BF,MAAAA,OAAO,CAAC,IAAD,CAAP;AACD,KAFyB,EAEvBH,KAFuB,CAA1B;AAIA,WAAO,YAAM;AACXM,MAAAA,YAAY,CAACF,OAAD,CAAZ;AACD,KAFD;AAGD,GARD,EAQG,CAACJ,KAAD,CARH;;AAUA,MAAI,CAACE,IAAL,EAAW;AACT,WAAO,IAAP;AACD;;AAED,sBAAO,6BAAC,UAAD,EAAgBD,IAAhB,CAAP;AACD,CAlBM;;;AAAMF,O;AAoBb,IAAMQ,UAAU,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,gDACDX,IADC,EAGZ,UAACL,KAAD,EAAW;AACX,iBAA0BD,OAAO,CAACC,KAAD,CAAjC;AAAA,MAAQE,KAAR,YAAQA,KAAR;AAAA,MAAeC,MAAf,YAAeA,MAAf;;AAEA,6CAEIH,KAAK,CAACiB,KAAN,KAAgB,cAAhB,GACI,cADJ,GAEI,yCAAmBjB,KAAK,CAACiB,KAAzB,GAAkCjB,KAAlC,CAJR,+BAOWE,KAPX,gCAQYC,MARZ,wCASoBA,MATpB,8CAUqBD,KAVrB;AAYD,CAlBa,CAAhB,C,CAoBA;;AACAK,OAAO,CAACW,YAAR,GAAuB;AACrBC,EAAAA,QAAQ,EAAE,UADW;AAErBX,EAAAA,KAAK,EAAE,CAFc;AAGrBN,EAAAA,KAAK,EAAE,EAHc;AAIrBC,EAAAA,MAAM,EAAE,CAJa;AAKrBc,EAAAA,KAAK,EAAE;AALc,CAAvB;AAQAV,OAAO,CAACa,WAAR,GAAsB,SAAtB","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useState } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { BoxProps } from \"../../../dist\"\nimport { Color } from \"../../Theme\"\nimport { Box } from \"../Box\"\n\nexport interface SpinnerProps extends Omit<BoxProps, \"size\"> {\n  /** Delay before spinner appears */\n  delay?: number\n  /** Width of the spinner */\n  width?: number\n  /** Height of the spinner */\n  height?: number\n  /** Size of the spinner */\n  size?: \"small\" | \"medium\" | \"large\"\n  /** Color of the spinner */\n  color?: Color | \"currentColor\"\n}\n\n/**\n * Returns width and height of spinner based on size\n * @param props\n */\nexport const getSize = (props: SpinnerProps) => {\n  const base = { width: 25, height: 6 }\n\n  switch (props.size) {\n    case \"small\":\n      return {\n        width: base.width * 0.5,\n        height: base.height * 0.5,\n      }\n\n    case \"medium\":\n      return {\n        width: base.width * 0.8,\n        height: base.height * 0.8,\n      }\n\n    case \"large\":\n      return {\n        width: base.width,\n        height: base.height,\n      }\n\n    default:\n      return {\n        width: props.width,\n        height: props.height,\n      }\n  }\n}\n\nconst spin = keyframes`\n  100% {\n    transform: rotate(360deg)\n  }\n`\n\n/** Generic Spinner component */\nexport const Spinner: React.FC<SpinnerProps> = ({ delay, ...rest }) => {\n  const [show, setShow] = useState(delay === 0)\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setShow(true)\n    }, delay)\n\n    return () => {\n      clearTimeout(timeout)\n    }\n  }, [delay])\n\n  if (!show) {\n    return null\n  }\n\n  return <SpinnerBar {...rest} />\n}\n\nconst SpinnerBar = styled(Box)<SpinnerProps>`\n  animation: ${spin} 1s infinite linear;\n\n  ${(props) => {\n    const { width, height } = getSize(props)\n\n    return `\n      background-color: ${\n        props.color === \"currentColor\"\n          ? \"currentColor\"\n          : themeGet(`colors.${props.color}`)(props)\n      };\n\n      width: ${width}px;\n      height: ${height}px;\n      top: calc(50% - ${height}px / 2);\n      left: calc(50% - ${width}px / 2);\n    `\n  }};\n`\n// TODO: Remove default `position`, `top`, & `left` props\nSpinner.defaultProps = {\n  position: \"absolute\",\n  delay: 0,\n  width: 25,\n  height: 6,\n  color: \"black100\",\n}\n\nSpinner.displayName = \"Spinner\"\n"],"file":"Spinner.js"}
+{"version":3,"sources":["../../../src/elements/Spinner/Spinner.tsx"],"names":["SPINNER_VARIANTS","small","width","height","top","left","medium","large","Spinner","delay","color","rest","show","setShow","timeout","setTimeout","clearTimeout","spin","keyframes","Bar","Box","variants","prop","defaultProps","position","size","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,gBAAgB,GAAG;AACvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,IADF;AAELC,IAAAA,MAAM,EAAE,CAFH;AAGL;AACAC,IAAAA,GAAG,EAAE,mBAJA;AAKLC,IAAAA,IAAI,EAAE;AALD,GADgB;AASvBC,EAAAA,MAAM,EAAE;AACNJ,IAAAA,KAAK,EAAE,EADD;AAENC,IAAAA,MAAM,EAAE,GAFF;AAGN;AACAC,IAAAA,GAAG,EAAE,mBAJC;AAKNC,IAAAA,IAAI,EAAE;AALA,GATe;AAiBvBE,EAAAA,KAAK,EAAE;AACLL,IAAAA,KAAK,EAAE,EADF;AAELC,IAAAA,MAAM,EAAE,CAFH;AAGL;AACAC,IAAAA,GAAG,EAAE,iBAJA;AAKLC,IAAAA,IAAI,EAAE;AALD;AAjBgB,CAAzB;;AAsCA;AACO,IAAMG,OAA+B,GAAG,SAAlCA,OAAkC,OAA+B;AAAA,MAA5BC,KAA4B,QAA5BA,KAA4B;AAAA,MAArBC,KAAqB,QAArBA,KAAqB;AAAA,MAAXC,IAAW;;AAC5E,kBAAwB,qBAASF,KAAK,KAAK,CAAnB,CAAxB;AAAA;AAAA,MAAOG,IAAP;AAAA,MAAaC,OAAb;;AAEA,wBAAU,YAAM;AACd,QAAMC,OAAO,GAAGC,UAAU,CAAC,YAAM;AAC/BF,MAAAA,OAAO,CAAC,IAAD,CAAP;AACD,KAFyB,EAEvBJ,KAFuB,CAA1B;AAIA,WAAO,YAAM;AACXO,MAAAA,YAAY,CAACF,OAAD,CAAZ;AACD,KAFD;AAGD,GARD,EAQG,CAACL,KAAD,CARH;AAUA,MAAI,CAACG,IAAL,EAAW,OAAO,IAAP;AAEX,sBAAO,6BAAC,GAAD;AAAK,IAAA,EAAE,EAAEF,KAAF,aAAEA,KAAF,cAAEA,KAAF,GAAW;AAAlB,KAAsCC,IAAtC,EAAP;AACD,CAhBM;;;AAAMH,O;AAkBb,IAAMS,IAAI,OAAGC,2BAAH,qCAAV;AAMA,IAAMC,GAAG,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,+CACMH,IADN,EAEL,2BAAQ;AAAEI,EAAAA,QAAQ,EAAErB,gBAAZ;AAA8BsB,EAAAA,IAAI,EAAE;AAApC,CAAR,CAFK,CAAT;AAKAd,OAAO,CAACe,YAAR,GAAuB;AACrB;AACAC,EAAAA,QAAQ,EAAE,UAFW;AAGrBf,EAAAA,KAAK,EAAE,CAHc;AAIrBgB,EAAAA,IAAI,EAAE,OAJe;AAKrBf,EAAAA,KAAK,EAAE;AALc,CAAvB;AAQAF,OAAO,CAACkB,WAAR,GAAsB,SAAtB","sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { ResponsiveValue, variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\n\nconst SPINNER_VARIANTS = {\n  small: {\n    width: 12.5,\n    height: 3,\n    // TODO: Remove `top` and `left`\n    top: \"calc(50% - 1.5px)\",\n    left: \"calc(50% - 6.25px)\",\n  },\n\n  medium: {\n    width: 20,\n    height: 4.8,\n    // TODO: Remove `top` and `left`\n    top: \"calc(50% - 2.4px)\",\n    left: \"calc(50% - 10px)\",\n  },\n\n  large: {\n    width: 25,\n    height: 6,\n    // TODO: Remove `top` and `left`\n    top: \"calc(50% - 3px)\",\n    left: \"calc(50% - 12.5px)\",\n  },\n} as const\n\nexport type SpinnerSize = keyof typeof SPINNER_VARIANTS\n\nexport interface SpinnerProps\n  extends Omit<BoxProps, \"size\" | \"width\" | \"height\"> {\n  /** Delay before spinner appears */\n  delay?: number\n  /** Size of the spinner */\n  size?: ResponsiveValue<SpinnerSize>\n  /** Color of the spinner */\n  color?: ResponsiveValue<string>\n}\n\n/** Generic Spinner component */\nexport const Spinner: React.FC<SpinnerProps> = ({ delay, color, ...rest }) => {\n  const [show, setShow] = useState(delay === 0)\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setShow(true)\n    }, delay)\n\n    return () => {\n      clearTimeout(timeout)\n    }\n  }, [delay])\n\n  if (!show) return null\n\n  return <Bar bg={color ?? \"currentColor\"} {...rest} />\n}\n\nconst spin = keyframes`\n  100% {\n    transform: rotate(360deg)\n  }\n`\n\nconst Bar = styled(Box)`\n  animation: ${spin} 1s infinite linear;\n  ${variant({ variants: SPINNER_VARIANTS, prop: \"size\" })}\n`\n\nSpinner.defaultProps = {\n  // TODO: Remove `position`\n  position: \"absolute\",\n  delay: 0,\n  size: \"large\",\n  color: \"black100\",\n}\n\nSpinner.displayName = \"Spinner\"\n"],"file":"Spinner.js"}

package/dist/elements/Spinner/Spinner.story.js

@@ -29,6 +29,8 @@ var Default = function Default() {
       color: "brand",
       size: "small",
       m: 2
+    }, {
+      size: ["small", "medium", "large"]
     }]
   }, /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, {
     position: "static"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Spinner/Spinner.story.tsx"],"names":["title","parameters","chromatic","disable","Default","color","size","m","DefaultSpinner","SpinnerWithDelayedShow","story","name"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE,oBADM;AAEbC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAX;AAAb;AAFC,C;;;AAKR,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,sBACrB,6BAAC,uBAAD;AAAsB,IAAA,MAAM,EAAE,CAAC,EAAD,EAAK;AAAEC,MAAAA,KAAK,EAAE,OAAT;AAAkBC,MAAAA,IAAI,EAAE,OAAxB;AAAiCC,MAAAA,CAAC,EAAE;AAApC,KAAL;AAA9B,kBACE,6BAAC,gBAAD;AAAS,IAAA,QAAQ,EAAC;AAAlB,IADF,CADqB;AAAA,CAAhB;;;AAAMH,O;;AAMN,IAAMI,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAClC,sBAAO,6BAAC,gBAAD,OAAP;AACD,CAFM;;;AAAMA,c;;AAIN,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,GAAM;AAC1C,sBAAO,6BAAC,gBAAD;AAAS,IAAA,KAAK,EAAE;AAAhB,IAAP;AACD,CAFM;;;AAAMA,sB;AAIbA,sBAAsB,CAACC,KAAvB,GAA+B;AAC7BC,EAAAA,IAAI,EAAE;AADuB,CAA/B","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Spinner, SpinnerProps } from \"./Spinner\"\n\nexport default {\n  title: \"Components/Spinner\",\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const Default = () => (\n  <States<SpinnerProps> states={[{}, { color: \"brand\", size: \"small\", m: 2 }]}>\n    <Spinner position=\"static\" />\n  </States>\n)\n\nexport const DefaultSpinner = () => {\n  return <Spinner />\n}\n\nexport const SpinnerWithDelayedShow = () => {\n  return <Spinner delay={1000} />\n}\n\nSpinnerWithDelayedShow.story = {\n  name: \"Spinner with delayed show\",\n}\n"],"file":"Spinner.story.js"}
+{"version":3,"sources":["../../../src/elements/Spinner/Spinner.story.tsx"],"names":["title","parameters","chromatic","disable","Default","color","size","m","DefaultSpinner","SpinnerWithDelayedShow","story","name"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE,oBADM;AAEbC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAX;AAAb;AAFC,C;;;AAKR,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,sBACrB,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,KAAK,EAAE,OAAT;AAAkBC,MAAAA,IAAI,EAAE,OAAxB;AAAiCC,MAAAA,CAAC,EAAE;AAApC,KAFM,EAGN;AAAED,MAAAA,IAAI,EAAE,CAAC,OAAD,EAAU,QAAV,EAAoB,OAApB;AAAR,KAHM;AADV,kBAOE,6BAAC,gBAAD;AAAS,IAAA,QAAQ,EAAC;AAAlB,IAPF,CADqB;AAAA,CAAhB;;;AAAMF,O;;AAYN,IAAMI,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAClC,sBAAO,6BAAC,gBAAD,OAAP;AACD,CAFM;;;AAAMA,c;;AAIN,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,GAAM;AAC1C,sBAAO,6BAAC,gBAAD;AAAS,IAAA,KAAK,EAAE;AAAhB,IAAP;AACD,CAFM;;;AAAMA,sB;AAIbA,sBAAsB,CAACC,KAAvB,GAA+B;AAC7BC,EAAAA,IAAI,EAAE;AADuB,CAA/B","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Spinner, SpinnerProps } from \"./Spinner\"\n\nexport default {\n  title: \"Components/Spinner\",\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const Default = () => (\n  <States<SpinnerProps>\n    states={[\n      {},\n      { color: \"brand\", size: \"small\", m: 2 },\n      { size: [\"small\", \"medium\", \"large\"] },\n    ]}\n  >\n    <Spinner position=\"static\" />\n  </States>\n)\n\nexport const DefaultSpinner = () => {\n  return <Spinner />\n}\n\nexport const SpinnerWithDelayedShow = () => {\n  return <Spinner delay={1000} />\n}\n\nSpinnerWithDelayedShow.story = {\n  name: \"Spinner with delayed show\",\n}\n"],"file":"Spinner.story.js"}

package/dist/utils/usePortal.js

@@ -18,7 +18,10 @@ var usePortal = function usePortal() {
     appendEl.current = el;
     document.body.appendChild(el);
     return function () {
-      document.body.removeChild(el);
+      try {
+        document.body.removeChild(el);
+      } catch (e) {// Ignore
+      }
     };
   }, []);
   var createPortal = (0, _react.useCallback)(function (children) {

package/dist/utils/usePortal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/usePortal.ts"],"names":["usePortal","appendEl","el","current","document","createElement","body","appendChild","removeChild","createPortal","children","window"],"mappings":";;;;;;;AAAA;;AACA;;AAEO,IAAMA,SAAS,GAAG,SAAZA,SAAY,GAAM;AAC7B,MAAMC,QAAQ,GAAG,mBAA8B,IAA9B,CAAjB;AAEA,wBAAU,YAAM;AAAA;;AACd,QAAMC,EAAE,wBAAGD,QAAQ,CAACE,OAAZ,iEAAuBC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAA/B;AACAJ,IAAAA,QAAQ,CAACE,OAAT,GAAmBD,EAAnB;AAEAE,IAAAA,QAAQ,CAACE,IAAT,CAAcC,WAAd,CAA0BL,EAA1B;AAEA,WAAO,YAAM;AACXE,MAAAA,QAAQ,CAACE,IAAT,CAAcE,WAAd,CAA0BN,EAA1B;AACD,KAFD;AAGD,GATD,EASG,EATH;AAWA,MAAMO,YAAY,GAAG,wBACnB,UAACC,QAAD,EAAyD;AAAA;;AACvD,QAAI,OAAOC,MAAP,KAAkB,WAAtB,EAAmC,OAAO,IAAP,CADoB,CAGvD;;AACA,QAAMT,EAAE,yBAAGD,QAAQ,CAACE,OAAZ,mEAAuBC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAA/B;AACAJ,IAAAA,QAAQ,CAACE,OAAT,GAAmBD,EAAnB;AAEA,wBAAO,4BAAiBQ,QAAjB,EAA2BR,EAA3B,CAAP;AACD,GATkB,EAUnB,EAVmB,CAArB;AAaA,SAAO;AAAEO,IAAAA,YAAY,EAAZA;AAAF,GAAP;AACD,CA5BM","sourcesContent":["import React, { useEffect, useRef, useCallback } from \"react\"\nimport { createPortal as __createPortal__ } from \"react-dom\"\n\nexport const usePortal = () => {\n  const appendEl = useRef<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    const el = appendEl.current ?? document.createElement(\"div\")\n    appendEl.current = el\n\n    document.body.appendChild(el)\n\n    return () => {\n      document.body.removeChild(el)\n    }\n  }, [])\n\n  const createPortal = useCallback(\n    (children: React.ReactNode): React.ReactPortal | null => {\n      if (typeof window === \"undefined\") return null\n\n      // May execute before effect runs and appendEl is set\n      const el = appendEl.current ?? document.createElement(\"div\")\n      appendEl.current = el\n\n      return __createPortal__(children, el)\n    },\n    []\n  )\n\n  return { createPortal }\n}\n"],"file":"usePortal.js"}
+{"version":3,"sources":["../../src/utils/usePortal.ts"],"names":["usePortal","appendEl","el","current","document","createElement","body","appendChild","removeChild","e","createPortal","children","window"],"mappings":";;;;;;;AAAA;;AACA;;AAEO,IAAMA,SAAS,GAAG,SAAZA,SAAY,GAAM;AAC7B,MAAMC,QAAQ,GAAG,mBAA8B,IAA9B,CAAjB;AAEA,wBAAU,YAAM;AAAA;;AACd,QAAMC,EAAE,wBAAGD,QAAQ,CAACE,OAAZ,iEAAuBC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAA/B;AACAJ,IAAAA,QAAQ,CAACE,OAAT,GAAmBD,EAAnB;AAEAE,IAAAA,QAAQ,CAACE,IAAT,CAAcC,WAAd,CAA0BL,EAA1B;AAEA,WAAO,YAAM;AACX,UAAI;AACFE,QAAAA,QAAQ,CAACE,IAAT,CAAcE,WAAd,CAA0BN,EAA1B;AACD,OAFD,CAEE,OAAOO,CAAP,EAAU,CACV;AACD;AACF,KAND;AAOD,GAbD,EAaG,EAbH;AAeA,MAAMC,YAAY,GAAG,wBACnB,UAACC,QAAD,EAAyD;AAAA;;AACvD,QAAI,OAAOC,MAAP,KAAkB,WAAtB,EAAmC,OAAO,IAAP,CADoB,CAGvD;;AACA,QAAMV,EAAE,yBAAGD,QAAQ,CAACE,OAAZ,mEAAuBC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAA/B;AACAJ,IAAAA,QAAQ,CAACE,OAAT,GAAmBD,EAAnB;AAEA,wBAAO,4BAAiBS,QAAjB,EAA2BT,EAA3B,CAAP;AACD,GATkB,EAUnB,EAVmB,CAArB;AAaA,SAAO;AAAEQ,IAAAA,YAAY,EAAZA;AAAF,GAAP;AACD,CAhCM","sourcesContent":["import React, { useEffect, useRef, useCallback } from \"react\"\nimport { createPortal as __createPortal__ } from \"react-dom\"\n\nexport const usePortal = () => {\n  const appendEl = useRef<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    const el = appendEl.current ?? document.createElement(\"div\")\n    appendEl.current = el\n\n    document.body.appendChild(el)\n\n    return () => {\n      try {\n        document.body.removeChild(el)\n      } catch (e) {\n        // Ignore\n      }\n    }\n  }, [])\n\n  const createPortal = useCallback(\n    (children: React.ReactNode): React.ReactPortal | null => {\n      if (typeof window === \"undefined\") return null\n\n      // May execute before effect runs and appendEl is set\n      const el = appendEl.current ?? document.createElement(\"div\")\n      appendEl.current = el\n\n      return __createPortal__(children, el)\n    },\n    []\n  )\n\n  return { createPortal }\n}\n"],"file":"usePortal.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "21.0.0",
+  "version": "21.1.2",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -110,7 +110,7 @@
     "storybook-states": "1.2.0",
     "styled-components": "4.3.2",
     "ts-node": "8.1.0",
-    "typescript": "4.7.3",
+    "typescript": "4.7.4",
     "typescript-styled-plugin": "0.10.0",
     "webpack": "5"
   },
@@ -177,5 +177,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "3baf8ad44028ee5c67c3fc9175fdf825dfb74313"
+  "gitHead": "206b02b460be1ff6590927f827183c6c96843ecc"
 }