@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/dist/index.mjs CHANGED
@@ -17,7 +17,7 @@ import {
17
17
  showError,
18
18
  showInfo,
19
19
  showWarning
20
- } from "./chunk-OD4GHCZ2.mjs";
20
+ } from "./chunk-L37CEYE5.mjs";
21
21
  import "./chunk-NIH5ZMPE.mjs";
22
22
 
23
23
  // src/card/card.tsx
@@ -486,7 +486,7 @@ function Tag({
486
486
  // src/rich-text-editor/index.tsx
487
487
  import { lazy, Suspense } from "react";
488
488
  import { jsx as jsx15 } from "react/jsx-runtime";
489
- var LazyRichTextEditor = lazy(() => import("./rich-text-editor-FMYEV5BL.mjs"));
489
+ var LazyRichTextEditor = lazy(() => import("./rich-text-editor-FXEPVDMG.mjs"));
490
490
  var RichTextEditor = (props) => {
491
491
  return /* @__PURE__ */ jsx15(Suspense, {
492
492
  fallback: null,
package/dist/{rich-text-editor-FMYEV5BL.mjs → rich-text-editor-FXEPVDMG.mjs} RENAMED
@@ -6,7 +6,7 @@ import {
6
6
  Icon,
7
7
  IconButton,
8
8
  InputWithLabel
9
- } from "./chunk-OD4GHCZ2.mjs";
9
+ } from "./chunk-L37CEYE5.mjs";
10
10
  import "./chunk-NIH5ZMPE.mjs";
11
11
 
12
12
  // src/rich-text-editor/rich-text-editor.tsx
package/dist/{rich-text-editor-RUYX7OQE.css → rich-text-editor-KXLB6GMR.css} RENAMED
@@ -1235,9 +1235,6 @@
1235
1235
  --tw-text-opacity: 1;
1236
1236
  color: rgb(var(--c-color-green-600-300) / var(--tw-text-opacity));
1237
1237
  }
1238
- .c-tooltip-success .c-tooltip-arrow {
1239
- fill: rgb(var(--c-color-cyan-100-800) / 1);
1240
- }
1241
1238
  .c-tooltip-error {
1242
1239
  border-width: 1px;
1243
1240
  border-style: solid;
@@ -1248,9 +1245,6 @@
1248
1245
  --tw-text-opacity: 1;
1249
1246
  color: rgb(var(--c-color-pink-700-200) / var(--tw-text-opacity));
1250
1247
  }
1251
- .c-tooltip-error .c-tooltip-arrow {
1252
- fill: rgb(var(--c-color-pink-100-800) / 1);
1253
- }
1254
1248
  .c-tooltip-warning {
1255
1249
  border-width: 1px;
1256
1250
  border-style: solid;
@@ -1261,9 +1255,6 @@
1261
1255
  --tw-text-opacity: 1;
1262
1256
  color: rgb(var(--c-color-green-600-300) / var(--tw-text-opacity));
1263
1257
  }
1264
- .c-tooltip-warning .c-tooltip-arrow {
1265
- fill: rgb(var(--c-color-orange-100-800) / 1);
1266
- }
1267
1258
  .c-tooltip-info {
1268
1259
  border-width: 1px;
1269
1260
  border-style: solid;
@@ -1274,9 +1265,6 @@
1274
1265
  --tw-text-opacity: 1;
1275
1266
  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
1276
1267
  }
1277
- .c-tooltip-info .c-tooltip-arrow {
1278
- fill: #fff;
1279
- }
1280
1268
 
1281
1269
  /* src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.css */
1282
1270
  .c-rte-floating-text-format-tb-plugin {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crystallize/design-system",
3
- "version": "1.24.29",
3
+ "version": "1.24.31",
4
4
  "types": "./dist/index.d.ts",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
package/src/iconography/coupon.tsx ADDED
@@ -0,0 +1,36 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ import { fill, stroke } from './variables';
4
+
5
+ type CouponProps = SVGProps<SVGSVGElement>;
6
+
7
+ type CouponRef = SVGSVGElement;
8
+
9
+ export const Coupon = forwardRef<CouponRef, CouponProps>((delegated, ref) => {
10
+ return (
11
+ <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
12
+ <g clipPath="url(#coupon)" fillRule="evenodd" clipRule="evenodd">
13
+ <path
14
+ d="M15.859 3.782v13.796c0 .03-.024.053-.053.053h-.359a.583.583 0 0 1-.184-.03l-1.093-.364a1.539 1.539 0 0 0-.973 0l-.921.307c-.12.04-.25.04-.37 0l-.92-.307a1.539 1.539 0 0 0-.973 0l-1.175.392a.053.053 0 0 1-.016.002H5.193a.053.053 0 0 1-.053-.053V3.782c0-.03.024-.053.053-.053h.443c.032 0 .064.003.096.008l1.33.222c.168.028.34.028.507 0l1.243-.208a.584.584 0 0 1 .192 0l1.242.208c.168.028.339.028.506 0l1.331-.222a.583.583 0 0 1 .096-.008h3.627c.03 0 .053.024.053.053Z"
15
+ fill={fill}
16
+ />
17
+ <path
18
+ d="m10.013 17.237.177.53-1.175.39a.611.611 0 0 1-.193.032H5.194a.61.61 0 0 1-.61-.61V3.782a.61.61 0 0 1 .61-.61h.442c.063 0 .126.005.188.015l1.33.222a.981.981 0 0 0 .324 0l1.243-.207c.124-.02.25-.02.375 0l1.243.207a.98.98 0 0 0 .322 0l1.331-.222c.062-.01.125-.015.188-.015h3.626a.61.61 0 0 1 .61.61V17.58a.61.61 0 0 1-.61.61h-.358a1.14 1.14 0 0 1-.36-.058l-1.094-.365a.982.982 0 0 0-.62 0l-.177-.529c.316-.105.658-.105.973 0l1.093.365c.06.02.122.03.185.03h.358c.03 0 .053-.024.053-.053V3.782a.053.053 0 0 0-.053-.053H12.18a.583.583 0 0 0-.096.008l-1.331.222a1.54 1.54 0 0 1-.506 0l-1.243-.207a.584.584 0 0 0-.192 0l-1.243.207a1.54 1.54 0 0 1-.506 0l-1.33-.222a.583.583 0 0 0-.097-.008h-.442a.053.053 0 0 0-.053.053V17.58c0 .029.023.053.053.053h3.628a.053.053 0 0 0 .017-.003l1.174-.392Zm2.264.307c-.12.04-.25.04-.37 0l-.92-.307a1.539 1.539 0 0 0-.974 0l.177.53a.982.982 0 0 1 .62 0l.921.306c.234.078.488.078.722 0l.92-.307-.176-.529-.92.307Z"
19
+ fill={stroke}
20
+ />
21
+ <path d="M14.593 14.459a1.327 1.327 0 0 1-2.65 0 1.327 1.327 0 0 1 2.65 0Z" fill="#fff" />
22
+ <path
23
+ d="m15.059 14.459-.001.018a1.791 1.791 0 0 1-3.58 0v-.036a1.791 1.791 0 0 1 3.58 0v.018Zm-1.79 1.274c.714 0 1.297-.566 1.325-1.274a1.327 1.327 0 0 0-2.651 0c.027.708.61 1.274 1.325 1.274Z"
24
+ fill={stroke}
25
+ />
26
+ </g>
27
+ <defs>
28
+ <clipPath id="coupon">
29
+ <path fill="#fff" d="M0 0h22v22H0z" />
30
+ </clipPath>
31
+ </defs>
32
+ </svg>
33
+ );
34
+ });
35
+
36
+ Coupon.displayName = 'CouponIcon';
package/src/iconography/date-infinity.tsx ADDED
@@ -0,0 +1,51 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ import { fill, stroke } from './variables';
4
+
5
+ type DateInfinityProps = SVGProps<SVGSVGElement>;
6
+
7
+ type DateInfinityRef = SVGSVGElement;
8
+
9
+ export const DateInfinity = forwardRef<DateInfinityRef, DateInfinityProps>((delegated, ref) => {
10
+ return (
11
+ <svg ref={ref} width="23" height="23" viewBox="0 0 23 23" fill="none" {...delegated}>
12
+ <path
13
+ d="M17.783 4.862H5.3c-.492 0-.891.4-.891.892v11.59c0 .492.399.891.891.891h9.884a.892.892 0 0 0 .63-.26l2.598-2.599a.892.892 0 0 0 .261-.63V5.754c0-.493-.399-.892-.891-.892Z"
14
+ fill="#fff"
15
+ />
16
+ <path
17
+ fillRule="evenodd"
18
+ clipRule="evenodd"
19
+ d="M5.301 4.328h12.482c.787 0 1.426.639 1.426 1.427v8.991c0 .379-.15.742-.418 1.01l-2.598 2.597c-.268.268-.63.418-1.009.418H5.301a1.427 1.427 0 0 1-1.426-1.427V5.755c0-.787.638-1.426 1.426-1.426Zm0 .535h12.482c.492 0 .891.4.891.892v8.991a.891.891 0 0 1-.261.63l-2.598 2.599a.891.891 0 0 1-.63.261H5.3a.892.892 0 0 1-.892-.892V5.755c0-.492.4-.89.892-.89Z"
20
+ fill={stroke}
21
+ />
22
+ <path d="M4.41 5.754c0-.493.399-.892.891-.892h12.482c.492 0 .891.4.891.892v1.783H4.41V5.754Z" fill={fill} />
23
+ <path
24
+ fillRule="evenodd"
25
+ clipRule="evenodd"
26
+ d="M19.209 8.073H3.875V5.755c0-.788.638-1.427 1.426-1.427h12.482c.787 0 1.426.639 1.426 1.427v2.318ZM5.3 4.863c-.492 0-.892.4-.892.892v1.783h14.265V5.755c0-.493-.4-.892-.892-.892H5.301Z"
27
+ fill={stroke}
28
+ />
29
+ <path
30
+ fillRule="evenodd"
31
+ clipRule="evenodd"
32
+ d="M7.53 3.524v1.337h-.892V3.524a.446.446 0 0 1 .892 0ZM16.445 3.524v1.337h-.892V3.524a.446.446 0 0 1 .892 0ZM11.987 3.524v1.337h-.891V3.524a.446.446 0 1 1 .891 0ZM19.03 15.293h-2.675a.624.624 0 0 0-.624.624v2.674h-.535v-2.674c0-.64.519-1.16 1.159-1.16h2.674v.536Z"
33
+ fill={stroke}
34
+ />
35
+ <path
36
+ d="M15.24 10.333c1.186.055 2.354.99 2.25 2.266a1.79 1.79 0 0 1-1.316 1.57c-.856.237-1.802.02-2.606-.31a8.582 8.582 0 0 1-1.79-1.043.186.186 0 0 0-.22-.005c-.807.534-1.663.994-2.619 1.187-.892.184-2 .188-2.657-.556-.69-.78-.504-2.012.27-2.66.752-.629 1.725-.719 2.636-.435.878.275 1.653.801 2.39 1.336a.176.176 0 0 0 .218.004c1.01-.674 2.18-1.41 3.445-1.354Zm1.266 1.631a1.357 1.357 0 0 0-.621-.575c-.498-.253-1.071-.209-1.59-.05a7.45 7.45 0 0 0-1.591.791c-.128.075-.076.24.027.304l.29.176a5.409 5.409 0 0 0 1.881.736c.55.097 1.342.106 1.638-.476a1.01 1.01 0 0 0-.034-.906Zm-5.859.398a.176.176 0 0 0 .014-.284c-.853-.561-1.87-1.25-2.941-.953a1.344 1.344 0 0 0-.938.831.898.898 0 0 0 .399 1.083c.349.167.74.225 1.122.167a4.89 4.89 0 0 0 1.409-.366 9.96 9.96 0 0 0 .935-.478Z"
37
+ fill={fill}
38
+ />
39
+ <path
40
+ d="M16.984 14.187c-.21.148-.442.26-.688.335-1.319.367-2.88-.079-4.637-1.327-1.208.78-2.26 1.185-3.312 1.266-1.221.1-2.206-.356-2.642-1.21-.492-.966-.169-2.2.75-2.874l.047-.033c1.72-1.217 3.678-.134 5.193.954a9.377 9.377 0 0 1 2.115-1.109c1.076-.362 2.657-.359 3.58.84a2.333 2.333 0 0 1 .388 2.069 2.08 2.08 0 0 1-.794 1.089ZM6.733 10.67l-.166.118a1.95 1.95 0 0 0-.684 1.345 1.716 1.716 0 0 0 .415 1.278c.673.762 1.8.72 2.632.548.831-.172 1.628-.534 2.607-1.181a.215.215 0 0 1 .245.008 8.699 8.699 0 0 0 1.786 1.04c.993.405 1.863.506 2.584.309.207-.064.403-.16.58-.284a1.688 1.688 0 0 0 .727-1.26 1.882 1.882 0 0 0-.489-1.412 2.515 2.515 0 0 0-1.741-.823c-1.211-.054-2.313.605-3.429 1.349a.203.203 0 0 1-.242-.008c-.72-.522-1.497-1.055-2.382-1.33-.885-.274-1.765-.174-2.442.305l-.001-.002Z"
41
+ fill={stroke}
42
+ />
43
+ <path
44
+ d="M16.284 13.196c-.39.276-.966.253-1.387.17a5.449 5.449 0 0 1-1.88-.739l-.29-.175a.25.25 0 0 1-.114-.193.176.176 0 0 1 .073-.146l.056-.04a7.248 7.248 0 0 1 1.55-.765c.625-.19 1.165-.178 1.608.054.268.123.49.329.631.587a1.037 1.037 0 0 1 .029.923.856.856 0 0 1-.276.324Zm-3.082-.923c.538.34 1.135.575 1.76.694.226.04.786.11 1.086-.101a.465.465 0 0 0 .2-.325c.068-.464-.364-.82-.815-.93-.753-.162-1.514.235-2.231.662ZM10.662 12.386l-.08.043c-.28.162-.568.31-.864.441a4.937 4.937 0 0 1-1.416.367c-.389.06-.786.002-1.14-.17a.923.923 0 0 1-.41-1.114c.082-.248.243-.463.46-.609.152-.105.32-.185.496-.239 1.063-.295 2.09.38 2.914.923l.05.034a.177.177 0 0 1 .076.15.198.198 0 0 1-.075.166l-.011.008Zm-3.21-.71a.702.702 0 0 0-.322.762c.11.37.612.428 1.01.403a4.946 4.946 0 0 0 2.02-.642c-.742-.486-1.523-.937-2.314-.716a1.383 1.383 0 0 0-.394.194Z"
45
+ fill={stroke}
46
+ />
47
+ </svg>
48
+ );
49
+ });
50
+
51
+ DateInfinity.displayName = 'DateInfinityIcon';
package/src/iconography/date.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 DateProps = SVGProps<SVGSVGElement>;
4
6
 
5
7
  type DateRef = SVGSVGElement;
@@ -15,97 +17,93 @@ export const Date = forwardRef<DateRef, DateProps>((delegated, ref) => {
15
17
  fillRule="evenodd"
16
18
  clipRule="evenodd"
17
19
  d="M3.99999 3.40002H18C18.8837 3.40002 19.6 4.11637 19.6 5.00002V15.0858C19.6 15.5102 19.4314 15.9171 19.1314 16.2172L16.2172 19.1314C15.9171 19.4315 15.5101 19.6 15.0858 19.6H3.99999C3.11634 19.6 2.39999 18.8837 2.39999 18V5.00002C2.39999 4.11637 3.11634 3.40002 3.99999 3.40002ZM3.99999 4.00002H18C18.5523 4.00002 19 4.44774 19 5.00002V15.0858C19 15.351 18.8946 15.6054 18.7071 15.7929L15.7929 18.7071C15.6054 18.8947 15.351 19 15.0858 19H3.99999C3.44771 19 2.99999 18.5523 2.99999 18V5.00002C2.99999 4.44774 3.44771 4.00002 3.99999 4.00002Z"
18
- fill="#528693"
19
- />
20
- <path
21
- d="M3 5C3 4.44772 3.44772 4 4 4H18C18.5523 4 19 4.44772 19 5V7H3V5Z"
22
- fill="#BFF6F8"
23
- className="c-icon-fill"
20
+ fill={stroke}
24
21
  />
22
+ <path d="M3 5C3 4.44772 3.44772 4 4 4H18C18.5523 4 19 4.44772 19 5V7H3V5Z" fill={fill} className="c-icon-fill" />
25
23
  <path
26
24
  fillRule="evenodd"
27
25
  clipRule="evenodd"
28
26
  d="M19.6 7.60002H2.39999V5.00002C2.39999 4.11637 3.11634 3.40002 3.99999 3.40002H18C18.8836 3.40002 19.6 4.11637 19.6 5.00002V7.60002ZM3.99999 4.00002C3.44771 4.00002 2.99999 4.44774 2.99999 5.00002V7.00002H19V5.00002C19 4.44774 18.5523 4.00002 18 4.00002H3.99999Z"
29
- fill="#528693"
27
+ fill={stroke}
30
28
  />
31
29
  <path
32
30
  fillRule="evenodd"
33
31
  clipRule="evenodd"
34
32
  d="M6.5 2.5L6.5 4L5.5 4L5.5 2.5C5.5 2.22386 5.72386 2 6 2C6.27614 2 6.5 2.22386 6.5 2.5Z"
35
- fill="#528693"
33
+ fill={stroke}
36
34
  />
37
35
  <path
38
36
  fillRule="evenodd"
39
37
  clipRule="evenodd"
40
38
  d="M16.5 2.5L16.5 4L15.5 4L15.5 2.5C15.5 2.22386 15.7239 2 16 2C16.2761 2 16.5 2.22386 16.5 2.5Z"
41
- fill="#528693"
39
+ fill={stroke}
42
40
  />
43
41
  <path
44
42
  fillRule="evenodd"
45
43
  clipRule="evenodd"
46
44
  d="M11.5 2.5L11.5 4L10.5 4L10.5 2.5C10.5 2.22386 10.7239 2 11 2C11.2761 2 11.5 2.22386 11.5 2.5Z"
47
- fill="#528693"
45
+ fill={stroke}
48
46
  />
49
47
  <path
50
48
  d="M5.20001 10.156C5.20001 9.90415 5.40415 9.70001 5.65597 9.70001H7.40628C7.6581 9.70001 7.86224 9.90415 7.86224 10.156V11.9063C7.86224 12.1581 7.6581 12.3622 7.40628 12.3622H5.65597C5.40415 12.3622 5.20001 12.1581 5.20001 11.9063V10.156Z"
51
- fill="#BFF6F8"
49
+ fill={fill}
52
50
  className="c-icon-fill"
53
51
  />
54
52
  <path
55
53
  fillRule="evenodd"
56
54
  clipRule="evenodd"
57
55
  d="M5.65596 9.24408H7.40627C7.90991 9.24408 8.31818 9.65235 8.31818 10.156V11.9063C8.31818 12.4099 7.9099 12.8182 7.40627 12.8182H5.65596C5.15232 12.8182 4.74405 12.4099 4.74405 11.9063V10.156C4.74405 9.65235 5.15232 9.24408 5.65596 9.24408ZM5.65596 9.70003C5.40414 9.70003 5.2 9.90417 5.2 10.156V11.9063C5.2 12.1581 5.40414 12.3623 5.65596 12.3623H7.40627C7.65809 12.3623 7.86223 12.1581 7.86223 11.9063V10.156C7.86223 9.90417 7.65809 9.70003 7.40627 9.70003H5.65596Z"
58
- fill="#528693"
56
+ fill={stroke}
59
57
  />
60
58
  <path
61
59
  d="M9.67651 10.156C9.67651 9.90415 9.88065 9.70001 10.1325 9.70001H11.8828C12.1346 9.70001 12.3387 9.90415 12.3387 10.156V11.9063C12.3387 12.1581 12.1346 12.3622 11.8828 12.3622H10.1325C9.88065 12.3622 9.67651 12.1581 9.67651 11.9063V10.156Z"
62
- fill="#BFF6F8"
60
+ fill={fill}
63
61
  className="c-icon-fill"
64
62
  />
65
63
  <path
66
64
  fillRule="evenodd"
67
65
  clipRule="evenodd"
68
66
  d="M10.1325 9.24408H11.8828C12.3864 9.24408 12.7947 9.65235 12.7947 10.156V11.9063C12.7947 12.4099 12.3864 12.8182 11.8828 12.8182H10.1325C9.62882 12.8182 9.22055 12.4099 9.22055 11.9063V10.156C9.22055 9.65235 9.62883 9.24408 10.1325 9.24408ZM10.1325 9.70003C9.88064 9.70003 9.6765 9.90417 9.6765 10.156V11.9063C9.6765 12.1581 9.88064 12.3623 10.1325 12.3623H11.8828C12.1346 12.3623 12.3387 12.1581 12.3387 11.9063V10.156C12.3387 9.90417 12.1346 9.70003 11.8828 9.70003H10.1325Z"
69
- fill="#528693"
67
+ fill={stroke}
70
68
  />
71
69
  <path
72
70
  d="M14.1531 10.156C14.1531 9.90415 14.3573 9.70001 14.6091 9.70001H16.3594C16.6112 9.70001 16.8154 9.90415 16.8154 10.156V11.9063C16.8154 12.1581 16.6112 12.3622 16.3594 12.3622H14.6091C14.3573 12.3622 14.1531 12.1581 14.1531 11.9063V10.156Z"
73
- fill="#BFF6F8"
71
+ fill={fill}
74
72
  className="c-icon-fill"
75
73
  />
76
74
  <path
77
75
  fillRule="evenodd"
78
76
  clipRule="evenodd"
79
77
  d="M14.6091 9.24408H16.3594C16.863 9.24408 17.2713 9.65235 17.2713 10.156V11.9063C17.2713 12.4099 16.863 12.8182 16.3594 12.8182H14.6091C14.1054 12.8182 13.6972 12.4099 13.6972 11.9063V10.156C13.6972 9.65235 14.1054 9.24408 14.6091 9.24408ZM14.6091 9.70003C14.3573 9.70003 14.1531 9.90417 14.1531 10.156V11.9063C14.1531 12.1581 14.3573 12.3623 14.6091 12.3623H16.3594C16.6112 12.3623 16.8154 12.1581 16.8154 11.9063V10.156C16.8154 9.90417 16.6112 9.70003 16.3594 9.70003H14.6091Z"
80
- fill="#528693"
78
+ fill={stroke}
81
79
  />
82
80
  <path
83
81
  d="M5.20001 14.8182C5.20001 14.5664 5.40415 14.3622 5.65597 14.3622H7.40628C7.6581 14.3622 7.86224 14.5664 7.86224 14.8182V16.5685C7.86224 16.8203 7.6581 17.0245 7.40628 17.0245H5.65597C5.40415 17.0245 5.20001 16.8203 5.20001 16.5685V14.8182Z"
84
- fill="#BFF6F8"
82
+ fill={fill}
85
83
  className="c-icon-fill"
86
84
  />
87
85
  <path
88
86
  fillRule="evenodd"
89
87
  clipRule="evenodd"
90
88
  d="M5.65596 13.9063H7.40627C7.90991 13.9063 8.31818 14.3146 8.31818 14.8182V16.5685C8.31818 17.0722 7.9099 17.4804 7.40627 17.4804H5.65596C5.15232 17.4804 4.74405 17.0722 4.74405 16.5685V14.8182C4.74405 14.3146 5.15232 13.9063 5.65596 13.9063ZM5.65596 14.3623C5.40414 14.3623 5.2 14.5664 5.2 14.8182V16.5685C5.2 16.8204 5.40414 17.0245 5.65596 17.0245H7.40627C7.65809 17.0245 7.86223 16.8204 7.86223 16.5685V14.8182C7.86223 14.5664 7.65809 14.3623 7.40627 14.3623H5.65596Z"
91
- fill="#528693"
89
+ fill={stroke}
92
90
  />
93
91
  <path
94
92
  d="M9.67651 14.8182C9.67651 14.5664 9.88065 14.3622 10.1325 14.3622H11.8828C12.1346 14.3622 12.3387 14.5664 12.3387 14.8182V16.5685C12.3387 16.8203 12.1346 17.0245 11.8828 17.0245H10.1325C9.88065 17.0245 9.67651 16.8203 9.67651 16.5685V14.8182Z"
95
- fill="#BFF6F8"
93
+ fill={fill}
96
94
  className="c-icon-fill"
97
95
  />
98
96
  <path
99
97
  fillRule="evenodd"
100
98
  clipRule="evenodd"
101
99
  d="M10.1325 13.9063H11.8828C12.3864 13.9063 12.7947 14.3146 12.7947 14.8182V16.5685C12.7947 17.0722 12.3864 17.4804 11.8828 17.4804H10.1325C9.62882 17.4804 9.22055 17.0722 9.22055 16.5685V14.8182C9.22055 14.3146 9.62883 13.9063 10.1325 13.9063ZM10.1325 14.3623C9.88064 14.3623 9.6765 14.5664 9.6765 14.8182V16.5685C9.6765 16.8204 9.88064 17.0245 10.1325 17.0245H11.8828C12.1346 17.0245 12.3387 16.8204 12.3387 16.5685V14.8182C12.3387 14.5664 12.1346 14.3623 11.8828 14.3623H10.1325Z"
102
- fill="#528693"
100
+ fill={stroke}
103
101
  />
104
102
  <path
105
103
  fillRule="evenodd"
106
104
  clipRule="evenodd"
107
105
  d="M19.4 15.7L16.4 15.7C16.0134 15.7 15.7 16.0134 15.7 16.4L15.7 19.4L15.1 19.4L15.1 16.4C15.1 15.6821 15.6821 15.1 16.4 15.1L19.4 15.1L19.4 15.7Z"
108
- fill="#528693"
106
+ fill={stroke}
109
107
  />
110
108
  </svg>
111
109
  );
package/src/iconography/dynamic-value.tsx ADDED
@@ -0,0 +1,43 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ import { fill, stroke } from './variables';
4
+
5
+ type DynamicValueProps = SVGProps<SVGSVGElement>;
6
+
7
+ type DynamicValueRef = SVGSVGElement;
8
+
9
+ export const DynamicValue = forwardRef<DynamicValueRef, DynamicValueProps>((delegated, ref) => {
10
+ return (
11
+ <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
12
+ <g clipPath="url(#dynamic-value)">
13
+ <path
14
+ d="M7.997 12.437h1.902l.245 2.924 7.333-7.21 1.05.308.333 1.128-7.05 7.333h2.403l.637 1.03-.402 1.029-5.88.185-.695-.652.124-6.075Z"
15
+ fill={fill}
16
+ />
17
+ <path
18
+ d="M13.965 9.584h-1.903l-.245-2.924-7.333 7.21-1.049-.309-.333-1.127L10.15 5.1H7.749L7.11 4.07l.402-1.03 5.88-.185.696.653-.124 6.075Z"
19
+ fill="#fff"
20
+ />
21
+ <path
22
+ fillRule="evenodd"
23
+ clipRule="evenodd"
24
+ d="M8.431 19.343c.133.082.352.196.604.196h4.6a1.49 1.49 0 1 0 0-2.979h-1.132l6.157-6.157a1.455 1.455 0 0 0-2.058-2.058l-6.157 6.157v-1.131a1.49 1.49 0 1 0-2.98 0v4.6c0 .251.115.47.197.603.095.153.217.3.344.426.126.126.273.248.425.343Zm1.414-5.972a.89.89 0 1 0-1.78 0v4.6c0 .32.648.968.97.968h4.6a.89.89 0 1 0 0-1.779h-2.58l7.18-7.181a.855.855 0 1 0-1.209-1.21l-7.181 7.182v-2.58Z"
25
+ fill={stroke}
26
+ />
27
+ <path
28
+ fillRule="evenodd"
29
+ clipRule="evenodd"
30
+ d="M13.569 2.657c-.133-.082-.352-.196-.604-.196h-4.6a1.49 1.49 0 0 0 0 2.979h1.132L3.34 11.597a1.455 1.455 0 0 0 2.058 2.058l6.157-6.157v1.131a1.49 1.49 0 1 0 2.98 0v-4.6c0-.251-.115-.47-.197-.603A2.428 2.428 0 0 0 13.994 3a2.43 2.43 0 0 0-.425-.343ZM12.155 8.63a.89.89 0 1 0 1.78 0v-4.6c0-.32-.648-.968-.97-.968h-4.6a.89.89 0 0 0 0 1.779h2.58l-7.18 7.181a.855.855 0 1 0 1.209 1.21l7.181-7.182v2.58Z"
31
+ fill={stroke}
32
+ />
33
+ </g>
34
+ <defs>
35
+ <clipPath id="dynamic-value">
36
+ <path fill="#fff" d="M0 0h22v22H0z" />
37
+ </clipPath>
38
+ </defs>
39
+ </svg>
40
+ );
41
+ });
42
+
43
+ DynamicValue.displayName = 'DynamicValueIcon';
package/src/iconography/fixed-value.tsx ADDED
@@ -0,0 +1,36 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ import { fill, stroke } from './variables';
4
+
5
+ type FixedValueProps = SVGProps<SVGSVGElement>;
6
+
7
+ type FixedValueRef = SVGSVGElement;
8
+
9
+ export const FixedValue = forwardRef<FixedValueRef, FixedValueProps>((delegated, ref) => {
10
+ return (
11
+ <svg ref={ref} width="23" height="22" viewBox="0 0 23 22" fill="none" {...delegated}>
12
+ <path
13
+ d="M17.764 3.734h-11.2c-.998 0-1.7.984-1.7 2.05v10.5c0 1.067.702 2.05 1.7 2.05h11.2c.998 0 1.7-.983 1.7-2.05v-10.5c0-1.066-.702-2.05-1.7-2.05Z"
14
+ fill="#fff"
15
+ />
16
+ <path
17
+ d="m8.745 8.47 1.218-.84 2.24-.392 1.856.29 1.707.88-.868 1.109-2.694-.688-2.413.619-.99-.145-.056-.833ZM8.58 10.549h7.117v1.301H8.58zM8.58 13.372h7.117v1.301H8.58z"
18
+ fill={fill}
19
+ />
20
+ <path
21
+ fillRule="evenodd"
22
+ clipRule="evenodd"
23
+ d="M4.563 5.785c0-1.163.775-2.35 2-2.35h11.2c1.226 0 2 1.187 2 2.35v10.5c0 1.162-.774 2.35-2 2.35h-11.2c-1.225 0-2-1.188-2-2.35v-10.5Zm2-1.75c-.77 0-1.4.78-1.4 1.75v10.5c0 .97.63 1.75 1.4 1.75h11.2c.771 0 1.4-.78 1.4-1.75v-10.5c0-.97-.629-1.75-1.4-1.75h-11.2Z"
24
+ fill={stroke}
25
+ />
26
+ <path
27
+ fillRule="evenodd"
28
+ clipRule="evenodd"
29
+ d="M8.872 7.837c1.092-.695 2.127-.951 3.291-.951 1.175 0 2.2.255 3.287.948.527.336.63 1.017.32 1.502-.343.538-1.036.65-1.538.353-.82-.486-1.392-.566-2.069-.566-.76 0-1.367.135-2.065.554-.497.3-1.197.2-1.545-.346-.307-.482-.205-1.16.32-1.494Zm.378 2.203h5.826a1.118 1.118 0 1 1 0 2.237H9.25a1.118 1.118 0 1 1 0-2.237Zm0 2.906h5.826a1.118 1.118 0 1 1 0 2.236H9.25a1.118 1.118 0 1 1 0-2.236ZM9.06 9.008a.536.536 0 0 0 .73.155c.803-.483 1.52-.64 2.374-.64.76 0 1.444.098 2.375.65a.536.536 0 0 0 .727-.16.485.485 0 0 0-.138-.673c-.982-.626-1.893-.854-2.964-.854-1.059 0-1.981.228-2.968.857a.48.48 0 0 0-.136.665Zm-.327 2.15c0 .287.232.519.518.519h5.826a.518.518 0 0 0 0-1.037H9.25a.518.518 0 0 0-.518.518Zm0 2.906c0 .286.232.518.518.518h5.826a.518.518 0 0 0 0-1.036H9.25a.518.518 0 0 0-.518.518Z"
30
+ fill={stroke}
31
+ />
32
+ </svg>
33
+ );
34
+ });
35
+
36
+ FixedValue.displayName = 'FixedValueIcon';
package/src/iconography/folder.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 FolderProps = SVGProps<SVGSVGElement>;
4
6
 
5
7
  type FolderRef = SVGSVGElement;
@@ -9,25 +11,25 @@ export const Folder = forwardRef<FolderRef, FolderProps>((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="M2.604 4.108v13.146a.6.6 0 00.6.6h11.968c.59 0 1.166-.255 1.429-.784 1.374-2.77 1.642-8.38 1.166-10.692-.114-.555-.706-.927-1.272-.927l-7.091.067-2-1.41h-4.8z"
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="M2.004 4.146a.6.6 0 01.6-.6h4.8a.6.6 0 01.413.165L9.644 4.96h6.87c.722 0 1.591.36 1.785 1.303l-.587.12c-.114-.554-.632-.823-1.199-.823H9.404l-2-1.414h-4.8v13.108a.6.6 0 00.6.6h11.968c.59 0 1.166-.255 1.429-.784 1.374-2.77 1.587-8.373 1.11-10.686l.588-.121c.255 1.236.317 2.9.15 5.085-.167 2.178-.57 4.495-1.31 5.989-.395.794-1.225 1.117-1.967 1.117H3.204a1.2 1.2 0 01-1.2-1.2V4.146z"
19
- fill="#528693"
21
+ fill={stroke}
20
22
  />
21
23
  <path
22
24
  d="M4.659 10.021L3.502 17.17a.6.6 0 00.594.685h12.076c.59 0 1.164-.254 1.46-.765 1.419-2.445 2.065-6 1.765-7.956-.086-.56-.617-.829-1.184-.829H6.64a2 2 0 00-1.98 1.717z"
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="M2.908 17.084l1.157-7.11A2.6 2.6 0 016.639 7.74h11.574c.704 0 1.626.35 1.777 1.338.165 1.073.066 1.776-.24 3.48-.307 1.708-.84 3.522-1.599 4.83-.429.74-1.23 1.065-1.979 1.065H4.096a1.2 1.2 0 01-1.188-1.37zm.594.085l1.157-7.111a2 2 0 011.98-1.717h11.574c.567 0 1.098.268 1.184.829.3 1.956-.346 5.474-1.764 7.919-.297.51-.87.765-1.46.765H4.095a.6.6 0 01-.594-.685z"
30
- fill="#528693"
32
+ fill={stroke}
31
33
  />
32
34
  </svg>
33
35
  );
package/src/iconography/index.ts CHANGED
@@ -21,15 +21,18 @@ import { Cloud } from './cloud';
21
21
  import { CloudWithKeyHole } from './cloud-with-key-hole';
22
22
  import { Copy } from './copy';
23
23
  import { CopyWithCloud } from './copy-with-cloud';
24
+ import { Coupon } from './coupon';
24
25
  import { Crystal } from './crystal';
25
26
  import { Customers } from './customers';
26
27
  import { Dashboard } from './dashboard';
27
28
  import { Date } from './date';
29
+ import { DateInfinity } from './date-infinity';
28
30
  import { Discovery } from './discovery';
29
31
  import { Document } from './document';
30
32
  import { DocumentShortcut } from './document-shortcut';
31
33
  import { Download } from './download';
32
34
  import { DragHandle } from './drag-handle';
35
+ import { DynamicValue } from './dynamic-value';
33
36
  import { Edit } from './edit';
34
37
  import { Error } from './error';
35
38
  import { ErrorWhite } from './error-white';
@@ -38,6 +41,7 @@ import { EyeOpen } from './eye-open';
38
41
  import { FileUpload } from './file-upload';
39
42
  import { Filename } from './filename';
40
43
  import { FixedPropertyTable } from './fixed-property-table';
44
+ import { FixedValue } from './fixed-value';
41
45
  import { Flow } from './flow';
42
46
  import { Folder } from './folder';
43
47
  import { FolderShortcut } from './folder-shortcut';
@@ -59,6 +63,8 @@ import { Location } from './location';
59
63
  import { LockClosed } from './lock-closed';
60
64
  import { LockOpen } from './lock-open';
61
65
  import { Magnifier } from './magnifier';
66
+ import { MinQuantity } from './min-quantity';
67
+ import { MinValue } from './min-value';
62
68
  import { Multilingual } from './multilingual';
63
69
  import { MultipleChoice } from './multiple-choice';
64
70
  import { Mushroom } from './mushroom';
@@ -109,9 +115,11 @@ import { UsageMeter } from './usage-meter';
109
115
  import { User } from './user';
110
116
  import { UserCard } from './user-card';
111
117
  import { Users } from './users';
118
+ import { Variant } from './variant';
112
119
  import { Video } from './video';
113
120
  import { Wand } from './wand';
114
121
  import { Warning } from './warning';
122
+ import { XForY } from './x-for-y';
115
123
 
116
124
  export const Icon = {
117
125
  Add,
@@ -131,6 +139,7 @@ export const Icon = {
131
139
  Clock,
132
140
  CloudWithKeyHole,
133
141
  Copy,
142
+ Coupon,
134
143
  CopyWithCloud,
135
144
  Customers,
136
145
  Dashboard,
@@ -138,10 +147,12 @@ export const Icon = {
138
147
  DocumentShortcut,
139
148
  Download,
140
149
  DragHandle,
150
+ DynamicValue,
141
151
  Discovery,
142
152
  Edit,
143
153
  EyeClosed,
144
154
  EyeOpen,
155
+ FixedValue,
145
156
  Flow,
146
157
  Folder,
147
158
  FolderShortcut,
@@ -162,6 +173,8 @@ export const Icon = {
162
173
  Multilingual,
163
174
  MultipleChoice,
164
175
  Magnifier,
176
+ MinQuantity,
177
+ MinValue,
165
178
  Mushroom,
166
179
  NailPolish,
167
180
  Order,
@@ -204,6 +217,7 @@ export const Icon = {
204
217
  Video,
205
218
  GridRelation,
206
219
  Date,
220
+ DateInfinity,
207
221
  Relation,
208
222
  Numeric,
209
223
  Filename,
@@ -235,6 +249,8 @@ export const Icon = {
235
249
  Usage,
236
250
  UserCard,
237
251
  Users,
252
+ Variant,
238
253
  Wand,
239
254
  Warning,
255
+ XForY,
240
256
  };
package/src/iconography/min-quantity.tsx ADDED
@@ -0,0 +1,40 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ import { fill, stroke } from './variables';
4
+
5
+ type MinQuantityProps = SVGProps<SVGSVGElement>;
6
+
7
+ type MinQuantityRef = SVGSVGElement;
8
+
9
+ export const MinQuantity = forwardRef<MinQuantityRef, MinQuantityProps>((delegated, ref) => {
10
+ return (
11
+ <svg ref={ref} width="23" height="22" viewBox="0 0 23 22" fill="none" {...delegated}>
12
+ <path
13
+ d="M6.09 7.765a1.366 1.366 0 0 1 1.36-1.246h8.97c.713 0 1.306.55 1.36 1.26l.743 9.67c.06.793-.566 1.47-1.362 1.47H6.603c-.801 0-1.43-.686-1.36-1.485l.847-9.669Z"
14
+ fill={fill}
15
+ />
16
+ <path
17
+ fillRule="evenodd"
18
+ clipRule="evenodd"
19
+ d="M7.449 6.108h8.968c.928 0 1.7.714 1.77 1.64l.742 9.669a1.775 1.775 0 0 1-1.77 1.911H6.602a1.775 1.775 0 0 1-1.768-1.93l.847-9.67c.08-.917.848-1.62 1.769-1.62Zm0 .41c-.708 0-1.299.54-1.36 1.246l-.848 9.67c-.07.798.56 1.484 1.36 1.484H17.16c.795 0 1.422-.677 1.361-1.47l-.742-9.67a1.366 1.366 0 0 0-1.362-1.26H7.45Z"
20
+ fill={stroke}
21
+ />
22
+ <path
23
+ d="m11.285 11.93-.356 1.977c-.012.048.009.071.062.071h1.158c.047 0 .077-.023.089-.07l.347-1.977c.012-.048-.01-.071-.063-.071h-1.148c-.047 0-.077.023-.089.07ZM9.46 14.549a.277.277 0 0 1-.205-.08.277.277 0 0 1-.08-.205c0-.083.027-.151.08-.204a.277.277 0 0 1 .205-.08h.73c.048 0 .077-.024.09-.072l.346-1.976c.012-.048-.009-.071-.062-.071h-.65a.297.297 0 0 1-.205-.08.278.278 0 0 1-.08-.205c0-.083.027-.152.08-.205a.297.297 0 0 1 .205-.08h.757c.047 0 .077-.027.089-.08l.196-1.13a.384.384 0 0 1 .383-.321c.083 0 .15.032.204.098.06.065.083.139.071.222l-.204 1.13a.059.059 0 0 0 .009.054c.017.018.035.027.053.027h1.157c.048 0 .078-.027.09-.08l.195-1.13a.384.384 0 0 1 .383-.321c.083 0 .151.032.205.098.06.065.083.139.071.222l-.205 1.13a.059.059 0 0 0 .01.054c.017.018.035.027.053.027h.605c.083 0 .151.027.205.08.053.053.08.122.08.205a.278.278 0 0 1-.08.205.278.278 0 0 1-.205.08h-.703c-.048 0-.078.023-.09.07l-.356 1.977c-.011.048.01.071.063.071h.632c.077 0 .142.027.196.08.06.054.089.122.089.205 0 .083-.03.152-.09.205a.266.266 0 0 1-.195.08h-.73c-.048 0-.077.027-.09.08l-.23 1.309a.383.383 0 0 1-.383.32.253.253 0 0 1-.205-.098.276.276 0 0 1-.063-.222l.232-1.309c.006-.018 0-.035-.018-.053-.012-.018-.027-.027-.044-.027h-1.158c-.047 0-.077.027-.089.08l-.231 1.309a.384.384 0 0 1-.383.32.253.253 0 0 1-.205-.098.276.276 0 0 1-.062-.222l.231-1.309c.006-.018 0-.035-.017-.053-.012-.018-.027-.027-.045-.027H9.46Z"
24
+ fill={stroke}
25
+ />
26
+ <path
27
+ d="M8.686 6.974c0-.085.026-.168.074-.238l2.08-3.013a1.265 1.265 0 0 1 2.083 0l2.08 3.013a.418.418 0 1 1-.688.475L12.23 4.19a.422.422 0 0 0-.694 0L9.448 7.21a.418.418 0 0 1-.762-.237Z"
28
+ fill="#fff"
29
+ />
30
+ <path
31
+ fillRule="evenodd"
32
+ clipRule="evenodd"
33
+ d="m8.344 6.45 2.08-3.014a1.771 1.771 0 0 1 2.916 0l2.08 3.013a.924.924 0 0 1 .164.525c0 .907-1.17 1.271-1.684.525l-2.018-2.922L9.865 7.5c-.515.746-1.684.382-1.684-.525 0-.187.057-.37.163-.525Zm.417.287a.418.418 0 1 0 .688.475l2.086-3.023a.422.422 0 0 1 .694 0l2.087 3.023a.418.418 0 0 0 .688-.475l-2.08-3.014a1.265 1.265 0 0 0-2.083 0l-2.08 3.014Z"
34
+ fill={stroke}
35
+ />
36
+ </svg>
37
+ );
38
+ });
39
+
40
+ MinQuantity.displayName = 'MinQuantityIcon';
package/src/iconography/min-value.tsx ADDED
@@ -0,0 +1,40 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ import { fill, stroke } from './variables';
4
+
5
+ type MinValueProps = SVGProps<SVGSVGElement>;
6
+
7
+ type MinValueRef = SVGSVGElement;
8
+
9
+ export const MinValue = forwardRef<MinValueRef, MinValueProps>((delegated, ref) => {
10
+ return (
11
+ <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
12
+ <path
13
+ d="M5.21 7.766a1.366 1.366 0 0 1 1.36-1.247h8.97c.713 0 1.306.55 1.36 1.261l.743 9.67c.06.793-.566 1.47-1.362 1.47H5.723c-.801 0-1.43-.687-1.36-1.485l.847-9.67Z"
14
+ fill={fill}
15
+ />
16
+ <path
17
+ fillRule="evenodd"
18
+ clipRule="evenodd"
19
+ d="M6.568 6.11h8.969c.928 0 1.699.713 1.77 1.638l.742 9.67a1.775 1.775 0 0 1-1.77 1.911H5.721a1.775 1.775 0 0 1-1.768-1.93l.847-9.67c.08-.917.848-1.62 1.768-1.62Zm0 .409c-.708 0-1.298.54-1.36 1.246l-.847 9.67c-.07.798.559 1.484 1.36 1.484h10.558c.795 0 1.422-.677 1.362-1.47l-.742-9.67a1.366 1.366 0 0 0-1.362-1.26H6.568Z"
20
+ fill={stroke}
21
+ />
22
+ <path
23
+ d="M7.804 6.975c0-.085.026-.168.074-.238l2.08-3.013a1.265 1.265 0 0 1 2.082 0l2.08 3.013a.418.418 0 1 1-.688.475L11.347 4.19a.422.422 0 0 0-.694 0L8.566 7.212a.418.418 0 0 1-.762-.237Z"
24
+ fill="#fff"
25
+ />
26
+ <path
27
+ fillRule="evenodd"
28
+ clipRule="evenodd"
29
+ d="m7.462 6.45 2.08-3.014a1.771 1.771 0 0 1 2.915 0l2.08 3.013a.924.924 0 0 1 .164.525c0 .907-1.17 1.271-1.684.525l-2.018-2.921-2.017 2.921c-.515.746-1.684.382-1.684-.525 0-.187.057-.37.164-.525Zm.416.287a.418.418 0 1 0 .688.475l2.086-3.023a.422.422 0 0 1 .695 0l2.086 3.023a.418.418 0 1 0 .688-.475l-2.08-3.014a1.265 1.265 0 0 0-2.083 0l-2.08 3.014Z"
30
+ fill={stroke}
31
+ />
32
+ <path
33
+ d="M12.193 14.276a.88.88 0 0 0-.276-.658c-.181-.178-.488-.339-.92-.483-.603-.184-1.043-.423-1.32-.717-.275-.297-.412-.673-.412-1.129 0-.463.135-.844.403-1.14.272-.298.644-.475 1.116-.531v-.93h.632v.934c.475.065.844.265 1.107.598.266.334.4.79.4 1.37h-.781c0-.398-.095-.715-.285-.95a.935.935 0 0 0-.768-.352c-.336 0-.593.088-.772.263-.178.173-.267.415-.267.726 0 .288.093.519.28.691.19.17.5.325.93.467.432.138.768.292 1.009.462.243.167.421.362.534.586.116.223.174.485.174.784 0 .478-.144.863-.432 1.154-.286.292-.688.464-1.205.518v.81h-.628v-.81c-.526-.048-.939-.235-1.239-.56-.297-.328-.445-.772-.445-1.332h.785c0 .393.103.696.31.908.206.212.498.318.877.318.37 0 .662-.09.874-.267.212-.179.319-.422.319-.73Z"
34
+ fill={stroke}
35
+ />
36
+ </svg>
37
+ );
38
+ });
39
+
40
+ MinValue.displayName = 'CouponIcon';
package/src/iconography/percentage.tsx CHANGED
@@ -5,46 +5,49 @@ type PercentageProps = SVGProps<SVGSVGElement>;
5
5
  type PercentageRef = SVGSVGElement;
6
6
 
7
7
  export const Percentage = forwardRef<PercentageRef, PercentageProps>((delegated, ref) => {
8
+ const fill = 'var(--c-icon-fill, #BFF6F8)';
9
+ const stroke = 'var(--c-icon-stroke, #528693)';
10
+
8
11
  return (
9
12
  <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
10
13
  <path
11
14
  fillRule="evenodd"
12
15
  clipRule="evenodd"
13
16
  d="M6.03188 15.4616L16.3576 5.13588C16.7481 4.74536 17.3813 4.74536 17.7718 5.13588C18.1623 5.52641 18.1623 6.15957 17.7718 6.5501L7.44609 16.8758C7.05556 17.2663 6.4224 17.2663 6.03188 16.8758C5.64135 16.4853 5.64135 15.8521 6.03188 15.4616Z"
14
- fill="#BFF6F8"
17
+ fill={fill}
15
18
  className="c-icon-fill"
16
19
  />
17
20
  <path
18
21
  fillRule="evenodd"
19
22
  clipRule="evenodd"
20
23
  d="M5.60761 15.0373L15.9333 4.71159C16.5582 4.08676 17.5712 4.08676 18.1961 4.7116C18.8209 5.33644 18.8209 6.3495 18.1961 6.97434L7.87035 17.3C7.24551 17.9249 6.23245 17.9249 5.60761 17.3C4.98277 16.6752 4.98277 15.6621 5.60761 15.0373ZM16.3576 5.13586L6.03187 15.4616C5.64135 15.8521 5.64135 16.4853 6.03187 16.8758C6.4224 17.2663 7.05556 17.2663 7.44609 16.8758L17.7718 6.55007C18.1623 6.15955 18.1623 5.52638 17.7718 5.13586C17.3813 4.74533 16.7481 4.74533 16.3576 5.13586Z"
21
- fill="#528693"
24
+ fill={stroke}
22
25
  />
23
26
  <path
24
27
  fillRule="evenodd"
25
28
  clipRule="evenodd"
26
29
  d="M9.60204 6.70605C9.60204 7.81062 8.70661 8.70605 7.60204 8.70605C6.49747 8.70605 5.60204 7.81062 5.60204 6.70605C5.60204 5.60148 6.49747 4.70605 7.60204 4.70605C8.70661 4.70605 9.60204 5.60148 9.60204 6.70605Z"
27
- fill="#BFF6F8"
30
+ fill={fill}
28
31
  className="c-icon-fill"
29
32
  />
30
33
  <path
31
34
  fillRule="evenodd"
32
35
  clipRule="evenodd"
33
36
  d="M10.202 6.70603C10.202 8.14197 9.03798 9.30603 7.60204 9.30603C6.1661 9.30603 5.00204 8.14197 5.00204 6.70603C5.00204 5.27009 6.1661 4.10603 7.60204 4.10603C9.03798 4.10603 10.202 5.27009 10.202 6.70603ZM7.60204 8.70603C8.70661 8.70603 9.60204 7.8106 9.60204 6.70603C9.60204 5.60146 8.70661 4.70603 7.60204 4.70603C6.49747 4.70603 5.60204 5.60146 5.60204 6.70603C5.60204 7.8106 6.49747 8.70603 7.60204 8.70603Z"
34
- fill="#528693"
37
+ fill={stroke}
35
38
  />
36
39
  <path
37
40
  fillRule="evenodd"
38
41
  clipRule="evenodd"
39
42
  d="M18.602 15.7061C18.602 16.8106 17.7066 17.7061 16.602 17.7061C15.4975 17.7061 14.602 16.8106 14.602 15.7061C14.602 14.6015 15.4975 13.7061 16.602 13.7061C17.7066 13.7061 18.602 14.6015 18.602 15.7061Z"
40
- fill="#BFF6F8"
43
+ fill={fill}
41
44
  className="c-icon-fill"
42
45
  />
43
46
  <path
44
47
  fillRule="evenodd"
45
48
  clipRule="evenodd"
46
49
  d="M19.202 15.7061C19.202 17.142 18.038 18.3061 16.602 18.3061C15.1661 18.3061 14.002 17.142 14.002 15.7061C14.002 14.2701 15.1661 13.1061 16.602 13.1061C18.038 13.1061 19.202 14.2701 19.202 15.7061ZM16.602 17.7061C17.7066 17.7061 18.602 16.8106 18.602 15.7061C18.602 14.6015 17.7066 13.7061 16.602 13.7061C15.4975 13.7061 14.602 14.6015 14.602 15.7061C14.602 16.8106 15.4975 17.7061 16.602 17.7061Z"
47
- fill="#528693"
50
+ fill={stroke}
48
51
  />
49
52
  </svg>
50
53
  );