@ultraviolet/icons 2.7.0 → 2.7.2

package/README.md

@@ -14,7 +14,6 @@ $ pnpm add @ultraviolet/icons
 
 Checkout our [documentation website](https://storybook.ultraviolet.scaleway.com/).
 
-
 ## Contributing
 
 📝 You can participate in the development and [start contributing](/CONTRIBUTING.md) to it.

package/dist/components/CategoryIcon/index.js

@@ -4,31 +4,22 @@ import { jsx } from '@emotion/react/jsx-runtime';
 
 const StyledIcon = /*#__PURE__*/_styled("svg", {
   target: "e1wwql4e0"
-})(".fill{fill:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.other.icon.category.primary.fill;
-}, ";}.fillStrong{fill:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.other.icon.category.primary.fillStrong;
-}, ";}");
+})(".fill{fill:", ({
+  theme
+}) => theme.colors.other.icon.category.primary.fill, ";}.fillStrong{fill:", ({
+  theme
+}) => theme.colors.other.icon.category.primary.fillStrong, ";}");
 /**
  * CategoryIcon component is used to render category icons, those icons are more complex than system icons
  * as they involve multiple colors that changes depending on theme.
  */
-const CategoryIcon = _ref3 => {
-  let {
-    name
-  } = _ref3;
-  return jsx(StyledIcon, {
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    children: CATEGORY_ICONS[name]
-  });
-};
+const CategoryIcon = ({
+  name
+}) => jsx(StyledIcon, {
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
+  children: CATEGORY_ICONS[name]
+});
 
 export { CategoryIcon };

package/dist/components/Icon/index.js

@@ -334,10 +334,9 @@ const customViewBoxes = [{
   icons: ['expand'],
   viewBox: '0 0 20 14'
 }];
-const sizeStyles = _ref => {
-  let {
-    size
-  } = _ref;
+const sizeStyles = ({
+  size
+}) => {
   const pxSize = typeof size === 'number' && !Number.isNaN(size) ? `${size}px` : size;
   return /*#__PURE__*/css("height:", pxSize, ";width:", pxSize, ";min-width:", pxSize, ";min-height:", pxSize, ";");
 };
@@ -350,13 +349,12 @@ const PROMINENCES = {
 const StyledIcon = /*#__PURE__*/_styled('svg', {
   shouldForwardProp: prop => !['size', 'color', 'prominence', 'disabled'].includes(prop),
   target: "e1gt4cfo0"
-})("vertical-align:middle;fill:", _ref2 => {
-  let {
-    theme,
-    color,
-    prominence,
-    disabled
-  } = _ref2;
+})("vertical-align:middle;fill:", ({
+  theme,
+  color,
+  prominence,
+  disabled
+}) => {
   // stronger is available only for neutral color
   const definedProminence = color !== 'neutral' && prominence === 'stronger' ? capitalize(PROMINENCES.default) : capitalize(PROMINENCES[prominence]);
   theme.colors[color];
@@ -366,19 +364,18 @@ const StyledIcon = /*#__PURE__*/_styled('svg', {
 /**
  * Icon component is our set of system icons in the design system. All of them are SVGs.
  */
-const Icon = /*#__PURE__*/forwardRef((_ref3, ref) => {
-  let {
-    name = 'alert',
-    color = 'currentColor',
-    size = '1em',
-    prominence = 'default',
-    className,
-    'data-testid': dataTestId,
-    stroke,
-    cursor,
-    strokeWidth,
-    disabled
-  } = _ref3;
+const Icon = /*#__PURE__*/forwardRef(({
+  name = 'alert',
+  color = 'currentColor',
+  size = '1em',
+  prominence = 'default',
+  className,
+  'data-testid': dataTestId,
+  stroke,
+  cursor,
+  strokeWidth,
+  disabled
+}, ref) => {
   const render = ICONS[name] || ICONS.alert;
   const defaultViewBox = useMemo(() => customViewBoxes.find(vB => vB.icons.includes(name))?.viewBox ?? '0 0 24 24', [name]);
   return jsx(StyledIcon, {

package/dist/components/ProductIcon/index.js

@@ -11,62 +11,41 @@ const SIZES = {
 const StyledIcon = /*#__PURE__*/_styled('svg', {
   shouldForwardProp: prop => !['variant', 'disabled'].includes(prop),
   target: "euby9wl0"
-})("&{width:", _ref => {
-  let {
-    size
-  } = _ref;
-  return `${SIZES[size]}px`;
-}, ";min-width:", _ref2 => {
-  let {
-    size
-  } = _ref2;
-  return `${SIZES[size]}px`;
-}, ";height:", _ref3 => {
-  let {
-    size
-  } = _ref3;
-  return `${SIZES[size]}px`;
-}, ";}path[fill].fill,g[fill].fill>*,g.fill>*{fill:", _ref4 => {
-  let {
-    theme,
-    variant,
-    disabled
-  } = _ref4;
-  return `${theme.colors.other.icon.product[variant][disabled ? 'fillDisabled' : 'fill']}`;
-}, ";}path[fill].fillStrong,g[fill].fillStrong>*,g.fillStrong>*{fill:", _ref5 => {
-  let {
-    theme,
-    variant,
-    disabled
-  } = _ref5;
-  return `${theme.colors.other.icon.product[variant][disabled ? 'fillStrongDisabled' : 'fillStrong']}`;
-}, ";}path[fill].fillWeak,g[fill].fillWeak>*,g.fillWeak>*{fill:", _ref6 => {
-  let {
-    theme,
-    variant,
-    disabled
-  } = _ref6;
-  return `${theme.colors.other.icon.product[variant][disabled ? 'fillWeakDisabled' : 'fillWeak']}`;
-}, ";}");
+})("&{width:", ({
+  size
+}) => `${SIZES[size]}px`, ";min-width:", ({
+  size
+}) => `${SIZES[size]}px`, ";height:", ({
+  size
+}) => `${SIZES[size]}px`, ";}path[fill].fill,g[fill].fill>*,g.fill>*{fill:", ({
+  theme,
+  variant,
+  disabled
+}) => `${theme.colors.other.icon.product[variant][disabled ? 'fillDisabled' : 'fill']}`, ";}path[fill].fillStrong,g[fill].fillStrong>*,g.fillStrong>*{fill:", ({
+  theme,
+  variant,
+  disabled
+}) => `${theme.colors.other.icon.product[variant][disabled ? 'fillStrongDisabled' : 'fillStrong']}`, ";}path[fill].fillWeak,g[fill].fillWeak>*,g.fillWeak>*{fill:", ({
+  theme,
+  variant,
+  disabled
+}) => `${theme.colors.other.icon.product[variant][disabled ? 'fillWeakDisabled' : 'fillWeak']}`, ";}");
 
 /**
  * ProductIcon component is used to render a set of icons that are linked to a product or service.
  * Those icons are made of multiple colors that changes automatically based on the current theme.
  */
-const ProductIcon = _ref7 => {
-  let {
-    name,
-    variant = 'primary',
-    disabled,
-    size = 'small'
-  } = _ref7;
-  return jsx(StyledIcon, {
-    variant: variant,
-    disabled: disabled,
-    size: size,
-    viewBox: "0 0 64 64",
-    children: PRODUCT_ICONS[name]
-  });
-};
+const ProductIcon = ({
+  name,
+  variant = 'primary',
+  disabled,
+  size = 'small'
+}) => jsx(StyledIcon, {
+  variant: variant,
+  disabled: disabled,
+  size: size,
+  viewBox: "0 0 64 64",
+  children: PRODUCT_ICONS[name]
+});
 
 export { ProductIcon };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/icons",
-  "version": "2.7.0",
+  "version": "2.7.2",
   "description": "Ultraviolet Icons",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -38,10 +38,10 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.23.5",
+    "@babel/core": "7.23.6",
     "@emotion/babel-plugin": "11.11.0",
-    "@types/react": "18.2.43",
-    "@types/react-dom": "18.2.17"
+    "@types/react": "18.2.45",
+    "@types/react-dom": "18.2.18"
   },
   "dependencies": {
     "@ultraviolet/themes": "1.5.0"