@crystallize/design-system 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -51,6 +51,9 @@
     "@types/react": "17.0.1",
     "@types/react-dom": "17.0.1",
     "@vitejs/plugin-react": "^3.0.1",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.0.0",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "concurrently": "^7.6.0",
     "postcss": "^8.4.21",
     "storybook": "7.0.0-beta.14",
@@ -60,7 +63,8 @@
     "tsconfig": "0.0.0",
     "tsup": "^6.5.0",
     "typescript": "^4.9.4",
-    "vite": "^4.0.4"
+    "vite": "^4.1.1",
+    "vitest": "^0.28.4"
   },
   "keywords": [
     "react",
@@ -89,6 +93,8 @@
     "dev:tw": "tailwindcss --content ./src/**/*.tsx,!./src/**/*.stories.tsx -c ./tailwind.config.cjs -i src/index.css -o dist/index.css --watch & tsup src/index.ts --format esm --dts --watch",
     "dev:tsup": "tsup src/index.ts --format esm --dts --watch",
     "dev:storybook": "storybook dev -p 6006 --no-open -s public",
-    "dev": "concurrently \"npm:dev:*\""
+    "dev": "concurrently \"npm:dev:*\"",
+    "test": "vitest run src/",
+    "test:watch": "vitest src/"
   }
 }

package/src/action-menu/action-menu.css

@@ -1,5 +1,5 @@
 .c-action-menu {
-  @apply flex h-8 w-8 rotate-0 cursor-pointer flex-col items-center justify-center gap-[2px] rounded-md border-none bg-transparent p-1 -outline-offset-1 transition;
+  @apply flex h-8 w-8 shrink-0 rotate-0 cursor-pointer flex-col items-center justify-center gap-[2px] rounded-md border-none bg-transparent p-1 -outline-offset-1 transition;
   &-dot {
     @apply h-[4px] w-[4px] rounded-full bg-gray;
   }

package/src/checkbox/checkbox.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { Checkbox } from '.';
+
+describe('testing the checkbox', () => {
+  it('should trigger the onCheckedChange', () => {
+    const onChange = vi.fn();
+
+    render(<Checkbox onCheckedChange={onChange} defaultChecked={true} data-testid="chk" />);
+
+    fireEvent.click(screen.getByTestId('chk'));
+
+    expect(onChange).toBeCalledWith(false);
+    expect(onChange).toBeCalledTimes(1);
+  });
+});

package/src/dialog/Dialog.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { Dialog } from '.';
+import { Button } from '../button';
+
+describe('testing the dialog', () => {
+  it('should open', () => {
+    render(
+      <Dialog>
+        <Dialog.Trigger asChild>
+          <Button>Open dialog</Button>
+        </Dialog.Trigger>
+        <Dialog.Content>
+          <Dialog.Title>This is a normal dialog</Dialog.Title>
+          <Dialog.Description>That is described in a declarative way</Dialog.Description>
+          <div className="flex items-center justify-between">Hello world!</div>
+        </Dialog.Content>
+      </Dialog>,
+    );
+
+    fireEvent.click(screen.getByText('Open dialog'));
+
+    expect(screen.getByText('This is a normal dialog')).toBeVisible();
+  });
+});

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

@@ -5,12 +5,21 @@ type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps & {
   children: ReactNode;
   content: ReactNode;
   alignContent?: 'start' | 'center' | 'end';
+  disabled?: boolean;
 };
 
-export function DropdownMenuRoot({ children, content, alignContent = 'start', ...delegated }: DropdownMenuRootProps) {
+export function DropdownMenuRoot({
+  children,
+  content,
+  alignContent = 'start',
+  disabled,
+  ...delegated
+}: DropdownMenuRootProps) {
   return (
     <DropdownMenuPrimitive.Root>
-      <DropdownMenuPrimitive.Trigger asChild>{children}</DropdownMenuPrimitive.Trigger>
+      <DropdownMenuPrimitive.Trigger disabled={disabled} asChild>
+        {children}
+      </DropdownMenuPrimitive.Trigger>
       <DropdownMenuPrimitive.Content
         align={alignContent}
         sideOffset={5}

package/src/icon-button/IconButton.stories.tsx

@@ -36,3 +36,10 @@ export const Default: Story = {
     children: <Icon.Cancel width={16} height={16} />,
   },
 };
+
+export const Elevate: Story = {
+  args: {
+    children: <Icon.Add width={16} height={16} />,
+    variant: 'elevate',
+  },
+};

package/src/icon-button/icon-button.css

@@ -18,6 +18,14 @@
     @apply outline outline-1 outline-offset-1 outline-inherit;
   }
 
+  &-elevate {
+    @apply bg-elevate shadow;
+  }
+
+  &:not(:disabled):hover {
+    @apply outline outline-1 outline-purple-200-700;
+  }
+
   &-xxs {
     @apply h-5 w-5;
   }

package/src/icon-button/icon-button.tsx

@@ -6,6 +6,10 @@ import './icon-button.css';
 type IconButtonStylesProps = VariantProps<typeof buttonStyles>;
 const buttonStyles = cva(['c-icon-button'], {
   variants: {
+    variant: {
+      default: '',
+      elevate: 'c-icon-button-elevate',
+    },
     size: {
       xxs: 'c-icon-button-xxs',
       xs: 'c-icon-button-xs',
@@ -16,15 +20,16 @@ const buttonStyles = cva(['c-icon-button'], {
   },
   defaultVariants: {
     size: 'sm',
+    variant: 'default',
   },
 });
 
 export type IconButtonProps = ComponentPropsWithRef<'button'> & IconButtonStylesProps;
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ children, className, type = 'button', size, ...delegated }, ref) => {
+  ({ children, className, type = 'button', size, variant, ...delegated }, ref) => {
     return (
-      <button ref={ref} type={type} className={buttonStyles({ size, className })} {...delegated}>
+      <button ref={ref} type={type} className={buttonStyles({ size, variant, className })} {...delegated}>
         {children}
       </button>
     );

package/src/iconography/add.tsx

@@ -0,0 +1,30 @@
+import { forwardRef, SVGProps } from 'react';
+
+type AddProps = SVGProps<SVGSVGElement>;
+
+type AddRef = SVGSVGElement;
+
+export const Add = forwardRef<AddRef, AddProps>((delegated, ref) => {
+  return (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
+      fill="currentColor"
+      {...delegated}
+    >
+      <path
+        fill="#528693"
+        d="M13.258 19.467c.005-.095-.045-3.832-.045-3.832v-2.157l-.05-.096.141-.13 5.963.028a.647.647 0 0 0 .407-.15.587.587 0 0 0 .202-.376l.005-.188.055-3.064a.576.576 0 0 0-.174-.521.6.6 0 0 0-.266-.155 1.606 1.606 0 0 0-.366-.028c-.055.01-.114.004-.194.01h-.646l-4.962.031a.188.188 0 0 1-.133-.032l-.055-.091v-.348l.05-5.612a.61.61 0 0 0-.16-.434.625.625 0 0 0-.316-.16c-.109-.009-.258-.004-.38-.004-.058-.005-2.166-.092-2.974-.12a.517.517 0 0 0-.42.165.567.567 0 0 0-.156.44l.004 2.336-.045 2.57.022 1.222a.151.151 0 0 1-.04.086.105.105 0 0 1-.079.033l-5.894-.05a.57.57 0 0 0-.517.25c-.095.202-.13.427-.101.648L2.06 12.59a.598.598 0 0 0 .178.453l.054.055a.573.573 0 0 0 .247.11c.086.016.172.022.26.018l2.68.037 3.287-.014a16.393 16.393 0 0 0-.046 2.005l.02.22c-.02.017-.02.274 0 3.384.006.077.007.155.004.232-.01.136.006.273.045.403.024.083.07.157.133.215.053.059.12.104.194.133.146.037.297.052.448.046.06-.005.119 0 .174 0l2.748.077c.2.022.4-.016.577-.11a.452.452 0 0 0 .194-.388Zm-.873-.278h-.12a52.435 52.435 0 0 0-1.019-.05l-1.527-.066-.092-.046a.18.18 0 0 1-.04-.168l.044-3.357.015-2.401a.678.678 0 0 0-.188-.535.651.651 0 0 0-.457-.194l-5.185.017-.695-.009-.114.05-.12-.118.005-2.474a.248.248 0 0 1 .037-.202l.073-.054 5.163.022H9.3a.194.194 0 0 0 .156-.064.189.189 0 0 0 .06-.151l.004-1.706.014-2.62.013-1.45.018-.582-.004-.088.055-.054a.239.239 0 0 1 .165-.055l2.487.055.092.01.065.064.022.077-.091 5.333-.002.797a.452.452 0 0 0 .457.457l5.479-.018h.165c.165-.008.33-.002.493.018.046.006.09.02.13.041.05.05.036.156.036.238l-.004.078-.032 1.898s-.005.178-.01.22a.567.567 0 0 0 .005.123.5.5 0 0 1 .005.114c-.028.11-.12.119-.28.114l-5.583-.013a.905.905 0 0 0-.59.114.6.6 0 0 0-.234.499l.02 2.743.113 3.023c0 .068-.007.135-.018.201a.165.165 0 0 1-.12.17v-.002Z"
+      />
+      <path
+        fill="#BFF6F8"
+        d="M12.384 19.19h-.119a52.478 52.478 0 0 0-1.02-.05l-1.527-.065-.092-.046a.18.18 0 0 1-.04-.169l.045-3.357.014-2.401a.678.678 0 0 0-.188-.535.651.651 0 0 0-.457-.194l-5.184.016-.695-.009-.114.05-.12-.118.005-2.474a.248.248 0 0 1 .037-.202l.073-.054 5.163.022H9.3a.194.194 0 0 0 .156-.064.189.189 0 0 0 .06-.151l.004-1.706.014-2.62.013-1.45.018-.582-.004-.088.055-.054a.239.239 0 0 1 .165-.055l2.487.055.092.01.065.064.022.077-.091 5.333-.002.797a.452.452 0 0 0 .457.457l5.479-.018h.165c.165-.008.33-.002.493.018.046.006.09.02.13.041.05.05.036.156.036.238l-.004.078-.032 1.898s-.005.178-.01.22a.567.567 0 0 0 .005.123.5.5 0 0 1 .005.114c-.028.11-.12.119-.28.114l-5.583-.013a.906.906 0 0 0-.59.114.6.6 0 0 0-.234.499l.02 2.743.113 3.023c0 .068-.007.135-.018.201a.166.166 0 0 1-.12.17Z"
+      />
+    </svg>
+  );
+});
+
+Add.displayName = 'AddIcon';

package/src/iconography/catalogue.tsx

@@ -0,0 +1,26 @@
+import { forwardRef, SVGProps } from 'react';
+
+type CatalogueProps = SVGProps<SVGSVGElement>;
+
+type CatalogueRef = SVGSVGElement;
+
+export const Catalogue = forwardRef<CatalogueRef, CatalogueProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="23" viewBox="0 0 22 23" fill="none" {...delegated}>
+      <path
+        d="m20.558 16.922-.006-1.83c-.007-2.697-.007-4.838-.007-7.845l-.013-3.893a.226.226 0 0 0-.213-.22l-7.088-.013c-1.184.032-1.928.498-2.212 1.423-.343-.932-1.067-1.384-2.277-1.423l-7.095-.007a.221.221 0 0 0-.213.22l.02 13.647-.014.77c-.006.497-.006.995-.006 1.493a.29.29 0 0 0 .29.291h.544c.647 0 1.294 0 1.934-.006.64-.007 1.287-.007 1.927-.007h.55c.595 0 1.19.007 1.779.007.588 0 1.19.013 1.785.013s1.183-.007 1.778-.02c.356-.006.718-.006 1.08-.006l2.717.006c.653 0 1.3.007 1.953.007s1.306.006 1.953.006h.556a.294.294 0 0 0 .291-.29l-.013-2.323ZM1.997 5.274c-.026-.543-.046-1.112-.026-1.571l.743-.02c.854 0 1.714 0 2.568-.006.298 0 .647-.013 1.015-.032.42-.02.867-.04 1.307-.04 1.067 0 2.341.104 2.736.88.284.592.413 1.246.375 1.902l-.007 2.73v2.897c0 .304-.006.582-.013.912-.006.607-.019 1.131-.032 1.649-.026.97-.045 1.888.039 3.356-.931-.944-2.613-1.093-3.531-1.1l-2.794-.006c-.557 0-1.158.033-1.727.059l-.653.064c0-1.313.006-2.25.012-3.24 0-.757.007-1.546.013-2.561v-5.07c0-.246-.013-.518-.025-.803Zm7.23 13.615c-1.222.013-2.845.052-3.654.065-.278.006-.46.013-.491.013H3.71c-.582 0-1.164-.007-1.681-.007-.013-.045-.007-.407 0-.698.015-.259.017-.518.006-.776.104 0 .208-.007.31-.02.078-.006.15-.019.22-.019.583-.013 1.094-.02 1.624-.02.317-.006 1.242-.019 1.242-.019.233 0 .504-.006.795-.006 2.723 0 4.198.472 4.508 1.442l.007.084a12.369 12.369 0 0 0-1.514-.039Zm2.005.071a.333.333 0 0 0 .007-.11c.452-1.293 2.354-1.442 3.744-1.442.408 0 .796.02 1.139.026.2.013.381.02.543.02l3.285-.007.046 1.494-8.764.02Zm8.072-2.108c-.156 0-.298 0-.427-.006h-.09c-.46 0-.926-.007-1.385-.02-.563-.006-1.125-.013-1.694-.013h-.492c-.161 0-.336.007-.563.02a9.1 9.1 0 0 0-2.095.362c-.176.058-.35.127-.517.207-.283.119-.545.283-.777.485a.172.172 0 0 0-.032.039c.045-1.462.071-2.807.071-4.237v-.039c.007-.55.007-1.099.007-1.662l-.039-5.6c0-.266-.013-.524-.032-.77.006-.104.013-.214.025-.317.26-1.475 1.475-1.675 2.633-1.675.284 0 .575.013.847.032.252.007.485.02.699.02l2.496.006 1.397-.006c.233 0 .453 0 .627-.013v1.377c-.006 1.61-.006 3.215-.006 4.825 0 1.19.006 2.147.013 3.066.006 1.209.013 2.354.039 3.887-.235.023-.47.033-.705.031Z"
+        fill="#528693"
+      />
+      <path
+        d="m19.996 18.94-8.764.02a.333.333 0 0 0 .007-.11c.452-1.294 2.354-1.443 3.744-1.443.408 0 .796.02 1.139.026.2.013.381.02.543.02l3.285-.007.046 1.494ZM10.74 18.927a12.37 12.37 0 0 0-1.513-.038c-1.222.012-2.845.051-3.654.064l-.491.013H3.71c-.582 0-1.165-.006-1.682-.006-.013-.046-.006-.408 0-.699.015-.258.018-.517.007-.776.103 0 .207-.006.31-.02.078-.006.149-.019.22-.019a71.5 71.5 0 0 1 1.623-.02c.317-.006 1.242-.018 1.242-.018.233 0 .504-.007.796-.007 2.722 0 4.197.472 4.507 1.442l.007.084Z"
+        fill="#fff"
+      />
+      <path
+        d="m10.715 6.387-.007 2.73v2.897c0 .304-.006.582-.013.912-.006.607-.02 1.131-.032 1.649-.026.97-.045 1.888.039 3.356-.932-.944-2.613-1.093-3.532-1.1l-2.794-.006c-.556 0-1.157.033-1.726.059l-.654.064c0-1.313.007-2.25.013-3.24 0-.757.007-1.546.013-2.561v-5.07c0-.246-.013-.518-.026-.803a18.746 18.746 0 0 1-.025-1.571l.743-.02c.854 0 1.714 0 2.568-.006.297 0 .647-.013 1.015-.032.42-.02.867-.04 1.307-.04 1.067 0 2.341.104 2.735.88.285.592.414 1.246.376 1.902ZM20.009 16.82c-.235.023-.47.034-.705.032-.156 0-.298 0-.427-.006h-.09c-.46 0-.926-.007-1.385-.02-.563-.006-1.125-.013-1.694-.013h-.492c-.162 0-.336.007-.563.02a9.1 9.1 0 0 0-2.095.362c-.177.058-.35.127-.518.207a2.88 2.88 0 0 0-.776.485.174.174 0 0 0-.032.038c.045-1.461.071-2.806.071-4.236v-.039c.007-.55.007-1.099.007-1.662l-.04-5.6c0-.266-.012-.524-.031-.77.006-.104.012-.214.025-.317.26-1.475 1.475-1.675 2.633-1.675.284 0 .575.013.847.032.252.007.485.02.698.02l2.497.006 1.397-.006c.233 0 .453 0 .627-.013v1.377c-.006 1.61-.006 3.215-.006 4.825 0 1.19.006 2.147.013 3.066.006 1.208.015 2.353.039 3.887Z"
+        fill="#BFF6F8"
+      />
+    </svg>
+  );
+});
+
+Catalogue.displayName = 'CatalogueIcon';

package/src/iconography/customers.tsx

@@ -0,0 +1,38 @@
+import { forwardRef, SVGProps } from 'react';
+
+type CustomersProps = SVGProps<SVGSVGElement>;
+
+type CustomersRef = SVGSVGElement;
+
+export const Customers = forwardRef<CustomersRef, CustomersProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="16" height="16" viewBox="0 0 16 16" fill="none" {...delegated}>
+      <path
+        d="M8.404 9.6176a.505.505 0 0 1-.3293.174.5165.5165 0 0 1-.395-.1129.5736.5736 0 0 1-.1411-.174.6699.6699 0 0 1-.0377-.1036 1.2879 1.2879 0 0 1-.0188-.141.0354.0354 0 0 0-.0047-.0236.299.299 0 0 1 .0094-.0423c.0141.0094-.0141 0 .0282.0188.1414.0742.297.1175.4562.127.1982.0035.394-.0434.5692-.1364a.6085.6085 0 0 1-.1364.414Z"
+        fill="#fff"
+      />
+      <path
+        d="M8.8367 10.8219a10.8362 10.8362 0 0 1-.682.0189 8.6454 8.6454 0 0 1-1.4065-.0753 11.1623 11.1623 0 0 1-1.3781-.3104.3187.3187 0 0 0-.0894-.0141c0-.0141.0094-.0188.0094-.0329.042-.2007.1235-.391.24-.5598a.9674.9674 0 0 1 .4515-.3057.9234.9234 0 0 1 .2774-.0424l.334-.0047h.2634l.207.0047h.0188v.0095c.0123.0511.028.1014.047.1505.0048.0094.0142.0188.0189.0282.0047.0094.0047.0235.0093.033a.7647.7647 0 0 0 .0518.0799c.0046.0104.011.02.0188.0282a.914.914 0 0 0 .1035.1317l.0094.0094a.77.77 0 0 0 .1364.1082c0 .0047.0047.0047.0094.0094.0508.0328.1043.0611.16.0847a.9932.9932 0 0 0 .3857.0799.8826.8826 0 0 0 .3621-.0799.9532.9532 0 0 0 .2352-.1506l.0659-.0517a.9361.9361 0 0 0 .2116-.3057c.0236-.047.0518-.1411.0565-.1506h.522c.2128-.0233.428.0008.6304.0706a.9474.9474 0 0 1 .254.1552.6675.6675 0 0 1 .174.2164c.0527.0907.0953.1869.127.2869l.0423.1552.0047.0329v.0048l-.1599.0611a.4584.4584 0 0 1-.0752.0235 11.626 11.626 0 0 1-1.1995.254c-.1364.0141-.268.033-.3998.0424a.1434.1434 0 0 1-.047.0046Zm-.6725-1.9475c-.0094.0047-.0141.0094-.0188.0047a.5169.5169 0 0 1-.1693.0141 1.9402 1.9402 0 0 1-.9596-.6162 1.3368 1.3368 0 0 1-.2822-.4704 2.0513 2.0513 0 0 1-.0988-.5738c-.0141-.2117-.047-.4515-.047-.6444a1.3454 1.3454 0 0 1 .0893-.4422.4875.4875 0 0 1 .0659-.141 1.223 1.223 0 0 1 .08-.1318.9871.9871 0 0 1 .0893-.1081.3608.3608 0 0 1 .0847-.0847.8524.8524 0 0 1 .094-.0894h.0048a1.4632 1.4632 0 0 1 .9266-.3057c.3404.0053.669.1264.9313.3434.0997.0819.1897.175.2681.2774.0351.0543.0665.1109.094.1694.0308.0603.056.1233.0753.1881.0191.0584.0333.1181.0424.1788a3.325 3.325 0 0 1-.0188.6397 3.2264 3.2264 0 0 1-.0753.635 1.417 1.417 0 0 1-.2963.5315 3.523 3.523 0 0 1-.5221.4562 1.2068 1.2068 0 0 1-.3434.1647c-.0047.0094-.0094.0094-.0141.0047Z"
+        fill="#fff"
+      />
+      <path
+        d="M8.0842 2.4303a5.5547 5.5547 0 0 1 5.4656 4.8964c.0038.0666.0133.1327.0282.1977.0048.0893.0048.1787.0048.268l-.9125-.014a.1684.1684 0 0 0-.1694.1693v.1034a.1665.1665 0 0 0 .1646.1646c.1553 0 .3105 0 .4845.0048.1457.0094.2918.0094.4375 0a5.578 5.578 0 0 1-1.4356 3.5148 5.5779 5.5779 0 0 1-3.3528 1.7815c-.24.0338-.482.051-.7243.0517l.0141-.9078a.1682.1682 0 0 0-.0495-.1198.168.168 0 0 0-.1199-.0495l-.0093-1.2088c.1975.0047.3997 0 .6067-.0095a7.9564 7.9564 0 0 0 1.0442-.0893 8.7682 8.7682 0 0 0 .7432-.16l.381-.1128c.1129-.0471.3058-.1223.4233-.1694a.134.134 0 0 0 .0847-.1505c-.0376-.1599-.0988-.4327-.1082-.4704a1.4315 1.4315 0 0 0-.428-.7243 1.321 1.321 0 0 0-.3293-.2023.0807.0807 0 0 0-.0235-.0094c-.0094-.0047-.0141-.0047-.0235-.0094a1.1368 1.1368 0 0 0-.1646-.0564.2995.2995 0 0 1-.033-.0095 1.4732 1.4732 0 0 0-.3998-.047c-.2304 0-.4703 0-.7102-.0047l-.047-.1223a3.8915 3.8915 0 0 0 .3856-.3386 1.8455 1.8455 0 0 0 .4186-.6727 2.7539 2.7539 0 0 0 .1224-.7479 4.7543 4.7543 0 0 0 .0235-.7431 1.7253 1.7253 0 0 0-.2681-.7526A1.855 1.855 0 0 0 7.99 4.881L7.9148 3.512a.1667.1667 0 0 0 .1647-.1646c0-.1553 0-.3105.0047-.4845a3.3168 3.3168 0 0 0 0-.4328Z"
+        fill="#BFF6F8"
+      />
+      <path
+        d="M7.0495 8.8602v.2023H6.739c-.6537.0047-1.411.0847-1.7074.7808a2.038 2.038 0 0 0-.127.334 1.7783 1.7783 0 0 0-.047.1975c-.0141.0753-.0235.1458-.0377.2211a.1333.1333 0 0 0 .08.1505l.3622.1412c.1028.0422.208.0784.3152.1081.2022.0565.4091.1082.6208.1552a7.578 7.578 0 0 0 1.3217.1364c.127 0 .2588 0 .3905-.0047l.0093 1.2089h-.1034a.1673.1673 0 0 0-.1694.1646c0 .1552.0047.3057 0 .4845a3.0925 3.0925 0 0 0-.0046.4186 5.564 5.564 0 0 1-2.8081-.9642 5.6563 5.6563 0 0 1-2.4083-4.0734l-.0142-.3104.9455.014a.1675.1675 0 0 0 .1646-.1693v-.1034A.164.164 0 0 0 3.4202 7.8a.1639.1639 0 0 0-.0631-.0123l-.9407-.0047c-.0094-.0188-.0141-.0188-.0235-.0376a1.7458 1.7458 0 0 0 .0705-.4186 5.65 5.65 0 0 1 .207-.9784c.0188-.047.033-.094.047-.1411a6.2069 6.2069 0 0 1 .1176-.3152c.033-.0752.0659-.1505.1035-.2257.0376-.0753.0705-.1505.1082-.2258.047-.094.0987-.1834.1505-.2728.033-.0565.0658-.113.1034-.1646a4.4284 4.4284 0 0 1 .2117-.3057 1.4975 1.4975 0 0 1 .0753-.1083 4.6344 4.6344 0 0 1 .3151-.3668v-.0048c.1176-.1223.2352-.2445.3622-.3575.0094-.0046.0141-.014.0236-.0188a5.6011 5.6011 0 0 1 3.3678-1.4017l-.0141.9032a.1684.1684 0 0 0 .1044.1565.1693.1693 0 0 0 .0649.0128h.1035l.0752 1.3687a1.8924 1.8924 0 0 0-1.6604.936 1.8814 1.8814 0 0 0-.1787 1.0255c.0195.3332.0699.6638.1505.9877.0718.2497.197.4808.367.6774.1128.1319.2407.2503.3809.3527Z"
+        fill="#BFF6F8"
+      />
+      <path
+        d="M8.5169 11.2734a8.7996 8.7996 0 0 1-.6068.0095c-.1317.0046-.2634.0046-.3904.0046a7.5785 7.5785 0 0 1-1.3218-.1364 11.9326 11.9326 0 0 1-.6208-.1552 2.802 2.802 0 0 1-.3152-.1082l-.3621-.1411a.1329.1329 0 0 1-.08-.1505c.014-.0753.0235-.1458.0376-.2211a1.776 1.776 0 0 1 .047-.1975 2.0357 2.0357 0 0 1 .127-.334c.2964-.6961 1.0537-.776 1.7075-.7808h.3104v-.2022a2.2478 2.2478 0 0 1-.381-.3529 1.7947 1.7947 0 0 1-.3669-.6773 5.3925 5.3925 0 0 1-.1505-.9877 1.882 1.882 0 0 1 .1788-1.0255 1.8925 1.8925 0 0 1 1.6604-.936 1.8552 1.8552 0 0 1 1.618.7996c.147.2265.2389.4843.2681.7527.0116.248.0038.4964-.0235.7431a2.7542 2.7542 0 0 1-.1223.7479 1.8455 1.8455 0 0 1-.4186.6726 3.8915 3.8915 0 0 1-.3857.3387l.047.1223c.24.0047.4798.0047.7103.0047a1.4738 1.4738 0 0 1 .3998.047.3066.3066 0 0 0 .0329.0094c.0562.0146.1113.0335.1646.0565.0095.0047.0142.0047.0236.0094a.0807.0807 0 0 1 .0235.0094c.1191.051.23.119.3292.2023.2121.193.3612.4454.4281.7243.0094.0376.0706.3105.1082.4704a.1343.1343 0 0 1-.0847.1505c-.1176.0471-.3104.1223-.4233.1693l-.381.1129a8.7293 8.7293 0 0 1-.7432.1599 7.9394 7.9394 0 0 1-1.0442.0894Zm-.3622-.4327c.2305 0 .4563-.0047.682-.0188a.1434.1434 0 0 0 .047-.0048c.1318-.0093.2635-.0281.3999-.0422a11.673 11.673 0 0 0 1.1994-.254.463.463 0 0 0 .0753-.0236l.1599-.0611v-.0047l-.0047-.033-.0424-.1552a1.433 1.433 0 0 0-.1269-.287.6666.6666 0 0 0-.1741-.2163.9459.9459 0 0 0-.254-.1552 1.4498 1.4498 0 0 0-.6303-.0706h-.522c-.0048.0094-.033.1035-.0565.1505a.9362.9362 0 0 1-.2117.3058l-.0658.0517a.9494.9494 0 0 1-.2352.1505.8794.8794 0 0 1-.3622.08.9915.9915 0 0 1-.3857-.08 1.0392 1.0392 0 0 1-.16-.0846c-.0046-.0047-.0093-.0047-.0093-.0094a.7693.7693 0 0 1-.1364-.1082l-.0095-.0094a.9109.9109 0 0 1-.1034-.1317.0982.0982 0 0 1-.0188-.0282.7612.7612 0 0 1-.0518-.08c-.0047-.0094-.0047-.0235-.0094-.033-.0047-.0093-.0141-.0187-.0188-.0282a1.1857 1.1857 0 0 1-.047-.1505v-.008h-.0189l-.207-.0046h-.2633l-.334.0046a.9235.9235 0 0 0-.2775.0424.9675.9675 0 0 0-.4515.3057 1.5423 1.5423 0 0 0-.24.5598c0 .0141-.0093.0188-.0093.0329a.3188.3188 0 0 1 .0893.0141c.4524.1325.9127.2362 1.3782.3104.466.0629.9364.0876 1.4064.0739Zm.0094-1.9661c.0047.0047.0094.0047.0141-.0048a1.2082 1.2082 0 0 0 .3434-.1646 3.5214 3.5214 0 0 0 .522-.4562 1.4162 1.4162 0 0 0 .2964-.5316 3.2173 3.2173 0 0 0 .0753-.635 3.325 3.325 0 0 0 .0188-.6397 1.1087 1.1087 0 0 0-.0423-.1787 1.1236 1.1236 0 0 0-.0753-.1881 1.4405 1.4405 0 0 0-.0941-.1694 1.6808 1.6808 0 0 0-.268-.2775 1.4978 1.4978 0 0 0-.9314-.3434 1.4634 1.4634 0 0 0-.9266.3058h-.0047a.8462.8462 0 0 0-.0941.0893.3613.3613 0 0 0-.0847.0847.9924.9924 0 0 0-.0893.1082 1.2285 1.2285 0 0 0-.08.1317.4859.4859 0 0 0-.0659.141 1.3482 1.3482 0 0 0-.0893.4423c0 .1928.033.4327.047.6444.0055.195.0388.3882.0988.5738a1.337 1.337 0 0 0 .2822.4704c.251.2969.5852.5115.9596.6162a.518.518 0 0 0 .1693-.0141c.0047.0046.0094 0 .0188-.0047Zm.3763.3292a1.171 1.171 0 0 1-.5691.1364 1.1262 1.1262 0 0 1-.4563-.127c-.0423-.0188-.0141-.0094-.0282-.0188a.3052.3052 0 0 0-.0094.0423.0348.0348 0 0 1 .0047.0235c.0036.0474.0099.0945.0188.1412a.6723.6723 0 0 0 .0376.1034.5742.5742 0 0 0 .1411.174.5181.5181 0 0 0 .3952.113.5052.5052 0 0 0 .3292-.174.6086.6086 0 0 0 .1364-.414Z"
+        fill="#528693"
+      />
+      <path
+        d="M8.0841 2.4302c.0094.144.0094.2886 0 .4327-.0047.174-.0047.3293-.0047.4845a.1664.1664 0 0 1-.1647.1646h-.1034a.169.169 0 0 1-.1694-.1693l.0141-.9031a5.6012 5.6012 0 0 0-3.3678 1.4017c-.0093.0047-.0141.014-.0235.0188-.127.1129-.2445.2351-.3622.3574v.0048a4.6344 4.6344 0 0 0-.3151.3668 1.5008 1.5008 0 0 0-.0753.1082 4.4277 4.4277 0 0 0-.2117.3057c-.0375.0518-.0705.1082-.1034.1647-.0518.0894-.1035.1787-.1505.2728-.0377.0753-.0753.1505-.1082.2258-.033.0752-.0706.1505-.1035.2258-.0423.1034-.08.207-.1176.3151a1.653 1.653 0 0 1-.047.1411 5.6503 5.6503 0 0 0-.207.9784 1.7462 1.7462 0 0 1-.0705.4186c.0093.0188.014.0188.0235.0377l.9407.0046a.164.164 0 0 1 .1646.1647v.1035a.1674.1674 0 0 1-.1646.1693l-.9454-.0141.014.3104a5.6565 5.6565 0 0 0 2.4084 4.0734 5.5628 5.5628 0 0 0 2.808.9642 3.0992 3.0992 0 0 1 .0048-.4185c.0047-.1788 0-.3293 0-.4846a.1676.1676 0 0 1 .1693-.1646h.1035a.168.168 0 0 1 .1199.0495.1683.1683 0 0 1 .0494.1198l-.0141.9079a5.3045 5.3045 0 0 0 .7244-.0518 5.5775 5.5775 0 0 0 4.7883-5.2963 3.4081 3.4081 0 0 1-.4375 0c-.174-.0047-.3292-.0047-.4844-.0047a.1668.1668 0 0 1-.1647-.1646V7.949a.1698.1698 0 0 1 .1045-.1565.1695.1695 0 0 1 .0649-.0129l.9125.0142c0-.0894 0-.1788-.0047-.2682a1.165 1.165 0 0 1-.0282-.1975 5.5545 5.5545 0 0 0-5.4657-4.8966v-.0013Zm-3.9182.922a5.9953 5.9953 0 0 1 6.7465-.621c.0423.0235.0847.0423.127.0706a4.117 4.117 0 0 1 .2822.1787c.0706.0423.1411.0894.207.1364.0753.0565.1505.1129.2258.174.0517.0423.1082.08.1599.1223a.7765.7765 0 0 0 .0659.0612c.047.047.094.0894.141.1364a4.829 4.829 0 0 1 .3105.3105c.0047 0 .0047.0046.0094.0046s.0047.0095.0094.0141c.1254.1345.2431.2758.3528.4234a.0049.0049 0 0 1 .0033.0013.0046.0046 0 0 1 .0014.0034 5.923 5.923 0 0 1 1.1759 2.9069c.0047.0658.0047.1128.0047.1693.0197.2142.0275.4293.0235.6444 0 .141-.0141.2822-.0235.4233v.0376c0 .0142-.0047.0283-.0047.0376a5.5345 5.5345 0 0 1-.0847.5598 5.9788 5.9788 0 0 1-6.737 4.8227 6.0162 6.0162 0 0 1-5.174-5.8796 6.404 6.404 0 0 1 .0376-.7385c.0047-.0282 0-.047.0047-.0753a5.9916 5.9916 0 0 1 2.1354-3.9242Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Customers.displayName = 'CustomersIcon';

package/src/iconography/fulfilment.tsx

@@ -0,0 +1,58 @@
+import { forwardRef, SVGProps } from 'react';
+
+type FulfilmentProps = SVGProps<SVGSVGElement>;
+
+type FulfilmentRef = SVGSVGElement;
+
+export const Fulfilment = forwardRef<FulfilmentRef, FulfilmentProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="23" viewBox="0 0 22 23" fill="none" {...delegated}>
+      <path
+        d="M1.232 5.397c0-.591.426-1.097 1.009-1.198l8.621-1.487c.12-.021.244-.024.365-.008l8.484 1.115c.605.08 1.057.595 1.057 1.205v11.699c0 .563-.387 1.052-.934 1.183l-8.51 2.022a1.214 1.214 0 0 1-.56 0L2.17 17.904a1.216 1.216 0 0 1-.937-1.183V5.397Z"
+        fill="#BFF6F8"
+      />
+      <path
+        d="M1.232 5.397c0-.591.426-1.097 1.009-1.198l8.621-1.487c.12-.021.244-.024.365-.008l8.484 1.115c.605.08 1.057.595 1.057 1.205v11.699c0 .563-.387 1.052-.934 1.183l-8.51 2.022a1.214 1.214 0 0 1-.56 0L2.17 17.904a1.216 1.216 0 0 1-.937-1.183V5.397Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20.147 16.723V5.024a.595.595 0 0 0-.517-.59L11.146 3.32a.595.595 0 0 0-.178.003L2.346 4.811a.595.595 0 0 0-.493.586v11.324c0 .276.19.516.458.579l8.596 2.024c.09.021.183.021.273 0l8.51-2.022a.595.595 0 0 0 .457-.58ZM2.241 4.199c-.583.1-1.01.607-1.01 1.198v11.324c0 .564.389 1.054.938 1.183l8.595 2.024c.184.044.376.044.56 0l8.51-2.023c.547-.13.934-.62.934-1.182V5.024c0-.61-.452-1.126-1.057-1.205l-8.484-1.115a1.216 1.216 0 0 0-.365.008L2.241 4.199Z"
+        fill="#528693"
+      />
+      <path
+        d="M14.643 8.787a.608.608 0 0 1-.748-.591v-2.85l3.941-.872v3.074a.608.608 0 0 1-.467.591l-2.726.648Z"
+        fill="#BFF6F8"
+      />
+      <path
+        d="M14.643 8.787a.608.608 0 0 1-.748-.591v-2.85l3.941-.872v3.074a.608.608 0 0 1-.467.591l-2.726.648Z"
+        fill="#fff"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m17.836 4.474-3.941.871v2.85c0 .393.366.683.748.592l2.726-.648a.608.608 0 0 0 .467-.591V4.474Zm-.62.773-2.7.597v2.335l2.7-.642v-2.29Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m11.268 6.38 9.045-1.785-.12-.61-9.243 1.826L1.793 4.43l-.093.614 8.947 1.349v13.232h.62V6.381Z"
+        fill="#528693"
+      />
+      <path
+        d="M4.531 10.81c0-.074.066-.13.14-.12l1.276.193V9.384c0-.118.15-.167.22-.071l2.046 2.822a.122.122 0 0 1-.018.163l-2.047 1.795A.122.122 0 0 1 5.947 14v-1.317l-1.313-.198a.122.122 0 0 1-.103-.12V10.81Z"
+        fill="#fff"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m5.947 12.684-1.312-.198a.122.122 0 0 1-.104-.12V10.81c0-.074.066-.13.14-.12l1.276.193V9.384c0-.118.15-.167.22-.071l2.046 2.822a.122.122 0 0 1-.018.163l-2.047 1.795A.122.122 0 0 1 5.947 14v-1.317Zm-.621-2.522v-.778c0-.72.92-1.018 1.343-.436l2.047 2.823a.742.742 0 0 1-.112.994l-2.046 1.794a.742.742 0 0 1-1.232-.558v-.783l-.784-.118a.742.742 0 0 1-.632-.734V10.81c0-.454.405-.801.854-.733l.562.085Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Fulfilment.displayName = 'FulfilmentIcon';

package/src/iconography/grid.tsx

@@ -0,0 +1,84 @@
+import { forwardRef, SVGProps } from 'react';
+
+type GridProps = SVGProps<SVGSVGElement>;
+
+type GridRef = SVGSVGElement;
+
+export const Grid = forwardRef<GridRef, GridProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="23" viewBox="0 0 22 23" fill="none" {...delegated}>
+      <path
+        d="M2.86 4.197c0-.353.286-.639.64-.639h2.453c.352 0 .639.286.639.64V6.65a.639.639 0 0 1-.64.64H3.5a.639.639 0 0 1-.639-.64V4.197Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.5 2.92h2.452c.706 0 1.279.571 1.279 1.277V6.65c0 .706-.573 1.279-1.279 1.279H3.5A1.278 1.278 0 0 1 2.221 6.65V4.197c0-.706.572-1.278 1.278-1.278Zm0 .638a.639.639 0 0 0-.64.64V6.65c0 .353.286.64.64.64h2.452a.639.639 0 0 0 .64-.64V4.197a.639.639 0 0 0-.64-.639H3.5Z"
+        fill="#528693"
+      />
+      <path
+        d="M9.134 4.197c0-.353.286-.639.64-.639h2.453c.352 0 .639.286.639.64V6.65a.639.639 0 0 1-.64.64H9.774a.639.639 0 0 1-.639-.64V4.197Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.773 2.92h2.454c.705 0 1.278.571 1.278 1.277V6.65c0 .706-.573 1.279-1.278 1.279H9.773A1.278 1.278 0 0 1 8.495 6.65V4.197c0-.706.573-1.278 1.278-1.278Zm0 .638a.639.639 0 0 0-.639.64V6.65c0 .353.287.64.64.64h2.453a.639.639 0 0 0 .639-.64V4.197a.639.639 0 0 0-.64-.639H9.774Z"
+        fill="#528693"
+      />
+      <path
+        d="M15.408 4.197a.64.64 0 0 1 .64-.639H18.5c.353 0 .639.286.639.64V6.65a.639.639 0 0 1-.64.64h-2.453a.64.64 0 0 1-.639-.64V4.197Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.048 2.92H18.5c.706 0 1.278.571 1.278 1.277V6.65c0 .706-.572 1.279-1.278 1.279h-2.453A1.278 1.278 0 0 1 14.77 6.65V4.197c0-.706.572-1.278 1.278-1.278Zm0 .638a.639.639 0 0 0-.64.64V6.65c0 .353.287.64.64.64H18.5a.639.639 0 0 0 .639-.64V4.197a.639.639 0 0 0-.64-.639h-2.452Z"
+        fill="#528693"
+      />
+      <path
+        d="M2.86 10.492a.64.64 0 0 1 .64-.639h8.727a.64.64 0 0 1 .639.64v2.453a.64.64 0 0 1-.64.639H3.5a.639.639 0 0 1-.639-.64v-2.453Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.5 9.214h8.726c.706 0 1.279.573 1.279 1.278v2.454c0 .706-.573 1.278-1.279 1.278H3.5a1.278 1.278 0 0 1-1.278-1.278v-2.454c0-.705.572-1.278 1.278-1.278Zm0 .64a.64.64 0 0 0-.64.639v2.453c0 .353.286.639.64.639h8.726a.64.64 0 0 0 .64-.64v-2.453a.64.64 0 0 0-.64-.639H3.5Z"
+        fill="#528693"
+      />
+      <path
+        d="M2.86 16.788c0-.353.286-.64.64-.64h2.453c.352 0 .639.287.639.64v2.453a.639.639 0 0 1-.64.639H3.5a.639.639 0 0 1-.639-.64v-2.452Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.5 15.51h2.452c.706 0 1.279.572 1.279 1.278v2.453c0 .706-.573 1.278-1.279 1.278H3.5a1.278 1.278 0 0 1-1.278-1.278v-2.453c0-.706.572-1.279 1.278-1.279Zm0 .639a.639.639 0 0 0-.64.639v2.453c0 .353.286.639.64.639h2.452a.639.639 0 0 0 .64-.64v-2.452a.639.639 0 0 0-.64-.64H3.5Z"
+        fill="#528693"
+      />
+      <path
+        d="M9.134 16.788c0-.353.286-.64.64-.64h2.453c.352 0 .639.287.639.64v2.453a.639.639 0 0 1-.64.639H9.774a.639.639 0 0 1-.639-.64v-2.452Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.773 15.51h2.454c.705 0 1.278.572 1.278 1.278v2.453c0 .706-.573 1.278-1.278 1.278H9.773a1.278 1.278 0 0 1-1.278-1.278v-2.453c0-.706.573-1.279 1.278-1.279Zm0 .639a.639.639 0 0 0-.639.639v2.453c0 .353.287.639.64.639h2.453a.639.639 0 0 0 .639-.64v-2.452a.639.639 0 0 0-.64-.64H9.774Z"
+        fill="#528693"
+      />
+      <path
+        d="M15.408 10.492a.64.64 0 0 1 .64-.639H18.5a.64.64 0 0 1 .639.64v8.748a.639.639 0 0 1-.64.639h-2.453a.64.64 0 0 1-.639-.64v-8.747Z"
+        fill="#fff"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.048 9.214H18.5c.706 0 1.278.573 1.278 1.278v8.749c0 .706-.572 1.278-1.278 1.278h-2.453a1.278 1.278 0 0 1-1.278-1.278v-8.748c0-.706.572-1.279 1.278-1.279Zm0 .64a.639.639 0 0 0-.64.639v8.748c0 .353.287.639.64.639H18.5a.639.639 0 0 0 .639-.64v-8.747a.639.639 0 0 0-.64-.64h-2.452Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Grid.displayName = 'GridIcon';

package/src/iconography/hooks.tsx

@@ -0,0 +1,26 @@
+import { forwardRef, SVGProps } from 'react';
+
+type HooksProps = SVGProps<SVGSVGElement>;
+
+type HooksRef = SVGSVGElement;
+
+export const Hooks = forwardRef<HooksRef, HooksProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="34" height="34" viewBox="0 0 34 34" {...delegated}>
+      <path
+        d="M13.3225 23.6578C13.0084 22.0351 13.5197 20.5568 12.6857 18.9973C12.4168 18.4953 11.6734 17.7783 11.2432 17.1868C11.2253 17.1594 10.0781 17.3302 9.94314 17.3387C9.47021 17.3644 8.99589 17.3404 8.52798 17.267C7.59689 17.1111 6.69399 16.8183 5.84862 16.3981C4.74695 15.8041 3.7796 14.9893 3.00698 14.0046C2.37959 13.2696 2.28997 12.947 2.36167 12.4951C2.43991 12.0661 2.60457 11.6575 2.84565 11.2941C3.0628 10.9126 3.3155 10.5525 3.6004 10.2186C4.20467 9.40329 4.90114 8.66059 5.67597 8.00526C7.1812 6.66607 8.94036 5.64323 10.8488 4.99758C10.945 4.9677 11.0462 4.9578 11.1463 4.96851C11.2464 4.97922 11.3433 5.0103 11.4309 5.05985C13.7169 6.42218 15.8764 10.6346 14.9264 14.2376C15.5967 14.9032 16.2002 15.6328 16.7283 16.416C17.3604 17.5667 17.7305 18.8427 17.8124 20.153C17.8172 21.2619 18.114 22.35 18.6728 23.3078C18.8458 23.5565 19.0677 23.7672 19.3249 23.9272C19.5821 24.0872 19.8692 24.1931 20.1687 24.2384C20.4682 24.2837 20.7738 24.2675 21.0668 24.1907C21.3598 24.1139 21.6341 23.9782 21.8729 23.7918C22.5136 23.3928 22.9879 22.775 23.2079 22.0531C23.5986 20.4193 23.5429 18.7105 23.0466 17.1057C22.8008 16.081 22.4987 15.0706 22.1418 14.0791C22.1141 13.9989 22.1138 13.9117 22.141 13.8313C22.1681 13.7508 22.2211 13.6817 22.2917 13.6346C22.3623 13.5874 22.4466 13.5651 22.5312 13.5709C22.6159 13.5767 22.6963 13.6105 22.7598 13.6668C27.5817 16.8038 29.5893 22.3785 25.1712 26.7259C22.3748 29.4685 17.5614 29.71 14.8641 26.69C14.0858 25.8371 13.5531 24.7893 13.3225 23.6578ZM3.66927 11.8092C3.6155 11.9035 3.25699 12.4092 3.27492 12.6158C3.28435 12.7857 3.49946 13.0187 3.65229 13.1979C5.40898 15.3584 7.9723 17.0075 10.7602 16.4339C10.0158 15.3584 9.59501 13.664 10.4639 12.6781C11.4677 11.5403 12.9291 11.9705 14.2018 13.4583C14.4443 12.3703 14.3885 11.237 14.0405 10.178C13.6783 8.96125 13.0611 7.8356 12.23 6.87597C12.0055 6.62502 11.3875 6.08726 11.1272 5.86272C11.0935 5.82993 11.0507 5.80813 11.0043 5.80021C10.958 5.79229 10.9104 5.79863 10.8677 5.81838C10.6073 5.93442 10.0431 6.18537 9.73558 6.32878C9.00471 6.69136 8.2959 7.0968 7.61285 7.54298C6.77126 8.12514 6.0017 8.80508 5.32029 9.56854C4.9037 10.0182 4.52028 10.4974 4.17307 11.0026C3.99193 11.2714 3.8306 11.5403 3.66927 11.8092ZM12.1659 13.1178C11.2073 13.0281 10.947 13.9329 11.2696 14.9461C11.6254 15.8488 12.1118 16.6943 12.7131 17.4557C13.1759 18.0368 13.5615 18.6755 13.8603 19.3558C14.0978 20.4137 14.1792 21.5008 14.1018 22.5823C14.152 23.5687 14.4576 24.5251 14.9886 25.3579C15.5197 26.1906 16.258 26.871 17.1312 27.3325C20.2238 28.9817 24.0419 27.4127 25.7627 24.5447C27.9939 20.8077 26.0759 17.2849 23.1211 14.8386C24.3853 17.9755 25.774 24.0428 21.0455 25.1004C20.4748 25.2583 19.8697 25.2411 19.3089 25.051C18.748 24.8609 18.2572 24.5067 17.9001 24.0343C17.2459 22.9093 16.917 21.6247 16.9501 20.3237C16.9237 18.7904 16.4227 17.3029 15.516 16.066C14.8905 15.3131 13.3131 13.23 12.1659 13.1178Z"
+        fill="#528693"
+      />
+      <path
+        d="M11.2701 14.9461C10.9475 13.9328 11.2079 13.0281 12.1664 13.1177C13.3136 13.2337 14.891 15.3131 15.5099 16.0659C16.4166 17.3028 16.9176 18.7903 16.944 20.3237C16.9109 21.6246 17.2398 22.9092 17.894 24.0342C18.2511 24.5066 18.7419 24.8609 19.3028 25.051C19.8636 25.2411 20.4687 25.2583 21.0394 25.1003C25.7717 24.0427 24.383 17.9754 23.115 14.8385C26.0727 17.2848 27.9907 20.8076 25.7566 24.5446C24.0358 27.4127 20.2177 28.9788 17.1251 27.3325C16.2519 26.871 15.5136 26.1905 14.9825 25.3578C14.4515 24.5251 14.1459 23.5686 14.0957 22.5823C14.1731 21.5007 14.0917 20.4137 13.8542 19.3557C13.5555 18.6755 13.1698 18.0368 12.707 17.4556C12.108 16.6938 11.6239 15.8483 11.2701 14.9461Z"
+        fill="white"
+      />
+      <path
+        d="M14.0388 10.178C14.3868 11.237 14.4426 12.3703 14.2001 13.4583C12.9274 11.9705 11.4642 11.5403 10.4622 12.6781C9.59333 13.664 10.0141 15.3584 10.7585 16.4339C7.97061 17.0075 5.40729 15.3584 3.65061 13.1979C3.49871 13.0187 3.28361 12.7856 3.27323 12.6158C3.25531 12.4092 3.61381 11.9073 3.66759 11.8092C3.82892 11.5403 3.99025 11.2714 4.1695 11.0025C4.51762 10.4973 4.90198 10.018 5.31955 9.56851C6.00096 8.80504 6.77052 8.12511 7.61211 7.54294C8.29586 7.09798 9.00531 6.6938 9.73673 6.33251C10.0415 6.18911 10.6056 5.93815 10.8689 5.82211C10.9115 5.80236 10.9591 5.79603 11.0055 5.80395C11.0518 5.81186 11.0946 5.83366 11.1283 5.86645C11.3887 6.09099 12.0066 6.62875 12.2312 6.87971C13.0608 7.83849 13.677 8.96279 14.0388 10.178Z"
+        fill="#bff6f8"
+      />
+    </svg>
+  );
+});
+
+Hooks.displayName = 'HooksIcon';

package/src/iconography/index.ts

@@ -1,29 +1,61 @@
+import { Add } from './add';
 import { Arrow } from './arrow';
 import { Atom } from './atom';
 import { Cancel } from './cancel';
+import { Catalogue } from './catalogue';
 import { Copy } from './copy';
 import { Crystal } from './crystal';
+import { Customers } from './customers';
 import { Edit } from './edit';
 import { Error } from './error';
+import { Fulfilment } from './fulfilment';
 import { Glasses } from './glasses';
 import { GraphQL } from './graphQL';
+import { Grid } from './grid';
+import { Hooks } from './hooks';
 import { Info } from './info';
+import { Key } from './key';
+import { Language } from './language';
 import { NailPolish } from './nail-polish';
+import { Order } from './order';
 import { Particle } from './particle';
+import { Percentage } from './percentage';
+import { PriceTag } from './price-tag';
+import { Subscription } from './subscription';
+import { Shapes } from './shapes';
+import { Topics } from './topics';
+import { Usage } from './usage';
+import { Users } from './users';
 import { Warning } from './warning';
 
 export const Icon = {
+  Add,
   Arrow,
   Atom,
   Cancel,
+  Catalogue,
   Copy,
   Crystal,
+  Customers,
   Edit,
   Error,
+  Fulfilment,
   Glasses,
   GraphQL,
+  Grid,
+  Hooks,
   Info,
+  Key,
+  Language,
   NailPolish,
+  Order,
   Particle,
+  Percentage,
+  PriceTag,
+  Subscription,
+  Shapes,
+  Topics,
+  Usage,
+  Users,
   Warning,
 };

package/src/iconography/key.tsx

@@ -0,0 +1,19 @@
+import { forwardRef, SVGProps } from 'react';
+
+type KeyProps = SVGProps<SVGSVGElement>;
+
+type KeyRef = SVGSVGElement;
+
+export const Key = forwardRef<KeyRef, KeyProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} viewBox="0 0 24 25" width="24" height="25" fill="none" {...delegated}>
+      <path
+        fill="#BFF6F8"
+        stroke="#528693"
+        d="M23.486 5.617a6.308 6.308 0 0 0-2.738-4.03 6.314 6.314 0 0 0-2.335-.942 6.251 6.251 0 0 0-2.51.051c-.928.212-1.799.637-2.545 1.243a6.435 6.435 0 0 0-1.762 2.257 6.617 6.617 0 0 0-.11 5.42 3308.703 3308.703 0 0 1-3.087 3.164l-.042-.043c-.335-.34-1.163-1.187-1.495-1.537-.315-.333-.644-.403-.868-.403-.323 0-.616.138-.868.41-.273.291-.633.671-1.007 1.039-.326.32-.395.657-.396.884 0 .33.135.633.402.9.353.35 1.191 1.208 1.535 1.56l-.545.556-.048-.05c-.331-.337-1.155-1.18-1.484-1.526-.256-.269-.549-.405-.868-.405h-.007c-.222 0-.552.073-.864.409-.312.336-.65.686-1.025 1.058-.319.317-.385.653-.385.878 0 .328.13.625.39.883.355.355 1.195 1.216 1.543 1.573l-.048.05c-.218.221-.443.45-.663.685-.419.449-.65 1.048-.643 1.67a2.41 2.41 0 0 0 1.436 2.181c.284.123.588.187.896.189a2.286 2.286 0 0 0 1.592-.661c.067-.065.127-.127.186-.187l.057-.06 9.604-9.845c.899.388 1.72.562 2.504.528h.017c1.04 0 2.003-.232 2.864-.692a6.458 6.458 0 0 0 2.862-3.016c.595-1.293.75-2.743.455-4.19ZM14.437 7.04c-.016-.738.295-1.487.851-2.056.567-.578 1.312-.9 2.043-.88.755.014 1.475.331 2.003.884.529.553.823 1.298.82 2.072 0 1.631-1.26 2.904-2.866 2.904h-.002c-1.563-.001-2.815-1.283-2.849-2.924Z"
+      />
+    </svg>
+  );
+});
+
+Key.displayName = 'KeyIcon';

package/src/iconography/language.tsx

@@ -0,0 +1,38 @@
+import { forwardRef, SVGProps } from 'react';
+
+type LanguageProps = SVGProps<SVGSVGElement>;
+
+type LanguageRef = SVGSVGElement;
+
+export const Language = forwardRef<LanguageRef, LanguageProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="34" height="34" viewBox="0 0 34 34" {...delegated}>
+      <path
+        d="M30.5976 16.5063C30.5976 22.7593 24.5125 27.8369 16.992 27.8369C15.3044 27.8426 13.6268 27.577 12.0234 27.0503C11.952 27.0265 11.8752 27.0241 11.8025 27.0433L5.1736 28.8175C5.10596 28.8354 5.03481 28.8352 4.96726 28.817C4.8997 28.7988 4.83811 28.7631 4.78864 28.7137C4.73916 28.6642 4.70354 28.6026 4.68532 28.535C4.66711 28.4675 4.66694 28.3963 4.68483 28.3287L5.99721 23.423C6.01325 23.3614 6.01408 23.2968 5.99962 23.2348C5.98517 23.1729 5.95587 23.1153 5.91425 23.0672C4.31448 21.2536 3.42138 18.9245 3.39844 16.5063C3.39844 10.2452 9.48757 5.16759 16.992 5.16759C24.4965 5.16759 30.5976 10.2452 30.5976 16.5063Z"
+        fill="#bff6f8"
+      />
+      <path
+        d="M30.0788 17.6827C29.8355 19.1578 29.2847 20.5653 28.4623 21.8139C27.64 23.0625 26.5643 24.1242 25.3051 24.9303C22.823 26.5558 19.918 27.4163 16.951 27.4051C15.4873 27.4097 14.0304 27.2061 12.6241 26.8004L12.3622 26.7214C12.2516 26.6814 12.1388 26.6481 12.0243 26.6215C11.7823 26.6191 11.5418 26.6608 11.3147 26.7444L10.2312 27.0373L8.06421 27.623L5.89723 28.2097L5.35448 28.3556L5.18756 28.4006C5.17204 28.4061 5.1551 28.4061 5.13958 28.4006C5.12437 28.394 5.11195 28.3823 5.10446 28.3676C5.09698 28.3528 5.0949 28.3358 5.0986 28.3197L5.21055 27.8999C5.6017 26.4452 5.99218 24.9889 6.382 23.5309C6.42538 23.3713 6.41769 23.2021 6.36001 23.0471C6.30518 22.92 6.22875 22.8034 6.13411 22.7023C6.02317 22.5674 5.91222 22.4314 5.80927 22.2895C5.59537 22.0116 5.40346 21.7158 5.21755 21.4169C4.85289 20.8119 4.55336 20.1699 4.32397 19.5018C3.81661 17.9497 3.71914 16.2928 4.04104 14.6919C4.36294 13.091 5.09325 11.6005 6.1611 10.3651C8.35449 7.87289 11.3774 6.2609 14.6691 5.82825C17.9548 5.31937 21.3168 5.89444 24.2466 7.46648C25.7034 8.20649 26.9747 9.26526 27.9661 10.5641C28.9574 11.863 29.6434 13.3686 29.9729 14.9689C30.1418 15.9755 30.3287 16.5032 30.5856 16.5062C30.7925 16.5162 31.0754 15.9415 30.8855 14.807C30.5415 13.0999 29.8235 11.4902 28.7831 10.0937C27.7427 8.69729 26.4057 7.54878 24.8683 6.73083C21.8707 5.07959 18.4283 4.41705 15.0319 4.83772C11.5245 5.19209 8.26109 6.79471 5.83626 9.35359C4.58424 10.7071 3.68694 12.3495 3.22448 14.1343C2.77278 16.0065 2.86396 17.9685 3.48736 19.7907C3.73717 20.5071 4.05971 21.196 4.44991 21.8467C4.64981 22.1686 4.85772 22.4874 5.09061 22.7923C5.20355 22.9472 5.3245 23.0981 5.44844 23.2471L5.5244 23.339V23.347L4.43991 27.3871L4.30498 27.8869C4.20395 28.1439 4.17897 28.4246 4.23301 28.6955C4.28122 28.8484 4.37045 28.9852 4.49099 29.0909C4.61154 29.1967 4.75878 29.2673 4.91669 29.2952C5.08104 29.3221 5.24952 29.3069 5.40646 29.2512L5.67133 29.1813L7.6614 28.6505L11.6595 27.582L11.9034 27.516L12.4032 27.673C12.7503 27.7743 13.1015 27.8635 13.4567 27.9408C17.2734 28.7656 21.2591 28.2062 24.7014 26.3626C26.2418 25.5246 27.598 24.3856 28.6895 23.0132C29.8845 21.5018 30.6559 19.6996 30.9244 17.7916C31.0374 16.0524 30.1918 16.1404 30.0788 17.6827Z"
+        fill="#528693"
+      />
+      <path
+        d="M5.13861 21.225C4.15137 19.5211 3.71269 17.5546 3.8822 15.5926C4.06884 13.6633 4.84617 11.8384 6.10815 10.3671C7.40438 8.89436 9.00803 7.72403 10.8059 6.93871C12.6149 6.1618 14.5535 5.73122 16.5212 5.66931C16.5838 5.66976 16.6459 5.65759 16.7036 5.63353C16.7614 5.60947 16.8137 5.57402 16.8575 5.52928C16.9013 5.48455 16.9356 5.43145 16.9584 5.37317C16.9812 5.31488 16.992 5.2526 16.9902 5.19004C16.9883 5.12748 16.9739 5.06593 16.9478 5.00906C16.9217 4.9522 16.8844 4.90118 16.8381 4.85906C16.7918 4.81693 16.7375 4.78457 16.6784 4.7639C16.6193 4.74323 16.5567 4.73468 16.4943 4.73875C14.4542 4.78872 12.4422 5.22559 10.5651 6.02614C8.57963 6.8682 6.81807 8.1619 5.42047 9.80437C4.14315 11.3274 3.31281 13.1746 3.0216 15.1409C2.7108 17.4061 3.19737 19.7089 4.39795 21.6548C4.67682 22.0896 5.3725 21.6258 5.13861 21.225Z"
+        fill="#528693"
+      />
+      <path
+        d="M29.6101 21.6668C30.7315 19.8193 31.2043 17.6504 30.9535 15.5037C30.6896 13.4243 29.8493 11.4602 28.5276 9.83341C27.1919 8.20648 25.4945 6.91407 23.5709 6.05918C21.6514 5.21908 19.5865 4.76109 17.4918 4.71082C17.4294 4.70673 17.3668 4.71526 17.3077 4.7359C17.2487 4.75653 17.1944 4.78885 17.1481 4.83092C17.1018 4.87299 17.0645 4.92395 17.0383 4.98077C17.0122 5.03758 16.9977 5.09908 16.9958 5.1616C16.9939 5.22412 17.0047 5.28638 17.0274 5.34467C17.0501 5.40295 17.0843 5.45606 17.128 5.50084C17.1716 5.54561 17.2239 5.58113 17.2816 5.60528C17.3393 5.62943 17.4013 5.6417 17.4638 5.64138C19.3885 5.69804 21.2859 6.11223 23.0592 6.8628C24.9123 7.6435 26.5528 8.85436 27.8449 10.3951C28.9933 11.7947 29.7429 13.478 30.0149 15.2678C30.3079 17.3291 29.9063 19.4293 28.8734 21.237C28.6405 21.6389 29.3362 22.1066 29.6101 21.6668Z"
+        fill="#528693"
+      />
+      <path
+        d="M15.0649 20.3634C15.2051 20.3177 15.3218 20.2188 15.3899 20.0879C15.4579 19.9571 15.4719 19.8048 15.4287 19.6637C15.1968 18.9411 14.913 18.2374 14.6781 17.5127C14.5241 17.037 14.3782 16.5592 14.2273 16.0814C14.0034 15.3587 13.7825 14.736 13.5536 14.0184C13.4357 13.6505 13.315 13.2841 13.1918 12.9189C13.0618 12.5361 13.0328 12.1822 12.609 12.0033C12.4383 11.9148 12.2407 11.8931 12.0549 11.9427C11.8691 11.9922 11.7085 12.1094 11.6045 12.2712C11.3876 12.771 11.2477 13.3217 11.0718 13.8385C10.4001 15.8155 9.79137 17.4368 9.04372 19.5927C9.01923 19.6636 9.00901 19.7386 9.01367 19.8135C9.01832 19.8883 9.03775 19.9615 9.07083 20.0287C9.10392 20.096 9.15 20.1561 9.20642 20.2055C9.26284 20.2548 9.32848 20.2925 9.39956 20.3164L9.49951 20.3494C9.57019 20.373 9.64484 20.3825 9.71918 20.3773C9.79353 20.372 9.86611 20.3522 9.93277 20.3188C9.99943 20.2855 10.0589 20.2394 10.1077 20.183C10.1565 20.1267 10.1937 20.0613 10.2172 19.9906C10.3581 19.5748 10.494 19.165 10.631 18.7521L13.8115 18.7282C13.9554 19.133 14.1113 19.5608 14.3052 20.0445C14.3585 20.1798 14.4614 20.2896 14.593 20.3513C14.7247 20.413 14.8749 20.422 15.0129 20.3764L15.0649 20.3634ZM11.0468 17.5117C11.1657 17.1619 11.2887 16.8021 11.4216 16.4272C11.7275 15.5586 11.9843 14.837 12.2512 13.9664C12.5171 14.76 12.787 15.5656 13.0708 16.4652C13.1918 16.851 13.3037 17.2089 13.4177 17.5647L11.0468 17.5117Z"
+        fill="#528693"
+      />
+      <path
+        d="M24.7824 12.9239C23.8978 12.9239 23.0382 12.9239 22.0886 12.9139L22.1086 12.1842C22.1112 12.1028 22.0973 12.0216 22.0677 11.9457C22.0382 11.8697 21.9936 11.8005 21.9367 11.7422C21.8798 11.6838 21.8116 11.6376 21.7364 11.6062C21.6612 11.5748 21.5804 11.559 21.4989 11.5595H21.4789C21.3213 11.56 21.17 11.6218 21.0571 11.7319C20.9442 11.842 20.8786 11.9917 20.8742 12.1493L20.8542 12.8939C19.9247 12.8739 19.3249 12.8489 18.3004 12.8639C18.1405 12.8666 17.9879 12.9319 17.8757 13.046C17.7635 13.1601 17.7007 13.3137 17.7007 13.4736V13.5136C17.7 13.5932 17.7152 13.6722 17.7454 13.7458C17.7755 13.8195 17.8201 13.8864 17.8763 13.9427C17.9326 13.999 17.9996 14.0435 18.0732 14.0737C18.1469 14.1038 18.2258 14.119 18.3054 14.1183L23.0032 14.1483C22.6715 15.3649 22.0008 16.4621 21.0691 17.3118H21.0591C20.7793 17.002 20.5094 16.6871 20.2645 16.3573C20.1745 16.2423 20.0846 16.1224 20.0046 15.9975C19.9846 15.9675 19.9646 15.9425 19.9446 15.9125C19.8602 15.7881 19.7318 15.7004 19.5853 15.667C19.4387 15.6336 19.285 15.6571 19.155 15.7326L19.105 15.7626C19.0343 15.8035 18.9727 15.8585 18.924 15.9241C18.8752 15.9898 18.8405 16.0647 18.8217 16.1442C18.803 16.2238 18.8008 16.3063 18.8151 16.3868C18.8294 16.4673 18.8601 16.544 18.9051 16.6122C18.9651 16.6971 19.0201 16.7871 19.0851 16.872C19.1139 16.9174 19.1456 16.9608 19.18 17.002C19.27 17.1269 19.3649 17.2519 19.4649 17.3718C19.6648 17.6167 19.8747 17.8516 20.1046 18.0865C19.5192 18.5204 18.8912 18.8938 18.2305 19.201C18.0989 19.2641 17.9948 19.373 17.9378 19.5073C17.8807 19.6416 17.8746 19.7921 17.9206 19.9306L17.9506 20.0206C18.0129 20.1654 18.1291 20.2803 18.2746 20.3409C18.4201 20.4016 18.5835 20.4032 18.7302 20.3454C19.3476 20.0762 19.934 19.7411 20.4794 19.3459C20.5744 19.2809 20.6643 19.2159 20.7493 19.146C20.8342 19.076 20.9292 19.011 21.0191 18.9361C21.2041 19.086 21.379 19.2309 21.5589 19.3609C21.6488 19.4308 21.7388 19.4958 21.8338 19.5608C21.8937 19.6008 21.9537 19.6457 22.0187 19.6807C22.1136 19.7457 22.2186 19.8057 22.3185 19.8606C22.3885 19.9006 22.4635 19.9406 22.5384 19.9806C22.6484 20.0356 22.7633 20.0905 22.8783 20.1455C23.0628 20.2308 23.2628 20.3108 23.478 20.3854C23.6245 20.4331 23.7838 20.4216 23.922 20.3534C24.0602 20.2853 24.1663 20.1658 24.2176 20.0206C24.2692 19.8795 24.266 19.7242 24.2087 19.5854C24.1513 19.4466 24.0439 19.3344 23.9078 19.2709C23.1936 18.9883 22.5211 18.6101 21.9087 18.1464C21.9687 18.0865 22.0337 18.0365 22.0886 17.9765C22.6101 17.4487 23.068 16.8617 23.453 16.2273C23.833 15.5983 24.0907 14.9031 24.2126 14.1783C24.2126 14.1783 24.2126 14.1783 24.2226 14.1783C24.4075 14.1783 24.5925 14.1783 24.7774 14.1783C24.9389 14.1778 25.0937 14.1134 25.2079 13.9991C25.3222 13.8849 25.3866 13.7301 25.3871 13.5686V13.5336C25.3884 13.4536 25.3737 13.3741 25.3439 13.2999C25.314 13.2256 25.2696 13.1581 25.2133 13.1013C25.1569 13.0445 25.0897 12.9995 25.0157 12.969C24.9417 12.9386 24.8624 12.9232 24.7824 12.9239Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Language.displayName = 'LanguageProps';