@crystallize/design-system 1.16.3 → 1.16.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/chunk-NIH5ZMPE.mjs +8 -0
  3. package/dist/index.css +173 -5
  4. package/dist/index.d.ts +58 -10
  5. package/dist/index.js +31643 -1339
  6. package/dist/index.mjs +2754 -1277
  7. package/dist/parser-babel-B7AMC4UT.mjs +8379 -0
  8. package/dist/parser-html-URMUOK6U.mjs +3222 -0
  9. package/dist/parser-postcss-AN2EJ77H.mjs +5621 -0
  10. package/dist/standalone-AR2ENVE7.mjs +11618 -0
  11. package/package.json +4 -2
  12. package/src/action-menu/action-item.tsx +1 -1
  13. package/src/action-menu/action-menu.css +2 -2
  14. package/src/action-menu/action-menu.tsx +3 -2
  15. package/src/dropdown-menu/dropdown-menu.css +31 -0
  16. package/src/iconography/Icon.stories.tsx +4 -4
  17. package/src/iconography/app.tsx +23 -10
  18. package/src/iconography/bell.tsx +24 -0
  19. package/src/iconography/billing-payments.tsx +8 -8
  20. package/src/iconography/cancel.tsx +1 -9
  21. package/src/iconography/caret.tsx +15 -0
  22. package/src/iconography/catalogue.tsx +24 -4
  23. package/src/iconography/choice.tsx +112 -0
  24. package/src/iconography/chunk.tsx +65 -0
  25. package/src/iconography/dashboard.tsx +13 -10
  26. package/src/iconography/date.tsx +114 -0
  27. package/src/iconography/document.tsx +15 -3
  28. package/src/iconography/file-upload.tsx +43 -0
  29. package/src/iconography/fixed-property-table.tsx +35 -0
  30. package/src/iconography/grid-relation.tsx +67 -0
  31. package/src/iconography/hand-mirror.tsx +39 -0
  32. package/src/iconography/image.tsx +21 -15
  33. package/src/iconography/index.ts +61 -7
  34. package/src/iconography/location.tsx +35 -0
  35. package/src/iconography/magnifier.tsx +40 -0
  36. package/src/iconography/numeric.tsx +36 -0
  37. package/src/iconography/paragraph-collection.tsx +69 -0
  38. package/src/iconography/percentage.tsx +18 -9
  39. package/src/iconography/pipeline-dashed.tsx +104 -0
  40. package/src/iconography/plug.tsx +38 -0
  41. package/src/iconography/price-tag.tsx +20 -11
  42. package/src/iconography/product.tsx +39 -10
  43. package/src/iconography/property-table.tsx +36 -0
  44. package/src/iconography/relation.tsx +25 -0
  45. package/src/iconography/renew.tsx +34 -0
  46. package/src/iconography/rich-text.tsx +47 -0
  47. package/src/iconography/selection.tsx +78 -0
  48. package/src/iconography/settings.tsx +7 -16
  49. package/src/iconography/singleline.tsx +25 -0
  50. package/src/iconography/split.tsx +54 -0
  51. package/src/iconography/stock-location.tsx +31 -33
  52. package/src/iconography/switch.tsx +56 -0
  53. package/src/iconography/video.tsx +46 -0
  54. package/src/index.ts +2 -0
  55. package/src/rich-text-editor/rich-text-editor.css +0 -1
  56. package/src/switch/Switch.stories.tsx +62 -0
  57. package/src/switch/index.tsx +3 -0
  58. package/src/switch/switch.css +13 -0
  59. package/src/switch/switch.tsx +12 -0
  60. package/src/tooltip/Tooltip.stories.tsx +62 -0
  61. package/src/tooltip/index.tsx +3 -0
  62. package/src/tooltip/tooltip.css +7 -0
  63. package/src/tooltip/tooltip.tsx +38 -0
  64. package/tailwind.config.cjs +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crystallize/design-system",
3
- "version": "1.16.3",
3
+ "version": "1.16.5",
4
4
  "types": "./dist/index.d.ts",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -45,9 +45,10 @@
45
45
  "@radix-ui/react-radio-group": "1.1.0",
46
46
  "@radix-ui/react-select": "1.1.2",
47
47
  "@radix-ui/react-slider": "^1.1.0",
48
+ "@radix-ui/react-tooltip": "1.0.0",
49
+ "@radix-ui/react-switch": "^1.0.2",
48
50
  "class-variance-authority": "^0.4.0",
49
51
  "lexical": "0.10.0",
50
- "prettier": "2.8.4",
51
52
  "use-debounce": "8.0.4"
52
53
  },
53
54
  "peerDependencies": {
@@ -82,6 +83,7 @@
82
83
  "concurrently": "^7.6.0",
83
84
  "hex-rgb": "4.3.0",
84
85
  "postcss": "^8.4.21",
86
+ "prettier": "2.8.4",
85
87
  "storybook": "7.0.12",
86
88
  "storybook-addon-designs": "^6.3.1",
87
89
  "storybook-dark-mode": "^2.0.5",
package/src/action-menu/action-item.tsx CHANGED
@@ -4,7 +4,7 @@ import { cx } from 'class-variance-authority';
4
4
  import { DropdownMenu } from '../dropdown-menu';
5
5
 
6
6
  type ItemProps = HTMLAttributes<HTMLLIElement> & {
7
- onSelect?: () => void;
7
+ onSelect?: (event: React.MouseEvent<HTMLDivElement>) => void;
8
8
  };
9
9
 
10
10
  export function Item({ children, className, onSelect }: ItemProps) {
package/src/action-menu/action-menu.css CHANGED
@@ -32,7 +32,7 @@
32
32
  @apply h-6 w-6 p-0.5;
33
33
 
34
34
  .c-action-menu-dot {
35
- @apply h-0.5 w-0.5;
35
+ @apply h-0.5 w-0.5 shrink-0;
36
36
  }
37
37
  }
38
38
 
@@ -40,7 +40,7 @@
40
40
  @apply h-8 w-8 p-1;
41
41
 
42
42
  .c-action-menu-dot {
43
- @apply h-1 w-1;
43
+ @apply h-[3px] w-[3px] shrink-0;
44
44
  }
45
45
  }
46
46
 
package/src/action-menu/action-menu.tsx CHANGED
@@ -23,11 +23,12 @@ type ActionMenuProps = ButtonStylesProps & {
23
23
  container?: Container;
24
24
  tabIndex?: number;
25
25
  disabled?: boolean;
26
+ onOpenChange?: (open: boolean) => void;
26
27
  };
27
28
 
28
- export function ActionMenu({ children, container, tabIndex, size, disabled }: ActionMenuProps) {
29
+ export function ActionMenu({ children, tabIndex, size, ...delegated }: ActionMenuProps) {
29
30
  return (
30
- <DropdownMenu.Root content={children} alignContent="center" container={container} disabled={disabled}>
31
+ <DropdownMenu.Root content={children} alignContent="center" {...delegated}>
31
32
  <button
32
33
  aria-label="more options"
33
34
  className={buttonStyles({ size })}
package/src/dropdown-menu/dropdown-menu.css CHANGED
@@ -1,7 +1,16 @@
1
1
  .c-dropdown-menu-content {
2
+ animation-duration: 0.4s;
3
+ animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
2
4
  @apply shadow;
3
5
  }
4
6
 
7
+ .c-dropdown-menu-content[data-side='top'] {
8
+ animation-name: slideUp;
9
+ }
10
+ .c-dropdown-menu-content[data-side='bottom'] {
11
+ animation-name: slideDown;
12
+ }
13
+
5
14
  .c-dropdown-menu-label {
6
15
  @apply bg-elevate px-4 pb-1 pt-3 font-sans text-[11px] font-bold text-gray-500-400;
7
16
  @apply first:rounded-tl first:rounded-tr;
@@ -25,3 +34,25 @@
25
34
 
26
35
  @apply first:rounded-tl first:rounded-tr last:rounded-bl last:rounded-br;
27
36
  }
37
+
38
+ @keyframes slideUp {
39
+ from {
40
+ opacity: 0;
41
+ transform: translateY(10px);
42
+ }
43
+ to {
44
+ opacity: 1;
45
+ transform: translateY(0);
46
+ }
47
+ }
48
+
49
+ @keyframes slideDown {
50
+ from {
51
+ opacity: 0;
52
+ transform: translateY(-10px);
53
+ }
54
+ to {
55
+ opacity: 1;
56
+ transform: translateY(0);
57
+ }
58
+ }
package/src/iconography/Icon.stories.tsx CHANGED
@@ -20,14 +20,14 @@ export const AllIcons: Story = {
20
20
  render: () => {
21
21
  return (
22
22
  <div>
23
- <div className="grid grid-cols-6 justify-items-center gap-6">
23
+ <div className="flex flex-wrap gap-6">
24
24
  {Object.keys(Icon).map(iconName => {
25
25
  // @ts-expect-error
26
26
  const Cmp = Icon[iconName];
27
27
  const cmpString = `<Icon.${iconName} />`;
28
28
  return (
29
29
  <div
30
- className="cursor-pointer text-center active:scale-95"
30
+ className="w-36 h-36 cursor-pointer text-center active:scale-95"
31
31
  onClick={() => {
32
32
  const type = 'text/plain';
33
33
  const blob = new Blob([cmpString], { type });
@@ -35,9 +35,9 @@ export const AllIcons: Story = {
35
35
  }}
36
36
  >
37
37
  <Card title={cmpString}>
38
- <Cmp width={25} height={25} />
38
+ <Cmp width={44} height={44} />
39
39
  </Card>
40
- <div className="mt-2 whitespace-nowrap text-xs text-gray-700-200">{cmpString}</div>
40
+ <div className="mt-2 whitespace-nowrap text-xs text-gray-800-100">{cmpString}</div>
41
41
  </div>
42
42
  );
43
43
  })}
package/src/iconography/app.tsx CHANGED
@@ -6,29 +6,42 @@ type AppRef = SVGSVGElement;
6
6
 
7
7
  export const App = forwardRef<AppRef, AppProps>((delegated, ref) => {
8
8
  return (
9
- <svg ref={ref} width="22" height="23" viewBox="0 0 22 23" fill="none" {...delegated}>
9
+ <svg ref={ref} width="23" height="22" viewBox="0 0 23 22" fill="none" {...delegated}>
10
10
  <path
11
- d="M6.532 10.785a.48.48 0 0 1 .68 0l4.658 4.658a.48.48 0 0 1 0 .68l-2.175 2.176a3.775 3.775 0 0 1-5.339 0"
12
- fill="#fff"
11
+ d="M6.94421 10.3665L11.5685 15.0336L8.47632 18.0974L6.47453 18.3414L4.52157 17.2917L3.71598 15.412L3.85206 13.4302L6.94421 10.3665Z"
12
+ fill="white"
13
+ />
14
+ <path
15
+ d="M15.1414 11.5504L10.4956 6.90464L13.5736 3.82668L15.5743 3.57334L17.532 4.61402L18.3463 6.48999L18.2194 8.47245L15.1414 11.5504Z"
16
+ fill="#BFF6F8"
17
+ className="c-icon-fill"
13
18
  />
14
19
  <path
15
20
  fillRule="evenodd"
16
21
  clipRule="evenodd"
17
- d="m6.872 11.357-2.06 2.06a3.13 3.13 0 0 0 4.427 4.426l2.06-2.06-4.427-4.426Zm.34-.572a.48.48 0 0 0-.68 0L4.356 12.96A3.775 3.775 0 0 0 9.695 18.3l2.175-2.176a.48.48 0 0 0 0-.68l-4.658-4.658Z"
22
+ d="M6.87189 10.6379L4.81246 12.6973C3.59021 13.9196 3.59021 15.9012 4.81246 17.1235C6.03471 18.3457 8.01636 18.3457 9.23861 17.1235L11.298 15.064L6.87189 10.6379ZM7.21168 10.0656C7.02402 9.8779 6.71976 9.8779 6.53209 10.0656L4.35639 12.2413C2.88227 13.7154 2.88227 16.1054 4.3564 17.5795C5.83052 19.0537 8.22055 19.0537 9.69467 17.5795L11.8704 15.4038C12.058 15.2162 12.058 14.9119 11.8704 14.7242L7.21168 10.0656Z"
18
23
  fill="#528693"
19
24
  />
20
25
  <path
21
- d="m4.106 17.698.87.87L2.9 20.64c-.24.24-.629.24-.869 0M17.894 5.74l-.87-.869L19.1 2.797c.24-.24.629-.24.87 0M9.74 9.942c.241-.24.63-.24.87 0M11.864 12.052c.24-.24.63-.24.87 0"
26
+ fillRule="evenodd"
27
+ clipRule="evenodd"
28
+ d="M15.2183 11.2539L17.2777 9.19452C18.4999 7.97227 18.4999 5.99062 17.2777 4.76837C16.0554 3.54613 14.0738 3.54613 12.8515 4.76837L10.7921 6.8278L15.2183 11.2539ZM14.8785 11.8263C15.0661 12.0139 15.3704 12.0139 15.5581 11.8263L17.7338 9.65058C19.2079 8.17646 19.2079 5.78643 17.7338 4.31231C16.2596 2.83819 13.8696 2.83819 12.3955 4.31231L10.2198 6.488C10.0321 6.67567 10.0321 6.97993 10.2198 7.1676L14.8785 11.8263Z"
22
29
  fill="#528693"
23
30
  />
24
31
  <path
25
- d="M15.558 12.545a.48.48 0 0 1-.68 0L10.22 7.887a.48.48 0 0 1 0-.68l2.175-2.176a3.775 3.775 0 0 1 5.339 0"
26
- fill="#BFF6F8"
32
+ d="M7.995 10.9602L9.66618 9.29681C9.92785 9.03636 10.3511 9.03735 10.6116 9.29902V9.29902C10.872 9.56068 10.871 9.98394 10.6093 10.2444L8.93816 11.9078L7.995 10.9602Z"
33
+ fill="#528693"
27
34
  />
28
35
  <path
29
- fillRule="evenodd"
30
- clipRule="evenodd"
31
- d="m15.218 11.973 2.06-2.06a3.13 3.13 0 0 0-4.426-4.426l-2.06 2.06 4.426 4.426Zm-.34.572a.48.48 0 0 0 .68 0l2.176-2.175a3.775 3.775 0 0 0-5.339-5.339L10.22 7.207a.48.48 0 0 0 0 .68l4.659 4.658Z"
36
+ d="M4.85858 17.9601L3.1874 19.6235C2.92573 19.884 2.50247 19.883 2.24202 19.6213V19.6213C1.98157 19.3597 1.98256 18.9364 2.24423 18.676L3.91541 17.0126L4.85858 17.9601Z"
37
+ fill="#528693"
38
+ />
39
+ <path
40
+ d="M10 12.9849L11.6712 11.3215C11.9329 11.0611 12.3561 11.0621 12.6166 11.3237V11.3237C12.877 11.5854 12.876 12.0087 12.6144 12.2691L10.9432 13.9325L10 12.9849Z"
41
+ fill="#528693"
42
+ />
43
+ <path
44
+ d="M17.0557 3.9101L18.7269 2.2467C18.9885 1.98625 19.4118 1.98724 19.6723 2.24891V2.24891C19.9327 2.51057 19.9317 2.93383 19.67 3.19428L17.9989 4.85768L17.0557 3.9101Z"
32
45
  fill="#528693"
33
46
  />
34
47
  </svg>
package/src/iconography/bell.tsx ADDED
@@ -0,0 +1,24 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type BellProps = SVGProps<SVGSVGElement>;
4
+
5
+ type BellRef = SVGSVGElement;
6
+
7
+ export const Bell = forwardRef<BellRef, BellProps>((delegated, ref) => {
8
+ return (
9
+ <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
10
+ <path
11
+ d="M10.8806 17.5061L12.8571 17.5204C12.7572 17.8415 12.5859 18.134 12.3576 18.3766C12.182 18.5616 11.969 18.7069 11.7327 18.8029C11.4965 18.8989 11.2424 18.9433 10.9876 18.9332C10.5675 18.9127 10.1632 18.7663 9.82728 18.5131C9.49136 18.2599 9.23933 17.9115 9.1039 17.5133H10.8806V17.5061ZM11.744 6.16095C11.1958 6.06577 10.635 6.0706 10.0886 6.17522C10.1029 5.63293 10.0886 5.09065 10.0743 4.60545C10.0738 4.43402 10.1248 4.26638 10.2206 4.12424C10.3165 3.98211 10.4528 3.87201 10.6119 3.80821C10.771 3.74441 10.9456 3.72984 11.1131 3.76639C11.2806 3.80294 11.4332 3.88893 11.5513 4.01321C11.7083 4.17019 11.8011 4.37712 11.8153 4.59831L11.8225 6.17522C11.8156 6.17244 11.8079 6.17244 11.8011 6.17522C11.7797 6.16095 11.7654 6.17522 11.744 6.16095V6.16095ZM6.12134 14.8375C6.61178 13.7332 6.89478 12.548 6.95617 11.3412C6.97044 10.9488 7.00612 10.5563 7.0632 10.1639C7.16967 9.61843 7.38307 9.09946 7.69111 8.63691C8.17609 7.90544 8.89265 7.35803 9.72589 7.08243C10.5591 6.80684 11.4608 6.81905 12.2863 7.11708L12.5075 7.20271C12.7402 7.29398 12.9607 7.41382 13.1639 7.55947C13.2781 7.63083 13.378 7.71645 13.485 7.80207L13.6063 7.90197C13.7411 8.02889 13.8697 8.16224 13.9916 8.30155L14.1343 8.48707L14.3127 8.7368L14.4126 8.90805L14.5696 9.20773L14.6481 9.38612L14.7622 9.70721L14.8193 9.92127C14.8814 10.123 14.9197 10.3314 14.9335 10.542L14.9549 10.7418L14.9977 11.2913L15.0262 11.6052L15.0405 11.805C15.0487 11.8328 15.0535 11.8616 15.0548 11.8906L15.0762 12.0761C15.119 12.3616 15.1689 12.647 15.2332 12.9324L15.2546 13.0323C15.3402 13.4033 15.4401 13.7672 15.5685 14.1168L15.5756 14.1454L15.5899 14.1739L15.7255 14.5521C15.9801 15.1631 16.2881 15.7505 16.6459 16.3074L16.9242 16.7355L16.9171 16.7426H13.1425C11.694 16.7284 10.267 16.7284 8.78995 16.7284L7.19877 16.7355H5.02963L5.30078 16.3288C5.40781 16.1718 5.50056 16.0148 5.60046 15.8507C5.79311 15.5225 5.96436 15.18 6.12134 14.8232V14.8375Z"
12
+ fill="#BFF6F8"
13
+ />
14
+ <path
15
+ fillRule="evenodd"
16
+ clipRule="evenodd"
17
+ d="M8.78995 16.7284C10.267 16.7284 11.694 16.7284 13.1425 16.7427H16.9171L16.9242 16.7355L16.6459 16.3074C16.6108 16.2528 16.5762 16.1979 16.5421 16.1427C16.2282 15.6351 15.9551 15.1032 15.7255 14.5521L15.5899 14.1739L15.5756 14.1454L15.5685 14.1169C15.4401 13.7672 15.3402 13.4033 15.2546 13.0323L15.2331 12.9324C15.1689 12.647 15.119 12.3616 15.0762 12.0762L15.0548 11.8906C15.0535 11.8616 15.0487 11.8329 15.0405 11.805L15.0262 11.6052L14.9977 11.2913L14.9549 10.7419L14.9335 10.5421C14.9197 10.3314 14.8814 10.1231 14.8193 9.92129L14.7622 9.70723L14.648 9.38614L14.5696 9.20776L14.4126 8.90808L14.3127 8.73683L14.1343 8.48709L13.9916 8.30157C13.8697 8.16226 13.7411 8.02891 13.6063 7.90199L13.485 7.8021C13.4654 7.78644 13.4461 7.77079 13.4269 7.75522C13.341 7.68564 13.2572 7.61781 13.1639 7.5595C12.9607 7.41385 12.7402 7.29401 12.5075 7.20273L12.2863 7.11711C11.4608 6.81907 10.5591 6.80687 9.72588 7.08246C8.89264 7.35805 8.17608 7.90547 7.6911 8.63693C7.38307 9.09949 7.16966 9.61845 7.0632 10.1639C7.00611 10.5563 6.97044 10.9488 6.95617 11.3412C6.90517 12.3436 6.7013 13.331 6.35266 14.2696C6.28336 14.4562 6.20834 14.6408 6.12766 14.8233C6.12731 14.824 6.12697 14.8248 6.12663 14.8256C6.12486 14.8296 6.1231 14.8336 6.12133 14.8375V14.8233C6.11958 14.8272 6.11783 14.8312 6.11607 14.8352C6.11573 14.836 6.11539 14.8368 6.11504 14.8375C6.03392 15.0213 5.94898 15.2012 5.85924 15.3773C5.77723 15.5383 5.69122 15.6961 5.60045 15.8508C5.584 15.8778 5.56775 15.9046 5.55159 15.9313C5.50979 16.0003 5.46865 16.0682 5.42652 16.1355C5.38601 16.2003 5.34459 16.2646 5.30077 16.3288L5.02963 16.7355H7.19877L8.78995 16.7284ZM8.53272 17.3296C8.49374 17.4508 8.49382 17.5829 8.53584 17.7064C8.71 18.2186 9.03412 18.6666 9.46611 18.9922C9.8981 19.3179 10.418 19.5061 10.9583 19.5325L10.9638 19.5327C11.304 19.5462 11.6431 19.4869 11.9586 19.3588C12.274 19.2307 12.5584 19.0367 12.7928 18.7897L12.7945 18.7879C13.0852 18.479 13.303 18.1068 13.43 17.6987C13.4665 17.5813 13.4657 17.4572 13.4302 17.3427H16.9171C17.0762 17.3427 17.2288 17.2795 17.3413 17.1669L17.3485 17.1598C17.5489 16.9594 17.5817 16.6461 17.4273 16.4085L17.1507 15.9831C17.1504 15.9826 17.1502 15.9822 17.1499 15.9818C16.8142 15.4591 16.5248 14.9082 16.2851 14.3351L16.1547 13.9715C16.1503 13.9592 16.1455 13.947 16.1403 13.935C16.1376 13.9266 16.1348 13.9183 16.1317 13.91C16.0152 13.5928 15.9222 13.2563 15.8402 12.9019L15.8198 12.8067L15.8185 12.8007C15.7591 12.5368 15.7121 12.2697 15.671 11.9971L15.6527 11.8381C15.6497 11.7961 15.6439 11.7544 15.6355 11.7132L15.6247 11.5625L15.5956 11.2408L15.5531 10.6952L15.5515 10.6779L15.5313 10.4899C15.5141 10.2411 15.4688 9.99494 15.3963 9.75625L15.342 9.55263C15.3378 9.53698 15.333 9.52149 15.3275 9.50623L15.2134 9.18514C15.2085 9.1714 15.2031 9.15784 15.1972 9.1445L15.1187 8.96611C15.1133 8.95366 15.1074 8.9414 15.1011 8.92936L14.9441 8.62967C14.9399 8.6216 14.9354 8.61362 14.9309 8.60575L14.831 8.43451C14.8217 8.41858 14.8116 8.40309 14.8009 8.38808L14.6225 8.13835C14.6184 8.13258 14.6142 8.12688 14.6099 8.12126L14.4672 7.93574C14.4595 7.92571 14.4514 7.91592 14.4431 7.90639C14.3084 7.75257 14.1665 7.60532 14.0176 7.46518C14.0079 7.45607 13.998 7.44728 13.9877 7.43884L13.8664 7.33894L13.8598 7.33358C13.846 7.3225 13.8307 7.3101 13.8142 7.29669C13.7325 7.23031 13.6203 7.13916 13.4988 7.06139C13.2593 6.8915 12.9999 6.75138 12.7265 6.64415L12.5029 6.55757L12.49 6.55276C12.4364 6.53341 12.3825 6.5151 12.3284 6.49783C12.3894 6.40206 12.423 6.28946 12.4225 6.17253L12.4153 4.59562C12.4153 4.58364 12.4149 4.57166 12.4141 4.55971C12.3907 4.197 12.2388 3.85481 11.981 3.5944C11.7809 3.38603 11.5234 3.24182 11.241 3.18021C10.9562 3.11805 10.6592 3.14283 10.3886 3.25134C10.118 3.35984 9.88615 3.54709 9.72315 3.78882C9.56014 4.03056 9.47345 4.31566 9.47431 4.60722L9.47456 4.62311C9.48885 5.1088 9.50256 5.63583 9.48878 6.15946C9.4856 6.28054 9.5191 6.39823 9.58282 6.49807C9.56769 6.5029 9.55257 6.50781 9.53747 6.51281C8.57678 6.83055 7.75059 7.46165 7.19133 8.30492C6.8396 8.83326 6.5959 9.42599 6.47431 10.0489C6.47246 10.0584 6.47083 10.068 6.46944 10.0775C6.4095 10.4897 6.3719 10.9022 6.35673 11.315C6.30022 12.4158 6.04737 13.4973 5.61034 14.5087C5.59612 14.5319 5.58333 14.5562 5.57214 14.5816C5.42357 14.9193 5.26343 15.2392 5.08539 15.543C5.06844 15.5708 5.05211 15.5978 5.03622 15.624C4.95445 15.7589 4.88459 15.8741 4.80503 15.9908L4.5304 16.4027C4.40765 16.5868 4.39621 16.8236 4.50062 17.0186C4.60503 17.2137 4.80835 17.3355 5.02963 17.3355L7.19877 17.3355L8.53272 17.3296ZM11.5513 4.01324C11.4332 3.88895 11.2806 3.80297 11.1131 3.76642C10.9456 3.72987 10.771 3.74443 10.6119 3.80824C10.4528 3.87204 10.3165 3.98213 10.2206 4.12427C10.1248 4.26641 10.0738 4.43404 10.0743 4.60547C10.0832 4.90767 10.0921 5.23201 10.0941 5.5647C10.0953 5.76618 10.094 5.97071 10.0886 6.17524C10.2877 6.13711 10.4888 6.11224 10.6905 6.10063C10.8675 6.09044 11.045 6.09047 11.2221 6.10074C11.3968 6.11086 11.571 6.13094 11.744 6.16097C11.7547 6.16811 11.7636 6.16811 11.7725 6.16811C11.7814 6.16811 11.7904 6.16811 11.8011 6.17524C11.8079 6.17247 11.8156 6.17247 11.8225 6.17524L11.8153 4.59834C11.8011 4.37714 11.7083 4.17022 11.5513 4.01324ZM9.42442 18.1133C9.2864 17.933 9.17779 17.7306 9.1039 17.5133H10.8805L10.8806 17.5061L12.8571 17.5204C12.7905 17.7345 12.6921 17.936 12.5663 18.1183C12.5034 18.2095 12.4337 18.2958 12.3576 18.3767C12.182 18.5616 11.969 18.7069 11.7327 18.8029C11.4965 18.8989 11.2424 18.9433 10.9876 18.9332C10.5675 18.9127 10.1632 18.7663 9.82727 18.5131C9.67465 18.3981 9.53934 18.2634 9.42442 18.1133Z"
18
+ fill="#528693"
19
+ />
20
+ </svg>
21
+ );
22
+ });
23
+
24
+ Bell.displayName = 'BellIcon';
package/src/iconography/billing-payments.tsx CHANGED
@@ -11,49 +11,49 @@ export const BillingPayments = forwardRef<BillingPaymentsRef, BillingPaymentsPro
11
11
  fill="#BFF6F8"
12
12
  fillRule="evenodd"
13
13
  d="M16.785 3.571v14.85a.057.057 0 0 1-.057.057h-.386a.63.63 0 0 1-.198-.032l-1.177-.392a1.657 1.657 0 0 0-1.047 0l-.991.33a.63.63 0 0 1-.398 0l-.99-.33a1.657 1.657 0 0 0-1.048 0l-1.265.422a.058.058 0 0 1-.018.002H5.305a.057.057 0 0 1-.057-.057V3.571c0-.031.025-.057.057-.057h.476a.63.63 0 0 1 .104.009l1.432.238c.18.03.364.03.545 0L9.2 3.538a.628.628 0 0 1 .206 0l1.338.223c.18.03.364.03.545 0l1.432-.238a.628.628 0 0 1 .103-.009h3.904c.032 0 .057.026.057.057Z"
14
- clip-rule="evenodd"
14
+ clipRule="evenodd"
15
15
  />
16
16
  <path
17
17
  fill="#528693"
18
18
  fillRule="evenodd"
19
19
  d="m10.493 18.054.19.57-1.265.42a.657.657 0 0 1-.208.034H5.305a.657.657 0 0 1-.657-.657V3.571c0-.363.294-.657.657-.657h.476c.068 0 .136.006.202.017l1.433.238c.115.02.232.02.347 0l1.338-.223c.134-.022.27-.022.404 0l1.338.223c.115.02.232.02.347 0l1.433-.238a1.23 1.23 0 0 1 .202-.017h3.903c.363 0 .657.294.657.657v14.85a.657.657 0 0 1-.657.657h-.386c-.132 0-.263-.02-.388-.063l-1.177-.392a1.056 1.056 0 0 0-.668 0l-.19-.569c.34-.113.708-.113 1.048 0l1.177.392a.626.626 0 0 0 .198.032h.386a.057.057 0 0 0 .057-.057V3.571a.057.057 0 0 0-.057-.057h-3.904a.627.627 0 0 0-.103.009l-1.432.238c-.18.03-.365.03-.545 0l-1.338-.223a.628.628 0 0 0-.206 0l-1.338.223c-.18.03-.365.03-.545 0l-1.432-.238a.628.628 0 0 0-.104-.009h-.476a.057.057 0 0 0-.057.057v14.85c0 .032.025.057.057.057H9.21a.056.056 0 0 0 .018-.003l1.265-.421Zm2.436.33a.628.628 0 0 1-.398 0l-.99-.33a1.657 1.657 0 0 0-1.048 0l.19.57c.216-.073.45-.073.668 0l.99.33c.253.084.525.084.777 0l.991-.33-.19-.57-.99.33Z"
20
- clip-rule="evenodd"
20
+ clipRule="evenodd"
21
21
  />
22
22
  <path
23
23
  fill="#fff"
24
24
  fillRule="evenodd"
25
25
  d="M9.873 7.227a1.428 1.428 0 0 1-2.853 0 1.428 1.428 0 0 1 2.853 0Z"
26
- clip-rule="evenodd"
26
+ clipRule="evenodd"
27
27
  />
28
28
  <path
29
29
  fill="#528693"
30
30
  fillRule="evenodd"
31
31
  d="M10.373 7.227v.02a1.928 1.928 0 0 1-3.853 0v-.039a1.928 1.928 0 0 1 3.853 0v.02ZM8.447 8.6c.77 0 1.398-.609 1.427-1.372a1.428 1.428 0 0 0-2.853 0c.03.763.657 1.372 1.426 1.372Z"
32
- clip-rule="evenodd"
32
+ clipRule="evenodd"
33
33
  />
34
34
  <path
35
35
  fill="#fff"
36
36
  fillRule="evenodd"
37
37
  d="M7.022 12.51c.028.21.207.373.425.373h7.71a.428.428 0 0 0 .425-.372.428.428 0 0 0-.425-.372h-7.71a.428.428 0 0 0-.425.372Z"
38
- clip-rule="evenodd"
38
+ clipRule="evenodd"
39
39
  />
40
40
  <path
41
41
  fill="#528693"
42
42
  fillRule="evenodd"
43
43
  d="m6.518 12.51.008-.064a.928.928 0 0 1 .92-.807h7.711c.472 0 .861.351.92.807l.01.065-.01.065a.928.928 0 0 1-.92.807h-7.71a.928.928 0 0 1-.92-.807l-.01-.065Zm.504 0c.028.21.207.373.425.373h7.71a.428.428 0 0 0 .425-.372.428.428 0 0 0-.425-.372h-7.71a.428.428 0 0 0-.425.372Z"
44
- clip-rule="evenodd"
44
+ clipRule="evenodd"
45
45
  />
46
46
  <path
47
47
  fill="#fff"
48
48
  fillRule="evenodd"
49
49
  d="M11.591 14.795c.028.21.207.373.425.373h3.141a.428.428 0 0 0 .425-.373.428.428 0 0 0-.425-.372h-3.141a.428.428 0 0 0-.425.372Z"
50
- clip-rule="evenodd"
50
+ clipRule="evenodd"
51
51
  />
52
52
  <path
53
53
  fill="#528693"
54
54
  fillRule="evenodd"
55
55
  d="m11.087 14.795.008-.065a.928.928 0 0 1 .92-.807h3.142c.472 0 .86.352.92.807l.01.065-.01.065a.929.929 0 0 1-.92.808h-3.141a.929.929 0 0 1-.92-.808l-.01-.065Zm.504 0c.028.21.207.373.425.373h3.141a.428.428 0 0 0 .425-.373.428.428 0 0 0-.425-.372h-3.141a.428.428 0 0 0-.425.372Z"
56
- clip-rule="evenodd"
56
+ clipRule="evenodd"
57
57
  />
58
58
  </svg>
59
59
  );
package/src/iconography/cancel.tsx CHANGED
@@ -6,15 +6,7 @@ type CancelRef = SVGSVGElement;
6
6
 
7
7
  export const Cancel = forwardRef<CancelRef, CancelProps>((delegated, ref) => {
8
8
  return (
9
- <svg
10
- ref={ref}
11
- width="34"
12
- height="34"
13
- viewBox="0 0 34 34"
14
- fill="none"
15
- xmlns="http://www.w3.org/2000/svg"
16
- {...delegated}
17
- >
9
+ <svg ref={ref} width="34" height="34" viewBox="0 0 34 34" fill="none" {...delegated}>
18
10
  <path
19
11
  d="m27.4301 24.4325-.1299.1299c-.17.15-.6497.5798-1.1695 1.0595l-1.7392 1.5993-.1499.05a.2783.2783 0 0 1-.2299-.14l-3.6183-3.7182-2.6088-2.6388a1.0488 1.0488 0 0 0-.7926-.3838 1.006 1.006 0 0 0-.7096.2899l-5.6474 5.6773-.7696.7496-.07.18h-.2599l-2.6987-2.7088a.3813.3813 0 0 1-.18-.2598l.02-.14 5.6674-5.6173 1.2394-1.2395a.2995.2995 0 0 0 .1-.2398.2903.2903 0 0 0-.1-.2299l-1.8591-1.8692-2.8487-2.8786-1.5692-1.5992-.6197-.6597-.1-.09v-.12a.3689.3689 0 0 1 .12-.2398l2.7786-2.6588.11-.09h.14l.1099.06 5.7273 5.9272.8696.8796a.6998.6998 0 0 0 .9995 0l5.9672-6.0071.1799-.18a4.5467 4.5467 0 0 1 .5597-.5197.5585.5585 0 0 1 .19-.1c.1099 0 .2099.13.2998.22l.08.0899 2.039 2.109s.1899.2.2299.2499a.864.864 0 0 0 .1399.13.7704.7704 0 0 1 .13.1199c.0899.1499 0 .2598-.1799.4298l-6.1172 6.0871a1.3994 1.3994 0 0 0-.5197.7696.9287.9287 0 0 0 .2899.7997l3.0185 2.9786 3.4284 3.1785a2.001 2.001 0 0 1 .1999.2398.2564.2564 0 0 1 .0853.1524.2564.2564 0 0 1-.0323.1715Z"
20
12
  fill="currentColor"
package/src/iconography/caret.tsx ADDED
@@ -0,0 +1,15 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type CaretProps = SVGProps<SVGSVGElement>;
4
+
5
+ type CaretRef = SVGSVGElement;
6
+
7
+ export const Caret = forwardRef<CaretRef, CaretProps>((delegated, ref) => {
8
+ return (
9
+ <svg ref={ref} width="8" height="8" viewBox="0 0 17 15" fill="none" {...delegated}>
10
+ <path d="M15.463 1.2L8.5 12.685 1.537 1.2h13.925zM1.353.896s0 0 0 0h0z" stroke="#5B5178" strokeWidth={2.4} />
11
+ </svg>
12
+ );
13
+ });
14
+
15
+ Caret.displayName = 'CaretIcon';
package/src/iconography/catalogue.tsx CHANGED
@@ -7,16 +7,36 @@ export const Catalogue = forwardRef<CatalogueRef, CatalogueProps>((delegated, re
7
7
  return (
8
8
  <svg ref={ref} width="22" height="23" viewBox="0 0 22 23" fill="none" {...delegated}>
9
9
  <path
10
- 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"
10
+ d="M4.2482 5H19.2482V17.77C19.2482 17.9357 19.1139 18.07 18.9482 18.07H4.5482C4.38251 18.07 4.2482 17.9357 4.2482 17.77V5Z"
11
+ fill="white"
12
+ />
13
+ <path
14
+ fillRule="evenodd"
15
+ clipRule="evenodd"
16
+ d="M3.6482 4.40002H19.8482V17.77C19.8482 18.2671 19.4452 18.67 18.9482 18.67H4.5482C4.05115 18.67 3.6482 18.2671 3.6482 17.77V4.40002ZM4.2482 5.00002V17.77C4.2482 17.9357 4.38252 18.07 4.5482 18.07H18.9482C19.1139 18.07 19.2482 17.9357 19.2482 17.77V5.00002H4.2482Z"
11
17
  fill="#528693"
12
18
  />
13
19
  <path
14
- 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"
15
- fill="#fff"
20
+ d="M4.2482 4.09999C4.2482 3.9343 4.38251 3.79999 4.5482 3.79999H9.44818C10.5527 3.79999 11.4482 4.69055 11.4482 5.79512C11.4482 10.295 11.4482 20.6644 11.4482 18.3C11.4482 15.6938 6.01455 16.1064 4.58789 16.2596C4.40683 16.2791 4.2482 16.1375 4.2482 15.9555V4.09999Z"
21
+ fill="#BFF6F8"
22
+ className="c-icon-fill"
16
23
  />
17
24
  <path
18
- 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"
25
+ fillRule="evenodd"
26
+ clipRule="evenodd"
27
+ d="M10.8482 17.0526C9.39503 15.8516 5.72305 16.1377 4.58789 16.2596C4.40683 16.2791 4.2482 16.1376 4.2482 15.9555V4.10001C4.2482 3.93433 4.38252 3.80001 4.5482 3.80001H9.44818C10.5527 3.80001 11.4482 4.69057 11.4482 5.79514V18.3C11.4482 17.7675 11.2213 17.3611 10.8482 17.0526ZM4.5482 3.20001H9.44818C10.8822 3.20001 12.0482 4.3573 12.0482 5.79514V18.6453L10.8482 18.6459V18.3C10.8482 17.9061 10.6632 17.6165 10.2637 17.3719C9.83738 17.111 9.21099 16.9374 8.47427 16.8399C7.0114 16.6462 5.35494 16.7807 4.65196 16.8562C4.11888 16.9135 3.6482 16.497 3.6482 15.9555V4.10001C3.6482 3.60296 4.05114 3.20001 4.5482 3.20001Z"
28
+ fill="#528693"
29
+ />
30
+ <path
31
+ d="M19.2482 4.09999C19.2482 3.9343 19.1139 3.79999 18.9482 3.79999H14.0482C12.9437 3.79999 12.0482 4.69055 12.0482 5.79512C12.0482 10.295 12.0482 20.6644 12.0482 18.3C12.0482 15.6938 17.4818 16.1064 18.9085 16.2596C19.0896 16.2791 19.2482 16.1375 19.2482 15.9555V4.09999Z"
19
32
  fill="#BFF6F8"
33
+ className="c-icon-fill"
34
+ />
35
+ <path
36
+ fillRule="evenodd"
37
+ clipRule="evenodd"
38
+ d="M12.6482 17.0526C14.1014 15.8516 17.7734 16.1377 18.9085 16.2596C19.0896 16.2791 19.2482 16.1376 19.2482 15.9555V4.10001C19.2482 3.93433 19.1139 3.80001 18.9482 3.80001H14.0482C12.9437 3.80001 12.0482 4.69057 12.0482 5.79514V18.3C12.0482 17.7675 12.2751 17.3611 12.6482 17.0526ZM18.9482 3.20001H14.0482C12.6142 3.20001 11.4482 4.3573 11.4482 5.79514V18.6453L12.6482 18.6459V18.3C12.6482 17.9061 12.8333 17.6165 13.2327 17.3719C13.659 17.111 14.2854 16.9374 15.0221 16.8399C16.485 16.6462 18.1415 16.7807 18.8444 16.8562C19.3775 16.9135 19.8482 16.497 19.8482 15.9555V4.10001C19.8482 3.60296 19.4453 3.20001 18.9482 3.20001Z"
39
+ fill="#528693"
20
40
  />
21
41
  </svg>
22
42
  );
package/src/iconography/choice.tsx ADDED
@@ -0,0 +1,112 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type ChoiceProps = SVGProps<SVGSVGElement>;
4
+
5
+ type ChoiceRef = SVGSVGElement;
6
+
7
+ export const Choice = forwardRef<ChoiceRef, ChoiceProps>((delegated, ref) => {
8
+ return (
9
+ <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
10
+ <path
11
+ d="M4.41882 7.19426C4.32073 6.87774 4.4978 6.54164 4.81432 6.44354L16.1116 2.94246C16.4281 2.84437 16.7642 3.02144 16.8623 3.33796L17.0991 4.1021C17.1972 4.41862 17.0201 4.75473 16.7036 4.85282L5.40636 8.35391C5.08984 8.452 4.75373 8.27493 4.65564 7.95841L4.41882 7.19426Z"
12
+ fill="#BFF6F8"
13
+ className="c-icon-fill"
14
+ />
15
+ <path
16
+ fillRule="evenodd"
17
+ clipRule="evenodd"
18
+ d="M4.6367 5.87043L15.9339 2.36934C16.567 2.17316 17.2392 2.5273 17.4354 3.16034L17.6722 3.92448C17.8684 4.55752 17.5142 5.22974 16.8812 5.42592L5.58395 8.92701C4.95091 9.12319 4.2787 8.76905 4.08251 8.13601L3.8457 7.37187C3.64952 6.73883 4.00366 6.06661 4.6367 5.87043ZM4.81431 6.44354C4.49779 6.54163 4.32072 6.87774 4.41881 7.19426L4.65562 7.9584C4.75371 8.27492 5.08982 8.45199 5.40634 8.3539L16.7036 4.85281C17.0201 4.75472 17.1972 4.41861 17.0991 4.10209L16.8623 3.33795C16.7642 3.02143 16.4281 2.84436 16.1115 2.94245L4.81431 6.44354Z"
19
+ fill="#528693"
20
+ />
21
+ <path
22
+ d="M11.159 5.13452C11.4903 5.13452 11.759 5.40315 11.759 5.73452L11.759 17.5618C11.759 17.8932 11.4903 18.1618 11.159 18.1618L10.359 18.1618C10.0276 18.1618 9.75897 17.8932 9.75897 17.5618L9.75897 5.73452C9.75897 5.40315 10.0276 5.13452 10.359 5.13452L11.159 5.13452Z"
23
+ fill="#BFF6F8"
24
+ className="c-icon-fill"
25
+ />
26
+ <path
27
+ fillRule="evenodd"
28
+ clipRule="evenodd"
29
+ d="M12.3589 5.73455L12.3589 17.5618C12.3589 18.2246 11.8217 18.7618 11.1589 18.7618L10.3589 18.7618C9.69621 18.7618 9.15895 18.2246 9.15895 17.5618L9.15895 5.73455C9.15895 5.0718 9.69621 4.53455 10.3589 4.53455L11.1589 4.53455C11.8217 4.53455 12.3589 5.0718 12.3589 5.73455ZM11.7589 5.73455C11.7589 5.40318 11.4903 5.13455 11.1589 5.13455L10.3589 5.13455C10.0276 5.13455 9.75895 5.40317 9.75895 5.73455L9.75895 17.5618C9.75895 17.8932 10.0276 18.1618 10.3589 18.1618L11.1589 18.1618C11.4903 18.1618 11.7589 17.8932 11.7589 17.5618L11.7589 5.73455Z"
30
+ fill="#528693"
31
+ />
32
+ <path
33
+ d="M11.882 4.45216C12.4678 5.03794 12.4678 5.98769 11.882 6.57348C11.2962 7.15926 10.3465 7.15926 9.76067 6.57348C9.17489 5.98769 9.17489 5.03794 9.76067 4.45216C10.3465 3.86637 11.2962 3.86637 11.882 4.45216Z"
34
+ fill="white"
35
+ />
36
+ <path
37
+ fillRule="evenodd"
38
+ clipRule="evenodd"
39
+ d="M12.3063 4.02789C13.1264 4.84799 13.1264 6.17764 12.3063 6.99774C11.4862 7.81784 10.1565 7.81784 9.33643 6.99774C8.51632 6.17764 8.51632 4.84799 9.33643 4.02789C10.1565 3.20779 11.4862 3.20779 12.3063 4.02789ZM11.882 6.57348C12.4678 5.98769 12.4678 5.03794 11.882 4.45216C11.2962 3.86637 10.3465 3.86637 9.76069 4.45216C9.1749 5.03794 9.1749 5.98769 9.76069 6.57348C10.3465 7.15926 11.2962 7.15926 11.882 6.57348Z"
40
+ fill="#528693"
41
+ />
42
+ <path
43
+ d="M2.37395 14.5829C2.37395 13.2567 4.93533 9.30006 4.93533 9.30006C4.93533 9.30006 7.4967 13.2567 7.4967 14.5829C7.4967 15.9091 6.34994 16.9842 4.93533 16.9842C3.52072 16.9842 2.37395 15.9091 2.37395 14.5829Z"
44
+ fill="white"
45
+ />
46
+ <path
47
+ fillRule="evenodd"
48
+ clipRule="evenodd"
49
+ d="M5.43897 8.97398L4.9353 9.30003L4.43163 8.97398C4.54221 8.80316 4.73182 8.70003 4.9353 8.70003C5.13878 8.70003 5.3284 8.80316 5.43897 8.97398ZM4.58198 9.86268C4.79583 9.51548 4.9353 9.30003 4.9353 9.30003C4.9353 9.30003 5.07477 9.51548 5.28863 9.86268C5.99122 11.0034 7.49668 13.5661 7.49668 14.5829C7.49668 15.9091 6.34991 16.9842 4.9353 16.9842C3.52069 16.9842 2.37392 15.9091 2.37392 14.5829C2.37392 13.5661 3.87938 11.0034 4.58198 9.86268ZM4.43163 8.97398C4.43167 8.97391 4.43163 8.97398 4.9353 9.30003C5.43897 8.97398 5.43893 8.97391 5.43897 8.97398L5.44712 8.98661L5.46938 9.02129C5.48872 9.05149 5.51684 9.0956 5.55251 9.15201C5.62382 9.2648 5.72534 9.42689 5.84703 9.62537C6.09011 10.0218 6.41504 10.5658 6.74073 11.1532C7.06536 11.7387 7.39617 12.3771 7.64751 12.9606C7.88632 13.5149 8.09668 14.1141 8.09668 14.5829C8.09668 16.2763 6.64422 17.5842 4.9353 17.5842C3.22639 17.5842 1.77392 16.2763 1.77392 14.5829C1.77392 14.1141 1.98428 13.5149 2.22309 12.9606C2.47443 12.3771 2.80525 11.7387 3.12987 11.1532C3.45556 10.5658 3.78049 10.0218 4.02357 9.62537C4.14526 9.42689 4.24679 9.2648 4.3181 9.15201C4.35376 9.0956 4.38189 9.05149 4.40122 9.02129L4.42348 8.98661L4.43163 8.97398Z"
50
+ fill="#528693"
51
+ />
52
+ <path
53
+ fillRule="evenodd"
54
+ clipRule="evenodd"
55
+ d="M4.9353 14.9765C6.06138 14.9765 6.9756 14.2166 7.16158 13.2462L7.75085 13.3592C7.50667 14.6333 6.32721 15.5765 4.9353 15.5765C3.54339 15.5765 2.36393 14.6333 2.11975 13.3592L2.70902 13.2462C2.895 14.2166 3.80922 14.9765 4.9353 14.9765Z"
56
+ fill="#528693"
57
+ />
58
+ <path
59
+ d="M3.65462 16.9841C1.94704 15.9596 2.08934 14.5651 2.37393 13.9959C5.10609 16.3865 6.92748 14.7074 7.49666 13.569C8.1797 14.935 7.49666 15.8458 7.06977 16.1303C6.04522 17.4964 4.36611 17.2687 3.65462 16.9841Z"
60
+ fill="#BFF6F8"
61
+ className="c-icon-fill"
62
+ />
63
+ <path
64
+ fillRule="evenodd"
65
+ clipRule="evenodd"
66
+ d="M5.43897 8.97398L4.9353 9.30003L4.43163 8.97398C4.54221 8.80316 4.73182 8.70003 4.9353 8.70003C5.13878 8.70003 5.3284 8.80316 5.43897 8.97398ZM4.58198 9.86268C4.79583 9.51548 4.9353 9.30003 4.9353 9.30003C4.9353 9.30003 5.07477 9.51548 5.28863 9.86268C5.99122 11.0034 7.49668 13.5661 7.49668 14.5829C7.49668 15.9091 6.34991 16.9842 4.9353 16.9842C3.52069 16.9842 2.37392 15.9091 2.37392 14.5829C2.37392 13.5661 3.87938 11.0034 4.58198 9.86268ZM4.43163 8.97398C4.43167 8.97391 4.43163 8.97398 4.9353 9.30003C5.43897 8.97398 5.43893 8.97391 5.43897 8.97398L5.44712 8.98661L5.46938 9.02129C5.48872 9.05149 5.51684 9.0956 5.55251 9.15201C5.62382 9.2648 5.72534 9.42689 5.84703 9.62537C6.09011 10.0218 6.41504 10.5658 6.74073 11.1532C7.06536 11.7387 7.39617 12.3771 7.64751 12.9606C7.88632 13.5149 8.09668 14.1141 8.09668 14.5829C8.09668 16.2763 6.64422 17.5842 4.9353 17.5842C3.22639 17.5842 1.77392 16.2763 1.77392 14.5829C1.77392 14.1141 1.98428 13.5149 2.22309 12.9606C2.47443 12.3771 2.80525 11.7387 3.12987 11.1532C3.45556 10.5658 3.78049 10.0218 4.02357 9.62537C4.14526 9.42689 4.24679 9.2648 4.3181 9.15201C4.35376 9.0956 4.38189 9.05149 4.40122 9.02129L4.42348 8.98661L4.43163 8.97398Z"
67
+ fill="#528693"
68
+ />
69
+ <path
70
+ fillRule="evenodd"
71
+ clipRule="evenodd"
72
+ d="M4.9353 14.9765C6.06138 14.9765 6.9756 14.2166 7.16158 13.2462L7.75085 13.3592C7.50667 14.6333 6.32721 15.5765 4.9353 15.5765C3.54339 15.5765 2.36393 14.6333 2.11975 13.3592L2.70902 13.2462C2.895 14.2166 3.80922 14.9765 4.9353 14.9765Z"
73
+ fill="#528693"
74
+ />
75
+ <path
76
+ d="M14.574 10.7829C14.574 9.45672 17.1353 5.50007 17.1353 5.50007C17.1353 5.50007 19.6967 9.45672 19.6967 10.7829C19.6967 12.1091 18.5499 13.1842 17.1353 13.1842C15.7207 13.1842 14.574 12.1091 14.574 10.7829Z"
77
+ fill="white"
78
+ />
79
+ <path
80
+ fillRule="evenodd"
81
+ clipRule="evenodd"
82
+ d="M17.639 5.17399L17.1353 5.50005L16.6316 5.17399C16.7422 5.00318 16.9318 4.90005 17.1353 4.90005C17.3388 4.90005 17.5284 5.00318 17.639 5.17399ZM16.782 6.06269C16.9958 5.71549 17.1353 5.50005 17.1353 5.50005C17.1353 5.50005 17.2748 5.71549 17.4886 6.06269C18.1912 7.20337 19.6967 9.76616 19.6967 10.7829C19.6967 12.1091 18.5499 13.1842 17.1353 13.1842C15.7207 13.1842 14.5739 12.1091 14.5739 10.7829C14.5739 9.76616 16.0794 7.20337 16.782 6.06269ZM16.6316 5.17399C16.6317 5.17392 16.6316 5.17399 17.1353 5.50005C17.639 5.17399 17.6389 5.17392 17.639 5.17399L17.6471 5.18662L17.6694 5.2213C17.6887 5.2515 17.7169 5.29561 17.7525 5.35202C17.8238 5.46481 17.9254 5.6269 18.047 5.82538C18.2901 6.22185 18.6151 6.76578 18.9407 7.35321C19.2654 7.9387 19.5962 8.57713 19.8475 9.16058C20.0863 9.71495 20.2967 10.3141 20.2967 10.7829C20.2967 12.4763 18.8442 13.7842 17.1353 13.7842C15.4264 13.7842 13.9739 12.4763 13.9739 10.7829C13.9739 10.3141 14.1843 9.71495 14.4231 9.16058C14.6744 8.57713 15.0053 7.9387 15.3299 7.3532C15.6556 6.76578 15.9805 6.22185 16.2236 5.82538C16.3453 5.6269 16.4468 5.46481 16.5181 5.35202C16.5538 5.29561 16.5819 5.2515 16.6012 5.2213L16.6235 5.18662L16.6316 5.17399Z"
83
+ fill="#528693"
84
+ />
85
+ <path
86
+ fillRule="evenodd"
87
+ clipRule="evenodd"
88
+ d="M17.1353 11.1766C18.2614 11.1766 19.1756 10.4166 19.3616 9.44625L19.9509 9.55918C19.7067 10.8333 18.5272 11.7766 17.1353 11.7766C15.7434 11.7765 14.5639 10.8333 14.3198 9.55918L14.909 9.44625C15.095 10.4166 16.0092 11.1765 17.1353 11.1766Z"
89
+ fill="#528693"
90
+ />
91
+ <path
92
+ d="M15.8546 13.1842C14.147 12.1596 14.2893 10.7651 14.5739 10.1959C17.3061 12.5865 19.1275 10.9074 19.6967 9.76898C20.3797 11.1351 19.6967 12.0458 19.2698 12.3304C18.2452 13.6964 16.5661 13.4688 15.8546 13.1842Z"
93
+ fill="#BFF6F8"
94
+ className="c-icon-fill"
95
+ />
96
+ <path
97
+ fillRule="evenodd"
98
+ clipRule="evenodd"
99
+ d="M17.639 5.17399L17.1353 5.50005L16.6316 5.17399C16.7422 5.00318 16.9318 4.90005 17.1353 4.90005C17.3388 4.90005 17.5284 5.00318 17.639 5.17399ZM16.782 6.06269C16.9958 5.71549 17.1353 5.50005 17.1353 5.50005C17.1353 5.50005 17.2748 5.71549 17.4886 6.06269C18.1912 7.20337 19.6967 9.76616 19.6967 10.7829C19.6967 12.1091 18.5499 13.1842 17.1353 13.1842C15.7207 13.1842 14.5739 12.1091 14.5739 10.7829C14.5739 9.76616 16.0794 7.20337 16.782 6.06269ZM16.6316 5.17399C16.6317 5.17392 16.6316 5.17399 17.1353 5.50005C17.639 5.17399 17.6389 5.17392 17.639 5.17399L17.6471 5.18662L17.6694 5.2213C17.6887 5.2515 17.7169 5.29561 17.7525 5.35202C17.8238 5.46481 17.9254 5.6269 18.047 5.82538C18.2901 6.22185 18.6151 6.76578 18.9407 7.35321C19.2654 7.9387 19.5962 8.57713 19.8475 9.16058C20.0863 9.71495 20.2967 10.3141 20.2967 10.7829C20.2967 12.4763 18.8442 13.7842 17.1353 13.7842C15.4264 13.7842 13.9739 12.4763 13.9739 10.7829C13.9739 10.3141 14.1843 9.71495 14.4231 9.16058C14.6744 8.57713 15.0053 7.9387 15.3299 7.3532C15.6556 6.76578 15.9805 6.22185 16.2236 5.82538C16.3453 5.6269 16.4468 5.46481 16.5181 5.35202C16.5538 5.29561 16.5819 5.2515 16.6012 5.2213L16.6235 5.18662L16.6316 5.17399Z"
100
+ fill="#528693"
101
+ />
102
+ <path
103
+ fillRule="evenodd"
104
+ clipRule="evenodd"
105
+ d="M17.1353 11.1766C18.2614 11.1766 19.1756 10.4166 19.3616 9.44625L19.9509 9.55918C19.7067 10.8333 18.5272 11.7766 17.1353 11.7766C15.7434 11.7765 14.5639 10.8333 14.3198 9.55918L14.909 9.44625C15.095 10.4166 16.0092 11.1765 17.1353 11.1766Z"
106
+ fill="#528693"
107
+ />
108
+ </svg>
109
+ );
110
+ });
111
+
112
+ Choice.displayName = 'Choice';
package/src/iconography/chunk.tsx ADDED
@@ -0,0 +1,65 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type ChunkProps = SVGProps<SVGSVGElement>;
4
+
5
+ type ChunkRef = SVGSVGElement;
6
+
7
+ export const Chunk = forwardRef<ChunkRef, ChunkProps>((delegated, ref) => {
8
+ return (
9
+ <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
10
+ <path
11
+ d="M3.06335 3.90974L18.9301 3.56995V11.996L11.0307 20.0652L10.7759 11.3844L6.66478 9.51576L3.06335 5.91432V3.90974Z"
12
+ fill="white"
13
+ />
14
+ <path
15
+ fillRule="evenodd"
16
+ clipRule="evenodd"
17
+ d="M19.257 3.14909C19.3293 3.2187 19.3702 3.31477 19.3702 3.41517V12.0316C19.3702 12.1295 19.3313 12.2234 19.2621 12.2927L11.2611 20.2936C11.1644 20.3903 11.0222 20.4257 10.8914 20.3854C4.38134 18.3823 2.62982 14.4935 2.62982 12.647V4.03064C2.62982 3.83222 2.78663 3.66927 2.9849 3.66164L18.9867 3.04617C19.0871 3.04231 19.1846 3.07947 19.257 3.14909ZM3.36837 4.38599V12.647C3.36837 14.0667 4.78463 17.6612 10.897 19.6132L18.6317 11.8786V3.79892L3.36837 4.38599Z"
18
+ fill="#528693"
19
+ />
20
+ <path
21
+ d="M2.99908 13.2624V5.87695C5.95327 9.3235 9.56394 11.0057 11 11.4161V20.0324C5.09163 18.063 3.20424 14.6985 2.99908 13.2624Z"
22
+ fill="#BFF6F8"
23
+ className="c-icon-fill"
24
+ />
25
+ <path
26
+ fillRule="evenodd"
27
+ clipRule="evenodd"
28
+ d="M2.9991 3.66138C3.20304 3.66138 3.36837 3.82671 3.36837 4.03065C3.36837 5.46661 4.81721 9.12736 11.1086 11.0632C11.2636 11.1108 11.3693 11.254 11.3693 11.4161V20.0325C11.3693 20.2364 11.204 20.4018 11 20.4018C10.7961 20.4018 10.6307 20.2364 10.6307 20.0325V11.687C4.33444 9.66149 2.62982 5.85223 2.62982 4.03065C2.62982 3.82671 2.79515 3.66138 2.9991 3.66138Z"
29
+ fill="#528693"
30
+ />
31
+ <path
32
+ fillRule="evenodd"
33
+ clipRule="evenodd"
34
+ d="M19.262 3.15406C19.4063 3.29827 19.4063 3.53208 19.262 3.67629L11.2611 11.6772C11.1169 11.8214 10.8831 11.8214 10.7389 11.6772C10.5947 11.533 10.5947 11.2992 10.7389 11.155L18.7398 3.15406C18.884 3.00985 19.1178 3.00985 19.262 3.15406Z"
35
+ fill="#528693"
36
+ />
37
+ <path
38
+ fillRule="evenodd"
39
+ clipRule="evenodd"
40
+ d="M17.9441 6.9338C18.0402 7.02994 18.0402 7.18581 17.9441 7.28195L12.405 12.8211C12.3089 12.9172 12.153 12.9172 12.0568 12.8211C11.9607 12.7249 11.9607 12.569 12.0568 12.4729L17.5959 6.9338C17.6921 6.83766 17.848 6.83766 17.9441 6.9338Z"
41
+ fill="#528693"
42
+ />
43
+ <path
44
+ fillRule="evenodd"
45
+ clipRule="evenodd"
46
+ d="M17.9441 8.78017C18.0402 8.87631 18.0402 9.03219 17.9441 9.12833L12.405 14.6674C12.3089 14.7636 12.153 14.7636 12.0568 14.6674C11.9607 14.5713 11.9607 14.4154 12.0568 14.3193L17.5959 8.78017C17.6921 8.68403 17.848 8.68403 17.9441 8.78017Z"
47
+ fill="#528693"
48
+ />
49
+ <path
50
+ fillRule="evenodd"
51
+ clipRule="evenodd"
52
+ d="M17.9441 10.6265C18.0402 10.7226 18.0402 10.8785 17.9441 10.9746L12.405 16.5137C12.3089 16.6099 12.153 16.6099 12.0568 16.5137C11.9607 16.4176 11.9607 16.2617 12.0568 16.1656L17.5959 10.6265C17.6921 10.5303 17.848 10.5303 17.9441 10.6265Z"
53
+ fill="#528693"
54
+ />
55
+ <path
56
+ fillRule="evenodd"
57
+ clipRule="evenodd"
58
+ d="M19.257 3.14909C19.3293 3.2187 19.3702 3.31477 19.3702 3.41517V12.0316C19.3702 12.1295 19.3313 12.2234 19.2621 12.2927L11.2611 20.2936C11.1644 20.3903 11.0222 20.4257 10.8914 20.3854C4.38134 18.3823 2.62982 14.4935 2.62982 12.647V4.03064C2.62982 3.83222 2.78663 3.66927 2.9849 3.66164L18.9867 3.04617C19.0871 3.04231 19.1846 3.07947 19.257 3.14909ZM3.36837 4.38599V12.647C3.36837 14.0667 4.78463 17.6612 10.897 19.6132L18.6317 11.8786V3.79892L3.36837 4.38599Z"
59
+ fill="#528693"
60
+ />
61
+ </svg>
62
+ );
63
+ });
64
+
65
+ Chunk.displayName = 'Chunk';