@crystallize/design-system 1.24.46 → 2.0.1

package/dist/{standalone-AR2ENVE7.mjs → standalone-COC5HE24.mjs}

@@ -2,9 +2,9 @@ import {
   __commonJS
 } from "./chunk-NIH5ZMPE.mjs";
 
-// ../../node_modules/.pnpm/prettier@2.8.4/node_modules/prettier/standalone.js
+// ../../node_modules/.pnpm/prettier@2.8.8/node_modules/prettier/standalone.js
 var require_standalone = __commonJS({
-  "../../node_modules/.pnpm/prettier@2.8.4/node_modules/prettier/standalone.js"(exports, module) {
+  "../../node_modules/.pnpm/prettier@2.8.8/node_modules/prettier/standalone.js"(exports, module) {
     (function(e) {
       if (typeof exports == "object" && typeof module == "object")
         module.exports = e();
@@ -853,7 +853,7 @@ var require_standalone = __commonJS({
         }, bD = (e, r, t) => (t = e != null ? FD(SD(e)) : {}, Pa(r || !e || !e.__esModule ? _r(t, "default", { value: e, enumerable: true }) : t, e)), ft = (e) => Pa(_r({}, "__esModule", { value: true }), e), wt, ne = ht({ "<define:process>"() {
           wt = { env: {}, argv: [] };
         } }), Ia = te({ "package.json"(e, r) {
-          r.exports = { version: "2.8.4" };
+          r.exports = { version: "2.8.8" };
         } }), TD = te({ "node_modules/diff/lib/diff/base.js"(e) {
           "use strict";
           ne(), Object.defineProperty(e, "__esModule", { value: true }), e.default = r;
@@ -5277,6 +5277,8 @@ ${P}`), h ? g.reset(P) : P;
                 return $(D, T) || o.type === "SequenceExpression";
               case "Decorator": {
                 if (C === "expression") {
+                  if (f(o) && o.computed)
+                    return true;
                   let S = false, b = false, B = o;
                   for (; B; )
                     switch (B.type) {
@@ -5452,6 +5454,8 @@ ${P}`), h ? g.reset(P) : P;
                 return m.type === "TSArrayType" || m.type === "TSOptionalType" || m.type === "TSRestType" || C === "objectType" && m.type === "TSIndexedAccessType" || m.type === "TSTypeOperator" || m.type === "TSTypeAnnotation" && D.getParentNode(1).type.startsWith("TSJSDoc");
               case "TSTypeQuery":
                 return C === "objectType" && m.type === "TSIndexedAccessType" || C === "elementType" && m.type === "TSArrayType";
+              case "TypeofTypeAnnotation":
+                return C === "objectType" && (m.type === "IndexedAccessType" || m.type === "OptionalIndexedAccessType") || C === "elementType" && m.type === "ArrayTypeAnnotation";
               case "ArrayTypeAnnotation":
                 return m.type === "NullableTypeAnnotation";
               case "IntersectionTypeAnnotation":
@@ -5465,8 +5469,6 @@ ${P}`), h ? g.reset(P) : P;
               }
               case "OptionalIndexedAccessType":
                 return C === "objectType" && m.type === "IndexedAccessType";
-              case "TypeofTypeAnnotation":
-                return C === "objectType" && (m.type === "IndexedAccessType" || m.type === "OptionalIndexedAccessType");
               case "StringLiteral":
               case "NumericLiteral":
               case "Literal":
@@ -6617,7 +6619,7 @@ ${P}`), h ? g.reset(P) : P;
             return o ? d : [d, n];
           }
           function D(T, m, C) {
-            let o = T.getValue(), d = [], v = T.getParentNode();
+            let o = T.getValue(), d = [o.type === "TSTypeParameter" && o.const ? "const " : ""], v = T.getParentNode();
             return v.type === "TSMappedType" ? (v.readonly && d.push(w(v.readonly, "readonly"), " "), d.push("[", C("name")), o.constraint && d.push(" in ", C("constraint")), v.nameType && d.push(" as ", T.callParent(() => C("nameType"))), d.push("]"), d) : (o.variance && d.push(C("variance")), o.in && d.push("in "), o.out && d.push("out "), d.push(C("name")), o.bound && d.push(": ", C("bound")), o.constraint && d.push(" extends ", C("constraint")), o.default && d.push(" = ", C("default")), d);
           }
           r.exports = { printTypeParameter: D, printTypeParameters: P, getTypeParametersGroupId: I };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.24.46",
+  "version": "2.0.1",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -8,9 +8,8 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=22.19.0"
+    "node": ">=24.11.0"
   },
-  "packageManager": "pnpm@10.15.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -41,17 +40,17 @@
     "@lexical/text": "0.21.0",
     "@lexical/utils": "0.21.0",
     "@lexical/yjs": "0.21.0",
-    "@radix-ui/react-checkbox": "1.0.1",
-    "@radix-ui/react-collapsible": "1.0.0",
-    "@radix-ui/react-dialog": "1.0.5",
-    "@radix-ui/react-dropdown-menu": "2.0.6",
-    "@radix-ui/react-popover": "1.0.7",
-    "@radix-ui/react-progress": "^1.0.1",
-    "@radix-ui/react-radio-group": "1.1.0",
-    "@radix-ui/react-select": "1.1.2",
-    "@radix-ui/react-slider": "^1.1.0",
-    "@radix-ui/react-switch": "^1.0.2",
-    "@radix-ui/react-tooltip": "1.0.0",
+    "@radix-ui/react-checkbox": "1.3.3",
+    "@radix-ui/react-collapsible": "1.1.12",
+    "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-dropdown-menu": "2.1.16",
+    "@radix-ui/react-popover": "1.1.15",
+    "@radix-ui/react-progress": "1.1.8",
+    "@radix-ui/react-radio-group": "1.3.8",
+    "@radix-ui/react-select": "2.1.7",
+    "@radix-ui/react-slider": "1.3.6",
+    "@radix-ui/react-switch": "1.2.6",
+    "@radix-ui/react-tooltip": "1.2.8",
     "class-variance-authority": "^0.4.0",
     "lexical": "0.21.0",
     "sonner": "^0.6.2",
@@ -59,12 +58,11 @@
     "use-debounce": "8.0.4"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17.0 || ^18.0",
-    "react-dom": "^16.8 || ^17.0 || ^18.0"
+    "react": "^18.0 || ^19.0",
+    "react-dom": "^18.0 || ^19.0"
   },
   "devDependencies": {
     "@faker-js/faker": "7.6.0",
-    "@ianvs/prettier-plugin-sort-imports": "^3.7.1",
     "@mdx-js/react": "^2.2.1",
     "@storybook/addon-actions": "8.6.11",
     "@storybook/addon-backgrounds": "8.6.11",
@@ -82,26 +80,27 @@
     "@storybook/react": "8.6.11",
     "@storybook/react-vite": "8.6.11",
     "@storybook/theming": "8.6.11",
-    "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.1.0",
-    "@testing-library/user-event": "14.5.2",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
     "@types/prettier": "2.7.2",
-    "@types/react": "17.0.1",
-    "@types/react-dom": "17.0.1",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "4.3.4",
     "concurrently": "^7.6.0",
     "hex-rgb": "4.3.0",
+    "jsdom": "27.1.0",
     "postcss": "^8.4.21",
     "postcss-import": "^15.1.0",
-    "prettier": "2.8.4",
+    "prettier": "2.8.8",
     "storybook": "8.6.11",
     "storybook-dark-mode": "4.0.2",
     "tailwindcss": "^3.3.5",
     "tsup": "^6.5.0",
-    "typescript": "4.9.4",
-    "vite": "6.2.4",
-    "vitest": "2.1.8",
+    "typescript": "5.9.3",
+    "vite": "7.2.2",
+    "vitest": "3.2.4",
     "tsconfig": "0.0.0"
   },
   "keywords": [

package/src/action-menu/action-menu.tsx

@@ -1,4 +1,3 @@
-import type { ReactNode } from 'react';
 import { VariantProps, cva } from 'class-variance-authority';
 
 import { DropdownMenu, Container } from '../dropdown-menu';
@@ -20,7 +19,7 @@ const buttonStyles = cva('c-action-menu', {
 
 type ActionMenuProps = Omit<React.ComponentProps<typeof DropdownMenu.Root>, 'content'> &
   ButtonStylesProps & {
-    children: ReactNode;
+    children: React.ReactNode;
     container?: Container;
     tabIndex?: number;
     disabled?: boolean;

package/src/dialog/config.tsx

@@ -1,4 +1,4 @@
-import { unmountComponentAtNode, render as DOMRender } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { ConfirmDialog } from './confirm-dialog';
 import { destroyFns } from './destroyFns';
@@ -6,16 +6,12 @@ import type { ConfigUpdate, DialogFuncProps } from './types';
 
 export function confirm(config: DialogFuncProps) {
   const container = document.createDocumentFragment();
+  const root = createRoot(container);
+
   let currentConfig = { ...config, close, open: true };
   let timeoutId: NodeJS.Timeout;
 
   function close() {
-    currentConfig = {
-      ...currentConfig,
-      open: false,
-    };
-
-    render(currentConfig);
     config.afterClose?.();
     destroy();
   }
@@ -37,20 +33,20 @@ export function confirm(config: DialogFuncProps) {
       }
     }
 
-    unmountComponentAtNode(container);
+    root.unmount();
   }
 
   function render({ okText, cancelText, ...delegated }: any) {
     clearTimeout(timeoutId);
 
     timeoutId = setTimeout(() => {
-      DOMRender(<ConfirmDialog {...delegated} okText={okText} cancelText={cancelText} />, container);
+      root.render(<ConfirmDialog {...delegated} okText={okText} cancelText={cancelText} />);
     });
   }
 
   function update(configUpdate: ConfigUpdate) {
     if (typeof configUpdate === 'function') {
-      currentConfig = configUpdate(currentConfig);
+      currentConfig = { close, open: true, ...configUpdate(currentConfig) };
     } else {
       currentConfig = {
         ...currentConfig,

package/src/dialog/dialog.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode, RefAttributes } from 'react';
+import type { ReactNode, RefAttributes, JSX } from 'react';
 import { cva, cx, VariantProps } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 
@@ -29,7 +29,7 @@ type DialogContentProps = DialogContentStylesProps & {
     'onEscapeKeyDown' | 'onInteractOutside' | 'onPointerDownOutside' | 'closable' | 'type' | 'className'
   > &
   DialogPrimitive.DialogContentProps &
-  Pick<DialogPrimitive.PortalProps, 'container'>;
+  Pick<DialogPrimitive.DialogPortalProps, 'container'>;
 
 function DialogContent({ children, closable = true, type, className, container, ...delegated }: DialogContentProps) {
   const withIcon = typeof type !== 'undefined';

package/src/dropdown-menu/dropdown-menu-root.tsx

@@ -1,12 +1,11 @@
-import type { ReactNode } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
 export type Container = HTMLElement | null | undefined;
 
-export type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps &
+export type DropdownMenuRootProps = Omit<DropdownMenuPrimitive.DropdownMenuContentProps, 'content'> &
   Pick<DropdownMenuPrimitive.DropdownMenuProps, 'onOpenChange' | 'modal' | 'open'> & {
-    children: ReactNode;
-    content: ReactNode;
+    children: React.ReactNode;
+    content: React.ReactNode;
     alignContent?: 'start' | 'center' | 'end';
     disabled?: boolean;
     container?: Container;

package/src/iconography/Icon.stories.tsx

@@ -22,7 +22,6 @@ export const AllIcons: Story = {
       <div>
         <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem' }}>
           {Object.keys(Icon).map(iconName => {
-            // @ts-expect-error
             const Cmp = Icon[iconName];
             const cmpString = `<Icon.${iconName} />`;
             return (

package/src/iconography/actions.tsx

@@ -2,11 +2,7 @@ import { forwardRef, SVGProps } from 'react';
 
 import { fill, stroke } from './variables';
 
-type ActionsProps = SVGProps<SVGSVGElement>;
-
-type ActionsRef = SVGSVGElement;
-
-export const Actions = forwardRef<ActionsRef, ActionsProps>((delegated, ref) => {
+export const Actions = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path

package/src/iconography/add.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type AddProps = SVGProps<SVGSVGElement>;
-
-type AddRef = SVGSVGElement;
-
-export const Add = forwardRef<AddRef, AddProps>((delegated, ref) => {
+export const Add = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="currentColor" {...delegated}>
       <path

package/src/iconography/advance.tsx

@@ -2,11 +2,7 @@ import { forwardRef, SVGProps } from 'react';
 
 import { fill, stroke } from './variables';
 
-type AdvanceProps = SVGProps<SVGSVGElement>;
-
-type AdvanceRef = SVGSVGElement;
-
-export const Advance = forwardRef<AdvanceRef, AdvanceProps>((delegated, ref) => {
+export const Advance = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path

package/src/iconography/app.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type AppProps = SVGProps<SVGSVGElement>;
-
-type AppRef = SVGSVGElement;
-
-export const App = forwardRef<AppRef, AppProps>((delegated, ref) => {
+export const App = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="23" height="22" viewBox="0 0 23 22" fill="none" {...delegated}>
       <path

package/src/iconography/archive.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type ArchiveProps = SVGProps<SVGSVGElement>;
-
-type ArchiveRef = SVGSVGElement;
-
-export const Archive = forwardRef<ArchiveRef, ArchiveProps>((delegated, ref) => {
+export const Archive = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="currentColor" {...delegated}>
       <svg width="23" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">

package/src/iconography/arrow.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type ArrowProps = SVGProps<SVGSVGElement>;
-
-type ArrowRef = SVGSVGElement;
-
-export const Arrow = forwardRef<ArrowRef, ArrowProps>((delegated, ref) => {
+export const Arrow = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="10" height="10" viewBox="0 0 10 10" fill="currentColor" {...delegated}>
       <path d="M4.14995 9.85C4.24341 9.94161 4.36907 9.99293 4.49995 9.99293C4.63083 9.99293 4.75649 9.94161 4.84995 9.85L8.03995 6.67C8.09195 6.6248 8.13404 6.56934 8.16359 6.5071C8.19314 6.44486 8.20951 6.37719 8.21167 6.30832C8.21383 6.23946 8.20173 6.17089 8.17614 6.10693C8.15055 6.04296 8.11201 5.98497 8.06295 5.9366C8.01389 5.88823 7.95536 5.85052 7.89104 5.82584C7.82671 5.80116 7.75798 5.79003 7.68915 5.79317C7.62033 5.79631 7.55289 5.81363 7.49108 5.84406C7.42927 5.87449 7.37441 5.91737 7.32995 5.97L4.49995 8.78L1.66995 5.96C1.62475 5.908 1.56929 5.86591 1.50705 5.83636C1.44481 5.80681 1.37714 5.79044 1.30827 5.78828C1.23941 5.78612 1.17084 5.79822 1.10688 5.82381C1.04291 5.8494 0.98492 5.88794 0.936549 5.937C0.888179 5.98606 0.850469 6.04459 0.825787 6.10892C0.801105 6.17324 0.789983 6.24197 0.79312 6.3108C0.796256 6.37962 0.813582 6.44706 0.844012 6.50887C0.874442 6.57068 0.917318 6.62554 0.96995 6.67L4.14995 9.85ZM4.49995 -2.18557e-08C4.22381 -3.39261e-08 3.99995 0.223858 3.99995 0.5L3.99995 9.5L4.99995 9.5L4.99995 0.5C4.99995 0.223857 4.77609 -9.78527e-09 4.49995 -2.18557e-08Z" />

package/src/iconography/atom.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type AtomProps = SVGProps<SVGSVGElement>;
-
-type AtomRef = SVGSVGElement;
-
-export const Atom = forwardRef<AtomRef, AtomProps>((delegated, ref) => {
+export const Atom = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg
       ref={ref}

package/src/iconography/battery.tsx

@@ -1,10 +1,6 @@
 import React, { forwardRef, SVGProps } from 'react';
 
-type BatteryProps = SVGProps<SVGSVGElement>;
-
-type BatteryRef = SVGSVGElement;
-
-export const Battery = forwardRef<BatteryRef, BatteryProps>((delegated, ref) => {
+export const Battery = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="currentColor" {...delegated}>
       <path

package/src/iconography/bell.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type BellProps = SVGProps<SVGSVGElement>;
-
-type BellRef = SVGSVGElement;
-
-export const Bell = forwardRef<BellRef, BellProps>((delegated, ref) => {
+export const Bell = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path

package/src/iconography/billing-payments.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type BillingPaymentsProps = SVGProps<SVGSVGElement>;
-
-type BillingPaymentsRef = SVGSVGElement;
-
-export const BillingPayments = forwardRef<BillingPaymentsRef, BillingPaymentsProps>((delegated, ref) => {
+export const BillingPayments = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="23" height="22" viewBox="0 0 23 22" fill="none" {...delegated}>
       <path

package/src/iconography/bin.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type BinProps = SVGProps<SVGSVGElement>;
-
-type BinRef = SVGSVGElement;
-
-export const Bin = forwardRef<BinRef, BinProps>((delegated, ref) => {
+export const Bin = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path fill="#BFF6F8" d="M5.5 6h11v13h-11V6Z" />

package/src/iconography/boolean.tsx

@@ -0,0 +1,17 @@
+import { forwardRef, SVGProps } from 'react';
+
+import { stroke } from './variables';
+
+export const Boolean = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        fill={stroke}
+        d="M14.458 17.058V18H8v-.942h6.458ZM20.517 11a6.058 6.058 0 0 0-6.059-6.058H8a6.058 6.058 0 0 0 0 12.116V18A7 7 0 1 1 8 4h6.458l.36.01a7 7 0 0 1 0 13.98l-.36.01v-.942A6.058 6.058 0 0 0 20.517 11Z"
+      />
+      <path fill={stroke} d="M18.74 11a4.356 4.356 0 1 1-8.712-.001 4.356 4.356 0 0 1 8.712 0Z" />
+    </svg>
+  );
+});
+
+Boolean.displayName = 'BooleanIcon';

package/src/iconography/cancel.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type CancelProps = SVGProps<SVGSVGElement>;
-
-type CancelRef = SVGSVGElement;
-
-export const Cancel = forwardRef<CancelRef, CancelProps>((delegated, ref) => {
+export const Cancel = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="34" height="34" viewBox="0 0 34 34" fill="none" {...delegated}>
       <path

package/src/iconography/caret.tsx

@@ -1,12 +1,8 @@
 import { forwardRef, SVGProps } from 'react';
 
-type CaretProps = SVGProps<SVGSVGElement>;
-
-type CaretRef = SVGSVGElement;
-
-export const Caret = forwardRef<CaretRef, CaretProps>((delegated, ref) => {
+export const Caret = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
-    <svg ref={ref} width="8" height="8" viewBox="0 0 8 8" fill="#626778" {...delegated}>
+    <svg ref={ref} width="8" height="8" viewBox="0 0 8 8" fill="var(--c-icon-stroke, #626778)" {...delegated}>
       <path d="M4.36763 6.81306C4.21367 7.07973 3.82877 7.07973 3.67481 6.81306L0.921902 2.04489C0.767942 1.77822 0.960391 1.44489 1.26831 1.44489L6.77412 1.44489C7.08204 1.44489 7.27449 1.77822 7.12053 2.04489L4.36763 6.81306Z" />
     </svg>
   );

package/src/iconography/cart.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type CartProps = SVGProps<SVGSVGElement>;
-
-type CartRef = SVGSVGElement;
-
-export const Cart = forwardRef<CartRef, CartProps>((delegated, ref) => {
+export const Cart = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="23" viewBox="0 0 22 23" fill="currentColor" {...delegated}>
       <path

package/src/iconography/catalogue.tsx

@@ -1,9 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type CatalogueProps = SVGProps<SVGSVGElement>;
-type CatalogueRef = SVGSVGElement;
-
-export const Catalogue = forwardRef<CatalogueRef, CatalogueProps>((delegated, ref) => {
+export const Catalogue = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="23" viewBox="0 0 22 23" fill="none" {...delegated}>
       <path

package/src/iconography/check-with-circle.tsx

@@ -2,10 +2,7 @@ import { forwardRef, SVGProps } from 'react';
 
 import { fill, stroke } from './variables';
 
-type CheckWithCircleProps = SVGProps<SVGSVGElement>;
-type CheckWithCircleRef = SVGSVGElement;
-
-export const CheckWithCircle = forwardRef<CheckWithCircleRef, CheckWithCircleProps>((delegated, ref) => {
+export const CheckWithCircle = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" fill="none" viewBox="0 0 22 22" {...delegated}>
       <path fill={fill} d="M19.152 11a8.152 8.152 0 1 1-16.304 0 8.152 8.152 0 0 1 16.304 0Z" />

package/src/iconography/check.tsx

@@ -1,9 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type CheckProps = SVGProps<SVGSVGElement>;
-type CheckRef = SVGSVGElement;
-
-export const Check = forwardRef<CheckRef, CheckProps>((delegated, ref) => {
+export const Check = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="9" height="9" viewBox="0 0 9 9" fill="none" {...delegated}>
       <path

package/src/iconography/checkbox.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, SVGProps } from 'react';
+
+import { stroke } from './variables';
+
+export const Checkbox = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        fill={stroke}
+        d="M15.6 18.9V20H6.4v-1.1h9.2Zm3.3-3.3V6.4a3.3 3.3 0 0 0-3.3-3.3H6.4a3.3 3.3 0 0 0-3.3 3.3v9.2a3.3 3.3 0 0 0 3.3 3.3V20l-.227-.006a4.4 4.4 0 0 1-4.167-4.168L2 15.6V6.4a4.4 4.4 0 0 1 4.173-4.394L6.4 2h9.2l.226.006A4.4 4.4 0 0 1 20 6.4v9.2l-.006.226a4.4 4.4 0 0 1-4.168 4.168L15.6 20v-1.1a3.3 3.3 0 0 0 3.3-3.3Z"
+      />
+      <path
+        fill={stroke}
+        d="M14.33 8.608a.463.463 0 0 1 .124.317.463.463 0 0 1-.123.316l-4.076 4.33a.41.41 0 0 1-.298.132.41.41 0 0 1-.298-.131L7.832 11.63a.465.465 0 0 1 .01-.623.41.41 0 0 1 .29-.13.409.409 0 0 1 .296.12l1.529 1.624 3.778-4.014a.41.41 0 0 1 .298-.13.41.41 0 0 1 .298.13Z"
+      />
+      <path
+        fill={stroke}
+        d="M14.454 8.924a.463.463 0 0 0-.123-.315.415.415 0 0 0-.215-.123l-.083-.009a.411.411 0 0 0-.298.132l-3.778 4.013-1.529-1.625a.414.414 0 0 0-.214-.113l-.081-.007a.41.41 0 0 0-.29.132.463.463 0 0 0-.124.309l.006.085a.461.461 0 0 0 .107.228l1.827 1.941a.405.405 0 0 0 .532.056l.064-.056 4.076-4.33a.457.457 0 0 0 .114-.23l.01-.088Zm.33 0a.797.797 0 0 1-.164.486l-.05.057-4.074 4.331h-.001a.739.739 0 0 1-1.076 0l-1.827-1.941-.008-.009a.795.795 0 0 1 .017-1.066h.001a.735.735 0 0 1 1.002-.068l.056.05.008.007 1.289 1.369 3.537-3.758a.736.736 0 0 1 1.022-.052l.055.051v.001a.793.793 0 0 1 .213.542Z"
+      />
+    </svg>
+  );
+});
+
+Checkbox.displayName = 'CheckboxIcon';

package/src/iconography/chevron.tsx

@@ -1,8 +1,6 @@
 import { forwardRef, type SVGProps } from 'react';
 
-type ChevronIconProps = SVGProps<SVGSVGElement>;
-
-export const Chevron = forwardRef<SVGSVGElement, ChevronIconProps>((delegated, ref) => (
+export const Chevron = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => (
   <svg width="22" height="22" fill="none" viewBox="0 0 22 22" ref={ref} {...delegated}>
     <path
       fill={delegated.fill ?? '#528693'}

package/src/iconography/choice.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type ChoiceProps = SVGProps<SVGSVGElement>;
-
-type ChoiceRef = SVGSVGElement;
-
-export const Choice = forwardRef<ChoiceRef, ChoiceProps>((delegated, ref) => {
+export const Choice = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path

package/src/iconography/chunk.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type ChunkProps = SVGProps<SVGSVGElement>;
-
-type ChunkRef = SVGSVGElement;
-
-export const Chunk = forwardRef<ChunkRef, ChunkProps>((delegated, ref) => {
+export const Chunk = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path

package/src/iconography/clock.tsx

@@ -2,11 +2,7 @@ import { forwardRef, SVGProps } from 'react';
 
 import { fill, stroke } from './variables';
 
-type ClockProps = SVGProps<SVGSVGElement>;
-
-type ClockRef = SVGSVGElement;
-
-export const Clock = forwardRef<ClockRef, ClockProps>((delegated, ref) => {
+export const Clock = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="34" height="34" viewBox="0 0 34 34" fill="none" {...delegated}>
       <path

package/src/iconography/cloud-with-key-hole.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type CloudWithKeyHoleProps = SVGProps<SVGSVGElement>;
-
-type CloudWithKeyHoleRef = SVGSVGElement;
-
-export const CloudWithKeyHole = forwardRef<CloudWithKeyHoleRef, CloudWithKeyHoleProps>((delegated, ref) => {
+export const CloudWithKeyHole = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="16" height="16" viewBox="0 0 16 16" fill="none" {...delegated}>
       <path

package/src/iconography/cloud.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type CloudProps = SVGProps<SVGSVGElement>;
-
-type CloudRef = SVGSVGElement;
-
-export const Cloud = forwardRef<CloudRef, CloudProps>((delegated, ref) => {
+export const Cloud = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="17" height="16" viewBox="0 0 17 16" fill="none" {...delegated}>
       <path

package/src/iconography/compact.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type CompactProps = SVGProps<SVGSVGElement>;
-
-type CompactRef = SVGSVGElement;
-
-export const Compact = forwardRef<CompactRef, CompactProps>((delegated, ref) => {
+export const Compact = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path