@crystallize/design-system 1.16.4 → 1.16.6

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 (60) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/chunk-NIH5ZMPE.mjs +8 -0
  3. package/dist/index.css +174 -5
  4. package/dist/index.d.ts +54 -10
  5. package/dist/index.js +31444 -1333
  6. package/dist/index.mjs +2424 -1140
  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/billing-payments.tsx +8 -8
  19. package/src/iconography/cancel.tsx +1 -9
  20. package/src/iconography/catalogue.tsx +24 -4
  21. package/src/iconography/choice.tsx +112 -0
  22. package/src/iconography/chunk.tsx +65 -0
  23. package/src/iconography/dashboard.tsx +13 -10
  24. package/src/iconography/date.tsx +114 -0
  25. package/src/iconography/document.tsx +15 -3
  26. package/src/iconography/file-upload.tsx +43 -0
  27. package/src/iconography/fixed-property-table.tsx +35 -0
  28. package/src/iconography/grid-relation.tsx +67 -0
  29. package/src/iconography/image.tsx +21 -15
  30. package/src/iconography/index.ts +53 -7
  31. package/src/iconography/location.tsx +35 -0
  32. package/src/iconography/magnifier.tsx +40 -0
  33. package/src/iconography/numeric.tsx +36 -0
  34. package/src/iconography/paragraph-collection.tsx +69 -0
  35. package/src/iconography/percentage.tsx +18 -9
  36. package/src/iconography/plug.tsx +38 -0
  37. package/src/iconography/price-tag.tsx +20 -11
  38. package/src/iconography/product.tsx +39 -10
  39. package/src/iconography/property-table.tsx +36 -0
  40. package/src/iconography/relation.tsx +25 -0
  41. package/src/iconography/rich-text.tsx +47 -0
  42. package/src/iconography/selection.tsx +78 -0
  43. package/src/iconography/settings.tsx +7 -16
  44. package/src/iconography/singleline.tsx +25 -0
  45. package/src/iconography/split.tsx +54 -0
  46. package/src/iconography/stock-location.tsx +31 -33
  47. package/src/iconography/switch.tsx +56 -0
  48. package/src/iconography/video.tsx +46 -0
  49. package/src/index.ts +2 -0
  50. package/src/input-with-label/input-with-label.tsx +4 -3
  51. package/src/rich-text-editor/rich-text-editor.css +0 -1
  52. package/src/switch/Switch.stories.tsx +62 -0
  53. package/src/switch/index.tsx +3 -0
  54. package/src/switch/switch.css +13 -0
  55. package/src/switch/switch.tsx +12 -0
  56. package/src/tooltip/Tooltip.stories.tsx +62 -0
  57. package/src/tooltip/index.tsx +3 -0
  58. package/src/tooltip/tooltip.css +7 -0
  59. package/src/tooltip/tooltip.tsx +38 -0
  60. 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.4",
3
+ "version": "1.16.6",
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/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/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';
package/src/iconography/dashboard.tsx CHANGED
@@ -6,45 +6,48 @@ type DashboardRef = SVGSVGElement;
6
6
 
7
7
  export const Dashboard = forwardRef<DashboardRef, DashboardProps>((delegated, ref) => {
8
8
  return (
9
- <svg ref={ref} viewBox="0 0 23 23" width="23" height="23" fill="none" {...delegated}>
9
+ <svg ref={ref} viewBox="0 0 22 22" width="22" height="22" fill="none" {...delegated}>
10
10
  <path
11
- d="M2.117 2.907c0-.223.18-.403.402-.403h7.583c.223 0 .403.18.403.403V8.11c0 .223-.18.403-.403.403H2.52a.403.403 0 0 1-.402-.403V2.907Z"
11
+ d="M2.97202 3.8573C2.97202 3.30501 3.41973 2.8573 3.97202 2.8573H9.46361C10.0159 2.8573 10.4636 3.30502 10.4636 3.8573V7.22395C10.4636 7.77623 10.0159 8.22395 9.46361 8.22395H3.97202C3.41973 8.22395 2.97202 7.77623 2.97202 7.22395V3.8573Z"
12
12
  fill="#BFF6F8"
13
+ className="c-icon-fill"
13
14
  />
14
15
  <path
15
16
  fillRule="evenodd"
16
17
  clipRule="evenodd"
17
- d="M2.788 3.176V7.84h7.045V3.176H2.788Zm-.269-.672a.403.403 0 0 0-.402.403V8.11c0 .223.18.403.402.403h7.583c.223 0 .403-.18.403-.403V2.907a.403.403 0 0 0-.403-.403H2.52Z"
18
+ d="M9.46361 3.4573H3.97202C3.7511 3.4573 3.57202 3.63639 3.57202 3.8573V7.22395C3.57202 7.44486 3.7511 7.62395 3.97202 7.62395H9.46361C9.68453 7.62395 9.86361 7.44486 9.86361 7.22395V3.8573C9.86361 3.63639 9.68453 3.4573 9.46361 3.4573ZM3.97202 2.8573C3.41973 2.8573 2.97202 3.30501 2.97202 3.8573V7.22395C2.97202 7.77623 3.41973 8.22395 3.97202 8.22395H9.46361C10.0159 8.22395 10.4636 7.77623 10.4636 7.22395V3.8573C10.4636 3.30502 10.0159 2.8573 9.46361 2.8573H3.97202Z"
18
19
  fill="#528693"
19
20
  />
20
21
  <path
21
- d="M11.706 14.89c0-.223.18-.403.403-.403h7.583c.222 0 .402.18.402.403v5.203c0 .223-.18.403-.402.403h-7.583a.403.403 0 0 1-.403-.403V14.89Z"
22
- fill="#fff"
22
+ d="M11.5363 14.5594C11.5363 14.0071 11.9841 13.5594 12.5363 13.5594H18.0279C18.5802 13.5594 19.0279 14.0071 19.0279 14.5594V17.926C19.0279 18.4783 18.5802 18.926 18.0279 18.926H12.5363C11.9841 18.926 11.5363 18.4783 11.5363 17.926V14.5594Z"
23
+ fill="white"
23
24
  />
24
25
  <path
25
26
  fillRule="evenodd"
26
27
  clipRule="evenodd"
27
- d="M12.378 15.159v4.665h7.045V15.16h-7.045Zm-.27-.672a.403.403 0 0 0-.402.403v5.203c0 .223.18.403.403.403h7.583c.222 0 .402-.18.402-.403V14.89a.403.403 0 0 0-.402-.403h-7.583Z"
28
+ d="M18.0279 14.1594H12.5363C12.3154 14.1594 12.1363 14.3385 12.1363 14.5594V17.926C12.1363 18.1469 12.3154 18.326 12.5363 18.326H18.0279C18.2489 18.326 18.4279 18.1469 18.4279 17.926V14.5594C18.4279 14.3385 18.2489 14.1594 18.0279 14.1594ZM12.5363 13.5594C11.9841 13.5594 11.5363 14.0071 11.5363 14.5594V17.926C11.5363 18.4783 11.9841 18.926 12.5363 18.926H18.0279C18.5802 18.926 19.0279 18.4783 19.0279 17.926V14.5594C19.0279 14.0071 18.5802 13.5594 18.0279 13.5594H12.5363Z"
28
29
  fill="#528693"
29
30
  />
30
31
  <path
31
- d="M11.706 2.907c0-.223.18-.403.403-.403h7.583c.222 0 .402.18.402.403v10.191c0 .222-.18.403-.402.403h-7.583a.403.403 0 0 1-.403-.403V2.907Z"
32
+ d="M11.5363 3.8573C11.5363 3.30501 11.9841 2.8573 12.5363 2.8573H18.0279C18.5802 2.8573 19.0279 3.30502 19.0279 3.8573V11.6785C19.0279 12.2307 18.5802 12.6785 18.0279 12.6785H12.5363C11.9841 12.6785 11.5363 12.2307 11.5363 11.6785V3.8573Z"
32
33
  fill="#BFF6F8"
34
+ className="c-icon-fill"
33
35
  />
34
36
  <path
35
37
  fillRule="evenodd"
36
38
  clipRule="evenodd"
37
- d="M12.378 3.176v9.653h7.045V3.176h-7.045Zm-.27-.672a.403.403 0 0 0-.402.403v10.191c0 .222.18.403.403.403h7.583c.222 0 .402-.18.402-.403V2.907a.403.403 0 0 0-.402-.403h-7.583Z"
39
+ d="M18.0279 3.4573H12.5363C12.3154 3.4573 12.1363 3.63639 12.1363 3.8573V11.6785C12.1363 11.8994 12.3154 12.0785 12.5363 12.0785H18.0279C18.2489 12.0785 18.4279 11.8994 18.4279 11.6785V3.8573C18.4279 3.63639 18.2489 3.4573 18.0279 3.4573ZM12.5363 2.8573C11.9841 2.8573 11.5363 3.30501 11.5363 3.8573V11.6785C11.5363 12.2307 11.9841 12.6785 12.5363 12.6785H18.0279C18.5802 12.6785 19.0279 12.2307 19.0279 11.6785V3.8573C19.0279 3.30502 18.5802 2.8573 18.0279 2.8573H12.5363Z"
38
40
  fill="#528693"
39
41
  />
40
42
  <path
41
- d="M2.117 9.902c0-.222.18-.403.402-.403h7.583c.223 0 .403.18.403.403v10.191c0 .223-.18.403-.403.403H2.52a.403.403 0 0 1-.402-.403V9.903Z"
43
+ d="M2.97202 10.1049C2.97202 9.55257 3.41973 9.10486 3.97202 9.10486H9.46361C10.0159 9.10486 10.4636 9.55257 10.4636 10.1049V17.926C10.4636 18.4783 10.0159 18.926 9.46361 18.926H3.97202C3.41973 18.926 2.97202 18.4783 2.97202 17.926V10.1049Z"
42
44
  fill="#BFF6F8"
45
+ className="c-icon-fill"
43
46
  />
44
47
  <path
45
48
  fillRule="evenodd"
46
49
  clipRule="evenodd"
47
- d="M2.788 10.171v9.653h7.045v-9.653H2.788ZM2.52 9.5a.403.403 0 0 0-.402.403v10.191c0 .223.18.403.402.403h7.583c.223 0 .403-.18.403-.403V9.903a.403.403 0 0 0-.403-.404H2.52Z"
50
+ d="M9.46361 9.70486H3.97202C3.7511 9.70486 3.57202 9.88394 3.57202 10.1049V17.926C3.57202 18.1469 3.7511 18.326 3.97202 18.326H9.46361C9.68453 18.326 9.86361 18.1469 9.86361 17.926V10.1049C9.86361 9.88395 9.68453 9.70486 9.46361 9.70486ZM3.97202 9.10486C3.41973 9.10486 2.97202 9.55257 2.97202 10.1049V17.926C2.97202 18.4783 3.41973 18.926 3.97202 18.926H9.46361C10.0159 18.926 10.4636 18.4783 10.4636 17.926V10.1049C10.4636 9.55257 10.0159 9.10486 9.46361 9.10486H3.97202Z"
48
51
  fill="#528693"
49
52
  />
50
53
  </svg>