@ultraviolet/ui 1.4.1 → 1.4.3

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

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

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

@@ -16,7 +16,7 @@ const StyledIconContainer = /*#__PURE__*/_styled(Stack, {
   let {
     theme
   } = _ref;
-  return theme.colors.neutral.textWeak;
+  return theme.colors.neutral.text;
 }, ";&[aria-disabled='true']{cursor:not-allowed;}");
 const SortIcon = () => jsxs(StyledIconContainer, {
   children: [jsx(ArrowUpIcon, {
@@ -48,7 +48,7 @@ const StyledHeaderCell = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref5;
-  return theme.colors.neutral.textWeak;
+  return theme.colors.neutral.text;
 }, ";gap:", _ref6 => {
   let {
     theme
@@ -58,17 +58,17 @@ const StyledHeaderCell = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref7;
-  return theme.colors.primary.textWeak;
+  return theme.colors.primary.text;
 }, ";}&[aria-sort='ascending'] ", ArrowUpIcon, "{color:", _ref8 => {
   let {
     theme
   } = _ref8;
-  return theme.colors.primary.textWeak;
+  return theme.colors.primary.text;
 }, ";}&[aria-sort='descending'] ", ArrowDownIcon, "{color:", _ref9 => {
   let {
     theme
   } = _ref9;
-  return theme.colors.primary.textWeak;
+  return theme.colors.primary.text;
 }, ";}");
 const HeaderCell = _ref10 => {
   let {

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

@@ -13,7 +13,7 @@ const ExpandableWrapper = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref;
-  return theme.colors.neutral.borderWeak;
+  return theme.colors.neutral.border;
 }, ";margin:0 -", _ref2 => {
   let {
     theme
@@ -32,7 +32,7 @@ const StyledRow = /*#__PURE__*/_styled('div', {
   let {
     theme
   } = _ref4;
-  return theme.colors.neutral.borderWeak;
+  return theme.colors.neutral.border;
 }, ";border-radius:", _ref5 => {
   let {
     theme

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

@@ -106,7 +106,7 @@ const StyledContainer = /*#__PURE__*/_styled('div', {
   let {
     theme
   } = _ref14;
-  return theme.colors.neutral.borderWeak;
+  return theme.colors.neutral.border;
 }, ";border-radius:", _ref15 => {
   let {
     theme
@@ -116,7 +116,7 @@ const StyledContainer = /*#__PURE__*/_styled('div', {
   let {
     theme
   } = _ref16;
-  return theme.colors.danger.borderWeak;
+  return theme.colors.danger.border;
 }, ";}&[aria-disabled='true']{background:", _ref17 => {
   let {
     theme
@@ -126,7 +126,7 @@ const StyledContainer = /*#__PURE__*/_styled('div', {
   let {
     theme
   } = _ref18;
-  return theme.colors.primary.borderWeakHover;
+  return theme.colors.primary.borderHover;
 }, ";}", StyledCenterBox, ":focus-within{box-shadow:", _ref19 => {
   let {
     theme
@@ -136,7 +136,7 @@ const StyledContainer = /*#__PURE__*/_styled('div', {
   let {
     theme
   } = _ref20;
-  return theme.colors.primary.borderWeakHover;
+  return theme.colors.primary.borderHover;
 }, ";}}");
 const NumberInput = _ref21 => {
   let {

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

@@ -18,7 +18,7 @@ const StyledSeparator = /*#__PURE__*/_styled(Separator, {
   let {
     theme
   } = _ref;
-  return theme.colors.neutral.borderWeak;
+  return theme.colors.neutral.border;
 }, ";height:100%;");
 const getControlColor = _ref2 => {
   let {
@@ -74,7 +74,7 @@ const getSelectStyles = _ref5 => {
     control: (provided, state) => ({
       ...provided,
       backgroundColor: state.isDisabled ? theme.colors.neutral.backgroundDisabled : theme.colors.neutral.background,
-      borderColor: error ? theme.colors.danger.border : theme.colors.neutral.borderWeak,
+      borderColor: error ? theme.colors.danger.border : theme.colors.neutral.border,
       borderRadius: '4px',
       borderStyle: 'solid',
       borderWidth: '1px',
@@ -114,7 +114,7 @@ const getSelectStyles = _ref5 => {
     }),
     indicatorSeparator: (provided, state) => ({
       ...provided,
-      backgroundColor: theme.colors.neutral.borderWeak,
+      backgroundColor: theme.colors.neutral.border,
       display: 'none',
       ...(customStyle(state)?.['indicatorSeparator'] || {})
     }),
@@ -528,7 +528,6 @@ const ClearIndicator = props => {
     children: jsx(Icon, {
       ...restInnerProps,
       name: "close",
-      size: 20,
       cursor: "pointer",
       color: checked && 'primary' || error && 'danger' || 'neutral'
     })

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

@@ -26,7 +26,7 @@ const Container = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref4;
-  return theme.colors.neutral.borderWeak;
+  return theme.colors.neutral.border;
 }, ";color:", _ref5 => {
   let {
     theme
@@ -36,7 +36,7 @@ const Container = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref6;
-  return theme.colors.primary.borderWeak;
+  return theme.colors.primary.border;
 }, ";}&[data-error='true']{border:1px solid ", _ref7 => {
   let {
     theme
@@ -46,7 +46,7 @@ const Container = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref8;
-  return theme.colors.neutral.borderWeakDisabled;
+  return theme.colors.neutral.borderDisabled;
 }, ";color:", _ref9 => {
   let {
     theme
@@ -61,7 +61,7 @@ const Container = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref11;
-  return theme.colors.primary.borderWeak;
+  return theme.colors.primary.border;
 }, ";&[data-cheked='false']{box-shadow:", _ref12 => {
   let {
     theme

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

@@ -7,7 +7,7 @@ const StyledHeader = /*#__PURE__*/_styled('thead', {
   let {
     theme
   } = _ref;
-  return theme.colors.neutral.borderStrong;
+  return theme.colors.neutral.border;
 }, ";");
 const Header = _ref2 => {
   let {

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

@@ -30,7 +30,6 @@ const BadgeContainer = /*#__PURE__*/_styled("span", {
   return theme.space['1'];
 }, ";display:flex;");
 const StyledTabButton = /*#__PURE__*/_styled('button', {
-  shouldForwardProp: prop => !['isSelected'].includes(prop),
   target: "e1hzf7cr0"
 })("display:flex;flex-direction:row;padding:", _ref4 => {
   let {
@@ -92,18 +91,23 @@ const StyledTabButton = /*#__PURE__*/_styled('button', {
     theme
   } = _ref15;
   return theme.colors.primary.borderWeak;
-}, ";", StyledBadge, "{", _ref16 => {
+}, ";&[data-is-selected='false']{", StyledBadge, "{background-color:", _ref16 => {
   let {
-    isSelected,
     theme
   } = _ref16;
-  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((_ref17, ref) => {
+  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;
+}, ";}}}}&[aria-disabled='true'],&:disabled{cursor:not-allowed;filter:grayscale(1) opacity(50%);}");
+const Tab = /*#__PURE__*/forwardRef((_ref19, ref) => {
   let {
     as,
     badge,
@@ -116,7 +120,7 @@ const Tab = /*#__PURE__*/forwardRef((_ref17, ref) => {
     onKeyDown,
     tooltip,
     ...props
-  } = _ref17;
+  } = _ref19;
   const {
     selected,
     onChange
@@ -145,7 +149,7 @@ const Tab = /*#__PURE__*/forwardRef((_ref17, ref) => {
         onKeyDown?.(event);
         if (!event.defaultPrevented && !disabled && value) onChange(value);
       },
-      isSelected: isSelected,
+      "data-is-selected": isSelected,
       ...props,
       children: [children, typeof counter === 'number' || typeof counter === 'string' ? jsx(StyledBadge, {
         sentiment: isSelected ? 'primary' : 'neutral',

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

@@ -21,14 +21,14 @@ const variants = {
     padding: 8px;
     cursor: text;
     border-radius: ${radii.default};
-    border: 1px solid ${colors.neutral.borderWeak};
+    border: 1px solid ${colors.neutral.border};
     &:focus-within {
-      border: 1px solid ${colors.primary.borderWeak};
+      border: 1px solid ${colors.primary.border};
       box-shadow: ${shadows.focusPrimary};
     }
 
     &:hover {
-      border: 1px solid ${colors.primary.borderWeak};
+      border: 1px solid ${colors.primary.border};
     }
 
     & > * {

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

@@ -167,7 +167,7 @@ const StyledInput = /*#__PURE__*/_styled('input', {
       colors
     }
   } = _ref15;
-  return colors.neutral.borderWeak;
+  return colors.neutral.border;
 }, ";border-radius:", _ref16 => {
   let {
     theme: {

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

@@ -14,7 +14,7 @@ const StyledInput = /*#__PURE__*/_styled("input", {
     'aria-invalid': error,
     theme
   } = _ref2;
-  return error ? theme.colors.danger.borderWeak : theme.colors.neutral.borderWeak;
+  return error ? theme.colors.danger.borderWeak : theme.colors.neutral.border;
 }, ";font-size:24px;color:", _ref3 => {
   let {
     'aria-invalid': error,
@@ -36,7 +36,7 @@ const StyledInput = /*#__PURE__*/_styled("input", {
     'aria-invalid': error,
     theme
   } = _ref6;
-  return error ? theme.colors.danger.borderWeakHover : theme.colors.primary.borderWeakHover;
+  return error ? theme.colors.danger.borderHover : theme.colors.primary.borderHover;
 }, ";}&:focus{box-shadow:", _ref7 => {
   let {
     'aria-invalid': error,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -65,6 +65,6 @@
     "react-toastify": "9.1.3",
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
-    "@ultraviolet/themes": "1.1.1"
+    "@ultraviolet/themes": "1.1.3"
   }
 }