@crystallize/design-system 1.19.3 → 1.20.1

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 (18) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/index.css +58 -6
  3. package/dist/index.d.ts +17 -5
  4. package/dist/index.js +1497 -1294
  5. package/dist/index.mjs +1390 -1187
  6. package/package.json +19 -19
  7. package/src/dialog/dialog.css +1 -1
  8. package/src/iconography/document-shortcut.tsx +40 -0
  9. package/src/iconography/folder-shortcut.tsx +44 -0
  10. package/src/iconography/folder.tsx +12 -8
  11. package/src/iconography/index.ts +8 -0
  12. package/src/iconography/paths.tsx +33 -0
  13. package/src/iconography/product-shortcut.tsx +60 -0
  14. package/src/input-with-label/input-with-label.css +5 -1
  15. package/src/input-with-label/input-with-label.tsx +12 -7
  16. package/src/tooltip/tooltip.css +31 -3
  17. package/src/tooltip/tooltip.tsx +29 -13
  18. package/src/iconography/triangle.tsx +0 -27
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crystallize/design-system",
3
- "version": "1.19.3",
3
+ "version": "1.20.1",
4
4
  "types": "./dist/index.d.ts",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -20,23 +20,23 @@
20
20
  }
21
21
  },
22
22
  "dependencies": {
23
- "@lexical/clipboard": "0.10.0",
24
- "@lexical/code": "0.10.0",
25
- "@lexical/file": "0.10.0",
26
- "@lexical/hashtag": "0.10.0",
27
- "@lexical/html": "0.10.0",
28
- "@lexical/link": "0.10.0",
29
- "@lexical/list": "0.10.0",
30
- "@lexical/mark": "0.10.0",
31
- "@lexical/markdown": "0.10.0",
32
- "@lexical/overflow": "0.10.0",
33
- "@lexical/react": "0.10.0",
34
- "@lexical/rich-text": "0.10.0",
35
- "@lexical/selection": "0.10.0",
36
- "@lexical/table": "0.10.0",
37
- "@lexical/text": "0.10.0",
38
- "@lexical/utils": "0.10.0",
39
- "@lexical/yjs": "0.10.0",
23
+ "@lexical/clipboard": "0.12.4",
24
+ "@lexical/code": "0.12.4",
25
+ "@lexical/file": "0.12.4",
26
+ "@lexical/hashtag": "0.12.4",
27
+ "@lexical/html": "0.12.4",
28
+ "@lexical/link": "0.12.4",
29
+ "@lexical/list": "0.12.4",
30
+ "@lexical/mark": "0.12.4",
31
+ "@lexical/markdown": "0.12.4",
32
+ "@lexical/overflow": "0.12.4",
33
+ "@lexical/react": "0.12.4",
34
+ "@lexical/rich-text": "0.12.4",
35
+ "@lexical/selection": "0.12.4",
36
+ "@lexical/table": "0.12.4",
37
+ "@lexical/text": "0.12.4",
38
+ "@lexical/utils": "0.12.4",
39
+ "@lexical/yjs": "0.12.4",
40
40
  "@radix-ui/react-checkbox": "1.0.1",
41
41
  "@radix-ui/react-dialog": "1.0.2",
42
42
  "@radix-ui/react-dropdown-menu": "2.0.1",
@@ -48,7 +48,7 @@
48
48
  "@radix-ui/react-switch": "^1.0.2",
49
49
  "@radix-ui/react-tooltip": "1.0.0",
50
50
  "class-variance-authority": "^0.4.0",
51
- "lexical": "0.10.0",
51
+ "lexical": "0.12.4",
52
52
  "sonner": "^0.6.2",
53
53
  "use-debounce": "8.0.4"
54
54
  },
package/src/dialog/dialog.css CHANGED
@@ -15,7 +15,7 @@
15
15
  }
16
16
 
17
17
  &-description {
18
- @apply mb-5 mt-1 font-medium;
18
+ @apply mb-5 mt-1 text-sm font-medium;
19
19
  }
20
20
 
21
21
  &-close-button {
package/src/iconography/document-shortcut.tsx ADDED
@@ -0,0 +1,40 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type DocumentShortcutProps = SVGProps<SVGSVGElement>;
4
+
5
+ type DocumentShortcutRef = SVGSVGElement;
6
+
7
+ export const DocumentShortcut = forwardRef<DocumentShortcutRef, DocumentShortcutProps>((delegated, ref) => {
8
+ return (
9
+ <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
10
+ <path
11
+ d="M5.6 19h10.8a.6.6 0 00.6-.6V6.649a.6.6 0 00-.176-.425l-3.048-3.048A.6.6 0 0013.35 3H5.6a.6.6 0 00-.6.6v14.8a.6.6 0 00.6.6z"
12
+ fill="#BFF6F8"
13
+ />
14
+ <path
15
+ fillRule="evenodd"
16
+ clipRule="evenodd"
17
+ d="M16.824 6.224l.424-.424a1.2 1.2 0 01.352.849V18.4a1.2 1.2 0 01-1.2 1.2H5.6a1.2 1.2 0 01-1.2-1.2V3.6a1.2 1.2 0 011.2-1.2h7.752a1.2 1.2 0 01.848.352L17.249 5.8l-.425.424zM16.4 19H5.6a.6.6 0 01-.6-.6V3.6a.6.6 0 01.6-.6h7.752a.6.6 0 01.424.176l3.048 3.048A.6.6 0 0117 6.65V18.4a.6.6 0 01-.6.6z"
18
+ fill="#528693"
19
+ />
20
+ <path
21
+ fillRule="evenodd"
22
+ clipRule="evenodd"
23
+ d="M13.7 2.8v2.6a.7.7 0 00.7.7h3v.6h-3a1.3 1.3 0 01-1.3-1.3V2.8h.6z"
24
+ fill="#528693"
25
+ />
26
+ <path
27
+ d="M20.695 1.67a.572.572 0 01.616.613l-.376 6.053c-.033.533-.685.804-1.051.437l-.67-.67-.669-.668L7.65 18.33s-2.239 1.962-3.46 1.574c-1.197-.38-1.738-1.34-1.701-2.699.069-2.57 1.886-3.277 1.886-3.277l.008 1.758L15.683 4.573l-.805-.806-.651-.65c-.366-.367-.097-1.017.435-1.052l6.033-.396z"
28
+ fill="#FFDE99"
29
+ />
30
+ <path
31
+ fillRule="evenodd"
32
+ clipRule="evenodd"
33
+ d="M4.382 15.688L15.683 4.572l-1.456-1.457c-.366-.366-.097-1.016.435-1.051l6.033-.396a.572.572 0 01.616.614l-.376 6.053c-.033.533-.685.804-1.051.437l-1.339-1.338L7.65 18.33s-2.239 1.962-3.46 1.574c-1.197-.38-1.738-1.34-1.701-2.699.042-1.586.752-2.463 1.288-2.902.332-.271.598-.375.598-.375l.008 1.758zm-.008-1.759c-.217-.56-.218-.559-.218-.559l-.002.001-.004.002-.01.003a1.701 1.701 0 00-.107.05 2.96 2.96 0 00-.26.144c-.209.13-.482.33-.756.625-.556.599-1.09 1.555-1.129 2.995-.02.759.119 1.462.476 2.046.364.593.923 1.012 1.644 1.241.485.154 1.001.06 1.43-.086a6.3 6.3 0 001.256-.618 11.322 11.322 0 001.32-.964l.022-.019.006-.005.002-.002-.395-.452.396.451.015-.013L18.545 8.283l.914.915c.777.776 2.014.16 2.075-.825l.376-6.053a1.172 1.172 0 00-1.255-1.25l-6.032.396c-.983.065-1.596 1.3-.82 2.075l1.028 1.028-9.855 9.693-.006-1.209-.814.317.218.559z"
34
+ fill="#528693"
35
+ />
36
+ </svg>
37
+ );
38
+ });
39
+
40
+ DocumentShortcut.displayName = 'DocumentShortcutIcon';
package/src/iconography/folder-shortcut.tsx ADDED
@@ -0,0 +1,44 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type FolderShortcutProps = SVGProps<SVGSVGElement>;
4
+
5
+ type FolderShortcutRef = SVGSVGElement;
6
+
7
+ export const FolderShortcut = forwardRef<FolderShortcutRef, FolderShortcutProps>((delegated, ref) => {
8
+ return (
9
+ <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
10
+ <path
11
+ d="M2.567 4.108v13.146a.6.6 0 00.6.6h11.969c.59 0 1.166-.255 1.428-.784 1.375-2.77 1.643-8.38 1.167-10.692-.115-.555-.706-.927-1.273-.927l-7.09.067-2-1.41h-4.8z"
12
+ fill="#BFF6F8"
13
+ />
14
+ <path
15
+ fillRule="evenodd"
16
+ clipRule="evenodd"
17
+ d="M1.967 4.146a.6.6 0 01.6-.6h4.8a.6.6 0 01.414.165L9.607 4.96h6.87c.722 0 1.592.36 1.786 1.303l-.588.12c-.114-.554-.631-.823-1.198-.823h-7.11l-2-1.414h-4.8v13.108a.6.6 0 00.6.6h11.969c.59 0 1.166-.255 1.428-.784 1.375-2.77 1.587-8.373 1.111-10.686l.588-.121c.254 1.236.316 2.9.149 5.085-.167 2.178-.57 4.495-1.31 5.989-.395.794-1.225 1.117-1.966 1.117H3.167a1.2 1.2 0 01-1.2-1.2V4.146z"
18
+ fill="#528693"
19
+ />
20
+ <path
21
+ d="M4.622 10.021L3.465 17.17a.6.6 0 00.594.685h12.076c.591 0 1.164-.254 1.461-.765 1.418-2.445 2.065-6 1.764-7.956-.085-.56-.616-.829-1.183-.829H6.602a2 2 0 00-1.98 1.717z"
22
+ fill="#BFF6F8"
23
+ />
24
+ <path
25
+ fillRule="evenodd"
26
+ clipRule="evenodd"
27
+ d="M2.871 17.084l1.157-7.11A2.6 2.6 0 016.602 7.74h11.575c.704 0 1.625.35 1.777 1.338.164 1.073.065 1.776-.24 3.48-.308 1.708-.84 3.522-1.599 4.83-.43.74-1.23 1.065-1.98 1.065H4.06a1.2 1.2 0 01-1.188-1.37zm.594.085l1.157-7.111a2 2 0 011.98-1.717h11.575c.567 0 1.098.268 1.183.829.3 1.956-.346 5.474-1.764 7.919-.297.51-.87.765-1.46.765H4.059a.6.6 0 01-.594-.685z"
28
+ fill="#528693"
29
+ />
30
+ <path
31
+ d="M19.85 1.37a.57.57 0 01.616.613l-.404 6.08c-.036.536-.691.812-1.058.445l-.67-.67-.668-.668L6.673 18.162S4.49 20.125 2.89 19.504c-1.184-.46-1.924-1.154-1.881-2.518.08-2.582 2.395-3.231 2.395-3.231l-.381 2.173 11.781-11.62-.805-.806-.651-.651c-.366-.366-.092-1.02.442-1.058l6.06-.424z"
32
+ fill="#FFDE99"
33
+ />
34
+ <path
35
+ fillRule="evenodd"
36
+ clipRule="evenodd"
37
+ d="M3.022 15.928l11.781-11.62-1.456-1.457c-.366-.366-.092-1.02.442-1.058l6.06-.424a.57.57 0 01.617.614l-.404 6.08c-.036.536-.691.812-1.058.445L17.666 7.17 6.673 18.162S4.49 20.125 2.89 19.504c-1.184-.46-1.924-1.154-1.881-2.518.052-1.674 1.043-2.535 1.734-2.934a3.2 3.2 0 01.661-.297l-.381 2.173zm.381-2.173l-.162-.578h-.002l-.004.002-.01.003a3.791 3.791 0 00-.437.17 4.368 4.368 0 00-.934.587c-.695.573-1.399 1.533-1.446 3.028-.025.804.183 1.466.616 1.996.42.515 1.008.852 1.648 1.1 1.071.416 2.236-.05 3-.472a8.48 8.48 0 001.37-.954l.022-.02.007-.006.002-.002c.001 0 .001-.001-.4-.447l.4.447.013-.012 10.58-10.579.914.914c.383.384.909.414 1.31.245.398-.167.736-.553.77-1.073l.405-6.081A1.17 1.17 0 0019.808.77l-6.06.424c-.52.036-.905.374-1.071.773-.168.4-.137.925.246 1.307l1.03 1.03-10.016 9.877.222-1.262-.918.257.162.578zm.165.577z"
38
+ fill="#528693"
39
+ />
40
+ </svg>
41
+ );
42
+ });
43
+
44
+ FolderShortcut.displayName = 'FolderShortcutIcon';
package/src/iconography/folder.tsx CHANGED
@@ -6,21 +6,25 @@ type FolderRef = SVGSVGElement;
6
6
 
7
7
  export const Folder = forwardRef<FolderRef, FolderProps>((delegated, ref) => {
8
8
  return (
9
- <svg ref={ref} width="34" height="34" viewBox="0 0 34 34" fill="none" {...delegated}>
9
+ <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
10
10
  <path
11
- d="M29.451 12.006c0-4.26-1.3-3.498-3.767-3.498H14.26l-3.148-3.026H3.978c-2.285 0-2.199 1.236-2.199 3.829v16.218c0 2.037.2 3.037 2.174 3.037"
12
- fill="#bff6f8"
11
+ 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"
13
13
  />
14
14
  <path
15
- d="M30.31 24.858a53.13 53.13 0 0 0 1.844-8.704c.178-1.544.589-4.137-2.56-4.26-3.15-.124-17.992-.063-20.52-.063-2.528 0-3.149 1.73-3.399 3.768s-2.16 12.968-2.16 12.968 20.658 0 22.695-.062c2.037-.062 3.36-1.34 4.1-3.647Z"
16
- fill="#bff6f8"
15
+ fillRule="evenodd"
16
+ clipRule="evenodd"
17
+ 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"
18
+ fill="#528693"
17
19
  />
18
20
  <path
19
- d="M3.516 29.141a.581.581 0 0 1-.3-.1A1.978 1.978 0 0 1 1.5 27.855a5.648 5.648 0 0 1-.3-2.362V12.451c0-.5-.01-1.004-.02-1.511-.048-1.2-.027-2.401.06-3.598.211-2.26 1.805-2.444 3.559-2.444h3.724a17.764 17.764 0 0 1 2.477 0c.342.055.652.233.871.5l2.046 1.97c.062.058.133.137.208.223.106.13.224.248.353.354a.488.488 0 0 1 .162-.022h9.972a15.821 15.821 0 0 1 3.12.121 2.89 2.89 0 0 1 2.188 3.282c.65.05 1.276.273 1.811.647 1.413 1.065 1.159 2.959.955 4.48l-.03.216a46.22 46.22 0 0 1-1.835 8.253 5.346 5.346 0 0 1-2.951 3.819 6.528 6.528 0 0 1-2.133.357s-.212 0-.318-.008c-4.376.052-8.636.06-12.224.06l-9.678-.009Zm4.207-1.15c4.092 0 8.183-.005 12.274-.016h.38c1.588 0 3.176-.008 4.762-.024a9.645 9.645 0 0 0 1.676-.08c1.647-.311 2.44-1.778 2.999-3.172a48.96 48.96 0 0 0 1.8-8.72l.021-.185c.163-.77.12-1.57-.125-2.317-.413-.9-1.4-1-2.464-1.026-2.966-.072-6.159-.107-9.76-.107-3.368 0-6.735.03-10.094.066a2.44 2.44 0 0 0-2.556 1.547 9.554 9.554 0 0 0-.45 2.212 184.339 184.339 0 0 1-.617 3.822l-.125.742c-.407 2.42-.823 4.84-1.246 7.259h3.525Zm-3.66-21.93c-.786 0-1.315.114-1.531.682a5.51 5.51 0 0 0-.176 2.069c.008.22.016.435.016.639v15.547c0 .434-.006.868.016 1.3.044.825.239 1.273.679 1.51a820.157 820.157 0 0 0 1.656-9.732c.067-.413.117-.845.17-1.284.079-1.175.329-2.332.741-3.434.812-1.843 2.481-2.1 4.163-2.105h2.7c2.354-.006 4.709-.01 7.064-.011h1.784c1.975 0 3.951.007 5.927.032l1.386-.01h.286l-.006-.033c-.131-.769-.268-1.565-.9-1.9a3.324 3.324 0 0 0-1.498-.268c-.2 0-.4.007-.594.013-.178.005-.35.01-.514.012H16.504c-.182 0-.4.017-.628.034-.274.02-.57.043-.853.043-.4.027-.8-.055-1.155-.24A9.295 9.295 0 0 1 12.55 7.67a28.33 28.33 0 0 0-.533-.492 13.702 13.702 0 0 1-1.09-1.067l-.04-.044-6.825-.006Z"
20
- fill="#528693"
21
+ 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"
22
+ fill="#BFF6F8"
21
23
  />
22
24
  <path
23
- d="M31.61 12.13a3.713 3.713 0 0 0-1.91-.63 2.729 2.729 0 0 0-2-3.259 15.839 15.839 0 0 0-3.092-.12h-8.99c-.321 0-.644.005-.966 0-.262 0-.03.116-.193.042-.237-.107-.5-.478-.68-.654l-1.93-1.854c-.3-.289-.458-.5-.864-.56a17.461 17.461 0 0 0-2.463 0H4.798c-1.8 0-3.17.22-3.362 2.264-.157 1.674-.04 3.413-.04 5.097v12.64c-.089.903.008 1.814.285 2.678a1.899 1.899 0 0 0 1.64 1.1c.058.038.124.06.192.063 7.304 0 14.61.034 21.912-.053a6.325 6.325 0 0 0 2.367-.334 5.186 5.186 0 0 0 2.83-3.61.357.357 0 0 0 .007-.085 45.972 45.972 0 0 0 1.827-8.217c.198-1.484.54-3.463-.846-4.508ZM10.936 5.84c-.045-.023-.054-.045 0 0ZM2.187 26.31c-.031-.581-.016-1.167-.016-1.748V9.451c-.1-.93-.042-1.87.174-2.78.35-.922 1.416-.805 2.237-.805H10.962c.04.035.077.073.112.113.49.558 1.088 1.047 1.624 1.56.383.446.808.853 1.27 1.216.607.375 1.825.133 2.531.133 2.976 0 5.952.007 8.928 0a5.983 5.983 0 0 1 2.699.268c.8.423.9 1.446 1.055 2.314-.661-.023-1.328.01-1.914 0-1.975-.025-3.95-.03-5.925-.032-3.85 0-7.696.008-11.548.015-1.689 0-3.23.283-3.98 1.986a19.563 19.563 0 0 0-.9 4.67 793.307 793.307 0 0 1-1.695 9.978c-.715-.24-.982-.809-1.032-1.778ZM31.808 16a50.136 50.136 0 0 1-1.78 8.727.347.347 0 0 0-.03.045c-.599 1.493-1.444 2.973-3.155 3.299a9.703 9.703 0 0 1-1.699.082c-1.714.017-3.43.02-5.144.025-4.432.013-8.864.019-13.294.017H3.959c.436-2.497.865-4.996 1.289-7.497.253-1.514.517-3.025.731-4.544a9.83 9.83 0 0 1 .464-2.268 2.66 2.66 0 0 1 2.74-1.674c6.616-.07 13.25-.12 19.864.041 1.013.025 2.164.1 2.641 1.143.269.842.31 1.74.12 2.604Z"
25
+ fillRule="evenodd"
26
+ clipRule="evenodd"
27
+ 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"
24
28
  fill="#528693"
25
29
  />
26
30
  </svg>
package/src/iconography/index.ts CHANGED
@@ -23,6 +23,7 @@ import { Customers } from './customers';
23
23
  import { Dashboard } from './dashboard';
24
24
  import { Date } from './date';
25
25
  import { Document } from './document';
26
+ import { DocumentShortcut } from './document-shortcut';
26
27
  import { Download } from './download';
27
28
  import { DragHandle } from './drag-handle';
28
29
  import { Edit } from './edit';
@@ -34,6 +35,7 @@ import { FileUpload } from './file-upload';
34
35
  import { Filename } from './filename';
35
36
  import { FixedPropertyTable } from './fixed-property-table';
36
37
  import { Folder } from './folder';
38
+ import { FolderShortcut } from './folder-shortcut';
37
39
  import { Frontends } from './frontends';
38
40
  import { Fulfilment } from './fulfilment';
39
41
  import { Glasses } from './glasses';
@@ -58,6 +60,7 @@ import { Numeric } from './numeric';
58
60
  import { Order } from './order';
59
61
  import { ParagraphCollection } from './paragraph-collection';
60
62
  import { Particle } from './particle';
63
+ import { Paths } from './paths';
61
64
  import { People } from './people';
62
65
  import { Percentage } from './percentage';
63
66
  import { Pin } from './pin';
@@ -67,6 +70,7 @@ import { Plug } from './plug';
67
70
  import { PriceList } from './price-list';
68
71
  import { PriceTag } from './price-tag';
69
72
  import { Product } from './product';
73
+ import { ProductShortcut } from './product-shortcut';
70
74
  import { PropertyTable } from './property-table';
71
75
  import { Relation } from './relation';
72
76
  import { Renew } from './renew';
@@ -114,12 +118,14 @@ export const Icon = {
114
118
  Customers,
115
119
  Dashboard,
116
120
  Document,
121
+ DocumentShortcut,
117
122
  Download,
118
123
  DragHandle,
119
124
  Edit,
120
125
  EyeClosed,
121
126
  EyeOpen,
122
127
  Folder,
128
+ FolderShortcut,
123
129
  Frontends,
124
130
  Fulfilment,
125
131
  Glasses,
@@ -138,6 +144,7 @@ export const Icon = {
138
144
  Mushroom,
139
145
  NailPolish,
140
146
  Order,
147
+ Paths,
141
148
  People,
142
149
  Percentage,
143
150
  Pin,
@@ -146,6 +153,7 @@ export const Icon = {
146
153
  PriceList,
147
154
  PriceTag,
148
155
  Product,
156
+ ProductShortcut,
149
157
  PipelineDashed,
150
158
  RestrictedCatalogue,
151
159
  Renew,
package/src/iconography/paths.tsx ADDED
@@ -0,0 +1,33 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type PathsProps = SVGProps<SVGSVGElement>;
4
+ type PathsRef = SVGSVGElement;
5
+
6
+ export const Paths = forwardRef<PathsRef, PathsProps>((delegated, ref) => {
7
+ return (
8
+ <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
9
+ <path
10
+ d="M12.742 13.88a7.265 7.265 0 00-7.266-7.265V5.36a.313.313 0 00-.507-.245L1.305 8.018a.313.313 0 00.005.495l3.665 2.768a.313.313 0 00.501-.25V9.924a3.778 3.778 0 013.779 3.779v5.856c0 .173.14.313.312.313h2.945a.23.23 0 00.23-.23v-5.76z"
11
+ fill="#fff"
12
+ />
13
+ <path
14
+ fillRule="evenodd"
15
+ clipRule="evenodd"
16
+ d="M5.789 5.36a.626.626 0 00-1.014-.49L1.111 7.773a.626.626 0 00.01.99l3.665 2.768a.626.626 0 001.003-.5v-.78a3.466 3.466 0 013.153 3.45v5.857c0 .345.28.625.625.625h2.945c.3 0 .542-.242.542-.542v-5.76A7.578 7.578 0 005.79 6.308V5.36zm-4.29 2.903L5.163 5.36v1.568h.313a6.952 6.952 0 016.953 6.952v5.678H9.567v-5.856a4.091 4.091 0 00-4.09-4.091h-.314v1.42L1.5 8.264z"
17
+ fill="#528693"
18
+ />
19
+ <path
20
+ d="M9.259 10.963a7.265 7.265 0 017.265-7.265V2.443c0-.262.302-.408.507-.245L20.695 5.1a.313.313 0 01-.005.495l-3.665 2.768a.313.313 0 01-.501-.25V7.006a3.778 3.778 0 00-3.779 3.778v8.668c0 .173-.14.313-.312.313H9.537a.279.279 0 01-.278-.279v-8.523z"
21
+ fill="#BFF6F8"
22
+ />
23
+ <path
24
+ fillRule="evenodd"
25
+ clipRule="evenodd"
26
+ d="M16.211 2.443a.626.626 0 011.014-.49l3.665 2.903a.625.625 0 01-.012.99l-3.664 2.768a.626.626 0 01-1.003-.5v-.781a3.466 3.466 0 00-3.153 3.452v8.668c0 .345-.28.625-.625.625H9.537a.591.591 0 01-.591-.591v-8.524a7.578 7.578 0 017.265-7.571v-.949zm4.29 2.903l-3.664-2.903v1.568h-.313a6.952 6.952 0 00-6.953 6.952v8.49h2.862v-8.668a4.091 4.091 0 014.09-4.091h.314v1.42L20.5 5.347z"
27
+ fill="#528693"
28
+ />
29
+ </svg>
30
+ );
31
+ });
32
+
33
+ Paths.displayName = 'PathsIcon';
package/src/iconography/product-shortcut.tsx ADDED
@@ -0,0 +1,60 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type ProductShortcutProps = SVGProps<SVGSVGElement>;
4
+
5
+ type ProductShortcutRef = SVGSVGElement;
6
+
7
+ export const ProductShortcut = forwardRef<ProductShortcutRef, ProductShortcutProps>((delegated, ref) => {
8
+ return (
9
+ <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
10
+ <path
11
+ d="M8.362 6.062c0 1.691-1.266 3.062-2.827 3.062-1.56 0-2.826-1.37-2.826-3.062C2.709 4.371 3.974 3 5.535 3c1.561 0 2.827 1.371 2.827 3.062z"
12
+ fill="#BFF6F8"
13
+ />
14
+ <path
15
+ fillRule="evenodd"
16
+ clipRule="evenodd"
17
+ d="M8.962 6.062c0 1.977-1.49 3.662-3.427 3.662S2.11 8.04 2.11 6.062c0-1.976 1.49-3.662 3.426-3.662 1.937 0 3.427 1.686 3.427 3.662zM5.535 9.124c1.561 0 2.827-1.37 2.827-3.062C8.362 4.371 7.096 3 5.535 3 3.975 3 2.71 4.371 2.71 6.062c0 1.691 1.265 3.062 2.826 3.062z"
18
+ fill="#528693"
19
+ />
20
+ <path
21
+ d="M17.595 11.762c0 4.163-3.163 7.538-7.066 7.538s-7.067-3.375-7.067-7.538c0-4.162 3.164-7.537 7.067-7.537s7.066 3.375 7.066 7.537z"
22
+ fill="#BFF6F8"
23
+ />
24
+ <path
25
+ fillRule="evenodd"
26
+ clipRule="evenodd"
27
+ d="M18.195 11.762c0 4.458-3.396 8.138-7.666 8.138-4.27 0-7.667-3.68-7.667-8.137 0-4.458 3.397-8.138 7.667-8.138s7.666 3.68 7.666 8.137zM10.53 19.3c3.903 0 7.066-3.375 7.066-7.538 0-4.162-3.163-7.537-7.066-7.537S3.462 7.6 3.462 11.762c0 4.163 3.164 7.538 7.067 7.538z"
28
+ fill="#528693"
29
+ />
30
+ <path
31
+ d="M19.291 8.04c0 1.692-1.265 3.063-2.826 3.063-1.561 0-2.827-1.371-2.827-3.062 0-1.691 1.266-3.062 2.827-3.062 1.56 0 2.826 1.37 2.826 3.062z"
32
+ fill="#BFF6F8"
33
+ />
34
+ <path
35
+ fillRule="evenodd"
36
+ clipRule="evenodd"
37
+ d="M19.891 8.04c0 1.977-1.49 3.663-3.426 3.663-1.937 0-3.427-1.686-3.427-3.662 0-1.977 1.49-3.662 3.427-3.662 1.936 0 3.426 1.685 3.426 3.662zm-3.426 3.063c1.56 0 2.826-1.371 2.826-3.062 0-1.691-1.265-3.062-2.826-3.062-1.561 0-2.827 1.37-2.827 3.062 0 1.69 1.266 3.062 2.827 3.062zM10.28 11.896l-.007.013a2.64 2.64 0 00-.113.35c-.065.26-.132.66-.132 1.2a.3.3 0 11-.6 0c0-.591.074-1.04.15-1.345a3.24 3.24 0 01.158-.472l.004-.009.001-.003h.001s0-.002.266.13l-.266-.132a.3.3 0 01.537.268zM7.557 14.675a.3.3 0 01.22.362c-.073.3-.2.535-.38.694a.807.807 0 01-.624.205c-.415-.042-.765-.385-.87-.803a.3.3 0 01.583-.146c.052.21.221.339.348.352A.208.208 0 007 15.28c.062-.054.14-.167.194-.387a.3.3 0 01.363-.22z"
38
+ fill="#528693"
39
+ />
40
+ <path
41
+ fillRule="evenodd"
42
+ clipRule="evenodd"
43
+ d="M7.495 14.666a.3.3 0 00-.3.3c0 .36.114.655.307.873.19.214.441.335.689.382.246.046.504.022.724-.072.219-.094.424-.273.492-.545a.3.3 0 00-.582-.145c-.01.041-.048.096-.147.139a.666.666 0 01-.376.033.619.619 0 01-.352-.19c-.086-.098-.155-.247-.155-.475a.3.3 0 00-.3-.3z"
44
+ fill="#528693"
45
+ />
46
+ <path
47
+ d="M20.378 1.185a.558.558 0 01.616.614l-.51 6.188c-.046.544-.717.835-1.083.468l-.67-.67-.669-.668L6.708 18.472s-2.013 1.701-3.251 1.33c-1.215-.363-1.778-1.33-1.681-2.72.072-1.04 1.442-2.824 1.442-2.824l.562 1.285L15.2 4.255l-.805-.805-.651-.651c-.366-.366-.078-1.036.466-1.083l6.168-.531z"
48
+ fill="#FFDE99"
49
+ />
50
+ <path
51
+ fillRule="evenodd"
52
+ clipRule="evenodd"
53
+ d="M3.78 15.543L15.2 4.255l-1.456-1.456c-.366-.366-.078-1.036.466-1.083l6.168-.531a.558.558 0 01.616.614l-.51 6.188c-.046.544-.717.835-1.083.468l-1.339-1.338L6.708 18.472s-2.013 1.701-3.251 1.33c-1.215-.363-1.778-1.33-1.681-2.72.046-.667.627-1.64 1.037-2.253.229-.341.405-.57.405-.57l.562 1.284zm-.562-1.284l-.476-.366-.002.002-.004.005-.013.017a7.77 7.77 0 00-.21.29c-.136.191-.317.458-.501.76a8.725 8.725 0 00-.53.993c-.148.337-.28.718-.305 1.081-.054.781.073 1.503.435 2.098.367.604.942 1.02 1.673 1.239.467.14.956.072 1.372-.052a5.677 5.677 0 001.189-.53 9.483 9.483 0 001.22-.842l.02-.017.006-.005.002-.001v-.001l-.386-.458.387.458.02-.016L18.061 7.966l.914.914c.392.391.928.405 1.325.233.396-.171.737-.557.78-1.077l.511-6.188a1.157 1.157 0 00-1.265-1.26l-6.168.53a1.293 1.293 0 00-1.074.782c-.171.397-.157.932.234 1.323l1.03 1.03-10.37 10.25-.619-1.415-.618.805.476.365z"
54
+ fill="#528693"
55
+ />
56
+ </svg>
57
+ );
58
+ });
59
+
60
+ ProductShortcut.displayName = 'ProductShortcutIcon';
package/src/input-with-label/input-with-label.css CHANGED
@@ -18,7 +18,11 @@
18
18
  }
19
19
 
20
20
  &.c-input-with-label--error {
21
- @apply text-error;
21
+ @apply text-pink-700-200;
22
+ }
23
+
24
+ &.c-input-with-label--warning {
25
+ @apply text-orange-200-700;
22
26
  }
23
27
 
24
28
  &-error {
package/src/input-with-label/input-with-label.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ComponentPropsWithoutRef, ComponentPropsWithRef, forwardRef, ReactNode } from 'react';
2
2
  import { cva, cx, VariantProps } from 'class-variance-authority';
3
3
 
4
- import { Triangle } from '../iconography/triangle';
4
+ import { Icon } from '../iconography';
5
5
  import { Input } from '../input';
6
6
  import { Label } from '../label';
7
7
  import { Tooltip } from '../tooltip';
@@ -15,6 +15,7 @@ const inputWithLabelStyles = cva(['c-input-with-label'], {
15
15
  },
16
16
  status: {
17
17
  error: 'c-input-with-label--error',
18
+ warning: 'c-input-with-label--warning',
18
19
  },
19
20
  },
20
21
  defaultVariants: {},
@@ -23,16 +24,20 @@ const inputWithLabelStyles = cva(['c-input-with-label'], {
23
24
  type InputWithLabelStylesProps = VariantProps<typeof inputWithLabelStyles>;
24
25
 
25
26
  export type InputWithLabelProps = InputWithLabelStylesProps & {
26
- label: string;
27
+ label?: string;
27
28
  append?: ReactNode;
29
+ /**
30
+ * @deprecated Use statusMessage instead
31
+ */
28
32
  errorMessage?: string;
33
+ statusMessage?: string;
29
34
  labelProps?: ComponentPropsWithoutRef<'label'>;
30
35
  } & ComponentPropsWithRef<'input'>;
31
36
 
32
37
  export type InputWithLabelRef = HTMLInputElement;
33
38
 
34
39
  export const InputWithLabel = forwardRef<InputWithLabelRef, InputWithLabelProps>(
35
- ({ className, label, append, errorMessage, status, variant, id, labelProps, ...delegated }, ref) => {
40
+ ({ className, label, append, errorMessage, status, statusMessage, variant, id, labelProps, ...delegated }, ref) => {
36
41
  const { className: labelClassName, ...labelPropsRest } = labelProps ?? {};
37
42
 
38
43
  return (
@@ -45,10 +50,10 @@ export const InputWithLabel = forwardRef<InputWithLabelRef, InputWithLabelProps>
45
50
  {label}
46
51
  <span className="c-input-with-label-input-wrap">
47
52
  <Input className={cx('c-input-with-label-input', className)} ref={ref} id={id} {...delegated} />
48
- {!!errorMessage ? (
49
- <Tooltip content={errorMessage}>
50
- <div data-testid="input-with-label-error-message" className="c-input-with-label-append">
51
- <Triangle />
53
+ {!!(errorMessage ?? statusMessage) ? (
54
+ <Tooltip content={errorMessage ?? statusMessage} variant={status}>
55
+ <div data-testid="input-with-label-status-message" className="c-input-with-label-append">
56
+ {status === 'error' ? <Icon.Error width={20} height={20} /> : <Icon.Warning width={20} height={20} />}
52
57
  </div>
53
58
  </Tooltip>
54
59
  ) : (
package/src/tooltip/tooltip.css CHANGED
@@ -1,7 +1,35 @@
1
1
  .c-tooltip-content {
2
- @apply z-[100] select-none rounded-md bg-white px-4 py-2 text-xs font-medium italic leading-none text-gray-500-400 shadow-tooltip transition;
2
+ @apply z-[100] select-none rounded-md px-4 py-2 text-xs font-medium italic leading-none shadow-tooltip transition;
3
3
  }
4
4
 
5
- .c-tooltip-arrow {
6
- @apply fill-white;
5
+ .c-tooltip-success {
6
+ @apply border border-solid border-cyan-300-600 bg-cyan-100-800 text-green-600-300;
7
+
8
+ .c-tooltip-arrow {
9
+ @apply fill-cyan-100-800;
10
+ }
11
+ }
12
+
13
+ .c-tooltip-error {
14
+ @apply border border-solid border-pink-200-700 bg-pink-100-800 text-pink-700-200;
15
+
16
+ .c-tooltip-arrow {
17
+ @apply fill-pink-100-800;
18
+ }
19
+ }
20
+
21
+ .c-tooltip-warning {
22
+ @apply border border-solid border-orange-200-700 bg-orange-100-800 text-green-600-300;
23
+
24
+ .c-tooltip-arrow {
25
+ @apply fill-orange-100-800;
26
+ }
27
+ }
28
+
29
+ .c-tooltip-info {
30
+ @apply border border-solid border-purple-200-700 bg-white text-green-600-300;
31
+
32
+ .c-tooltip-arrow {
33
+ @apply fill-white;
34
+ }
7
35
  }
package/src/tooltip/tooltip.tsx CHANGED
@@ -1,15 +1,36 @@
1
1
  import type { ReactNode } from 'react';
2
+ import { cva, VariantProps } from 'class-variance-authority';
2
3
  import * as RadixTooltip from '@radix-ui/react-tooltip';
3
4
 
4
- type TooltipProps = Partial<Pick<RadixTooltip.TooltipContentProps, 'side'>> & {
5
- children: ReactNode;
6
- content: ReactNode;
7
- delayDuration?: number;
8
- align?: 'start' | 'center' | 'end';
9
- defaultOpen?: boolean;
10
- };
5
+ type TooltipStylesProps = VariantProps<typeof tooltipStyles>;
6
+ const tooltipStyles = cva(
7
+ 'c-tooltip-content data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade',
8
+ {
9
+ variants: {
10
+ variant: {
11
+ info: 'c-tooltip-info',
12
+ warning: 'c-tooltip-warning',
13
+ error: 'c-tooltip-error',
14
+ success: 'c-tooltip-success',
15
+ },
16
+ },
17
+ defaultVariants: {
18
+ variant: 'info',
19
+ },
20
+ },
21
+ );
22
+
23
+ type TooltipProps = TooltipStylesProps &
24
+ Partial<Pick<RadixTooltip.TooltipContentProps, 'side'>> & {
25
+ children: ReactNode;
26
+ content: ReactNode;
27
+ delayDuration?: number;
28
+ align?: 'start' | 'center' | 'end';
29
+ defaultOpen?: boolean;
30
+ };
11
31
 
12
32
  export function Tooltip({
33
+ variant,
13
34
  children,
14
35
  content,
15
36
  side = 'top',
@@ -22,12 +43,7 @@ export function Tooltip({
22
43
  <RadixTooltip.Root defaultOpen={defaultOpen}>
23
44
  <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
24
45
  <RadixTooltip.Portal>
25
- <RadixTooltip.Content
26
- align={align}
27
- className="c-tooltip-content data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade"
28
- sideOffset={5}
29
- side={side}
30
- >
46
+ <RadixTooltip.Content align={align} sideOffset={5} side={side} className={tooltipStyles({ variant })}>
31
47
  <RadixTooltip.Arrow className="c-tooltip-arrow" />
32
48
  {content}
33
49
  </RadixTooltip.Content>
package/src/iconography/triangle.tsx DELETED
@@ -1,27 +0,0 @@
1
- import type React from 'react';
2
- import { forwardRef, SVGProps } from 'react';
3
-
4
- type TriangleProps = SVGProps<SVGSVGElement> & {
5
- width?: number;
6
- height?: number;
7
- };
8
-
9
- type TriangleRef = SVGSVGElement;
10
-
11
- export const Triangle = forwardRef<TriangleRef, TriangleProps>((delegated, ref) => {
12
- const { width = 20, height = 20, ...rest } = delegated;
13
-
14
- return (
15
- <svg
16
- viewBox="0 0 17 15"
17
- width={width}
18
- height={height}
19
- ref={ref}
20
- fill="none"
21
- xmlns="http://www.w3.org/2000/svg"
22
- {...rest}
23
- >
24
- <path d="M15.463 1.2L8.5 12.685 1.537 1.2h13.925zM1.353.896s0 0 0 0h0z" stroke="currentColor" strokeWidth={2.4} />
25
- </svg>
26
- );
27
- });