@ultraviolet/icons 2.6.0 → 2.7.1

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

@@ -5,6 +5,9 @@ import capitalize from '../../utils/capitalize.js';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 
 const ICONS = {
+  address: () => jsx("path", {
+    d: "M7.66667 4C8.10869 4 8.53262 4.17559 8.84518 4.48816C9.15774 4.80072 9.33333 5.22464 9.33333 5.66667C9.33333 5.88554 9.29022 6.10226 9.20647 6.30447C9.12271 6.50668 8.99994 6.69041 8.84518 6.84518C8.69041 6.99994 8.50668 7.12271 8.30447 7.20647C8.10226 7.29022 7.88554 7.33333 7.66667 7.33333C7.22464 7.33333 6.80072 7.15774 6.48816 6.84518C6.17559 6.53262 6 6.10869 6 5.66667C6 5.22464 6.17559 4.80072 6.48816 4.48816C6.80072 4.17559 7.22464 4 7.66667 4ZM7.66667 1C8.90434 1 10.0913 1.49167 10.9665 2.36683C11.8417 3.242 12.3333 4.42899 12.3333 5.66667C12.3333 9.16667 7.66667 14.3333 7.66667 14.3333C7.66667 14.3333 3 9.16667 3 5.66667C3 4.42899 3.49167 3.242 4.36683 2.36683C5.242 1.49167 6.42899 1 7.66667 1ZM7.66667 2.33333C6.78261 2.33333 5.93477 2.68452 5.30964 3.30964C4.68452 3.93477 4.33333 4.78261 4.33333 5.66667C4.33333 6.33333 4.33333 7.66667 7.66667 12.14C11 7.66667 11 6.33333 11 5.66667C11 4.78261 10.6488 3.93477 10.0237 3.30964C9.39857 2.68452 8.55072 2.33333 7.66667 2.33333Z"
+  }),
   alert: () => jsx("path", {
     d: "M11 15H13V17H11V15ZM11 7H13V13H11V7ZM12 2C6.47 2 2 6.5 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C9.87827 20 7.84344 19.1571 6.34315 17.6569C4.84285 16.1566 4 14.1217 4 12C4 9.87827 4.84285 7.84344 6.34315 6.34315C7.84344 4.84285 9.87827 4 12 4C14.1217 4 16.1566 4.84285 17.6569 6.34315C19.1571 7.84344 20 9.87827 20 12C20 14.1217 19.1571 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z"
   }),
@@ -319,7 +322,7 @@ const ICONS = {
   })
 };
 const customViewBoxes = [{
-  icons: ['arrow-left-double', 'arrow-right-double', 'arrow-left', 'arrow-right', 'arrow-down', 'arrow-up', 'credentials', 'logout', 'organization', 'privacy', 'profile', 'support', 'switch_orga', 'credit-card', 'progress-check', 'id', 'reboot'],
+  icons: ['address', 'arrow-left-double', 'arrow-right-double', 'arrow-left', 'arrow-right', 'arrow-down', 'arrow-up', 'credentials', 'logout', 'organization', 'privacy', 'profile', 'support', 'switch_orga', 'credit-card', 'progress-check', 'id', 'reboot'],
   viewBox: '0 0 16 16'
 }, {
   icons: ['members'],
@@ -331,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, ";");
 };
@@ -347,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];
@@ -363,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/dist/index.d.ts

@@ -9,7 +9,7 @@ type Color = Extract<keyof typeof consoleLightTheme.colors, 'primary' | 'seconda
  */
 declare const Icon: react.ForwardRefExoticComponent<{
     size?: string | number | undefined;
-    name?: "alert" | "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" | "id" | "check" | "checkbox-circle-outline" | "clock-outline" | "close" | "close-circle-outline" | "copy-content" | "credentials" | "credit-card" | "database" | "delete" | "detach" | "doc" | "dots-horizontal" | "dots-vertical" | "download" | "drag-variant" | "drag-vertical" | "east" | "email-outline" | "expand" | "eye" | "eye-off" | "filter" | "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" | "search" | "send" | "settings" | "sort" | "sun" | "support" | "switch_orga" | "unlock" | "upload" | "view" | "weather-night" | "attach" | "phone" | "earth" | "email-remove-outline" | "expand-more" | "console" | "equal" | "youtube" | "x" | "slack" | "rss" | "linkedIn" | "instagram" | undefined;
+    name?: "address" | "alert" | "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" | "id" | "check" | "checkbox-circle-outline" | "clock-outline" | "close" | "close-circle-outline" | "copy-content" | "credentials" | "credit-card" | "database" | "delete" | "detach" | "doc" | "dots-horizontal" | "dots-vertical" | "download" | "drag-variant" | "drag-vertical" | "east" | "email-outline" | "expand" | "eye" | "eye-off" | "filter" | "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" | "search" | "send" | "settings" | "sort" | "sun" | "support" | "switch_orga" | "unlock" | "upload" | "view" | "weather-night" | "attach" | "phone" | "earth" | "email-remove-outline" | "expand-more" | "console" | "equal" | "youtube" | "x" | "slack" | "rss" | "linkedIn" | "instagram" | undefined;
     prominence?: "strong" | "stronger" | "weak" | "default" | undefined;
     color?: Color | undefined;
     'data-testid'?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/icons",
-  "version": "2.6.0",
+  "version": "2.7.1",
   "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.3",
+    "@babel/core": "7.23.6",
     "@emotion/babel-plugin": "11.11.0",
-    "@types/react": "18.2.37",
-    "@types/react-dom": "18.2.15"
+    "@types/react": "18.2.43",
+    "@types/react-dom": "18.2.17"
   },
   "dependencies": {
     "@ultraviolet/themes": "1.5.0"