@drivenets/design-system 0.3.0 → 0.5.0

package/src/components/ds-card/ds-card.module.scss

@@ -0,0 +1,119 @@
+$border-radius: 8px;
+$min-width-small: 224px;
+$min-width-medium: 264px;
+$min-width-large: 368px;
+$transition-duration: 0.2s;
+
+.root {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	background: var(--color-background);
+	border: 1px solid var(--color-border-contrast);
+	overflow: hidden;
+	box-sizing: border-box;
+	border-radius: $border-radius;
+}
+
+.root[data-disabled] {
+	&::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		// TODO: remove once we import all the tokens from figma
+		background: rgba(255, 255, 255, 0.6);
+		pointer-events: none;
+		border-radius: inherit;
+	}
+}
+
+.root[data-size='small'] {
+	min-width: $min-width-small;
+
+	.header,
+	.body,
+	.footer {
+		padding: var(--spacing-xs) var(--spacing-sm);
+	}
+}
+
+.root[data-size='medium'] {
+	min-width: $min-width-medium;
+
+	.header,
+	.body,
+	.footer {
+		padding: var(--spacing-xs) var(--spacing-standard);
+	}
+}
+
+.root[data-size='large'] {
+	min-width: $min-width-large;
+
+	.header,
+	.body,
+	.footer {
+		padding: var(--spacing-xs) var(--spacing-xl);
+	}
+}
+
+.root[data-selectable] {
+	cursor: pointer;
+	transition:
+		border-color $transition-duration ease-in-out,
+		box-shadow $transition-duration ease-in-out,
+		background-color $transition-duration ease-in-out;
+
+	&:focus {
+		outline: none;
+	}
+
+	&:hover:not([data-disabled]):not([data-selected]) {
+		border-color: var(--color-border-action-secondary);
+	}
+
+	&:focus-visible:not([data-selected]),
+	&[data-focus-visible]:not([data-selected]) {
+		border-color: var(--color-border-action-secondary);
+		box-shadow: inset 0 0 0 1px var(--color-border-action-secondary);
+		outline: none;
+	}
+
+	&:focus-visible[data-selected],
+	&[data-focus-visible][data-selected] {
+		outline: none;
+	}
+
+	&[data-disabled] {
+		cursor: not-allowed;
+		border-color: var(--color-border-disabled);
+	}
+}
+
+.root[data-selected] {
+	border-color: var(--color-border-action-primary);
+
+	&:hover:not([data-disabled]),
+	&:focus-visible,
+	&[data-focus-visible] {
+		box-shadow: inset 0 0 0 1px var(--color-border-action-primary);
+	}
+
+	&[data-highlight] {
+		background: var(--color-background-selected-weak);
+	}
+}
+
+.header {
+	display: flex;
+	align-items: center;
+}
+
+.body {
+	flex: 1;
+}
+
+.footer {
+	display: flex;
+	align-items: center;
+}

package/src/components/ds-card/ds-card.tsx

@@ -0,0 +1,87 @@
+import classNames from 'classnames';
+
+import styles from './ds-card.module.scss';
+import type { DsCardRootProps, DsCardHeaderProps, DsCardBodyProps, DsCardFooterProps } from './ds-card.types';
+
+/**
+ * Card root component - container with optional selectable behavior.
+ * Use composition with DsCard.Header, DsCard.Body, DsCard.Footer for full flexibility.
+ */
+const Root = ({
+	ref,
+	size = 'medium',
+	selectable = false,
+	selected = false,
+	highlightSelected = false,
+	disabled = false,
+	className,
+	style,
+	children,
+	onClick,
+	onKeyDown,
+	...rest
+}: DsCardRootProps) => {
+	const interactiveProps = selectable
+		? {
+				role: 'button' as const,
+				tabIndex: disabled ? -1 : 0,
+				'aria-pressed': selected,
+				'aria-disabled': disabled || undefined,
+			}
+		: {};
+
+	return (
+		<div
+			ref={ref}
+			{...rest}
+			{...interactiveProps}
+			onClick={disabled ? undefined : onClick}
+			onKeyDown={disabled ? undefined : onKeyDown}
+			data-size={size}
+			data-selectable={selectable || undefined}
+			data-selected={selected || undefined}
+			data-disabled={disabled || undefined}
+			data-highlight={(selected && highlightSelected) || undefined}
+			className={classNames(styles.root, className)}
+			style={style}
+		>
+			{children}
+		</div>
+	);
+};
+
+/**
+ * Card header - contains title and extra content.
+ * Use with DsCard.Title and DsCard.Extra for standard layout,
+ * or provide custom children for full flexibility.
+ */
+const Header = ({ className, children, ref, ...rest }: DsCardHeaderProps) => (
+	<div ref={ref} className={classNames(styles.header, className)} {...rest}>
+		{children}
+	</div>
+);
+
+/**
+ * Card body - main content area.
+ */
+const Body = ({ className, children, ref, ...rest }: DsCardBodyProps) => (
+	<div ref={ref} className={classNames(styles.body, className)} {...rest}>
+		{children}
+	</div>
+);
+
+/**
+ * Card footer - bottom section for actions or additional info.
+ */
+const Footer = ({ className, children, ref, ...rest }: DsCardFooterProps) => (
+	<div ref={ref} className={classNames(styles.footer, className)} {...rest}>
+		{children}
+	</div>
+);
+
+export const DsCard = {
+	Root,
+	Header,
+	Body,
+	Footer,
+};

package/src/components/ds-card/ds-card.types.ts

@@ -0,0 +1,72 @@
+import type { CSSProperties, HTMLAttributes, ReactNode, Ref } from 'react';
+
+export const cardSizes = ['small', 'medium', 'large'] as const;
+export type DsCardSize = (typeof cardSizes)[number];
+
+/**
+ * Props for the Card root component
+ */
+export interface DsCardRootProps extends HTMLAttributes<HTMLDivElement> {
+	/**
+	 * Forwarded ref for the card element
+	 */
+	ref?: Ref<HTMLDivElement>;
+
+	/**
+	 * Card size variant
+	 * @default 'medium'
+	 */
+	size?: DsCardSize;
+
+	/**
+	 * Enable selectable/interactive mode. When false, the card is a static display container.
+	 * @default false
+	 */
+	selectable?: boolean;
+
+	/**
+	 * Selected state (controlled). Required when selectable is true.
+	 * @default false
+	 */
+	selected?: boolean;
+
+	/**
+	 * When true, shows a highlighted background when selected
+	 * @default false
+	 */
+	highlightSelected?: boolean;
+
+	/**
+	 * Disabled state - prevents interaction
+	 */
+	disabled?: boolean;
+}
+
+/**
+ * Common props for card slot components
+ */
+export interface DsCardSlotProps extends HTMLAttributes<HTMLDivElement> {
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+
+	/**
+	 * Additional styles to apply
+	 */
+	style?: CSSProperties;
+
+	/**
+	 * Slot content
+	 */
+	children?: ReactNode;
+
+	/**
+	 * Forwarded ref
+	 */
+	ref?: Ref<HTMLDivElement>;
+}
+
+export type DsCardHeaderProps = DsCardSlotProps;
+export type DsCardBodyProps = DsCardSlotProps;
+export type DsCardFooterProps = DsCardSlotProps;

package/src/components/ds-card/index.ts

@@ -0,0 +1,9 @@
+export { DsCard } from './ds-card';
+export type {
+	DsCardRootProps,
+	DsCardHeaderProps,
+	DsCardBodyProps,
+	DsCardFooterProps,
+	DsCardSize,
+} from './ds-card.types';
+export { cardSizes } from './ds-card.types';

package/src/components/ds-confirmation/ds-confirmation.tsx

@@ -1,121 +1,17 @@
-import type { CSSProperties, ReactNode } from 'react';
-import { Dialog } from '@ark-ui/react/dialog';
-import { Portal } from '@ark-ui/react/portal';
-import classNames from 'classnames';
-import { DsIcon } from '../ds-icon';
+import DsModal from '../ds-modal/ds-modal';
 import type { DsConfirmationProps } from './ds-confirmation.types';
-import styles from './ds-confirmation.module.scss';
-import DsTypography from '../ds-typography/ds-typography';
 
 /**
- * Composable confirmation modal dialog.
+ * @deprecated DsConfirmation is deprecated. Use DsModal instead.
+ * @see {@link ../ds-modal} for the replacement component.
  */
-export const DsConfirmation = ({ open, onOpenChange, style, className, children }: DsConfirmationProps) => {
-	const handleOpenChange = (details: { open: boolean }) => {
-		onOpenChange(details.open);
-	};
-
-	return (
-		<Dialog.Root
-			open={open}
-			onOpenChange={handleOpenChange}
-			modal={true}
-			closeOnEscape={true}
-			closeOnInteractOutside={true}
-		>
-			<Portal>
-				<Dialog.Backdrop className={styles.overlay} />
-				<Dialog.Positioner>
-					<Dialog.Content className={classNames(styles.modal, className)}>
-						<div style={style} className={styles.content}>
-							{children}
-						</div>
-					</Dialog.Content>
-				</Dialog.Positioner>
-			</Portal>
-		</Dialog.Root>
-	);
-};
-
-const Header = ({
-	style,
-	className,
-	children,
-}: {
-	style?: CSSProperties;
-	className?: string;
-	children: ReactNode;
-}) => (
-	<div style={style} className={classNames(styles.header, className)}>
-		{children}
-	</div>
-);
-
-const Title = ({
-	style,
-	className,
-	children,
-}: {
-	style?: CSSProperties;
-	className?: string;
-	children: ReactNode;
-}) => (
-	<Dialog.Title className={classNames(styles.title, className)} style={style} asChild>
-		<DsTypography variant="heading4">{children}</DsTypography>
-	</Dialog.Title>
-);
-
-const CloseTrigger = ({ style, className }: { style?: CSSProperties; className?: string }) => (
-	<Dialog.CloseTrigger style={style} className={className}>
-		<DsIcon icon="close" size="small"></DsIcon>
-	</Dialog.CloseTrigger>
-);
-
-const Body = ({
-	style,
-	className,
-	children,
-}: {
-	style?: CSSProperties;
-	className?: string;
-	children: ReactNode;
-}) => (
-	<div style={style} className={classNames(styles.body, className)}>
-		{children}
-	</div>
-);
-
-const Footer = ({
-	style,
-	className,
-	children,
-}: {
-	style?: CSSProperties;
-	className?: string;
-	children: ReactNode;
-}) => (
-	<div style={style} className={classNames(styles.footer, className)}>
-		{children}
-	</div>
-);
-
-const Actions = ({
-	style,
-	className,
-	children,
-}: {
-	style?: CSSProperties;
-	className?: string;
-	children: ReactNode;
-}) => (
-	<div style={style} className={classNames(styles.actions, className)}>
-		{children}
-	</div>
+export const DsConfirmation = (props: DsConfirmationProps) => (
+	<DsModal columns={4} closeOnEscape closeOnInteractOutside {...props} />
 );
 
-DsConfirmation.Header = Header;
-DsConfirmation.Title = Title;
-DsConfirmation.CloseTrigger = CloseTrigger;
-DsConfirmation.Body = Body;
-DsConfirmation.Footer = Footer;
-DsConfirmation.Actions = Actions;
+DsConfirmation.Header = DsModal.Header;
+DsConfirmation.Title = DsModal.Title;
+DsConfirmation.CloseTrigger = DsModal.CloseTrigger;
+DsConfirmation.Body = DsModal.Body;
+DsConfirmation.Footer = DsModal.Footer;
+DsConfirmation.Actions = DsModal.Actions;

package/src/components/ds-confirmation/ds-confirmation.types.tsx

@@ -1,7 +1,8 @@
 import type { CSSProperties, ReactNode } from 'react';
 
 /**
- * Props for the DsConfirmation component
+ * @deprecated DsConfirmationProps is deprecated. Use DsModal with variant="info" instead.
+ * @see {@link ../ds-modal/ds-modal} for the replacement.
  */
 export interface DsConfirmationProps {
 	/**

package/src/components/ds-dropdown-menu/ds-dropdown-menu.module.scss

@@ -8,7 +8,6 @@
 	max-height: var(--available-height, 400px);
 	overflow-y: auto;
 	width: auto;
-	z-index: var(--layer-index);
 
 	&:focus-visible {
 		outline-offset: 2px;

package/src/components/ds-icon/custom-icons/index.ts

@@ -0,0 +1,137 @@
+import type { FC, SVGProps } from 'react';
+
+// Site & Location icons
+import { SpecialMarket } from './special-market';
+import { SpecialSiteT1 } from './special-site-t1';
+import { SpecialSiteT2 } from './special-site-t2';
+import { SpecialSiteT3 } from './special-site-t3';
+import { SpecialSiteT4 } from './special-site-t4';
+import { SpecialSiteUnknown } from './special-site-unknown';
+import { SpecialSiteGeneric } from './special-site-generic';
+
+// NE State icons
+import { SpecialDiscoveredNe } from './special-discovered-ne';
+import { SpecialUpgrading } from './special-upgrading';
+import { SpecialClusterNe } from './special-cluster-ne';
+import { SpecialStandalone } from './special-standalone';
+
+// NE Navigation icons
+import { SpecialNeNav360Dashboard } from './special-ne-nav-360-dashboard';
+import { SpecialNeNavComponents } from './special-ne-nav-components';
+import { SpecialNeNavTopology } from './special-ne-nav-topology';
+import { SpecialNeNavStacks } from './special-ne-nav-stacks';
+import { SpecialNeNavSettings } from './special-ne-nav-settings';
+import { SpecialNeNavMessageSupport } from './special-ne-nav-message-support';
+import { SpecialNeNavLogging } from './special-ne-nav-logging';
+import { SpecialNeNavTerminal } from './special-ne-nav-terminal';
+import { SpecialNeNavInstallLog } from './special-ne-nav-install-log';
+
+// System & Config icons
+import { SpecialAutobootProfiles } from './special-autoboot-profiles';
+import { SpecialAutomation } from './special-automation';
+import { SpecialStacks } from './special-stacks';
+import { SpecialPackages } from './special-packages';
+import { SpecialGnmi } from './special-gnmi';
+import { SpecialAlarmSettings } from './special-alarm-settings';
+import { SpecialNeHealth } from './special-ne-health';
+import { SpecialHardware } from './special-hardware';
+import { SpecialModules } from './special-modules';
+import { SpecialResources } from './special-resources';
+import { SpecialVersionControl } from './special-version-control';
+import { SpecialSoftware } from './special-software';
+import { SpecialConflictedNes } from './special-conflicted-nes';
+import { SpecialYangVersionControl } from './special-yang-version-control';
+import { SpecialOldBaseOs } from './special-old-base-os';
+import { SpecialGeneralDetails } from './special-general-details';
+import { SpecialConfigTemplate } from './special-config-template';
+import { SpecialCompare } from './special-compare';
+import { SpecialWebhook } from './special-webhook';
+import { SpecialMapView } from './special-map-view';
+
+// Misc icons
+import { SpecialHome } from './special-home';
+import { SpecialLego } from './special-lego';
+import { SpecialScheme } from './special-scheme';
+import { SpecialBook } from './special-book';
+import { SpecialDevice } from './special-device';
+import { SpecialGroupedDevices } from './special-grouped-devices';
+import { SpecialFiberCircuit } from './special-fiber-circuit';
+import { SpecialNetgen } from './special-netgen';
+import { SpecialNetgenS } from './special-netgen-s';
+
+// Active state icons
+import { SpecialFilterListActive } from './special-filter-list-active';
+import { SpecialCachedActive } from './special-cached-active';
+
+export type CustomIconComponent = FC<SVGProps<SVGSVGElement>>;
+
+export const customIcons = {
+	// Site & Location
+	'special-market': SpecialMarket,
+	'special-site-t1': SpecialSiteT1,
+	'special-site-t2': SpecialSiteT2,
+	'special-site-t3': SpecialSiteT3,
+	'special-site-t4': SpecialSiteT4,
+	'special-site-unknown': SpecialSiteUnknown,
+	'special-site-generic': SpecialSiteGeneric,
+
+	// NE State
+	'special-discovered-ne': SpecialDiscoveredNe,
+	'special-upgrading': SpecialUpgrading,
+	'special-cluster-ne': SpecialClusterNe,
+	'special-standalone': SpecialStandalone,
+
+	// NE Navigation
+	'special-ne-nav-360-dashboard': SpecialNeNav360Dashboard,
+	'special-ne-nav-components': SpecialNeNavComponents,
+	'special-ne-nav-topology': SpecialNeNavTopology,
+	'special-ne-nav-stacks': SpecialNeNavStacks,
+	'special-ne-nav-settings': SpecialNeNavSettings,
+	'special-ne-nav-message-support': SpecialNeNavMessageSupport,
+	'special-ne-nav-logging': SpecialNeNavLogging,
+	'special-ne-nav-terminal': SpecialNeNavTerminal,
+	'special-ne-nav-instal-log': SpecialNeNavInstallLog,
+
+	// System & Config
+	'special-autoboot-profiles': SpecialAutobootProfiles,
+	'special-automation': SpecialAutomation,
+	'special-stacks': SpecialStacks,
+	'special-packages': SpecialPackages,
+	'special-gnmi': SpecialGnmi,
+	'special-alarm-settings': SpecialAlarmSettings,
+	'special-ne-health': SpecialNeHealth,
+	'special-hardware': SpecialHardware,
+	'special-modules': SpecialModules,
+	'special-resources': SpecialResources,
+	'special-version-control': SpecialVersionControl,
+	'special-software': SpecialSoftware,
+	'special-conflicted-nes': SpecialConflictedNes,
+	'special-yang-version-control': SpecialYangVersionControl,
+	'special-old-base-os': SpecialOldBaseOs,
+	'special-general-details': SpecialGeneralDetails,
+	'special-config-template': SpecialConfigTemplate,
+	'special-compare': SpecialCompare,
+	'special-webhook': SpecialWebhook,
+	'special-map-view': SpecialMapView,
+
+	// Misc
+	'special-home': SpecialHome,
+	'special-lego': SpecialLego,
+	'special-scheme': SpecialScheme,
+	'special-book': SpecialBook,
+	'special-device': SpecialDevice,
+	'special-grouped-devices': SpecialGroupedDevices,
+	'special-fiber-circuit': SpecialFiberCircuit,
+	'special-netgen': SpecialNetgen,
+	'special-netgen-s': SpecialNetgenS,
+
+	// Active state
+	'special-filter-list-active': SpecialFilterListActive,
+	'special-cached-active': SpecialCachedActive,
+} as const satisfies Record<string, CustomIconComponent>;
+
+export type CustomIconName = keyof typeof customIcons;
+
+export const isCustomIcon = (icon: string): icon is CustomIconName => {
+	return icon in customIcons;
+};

package/src/components/ds-icon/custom-icons/special-alarm-settings.tsx

@@ -0,0 +1,30 @@
+import { useId, type FC, type SVGProps } from 'react';
+
+/**
+ * Special Alarm Settings icon
+ * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3505
+ */
+export const SpecialAlarmSettings: FC<SVGProps<SVGSVGElement>> = (props) => {
+	const clipId = useId();
+
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+			fill="currentColor"
+			{...props}
+		>
+			<g clipPath={`url(#${clipId})`}>
+				<path d="M3.60128 14.0446C2.91148 13.345 2.91148 12.2069 3.60128 11.5072L2.7669 10.6616C1.61683 11.8272 1.61683 13.7247 2.7669 14.8903C3.34224 15.4733 4.09755 15.7646 4.85285 15.7646C5.60875 15.7646 6.36465 15.4733 6.93939 14.8903L6.10501 14.0446C5.43704 14.7216 4.27103 14.7228 3.60128 14.0446ZM2.01396 6.71344C2.00806 6.48021 2.10247 6.13933 2.2854 5.95395C2.46832 5.76856 2.68075 5.55327 2.91089 5.55327C2.91089 5.55327 2.91679 5.55327 2.92269 5.55327C3.14692 5.55327 3.36525 5.78052 3.53638 5.95395L4.4333 6.92275L8.19214 3.14322C9.56704 1.74384 11.8153 1.75879 13.1961 3.15817L14.447 4.43376C15.7098 5.71354 15.816 7.73606 14.7657 9.14143H16.1583C17.0552 7.34735 16.7661 5.09877 15.285 3.59772L14.034 2.3299C12.1929 0.464062 9.19529 0.464062 7.35422 2.3299L4.4333 5.29014L4.3743 5.11073C3.97894 4.71005 3.47147 4.35721 2.94039 4.35721H2.91089C2.36801 4.35721 1.85463 4.70407 1.45338 5.11073C1.04622 5.52337 0.821985 6.11541 0.833787 6.67158C0.839688 7.21578 1.06392 7.75999 1.45338 8.15468L8.99466 15.8333V14.1409L2.2854 7.34137C2.11427 7.16794 2.01396 6.94069 2.01396 6.71344ZM15.285 2.20432C15.3965 2.31675 15.4579 2.46685 15.4579 2.62712C15.4579 2.7874 15.3971 2.9369 15.285 3.04933L16.1193 3.89554C16.4533 3.55646 16.638 3.10614 16.638 2.62653C16.638 2.14691 16.4533 1.69659 16.1193 1.35811C15.4284 0.657823 14.3054 0.659019 13.6156 1.35811L14.45 2.20432C14.6813 1.97109 15.0554 1.97169 15.285 2.20432Z" />
+				<path d="M19.1667 15.1562V14.0104H17.5619C17.4829 13.5991 17.3236 13.2158 17.0956 12.8812L18.2311 11.7457L17.421 10.9356L16.2855 12.0711C15.9509 11.8436 15.5676 11.6838 15.1562 11.6047V10H14.0104V11.6047C13.5991 11.6838 13.2158 11.8431 12.8812 12.0711L11.7457 10.9356L10.9356 11.7457L12.0711 12.8812C11.8436 13.2158 11.6838 13.5991 11.6047 14.0104H10V15.1562H11.6047C11.6838 15.5676 11.8431 15.9509 12.0711 16.2855L10.9356 17.421L11.7457 18.2311L12.8812 17.0956C13.2158 17.323 13.5991 17.4829 14.0104 17.5619V19.1667H15.1562V17.5619C15.5676 17.4829 15.9509 17.3236 16.2855 17.0956L17.421 18.2311L18.2311 17.421L17.0956 16.2855C17.323 15.9509 17.4829 15.5676 17.5619 15.1562H19.1667ZM14.5833 16.474C13.5412 16.474 12.6927 15.626 12.6927 14.5833C12.6927 13.5406 13.5406 12.6927 14.5833 12.6927C15.626 12.6927 16.474 13.5406 16.474 14.5833C16.474 15.626 15.6255 16.474 14.5833 16.474Z" />
+			</g>
+			<defs>
+				<clipPath id={clipId}>
+					<rect width="20" height="20" fill="white" />
+				</clipPath>
+			</defs>
+		</svg>
+	);
+};

package/src/components/ds-icon/custom-icons/special-autoboot-profiles.tsx

@@ -0,0 +1,20 @@
+import type { FC, SVGProps } from 'react';
+
+/**
+ * Special Autoboot Profiles icon
+ * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3438
+ */
+export const SpecialAutobootProfiles: FC<SVGProps<SVGSVGElement>> = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="20"
+		height="20"
+		viewBox="0 0 20 20"
+		fill="currentColor"
+		{...props}
+	>
+		<path d="M14.4302 15.2926H10.9087V13.9849H14.4302C17.0419 13.9849 19.1667 11.9042 19.1667 9.34674C19.1667 6.7893 17.0419 4.70879 14.4302 4.70879H7.55673V1.86478H8.88283V0.833344H5.17725V1.86478H6.50335V4.70879H6.33388C3.72217 4.70879 1.59729 6.7893 1.59729 9.34674C1.59729 11.9042 3.72217 13.9849 6.33388 13.9849H9.85533V15.2926H6.33388C3.72217 15.2926 1.59729 17.3731 1.59729 19.9306H2.65066C2.65066 17.942 4.30299 16.3241 6.33388 16.3241H14.4302C16.461 16.3241 18.1134 17.942 18.1134 19.9306H19.1667C19.1667 17.3731 17.0419 15.2926 14.4302 15.2926ZM6.33388 12.9535C4.30299 12.9535 2.65066 11.3356 2.65066 9.34674C2.65066 7.35815 4.30299 5.74023 6.33388 5.74023H14.4302C16.461 5.74023 18.1134 7.35815 18.1134 9.34674C18.1134 11.3356 16.461 12.9535 14.4302 12.9535H6.33388Z" />
+		<path d="M8.59468 8.47221C8.59468 7.62972 7.88191 6.94443 7.00566 6.94443C6.1294 6.94443 5.41663 7.62972 5.41663 8.47221C5.41663 9.31469 6.1294 9.99998 7.00566 9.99998C7.88191 9.99998 8.59468 9.31469 8.59468 8.47221ZM7.00566 8.86448C6.78075 8.86448 6.59766 8.68844 6.59766 8.47221C6.59766 8.25597 6.78075 8.07993 7.00566 8.07993C7.23056 8.07993 7.41365 8.25597 7.41365 8.47221C7.41365 8.68844 7.23056 8.86448 7.00566 8.86448ZM15.3472 8.47221C15.3472 7.62972 14.6344 6.94443 13.7582 6.94443C12.8819 6.94443 12.1691 7.62972 12.1691 8.47221C12.1691 9.31469 12.8819 9.99998 13.7582 9.99998C14.6344 9.99998 15.3472 9.31469 15.3472 8.47221ZM13.7582 8.86448C13.5332 8.86448 13.3502 8.68844 13.3502 8.47221C13.3502 8.25597 13.5332 8.07993 13.7582 8.07993C13.9831 8.07993 14.1662 8.25597 14.1662 8.47221C14.1662 8.68844 13.9831 8.86448 13.7582 8.86448Z" />
+		<path d="M13.3333 10.8333H7.5V11.6667H13.3333V10.8333Z" />
+	</svg>
+);

package/src/components/ds-icon/custom-icons/special-automation.tsx

@@ -0,0 +1,20 @@
+import type { FC, SVGProps } from 'react';
+
+/**
+ * Special Automation icon
+ * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3453
+ */
+export const SpecialAutomation: FC<SVGProps<SVGSVGElement>> = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="20"
+		height="20"
+		viewBox="0 0 20 20"
+		fill="currentColor"
+		{...props}
+	>
+		<path d="M15.8329 14.129C15.8379 14.3509 15.7986 14.5717 15.7171 14.7782C15.6356 14.9847 15.5137 15.1729 15.3586 15.3316C15.2034 15.4904 15.0181 15.6166 14.8135 15.7027C14.6088 15.7889 14.3891 15.8333 14.1671 15.8333C13.9451 15.8334 13.7253 15.7891 13.5206 15.703C13.316 15.617 13.1306 15.4909 12.9753 15.3322C12.8201 15.1735 12.6981 14.9854 12.6165 14.7789C12.535 14.5725 12.4955 14.3518 12.5004 14.1298C12.51 13.6944 12.6898 13.28 13.0011 12.9753C13.3125 12.6707 13.7307 12.5001 14.1662 12.5C14.6018 12.4999 15.0201 12.6703 15.3316 12.9748C15.6431 13.2792 15.8231 13.6935 15.8329 14.129Z" />
+		<path d="M13.7868 18.3333C12.9581 18.3333 12.1294 18.125 11.4042 17.6042L4.98155 14.1667C4.4636 13.75 4.04923 13.5417 3.63486 13.125C2.39177 11.875 1.66663 10.1042 1.66663 8.33332C1.66663 6.56249 2.39177 4.89582 3.63486 3.64582C4.87796 2.39582 6.53543 1.66666 8.29648 1.66666C10.0575 1.66666 11.715 2.39582 13.0617 3.64582C13.4761 4.06249 13.6832 4.37499 14.0976 4.89582L17.7233 11.5625C18.7592 13.3333 18.4484 15.5208 16.9982 16.9792C16.0658 17.9167 15.0299 18.3333 13.7868 18.3333ZM8.29648 2.70832C6.8462 2.70832 5.39592 3.33332 4.36 4.37499C3.32409 5.41666 2.70254 6.87499 2.70254 8.33332C2.70254 9.89582 3.32409 11.25 4.36 12.2917C4.67078 12.6042 4.98155 12.8125 5.49951 13.125L12.0258 16.6667C12.6473 17.0833 13.2689 17.1875 13.8904 17.1875C14.8227 17.1875 15.6515 16.875 16.273 16.1458C17.4125 15 17.6197 13.3333 16.791 11.9792L13.1653 5.31249C12.8545 4.89582 12.6473 4.58332 12.3365 4.27082C11.197 3.33332 9.85035 2.70832 8.29648 2.70832Z" />
+		<path d="M13.3333 9.25925V8.24073L11.9074 7.73147C11.8055 7.52777 11.8055 7.42592 11.7037 7.22221L12.3148 5.89814L11.6018 5.18518L10.2777 5.79629C10.074 5.69443 9.97218 5.69443 9.76848 5.59258L9.25922 4.16666H8.2407L7.73144 5.59258C7.52774 5.69443 7.42589 5.69443 7.22218 5.79629L5.89811 5.18518L5.18514 5.89814L5.79626 7.22221C5.6944 7.42592 5.6944 7.52777 5.59255 7.73147L4.16663 8.24073V9.25925L5.59255 9.76851C5.6944 9.97221 5.6944 10.0741 5.79626 10.2778L5.18514 11.6018L5.89811 12.3148L7.22218 11.7037C7.42589 11.8055 7.52774 11.9074 7.73144 11.9074L8.2407 13.3333H9.25922L9.76848 11.9074C9.97218 11.8055 10.074 11.8055 10.2777 11.7037L11.6018 12.3148L12.3148 11.6018L11.7037 10.2778C11.8055 10.0741 11.9074 9.97221 11.9074 9.76851L13.3333 9.25925ZM8.74996 10.2778C7.93514 10.2778 7.22218 9.56481 7.22218 8.74999C7.22218 7.93518 7.93514 7.22221 8.74996 7.22221C9.56477 7.22221 10.2777 7.93518 10.2777 8.74999C10.2777 9.56481 9.56477 10.2778 8.74996 10.2778Z" />
+	</svg>
+);

package/src/components/ds-icon/custom-icons/special-book.tsx

@@ -0,0 +1,25 @@
+import { useId, type FC, type SVGProps } from 'react';
+
+/**
+ * Special Book icon
+ * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=8939:1542
+ */
+export const SpecialBook: FC<SVGProps<SVGSVGElement>> = (props) => {
+	const clipId = useId();
+
+	return (
+		<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+			<g clipPath={`url(#${clipId})`}>
+				<path
+					d="M6.94449 1.66666L3.27782 2.38608V3.47721H0.833374V16.6667H19.1667V3.47721H16.7223V2.38608L13.0556 1.66666L10 2.26618L6.94449 1.66666ZM6.94449 2.88968L9.38893 3.3669V12.9376L6.94449 12.458L4.50004 12.9376V3.36929L6.94449 2.88968ZM13.0556 2.88968L15.5 3.3669V12.9376L13.0556 12.458L10.6112 12.9376V3.36929L13.0556 2.88968ZM2.0556 4.67625H3.27782V14.4005L6.94449 13.681L9.38893 14.1607V15.4676H2.0556V4.67625ZM16.7223 4.67625H17.9445V15.4676H10.6112V14.1607L13.0556 13.681L16.7223 14.4005V4.67625Z"
+					fill="currentColor"
+				/>
+			</g>
+			<defs>
+				<clipPath id={clipId}>
+					<rect width="20" height="20" rx="2" fill="white" />
+				</clipPath>
+			</defs>
+		</svg>
+	);
+};