@drivenets/design-system 0.3.0 → 0.5.0

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

@@ -0,0 +1,16 @@
+import type { FC, SVGProps } from 'react';
+
+/**
+ * Special Version Control icon
+ * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3589
+ */
+export const SpecialVersionControl: FC<SVGProps<SVGSVGElement>> = (props) => (
+	<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M16.5089 2.53585C16.8726 2.4635 17.2503 2.50038 17.5929 2.6423C17.9354 2.78422 18.2277 3.02542 18.4337 3.3337C18.6396 3.64193 18.7501 4.00404 18.7501 4.37472C18.7501 4.872 18.5519 5.34926 18.2003 5.70089C18.001 5.90007 17.7607 6.04702 17.5001 6.13937V9.99972C17.5001 10.1655 17.4337 10.3249 17.3165 10.4421C17.1994 10.5591 17.0407 10.6247 16.8751 10.6247H10.6251V13.8581C10.6561 13.8691 10.6874 13.8797 10.7179 13.8923C11.0604 14.0342 11.3527 14.2754 11.5587 14.5837C11.7646 14.8919 11.8751 15.254 11.8751 15.6247C11.8751 16.122 11.6769 16.5993 11.3253 16.9509C10.9737 17.3023 10.4972 17.4997 10.0001 17.4997C9.62929 17.4997 9.26645 17.3903 8.95812 17.1843C8.64977 16.9783 8.4096 16.6851 8.26769 16.3425C8.1258 16 8.08896 15.6231 8.16124 15.2595C8.23356 14.8959 8.41186 14.5617 8.67394 14.2995C8.87251 14.101 9.11246 13.95 9.37511 13.8571V10.6247H3.75011V13.8581C3.78106 13.8691 3.81244 13.8797 3.84288 13.8923C4.1854 14.0342 4.47772 14.2754 4.6837 14.5837C4.8896 14.8919 5.00006 15.254 5.00011 15.6247C5.00011 16.122 4.80193 16.5993 4.4503 16.9509C4.09874 17.3023 3.6222 17.4997 3.12511 17.4997C2.75429 17.4997 2.39145 17.3903 2.08312 17.1843C1.77477 16.9783 1.5346 16.6851 1.39269 16.3425C1.2508 16 1.21396 15.6231 1.28624 15.2595C1.35856 14.8959 1.53686 14.5617 1.79894 14.2995C1.99751 14.101 2.23746 13.95 2.50011 13.8571V6.14132C2.35396 6.08962 2.21338 6.02132 2.08312 5.93429C1.77477 5.72826 1.5346 5.4351 1.39269 5.09249C1.2508 4.74996 1.21396 4.37312 1.28624 4.00948C1.35856 3.6459 1.53686 3.3117 1.79894 3.04952C2.06111 2.78735 2.39526 2.60822 2.7589 2.53585C3.12261 2.4635 3.50027 2.50038 3.84288 2.6423C4.1854 2.78422 4.47772 3.02542 4.6837 3.3337C4.8896 3.64193 5.00006 4.00404 5.00011 4.37472C5.00011 4.872 4.80193 5.34926 4.4503 5.70089C4.25104 5.90007 4.01071 6.04702 3.75011 6.13937V9.37472H9.37511V6.14132C9.22896 6.08962 9.08838 6.02132 8.95812 5.93429C8.64977 5.72826 8.4096 5.4351 8.26769 5.09249C8.1258 4.74996 8.08896 4.37312 8.16124 4.00948C8.23356 3.6459 8.41186 3.3117 8.67394 3.04952C8.93611 2.78735 9.27026 2.60822 9.6339 2.53585C9.99761 2.4635 10.3753 2.50038 10.7179 2.6423C11.0604 2.78422 11.3527 3.02542 11.5587 3.3337C11.7646 3.64193 11.8751 4.00404 11.8751 4.37472C11.8751 4.872 11.6769 5.34926 11.3253 5.70089C11.126 5.90007 10.8857 6.04702 10.6251 6.13937V9.37472H16.2501V6.14132C16.104 6.08962 15.9634 6.02132 15.8331 5.93429C15.5248 5.72826 15.2846 5.4351 15.1427 5.09249C15.0008 4.74996 14.964 4.37312 15.0362 4.00948C15.1086 3.6459 15.2869 3.3117 15.5489 3.04952C15.8111 2.78735 16.1453 2.60822 16.5089 2.53585ZM17.1876 13.1247C17.6019 13.1248 17.9991 13.2898 18.2921 13.5827C18.5851 13.8757 18.75 14.2729 18.7501 14.6872C18.7501 15.1016 18.5851 15.4997 18.2921 15.7927C18.2289 15.8559 18.1591 15.9107 18.087 15.9616L18.5626 16.4372C18.6483 16.5246 18.7062 16.6355 18.7296 16.7556C18.753 16.8756 18.741 16.9999 18.6944 17.113C18.6479 17.2261 18.569 17.3235 18.4679 17.3923C18.3668 17.4611 18.2474 17.498 18.1251 17.4997C18.0429 17.5002 17.961 17.4849 17.8849 17.4538C17.8087 17.4227 17.7392 17.377 17.6808 17.3191L16.6114 16.2497H16.2501V16.8747C16.2501 17.0405 16.1837 17.1999 16.0665 17.3171C15.9494 17.4341 15.7907 17.4997 15.6251 17.4997C15.4593 17.4997 15.2999 17.4343 15.1827 17.3171C15.0655 17.1999 15.0001 17.0405 15.0001 16.8747V13.7497C15.0002 13.5842 15.0657 13.4254 15.1827 13.3083C15.2999 13.1911 15.4593 13.1247 15.6251 13.1247H17.1876ZM3.12511 14.9997C3.0015 14.9997 2.88023 15.0365 2.77745 15.1052C2.67486 15.1738 2.59527 15.2715 2.54796 15.3855C2.50067 15.4996 2.48775 15.6256 2.51183 15.7468C2.53594 15.868 2.59534 15.9797 2.68273 16.0671C2.77013 16.1545 2.8818 16.2139 3.00304 16.238C3.12426 16.2621 3.25017 16.2501 3.36437 16.2028C3.47851 16.1555 3.57598 16.0751 3.64464 15.9724C3.71332 15.8696 3.75011 15.7483 3.75011 15.6247C3.75004 15.459 3.68366 15.3005 3.56651 15.1833C3.44935 15.0662 3.29079 14.9998 3.12511 14.9997ZM10.0001 14.9997C9.8765 14.9997 9.75523 15.0365 9.65245 15.1052C9.54986 15.1738 9.47027 15.2715 9.42296 15.3855C9.37567 15.4996 9.36275 15.6256 9.38683 15.7468C9.41094 15.868 9.47034 15.9797 9.55773 16.0671C9.64513 16.1545 9.7568 16.2139 9.87804 16.238C9.99926 16.2621 10.1252 16.2501 10.2394 16.2028C10.3535 16.1555 10.451 16.0751 10.5196 15.9724C10.5883 15.8696 10.6251 15.7483 10.6251 15.6247C10.625 15.459 10.5587 15.3005 10.4415 15.1833C10.3243 15.0662 10.1658 14.9998 10.0001 14.9997ZM16.2501 14.9997H17.1876C17.2703 14.9997 17.3498 14.9673 17.4083 14.9089C17.4669 14.8503 17.5001 14.7701 17.5001 14.6872C17.5 14.6044 17.4669 14.5251 17.4083 14.4665C17.3498 14.408 17.2704 14.3748 17.1876 14.3747H16.2501V14.9997ZM3.12511 3.74972C3.0015 3.74972 2.88023 3.78651 2.77745 3.85519C2.67486 3.92377 2.59527 4.02149 2.54796 4.13546C2.50067 4.24962 2.48775 4.37559 2.51183 4.49679C2.53594 4.61801 2.59534 4.7297 2.68273 4.8171C2.77013 4.90451 2.8818 4.96388 3.00304 4.988C3.12426 5.0121 3.25017 5.00014 3.36437 4.95284C3.47851 4.90555 3.57598 4.82509 3.64464 4.72237C3.71332 4.61959 3.75011 4.49833 3.75011 4.37472C3.75004 4.20905 3.68366 4.05046 3.56651 3.93331C3.44935 3.81617 3.29079 3.74976 3.12511 3.74972ZM10.0001 3.74972C9.8765 3.74972 9.75523 3.78651 9.65245 3.85519C9.54986 3.92377 9.47027 4.02149 9.42296 4.13546C9.37567 4.24962 9.36275 4.37559 9.38683 4.49679C9.41094 4.61801 9.47034 4.7297 9.55773 4.8171C9.64513 4.90451 9.7568 4.96388 9.87804 4.988C9.99926 5.0121 10.1252 5.00014 10.2394 4.95284C10.3535 4.90555 10.451 4.82509 10.5196 4.72237C10.5883 4.61959 10.6251 4.49833 10.6251 4.37472C10.625 4.20905 10.5587 4.05046 10.4415 3.93331C10.3243 3.81617 10.1658 3.74976 10.0001 3.74972ZM16.8751 3.74972C16.7515 3.74972 16.6302 3.78651 16.5275 3.85519C16.4249 3.92377 16.3453 4.02149 16.298 4.13546C16.2507 4.24962 16.2377 4.37559 16.2618 4.49679C16.2859 4.61801 16.3453 4.7297 16.4327 4.8171C16.5201 4.90451 16.6318 4.96388 16.753 4.988C16.8743 5.0121 17.0002 5.00014 17.1144 4.95284C17.2285 4.90555 17.326 4.82509 17.3946 4.72237C17.4633 4.61959 17.5001 4.49833 17.5001 4.37472C17.5 4.20905 17.4337 4.05046 17.3165 3.93331C17.1993 3.81617 17.0408 3.74976 16.8751 3.74972Z"
+			fill="currentColor"
+		/>
+	</svg>
+);

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

@@ -0,0 +1,14 @@
+import type { FC, SVGProps } from 'react';
+
+/**
+ * Special Webhook icon
+ * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=6873:11757
+ */
+export const SpecialWebhook: FC<SVGProps<SVGSVGElement>> = (props) => (
+	<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+		<path
+			d="M10.9375 6.71108C13.8862 5.61423 13.1563 1.29453 10.0001 1.23785C6.84415 1.29214 6.11463 5.61707 9.0626 6.71108V14.0682C8.90559 17.8039 3.59515 17.8051 3.43765 14.0682C3.43766 14.0682 3.43766 13.1294 3.43766 13.1294C3.43766 13.1294 4.37515 13.1294 4.37515 13.1294C4.61507 13.1386 4.77862 12.8387 4.63453 12.6443L2.13456 8.88912C1.97883 8.63034 1.5522 8.75972 1.56269 9.06124C1.56268 9.06123 1.56268 14.0682 1.56268 14.0682C1.81991 20.294 10.68 20.2949 10.9376 14.0682C10.9376 14.0682 10.9376 6.71108 10.9375 6.71108ZM10.0001 4.99307C8.76454 4.95902 8.76429 3.14967 10 3.11546C11.2356 3.14948 11.2359 4.95883 10.0001 4.99307ZM18.4375 8.72952C18.4375 8.72952 18.4375 13.7365 18.4375 13.7364C18.4506 17.8211 13.4924 19.95 10.5594 17.1694C10.9595 16.6186 11.2532 15.9865 11.4157 15.3042C12.9381 17.5856 16.5512 16.5186 16.5625 13.7365V12.7977H15.625C15.3844 12.807 15.2219 12.5066 15.3656 12.3126L17.8656 8.55741C17.9406 8.4416 18.0844 8.38841 18.2156 8.4291C18.3469 8.46978 18.4375 8.59182 18.4375 8.72952Z"
+			fill="currentColor"
+		/>
+	</svg>
+);

package/src/components/ds-icon/custom-icons/special-yang-version-control.tsx

@@ -0,0 +1,14 @@
+import type { FC, SVGProps } from 'react';
+
+/**
+ * Special Yang Version Control icon
+ * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp?node-id=4863:3682
+ */
+export const SpecialYangVersionControl: FC<SVGProps<SVGSVGElement>> = (props) => (
+	<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+		<path
+			d="M3.74727 8.0054C4.32145 8.0054 4.84179 8.22824 5.2186 8.58947C5.50324 8.86313 5.70632 9.21498 5.78788 9.60905H7.95981C8.04137 9.21498 8.24445 8.86313 8.5291 8.58947C8.9059 8.22902 9.42625 8.0054 10.0004 8.0054C10.5746 8.0054 11.095 8.22824 11.4718 8.58947C11.7564 8.86313 11.9595 9.21498 12.041 9.60905H14.213C14.2945 9.21498 14.4976 8.86313 14.7823 8.58947C15.0669 8.31659 15.4347 8.1219 15.8458 8.04371V5.61674C15.4347 5.53855 15.0677 5.34464 14.7823 5.07098C14.4968 4.79811 14.2945 4.44548 14.213 4.05141H12.041C11.9595 4.44548 11.7564 4.79733 11.4718 5.07098C11.0958 5.43143 10.5754 5.65505 10.0004 5.65505C9.42625 5.65505 8.9059 5.43143 8.5291 5.07098C8.24445 4.79811 8.04137 4.44548 7.95981 4.05141H5.78788C5.70632 4.44548 5.50324 4.79811 5.2186 5.07098C4.84179 5.43143 4.32226 5.65505 3.74727 5.65505C3.17309 5.65505 2.65274 5.43143 2.27594 5.07098C1.89995 4.71054 1.66669 4.21169 1.66669 3.66046C1.66669 3.11002 1.89995 2.61117 2.27594 2.25072C2.65192 1.89028 3.17227 1.66666 3.74727 1.66666C4.32145 1.66666 4.84179 1.89028 5.2186 2.25072C5.50324 2.5236 5.70632 2.87623 5.78788 3.2703H7.95981C8.04137 2.87623 8.24445 2.52438 8.5291 2.25072C8.9059 1.89028 9.42625 1.66666 10.0004 1.66666C10.5746 1.66666 11.095 1.89028 11.4718 2.25072C11.7564 2.5236 11.9595 2.87623 12.041 3.2703H14.213C14.2945 2.87623 14.4976 2.52438 14.7823 2.25072C15.1582 1.89028 15.6786 1.66666 16.2528 1.66666C16.827 1.66666 17.3473 1.89028 17.7241 2.25072C18.1001 2.61117 18.3334 3.11002 18.3334 3.66046C18.3334 4.21091 18.1001 4.70975 17.7241 5.07098C17.4386 5.34464 17.0716 5.53855 16.6606 5.61674V8.04371C17.0716 8.1219 17.4386 8.31581 17.7241 8.58947C18.1001 8.9507 18.3334 9.44876 18.3334 9.99999C18.3334 10.5504 18.1001 11.0493 17.7241 11.4105C17.3481 11.771 16.8278 11.9946 16.2528 11.9946C15.6786 11.9946 15.1582 11.7717 14.7823 11.4105C14.4968 11.1369 14.2945 10.785 14.213 10.3909H12.041C11.9595 10.785 11.7564 11.1369 11.4718 11.4105C11.095 11.771 10.5754 11.9946 10.0004 11.9946C9.42625 11.9946 8.9059 11.7717 8.5291 11.4105C8.24445 11.1369 8.04137 10.785 7.95981 10.3909H5.78788C5.70632 10.785 5.50324 11.1369 5.2186 11.4105C4.93314 11.6834 4.56612 11.8781 4.15506 11.9563V14.3832C4.56612 14.4614 4.93314 14.6553 5.2186 14.929C5.50324 15.2019 5.70632 15.5545 5.78788 15.9486H7.95981C8.04137 15.5545 8.24445 15.2019 8.5291 14.929C8.9059 14.5685 9.42543 14.3449 10.0004 14.3449C10.5746 14.3449 11.095 14.5685 11.4718 14.929C11.7564 15.2019 11.9595 15.5545 12.041 15.9486H14.213C14.2945 15.5545 14.4976 15.2019 14.7823 14.929C15.1582 14.5685 15.6786 14.3449 16.2528 14.3449C16.827 14.3449 17.3473 14.5685 17.7241 14.929C18.1001 15.2894 18.3334 15.7883 18.3334 16.3387C18.3334 16.8892 18.1001 17.388 17.7241 17.7493C17.3481 18.1097 16.8278 18.3333 16.2528 18.3333C15.6786 18.3333 15.1582 18.1097 14.7823 17.7493C14.4968 17.4764 14.2945 17.1237 14.213 16.7297H12.041C11.9595 17.1237 11.7564 17.4756 11.4718 17.7493C11.0958 18.1097 10.5754 18.3333 10.0004 18.3333C9.42625 18.3333 8.9059 18.1097 8.5291 17.7493C8.24445 17.4764 8.04137 17.1237 7.95981 16.7297H5.78788C5.70632 17.1237 5.50324 17.4764 5.2186 17.7493C4.84179 18.1097 4.32226 18.3333 3.74727 18.3333C3.17309 18.3333 2.65274 18.1097 2.27594 17.7493C1.89995 17.3888 1.66669 16.89 1.66669 16.3387C1.66669 15.7883 1.89995 15.2894 2.27594 14.929C2.56139 14.6553 2.92841 14.4614 3.33947 14.3832V11.9563C2.92841 11.8781 2.56139 11.6834 2.27594 11.4105C1.89995 11.0493 1.66669 10.5512 1.66669 9.99999C1.66669 9.44954 1.89995 8.9507 2.27594 8.58947C2.65192 8.22902 3.17227 8.0054 3.74727 8.0054ZM4.64197 9.14148C4.41279 8.92255 4.09634 8.7865 3.74727 8.7865C3.39738 8.7865 3.08093 8.92255 2.85256 9.14148C2.62338 9.36119 2.48228 9.66456 2.48228 9.99921C2.48228 10.3339 2.62419 10.638 2.85256 10.8569C3.08174 11.0759 3.39819 11.2119 3.74727 11.2119C4.09634 11.2119 4.41279 11.0759 4.64197 10.8569C4.87116 10.6372 5.01225 10.3339 5.01225 9.99921C5.01225 9.66456 4.87034 9.36041 4.64197 9.14148ZM17.1467 2.80274C16.9175 2.58303 16.601 2.44776 16.252 2.44776C15.9029 2.44776 15.5864 2.58381 15.3573 2.80274C15.1281 3.02245 14.987 3.32582 14.987 3.66046C14.987 3.99589 15.1289 4.29926 15.3573 4.51819C15.5864 4.7379 15.9029 4.87317 16.252 4.87317C16.6018 4.87317 16.9183 4.73712 17.1467 4.51819C17.3758 4.29848 17.5169 3.99511 17.5169 3.66046C17.5169 3.32582 17.375 3.02245 17.1467 2.80274ZM10.8943 2.80274C10.6651 2.58303 10.3487 2.44776 9.99961 2.44776C9.65054 2.44776 9.33409 2.58381 9.10491 2.80274C8.87572 3.02245 8.73463 3.32582 8.73463 3.66046C8.73463 3.99589 8.87654 4.29926 9.10491 4.51819C9.33327 4.7379 9.65054 4.87317 9.99961 4.87317C10.3487 4.87317 10.666 4.73712 10.8943 4.51819C11.1227 4.29848 11.2646 3.99511 11.2646 3.66046C11.2646 3.32582 11.1227 3.02245 10.8943 2.80274ZM4.64197 2.80274C4.41279 2.58303 4.09634 2.44776 3.74727 2.44776C3.39738 2.44776 3.08093 2.58381 2.85256 2.80274C2.62338 3.02245 2.48228 3.32582 2.48228 3.66046C2.48228 3.99589 2.62419 4.29926 2.85256 4.51819C3.08174 4.7379 3.39819 4.87317 3.74727 4.87317C4.09634 4.87317 4.41279 4.73712 4.64197 4.51819C4.87116 4.29848 5.01225 3.99511 5.01225 3.66046C5.01225 3.32582 4.87034 3.02245 4.64197 2.80274ZM17.1467 15.4802C16.9175 15.2605 16.601 15.1252 16.252 15.1252C15.9029 15.1252 15.5864 15.2613 15.3573 15.4802C15.1281 15.6999 14.987 16.0033 14.987 16.338C14.987 16.6734 15.1289 16.9768 15.3573 17.1957C15.5864 17.4154 15.9029 17.5507 16.252 17.5507C16.6018 17.5507 16.9183 17.4146 17.1467 17.1957C17.3758 16.976 17.5169 16.6726 17.5169 16.338C17.5169 16.0033 17.375 15.6999 17.1467 15.4802ZM10.8943 15.4802C10.6651 15.2605 10.3487 15.1252 9.99961 15.1252C9.65054 15.1252 9.33327 15.2613 9.10491 15.4802C8.87572 15.6999 8.73463 16.0033 8.73463 16.338C8.73463 16.6734 8.87654 16.9768 9.10491 17.1957C9.33409 17.4154 9.65054 17.5507 9.99961 17.5507C10.3487 17.5507 10.666 17.4146 10.8943 17.1957C11.1227 16.976 11.2646 16.6726 11.2646 16.338C11.2646 16.0033 11.1227 15.6999 10.8943 15.4802ZM4.64197 15.4802C4.41279 15.2605 4.09634 15.1252 3.74727 15.1252C3.39738 15.1252 3.08093 15.2613 2.85256 15.4802C2.62338 15.6999 2.48228 16.0033 2.48228 16.338C2.48228 16.6734 2.62419 16.9768 2.85256 17.1957C3.08174 17.4154 3.39819 17.5507 3.74727 17.5507C4.09634 17.5507 4.41279 17.4146 4.64197 17.1957C4.87116 16.976 5.01225 16.6726 5.01225 16.338C5.01225 16.0033 4.87034 15.6999 4.64197 15.4802ZM17.1467 9.14148C16.9175 8.92177 16.601 8.78572 16.252 8.78572C15.9029 8.78572 15.5864 8.92177 15.3573 9.1407C15.1281 9.36041 14.987 9.66378 14.987 9.99843C14.987 10.3331 15.1289 10.6372 15.3573 10.8562C15.5864 11.0751 15.9029 11.2111 16.252 11.2111C16.6018 11.2111 16.9183 11.0751 17.1467 10.8562C17.3758 10.6364 17.5169 10.3331 17.5169 9.99843C17.5169 9.66378 17.375 9.35963 17.1467 9.1407V9.14148ZM10.8943 9.14148C10.6651 8.92177 10.3487 8.78572 9.99961 8.78572C9.65054 8.78572 9.33409 8.92177 9.10491 9.1407C8.87572 9.36041 8.73463 9.66378 8.73463 9.99843C8.73463 10.3331 8.87654 10.6372 9.10491 10.8562C9.33409 11.0751 9.65054 11.2111 9.99961 11.2111C10.3487 11.2111 10.666 11.0751 10.8943 10.8554C11.1227 10.6364 11.2646 10.3323 11.2646 9.99764C11.2646 9.663 11.1227 9.35884 10.8943 9.13992V9.14148Z"
+			fill="currentColor"
+		/>
+	</svg>
+);

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

@@ -1,22 +1,32 @@
 .icon {
 	&.extra-large {
 		font-size: var(--icon-width-extra-large);
+		width: var(--icon-width-extra-large);
+		height: var(--icon-width-extra-large);
 	}
 
 	&.large {
 		font-size: var(--icon-width-large);
+		width: var(--icon-width-large);
+		height: var(--icon-width-large);
 	}
 
 	&.medium {
 		font-size: var(--icon-width-medium);
+		width: var(--icon-width-medium);
+		height: var(--icon-width-medium);
 	}
 
 	&.small {
 		font-size: var(--icon-width-small);
+		width: var(--icon-width-small);
+		height: var(--icon-width-small);
 	}
 
 	&.tiny {
 		font-size: var(--icon-width-tiny);
+		width: var(--icon-width-tiny);
+		height: var(--icon-width-tiny);
 	}
 }
 

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

@@ -1,12 +1,12 @@
-import type React from 'react';
 import classNames from 'classnames';
 import styles from './ds-icon.module.scss';
 import type { DsIconProps } from './ds-icon.types';
+import { customIcons, isCustomIcon } from './custom-icons';
 
 /**
- * Design system Icon component that renders Google Material Icons or inline SVGs
+ * Design system Icon component that renders Google Material Icons, custom SVG icons, or inline SVGs
  */
-const DsIcon: React.FC<DsIconProps> = ({
+const DsIcon = ({
 	icon,
 	size = 'medium',
 	variant = 'outlined',
@@ -14,15 +14,24 @@ const DsIcon: React.FC<DsIconProps> = ({
 	className = '',
 	style = {},
 	...rest
-}) => {
-	const variantClass = `material-symbols-${variant}`;
+}: DsIconProps) => {
 	const iconClass = classNames(styles.icon, styles[size], { [styles.filled]: filled }, className);
 
+	// 1. SVG component passed directly
 	if (typeof icon === 'function') {
 		const SvgComponent = icon;
 		return <SvgComponent className={iconClass} style={style} {...rest} />;
 	}
 
+	// 2. Custom registered icon from custom-icons registry
+	if (isCustomIcon(icon)) {
+		const SvgComponent = customIcons[icon];
+		return <SvgComponent className={iconClass} style={style} {...rest} />;
+	}
+
+	// 3. Material Icon (font-based)
+	const variantClass = `material-symbols-${variant}`;
+
 	return (
 		<span className={classNames(iconClass, variantClass)} style={style} {...rest}>
 			{icon}

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

@@ -1,16 +1,19 @@
-import type React from 'react';
+import type { MouseEvent, CSSProperties, FunctionComponent, SVGProps } from 'react';
 import type { IconPrefix, materialIcons } from './material-icons';
+import type { CustomIconName } from './custom-icons';
 
 export const iconSizes = ['tiny', 'small', 'medium', 'large', 'extra-large'] as const;
 export type IconSize = (typeof iconSizes)[number];
 export const iconVariants = ['outlined', 'rounded'] as const;
 export type IconVariant = (typeof iconVariants)[number];
 
-export type IconName = {
+export type MaterialIconName = {
 	[K in keyof typeof materialIcons]: K extends `${IconPrefix}::${infer Name}` ? Name : never;
 }[keyof typeof materialIcons];
 
-export type IconType = IconName | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+export type IconName = MaterialIconName | CustomIconName;
+
+export type IconType = IconName | FunctionComponent<SVGProps<SVGSVGElement>>;
 
 export interface DsIconProps {
 	/**
@@ -44,10 +47,10 @@ export interface DsIconProps {
 	/**
 	 * Additional styles to apply to the icon
 	 */
-	style?: React.CSSProperties;
+	style?: CSSProperties;
 
 	/**
 	 * Optional click handler
 	 */
-	onClick?: (event: React.MouseEvent<HTMLSpanElement | SVGSVGElement>) => void;
+	onClick?: (event: MouseEvent<HTMLSpanElement | SVGSVGElement>) => void;
 }

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

@@ -1,2 +1,3 @@
 export { default as DsIcon } from './ds-icon';
 export * from './ds-icon.types';
+export { customIcons, isCustomIcon, type CustomIconName, type CustomIconComponent } from './custom-icons';

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

@@ -1,20 +1,91 @@
-@use '../../styles/shared/modal' as shared;
-
-$pad-x: 24px;
-$pad-y: 16px;
+$pad-x: var(--spacing-lg);
+$pad-y: var(--spacing-standard);
 $max-width: 90vw;
-$max-height: 90vh;
+$border-size: 1px;
+$border: $border-size solid var(--color-border-secondary);
 
 .overlay {
-	@include shared.overlay-base;
+	position: fixed;
+	inset: 0;
+	background: var(--color-background-brand);
+	opacity: 0.4;
+	z-index: 1199;
+
+	&[data-state='open'] {
+		animation: fade-in-overlay 0.2s ease-in-out both;
+	}
+
+	&[data-state='closed'] {
+		animation: fade-out-overlay 0.2s 0.1s ease-in-out both;
+	}
+}
+
+@keyframes fade-in-overlay {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 0.4;
+	}
+}
+
+@keyframes fade-out-overlay {
+	0% {
+		opacity: 0.4;
+	}
+
+	100% {
+		opacity: 0;
+	}
 }
 
 .modal {
-	@include shared.modal-base;
+	position: fixed;
+	inset: 50% auto auto 50%;
+	background: var(--color-background);
+	border-radius: 4px;
+	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
+	z-index: 1200;
+	overflow: hidden;
+	inline-size: min(var(--col-span-6), $max-width);
+
+	&[data-state='open'] {
+		animation: scale-in-modal 0.2s 0.1s ease-in-out both;
+	}
+
+	&[data-state='closed'] {
+		animation: scale-out-modal 0.2s ease-in-out both;
+	}
+}
+
+@keyframes scale-in-modal {
+	0% {
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0.9);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+}
+
+@keyframes scale-out-modal {
+	0% {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+
+	100% {
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0.9);
+	}
 }
 
 .content {
-	@include shared.content-base;
+	display: flex;
+	flex-direction: column;
 	height: 100%;
 }
 
@@ -25,76 +96,68 @@ $max-height: 90vh;
 }
 
 .header {
-	@include shared.header-base;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+	position: relative;
+	background: inherit;
+	flex-shrink: 0;
+
+	&::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: $pad-x;
+		right: $pad-x;
+		height: $border-size;
+		background: var(--color-border-secondary);
+	}
 }
 
 .footer {
-	@include shared.footer-base;
 	display: flex;
+	background: inherit;
+	flex-shrink: 0;
 }
 
 .title {
-	@include shared.title-base;
+	color: var(--color-font-main);
+	margin: 0;
+	flex: 1;
 }
 
 .body {
-	@include shared.body-base;
+	flex: 1;
+	overflow-y: auto;
+	overflow-x: hidden;
+	min-height: 0;
 }
 
 .actions {
-	@include shared.actions-base;
+	display: flex;
+	gap: var(--spacing-xs);
+	justify-content: flex-end;
 	margin-left: auto;
 }
 
-// width classes derived from DS grid
-.modal {
-	inline-size: min(var(--col-span-6), $max-width);
-}
-
-.modal.cols-1 {
-	inline-size: min(var(--col-span-1), $max-width);
-}
-
-.modal.cols-2 {
-	inline-size: min(var(--col-span-2), $max-width);
-}
-
-.modal.cols-3 {
-	inline-size: min(var(--col-span-3), $max-width);
-}
-
-.modal.cols-4 {
-	inline-size: min(var(--col-span-4), $max-width);
-}
-
-.modal.cols-5 {
-	inline-size: min(var(--col-span-5), $max-width);
-}
-
-.modal.cols-6 {
-	inline-size: min(var(--col-span-6), $max-width);
-}
-
-.modal.cols-7 {
-	inline-size: min(var(--col-span-7), $max-width);
-}
+// Dividers mode: full-width borders on header and footer
+.content[data-dividers] {
+	.header {
+		border-bottom: $border;
 
-.modal.cols-8 {
-	inline-size: min(var(--col-span-8), $max-width);
-}
-
-.modal.cols-9 {
-	inline-size: min(var(--col-span-9), $max-width);
-}
-
-.modal.cols-10 {
-	inline-size: min(var(--col-span-10), $max-width);
-}
+		&::after {
+			display: none;
+		}
+	}
 
-.modal.cols-11 {
-	inline-size: min(var(--col-span-11), $max-width);
+	.footer {
+		border-top: $border;
+	}
 }
 
-.modal.cols-12 {
-	inline-size: min(var(--col-span-12), $max-width);
+// Width classes derived from DS grid
+@for $i from 1 through 12 {
+	.modal.cols-#{$i} {
+		inline-size: min(var(--col-span-#{$i}), $max-width);
+	}
 }

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

@@ -14,14 +14,15 @@ import { DsTypography } from '../ds-typography';
  */
 const DsModal = ({
 	open,
-	onOpenChange,
 	columns = 6,
+	dividers = false,
 	style,
 	className,
 	modal = true,
 	closeOnEscape,
 	closeOnInteractOutside = false,
 	children,
+	onOpenChange,
 }: DsModalProps) => {
 	const handleOpenChange = (details: { open: boolean }) => {
 		onOpenChange(details.open);
@@ -48,7 +49,9 @@ const DsModal = ({
 							styles[`cols-${columns}`],
 						)}
 					>
-						<div className={classNames(styles.content)}>{children}</div>
+						<div className={styles.content} data-dividers={dividers || undefined}>
+							{children}
+						</div>
 					</Dialog.Content>
 				</Dialog.Positioner>
 			</Portal>

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

@@ -17,21 +17,24 @@ export interface DsModalProps extends Pick<
 	 * Whether the modal is open
 	 */
 	open: boolean;
-	/**
-	 * Callback when modal open state changes
-	 * @param open - whether the modal is open
-	 */
-	onOpenChange: (open: boolean) => void;
 
 	/**
 	 * Number of grid columns for modal width
 	 * @default 6
 	 */
 	columns?: DsModalColumns;
+
+	/**
+	 * Show full-width dividers between header, body, and footer sections
+	 * @default false
+	 */
+	dividers?: boolean;
+
 	/**
 	 * Optional inline styles to apply to the component
 	 */
 	style?: CSSProperties;
+
 	/**
 	 * Additional CSS class name
 	 */
@@ -41,4 +44,10 @@ export interface DsModalProps extends Pick<
 	 * Modal body content
 	 */
 	children: ReactNode;
+
+	/**
+	 * Callback when modal open state changes
+	 * @param open - whether the modal is open
+	 */
+	onOpenChange: (open: boolean) => void;
 }

package/src/components/ds-table/components/ds-table-cell/ds-table-cell.tsx

@@ -76,6 +76,7 @@ export const DsTableCell = <TData, TValue>({
 											key={i}
 											value={label}
 											disabled={isDisabled}
+											className={action.className}
 											onClick={(e) => e.stopPropagation()}
 											onSelect={() => action.onClick(row.original)}
 										>

package/src/components/ds-table/components/ds-table-cell/ds-table-cell.types.ts

@@ -39,6 +39,11 @@ export type SecondaryRowAction<TData> = Omit<RowAction<TData>, 'icon'> & {
 	 * Optional icon to be displayed for the action
 	 */
 	icon?: IconType;
+
+	/**
+	 * Optional className to apply custom styling to the action item
+	 */
+	className?: string;
 };
 
 /**

package/src/components/ds-table/filters/hooks/index.ts

@@ -1,2 +1,2 @@
 export { useTableFilters } from './use-table-filters';
-export type { UseTableFiltersResult } from './use-table-filters';
+export type { UseTableFiltersOptions, UseTableFiltersResult } from './use-table-filters';