@strapi/design-system 1.9.0 → 1.10.0-alpha.0

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -1,30 +1,41 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { ChevronRight as d } from "@strapi/icons";
-import m from "styled-components";
-import { VisuallyHidden as p } from "../VisuallyHidden/VisuallyHidden.js";
-import { Flex as o } from "../Flex/Flex.js";
-import { Box as t } from "../Box/Box.js";
-import { Typography as l } from "../Typography/Typography.js";
-const s = m(o)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const icons = require('@strapi/icons');
+const styled = require('styled-components');
+const VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
+const Flex = require('../Flex/Flex.js');
+const Box = require('../Box/Box.js');
+const Typography = require('../Typography/Typography.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const CrumbWrapper = styled__default.default(Flex.Flex) `
   svg {
     height: ${10 / 16}rem;
     width: ${10 / 16}rem;
     path {
-      fill: ${({ theme: r }) => r.colors.neutral500};
+      fill: ${({ theme }) => theme.colors.neutral500};
     }
   }
-  :last-of-type ${t} {
+  :last-of-type ${Box.Box} {
     display: none;
   }
-  :last-of-type ${l} {
-    color: ${({ theme: r }) => r.colors.neutral800};
-    font-weight: ${({ theme: r }) => r.fontWeights.bold};
+  :last-of-type ${Typography.Typography} {
+    color: ${({ theme }) => theme.colors.neutral800};
+    font-weight: ${({ theme }) => theme.fontWeights.bold};
   }
-`, h = ({ children: r }) => i(s, { inline: !0, as: "li", children: [e(l, { variant: "pi", textColor: "neutral600", children: r }), e(t, { "aria-hidden": !0, paddingLeft: 3, paddingRight: 3, children: e(d, {}) })] });
-h.displayName = "Crumb";
-const c = ({ children: r, label: n, ...a }) => i(o, { ...a, children: [e(p, { children: n }), e("ol", { "aria-hidden": !0, children: r })] });
-c.displayName = "Breadcrumbs";
-export {
-  c as Breadcrumbs,
-  h as Crumb
+`;
+const Crumb = ({ children }) => {
+    return (jsxRuntime.jsxs(CrumbWrapper, { inline: true, as: "li", children: [jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: "neutral600", children: children }), jsxRuntime.jsx(Box.Box, { "aria-hidden": true, paddingLeft: 3, paddingRight: 3, children: jsxRuntime.jsx(icons.ChevronRight, {}) })] }));
 };
+Crumb.displayName = 'Crumb';
+const Breadcrumbs = ({ children, label, ...props }) => (jsxRuntime.jsxs(Flex.Flex, { ...props, children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: label }), jsxRuntime.jsx("ol", { "aria-hidden": true, children: children })] }));
+Breadcrumbs.displayName = 'Breadcrumbs';
+
+exports.Breadcrumbs = Breadcrumbs;
+exports.Crumb = Crumb;

package/dist/Breadcrumbs/Breadcrumbs.mjs

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronRight } from '@strapi/icons';
+import styled from 'styled-components';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const CrumbWrapper = styled(Flex) `
+  svg {
+    height: ${10 / 16}rem;
+    width: ${10 / 16}rem;
+    path {
+      fill: ${({ theme }) => theme.colors.neutral500};
+    }
+  }
+  :last-of-type ${Box} {
+    display: none;
+  }
+  :last-of-type ${Typography} {
+    color: ${({ theme }) => theme.colors.neutral800};
+    font-weight: ${({ theme }) => theme.fontWeights.bold};
+  }
+`;
+const Crumb = ({ children }) => {
+    return (jsxs(CrumbWrapper, { inline: true, as: "li", children: [jsx(Typography, { variant: "pi", textColor: "neutral600", children: children }), jsx(Box, { "aria-hidden": true, paddingLeft: 3, paddingRight: 3, children: jsx(ChevronRight, {}) })] }));
+};
+Crumb.displayName = 'Crumb';
+const Breadcrumbs = ({ children, label, ...props }) => (jsxs(Flex, { ...props, children: [jsx(VisuallyHidden, { children: label }), jsx("ol", { "aria-hidden": true, children: children })] }));
+Breadcrumbs.displayName = 'Breadcrumbs';
+
+export { Breadcrumbs, Crumb };

package/dist/Breadcrumbs/index.js

@@ -1,5 +1,10 @@
-import { Breadcrumbs as b, Crumb as e } from "./Breadcrumbs.js";
-export {
-  b as Breadcrumbs,
-  e as Crumb
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Breadcrumbs = require('./Breadcrumbs.js');
+
+
+
+exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
+exports.Crumb = Breadcrumbs.Crumb;

package/dist/Breadcrumbs/index.mjs

@@ -0,0 +1 @@
+export { Breadcrumbs, Crumb } from './Breadcrumbs.mjs';

package/dist/Button/Button.js

@@ -1,25 +1,37 @@
-import { jsxs as g, jsx as r } from "react/jsx-runtime";
-import b from "react";
-import { Loader as y } from "@strapi/icons";
-import f, { keyframes as v } from "styled-components";
-import { DEFAULT as $, BUTTON_SIZES as B } from "./constants.js";
-import { getDisabledStyle as s, getHoverStyle as S, getActiveStyle as x, getVariantStyle as C } from "./utils.js";
-import { BaseButton as k } from "../BaseButton/BaseButton.js";
-import { Box as w } from "../Box/Box.js";
-import { Typography as L } from "../Typography/Typography.js";
-import { Flex as T } from "../Flex/Flex.js";
-const j = v`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const icons = require('@strapi/icons');
+const styled = require('styled-components');
+const constants = require('./constants.js');
+const utils = require('./utils.js');
+const BaseButton = require('../BaseButton/BaseButton.js');
+const Box = require('../Box/Box.js');
+const Typography = require('../Typography/Typography.js');
+const Flex = require('../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const React__default = /*#__PURE__*/_interopDefault(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const rotation = styled.keyframes `
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(359deg);
   }
-`, A = f(y)`
-  animation: ${j} 2s infinite linear;
+`;
+const LoaderAnimated = styled__default.default(icons.Loader) `
+  animation: ${rotation} 2s infinite linear;
   will-change: transform;
-`, D = f(k)`
-  height: ${({ theme: i, size: t }) => i.sizes.button[t]};
+`;
+const ButtonWrapper = styled__default.default(BaseButton.BaseButton) `
+  height: ${({ theme, size }) => theme.sizes.button[size]};
 
   svg {
     height: ${12 / 16}rem;
@@ -27,30 +39,33 @@ const j = v`
   }
 
   &[aria-disabled='true'] {
-    ${s}
+    ${utils.getDisabledStyle}
 
     &:active {
-      ${s}
+      ${utils.getDisabledStyle}
     }
   }
 
   &:hover {
-    ${S}
+    ${utils.getHoverStyle}
   }
 
   &:active {
-    ${x}
+    ${utils.getActiveStyle}
   }
 
-  ${C}
-`, N = b.forwardRef(({ variant: i = $, startIcon: t, endIcon: n, disabled: l = !1, children: p, onClick: d, size: m = B[0], loading: o = !1, fullWidth: e = !1, ...c }, u) => {
-  const a = l || o;
-  return g(D, { ref: u, "aria-disabled": a, disabled: a, size: m, variant: i, onClick: (h) => {
-    !a && d && d(h);
-  }, fullWidth: e, alignItems: "center", background: "buttonPrimary600", borderColor: "buttonPrimary600", gap: 2, inline: e, justifyContent: e ? "center" : void 0, paddingLeft: 4, paddingRight: 4, width: e ? "100%" : void 0, ...c, children: [(t || o) && r(w, { "aria-hidden": !0, children: o ? r(A, {}) : t }), r(L, { variant: m === "S" ? "pi" : void 0, fontWeight: "bold", textColor: "buttonNeutral0", children: p }), n && r(T, { "aria-hidden": !0, children: n })] });
+  ${utils.getVariantStyle}
+`;
+const Button = React__default.default.forwardRef(({ variant = constants.DEFAULT, startIcon, endIcon, disabled = false, children, onClick, size = constants.BUTTON_SIZES[0], loading = false, fullWidth = false, ...props }, ref) => {
+    const isDisabled = disabled || loading;
+    const handleClick = (e) => {
+        if (!isDisabled && onClick) {
+            onClick(e);
+        }
+    };
+    return (jsxRuntime.jsxs(ButtonWrapper, { ref: ref, "aria-disabled": isDisabled, disabled: isDisabled, size: size, variant: variant, onClick: handleClick, fullWidth: fullWidth, alignItems: "center", background: "buttonPrimary600", borderColor: "buttonPrimary600", gap: 2, inline: fullWidth, justifyContent: fullWidth ? 'center' : undefined, paddingLeft: 4, paddingRight: 4, width: fullWidth ? '100%' : undefined, ...props, children: [(startIcon || loading) && jsxRuntime.jsx(Box.Box, { "aria-hidden": true, children: loading ? jsxRuntime.jsx(LoaderAnimated, {}) : startIcon }), jsxRuntime.jsx(Typography.Typography, { variant: size === 'S' ? 'pi' : undefined, fontWeight: "bold", textColor: "buttonNeutral0", children: children }), endIcon && jsxRuntime.jsx(Flex.Flex, { "aria-hidden": true, children: endIcon })] }));
 });
-N.displayName = "Button";
-export {
-  N as Button,
-  D as ButtonWrapper
-};
+Button.displayName = 'Button';
+
+exports.Button = Button;
+exports.ButtonWrapper = ButtonWrapper;

package/dist/Button/Button.mjs

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { Loader } from '@strapi/icons';
+import styled, { keyframes } from 'styled-components';
+import { DEFAULT, BUTTON_SIZES } from './constants.mjs';
+import { getDisabledStyle, getHoverStyle, getActiveStyle, getVariantStyle } from './utils.mjs';
+import { BaseButton } from '../BaseButton/BaseButton.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+const rotation = keyframes `
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`;
+const LoaderAnimated = styled(Loader) `
+  animation: ${rotation} 2s infinite linear;
+  will-change: transform;
+`;
+const ButtonWrapper = styled(BaseButton) `
+  height: ${({ theme, size }) => theme.sizes.button[size]};
+
+  svg {
+    height: ${12 / 16}rem;
+    width: auto;
+  }
+
+  &[aria-disabled='true'] {
+    ${getDisabledStyle}
+
+    &:active {
+      ${getDisabledStyle}
+    }
+  }
+
+  &:hover {
+    ${getHoverStyle}
+  }
+
+  &:active {
+    ${getActiveStyle}
+  }
+
+  ${getVariantStyle}
+`;
+const Button = React__default.forwardRef(({ variant = DEFAULT, startIcon, endIcon, disabled = false, children, onClick, size = BUTTON_SIZES[0], loading = false, fullWidth = false, ...props }, ref) => {
+    const isDisabled = disabled || loading;
+    const handleClick = (e) => {
+        if (!isDisabled && onClick) {
+            onClick(e);
+        }
+    };
+    return (jsxs(ButtonWrapper, { ref: ref, "aria-disabled": isDisabled, disabled: isDisabled, size: size, variant: variant, onClick: handleClick, fullWidth: fullWidth, alignItems: "center", background: "buttonPrimary600", borderColor: "buttonPrimary600", gap: 2, inline: fullWidth, justifyContent: fullWidth ? 'center' : undefined, paddingLeft: 4, paddingRight: 4, width: fullWidth ? '100%' : undefined, ...props, children: [(startIcon || loading) && jsx(Box, { "aria-hidden": true, children: loading ? jsx(LoaderAnimated, {}) : startIcon }), jsx(Typography, { variant: size === 'S' ? 'pi' : undefined, fontWeight: "bold", textColor: "buttonNeutral0", children: children }), endIcon && jsx(Flex, { "aria-hidden": true, children: endIcon })] }));
+});
+Button.displayName = 'Button';
+
+export { Button, ButtonWrapper };

package/dist/Button/constants.js

@@ -1,14 +1,27 @@
-const s = "success-light", t = "danger-light", c = "default", n = "tertiary", o = "secondary", S = "danger", T = "success", A = "ghost", e = [s, t], E = [c, n, o, S, T, A, ...e], I = ["S", "M", "L"];
-export {
-  I as BUTTON_SIZES,
-  S as DANGER,
-  t as DANGER_LIGHT,
-  c as DEFAULT,
-  A as GHOST,
-  e as LIGHT_VARIANTS,
-  o as SECONDARY,
-  T as SUCCESS,
-  s as SUCCESS_LIGHT,
-  n as TERTIARY,
-  E as VARIANTS
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const SUCCESS_LIGHT = 'success-light';
+const DANGER_LIGHT = 'danger-light';
+const DEFAULT = 'default';
+const TERTIARY = 'tertiary';
+const SECONDARY = 'secondary';
+const DANGER = 'danger';
+const SUCCESS = 'success';
+const GHOST = 'ghost';
+const LIGHT_VARIANTS = [SUCCESS_LIGHT, DANGER_LIGHT];
+const VARIANTS = [DEFAULT, TERTIARY, SECONDARY, DANGER, SUCCESS, GHOST, ...LIGHT_VARIANTS];
+const BUTTON_SIZES = ['S', 'M', 'L'];
+
+exports.BUTTON_SIZES = BUTTON_SIZES;
+exports.DANGER = DANGER;
+exports.DANGER_LIGHT = DANGER_LIGHT;
+exports.DEFAULT = DEFAULT;
+exports.GHOST = GHOST;
+exports.LIGHT_VARIANTS = LIGHT_VARIANTS;
+exports.SECONDARY = SECONDARY;
+exports.SUCCESS = SUCCESS;
+exports.SUCCESS_LIGHT = SUCCESS_LIGHT;
+exports.TERTIARY = TERTIARY;
+exports.VARIANTS = VARIANTS;

package/dist/Button/constants.mjs

@@ -0,0 +1,13 @@
+const SUCCESS_LIGHT = 'success-light';
+const DANGER_LIGHT = 'danger-light';
+const DEFAULT = 'default';
+const TERTIARY = 'tertiary';
+const SECONDARY = 'secondary';
+const DANGER = 'danger';
+const SUCCESS = 'success';
+const GHOST = 'ghost';
+const LIGHT_VARIANTS = [SUCCESS_LIGHT, DANGER_LIGHT];
+const VARIANTS = [DEFAULT, TERTIARY, SECONDARY, DANGER, SUCCESS, GHOST, ...LIGHT_VARIANTS];
+const BUTTON_SIZES = ['S', 'M', 'L'];
+
+export { BUTTON_SIZES, DANGER, DANGER_LIGHT, DEFAULT, GHOST, LIGHT_VARIANTS, SECONDARY, SUCCESS, SUCCESS_LIGHT, TERTIARY, VARIANTS };

package/dist/Button/index.js

@@ -1,5 +1,10 @@
-import { Button as r, ButtonWrapper as p } from "./Button.js";
-export {
-  r as Button,
-  p as ButtonWrapper
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Button = require('./Button.js');
+
+
+
+exports.Button = Button.Button;
+exports.ButtonWrapper = Button.ButtonWrapper;

package/dist/Button/index.mjs

@@ -0,0 +1 @@
+export { Button, ButtonWrapper } from './Button.mjs';

package/dist/Button/utils.js

@@ -1,112 +1,161 @@
-import { SUCCESS_LIGHT as $, DANGER_LIGHT as n, TERTIARY as s, DEFAULT as d, SECONDARY as u, VARIANTS as p, LIGHT_VARIANTS as g, GHOST as b, DANGER as t, SUCCESS as f } from "./constants.js";
-import { Typography as c } from "../Typography/Typography.js";
-const l = (o) => o === $ || o === n ? `${o.substring(0, o.lastIndexOf("-"))}` : o === s ? "neutral" : o === d || o === u || p.every((r) => r !== o) ? "primary" : `${o}`, k = ({ theme: o }) => `
-    border: 1px solid ${o.colors.neutral200};
-    background: ${o.colors.neutral150};
-    ${c} {
-      color: ${o.colors.neutral600};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const constants = require('./constants.js');
+const Typography = require('../Typography/Typography.js');
+
+const getVariantColorName = (variant) => {
+    if (variant === constants.SUCCESS_LIGHT || variant === constants.DANGER_LIGHT) {
+        return `${variant.substring(0, variant.lastIndexOf('-'))}`;
+    }
+    if (variant === constants.TERTIARY) {
+        return 'neutral';
+    }
+    if (variant === constants.DEFAULT || variant === constants.SECONDARY || constants.VARIANTS.every((vari) => vari !== variant)) {
+        return 'primary';
+    }
+    // @ts-expect-error ghost is a variant, but ghostXXX is not any color...
+    return `${variant}`;
+};
+const getDisabledStyle = ({ theme }) => {
+    return `
+    border: 1px solid ${theme.colors.neutral200};
+    background: ${theme.colors.neutral150};
+    ${Typography.Typography} {
+      color: ${theme.colors.neutral600};
     }
     svg {
       > g, path {
-        fill: ${o.colors.neutral600};
+        fill: ${theme.colors.neutral600};
       }
     }
-  `, i = ({ theme: o, variant: r }) => [...g, u].includes(r) ? `
-      background-color: ${o.colors.neutral0};
-    ` : r === s ? `
-      background-color: ${o.colors.neutral100};
-    ` : r === b ? `
-      background-color: ${o.colors.neutral100};
-    ` : r === d ? `
-      border: 1px solid ${o.colors.buttonPrimary500};
-      background: ${o.colors.buttonPrimary500};
-    ` : `
-    border: 1px solid ${o.colors[`${l(r)}500`]};
-    background: ${o.colors[`${l(r)}500`]};
-  `, x = ({ theme: o, variant: r }) => [...g, u].includes(r) ? `
-      background-color: ${o.colors.neutral0};
-      border: 1px solid ${o.colors[`${l(r)}600`]};
-      ${c} {
-        color: ${o.colors[`${l(r)}600`]};
+  `;
+};
+const getHoverStyle = ({ theme, variant }) => {
+    if ([...constants.LIGHT_VARIANTS, constants.SECONDARY].includes(variant)) {
+        return `
+      background-color: ${theme.colors.neutral0};
+    `;
+    }
+    if (variant === constants.TERTIARY) {
+        return `
+      background-color: ${theme.colors.neutral100};
+    `;
+    }
+    if (variant === constants.GHOST) {
+        return `
+      background-color: ${theme.colors.neutral100};
+    `;
+    }
+    if (variant === constants.DEFAULT) {
+        return `
+      border: 1px solid ${theme.colors.buttonPrimary500};
+      background: ${theme.colors.buttonPrimary500};
+    `;
+    }
+    return `
+    border: 1px solid ${theme.colors[`${getVariantColorName(variant)}500`]};
+    background: ${theme.colors[`${getVariantColorName(variant)}500`]};
+  `;
+};
+const getActiveStyle = ({ theme, variant }) => {
+    if ([...constants.LIGHT_VARIANTS, constants.SECONDARY].includes(variant)) {
+        return `
+      background-color: ${theme.colors.neutral0};
+      border: 1px solid ${theme.colors[`${getVariantColorName(variant)}600`]};
+      ${Typography.Typography} {
+        color: ${theme.colors[`${getVariantColorName(variant)}600`]};
       }
       svg {
         > g, path {
-          fill: ${o.colors[`${l(r)}600`]};
+          fill: ${theme.colors[`${getVariantColorName(variant)}600`]};
         }
       }
-    ` : r === s ? `
-      background-color: ${o.colors.neutral150};
-    ` : `
-    border: 1px solid ${o.colors[`${l(r)}600`]};
-    background: ${o.colors[`${l(r)}600`]};
-  `, a = ({ theme: o, variant: r }) => {
-  switch (r) {
-    case n:
-    case $:
-    case u:
-      return `
-          border: 1px solid ${o.colors[`${l(r)}200`]};
-          background: ${o.colors[`${l(r)}100`]};
-          ${c} {
-            color: ${o.colors[`${l(r)}700`]};
+    `;
+    }
+    if (variant === constants.TERTIARY) {
+        return `
+      background-color: ${theme.colors.neutral150};
+    `;
+    }
+    return `
+    border: 1px solid ${theme.colors[`${getVariantColorName(variant)}600`]};
+    background: ${theme.colors[`${getVariantColorName(variant)}600`]};
+  `;
+};
+const getVariantStyle = ({ theme, variant }) => {
+    switch (variant) {
+        case constants.DANGER_LIGHT:
+        case constants.SUCCESS_LIGHT:
+        case constants.SECONDARY: {
+            return `
+          border: 1px solid ${theme.colors[`${getVariantColorName(variant)}200`]};
+          background: ${theme.colors[`${getVariantColorName(variant)}100`]};
+          ${Typography.Typography} {
+            color: ${theme.colors[`${getVariantColorName(variant)}700`]};
           }
           svg {
             > g, path {
-              fill: ${o.colors[`${l(r)}700`]};
+              fill: ${theme.colors[`${getVariantColorName(variant)}700`]};
             }
           }
         `;
-    case s:
-      return `
-          border: 1px solid ${o.colors.neutral200};
-          background: ${o.colors.neutral0};
-          ${c} {
-            color: ${o.colors.neutral800};
+        }
+        case constants.TERTIARY: {
+            return `
+          border: 1px solid ${theme.colors.neutral200};
+          background: ${theme.colors.neutral0};
+          ${Typography.Typography} {
+            color: ${theme.colors.neutral800};
           }
           svg {
             > g, path {
-              fill: ${o.colors.neutral800};
+              fill: ${theme.colors.neutral800};
             }
           }
         `;
-    case b:
-      return `
+        }
+        case constants.GHOST: {
+            return `
         border: 1px solid transparent;
         background: transparent;
 
-        ${c} {
-          color: ${o.colors.neutral800};
+        ${Typography.Typography} {
+          color: ${theme.colors.neutral800};
         }
 
         svg {
           > g, path {
-            fill: ${o.colors.neutral500};
+            fill: ${theme.colors.neutral500};
           }
         }
       `;
-    case f:
-    case t:
-      return `
-          border: 1px solid ${o.colors[`${l(r)}600`]};
-          background: ${o.colors[`${l(r)}600`]};
-          ${c} {
-            color: ${o.colors.neutral0};
+        }
+        case constants.SUCCESS:
+        case constants.DANGER: {
+            return `
+          border: 1px solid ${theme.colors[`${getVariantColorName(variant)}600`]};
+          background: ${theme.colors[`${getVariantColorName(variant)}600`]};
+          ${Typography.Typography} {
+            color: ${theme.colors.neutral0};
           }
         `;
-    default:
-      return `
+        }
+        default: {
+            return `
           svg {
             > g, path {
-              fill: ${o.colors.buttonNeutral0};
+              fill: ${theme.colors.buttonNeutral0};
             }
           }
         `;
-  }
-};
-export {
-  x as getActiveStyle,
-  k as getDisabledStyle,
-  i as getHoverStyle,
-  l as getVariantColorName,
-  a as getVariantStyle
+        }
+    }
 };
+
+exports.getActiveStyle = getActiveStyle;
+exports.getDisabledStyle = getDisabledStyle;
+exports.getHoverStyle = getHoverStyle;
+exports.getVariantColorName = getVariantColorName;
+exports.getVariantStyle = getVariantStyle;