@ultraviolet/ui 1.3.1 → 1.4.0

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

@@ -1,62 +1,9 @@
-import _styled from '@emotion/styled/base';
 import useClipboard from 'react-use-clipboard';
-import { Icon } from '../Icon/index.js';
-import { Tooltip } from '../Tooltip/index.js';
+import { Button } from '../Button/index.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 
 const COPY_DURATION = 2500;
-const SIZES = {
-  small: 32,
-  large: 48
-};
-
-/**
- * TODO: replace when buttonV2 will be available
- */
-const StyledButton = /*#__PURE__*/_styled('button', {
-  shouldForwardProp: prop => !['size', 'sentiment', 'noBorder'].includes(prop),
-  target: "e1qa6uyd0"
-})("width:", _ref => {
-  let {
-    size
-  } = _ref;
-  return size;
-}, "px;height:", _ref2 => {
-  let {
-    size
-  } = _ref2;
-  return size;
-}, "px;background:transparent;color:", _ref3 => {
-  let {
-    theme,
-    sentiment
-  } = _ref3;
-  return sentiment === 'primary' ? theme.colors.primary.textWeak : theme.colors.neutral.text;
-}, ";border:", _ref4 => {
-  let {
-    theme,
-    noBorder,
-    sentiment
-  } = _ref4;
-  return noBorder ? 'none' : `1px solid ${theme.colors[sentiment].borderWeak}`;
-}, ";border-radius:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.radii.default;
-}, ";display:flex;cursor:pointer;align-items:center;justify-content:center;outline:none;&:hover{background:", _ref6 => {
-  let {
-    theme,
-    sentiment
-  } = _ref6;
-  return theme.colors[sentiment].backgroundWeakHover;
-}, ";}&active,&:focus{box-shadow:", _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.shadows.focusPrimary;
-}, ";}");
-const CopyButton = _ref8 => {
+const CopyButton = _ref => {
   let {
     size = 'small',
     value,
@@ -66,27 +13,22 @@ const CopyButton = _ref8 => {
     noBorder,
     className,
     'data-testid': dataTestId
-  } = _ref8;
+  } = _ref;
   const [isCopied, setCopied] = useClipboard(value, {
     successDuration: COPY_DURATION
   });
-  return jsx(Tooltip, {
-    text: isCopied ? copiedText : copyText,
-    children: jsx(StyledButton, {
-      type: "button",
-      onClick: setCopied,
-      size: SIZES[size],
-      sentiment: sentiment,
-      noBorder: noBorder,
-      className: className,
-      "data-testid": dataTestId,
-      "aria-label": "Copy",
-      children: jsx(Icon, {
-        name: isCopied ? 'check' : 'copy-content',
-        size: 16
-      })
-    })
+  return jsx(Button, {
+    type: "button",
+    onClick: setCopied,
+    size: size,
+    sentiment: sentiment,
+    variant: noBorder ? 'ghost' : 'outlined',
+    className: className,
+    "data-testid": dataTestId,
+    "aria-label": "Copy",
+    icon: isCopied ? 'check' : 'copy-content',
+    tooltip: isCopied ? copiedText : copyText
   });
 };
 
-export { CopyButton, SIZES };
+export { CopyButton };

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

@@ -44,7 +44,7 @@ const Container = /*#__PURE__*/_styled(Stack, {
     bordered
   } = _ref3;
   return bordered ? `
-    border: 1px solid ${theme.colors.neutral.borderStrong};
+    border: 1px solid ${theme.colors.neutral.border};
     border-radius: ${theme.radii.default};
     ` : null;
 }, ";");

package/dist/src/components/List/Row.js

@@ -203,6 +203,9 @@ const Row = /*#__PURE__*/forwardRef((_ref16, ref) => {
       onClick: e => {
         e.stopPropagation();
       },
+      onKeyDown: e => {
+        e.stopPropagation();
+      },
       children: expandable
     }) : null]
   });

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

@@ -96,7 +96,7 @@ const StyledContainer = /*#__PURE__*/_styled('div', {
   let {
     theme
   } = _ref12;
-  return theme.colors.neutral.backgroundWeak;
+  return theme.colors.neutral.background;
 }, ";display:flex;flex-direction:row;align-items:center;align-self:stretch;font-weight:500;height:", _ref13 => {
   let {
     size

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

@@ -8,7 +8,7 @@ const InnerCircleRing = /*#__PURE__*/_styled("circle", {
   let {
     theme
   } = _ref;
-  return theme.colors.neutral.backgroundWeak;
+  return theme.colors.neutral.borderStrong;
 }, ";");
 const RadioMark = /*#__PURE__*/_styled("circle", {
   target: "ehkrmld3"
@@ -60,7 +60,7 @@ const StyledIcon = /*#__PURE__*/_styled("svg", {
   let {
     theme
   } = _ref7;
-  return theme.colors.neutral.textWeak;
+  return theme.colors.neutral.borderStrong;
 }, ";", InnerCircleRing, "{fill:", _ref8 => {
   let {
     theme
@@ -167,12 +167,12 @@ const RadioContainer = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref27;
-  return theme.colors.neutral.textDisabled;
+  return theme.colors.neutral.borderStrongDisabled;
 }, ";", InnerCircleRing, "{fill:", _ref28 => {
   let {
     theme
   } = _ref28;
-  return theme.colors.neutral.backgroundStrong;
+  return theme.colors.neutral.backgroundDisabled;
 }, ";}}}");
 const Radio = /*#__PURE__*/forwardRef((_ref29, ref) => {
   let {

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

@@ -73,7 +73,7 @@ const getSelectStyles = _ref5 => {
   return {
     control: (provided, state) => ({
       ...provided,
-      backgroundColor: state.isDisabled ? theme.colors.neutral.backgroundDisabled : theme.colors.neutral.backgroundWeak,
+      backgroundColor: state.isDisabled ? theme.colors.neutral.backgroundDisabled : theme.colors.neutral.background,
       borderColor: error ? theme.colors.danger.border : theme.colors.neutral.borderWeak,
       borderRadius: '4px',
       borderStyle: 'solid',

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

@@ -17,83 +17,88 @@ const Container = /*#__PURE__*/_styled("div", {
     theme
   } = _ref2;
   return theme.radii.default;
-}, ";transition:border-color 200ms ease,box-shadow 200ms ease;cursor:pointer;border:1px solid ", _ref3 => {
+}, ";transition:border-color 200ms ease,box-shadow 200ms ease;cursor:pointer;background:", _ref3 => {
   let {
     theme
   } = _ref3;
-  return theme.colors.neutral.borderWeak;
-}, ";color:", _ref4 => {
+  return theme.colors.neutral.background;
+}, ";border:1px solid ", _ref4 => {
   let {
     theme
   } = _ref4;
-  return theme.colors.neutral.text;
-}, ";&[data-checked='true']{border:1px solid ", _ref5 => {
+  return theme.colors.neutral.borderWeak;
+}, ";color:", _ref5 => {
   let {
     theme
   } = _ref5;
-  return theme.colors.primary.borderWeak;
-}, ";}&[data-error='true']{border:1px solid ", _ref6 => {
+  return theme.colors.neutral.text;
+}, ";&[data-checked='true']{border:1px solid ", _ref6 => {
   let {
     theme
   } = _ref6;
-  return theme.colors.danger.border;
-}, ";}&[data-disabled='true']{border:1px solid ", _ref7 => {
+  return theme.colors.primary.borderWeak;
+}, ";}&[data-error='true']{border:1px solid ", _ref7 => {
   let {
     theme
   } = _ref7;
-  return theme.colors.neutral.borderWeakDisabled;
-}, ";color:", _ref8 => {
+  return theme.colors.danger.border;
+}, ";}&[data-disabled='true']{border:1px solid ", _ref8 => {
   let {
     theme
   } = _ref8;
-  return theme.colors.neutral.textDisabled;
-}, ";background:", _ref9 => {
+  return theme.colors.neutral.borderWeakDisabled;
+}, ";color:", _ref9 => {
   let {
     theme
   } = _ref9;
-  return theme.colors.neutral.backgroundDisabled;
-}, ";cursor:not-allowed;}&:hover,&:focus-within,&:active{&:not([data-error='true']):not([data-disabled='true']){border:1px solid ", _ref10 => {
+  return theme.colors.neutral.textDisabled;
+}, ";background:", _ref10 => {
   let {
     theme
   } = _ref10;
-  return theme.colors.primary.borderWeak;
-}, ";&[data-cheked='false']{box-shadow:", _ref11 => {
+  return theme.colors.neutral.backgroundDisabled;
+}, ";cursor:not-allowed;}&:hover,&:focus-within,&:active{&:not([data-error='true']):not([data-disabled='true']){border:1px solid ", _ref11 => {
   let {
     theme
   } = _ref11;
+  return theme.colors.primary.borderWeak;
+}, ";&[data-cheked='false']{box-shadow:", _ref12 => {
+  let {
+    theme
+  } = _ref12;
   return theme.shadows.hoverPrimary;
 }, ";}}}");
 const StyledElement = element => /*#__PURE__*/_styled(element, {
   shouldForwardProp: prop => !['showTick', 'hasLabel'].includes(prop),
   target: "e1s5n3hj0"
-})("display:inline-flex;align-items:start;&[data-checked='true']{color:", _ref12 => {
+})("display:inline-flex;align-items:start;&[data-checked='true']{color:", _ref13 => {
   let {
     theme
-  } = _ref12;
+  } = _ref13;
   return theme.colors.primary.textWeak;
-}, ";}&[data-error='true']{color:", _ref13 => {
+}, ";}&[data-error='true']{color:", _ref14 => {
   let {
     theme
-  } = _ref13;
+  } = _ref14;
   return theme.colors.danger.text;
-}, ";}&[aria-disabled='true']{color:", _ref14 => {
+}, ";}&[aria-disabled='true']{color:", _ref15 => {
   let {
     theme
-  } = _ref14;
+  } = _ref15;
   return theme.colors.neutral.textDisabled;
-}, ";}input+svg{", _ref15 => {
+}, ";}input+svg{", _ref16 => {
   let {
     showTick
-  } = _ref15;
+  } = _ref16;
   return !showTick ? `display: none;` : null;
-}, ";}label{", _ref16 => {
+}, ";}label{", _ref17 => {
   let {
     showTick,
     hasLabel
-  } = _ref16;
+  } = _ref17;
   return !showTick && !hasLabel ? `display: none;` : null;
 }, ";}");
-const SelectableCard = /*#__PURE__*/forwardRef((_ref17, ref) => {
+const SelectableCard = /*#__PURE__*/forwardRef((_ref18, ref) => {
   let {
     name,
     value,
@@ -111,7 +116,7 @@ const SelectableCard = /*#__PURE__*/forwardRef((_ref17, ref) => {
     id,
     label,
     'data-testid': dataTestId
-  } = _ref17;
+  } = _ref18;
   const Element = useMemo(() => StyledElement(type === 'radio' ? Radio : Checkbox), [type]);
   const innerRef = useRef(null);
   return jsx(Tooltip, {

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

@@ -72,7 +72,7 @@ const Container = /*#__PURE__*/_styled('div', {
   let {
     theme
   } = _ref8;
-  return theme.colors.neutral.backgroundStrong;
+  return theme.colors.neutral.backgroundWeak;
 }, ";border-radius:", _ref9 => {
   let {
     theme
@@ -102,7 +102,7 @@ const ButtonContainer = /*#__PURE__*/_styled('div', {
   let {
     theme
   } = _ref11;
-  return theme.colors.neutral.backgroundStrong;
+  return theme.colors.neutral.backgroundWeak;
 }, ";border-radius:", _ref12 => {
   let {
     theme
@@ -113,7 +113,7 @@ const ButtonContainer = /*#__PURE__*/_styled('div', {
     multiline,
     theme
   } = _ref13;
-  return !multiline ? `box-shadow: -27px 0 19px -11px ${theme.colors.neutral.backgroundStrong}` : '';
+  return !multiline ? `box-shadow: -27px 0 19px -11px ${theme.colors.neutral.backgroundWeak}` : '';
 }, ";");
 const ShowMoreContainer = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['showMore'].includes(prop),
@@ -124,7 +124,7 @@ const ShowMoreContainer = /*#__PURE__*/_styled('div', {
     showMore
   } = _ref14;
   return !showMore ? `0px -22px 19px -6px
-    ${theme.colors.neutral.backgroundStrong}` : 'none';
+    ${theme.colors.neutral.backgroundWeak}` : 'none';
 }, ";");
 const StyledButton = /*#__PURE__*/_styled("button", {
   target: "e1q0gj902"

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

@@ -2,7 +2,7 @@ import _styled from '@emotion/styled/base';
 import { keyframes, css } from '@emotion/react';
 import { Children, Fragment } from 'react';
 import flattenChildren from 'react-flatten-children';
-import { Icon } from '../Icon/index.js';
+import { Bullet } from '../Bullet/index.js';
 import { Text } from '../Text/index.js';
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
@@ -16,7 +16,7 @@ const loadingAnimation = keyframes`
   }
 `;
 const StyledStepContainer = /*#__PURE__*/_styled("div", {
-  target: "e19ft7rb5"
+  target: "e19ft7rb3"
 })(process.env.NODE_ENV === "production" ? {
   name: "b8wmnj",
   styles: "display:flex;flex-direction:column;align-items:center;justify-content:flex-start"
@@ -25,150 +25,97 @@ const StyledStepContainer = /*#__PURE__*/_styled("div", {
   styles: "display:flex;flex-direction:column;align-items:center;justify-content:flex-start",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const StyledStep = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['temporal'].includes(prop),
-  target: "e19ft7rb4"
-})("border-radius:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.radii.circle;
-}, ";display:flex;align-items:center;justify-content:center;color:", _ref2 => {
-  let {
-    temporal,
-    theme
-  } = _ref2;
-  if (temporal === 'previous') return theme.colors.success.text;
-  if (temporal === 'current') return theme.colors.primary.text;
-  return theme.colors.neutral.textWeak;
-}, ";background-color:", _ref3 => {
-  let {
-    temporal,
-    theme
-  } = _ref3;
-  if (temporal === 'previous') return theme.colors.success.background;
-  if (temporal === 'current') return theme.colors.primary.background;
-  return 'transparent';
-}, ";border:", _ref4 => {
-  let {
-    temporal,
-    theme
-  } = _ref4;
-  return temporal === 'next' ? `1px solid ${theme.colors.neutral.borderWeak}` : null;
-}, ";");
 const StyledText = /*#__PURE__*/_styled(Text, {
-  target: "e19ft7rb3"
-})("margin-top:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.space['1'];
-}, ";");
-const StyledIcon = /*#__PURE__*/_styled(Icon, {
   target: "e19ft7rb2"
-})("fill:", _ref6 => {
+})("margin-top:", _ref => {
   let {
     theme
-  } = _ref6;
-  return theme.colors.success.text;
+  } = _ref;
+  return theme.space['1'];
 }, ";");
 const loadingStyle = /*#__PURE__*/css("animation:", loadingAnimation, " 1s linear infinite;");
 const StyledLine = /*#__PURE__*/_styled("div", {
   target: "e19ft7rb1"
-})("border-radius:", _ref7 => {
+})("border-radius:", _ref2 => {
   let {
     theme
-  } = _ref7;
+  } = _ref2;
   return theme.radii.default;
-}, ";flex-grow:1;border-radius:", _ref8 => {
+}, ";flex-grow:1;border-radius:", _ref3 => {
   let {
     theme
-  } = _ref8;
+  } = _ref3;
   return theme.radii.default;
-}, ";background-color:", _ref9 => {
+}, ";background-color:", _ref4 => {
   let {
     theme
-  } = _ref9;
-  return theme.colors.neutral.borderWeak;
-}, ";position:relative;::after{content:'';position:absolute;left:0;top:0;height:100%;border-radius:", _ref10 => {
+  } = _ref4;
+  return theme.colors.neutral.backgroundStrong;
+}, ";position:relative;::after{content:'';position:absolute;left:0;top:0;height:100%;border-radius:", _ref5 => {
   let {
     theme
-  } = _ref10;
+  } = _ref5;
   return theme.radii.default;
-}, ";background-color:", _ref11 => {
+}, ";background-color:", _ref6 => {
   let {
     theme
-  } = _ref11;
-  return theme.colors.success.backgroundStrong;
-}, ";", _ref12 => {
+  } = _ref6;
+  return theme.colors.primary.backgroundStrong;
+}, ";", _ref7 => {
   let {
     temporal
-  } = _ref12;
+  } = _ref7;
   return temporal === 'previous' && `width: 100%;`;
-}, " ", _ref13 => {
+}, " ", _ref8 => {
   let {
     temporal,
     animated
-  } = _ref13;
+  } = _ref8;
   return temporal === 'current' && animated && loadingStyle;
 }, ";}");
 const StyledContainer = /*#__PURE__*/_styled("div", {
   target: "e19ft7rb0"
-})("display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:0 ", _ref14 => {
+})("display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:0 ", _ref9 => {
   let {
     theme
-  } = _ref14;
+  } = _ref9;
   return theme.space['1'];
-}, ";", StyledStep, "{height:", _ref15 => {
+}, ";", StyledStepContainer, "{width:", _ref10 => {
   let {
     theme
-  } = _ref15;
-  return theme.space['4'];
-}, ";width:", _ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.space['4'];
-}, ";}", StyledStepContainer, "{width:", _ref17 => {
-  let {
-    theme
-  } = _ref17;
+  } = _ref10;
   return theme.space['4'];
-}, ";white-space:nowrap;}", StyledLine, "{height:", _ref18 => {
+}, ";white-space:nowrap;}", StyledLine, "{height:", _ref11 => {
   let {
     theme
-  } = _ref18;
+  } = _ref11;
   return theme.space['0.5'];
-}, ";margin-top:", _ref19 => {
+}, ";margin-top:", _ref12 => {
   let {
     theme
-  } = _ref19;
+  } = _ref12;
   return theme.space['2'];
-}, ";margin-bottom:", _ref20 => {
+}, ";margin-bottom:", _ref13 => {
   let {
     theme
-  } = _ref20;
+  } = _ref13;
   return theme.space['2'];
 }, ";}");
-const StepperNumbers = _ref21 => {
+const StepperNumbers = _ref14 => {
   let {
     temporal,
     children,
     CurrentStep
-  } = _ref21;
+  } = _ref14;
   return jsxs(StyledStepContainer, {
-    children: [jsx(StyledStep, {
-      temporal: temporal,
-      children: temporal !== 'previous' ? jsx(Text, {
-        as: "span",
-        variant: "bodySmall",
-        color: "neutral",
-        prominence: temporal === 'next' ? 'weak' : 'default',
-        children: CurrentStep
-      }) : jsx(StyledIcon, {
-        name: "check",
-        size: 20
-      })
+    children: [jsx(Bullet, {
+      sentiment: temporal === 'next' ? 'neutral' : 'primary',
+      ...(temporal === 'previous' ? {
+        icon: 'check'
+      } : {
+        text: CurrentStep.toString()
+      }),
+      prominence: temporal !== 'current' ? 'default' : 'strong'
     }), jsx(StyledText, {
       as: "span",
       variant: "bodySmall",
@@ -177,14 +124,14 @@ const StepperNumbers = _ref21 => {
     })]
   });
 };
-const Stepper = _ref22 => {
+const Stepper = _ref15 => {
   let {
     children,
     selected = 0,
     animated = false,
     className,
     'data-testid': dataTestId
-  } = _ref22;
+  } = _ref15;
   const lastStep = Children.count(children) - 1;
   return jsx(StyledContainer, {
     className: className,

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

@@ -22,7 +22,7 @@ const StyledTable = /*#__PURE__*/_styled('table', {
   } = _ref;
   return `
   ${stripped ? `& tbody tr:nth-of-type(even) {
-    background: ${theme.colors.neutral.backgroundStrong};
+    background: ${theme.colors.neutral.backgroundWeak};
   }` : ''}
 
   ${bordered ? `& tbody tr {

package/dist/src/components/Tabs/Tab.js

@@ -29,7 +29,8 @@ const BadgeContainer = /*#__PURE__*/_styled("span", {
   } = _ref3;
   return theme.space['1'];
 }, ";display:flex;");
-const StyledTabButton = /*#__PURE__*/_styled("button", {
+const StyledTabButton = /*#__PURE__*/_styled('button', {
+  shouldForwardProp: prop => !['isSelected'].includes(prop),
   target: "e1hzf7cr0"
 })("display:flex;flex-direction:row;padding:", _ref4 => {
   let {
@@ -45,7 +46,7 @@ const StyledTabButton = /*#__PURE__*/_styled("button", {
   let {
     theme
   } = _ref6;
-  return theme.colors.neutral.borderWeak;
+  return theme.colors.neutral.border;
 }, ";outline:none;font-size:", _ref7 => {
   let {
     theme
@@ -91,23 +92,18 @@ const StyledTabButton = /*#__PURE__*/_styled("button", {
     theme
   } = _ref15;
   return theme.colors.primary.borderWeak;
-}, ";", StyledBadge, "{background-color:", _ref16 => {
+}, ";", StyledBadge, "{", _ref16 => {
   let {
+    isSelected,
     theme
   } = _ref16;
-  return theme.colors.primary.background;
-}, ";border-color:", _ref17 => {
-  let {
-    theme
-  } = _ref17;
-  return theme.colors.primary.background;
-}, ";color:", _ref18 => {
-  let {
-    theme
-  } = _ref18;
-  return theme.colors.primary.text;
+  return !isSelected ? `
+          background-color: ${theme.colors.primary.background};
+          border-color: ${theme.colors.primary.background};
+          color: ${theme.colors.primary.text};
+      ` : null;
 }, ";}}}&[aria-disabled='true'],&:disabled{cursor:not-allowed;filter:grayscale(1) opacity(50%);}");
-const Tab = /*#__PURE__*/forwardRef((_ref19, ref) => {
+const Tab = /*#__PURE__*/forwardRef((_ref17, ref) => {
   let {
     as,
     badge,
@@ -120,7 +116,7 @@ const Tab = /*#__PURE__*/forwardRef((_ref19, ref) => {
     onKeyDown,
     tooltip,
     ...props
-  } = _ref19;
+  } = _ref17;
   const {
     selected,
     onChange
@@ -149,10 +145,11 @@ const Tab = /*#__PURE__*/forwardRef((_ref19, ref) => {
         onKeyDown?.(event);
         if (!event.defaultPrevented && !disabled && value) onChange(value);
       },
+      isSelected: isSelected,
       ...props,
       children: [children, typeof counter === 'number' || typeof counter === 'string' ? jsx(StyledBadge, {
         sentiment: isSelected ? 'primary' : 'neutral',
-        prominence: isSelected ? 'default' : 'strong',
+        prominence: isSelected ? 'strong' : 'default',
         size: "medium",
         children: counter
       }) : null, badge ? jsx(BadgeContainer, {

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

@@ -43,7 +43,7 @@ const TabsContainer = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref6;
-  return theme.colors.neutral.borderWeak;
+  return theme.colors.neutral.border;
 }, ";}&::-webkit-scrollbar{display:none;}");
 const SHADOW_THRESHOLD = 10;
 const Tabs = _ref7 => {

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

@@ -85,7 +85,7 @@ const TagInputContainer = /*#__PURE__*/_styled('div', {
       colors
     }
   } = _ref4;
-  return colors.neutral.backgroundWeak;
+  return colors.neutral.background;
 }, ";", _ref5 => {
   let {
     variant,
@@ -112,7 +112,7 @@ const StyledInput = /*#__PURE__*/_styled("input", {
       colors
     }
   } = _ref7;
-  return colors.neutral.backgroundWeak;
+  return colors.neutral.background;
 }, ";&::placeholder{color:", _ref8 => {
   let {
     theme: {