@synerise/ds-icon 1.11.1 → 1.13.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.13.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-icon@1.12.0...@synerise/ds-icon@1.13.0) (2026-02-10)
+
+### Features
+
+- **icon:** new menu icons ([7b9c261](https://github.com/Synerise/synerise-design/commit/7b9c261dcb9fe755d1a07b8e0de2de55c012f76f))
+
+# [1.12.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-icon@1.11.1...@synerise/ds-icon@1.12.0) (2026-02-10)
+
+### Features
+
+- **mocks:** add base package structure ([f4e5263](https://github.com/Synerise/synerise-design/commit/f4e5263d21675dbb3d040a3efbe84b726e12ddca))
+
 ## [1.11.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-icon@1.11.0...@synerise/ds-icon@1.11.1) (2026-02-05)
 
 **Note:** Version bump only for package @synerise/ds-icon

package/README.md

@@ -23,25 +23,26 @@ yarn add @synerise/ds-icon
 
 ## Usage
 
-```
-import Icon, { AngleLeftM } from '@synerise/ds-icon'
+```tsx
+import Icon from '@synerise/ds-icon'
 
-<Icon component={<AngleLeftM />
-      color={'red'}
-      title={'customIcon'}
-      size={20}
-      className={'classIcon'}
-/>
+// Recommended: use iconName prop with icon name as string
+<Icon iconName="AngleLeftM" color="red" size={20} />
+
+// Deprecated: using component prop
+import Icon, { AngleLeftM } from '@synerise/ds-icon'
+<Icon component={<AngleLeftM />} color="red" size={20} />
 ```
 
 ## API
 
 | Property  | Description                                                | Type             | Default |
 | --------- | ---------------------------------------------------------- | ---------------- | ------- |
+| iconName  | Icon name as string (recommended)                          | IconName         |         |
 | color     | Define the color used                                      | string           | inherit |
 | title     | Name icon                                                  | string           |         |
 | size      | Define size icon                                           | string or number | 24      |
-| onClick   | The callback function that is triggered when click on icon | fucnction        |         |
-| component | The component used for the root node                       | ReactNode        |         |
+| onClick   | The callback function that is triggered when click on icon | function         |         |
+| component | ⚠️ Deprecated - use `iconName` instead                     | ReactNode        |         |
 | className | icon className                                             | string           |         |
 | style     | Style properties of icon, like color etc.                  | CSSProperties    |         |

package/dist/DynamicIcon/DynamicIcon.d.ts

@@ -1,10 +1,20 @@
 import React, { type ReactNode } from 'react';
 import type { IconProps } from '../Icon.types';
-import { iconManifest } from './iconManifest';
-export type DynamicIconProps = Omit<IconProps, 'component'> & {
-    name: DynamicIconName;
+import { type IconName } from '../useIconComponent';
+export type DynamicIconProps = Omit<IconProps, 'component' | 'iconName'> & {
+    name: IconName;
     fallback?: ReactNode;
 };
-export type DynamicIconName = keyof typeof iconManifest;
-export declare const DynamicIcon: ({ name, fallback, ...props }: DynamicIconProps & {}) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null;
+/**
+ * @deprecated Use `<Icon iconName="IconName" />` instead of `<DynamicIcon name="IconName" />`.
+ * The Icon component now supports dynamic icon loading via the `iconName` prop.
+ * @example
+ * // Before (deprecated):
+ * <DynamicIcon name="InfoM" />
+ *
+ * // After (recommended):
+ * <Icon iconName="InfoM" />
+ */
+export declare const DynamicIcon: ({ name, fallback, ...props }: DynamicIconProps) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null;
 export default DynamicIcon;
+export type { IconName as DynamicIconName };

package/dist/DynamicIcon/DynamicIcon.js

@@ -1,27 +1,30 @@
 var _excluded = ["name", "fallback"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useMemo } from 'react';
+import React from 'react';
 import Icon from '../Icon';
-import { iconManifest } from './iconManifest';
+import { useIconComponent } from '../useIconComponent';
+/**
+ * @deprecated Use `<Icon iconName="IconName" />` instead of `<DynamicIcon name="IconName" />`.
+ * The Icon component now supports dynamic icon loading via the `iconName` prop.
+ * @example
+ * // Before (deprecated):
+ * <DynamicIcon name="InfoM" />
+ *
+ * // After (recommended):
+ * <Icon iconName="InfoM" />
+ */
 export var DynamicIcon = function DynamicIcon(_ref) {
   var name = _ref.name,
     _ref$fallback = _ref.fallback,
     fallback = _ref$fallback === void 0 ? null : _ref$fallback,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var IconComponent = useMemo(function () {
-    var iconModule = iconManifest[name];
-    if (!iconModule) {
-      return null;
-    }
-    var component = iconModule[name];
-    return component && typeof component === 'function' ? component : null;
-  }, [name]);
+  var IconComponent = useIconComponent(name);
   if (!IconComponent) {
     return fallback;
   }
   return /*#__PURE__*/React.createElement(Icon, _extends({}, props, {
-    component: /*#__PURE__*/React.createElement(IconComponent, null)
+    iconName: name
   }));
 };
 export default DynamicIcon;

package/dist/Icon.js

@@ -1,17 +1,21 @@
-var _excluded = ["name", "component", "className"];
+var _excluded = ["name", "iconName", "component", "className"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef } from 'react';
 import * as S from './Icon.styles';
+import { useIconComponent } from './useIconComponent';
 var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var name = _ref.name,
+    iconName = _ref.iconName,
     component = _ref.component,
     className = _ref.className,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var IconComponent = useIconComponent(iconName);
+  var renderedIcon = IconComponent ? /*#__PURE__*/React.createElement(IconComponent, null) : component;
   return /*#__PURE__*/React.createElement(S.IconContainer, _extends({
     className: "ds-icon " + (className || ''),
-    title: name,
+    title: name || iconName,
     ref: ref
-  }, rest), component);
+  }, rest), renderedIcon);
 });
 export default Icon;

package/dist/Icon.types.d.ts

@@ -1,11 +1,35 @@
 import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 import { type StyledComponent } from 'styled-components';
 import type { WithHTMLAttributes } from '@synerise/ds-utils';
+import type { IconName } from './useIconComponent';
+export type { IconName };
 export type BaseIconProps = {
     color?: string;
+    /**
+     * Icon name - use this to render an icon by its name (e.g., 'InfoM', 'AddM').
+     * This is the recommended way to use icons.
+     * @example
+     * ```tsx
+     * <Icon iconName="InfoM" />
+     * <Icon iconName="AddM" size={24} color="blue" />
+     * ```
+     */
+    iconName?: IconName;
+    /**
+     * Display name for the icon (used as title attribute)
+     */
     name?: string;
     size?: string | number;
     stroke?: boolean;
+    /**
+     * @deprecated Use the `iconName` prop instead with the icon name as a string.
+     * @example
+     * // Before (deprecated):
+     * <Icon component={<InfoM />} />
+     *
+     * // After (recommended):
+     * <Icon iconName="InfoM" />
+     */
     component?: ReactNode;
 };
 export type IconProps = WithHTMLAttributes<HTMLDivElement, BaseIconProps>;

package/dist/MimeTypeIcon/MimeTypeIcon.js

@@ -3,15 +3,15 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { useMemo } from 'react';
 import Icon from '../Icon';
-import { mapMimeTypeToIcon } from './MimeTypeIcon.utils';
+import { mapMimeTypeToIconName } from './MimeTypeIcon.utils';
 var MimeTypeIcon = function MimeTypeIcon(_ref) {
   var type = _ref.type,
     iconProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var component = useMemo(function () {
-    return mapMimeTypeToIcon(type);
+  var iconName = useMemo(function () {
+    return mapMimeTypeToIconName(type);
   }, [type]);
   return /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
-    component: component
+    iconName: iconName
   }));
 };
 export default MimeTypeIcon;

package/dist/MimeTypeIcon/MimeTypeIcon.utils.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
-export declare const mapMimeTypeToIcon: (mimeType: string) => React.JSX.Element;
+import type { IconName } from '../useIconComponent';
+export declare const mapMimeTypeToIconName: (mimeType: string) => IconName;

package/dist/MimeTypeIcon/MimeTypeIcon.utils.js

@@ -1,41 +1,39 @@
-import React from 'react';
-import { FileActionM, FileArchiveM, FileCodeM, FileM, FileTypeImageM, FileTypePlainM, FileTypeTableM, FileTypeTextM } from '../icons/M';
-export var mapMimeTypeToIcon = function mapMimeTypeToIcon(mimeType) {
+export var mapMimeTypeToIconName = function mapMimeTypeToIconName(mimeType) {
   switch (mimeType) {
     case 'text/csv':
-      return /*#__PURE__*/React.createElement(FileTypeTableM, null);
+      return 'FileTypeTableM';
     case 'application/msword':
     case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-      return /*#__PURE__*/React.createElement(FileTypeTextM, null);
+      return 'FileTypeTextM';
     case 'text/html':
-      return /*#__PURE__*/React.createElement(FileCodeM, null);
+      return 'FileCodeM';
     case 'audio/mp3':
     case 'audio/mpeg3':
-      return /*#__PURE__*/React.createElement(FileActionM, null);
+      return 'FileActionM';
     case 'application/pdf':
-      return /*#__PURE__*/React.createElement(FileTypeImageM, null);
+      return 'FileTypeImageM';
     case 'application/mspowerpoint':
     case 'application/vnd.ms-powerpoint':
     case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
-      return /*#__PURE__*/React.createElement(FileTypePlainM, null);
+      return 'FileTypePlainM';
     case 'image/svg':
-      return /*#__PURE__*/React.createElement(FileTypeImageM, null);
+      return 'FileTypeImageM';
     case 'text/plain':
-      return /*#__PURE__*/React.createElement(FileTypeTextM, null);
+      return 'FileTypeTextM';
     case 'video/avi':
     case 'video/quicktime':
     case 'video/mpeg':
-      return /*#__PURE__*/React.createElement(FileActionM, null);
+      return 'FileActionM';
     case 'application/excel':
     case 'application/vnd.ms-excel':
     case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
-      return /*#__PURE__*/React.createElement(FileTypeTableM, null);
+      return 'FileTypeTableM';
     case 'application/zip':
     case 'multipart/x-zip':
     case 'application/x-compressed':
     case 'application/x-zip-compressed':
-      return /*#__PURE__*/React.createElement(FileArchiveM, null);
+      return 'FileArchiveM';
     default:
-      return /*#__PURE__*/React.createElement(FileM, null);
+      return 'FileM';
   }
 };

package/dist/icons/L/index.d.ts

@@ -1,70 +1,70 @@
-export { default as VideoL } from './VideoL';
-export { default as WarningL } from './WarningL';
 export { default as TooltipL } from './TooltipL';
+export { default as VideoL } from './VideoL';
 export { default as TextL } from './TextL';
 export { default as TimeL } from './TimeL';
 export { default as TextareaL } from './TextareaL';
 export { default as TableL } from './TableL';
-export { default as StackedL } from './StackedL';
 export { default as SliderL } from './SliderL';
+export { default as StackedL } from './StackedL';
+export { default as WarningL } from './WarningL';
 export { default as SelectL } from './SelectL';
-export { default as ShowL } from './ShowL';
+export { default as Section37L } from './Section37L';
 export { default as SectionL } from './SectionL';
 export { default as Section13L } from './Section13L';
-export { default as SearchNoResultsL } from './SearchNoResultsL';
 export { default as SpinnerL } from './SpinnerL';
+export { default as SearchNoResultsL } from './SearchNoResultsL';
+export { default as Section12L } from './Section12L';
 export { default as RelationOneOneL } from './RelationOneOneL';
+export { default as RadioL } from './RadioL';
 export { default as RelationOneManyL } from './RelationOneManyL';
 export { default as RelationManyOneL } from './RelationManyOneL';
 export { default as RelationManyManyL } from './RelationManyManyL';
-export { default as RadioL } from './RadioL';
-export { default as Section12L } from './Section12L';
-export { default as QuoteL } from './QuoteL';
+export { default as PieL } from './PieL';
+export { default as NoPermissionL } from './NoPermissionL';
 export { default as NoData } from './NoData';
+export { default as QuoteL } from './QuoteL';
 export { default as NavbarL } from './NavbarL';
-export { default as NoPermissionL } from './NoPermissionL';
 export { default as MultilineL } from './MultilineL';
 export { default as MobileUrlL } from './MobileUrlL';
 export { default as MobileLinkL } from './MobileLinkL';
 export { default as MobileLayout4L } from './MobileLayout4L';
 export { default as MobileLayout3L } from './MobileLayout3L';
 export { default as MobileLayout1L } from './MobileLayout1L';
-export { default as PieL } from './PieL';
 export { default as MobileClickL } from './MobileClickL';
+export { default as LocationL } from './LocationL';
 export { default as MobileLayout2L } from './MobileLayout2L';
 export { default as MobileBlockL } from './MobileBlockL';
 export { default as LineL } from './LineL';
-export { default as LinkL } from './LinkL';
 export { default as LandingPageL } from './LandingPageL';
-export { default as LocationL } from './LocationL';
 export { default as LabelL } from './LabelL';
-export { default as InformationNoSearchResultL } from './InformationNoSearchResultL';
-export { default as InfoL } from './InfoL';
-export { default as InboxNoResultsL } from './InboxNoResultsL';
+export { default as LinkL } from './LinkL';
+export { default as InputL } from './InputL';
 export { default as ImageUrlL } from './ImageUrlL';
+export { default as InfoL } from './InfoL';
+export { default as ShowL } from './ShowL';
+export { default as InformationNoSearchResultL } from './InformationNoSearchResultL';
 export { default as ImageLandscapeL } from './ImageLandscapeL';
-export { default as ImagePotraitL } from './ImagePotraitL';
+export { default as HideL } from './HideL';
+export { default as InboxNoResultsL } from './InboxNoResultsL';
 export { default as ImageL } from './ImageL';
 export { default as FormL } from './FormL';
-export { default as InputL } from './InputL';
-export { default as HideL } from './HideL';
+export { default as HashL } from './HashL';
 export { default as FormGroupL } from './FormGroupL';
-export { default as FolderPlainL } from './FolderPlainL';
 export { default as FolderPredefinedL } from './FolderPredefinedL';
-export { default as FolderFavouriteFlatL } from './FolderFavouriteFlatL';
-export { default as HashL } from './HashL';
-export { default as CountdownL } from './CountdownL';
+export { default as FolderPlainL } from './FolderPlainL';
 export { default as FolderL } from './FolderL';
-export { default as FileTypePictureL } from './FileTypePictureL';
-export { default as FormEditL } from './FormEditL';
-export { default as ColumnL } from './ColumnL';
 export { default as DividerL } from './DividerL';
+export { default as FolderFavouriteFlatL } from './FolderFavouriteFlatL';
+export { default as FileTypePictureL } from './FileTypePictureL';
 export { default as CloseL } from './CloseL';
 export { default as ComboL } from './ComboL';
-export { default as ButtonSubmitL } from './ButtonSubmitL';
+export { default as CountdownL } from './CountdownL';
 export { default as CheckboxL } from './CheckboxL';
 export { default as CheckL } from './CheckL';
-export { default as BrowserL } from './BrowserL';
-export { default as ButtonL } from './ButtonL';
+export { default as ColumnL } from './ColumnL';
+export { default as ButtonSubmitL } from './ButtonSubmitL';
 export { default as AddL } from './AddL';
-export { default as Section37L } from './Section37L';
+export { default as FormEditL } from './FormEditL';
+export { default as ButtonL } from './ButtonL';
+export { default as BrowserL } from './BrowserL';
+export { default as ImagePotraitL } from './ImagePotraitL';

package/dist/icons/L/index.js

@@ -1,70 +1,70 @@
-export { default as VideoL } from './VideoL';
-export { default as WarningL } from './WarningL';
 export { default as TooltipL } from './TooltipL';
+export { default as VideoL } from './VideoL';
 export { default as TextL } from './TextL';
 export { default as TimeL } from './TimeL';
 export { default as TextareaL } from './TextareaL';
 export { default as TableL } from './TableL';
-export { default as StackedL } from './StackedL';
 export { default as SliderL } from './SliderL';
+export { default as StackedL } from './StackedL';
+export { default as WarningL } from './WarningL';
 export { default as SelectL } from './SelectL';
-export { default as ShowL } from './ShowL';
+export { default as Section37L } from './Section37L';
 export { default as SectionL } from './SectionL';
 export { default as Section13L } from './Section13L';
-export { default as SearchNoResultsL } from './SearchNoResultsL';
 export { default as SpinnerL } from './SpinnerL';
+export { default as SearchNoResultsL } from './SearchNoResultsL';
+export { default as Section12L } from './Section12L';
 export { default as RelationOneOneL } from './RelationOneOneL';
+export { default as RadioL } from './RadioL';
 export { default as RelationOneManyL } from './RelationOneManyL';
 export { default as RelationManyOneL } from './RelationManyOneL';
 export { default as RelationManyManyL } from './RelationManyManyL';
-export { default as RadioL } from './RadioL';
-export { default as Section12L } from './Section12L';
-export { default as QuoteL } from './QuoteL';
+export { default as PieL } from './PieL';
+export { default as NoPermissionL } from './NoPermissionL';
 export { default as NoData } from './NoData';
+export { default as QuoteL } from './QuoteL';
 export { default as NavbarL } from './NavbarL';
-export { default as NoPermissionL } from './NoPermissionL';
 export { default as MultilineL } from './MultilineL';
 export { default as MobileUrlL } from './MobileUrlL';
 export { default as MobileLinkL } from './MobileLinkL';
 export { default as MobileLayout4L } from './MobileLayout4L';
 export { default as MobileLayout3L } from './MobileLayout3L';
 export { default as MobileLayout1L } from './MobileLayout1L';
-export { default as PieL } from './PieL';
 export { default as MobileClickL } from './MobileClickL';
+export { default as LocationL } from './LocationL';
 export { default as MobileLayout2L } from './MobileLayout2L';
 export { default as MobileBlockL } from './MobileBlockL';
 export { default as LineL } from './LineL';
-export { default as LinkL } from './LinkL';
 export { default as LandingPageL } from './LandingPageL';
-export { default as LocationL } from './LocationL';
 export { default as LabelL } from './LabelL';
-export { default as InformationNoSearchResultL } from './InformationNoSearchResultL';
-export { default as InfoL } from './InfoL';
-export { default as InboxNoResultsL } from './InboxNoResultsL';
+export { default as LinkL } from './LinkL';
+export { default as InputL } from './InputL';
 export { default as ImageUrlL } from './ImageUrlL';
+export { default as InfoL } from './InfoL';
+export { default as ShowL } from './ShowL';
+export { default as InformationNoSearchResultL } from './InformationNoSearchResultL';
 export { default as ImageLandscapeL } from './ImageLandscapeL';
-export { default as ImagePotraitL } from './ImagePotraitL';
+export { default as HideL } from './HideL';
+export { default as InboxNoResultsL } from './InboxNoResultsL';
 export { default as ImageL } from './ImageL';
 export { default as FormL } from './FormL';
-export { default as InputL } from './InputL';
-export { default as HideL } from './HideL';
+export { default as HashL } from './HashL';
 export { default as FormGroupL } from './FormGroupL';
-export { default as FolderPlainL } from './FolderPlainL';
 export { default as FolderPredefinedL } from './FolderPredefinedL';
-export { default as FolderFavouriteFlatL } from './FolderFavouriteFlatL';
-export { default as HashL } from './HashL';
-export { default as CountdownL } from './CountdownL';
+export { default as FolderPlainL } from './FolderPlainL';
 export { default as FolderL } from './FolderL';
-export { default as FileTypePictureL } from './FileTypePictureL';
-export { default as FormEditL } from './FormEditL';
-export { default as ColumnL } from './ColumnL';
 export { default as DividerL } from './DividerL';
+export { default as FolderFavouriteFlatL } from './FolderFavouriteFlatL';
+export { default as FileTypePictureL } from './FileTypePictureL';
 export { default as CloseL } from './CloseL';
 export { default as ComboL } from './ComboL';
-export { default as ButtonSubmitL } from './ButtonSubmitL';
+export { default as CountdownL } from './CountdownL';
 export { default as CheckboxL } from './CheckboxL';
 export { default as CheckL } from './CheckL';
-export { default as BrowserL } from './BrowserL';
-export { default as ButtonL } from './ButtonL';
+export { default as ColumnL } from './ColumnL';
+export { default as ButtonSubmitL } from './ButtonSubmitL';
 export { default as AddL } from './AddL';
-export { default as Section37L } from './Section37L';
+export { default as FormEditL } from './FormEditL';
+export { default as ButtonL } from './ButtonL';
+export { default as BrowserL } from './BrowserL';
+export { default as ImagePotraitL } from './ImagePotraitL';

package/dist/icons/M/AiColorHubM.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AiColorHubM: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default AiColorHubM;

package/dist/icons/M/AiColorHubM.js

@@ -0,0 +1,21 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+var AiColorHubM = function AiColorHubM(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 26 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "ds-icon-ai-color-hub-m",
+    className: "ai-color-hub-m ds-icon-set-medium"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M0 12C2.82124 12.8812 5.38676 14.4333 7.47673 16.5233C9.56671 18.6133 11.1188 21.1788 12.0001 24C12.8813 21.1788 14.4333 18.6133 16.5233 16.5233C18.6132 14.4333 21.1788 12.8813 24 12C21.1788 11.1187 18.6132 9.56654 16.5233 7.47658C14.4333 5.38662 12.8813 2.82121 12.0001 0C11.1188 2.82122 9.56671 5.38673 7.47673 7.4767C5.38676 9.56666 2.82124 11.1188 0 12Z",
+    fill: "#B88CEE"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 0C12.8795 2.822 14.4319 5.3879 16.5233 7.4767C18.6121 9.5682 21.178 11.1205 24 12L12 12L12 0Z",
+    fill: "#6D2ED3"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 24C12.8795 21.178 14.4319 18.6121 16.5233 16.5233C18.6121 14.4318 21.178 12.8795 24 12H12V24Z",
+    fill: "#E0C3FF"
+  }));
+};
+export default AiColorHubM;

package/dist/icons/M/AiGreyHubM.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AiGreyHubM: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default AiGreyHubM;

package/dist/icons/M/AiGreyHubM.js

@@ -0,0 +1,21 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+var AiGreyHubM = function AiGreyHubM(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 26 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "ds-icon-ai-grey-hub-m",
+    className: "ai-grey-hub-m ds-icon-set-medium"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M0 12C2.82124 12.8812 5.38676 14.4333 7.47673 16.5233C9.56671 18.6133 11.1188 21.1788 12.0001 24C12.8813 21.1788 14.4333 18.6133 16.5233 16.5233C18.6132 14.4333 21.1788 12.8813 24 12C21.1788 11.1187 18.6132 9.56654 16.5233 7.47658C14.4333 5.38662 12.8813 2.82121 12.0001 0C11.1188 2.82122 9.56671 5.38673 7.47673 7.4767C5.38676 9.56666 2.82124 11.1188 0 12Z",
+    fill: "#B5BDC3"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 0C12.8795 2.822 14.4319 5.3879 16.5233 7.4767C18.6121 9.5682 21.178 11.1205 24 12L12 12L12 0Z",
+    fill: "#6A7580"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 24C12.8795 21.178 14.4319 18.6121 16.5233 16.5233C18.6121 14.4318 21.178 12.8795 24 12H12V24Z",
+    fill: "#DBE0E3"
+  }));
+};
+export default AiGreyHubM;

package/dist/icons/M/AutomationColorHubM.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AutomationColorHubM: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default AutomationColorHubM;

package/dist/icons/M/AutomationColorHubM.js

@@ -0,0 +1,18 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+var AutomationColorHubM = function AutomationColorHubM(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "ds-icon-automation-color-hub-m",
+    className: "automation-color-hub-m ds-icon-set-medium"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M3 1V22.9999L20.9997 12.004L3 1Z",
+    fill: "#FFD1C7"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M3 12.0044V23.0002L21 12.0044H3Z",
+    fill: "#F52922"
+  }));
+};
+export default AutomationColorHubM;

package/dist/icons/M/AutomationGreyHubM.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AutomationGreyHubM: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default AutomationGreyHubM;

package/dist/icons/M/AutomationGreyHubM.js

@@ -0,0 +1,18 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+var AutomationGreyHubM = function AutomationGreyHubM(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "ds-icon-automation-grey-hub-m",
+    className: "automation-grey-hub-m ds-icon-set-medium"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M3 1V22.9999L20.9997 12.004L3 1Z",
+    fill: "#DBE0E3"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M3 12.0044V23.0002L21 12.0044H3Z",
+    fill: "#8894A1"
+  }));
+};
+export default AutomationGreyHubM;

package/dist/icons/M/BehavioralColorHubM.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const BehavioralColorHubM: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default BehavioralColorHubM;

package/dist/icons/M/BehavioralColorHubM.js

@@ -0,0 +1,18 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+var BehavioralColorHubM = function BehavioralColorHubM(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "ds-icon-behavioral-color-hub-m",
+    className: "behavioral-color-hub-m ds-icon-set-medium"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12.0001 12.2061C9.3479 12.2061 6.80425 13.2379 4.92887 15.0746C3.05349 16.9114 2.00001 19.4026 2 22.0001H22C22 19.4026 20.9465 16.9114 19.0711 15.0746C17.1958 13.2379 14.6523 12.2061 12.0001 12.2061Z",
+    fill: "#6CDFD4"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 10C14.2091 10 16 8.20914 16 6C16 3.79086 14.2091 2 12 2C9.79086 2 8 3.79086 8 6C8 8.20914 9.79086 10 12 10Z",
+    fill: "#009BA2"
+  }));
+};
+export default BehavioralColorHubM;

package/dist/icons/M/BehavioralGreyHubM.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const BehavioralGreyHubM: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+export default BehavioralGreyHubM;

package/dist/icons/M/BehavioralGreyHubM.js

@@ -0,0 +1,18 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+var BehavioralGreyHubM = function BehavioralGreyHubM(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "ds-icon-behavioral-grey-hub-m",
+    className: "behavioral-grey-hub-m ds-icon-set-medium"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12.0003 12.2061C9.34814 12.2061 6.80449 13.2379 4.92911 15.0746C3.05373 16.9114 2.00025 19.4026 2.00024 22.0001H22.0002C22.0002 19.4026 20.9467 16.9114 19.0714 15.0746C17.196 13.2379 14.6525 12.2061 12.0003 12.2061Z",
+    fill: "#CBD2D8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12.0002 10C14.2094 10 16.0002 8.20914 16.0002 6C16.0002 3.79086 14.2094 2 12.0002 2C9.7911 2 8.00024 3.79086 8.00024 6C8.00024 8.20914 9.7911 10 12.0002 10Z",
+    fill: "#6A7580"
+  }));
+};
+export default BehavioralGreyHubM;