@ultraviolet/ui 1.3.2 → 1.4.0

package/dist/index.d.ts

@@ -260,6 +260,7 @@ declare const extendTheme: (extendedTheme: RecursivePartial<SCWUITheme>) => {
             backgroundStrongHover: string;
             backgroundStronger: string;
             backgroundStrongerDisabled: string;
+            backgroundStrongerHover: string;
             backgroundWeak: string;
             backgroundWeakDisabled: string;
             backgroundWeakElevated: string;
@@ -272,6 +273,7 @@ declare const extendTheme: (extendedTheme: RecursivePartial<SCWUITheme>) => {
             borderStrongHover: string;
             borderStronger: string;
             borderStrongerDisabled: string;
+            borderStrongerHover: string;
             borderWeak: string;
             borderWeakDisabled: string;
             borderWeakHover: string;
@@ -283,6 +285,7 @@ declare const extendTheme: (extendedTheme: RecursivePartial<SCWUITheme>) => {
             iconStrongHover: string;
             iconStronger: string;
             iconStrongerDisabled: string;
+            iconStrongerHover: string;
             iconWeak: string;
             iconWeakDisabled: string;
             iconWeakHover: string;
@@ -294,6 +297,7 @@ declare const extendTheme: (extendedTheme: RecursivePartial<SCWUITheme>) => {
             textStrongHover: string;
             textStronger: string;
             textStrongerDisabled: string;
+            textStrongerHover: string;
             textWeak: string;
             textWeakDisabled: string;
             textWeakHover: string;
@@ -321,14 +325,16 @@ declare const extendTheme: (extendedTheme: RecursivePartial<SCWUITheme>) => {
             };
             gradients: {
                 background: {
+                    accent: string;
                     aqua: string;
                     blue: string;
+                    emerald: string;
                     fuschia: string;
-                    green: string;
-                    orange: string;
-                    pink: string;
+                    gold: string;
+                    magenta: string;
                     primary: string;
                     purple: string;
+                    strong: string;
                 };
             };
             icon: {
@@ -406,7 +412,42 @@ declare const extendTheme: (extendedTheme: RecursivePartial<SCWUITheme>) => {
             textWeakHover: string;
         };
         secondary: {
+            background: string;
+            backgroundDisabled: string;
+            backgroundHover: string;
             backgroundStrong: string;
+            backgroundStrongDisabled: string;
+            backgroundStrongHover: string;
+            backgroundWeak: string;
+            backgroundWeakDisabled: string;
+            backgroundWeakHover: string;
+            border: string;
+            borderDisabled: string;
+            borderHover: string;
+            borderStrong: string;
+            borderStrongDisabled: string;
+            borderStrongHover: string;
+            borderWeak: string;
+            borderWeakDisabled: string;
+            borderWeakHover: string;
+            icon: string;
+            iconDisabled: string;
+            iconHover: string;
+            iconStrong: string;
+            iconStrongDisabled: string;
+            iconStrongHover: string;
+            iconWeak: string;
+            iconWeakDisabled: string;
+            iconWeakHover: string;
+            text: string;
+            textDisabled: string;
+            textHover: string;
+            textStrong: string;
+            textStrongDisabled: string;
+            textStrongHover: string;
+            textWeak: string;
+            textWeakDisabled: string;
+            textWeakHover: string;
         };
         success: {
             background: string;
@@ -505,7 +546,10 @@ declare const extendTheme: (extendedTheme: RecursivePartial<SCWUITheme>) => {
         focusSuccess: string;
         focusWarning: string;
         hoverDanger: string;
+        hoverInfo: string;
+        hoverNeutral: string;
         hoverPrimary: string;
+        hoverSuccess: string;
         hoverWarning: string;
         menu: string;
         modal: string;
@@ -759,7 +803,7 @@ type IconName = keyof typeof ICONS;
 declare const Icon: react.ForwardRefExoticComponent<{
     size?: string | number | undefined;
     name?: "filter" | "view" | "sort" | "id" | "alert" | "search" | "anchor" | "arrow-down" | "arrow-left" | "arrow-left-double" | "arrow-right" | "arrow-right-bottom" | "arrow-right-double" | "arrow-up" | "asterisk" | "auto-fix" | "bullhorn" | "burger" | "book-open-outline" | "calculator" | "calendar-range" | "cancel" | "check" | "checkbox-circle-outline" | "clock-outline" | "close" | "close-circle-outline" | "copy-content" | "credentials" | "credit-card" | "delete" | "detach" | "doc" | "dots-horizontal" | "dots-vertical" | "download" | "drag-variant" | "drag-vertical" | "east" | "email-outline" | "expand" | "eye" | "eye-off" | "github" | "help-circle-outline" | "information-outline" | "lock" | "logout" | "members" | "minus" | "moon" | "open-in-new" | "organization" | "pencil" | "play-circle-outline" | "plus" | "privacy" | "profile" | "progress-check" | "ray-end-arrow" | "ray-start-arrow" | "ray-start-end" | "ray-top-arrow" | "reboot" | "restore" | "revoke" | "rocket" | "send" | "settings" | "sun" | "support" | "switch_orga" | "unlock" | "upload" | "weather-night" | "attach" | "phone" | "earth" | "email-remove-outline" | undefined;
-    prominence?: "default" | "strong" | "stronger" | "weak" | undefined;
+    prominence?: "strong" | "default" | "stronger" | "weak" | undefined;
     color?: Color | undefined;
     'data-testid'?: string | undefined;
     disabled?: boolean | undefined;
@@ -937,19 +981,19 @@ type AvatarProps = {
 ]>;
 declare const Avatar: ({ image, size, text, textBgColor, textColor, textSize, lock, className, "data-testid": dataTestId, }: AvatarProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-declare const SIZES$1: {
+declare const SIZES: {
     large: number;
     medium: number;
     small: number;
 };
-declare const PROMINENCES$2: {
+declare const PROMINENCES$3: {
     default: string;
     strong: string;
 };
 type BadgeProps = {
     sentiment?: Color;
-    size?: keyof typeof SIZES$1;
-    prominence?: keyof typeof PROMINENCES$2;
+    size?: keyof typeof SIZES;
+    prominence?: keyof typeof PROMINENCES$3;
     /**
      * Defines icon to display on left side of badge. **Only available on medium and large sizes**.
      */
@@ -1065,42 +1109,26 @@ type BreadcrumbsType = ((props: BreadcrumbsProps) => JSX.Element) & {
 };
 declare const Breadcrumbs: BreadcrumbsType;
 
-declare const sentiments$1: {
-    readonly danger: ({ theme }: {
-        theme: Theme;
-    }) => string;
-    readonly neutral: ({ theme }: {
-        theme: Theme;
-    }) => string;
-    readonly disabled: ({ theme }: {
-        theme: Theme;
-    }) => string;
-    readonly info: ({ theme }: {
-        theme: Theme;
-    }) => string;
-    readonly primary: ({ theme }: {
-        theme: Theme;
-    }) => string;
-    readonly success: ({ theme }: {
-        theme: Theme;
-    }) => string;
-    readonly warning: ({ theme }: {
-        theme: Theme;
-    }) => string;
+declare const PROMINENCES$2: {
+    default: string;
+    strong: string;
 };
-type BulletSentiment = keyof typeof sentiments$1;
+type ProminenceType = keyof typeof PROMINENCES$2;
+declare const BULLET_SENTIMENTS: string[];
+type BulletSentiment = (typeof BULLET_SENTIMENTS)[number];
 declare const sizes: {
     readonly medium: "\n    width: 32px;\n    height: 32px;\n    font-size: 16px;\n  ";
     readonly small: "\n    width: 24px;\n    height: 24px;\n    font-size: 14px;\n  ";
 };
 type BulletSize = keyof typeof sizes;
-type ContentProps$1 = {
-    icon: ComponentProps<typeof Icon>['name'];
-    text?: never;
-} | {
-    icon?: never;
-    text: string;
-};
+type ContentProps$1 = XOR<[
+    {
+        icon: ComponentProps<typeof Icon>['name'];
+    },
+    {
+        text: string;
+    }
+]>;
 type BulletProps = {
     className?: string;
     size?: BulletSize;
@@ -1108,8 +1136,9 @@ type BulletProps = {
     tooltipBaseId?: string;
     sentiment?: BulletSentiment;
     'data-testid'?: string;
+    prominence?: ProminenceType;
 } & ContentProps$1;
-declare const Bullet: ({ className, sentiment, size, icon, text, tooltip, tooltipBaseId, "data-testid": dataTestId, }: BulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Bullet: ({ className, sentiment, size, icon, text, tooltip, tooltipBaseId, "data-testid": dataTestId, prominence, }: BulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type CardProps = {
     children: ReactNode;
@@ -1163,12 +1192,8 @@ type CheckboxProps = {
 ]>;
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
 
-declare const SIZES: {
-    readonly small: 32;
-    readonly large: 48;
-};
 type CopyButtonProps = {
-    size?: keyof typeof SIZES;
+    size?: 'small' | 'large';
     value: string;
     copyText?: string;
     copiedText?: string;

package/dist/src/components/ActionBar/index.js

@@ -12,28 +12,23 @@ const StyledDiv = /*#__PURE__*/_styled("div", {
     theme
   } = _ref;
   return theme.colors.neutral.backgroundWeakElevated;
-}, ";border:1px solid ", _ref2 => {
+}, ";border-radius:", _ref2 => {
   let {
     theme
   } = _ref2;
-  return theme.colors.neutral.border;
-}, ";border-radius:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
   return theme.radii.default;
-}, ";bottom:", _ref4 => {
+}, ";bottom:", _ref3 => {
   let {
     rank
-  } = _ref4;
+  } = _ref3;
   return SPACING + rank * (HEIGHT + SPACING);
-}, "px;box-shadow:", _ref5 => {
+}, "px;box-shadow:", _ref4 => {
   let {
     theme
-  } = _ref5;
+  } = _ref4;
   return theme.shadows.defaultShadow;
 }, ";height:", HEIGHT, "px;left:50%;position:fixed;transform:translate(-50%, 0);width:600px;animation:", fadeIn, " 0.2s ease-in-out;");
-const ActionBar = _ref6 => {
+const ActionBar = _ref5 => {
   let {
     children,
     role = 'dialog',
@@ -41,7 +36,7 @@ const ActionBar = _ref6 => {
     'aria-modal': ariaModal = 'true',
     className,
     'data-testid': dataTestId
-  } = _ref6;
+  } = _ref5;
   return /*#__PURE__*/createPortal(jsx(StyledDiv, {
     rank: rank,
     role: role,

package/dist/src/components/Alert/index.js

@@ -14,7 +14,7 @@ const alertStyles = _ref => {
     sentiment
   } = _ref;
   const sentimentColor = theme.colors[sentiment];
-  return /*#__PURE__*/css("background-color:", sentimentColor.background, ";color:", sentimentColor.text, ";border-left:4px solid ", sentimentColor.borderWeak, ";");
+  return /*#__PURE__*/css("background-color:", sentimentColor.background, ";color:", sentimentColor.text, ";border-left:4px solid ", sentimentColor.border, ";");
 };
 const typesDefaultIcons = {
   warning: 'alert',

package/dist/src/components/Badge/index.js

@@ -60,9 +60,9 @@ const generateStyles = _ref2 => {
       border: none;
     `,
     neutral: `
-      color: ${prominence === PROMINENCES.strong ? theme.colors.neutral[text] : theme.colors.neutral.textWeak};
-      background: ${theme.colors.neutral.backgroundStrong};
-      border: 1px solid ${theme.colors.neutral.borderStrong};
+      color: ${prominence === PROMINENCES.strong ? theme.colors.neutral.textStronger : theme.colors.neutral.text};
+      background: ${prominence === PROMINENCES.strong ? theme.colors.neutral.backgroundStronger : theme.colors.neutral.backgroundWeak};
+      border: 1px solid ${prominence === PROMINENCES.strong ? theme.colors.neutral.borderStronger : theme.colors.neutral.border};
     `
   };
 };

package/dist/src/components/Bullet/index.js

@@ -1,74 +1,13 @@
 import _styled from '@emotion/styled/base';
+import { SENTIMENTS_WITHOUT_NEUTRAL } from '../../theme/index.js';
+import capitalize from '../../utils/capitalize.js';
 import { Icon } from '../Icon/index.js';
 import { Tooltip } from '../Tooltip/index.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 
-const sentiments = {
-  danger: _ref => {
-    let {
-      theme
-    } = _ref;
-    return `
-    background-color: ${theme.colors.danger.background};
-    color: ${theme.colors.danger.text};
-  `;
-  },
-  neutral: _ref2 => {
-    let {
-      theme
-    } = _ref2;
-    return `
-    border: 1px solid ${theme.colors.neutral.borderWeak};
-    background-color: ${theme.colors.neutral.background};
-    color: ${theme.colors.neutral.text};
-  `;
-  },
-  disabled: _ref3 => {
-    let {
-      theme
-    } = _ref3;
-    return `
-    border: 1px solid ${theme.colors.neutral.borderWeak};
-    background-color: ${theme.colors.neutral.background};
-    color: ${theme.colors.neutral.textWeak};
-  `;
-  },
-  info: _ref4 => {
-    let {
-      theme
-    } = _ref4;
-    return `
-    background-color: ${theme.colors.info.background};
-    color: ${theme.colors.info.text};
-  `;
-  },
-  primary: _ref5 => {
-    let {
-      theme
-    } = _ref5;
-    return `
-    background-color: ${theme.colors.primary.background};
-    color: ${theme.colors.primary.text};
-  `;
-  },
-  success: _ref6 => {
-    let {
-      theme
-    } = _ref6;
-    return `
-    background-color: ${theme.colors.success.background};
-    color: ${theme.colors.success.text};
-  `;
-  },
-  warning: _ref7 => {
-    let {
-      theme
-    } = _ref7;
-    return `
-    background-color: ${theme.colors.warning.background};
-    color: ${theme.colors.warning.text};
-  `;
-  }
+const PROMINENCES = {
+  default: 'default',
+  strong: 'strong'
 };
 const sizes = {
   medium: `
@@ -82,32 +21,60 @@ const sizes = {
     font-size: 14px;
   `
 };
-const sentimentStyles = _ref8 => {
+const sentimentStyles = _ref => {
   let {
-    sentiment
-  } = _ref8;
-  return sentiments[sentiment];
+    theme,
+    prominence
+  } = _ref;
+  const definedProminence = prominence === PROMINENCES.strong ? capitalize(PROMINENCES.strong) : '';
+  const text = `text${definedProminence}`;
+  const background = `background${definedProminence}`;
+  return {
+    ...SENTIMENTS_WITHOUT_NEUTRAL.reduce((reducer, sentiment) => ({
+      ...reducer,
+      [sentiment]: `
+      color: ${theme.colors[sentiment][text]};
+      background: ${theme.colors[sentiment][background]};
+      border: 1px solid ${theme.colors[sentiment][background]};
+    `
+    }), {}),
+    neutral: `
+      color: ${prominence === PROMINENCES.strong ? theme.colors.neutral[text] : theme.colors.neutral.text};
+      background: ${theme.colors.neutral.background};
+      border: 1px solid ${theme.colors.neutral.border};
+    `,
+    disabled: `
+      color: ${theme.colors.neutral.textWeak};
+      background: ${theme.colors.neutral.backgroundStrong};
+      border: none;
+    `
+  };
 };
-const sizeStyles = _ref9 => {
+const sizeStyles = _ref2 => {
   let {
     size
-  } = _ref9;
+  } = _ref2;
   return sizes[size];
 };
 const StyledContainer = /*#__PURE__*/_styled('div', {
   target: "e11loam60"
-})("display:inline-flex;border-radius:", _ref10 => {
+})("display:inline-flex;border-radius:", _ref3 => {
   let {
     theme
-  } = _ref10;
+  } = _ref3;
   return theme.radii.circle;
-}, ";justify-content:center;align-items:center;font-weight:", _ref11 => {
+}, ";justify-content:center;align-items:center;", _ref4 => {
   let {
-    theme
-  } = _ref11;
-  return theme.typography.bodyStrong.weight;
-}, ";", sentimentStyles, " ", sizeStyles, ";");
-const Bullet = _ref12 => {
+    theme,
+    prominence,
+    sentiment
+  } = _ref4;
+  return sentimentStyles({
+    theme,
+    prominence
+  })[sentiment];
+}, " ", sizeStyles, ";");
+const Bullet = _ref5 => {
   let {
     className,
     sentiment = 'neutral',
@@ -116,8 +83,9 @@ const Bullet = _ref12 => {
     text,
     tooltip,
     tooltipBaseId,
-    'data-testid': dataTestId
-  } = _ref12;
+    'data-testid': dataTestId,
+    prominence = 'default'
+  } = _ref5;
   return jsx(Tooltip, {
     id: tooltipBaseId,
     text: tooltip,
@@ -126,6 +94,7 @@ const Bullet = _ref12 => {
       size: size,
       className: className,
       "data-testid": dataTestId,
+      prominence: prominence,
       children: icon ? jsx(Icon, {
         name: icon,
         size: "50%"
@@ -134,4 +103,4 @@ const Bullet = _ref12 => {
   });
 };
 
-export { Bullet };
+export { Bullet, PROMINENCES };

package/dist/src/components/Button/index.js

@@ -103,7 +103,7 @@ const StyledFilledButton = /*#__PURE__*/_styled('button', {
     theme,
     sentiment
   } = _ref3;
-  return theme.colors[sentiment][sentiment === 'neutral' ? 'text' : 'textStrong'];
+  return theme.colors[sentiment].textStrong;
 }, ";", _ref4 => {
   let {
     theme,
@@ -113,13 +113,13 @@ const StyledFilledButton = /*#__PURE__*/_styled('button', {
   return disabled ? `
             background: ${theme.colors[sentiment].backgroundStrongDisabled};
             color:
-              ${theme.colors[sentiment][sentiment === 'neutral' ? 'textDisabled' : 'textStrongDisabled']};
+              ${theme.colors[sentiment].textStrongDisabled};
         ` : `
             &:hover, &:active
             {
                 background: ${theme.colors[sentiment].backgroundStrongHover};
                 color:
-                ${theme.colors[sentiment][sentiment === 'neutral' ? 'textHover' : 'textStrongHover']};
+                ${theme.colors[sentiment].textStrongHover};
             }
   `;
 }, ";");
@@ -152,7 +152,7 @@ const StyledOutlinedButton = /*#__PURE__*/_styled('button', {
     ` : `
         &:hover, &:active
        {
-            background: ${theme.colors[sentiment].backgroundWeakHover};
+            background: ${theme.colors[sentiment].backgroundHover};
             color:
             ${theme.colors[sentiment][sentiment === 'neutral' ? 'textHover' : 'textWeakHover']};
             border: 1px solid ${theme.colors[sentiment][sentiment === 'neutral' ? 'borderStrongHover' : 'borderWeakHover']};
@@ -181,7 +181,7 @@ const StyledGhostButton = /*#__PURE__*/_styled('button', {
       ` : `
         &:hover, &:active
         {
-            background: ${theme.colors[sentiment].backgroundWeakHover};
+            background: ${theme.colors[sentiment].backgroundHover};
             color:
               ${theme.colors[sentiment][sentiment === 'neutral' ? 'textHover' : 'textWeakHover']};
         }

package/dist/src/components/Carousel/index.js

@@ -19,74 +19,77 @@ const StyledBeforeScroll = /*#__PURE__*/_styled("span", {
   let {
     theme
   } = _ref;
-  return theme.colors.neutral.backgroundWeak;
+  return theme.colors.neutral.background;
 }, "\n  );cursor:w-resize;z-index:auto;");
 const StyledScrollableWrapper = /*#__PURE__*/_styled("div", {
   target: "e1id70w02"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1td2787",
-  styles: "overflow-x:scroll;overflow-y:hidden;white-space:nowrap;padding-left:100px;padding-right:100px;padding-bottom:16px;>*:not(:last-child){margin-right:16px;}"
-} : {
-  name: "1td2787",
-  styles: "overflow-x:scroll;overflow-y:hidden;white-space:nowrap;padding-left:100px;padding-right:100px;padding-bottom:16px;>*:not(:last-child){margin-right:16px;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+})("overflow-x:scroll;overflow-y:hidden;white-space:nowrap;padding:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space['2'];
+}, " 100px;>*:not(:last-child){margin-right:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space['2'];
+}, ";}");
 const StyledAfterScroll = /*#__PURE__*/_styled("span", {
   target: "e1id70w01"
-})("position:absolute;bottom:0;right:0;width:100px;height:100%;content:'';cursor:e-resize;z-index:auto;background:linear-gradient(\n    -90deg,\n    ", _ref2 => {
+})("position:absolute;bottom:0;right:0;width:100px;height:100%;content:'';cursor:e-resize;z-index:auto;background:linear-gradient(\n    -90deg,\n    ", _ref4 => {
   let {
     theme
-  } = _ref2;
+  } = _ref4;
   return theme.colors.neutral.backgroundWeak;
 }, ",\n    rgba(255, 255, 255, 0)\n  );");
 const StyledBorderWrapper = /*#__PURE__*/_styled("div", {
   target: "e1id70w00"
-})("display:inline-block;border-radius:", _ref3 => {
+})("display:inline-block;border-radius:", _ref5 => {
   let {
     theme
-  } = _ref3;
+  } = _ref5;
   return theme.radii.default;
-}, ";border:1px solid ", _ref4 => {
+}, ";border:1px solid ", _ref6 => {
   let {
     theme
-  } = _ref4;
+  } = _ref6;
   return theme.colors.neutral.borderWeak;
-}, ";height:261px;width:248px;max-width:240px;overflow-wrap:break-word;white-space:normal;cursor:grab;&:hover,&:active,&:focus{border:1px solid ", _ref5 => {
+}, ";height:261px;width:248px;max-width:240px;overflow-wrap:break-word;white-space:normal;cursor:grab;&:hover,&:active,&:focus{border:1px solid ", _ref7 => {
   let {
     theme
-  } = _ref5;
+  } = _ref7;
   return theme.colors.primary.border;
-}, ";transition:box-shadow 0.2s ease;box-shadow:", _ref6 => {
+}, ";transition:box-shadow 0.2s ease;box-shadow:", _ref8 => {
   let {
     theme
-  } = _ref6;
+  } = _ref8;
   return theme.shadows.focusPrimary;
-}, ";}img{border-radius:", _ref7 => {
+}, ";}img{border-radius:", _ref9 => {
   let {
     theme
-  } = _ref7;
+  } = _ref9;
   return theme.radii.default;
-}, " ", _ref8 => {
+}, " ", _ref10 => {
   let {
     theme
-  } = _ref8;
+  } = _ref10;
   return theme.radii.default;
 }, " 0 0;}");
-const CarouselItem = _ref9 => {
+const CarouselItem = _ref11 => {
   let {
     children
-  } = _ref9;
+  } = _ref11;
   return jsx(StyledBorderWrapper, {
     draggable: "true",
     children: children
   });
 };
-const Carousel = _ref10 => {
+const Carousel = _ref12 => {
   let {
     children,
     className,
     'data-testid': dataTestId = 'scrollbar'
-  } = _ref10;
+  } = _ref12;
   const scrollRef = useRef(null);
   let intervalLeft;
   let intervalRight;

package/dist/src/components/Checkbox/index.js

@@ -18,7 +18,7 @@ const InnerCheckbox = /*#__PURE__*/_styled("rect", {
   let {
     theme
   } = _ref2;
-  return theme.colors.neutral.textWeak;
+  return theme.colors.neutral.borderStrong;
 }, ";");
 const CheckMark = /*#__PURE__*/_styled("rect", {
   target: "eqr7bqq6"
@@ -168,12 +168,12 @@ const CheckboxContainer = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref26;
-  return theme.colors.neutral.textDisabled;
+  return theme.colors.neutral.borderStrongDisabled;
 }, ";", InnerCheckbox, "{stroke:", _ref27 => {
   let {
     theme
   } = _ref27;
-  return theme.colors.neutral.textDisabled;
+  return theme.colors.neutral.borderStrongDisabled;
 }, ";fill:", _ref28 => {
   let {
     theme