@crystallize/design-system 1.24.29 → 1.24.31

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 (31) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/{chunk-OD4GHCZ2.mjs → chunk-L37CEYE5.mjs} +1596 -1243
  3. package/dist/index.css +0 -12
  4. package/dist/index.d.ts +10 -2
  5. package/dist/index.js +2226 -1797
  6. package/dist/index.mjs +2 -2
  7. package/dist/{rich-text-editor-FMYEV5BL.mjs → rich-text-editor-FXEPVDMG.mjs} +1 -1
  8. package/dist/{rich-text-editor-RUYX7OQE.css → rich-text-editor-KXLB6GMR.css} +0 -12
  9. package/package.json +1 -1
  10. package/src/iconography/coupon.tsx +36 -0
  11. package/src/iconography/date-infinity.tsx +51 -0
  12. package/src/iconography/date.tsx +19 -21
  13. package/src/iconography/dynamic-value.tsx +43 -0
  14. package/src/iconography/fixed-value.tsx +36 -0
  15. package/src/iconography/folder.tsx +6 -4
  16. package/src/iconography/index.ts +16 -0
  17. package/src/iconography/min-quantity.tsx +40 -0
  18. package/src/iconography/min-value.tsx +40 -0
  19. package/src/iconography/percentage.tsx +9 -6
  20. package/src/iconography/price-tag.tsx +7 -5
  21. package/src/iconography/product.tsx +12 -10
  22. package/src/iconography/target.tsx +11 -9
  23. package/src/iconography/topics.tsx +12 -10
  24. package/src/iconography/user.tsx +6 -4
  25. package/src/iconography/users.tsx +7 -5
  26. package/src/iconography/variables.ts +2 -0
  27. package/src/iconography/variant.tsx +28 -0
  28. package/src/iconography/wand.tsx +2 -2
  29. package/src/iconography/x-for-y.tsx +36 -0
  30. package/src/tooltip/tooltip.css +0 -16
  31. package/src/tooltip/tooltip.tsx +3 -3
package/src/iconography/price-tag.tsx CHANGED
@@ -1,5 +1,7 @@
1
1
  import { forwardRef, SVGProps } from 'react';
2
2
 
3
+ import { fill, stroke } from './variables';
4
+
3
5
  type PriceTagProps = SVGProps<SVGSVGElement>;
4
6
 
5
7
  type PriceTagRef = SVGSVGElement;
@@ -15,18 +17,18 @@ export const PriceTag = forwardRef<PriceTagRef, PriceTagProps>((delegated, ref)
15
17
  fillRule="evenodd"
16
18
  clipRule="evenodd"
17
19
  d="M10.9475 3.88277C11.0453 3.74281 11.198 3.6511 11.3675 3.6306L16.696 2.98607C16.9994 2.94937 17.282 3.14663 17.3521 3.44414L18.5829 8.66851C18.622 8.83466 18.5885 9.00962 18.4908 9.14958L11.38 19.3338C10.8741 20.0584 9.8767 20.2356 9.15218 19.7297L4.23266 16.2949C3.50814 15.789 3.33088 14.7916 3.83676 14.067L10.9475 3.88277ZM17.9989 8.80609L10.8881 18.9904C10.5719 19.4432 9.94849 19.554 9.49567 19.2378L4.57615 15.8029C4.12332 15.4867 4.01254 14.8634 4.32871 14.4105L11.4395 4.22626L16.7681 3.58173L17.9989 8.80609Z"
18
- fill="#528693"
20
+ fill={stroke}
19
21
  />
20
22
  <path
21
23
  d="M3.7702 13.1376C3.37968 12.7471 3.37968 12.114 3.7702 11.7234L12.5532 2.94043L17.9123 3.23815L18.2101 8.59728L9.42706 17.3803C9.03653 17.7708 8.40337 17.7708 8.01284 17.3803L3.7702 13.1376Z"
22
- fill="#BFF6F8"
24
+ fill={fill}
23
25
  className="c-icon-fill"
24
26
  />
25
27
  <path
26
28
  fillRule="evenodd"
27
29
  clipRule="evenodd"
28
30
  d="M12.129 2.51616C12.2497 2.39546 12.4161 2.33188 12.5865 2.34135L17.9456 2.63908C18.2508 2.65603 18.4945 2.89969 18.5114 3.20487L18.8091 8.564C18.8186 8.73444 18.755 8.90084 18.6343 9.02154L9.85132 17.8046C9.22648 18.4294 8.21342 18.4294 7.58858 17.8046L3.34594 13.5619C2.7211 12.9371 2.7211 11.924 3.34594 11.2992L12.129 2.51616ZM18.2101 8.59728L9.42706 17.3803C9.03653 17.7708 8.40337 17.7708 8.01284 17.3803L3.7702 13.1376C3.37968 12.7471 3.37968 12.114 3.7702 11.7234L12.5532 2.94043L17.9123 3.23815L18.2101 8.59728Z"
29
- fill="#528693"
31
+ fill={stroke}
30
32
  />
31
33
  <path
32
34
  d="M15.4375 5.71302C15.7304 6.00591 15.7304 6.48078 15.4375 6.77368C15.1446 7.06657 14.6697 7.06657 14.3768 6.77368C14.0839 6.48078 14.0839 6.00591 14.3768 5.71302C14.6697 5.42012 15.1446 5.42012 15.4375 5.71302Z"
@@ -36,11 +38,11 @@ export const PriceTag = forwardRef<PriceTagRef, PriceTagProps>((delegated, ref)
36
38
  fillRule="evenodd"
37
39
  clipRule="evenodd"
38
40
  d="M15.8617 5.28875C16.3889 5.81596 16.3889 6.67073 15.8617 7.19794C15.3345 7.72515 14.4797 7.72515 13.9525 7.19794C13.4253 6.67073 13.4253 5.81596 13.9525 5.28875C14.4797 4.76155 15.3345 4.76155 15.8617 5.28875ZM15.4375 6.77368C15.7304 6.48078 15.7304 6.00591 15.4375 5.71302C15.1446 5.42012 14.6697 5.42012 14.3768 5.71302C14.0839 6.00591 14.0839 6.48078 14.3768 6.77368C14.6697 7.06657 15.1446 7.06657 15.4375 6.77368Z"
39
- fill="#528693"
41
+ fill={stroke}
40
42
  />
41
43
  <path
42
44
  d="M9.80065 13.1157C9.97264 12.9437 10.0568 12.738 10.053 12.4987C10.0512 12.2613 9.95488 11.9519 9.76419 11.5705C9.4875 11.0508 9.35476 10.6021 9.36598 10.2245C9.38094 9.84682 9.53891 9.5075 9.8399 9.20651C10.1465 8.89991 10.4868 8.73726 10.8607 8.71856C11.2364 8.70174 11.5991 8.83073 11.9487 9.10555L12.5629 8.49142L12.9807 8.90925L12.3638 9.52619C12.6348 9.88327 12.747 10.259 12.7003 10.6535C12.6554 11.0499 12.4413 11.4396 12.0581 11.8229L11.5421 11.3069C11.8057 11.0433 11.9525 10.7713 11.9824 10.4909C12.0123 10.2104 11.9207 9.96366 11.7076 9.75054C11.4851 9.52806 11.257 9.41589 11.0233 9.41402C10.7915 9.41028 10.5728 9.51124 10.3671 9.71688C10.1764 9.90758 10.0857 10.1216 10.0951 10.3591C10.1082 10.5965 10.2101 10.904 10.4008 11.2817C10.5952 11.6593 10.7158 11.9837 10.7625 12.2548C10.813 12.5258 10.8018 12.7726 10.7289 12.9951C10.6578 13.2194 10.5232 13.4307 10.325 13.6289C10.0091 13.9448 9.6595 14.1037 9.27625 14.1056C8.89486 14.1093 8.51535 13.9579 8.13771 13.6513L7.60209 14.1869L7.18706 13.7719L7.72268 13.2363C7.40673 12.8567 7.25717 12.4604 7.27399 12.0472C7.29456 11.6341 7.48992 11.2424 7.86009 10.8722L8.37888 11.391C8.11901 11.6509 7.98721 11.9192 7.98347 12.1959C7.97973 12.4726 8.10312 12.7362 8.35364 12.9867C8.59855 13.2316 8.85 13.3653 9.10799 13.3877C9.36598 13.4101 9.59687 13.3194 9.80065 13.1157Z"
43
- fill="#528693"
45
+ fill={stroke}
44
46
  />
45
47
  </svg>
46
48
  );
package/src/iconography/product.tsx CHANGED
@@ -1,5 +1,7 @@
1
1
  import { forwardRef, SVGProps } from 'react';
2
2
 
3
+ import { fill, stroke } from './variables';
4
+
3
5
  type ProductProps = SVGProps<SVGSVGElement>;
4
6
 
5
7
  type ProductRef = SVGSVGElement;
@@ -9,60 +11,60 @@ export const Product = forwardRef<ProductRef, ProductProps>((delegated, ref) =>
9
11
  <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
10
12
  <path
11
13
  d="M8.39836 6.06214C8.39836 7.75331 7.13285 9.12428 5.57177 9.12428C4.01069 9.12428 2.74518 7.75331 2.74518 6.06214C2.74518 4.37097 4.01069 3 5.57177 3C7.13285 3 8.39836 4.37097 8.39836 6.06214Z"
12
- fill="#BFF6F8"
14
+ fill={fill}
13
15
  className="c-icon-fill"
14
16
  />
15
17
  <path
16
18
  fillRule="evenodd"
17
19
  clipRule="evenodd"
18
20
  d="M8.99835 6.06216C8.99835 8.03858 7.50853 9.7243 5.57176 9.7243C3.63499 9.7243 2.14517 8.03858 2.14517 6.06216C2.14517 4.08574 3.63499 2.40002 5.57176 2.40002C7.50853 2.40002 8.99835 4.08574 8.99835 6.06216ZM5.57176 9.1243C7.13284 9.1243 8.39835 7.75334 8.39835 6.06216C8.39835 4.37099 7.13284 3.00002 5.57176 3.00002C4.01068 3.00002 2.74517 4.37099 2.74517 6.06216C2.74517 7.75334 4.01068 9.1243 5.57176 9.1243Z"
19
- fill="#528693"
21
+ fill={stroke}
20
22
  />
21
23
  <path
22
24
  d="M17.6319 11.7624C17.6319 15.9253 14.4681 19.3 10.5654 19.3C6.66273 19.3 3.49896 15.9253 3.49896 11.7624C3.49896 7.59954 6.66273 4.22485 10.5654 4.22485C14.4681 4.22485 17.6319 7.59954 17.6319 11.7624Z"
23
- fill="#BFF6F8"
25
+ fill={fill}
24
26
  className="c-icon-fill"
25
27
  />
26
28
  <path
27
29
  fillRule="evenodd"
28
30
  clipRule="evenodd"
29
31
  d="M18.2319 11.7625C18.2319 16.2196 14.8354 19.9 10.5655 19.9C6.2955 19.9 2.89899 16.2196 2.89899 11.7625C2.89899 7.30526 6.2955 3.62488 10.5655 3.62488C14.8354 3.62488 18.2319 7.30526 18.2319 11.7625ZM10.5655 19.3C14.4682 19.3 17.6319 15.9253 17.6319 11.7625C17.6319 7.59956 14.4682 4.22488 10.5655 4.22488C6.66275 4.22488 3.49899 7.59956 3.49899 11.7625C3.49899 15.9253 6.66275 19.3 10.5655 19.3Z"
30
- fill="#528693"
32
+ fill={stroke}
31
33
  />
32
34
  <path
33
35
  d="M19.3279 8.04078C19.3279 9.73195 18.0624 11.1029 16.5013 11.1029C14.9403 11.1029 13.6747 9.73195 13.6747 8.04078C13.6747 6.3496 14.9403 4.97864 16.5013 4.97864C18.0624 4.97864 19.3279 6.3496 19.3279 8.04078Z"
34
- fill="#BFF6F8"
36
+ fill={fill}
35
37
  className="c-icon-fill"
36
38
  />
37
39
  <path
38
40
  fillRule="evenodd"
39
41
  clipRule="evenodd"
40
42
  d="M19.9279 8.04074C19.9279 10.0172 18.4381 11.7029 16.5013 11.7029C14.5646 11.7029 13.0747 10.0172 13.0747 8.04074C13.0747 6.06432 14.5646 4.3786 16.5013 4.3786C18.4381 4.3786 19.9279 6.06432 19.9279 8.04074ZM16.5013 11.1029C18.0624 11.1029 19.3279 9.73191 19.3279 8.04074C19.3279 6.34957 18.0624 4.9786 16.5013 4.9786C14.9402 4.9786 13.6747 6.34957 13.6747 8.04074C13.6747 9.73191 14.9402 11.1029 16.5013 11.1029Z"
41
- fill="#528693"
43
+ fill={stroke}
42
44
  />
43
45
  <path
44
46
  fillRule="evenodd"
45
47
  clipRule="evenodd"
46
48
  d="M7.06508 11.0485L7.06561 11.0474C7.06563 11.0474 7.06557 11.0474 7.06508 11.0485L7.05935 11.0613C7.05373 11.0741 7.04471 11.0957 7.03338 11.1259C7.01073 11.1862 6.97883 11.2814 6.94635 11.4113C6.88144 11.6708 6.81396 12.0704 6.81396 12.6104C6.81396 12.7761 6.67964 12.9104 6.51396 12.9104C6.34827 12.9104 6.21396 12.7761 6.21396 12.6104C6.21396 12.0198 6.28783 11.5714 6.36427 11.2657C6.40247 11.113 6.44124 10.9961 6.4716 10.9151C6.48678 10.8747 6.49984 10.8432 6.50968 10.8207C6.51459 10.8095 6.5187 10.8005 6.52186 10.7938L6.52587 10.7854L6.52731 10.7824L6.52788 10.7813C6.52793 10.7812 6.52835 10.7803 6.79363 10.913L6.52835 10.7803C6.60246 10.6321 6.78266 10.5721 6.93085 10.6462C7.07894 10.7203 7.13897 10.9004 7.06508 11.0485Z"
47
- fill="#528693"
49
+ fill={stroke}
48
50
  />
49
51
  <path
50
52
  fillRule="evenodd"
51
53
  clipRule="evenodd"
52
54
  d="M10.3157 11.8965L10.3163 11.8954C10.3163 11.8953 10.3162 11.8954 10.3157 11.8965L10.31 11.9092C10.3044 11.9221 10.2954 11.9436 10.284 11.9738C10.2614 12.0342 10.2295 12.1293 10.197 12.2592C10.1321 12.5188 10.0646 12.9184 10.0646 13.4584C10.0646 13.6241 9.93029 13.7584 9.7646 13.7584C9.59891 13.7584 9.4646 13.6241 9.4646 13.4584C9.4646 12.8678 9.53847 12.4194 9.61491 12.1137C9.65311 11.9609 9.69188 11.844 9.72224 11.7631C9.73742 11.7226 9.75048 11.6912 9.76032 11.6687C9.76524 11.6575 9.76934 11.6485 9.7725 11.6417L9.77651 11.6333L9.77795 11.6304L9.77852 11.6292C9.77857 11.6291 9.77899 11.6283 10.0443 11.7609L9.77899 11.6283C9.8531 11.4801 10.0333 11.42 10.1815 11.4942C10.3296 11.5682 10.3896 11.7483 10.3157 11.8965Z"
53
- fill="#528693"
55
+ fill={stroke}
54
56
  />
55
57
  <path
56
58
  fillRule="evenodd"
57
59
  clipRule="evenodd"
58
60
  d="M7.59368 14.6746C7.75459 14.714 7.85301 14.8765 7.81351 15.0374C7.74019 15.3362 7.61348 15.5725 7.43374 15.7311C7.24915 15.894 7.02714 15.9577 6.81002 15.9357C6.39445 15.8936 6.04476 15.5506 5.94033 15.1329C5.90015 14.9721 5.99788 14.8093 6.15862 14.7691C6.31935 14.7289 6.48223 14.8266 6.52242 14.9873C6.57503 15.1978 6.74353 15.3259 6.8705 15.3387C6.92465 15.3442 6.97999 15.3313 7.03674 15.2812C7.09833 15.2269 7.17694 15.1139 7.23081 14.8944C7.27031 14.7335 7.43277 14.6351 7.59368 14.6746Z"
59
- fill="#528693"
61
+ fill={stroke}
60
62
  />
61
63
  <path
62
64
  fillRule="evenodd"
63
65
  clipRule="evenodd"
64
66
  d="M7.53156 14.666C7.36588 14.666 7.23156 14.8003 7.23156 14.966C7.23156 15.3263 7.34517 15.6211 7.53837 15.8387C7.72863 16.0529 7.97965 16.1739 8.22742 16.2206C8.47321 16.2669 8.73204 16.2433 8.95113 16.1492C9.17052 16.0549 9.37514 15.8762 9.44318 15.604C9.48337 15.4433 9.38564 15.2804 9.2249 15.2402C9.06416 15.2 8.90128 15.2978 8.8611 15.4585C8.85062 15.5004 8.81341 15.5553 8.71422 15.5979C8.61473 15.6407 8.47823 15.6573 8.3385 15.631C8.20076 15.605 8.07608 15.5406 7.98702 15.4403C7.90089 15.3433 7.83156 15.1945 7.83156 14.966C7.83156 14.8003 7.69725 14.666 7.53156 14.666Z"
65
- fill="#528693"
67
+ fill={stroke}
66
68
  />
67
69
  </svg>
68
70
  );
package/src/iconography/target.tsx CHANGED
@@ -1,5 +1,7 @@
1
1
  import { forwardRef, SVGProps } from 'react';
2
2
 
3
+ import { fill, stroke } from './variables';
4
+
3
5
  type TargetProps = SVGProps<SVGSVGElement>;
4
6
 
5
7
  type TargetRef = SVGSVGElement;
@@ -7,30 +9,30 @@ type TargetRef = SVGSVGElement;
7
9
  export const Target = forwardRef<TargetRef, TargetProps>((delegated, ref) => {
8
10
  return (
9
11
  <svg ref={ref} width="23" height="22" fill="none" viewBox="0 0 23 22" {...delegated}>
10
- <path fill="#BFF6F8" d="M20.524 12.018a8.522 8.522 0 1 1-17.044 0 8.522 8.522 0 0 1 17.044 0Z" />
12
+ <path fill={fill} d="M20.524 12.018a8.522 8.522 0 1 1-17.044 0 8.522 8.522 0 0 1 17.044 0Z" />
11
13
  <path
12
- fill="#528693"
14
+ fill={stroke}
13
15
  fillRule="evenodd"
14
16
  d="M12.002 19.964a7.946 7.946 0 1 0 0-15.892 7.946 7.946 0 0 0 0 15.892Zm0 .576a8.522 8.522 0 1 0 0-17.044 8.522 8.522 0 0 0 0 17.044Z"
15
17
  clipRule="evenodd"
16
18
  />
17
19
  <path fill="#fff" d="M18.3 12.018a6.299 6.299 0 1 1-12.597 0 6.299 6.299 0 0 1 12.598 0Z" />
18
20
  <path
19
- fill="#528693"
21
+ fill={stroke}
20
22
  fillRule="evenodd"
21
23
  d="M12.002 17.856a5.838 5.838 0 1 0 0-11.676 5.838 5.838 0 0 0 0 11.676Zm0 .461a6.299 6.299 0 1 0 0-12.598 6.299 6.299 0 0 0 0 12.598Z"
22
24
  clipRule="evenodd"
23
25
  />
24
- <path fill="#BFF6F8" d="M16.078 12.018a4.076 4.076 0 1 1-8.152 0 4.076 4.076 0 0 1 8.152 0Z" />
26
+ <path fill={fill} d="M16.078 12.018a4.076 4.076 0 1 1-8.152 0 4.076 4.076 0 0 1 8.152 0Z" />
25
27
  <path
26
- fill="#528693"
28
+ fill={stroke}
27
29
  fillRule="evenodd"
28
30
  d="M12.002 15.633a3.615 3.615 0 1 0 0-7.23 3.615 3.615 0 0 0 0 7.23Zm0 .461a4.076 4.076 0 1 0 0-8.151 4.076 4.076 0 0 0 0 8.151Z"
29
31
  clipRule="evenodd"
30
32
  />
31
33
  <path fill="#fff" d="M13.854 12.018a1.853 1.853 0 1 1-3.705 0 1.853 1.853 0 0 1 3.705 0Z" />
32
34
  <path
33
- fill="#528693"
35
+ fill={stroke}
34
36
  fillRule="evenodd"
35
37
  d="M12.002 13.41a1.392 1.392 0 1 0 0-2.783 1.392 1.392 0 0 0 0 2.783Zm0 .46a1.853 1.853 0 1 0 0-3.704 1.853 1.853 0 0 0 0 3.705Z"
36
38
  clipRule="evenodd"
@@ -38,19 +40,19 @@ export const Target = forwardRef<TargetRef, TargetProps>((delegated, ref) => {
38
40
  <path fill="#fff" d="m15.899.398.906 4.093L14.2 8.688l-1.09-3.916L15.9.398Z" />
39
41
  <path fill="#fff" d="m20.897 3.585-4.092.906L14.2 8.687l3.909-.728 2.788-4.374Z" />
40
42
  <path
41
- fill="#528693"
43
+ fill={stroke}
42
44
  fillRule="evenodd"
43
45
  d="M15.949.114c.115.02.206.108.231.221l.906 4.093-.562.125-.756-3.414-2.346 3.68 1.055 3.791a.288.288 0 0 1-.555.155l-1.09-3.916a.288.288 0 0 1 .035-.232L15.656.243a.288.288 0 0 1 .293-.129Z"
44
46
  clipRule="evenodd"
45
47
  />
46
48
  <path
47
- fill="#528693"
49
+ fill={stroke}
48
50
  fillRule="evenodd"
49
51
  d="M21.133 3.42a.288.288 0 0 0-.298-.117l-4.093.906.125.563 3.414-.756-2.348 3.682-3.786.706a.288.288 0 1 0 .105.567l3.91-.73a.288.288 0 0 0 .19-.128L21.14 3.74a.288.288 0 0 0-.007-.32Z"
50
52
  clipRule="evenodd"
51
53
  />
52
54
  <path
53
- fill="#528693"
55
+ fill={stroke}
54
56
  fillRule="evenodd"
55
57
  d="M16.96 4.248c.134.086.184.248.11.362l-4.874 7.566c-.073.113-.241.136-.375.05-.134-.086-.183-.248-.11-.361l4.875-7.567c.073-.113.24-.136.375-.05Z"
56
58
  clipRule="evenodd"
package/src/iconography/topics.tsx CHANGED
@@ -1,5 +1,7 @@
1
1
  import { forwardRef, SVGProps } from 'react';
2
2
 
3
+ import { fill, stroke } from './variables';
4
+
3
5
  type TopicsProps = SVGProps<SVGSVGElement>;
4
6
 
5
7
  type TopicsRef = SVGSVGElement;
@@ -9,11 +11,11 @@ export const Topics = forwardRef<TopicsRef, TopicsProps>((delegated, ref) => {
9
11
  <svg ref={ref} width="23" height="23" viewBox="0 0 23 23" fill="none" {...delegated}>
10
12
  <path
11
13
  d="M10.922 11.146H9.274c-.075 0-.075.697 0 .697h.027v-.697H7.395c-.075 0-.075.697 0 .697h1.908c.075 0 .075-.697 0-.697h-.027v.697h1.647c.074 0 .074-.697-.001-.697Z"
12
- fill="#528693"
14
+ fill={stroke}
13
15
  />
14
16
  <path
15
17
  d="M15.221 11.146H11.6c-.165 0-.166.697 0 .697h.058v-.697H7.461c-.165 0-.166.697 0 .697h4.196c.165 0 .165-.697 0-.697H11.6v.697h3.622c.165 0 .166-.697 0-.697Z"
16
- fill="#528693"
18
+ fill={stroke}
17
19
  />
18
20
  <path
19
21
  d="M6.713 13.669a2.108 2.108 0 0 1-2.243-2.144 2.114 2.114 0 0 1 2.165-2.204 2.209 2.209 0 0 1 2.116 2.094c0 1.38-.825 2.254-2.038 2.254Z"
@@ -21,35 +23,35 @@ export const Topics = forwardRef<TopicsRef, TopicsProps>((delegated, ref) => {
21
23
  />
22
24
  <path
23
25
  d="M6.713 13.318a1.813 1.813 0 0 1-1.648-2.751 1.837 1.837 0 0 1 1.191-.854c2.376-.484 2.983 3.478.457 3.607-.446.023-.45.716 0 .698a2.462 2.462 0 0 0 2.373-2.887 2.558 2.558 0 0 0-2.762-2.14 2.528 2.528 0 0 0 .39 5.029.351.351 0 0 0 0-.702ZM15.01 17.67h-3.684v-5.477a.351.351 0 0 0-.696 0v.152h.696V5.32h3.685a.35.35 0 0 0 0-.696h-3.746a.652.652 0 0 0-.329.056.554.554 0 0 0-.307.541v7.124a.351.351 0 0 0 .697 0v-.156h-.697v5.519a.596.596 0 0 0 .187.522.694.694 0 0 0 .53.136h3.664a.351.351 0 0 0 0-.697Z"
24
- fill="#528693"
26
+ fill={stroke}
25
27
  />
26
28
  <path
27
29
  d="M15.439 13.208a1.705 1.705 0 0 1-1.55-2.584 1.727 1.727 0 0 1 1.117-.803c2.236-.462 2.808 3.27.43 3.389-.335.017-.338.537 0 .523a2.183 2.183 0 0 0 2.101-2.562 2.27 2.27 0 0 0-2.457-1.895 2.24 2.24 0 0 0 .351 4.461.264.264 0 1 0 .008-.529Z"
28
- fill="#528693"
30
+ fill={stroke}
29
31
  />
30
32
  <path
31
33
  d="M15.448 13.669a2.106 2.106 0 0 1-2.243-2.144 2.115 2.115 0 0 1 2.166-2.204 2.209 2.209 0 0 1 2.115 2.094 2.023 2.023 0 0 1-2.038 2.254Z"
32
- fill="#BFF6F8"
34
+ fill={fill}
33
35
  />
34
36
  <path
35
37
  d="M15.448 13.318a1.813 1.813 0 0 1-1.649-2.751 1.834 1.834 0 0 1 1.192-.854c2.376-.484 2.984 3.479.457 3.607-.447.023-.45.716 0 .698a2.463 2.463 0 0 0 2.372-2.887 2.558 2.558 0 0 0-2.761-2.14 2.527 2.527 0 0 0 .389 5.029c.452.01.451-.692 0-.702ZM15.439 19.73a1.703 1.703 0 0 1-1.78-1.92 1.724 1.724 0 0 1 1.346-1.466c2.237-.461 2.809 3.27.43 3.389-.334.016-.337.537 0 .523a2.185 2.185 0 0 0 2.105-2.561 2.27 2.27 0 0 0-2.457-1.896 2.24 2.24 0 0 0 .35 4.46c.344.008.344-.518.006-.528Z"
36
- fill="#528693"
38
+ fill={stroke}
37
39
  />
38
40
  <path
39
41
  d="M15.448 20.192a2.107 2.107 0 0 1-2.243-2.144 2.116 2.116 0 0 1 2.166-2.205 2.21 2.21 0 0 1 2.115 2.095 2.025 2.025 0 0 1-2.038 2.254Z"
40
- fill="#BFF6F8"
42
+ fill={fill}
41
43
  />
42
44
  <path
43
45
  d="M15.448 19.841a1.814 1.814 0 0 1-1.649-2.751 1.836 1.836 0 0 1 1.192-.854c2.376-.484 2.984 3.479.457 3.607-.447.023-.45.716 0 .698a2.463 2.463 0 0 0 2.372-2.887 2.558 2.558 0 0 0-2.761-2.14 2.528 2.528 0 0 0 .389 5.03c.452.012.451-.69 0-.703ZM15.439 6.685a1.704 1.704 0 0 1-1.55-2.584 1.725 1.725 0 0 1 1.117-.803c2.236-.461 2.808 3.27.43 3.388-.335.017-.338.538 0 .524a2.185 2.185 0 0 0 2.101-2.562 2.27 2.27 0 0 0-2.457-1.895 2.24 2.24 0 0 0 .351 4.46c.346.007.346-.517.008-.528Z"
44
- fill="#528693"
46
+ fill={stroke}
45
47
  />
46
48
  <path
47
49
  d="M15.448 7.146a2.177 2.177 0 1 1-.077-4.348 2.209 2.209 0 0 1 2.115 2.094 2.026 2.026 0 0 1-2.038 2.254Z"
48
- fill="#BFF6F8"
50
+ fill={fill}
49
51
  />
50
52
  <path
51
53
  d="M15.448 6.795a1.814 1.814 0 0 1-1.649-2.751 1.834 1.834 0 0 1 1.192-.853c2.376-.485 2.984 3.478.457 3.606-.447.023-.45.716 0 .698a2.463 2.463 0 0 0 2.372-2.887 2.558 2.558 0 0 0-2.761-2.14 2.527 2.527 0 0 0 .389 5.03.351.351 0 0 0 0-.703Z"
52
- fill="#528693"
54
+ fill={stroke}
53
55
  />
54
56
  </svg>
55
57
  );
package/src/iconography/user.tsx CHANGED
@@ -1,5 +1,7 @@
1
1
  import { forwardRef, SVGProps } from 'react';
2
2
 
3
+ import { fill, stroke } from './variables';
4
+
3
5
  type UserProps = SVGProps<SVGSVGElement>;
4
6
 
5
7
  type UserRef = SVGSVGElement;
@@ -9,13 +11,13 @@ export const User = forwardRef<UserRef, UserProps>((delegated, ref) => {
9
11
  <svg ref={ref} width="23" height="22" viewBox="0 0 23 22" fill="none" {...delegated}>
10
12
  <path
11
13
  d="M19.0183 18.5C19.0183 19 15.4366 20 11.0183 20C6.60001 20 3.01829 19 3.01829 18.5C3.01829 15.4624 6.60001 13 11.0183 13C15.4366 13 19.0183 15.4624 19.0183 18.5Z"
12
- fill="#BFF6F8"
14
+ fill={fill}
13
15
  />
14
16
  <path
15
17
  fillRule="evenodd"
16
18
  clipRule="evenodd"
17
19
  d="M16.8017 20.024C15.312 20.3456 13.2695 20.6 11.0183 20.6C8.76706 20.6 6.72461 20.3456 5.23484 20.024C4.49262 19.8638 3.87028 19.6832 3.42161 19.5014C3.2008 19.4119 2.99558 19.3117 2.8349 19.1983C2.75497 19.1419 2.66392 19.0669 2.58765 18.9698C2.5131 18.8748 2.41829 18.7139 2.41829 18.5C2.41829 16.7268 3.46427 15.1871 5.02152 14.1165C6.58142 13.0441 8.70343 12.4 11.0183 12.4C13.3331 12.4 15.4552 13.0441 17.0151 14.1165C18.5723 15.1871 19.6183 16.7268 19.6183 18.5C19.6183 18.7139 19.5235 18.8748 19.4489 18.9698C19.3727 19.0669 19.2816 19.1419 19.2017 19.1983C19.041 19.3117 18.8358 19.4119 18.615 19.5014C18.1663 19.6832 17.544 19.8638 16.8017 20.024ZM11.0183 20C15.4366 20 19.0183 19 19.0183 18.5C19.0183 15.4625 15.4366 13 11.0183 13C6.60001 13 3.01829 15.4625 3.01829 18.5C3.01829 19 6.60001 20 11.0183 20Z"
18
- fill="#528693"
20
+ fill={stroke}
19
21
  />
20
22
  <path
21
23
  d="M13.0183 12.5C13.0183 13.8807 12.1229 15 11.0183 15C9.91373 15 9.0183 13.8807 9.0183 12.5C9.0183 11.1193 9.91373 10 11.0183 10C12.1229 10 13.0183 11.1193 13.0183 12.5Z"
@@ -25,7 +27,7 @@ export const User = forwardRef<UserRef, UserProps>((delegated, ref) => {
25
27
  fillRule="evenodd"
26
28
  clipRule="evenodd"
27
29
  d="M13.6183 12.5C13.6183 14.0802 12.5722 15.6 11.0183 15.6C9.46433 15.6 8.41829 14.0802 8.41829 12.5C8.41829 10.9198 9.46433 9.40002 11.0183 9.40002C12.5722 9.40002 13.6183 10.9198 13.6183 12.5ZM11.0183 15C12.1229 15 13.0183 13.8807 13.0183 12.5C13.0183 11.1193 12.1229 10 11.0183 10C9.91372 10 9.01829 11.1193 9.01829 12.5C9.01829 13.8807 9.91372 15 11.0183 15Z"
28
- fill="#528693"
30
+ fill={stroke}
29
31
  />
30
32
  <path
31
33
  d="M15.1183 7.99999C15.1183 11.3137 11.98 12.8 11.0183 12.8C10.0566 12.8 6.91831 11.3137 6.91831 7.99999C6.91831 4.68628 7.91836 2.29999 11.0183 2.29999C14.1183 2.29999 15.1183 4.68628 15.1183 7.99999Z"
@@ -35,7 +37,7 @@ export const User = forwardRef<UserRef, UserProps>((delegated, ref) => {
35
37
  fillRule="evenodd"
36
38
  clipRule="evenodd"
37
39
  d="M12.3086 13.0642C11.8438 13.2711 11.3786 13.4 11.0183 13.4C10.658 13.4 10.1929 13.2711 9.72804 13.0642C9.2481 12.8506 8.71451 12.5301 8.21426 12.0957C7.2092 11.2228 6.31831 9.86784 6.31831 8.00001C6.31831 6.30355 6.57045 4.74139 7.29834 3.58729C8.0574 2.38379 9.28518 1.70001 11.0183 1.70001C12.7515 1.70001 13.9793 2.38379 14.7383 3.5873C15.4662 4.74139 15.7183 6.30356 15.7183 8.00001C15.7183 9.86783 14.8274 11.2228 13.8224 12.0957C13.3221 12.5301 12.7886 12.8506 12.3086 13.0642ZM11.0183 12.8C11.98 12.8 15.1183 11.3137 15.1183 8.00001C15.1183 4.6863 14.1183 2.30001 11.0183 2.30001C7.91836 2.30001 6.91831 4.6863 6.91831 8.00001C6.91831 11.3137 10.0566 12.8 11.0183 12.8Z"
38
- fill="#528693"
40
+ fill={stroke}
39
41
  />
40
42
  </svg>
41
43
  );
package/src/iconography/users.tsx CHANGED
@@ -1,5 +1,7 @@
1
1
  import { forwardRef, SVGProps } from 'react';
2
2
 
3
+ import { fill, stroke } from './variables';
4
+
3
5
  type UsersProps = SVGProps<SVGSVGElement>;
4
6
 
5
7
  type UsersRef = SVGSVGElement;
@@ -9,17 +11,17 @@ export const Users = forwardRef<UsersRef, UsersProps>((delegated, ref) => {
9
11
  <svg ref={ref} width="24" height="24" viewBox="0 0 24 24" fill="none" {...delegated}>
10
12
  <path
11
13
  d="M20.713 15.436a2.465 2.465 0 0 0-1.746-.594c-.23 0-.466.016-.703.032l-.15.008c.027-.159.043-.32.05-.48 1.222-1.07 1.257-3.224 1.211-4.1a2.867 2.867 0 0 0-.702-1.78c-.48-.516-1.117-.81-1.782-.821-.038-.004-.08-.004-.122-.004a2.408 2.408 0 0 0-1.396.503 2.877 2.877 0 0 0-.933 1.273 4.077 4.077 0 0 0-.178 1.569c.06 1.108.164 2.17.79 2.912.14.165.3.307.475.42.01.17.028.337.055.504l-.097-.004c-.238-.016-.469-.032-.696-.032a2.454 2.454 0 0 0-1.74.594 2.46 2.46 0 0 0-.712 1.494 6.447 6.447 0 0 0-.105 1.104c.003.424.5.534.863.617l.157.035c1.148.266 2.319.382 3.49.346.168 0 .332 0 .505-.004 1.399.012 2.793-.19 4.143-.597a.148.148 0 0 0 .09-.063.182.182 0 0 0 .03-.114.173.173 0 0 0 .013-.087c-.027-1.002-.11-2.122-.81-2.731Zm-5.67-2.13c-.388-.72-.419-1.67-.443-2.437a3.114 3.114 0 0 1 .363-1.679 2.386 2.386 0 0 1 1.195-.978c.23-.106.474-.165.723-.175.08 0 .159.007.238.02.263.05.518.143.758.275.458.242.822.666 1.02 1.19.097.275.151.566.16.862.068 2.191-.538 3.554-1.795 4.054a1.074 1.074 0 0 1-.423.078 2.11 2.11 0 0 1-1.028-.36 2.442 2.442 0 0 1-.768-.85Zm2.746 1.367a1.724 1.724 0 0 1-.175.709c-.108.217-.26.403-.443.541a.875.875 0 0 1-.409.118c-.594 0-.793-.924-.854-1.395.303.186.64.292.985.31a.963.963 0 0 0 .213-.023c.238-.047.469-.135.683-.26Zm-.543 3.966c-.182 0-.364.004-.549.004a11.426 11.426 0 0 1-4.132-.585c.045-.971.15-1.958.856-2.437a2.46 2.46 0 0 1 1.512-.386l.356.004c.12 0 .241-.004.367-.008.2.779.58 1.191 1.1 1.191a1.28 1.28 0 0 0 .315-.043c.24-.075.456-.222.626-.424.17-.203.289-.455.341-.727a8.5 8.5 0 0 0 .44.011l.367-.004a2.438 2.438 0 0 1 1.496.386c.761.514.817 1.639.854 2.468-1.29.376-2.618.56-3.95.55Z"
12
- fill="#528693"
14
+ fill={stroke}
13
15
  />
14
16
  <path
15
17
  fillRule="evenodd"
16
18
  clipRule="evenodd"
17
19
  d="M20.93 15.187c.422.368.642.875.762 1.393.119.513.147 1.07.161 1.569a.502.502 0 0 1-.015.162.51.51 0 0 1-.084.24.479.479 0 0 1-.276.198c-1.378.416-2.8.62-4.229.61-.173.003-.338.003-.502.003a13.965 13.965 0 0 1-3.57-.354h-.001a6.66 6.66 0 0 0-.15-.034l-.004-.001a2.345 2.345 0 0 0-.021-.005c-.17-.038-.42-.095-.628-.206-.232-.124-.468-.349-.471-.725v-.006a6.77 6.77 0 0 1 .108-1.15c.075-.646.36-1.246.81-1.682l.016-.016a2.786 2.786 0 0 1 1.963-.67c.123 0 .247.004.369.01a2.537 2.537 0 0 1-.368-.355c-.707-.84-.809-2.014-.868-3.104a4.412 4.412 0 0 1 .194-1.691l.005-.017a3.208 3.208 0 0 1 1.041-1.418 2.738 2.738 0 0 1 1.588-.571h.015c.034 0 .084 0 .135.004.756.017 1.47.352 2.005.926l.005.006c.476.534.752 1.242.785 1.983.024.453.027 1.24-.136 2.058-.152.76-.454 1.586-1.057 2.183.147-.008.296-.014.444-.015a2.796 2.796 0 0 1 1.97.671l.005.004Zm-1.963-.345c.626-.039 1.245.171 1.747.594.555.485.722 1.293.78 2.107.014.178.021.356.027.532l.002.092a.173.173 0 0 1-.014.087.185.185 0 0 1-.03.114.148.148 0 0 1-.088.063 13.928 13.928 0 0 1-4.144.597c-.173.004-.337.004-.505.004a13.635 13.635 0 0 1-3.647-.381l-.007-.002c-.256-.058-.576-.13-.743-.317a.433.433 0 0 1-.113-.298 6.45 6.45 0 0 1 .105-1.104 2.46 2.46 0 0 1 .713-1.494 2.454 2.454 0 0 1 1.74-.594c.15 0 .301.007.455.016l.219.014.02.002.098.004a4.673 4.673 0 0 1-.055-.503 2.186 2.186 0 0 1-.476-.42c-.625-.744-.73-1.805-.79-2.913a4.079 4.079 0 0 1 .179-1.569c.196-.516.52-.958.933-1.273.413-.315.897-.49 1.396-.503.042 0 .084 0 .122.004.665.011 1.302.305 1.782.821.112.126.212.263.299.409a2.825 2.825 0 0 1 .229.484 2.989 2.989 0 0 1 .178.958 8.385 8.385 0 0 1-.107 1.762c-.145.826-.46 1.699-1.109 2.266a3.643 3.643 0 0 1-.049.48l.15-.007h.004l.184-.012c.173-.011.345-.02.515-.02Zm-3.924-1.536c.192.348.455.64.768.85.312.21.665.334 1.028.36.144.003.288-.024.423-.078.878-.349 1.438-1.118 1.673-2.296a7.797 7.797 0 0 0 .12-1.823v-.003a2.854 2.854 0 0 0-.158-.793 2.409 2.409 0 0 0-.208-.423 2.14 2.14 0 0 0-.812-.768 2.582 2.582 0 0 0-.758-.275 1.653 1.653 0 0 0-.238-.02c-.248.01-.493.069-.723.175-.482.173-.9.516-1.195.979-.274.503-.4 1.09-.363 1.678.024.766.055 1.717.443 2.437Zm.205-3.948c-.24.445-.352.966-.319 1.49v.01c.026.786.06 1.652.404 2.29.168.304.396.555.662.734.264.178.558.281.859.304a.746.746 0 0 0 .285-.054l.001-.001c1.056-.42 1.654-1.587 1.588-3.737a2.533 2.533 0 0 0-.141-.758 1.887 1.887 0 0 0-.864-1.012l-.005-.003a2.252 2.252 0 0 0-.656-.239 1.324 1.324 0 0 0-.176-.015 1.575 1.575 0 0 0-.59.145l-.013.006-.014.004a2.054 2.054 0 0 0-1.021.836Zm1.823 7.02a1.28 1.28 0 0 1-.314.044c-.52 0-.902-.412-1.1-1.19h-.011c-.122.004-.241.007-.357.007l-.356-.004a2.46 2.46 0 0 0-1.512.386c-.706.48-.81 1.466-.856 2.437 1.34.448 2.736.646 4.132.585.093 0 .186 0 .277-.002l.269-.002h.003c1.33.01 2.657-.174 3.945-.549l.004-.001a15.237 15.237 0 0 0-.03-.518c-.056-.731-.213-1.537-.824-1.95a2.436 2.436 0 0 0-1.495-.386l-.367.004c-.143 0-.29-.004-.44-.011-.053.272-.171.524-.342.727-.17.202-.387.35-.626.424Zm1.217-.81a1.9 1.9 0 0 1-.338.599 1.675 1.675 0 0 1-.78.527l-.013.004c-.13.035-.262.053-.396.055h-.004c-.36 0-.67-.147-.914-.41a2.133 2.133 0 0 1-.431-.775l-.123.002h-.003l-.378-.005a2.13 2.13 0 0 0-1.306.332c-.263.18-.431.465-.539.847-.09.32-.13.687-.155 1.077 1.229.382 2.502.548 3.775.492h.014c.09 0 .18 0 .272-.002h.002l.273-.002.002.133v-.133c1.215.01 2.426-.147 3.607-.467a5.42 5.42 0 0 0-.133-1.024c-.104-.408-.276-.728-.56-.922a2.107 2.107 0 0 0-1.29-.331l-.02.001-.371.004c-.063 0-.127-.001-.19-.003Zm-.55-.525a1.742 1.742 0 0 0 .051-.37 2.261 2.261 0 0 1-.683.26.952.952 0 0 1-.213.023 2.063 2.063 0 0 1-.985-.31c.015.117.039.263.075.415.11.459.333.98.78.98a.874.874 0 0 0 .408-.118c.184-.138.335-.324.443-.54a1.688 1.688 0 0 0 .124-.34Zm-.749.604a1.194 1.194 0 0 0 .336-.426c-.05.013-.1.025-.15.035-.093.02-.187.03-.282.03h-.017a2.382 2.382 0 0 1-.51-.084c.02.063.044.124.07.182.116.257.23.325.322.327a.543.543 0 0 0 .231-.064Z"
18
- fill="#528693"
20
+ fill={stroke}
19
21
  />
20
22
  <path
21
23
  d="M21.192 18.089c-1.29.375-2.617.56-3.948.55-.182 0-.363.004-.549.004a11.426 11.426 0 0 1-4.13-.586c.045-.97.15-1.957.856-2.436a2.46 2.46 0 0 1 1.511-.386l.357.004c.119 0 .241-.004.367-.008.199.779.58 1.191 1.1 1.191a1.28 1.28 0 0 0 .315-.043c.239-.075.455-.222.626-.425.17-.202.288-.454.341-.727.15.008.297.012.44.012l.367-.004a2.438 2.438 0 0 1 1.495.386c.76.514.817 1.638.852 2.468Z"
22
- fill="#BFF6F8"
24
+ fill={fill}
23
25
  />
24
26
  <path
25
27
  d="M17.79 14.673a1.725 1.725 0 0 1-.176.709 1.52 1.52 0 0 1-.443.541.874.874 0 0 1-.409.118c-.593 0-.793-.924-.854-1.395.304.186.64.292.986.31a.952.952 0 0 0 .213-.023c.238-.048.468-.135.683-.26ZM19.057 10.385c.068 2.19-.538 3.553-1.795 4.052a1.074 1.074 0 0 1-.423.079 2.11 2.11 0 0 1-1.028-.36 2.44 2.44 0 0 1-.768-.85c-.388-.72-.42-1.671-.444-2.438a3.113 3.113 0 0 1 .364-1.678 2.386 2.386 0 0 1 1.195-.979c.23-.105.474-.165.723-.174.08 0 .159.007.237.02.264.05.519.143.759.275.458.242.822.666 1.02 1.19.097.276.15.567.16.863Z"
@@ -27,11 +29,11 @@ export const Users = forwardRef<UsersRef, UsersProps>((delegated, ref) => {
27
29
  />
28
30
  <path
29
31
  d="M16.988 14.936a4.666 4.666 0 0 0-3.056-.923c-.404 0-.816.024-1.23.049l-.262.012c.047-.246.075-.496.085-.747 2.14-1.663 2.201-5.014 2.122-6.377a4.201 4.201 0 0 0-1.23-2.768A4.615 4.615 0 0 0 10.3 2.904c-.068-.006-.14-.006-.214-.006A4.552 4.552 0 0 0 6.01 5.66a5.683 5.683 0 0 0-.312 2.44c.104 1.724.287 3.375 1.382 4.53.244.257.524.477.831.655.017.262.05.523.098.782l-.171-.006c-.416-.024-.82-.049-1.217-.049a4.644 4.644 0 0 0-3.045.923A3.673 3.673 0 0 0 2.33 17.26a8.948 8.948 0 0 0-.183 1.718c.006.66.874.831 1.51.96.098.018.19.036.275.055 2.009.413 4.058.593 6.108.538.293 0 .58 0 .883-.007a27.22 27.22 0 0 0 7.251-.929.26.26 0 0 0 .208-.275.242.242 0 0 0 .025-.136c-.048-1.558-.195-3.3-1.418-4.248Zm-9.923-3.313c-.679-1.12-.733-2.599-.776-3.791a4.401 4.401 0 0 1 .636-2.61 4.11 4.11 0 0 1 2.09-1.523 3.678 3.678 0 0 1 1.266-.272c.14.001.278.011.416.03.46.08.907.223 1.327.429a3.6 3.6 0 0 1 1.785 1.852c.17.427.265.88.281 1.339.12 3.409-.941 5.53-3.142 6.306a2.09 2.09 0 0 1-.74.123 4 4 0 0 1-3.143-1.883Zm4.806 2.127a2.447 2.447 0 0 1-1.082 1.944 1.677 1.677 0 0 1-.715.184c-1.04 0-1.388-1.437-1.495-2.17.53.288 1.12.454 1.724.482.125 0 .25-.012.373-.036.416-.074.82-.21 1.195-.404Zm-.951 6.17c-.318 0-.636.005-.96.005a22.32 22.32 0 0 1-7.231-.91c.08-1.51.263-3.046 1.498-3.791a4.729 4.729 0 0 1 2.646-.6l.623.006c.208 0 .422-.006.642-.012.349 1.21 1.015 1.853 1.926 1.853.185-.002.37-.025.55-.068a2.386 2.386 0 0 0 1.693-1.79c.263.011.52.018.77.018l.643-.007a4.682 4.682 0 0 1 2.616.6c1.333.8 1.431 2.55 1.495 3.84a26.835 26.835 0 0 1-6.914.855h.003Z"
30
- fill="#528693"
32
+ fill={stroke}
31
33
  />
32
34
  <path
33
35
  d="M17.825 19.063a26.834 26.834 0 0 1-6.909.856c-.318 0-.635.006-.96.006a22.32 22.32 0 0 1-7.228-.91c.08-1.511.263-3.046 1.498-3.792a4.729 4.729 0 0 1 2.646-.599l.623.006c.208 0 .422-.006.642-.012.349 1.21 1.015 1.853 1.926 1.853.186-.003.37-.025.55-.068a2.385 2.385 0 0 0 1.693-1.79c.264.011.52.017.77.017l.643-.006a4.682 4.682 0 0 1 2.617.6c1.33.8 1.428 2.549 1.49 3.84Z"
34
- fill="#BFF6F8"
36
+ fill={fill}
35
37
  />
36
38
  <path
37
39
  d="M11.872 13.75a2.446 2.446 0 0 1-1.082 1.944 1.676 1.676 0 0 1-.716.184c-1.04 0-1.388-1.437-1.494-2.17.53.288 1.12.453 1.724.482.125 0 .25-.012.373-.037a4.2 4.2 0 0 0 1.195-.403ZM14.09 7.08c.119 3.405-.942 5.526-3.142 6.303a2.088 2.088 0 0 1-.74.122 3.998 3.998 0 0 1-3.143-1.883c-.679-1.119-.733-2.598-.776-3.79a4.401 4.401 0 0 1 .636-2.611 4.11 4.11 0 0 1 2.09-1.523 3.678 3.678 0 0 1 1.266-.271c.14 0 .278.011.416.03.46.079.907.223 1.327.428a3.6 3.6 0 0 1 1.785 1.853c.17.427.265.881.28 1.341Z"
package/src/iconography/variables.ts ADDED
@@ -0,0 +1,2 @@
1
+ export const fill = 'var(--c-icon-fill, #BFF6F8)';
2
+ export const stroke = 'var(--c-icon-stroke, #528693)';
package/src/iconography/variant.tsx ADDED
@@ -0,0 +1,28 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ import { fill, stroke } from './variables';
4
+
5
+ type VariantProps = SVGProps<SVGSVGElement>;
6
+
7
+ type VariantRef = SVGSVGElement;
8
+
9
+ export const Variant = forwardRef<VariantRef, VariantProps>((delegated, ref) => {
10
+ return (
11
+ <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
12
+ <path
13
+ d="M6.638 19.115h-.01a2.743 2.743 0 0 1-1.966-.775 5.425 5.425 0 0 1-2.12-3.44c-.225-.74-.151-1.539.204-2.226l.008-.015.009-.013a2.385 2.385 0 0 1 1.286-.945 8.964 8.964 0 0 1 1.768-.378 3.782 3.782 0 0 1 1.55.029l.023.005.01.001a.412.412 0 0 1 .056.012l.156.046.035.16c.102.472.277.925.52 1.344l.085.148-.095.141-.01.015-.002.004a3.514 3.514 0 0 1-.365.45m-1.142 5.437 1.142-5.437m-1.142 5.437.01-.001a2.408 2.408 0 0 0 1.82-1.14 5.873 5.873 0 0 0 .96-3.557l-.007-.129-.104-.076a4.089 4.089 0 0 1-.815-.795l-.225-.29-.214.298a2.86 2.86 0 0 1-.205.254 5.75 5.75 0 0 1-1.112.868l-.01.006-.01.007a.03.03 0 0 1-.039-.046c.229-.141.45-.294.663-.457l.002-.001c.085-.067.169-.136.25-.208l.003-.002.055-.05.01-.01.01-.007.008-.009.092-.092-.198-.19.198.19m-1.142 5.437 1.142-5.437m-.406-2.323c-.002 0-.001 0 0 0ZM13.235 9.438l-.028.005h-.004a1.524 1.524 0 0 1-.135.02l-.022-.274.023.273a.03.03 0 0 0-.01.003l-.192.098-.14-.162a5.199 5.199 0 0 0-.692-.662l-.085-.067-.015-.107a7.295 7.295 0 0 1 .509-3.928l.003-.007.003-.007c.426-.86 1.188-1.228 1.989-1.277.788-.048 1.628.207 2.285.593l.006.004a7.062 7.062 0 0 1 2.62 2.924c.259.483.44 1.003.538 1.542l.001.008c.062.414 0 .836-.18 1.215a1.356 1.356 0 0 1-.666.7c-1.625.994-3.398.984-5.137.864l-.181-.013-.059-.171a4.666 4.666 0 0 0-.555-1.11L12.9 9.59l.36-.106c.317-.092.612-.245.87-.451l.006-.006.007-.005a2.65 2.65 0 0 0 .845-.977.03.03 0 0 0-.056-.021c-.02.045-.042.09-.067.137l-.004.006-.004.007-.05.079-.005.01a2.705 2.705 0 0 1-.328.395m-1.24.78.875-.465c.096-.073.185-.149.268-.222l.017-.015.01-.008.008-.009.003-.003.059-.058m-1.24.78.023-.01m-.022.01.022-.01m1.217-.77-.196-.192.196.192Zm-1.217.77a1.06 1.06 0 0 1 .014-.004h.002l.035-.01.002-.001c.098-.032.192-.07.284-.116m-.337.132.94-.884a3.508 3.508 0 0 1-.517.391m-.086.361-.119-.246.12.246Zm0 0c.025-.011.049-.023.07-.034l.004-.003.008-.004.006-.003c.047-.027.095-.055.142-.084l-.144-.232m0 0a3.412 3.412 0 0 1-.132.078l.132-.078Z"
14
+ fill={fill}
15
+ stroke={stroke}
16
+ strokeWidth=".547"
17
+ />
18
+ <path
19
+ d="m13.429 13.3.006-.01.006-.01a2.496 2.496 0 0 0 .24-1.854l-.001-.007-.002-.007a.286.286 0 0 1-.012-.055l-.002-.018-.004-.018a4.323 4.323 0 0 0-1.1-1.972 3.484 3.484 0 0 0-3.5-1.015l-.015.004-.014.005c-.726.291-1.115.944-1.278 1.63a3.95 3.95 0 0 0 .079 2.034 3.517 3.517 0 0 0 2.375 2.39 2.842 2.842 0 0 0 3.222-1.097Z"
20
+ fill={fill}
21
+ stroke={stroke}
22
+ strokeWidth=".547"
23
+ />
24
+ </svg>
25
+ );
26
+ });
27
+
28
+ Variant.displayName = 'VariantIcon';
package/src/iconography/wand.tsx CHANGED
@@ -7,7 +7,7 @@ type WandRef = SVGSVGElement;
7
7
  export const Wand = forwardRef<WandRef, WandProps>((delegated, ref) => {
8
8
  return (
9
9
  <svg ref={ref} width="19" height="19" viewBox="0 0 19 19" fill="none" {...delegated}>
10
- <g clipPath="url(#wand-clip-path)">
10
+ <g clipPath="url(#wand)">
11
11
  <path
12
12
  fill="#fff"
13
13
  d="M2.261 17.145c.54.54 1.416.54 1.957 0l7.6-7.6-1.956-1.957-7.6 7.6c-.541.541-.541 1.417 0 1.957Z"
@@ -34,7 +34,7 @@ export const Wand = forwardRef<WandRef, WandProps>((delegated, ref) => {
34
34
  />
35
35
  </g>
36
36
  <defs>
37
- <clipPath id="wand-clip-path">
37
+ <clipPath id="wand">
38
38
  <path fill="#fff" d="M0 0h18v18H0z" transform="translate(.572 .576)" />
39
39
  </clipPath>
40
40
  </defs>
package/src/iconography/x-for-y.tsx ADDED
@@ -0,0 +1,36 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ import { fill, stroke } from './variables';
4
+
5
+ type XForYProps = SVGProps<SVGSVGElement>;
6
+
7
+ type XForYRef = SVGSVGElement;
8
+
9
+ export const XForY = forwardRef<XForYRef, XForYProps>((delegated, ref) => {
10
+ return (
11
+ <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
12
+ <path
13
+ d="M6.465 3.169a1 1 0 0 1 .886.535l1.57 2.991 1.615-3a1 1 0 0 1 .88-.526h.539a1 1 0 0 1 .865 1.5l-2.05 3.543 1.341 2.427-1.927 1.104-1.207-2.094-1.726 3.094a1 1 0 0 1-.873.512h-.546a1 1 0 0 1-.86-1.51L7.07 8.212 5.038 4.666a1 1 0 0 1 .868-1.497h.56Z"
14
+ fill={fill}
15
+ />
16
+ <path
17
+ fillRule="evenodd"
18
+ clipRule="evenodd"
19
+ d="m12.922 10.866-2.96 1.695-.976-1.695-1.211 2.17a1.6 1.6 0 0 1-1.398.82h-.545a1.6 1.6 0 0 1-1.376-2.417l1.919-3.232-1.858-3.242a1.6 1.6 0 0 1 1.389-2.396h.56a1.6 1.6 0 0 1 1.416.856l1.046 1.992 1.08-2.006a1.6 1.6 0 0 1 1.409-.842h.538a1.6 1.6 0 0 1 1.384 2.402l-1.88 3.248 1.463 2.647ZM10.77 8.212l2.05-3.542a1 1 0 0 0-.865-1.5h-.539a1 1 0 0 0-.88.525l-1.615 3-1.57-2.99a1 1 0 0 0-.886-.536h-.56a1 1 0 0 0-.867 1.497L7.07 8.212l-2.098 3.533a1 1 0 0 0 .86 1.51h.545a1 1 0 0 0 .874-.512L8.977 9.65l1.207 2.093 1.927-1.104-1.34-2.427Z"
20
+ fill={stroke}
21
+ />
22
+ <path
23
+ d="m13.209 11.97 1.886-3.283 1.838-.184.6 1.409-2.854 5.059-.123 3.602-1.555.71-1.25-1.029v-3.283l-2.855-4.9.773-1.568 1.678.27 1.862 3.197Z"
24
+ fill="#fff"
25
+ />
26
+ <path
27
+ fillRule="evenodd"
28
+ clipRule="evenodd"
29
+ d="M13.247 12.418h-.11l-1.802-3.106a1.138 1.138 0 1 0-1.96 1.157l2.634 4.38v2.982a1 1 0 0 0 1 1h.365a1 1 0 0 0 1-1v-2.982l2.66-4.604a1 1 0 0 0-.866-1.5h-.338a1 1 0 0 0-.88.524l-1.703 3.15Zm-.071-1.13-1.322-2.277a1.738 1.738 0 0 0-1.503-.866c-1.352 0-2.186 1.475-1.49 2.633l2.548 4.237v2.816a1.6 1.6 0 0 0 1.6 1.6h.365a1.6 1.6 0 0 0 1.6-1.6V15.01l2.58-4.465a1.6 1.6 0 0 0-1.386-2.4h-.338a1.6 1.6 0 0 0-1.408.839l-1.246 2.305Z"
30
+ fill={stroke}
31
+ />
32
+ </svg>
33
+ );
34
+ });
35
+
36
+ XForY.displayName = 'XForYIcon';
package/src/tooltip/tooltip.css CHANGED
@@ -5,32 +5,16 @@
5
5
 
6
6
  .c-tooltip-success {
7
7
  @apply border border-solid border-cyan-300-600 bg-cyan-100-800 text-green-600-300;
8
-
9
- .c-tooltip-arrow {
10
- @apply fill-cyan-100-800;
11
- }
12
8
  }
13
9
 
14
10
  .c-tooltip-error {
15
11
  @apply border border-solid border-pink-200-700 bg-pink-100-800 text-pink-700-200;
16
-
17
- .c-tooltip-arrow {
18
- @apply fill-pink-100-800;
19
- }
20
12
  }
21
13
 
22
14
  .c-tooltip-warning {
23
15
  @apply border border-solid border-orange-200-700 bg-orange-100-800 text-green-600-300;
24
-
25
- .c-tooltip-arrow {
26
- @apply fill-orange-100-800;
27
- }
28
16
  }
29
17
 
30
18
  .c-tooltip-info {
31
19
  @apply border border-solid border-purple-200-700 bg-white text-gray-500-400;
32
-
33
- .c-tooltip-arrow {
34
- @apply fill-white;
35
- }
36
20
  }
package/src/tooltip/tooltip.tsx CHANGED
@@ -22,7 +22,7 @@ const tooltipStyles = cva(
22
22
 
23
23
  type TooltipProps = TooltipStylesProps &
24
24
  Partial<Pick<RadixTooltip.TooltipContentProps, 'side'>> &
25
- Pick<RadixTooltip.TooltipProps, 'open' | 'onOpenChange'> & {
25
+ Pick<RadixTooltip.TooltipProps, 'open' | 'onOpenChange' | 'disableHoverableContent'> & {
26
26
  children: ReactNode;
27
27
  content: ReactNode;
28
28
  delayDuration?: number;
@@ -40,14 +40,14 @@ export function Tooltip({
40
40
  delayDuration = 800,
41
41
  onOpenChange,
42
42
  open,
43
+ disableHoverableContent,
43
44
  }: TooltipProps) {
44
45
  return (
45
- <RadixTooltip.Provider delayDuration={delayDuration}>
46
+ <RadixTooltip.Provider delayDuration={delayDuration} disableHoverableContent={disableHoverableContent}>
46
47
  <RadixTooltip.Root defaultOpen={defaultOpen} onOpenChange={onOpenChange} open={open}>
47
48
  <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
48
49
  <RadixTooltip.Portal>
49
50
  <RadixTooltip.Content align={align} sideOffset={5} side={side} className={tooltipStyles({ variant })}>
50
- <RadixTooltip.Arrow className="c-tooltip-arrow" />
51
51
  {content}
52
52
  </RadixTooltip.Content>
53
53
  </RadixTooltip.Portal>