@crystallize/design-system 1.16.5 → 1.17.0

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 (23) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/index.css +72 -42
  3. package/dist/index.d.ts +16 -2
  4. package/dist/index.js +1676 -1363
  5. package/dist/index.mjs +1553 -1241
  6. package/package.json +1 -1
  7. package/src/iconography/check.tsx +22 -0
  8. package/src/iconography/clock.tsx +38 -0
  9. package/src/iconography/download.tsx +33 -0
  10. package/src/iconography/drag-handle.tsx +20 -0
  11. package/src/iconography/error-white.tsx +14 -0
  12. package/src/iconography/error.tsx +13 -28
  13. package/src/iconography/index.ts +14 -0
  14. package/src/iconography/lifebouy.tsx +58 -0
  15. package/src/iconography/wand.tsx +45 -0
  16. package/src/iconography/warning.tsx +1 -9
  17. package/src/index.ts +1 -0
  18. package/src/input-with-label/input-with-label.tsx +4 -3
  19. package/src/stack-icon/index.ts +1 -0
  20. package/src/stack-icon/stack-icon.stories.tsx +24 -0
  21. package/src/stack-icon/stack-icon.tsx +23 -0
  22. package/src/tooltip/tooltip.css +1 -1
  23. package/src/tooltip/tooltip.tsx +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crystallize/design-system",
3
- "version": "1.16.5",
3
+ "version": "1.17.0",
4
4
  "types": "./dist/index.d.ts",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
package/src/iconography/check.tsx ADDED
@@ -0,0 +1,22 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type CheckProps = SVGProps<SVGSVGElement>;
4
+ type CheckRef = SVGSVGElement;
5
+
6
+ export const Check = forwardRef<CheckRef, CheckProps>((delegated, ref) => {
7
+ return (
8
+ <svg ref={ref} width="9" height="9" viewBox="0 0 9 9" fill="none" {...delegated}>
9
+ <path
10
+ d="M1.12 5.51a.559.559 0 01.832-.101l2.201 1.953-.427.624a.326.326 0 01-.486.06L1.21 6.245a.559.559 0 01-.09-.734z"
11
+ fill="#528693"
12
+ />
13
+ <path
14
+ d="M7.883 1.087c.043.03.053.09.023.132L3.669 7.132l-.154-.105L7.754 1.11a.093.093 0 01.129-.023z"
15
+ fill="#C4C4C4"
16
+ stroke="#528693"
17
+ />
18
+ </svg>
19
+ );
20
+ });
21
+
22
+ Check.displayName = 'CheckIcon';
package/src/iconography/clock.tsx ADDED
@@ -0,0 +1,38 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type ClockProps = SVGProps<SVGSVGElement>;
4
+
5
+ type ClockRef = SVGSVGElement;
6
+
7
+ export const Clock = forwardRef<ClockRef, ClockProps>((delegated, ref) => {
8
+ return (
9
+ <svg ref={ref} width="34" height="34" viewBox="0 0 34 34" fill="none" {...delegated}>
10
+ <path
11
+ d="M27.1672 14.3782a10.4298 10.4298 0 0 0-6.5199-7.5964A10.753 10.753 0 0 0 9.3006 9.4745a11.0723 11.0723 0 0 0-2.6168 10.1483 10.3947 10.3947 0 0 0 3.6423 5.9131 10.3941 10.3941 0 0 0 6.5529 2.3 10.6706 10.6706 0 0 0 7.7624-3.3204 11.024 11.024 0 0 0 2.5258-10.1373Zm-3.3314 9.3236a9.4471 9.4471 0 0 1-6.8608 2.9247 9.0968 9.0968 0 0 1-2.8916-.4618 9.5526 9.5526 0 0 1-6.1461-6.8608 9.6173 9.6173 0 0 1 2.1549-9.0157 9.5057 9.5057 0 0 1 6.8718-2.9137 9.1582 9.1582 0 0 1 2.8916.4728 9.475 9.475 0 0 1 6.1461 6.8458 9.5724 9.5724 0 0 1-2.1659 9.0087Z"
12
+ fill="#528693"
13
+ />
14
+ <path
15
+ d="M18.6682 2.3389a13.9219 13.9219 0 0 0-1.8991-.121 13.7 13.7 0 0 0-4.0901.6158A14.6931 14.6931 0 0 0 2.4618 17.4348c.4838 7.2786 5.3435 13.2048 12.743 14.2163.6587.0883 1.3225.133 1.9871.1339a13.215 13.215 0 0 0 4.0681-.6157 15.1484 15.1484 0 0 0 10.2691-14.5131A14.6527 14.6527 0 0 0 18.6682 2.3389Zm8.1032 24.0237a13.5041 13.5041 0 0 1-9.8184 4.233 13.18 13.18 0 0 1-4.3869-.7477 13.3995 13.3995 0 0 1-8.396-9.6314A13.5489 13.5489 0 0 1 7.1685 7.6384a13.4416 13.4416 0 0 1 9.8184-4.233 13.1827 13.1827 0 0 1 4.3869.7476 13.4214 13.4214 0 0 1 8.4211 9.6405 13.58 13.58 0 0 1-3.0236 12.5691Z"
16
+ fill="#528693"
17
+ />
18
+ <path
19
+ d="M29.795 13.7935a13.4203 13.4203 0 0 0-8.4221-9.6425 13.1825 13.1825 0 0 0-4.3869-.7476 13.4417 13.4417 0 0 0-9.8184 4.235A13.5483 13.5483 0 0 0 4.169 20.2165a13.3995 13.3995 0 0 0 8.3961 9.6315 13.1829 13.1829 0 0 0 4.3869.7476 13.5026 13.5026 0 0 0 9.8184-4.233 13.5794 13.5794 0 0 0 3.0246-12.5691Zm-5.1566 10.722a10.6692 10.6692 0 0 1-7.7623 3.3204 10.3949 10.3949 0 0 1-10.1952-8.2131A11.0727 11.0727 0 0 1 9.3006 9.4745a10.7529 10.7529 0 0 1 11.3467-2.6937 10.4292 10.4292 0 0 1 6.5199 7.5964 11.0245 11.0245 0 0 1-2.5288 10.1383Z"
20
+ fill="#BFF6F8"
21
+ />
22
+ <path
23
+ d="M23.8358 23.7018a9.4471 9.4471 0 0 1-6.8608 2.9247 9.0968 9.0968 0 0 1-2.8916-.4618 9.5523 9.5523 0 0 1-6.1461-6.8608 9.6174 9.6174 0 0 1 2.155-9.0157 9.5035 9.5035 0 0 1 6.8717-2.9137 9.1593 9.1593 0 0 1 2.8917.4728 9.4746 9.4746 0 0 1 6.1461 6.8458 9.5731 9.5731 0 0 1-2.166 9.0087Z"
24
+ fill="#fff"
25
+ />
26
+ <path
27
+ d="m17.6467 17.8276.114-3.7832c.024-.7716-1.1755-.7716-1.1995 0l-.1139 3.7832c-.023.7717 1.1764.7717 1.1994 0Z"
28
+ fill="#528693"
29
+ />
30
+ <path
31
+ d="m16.6232 18.2514 3.9911 4.1521c.5358.5577 1.3834-.2919.8476-.8486l-3.9901-4.1511c-.5358-.5577-1.3834.2909-.8486.8476Z"
32
+ fill="#528693"
33
+ />
34
+ </svg>
35
+ );
36
+ });
37
+
38
+ Clock.displayName = 'ClockIcon';
package/src/iconography/download.tsx ADDED
@@ -0,0 +1,33 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type DownloadProps = SVGProps<SVGSVGElement>;
4
+
5
+ type DownloadRef = SVGSVGElement;
6
+
7
+ export const Download = forwardRef<DownloadRef, DownloadProps>((delegated, ref) => {
8
+ return (
9
+ <svg ref={ref} width="23" height="30" viewBox="0 0 23 30" fill="none" {...delegated}>
10
+ <path d="M21.6035 29.4999H.4998V1.2426H14.061l7.5425 7.808v20.4493Z" fill="#BFF6F8" />
11
+ <path
12
+ d="M21.7676 8.5015 17.1724 3.744 14.79 1.2627c-.0127-.0133-.0305-.0185-.0442-.0305l-.1208-.1251a1.2016 1.2016 0 0 0-.8594-.3643H1.1953C.5361.7428 0 1.2788 0 1.938v26.8667C0 29.4639.5361 30 1.1953 30h19.7129c.6592 0 1.1953-.5361 1.1953-1.1953V9.3317a1.1871 1.1871 0 0 0-.3359-.8302Zm-1.3379.0795h-5.8526V2.4963l1.7762 1.8387 4.0764 4.246ZM20.9082 29H1.1953A.1956.1956 0 0 1 1 28.8047V1.938c0-.108.088-.1952.1953-.1952H13.579c0 .0029-.0018.0053-.0018.0082v7.1256c0 .3887.3154.7046.7041.7046h6.8223v19.2235a.1956.1956 0 0 1-.1953.1953Z"
13
+ fill="#528693"
14
+ />
15
+ <g style={{ transform: 'translate(50%, 50%) rotate(180deg) translate(-50%, -50%)' }}>
16
+ <path
17
+ d="M13.2559 21.3896H8.8462c-.1511 0-.2738-.1081-.2738-.2416l-.0004-5.5894c0-.1335-.1226-.2416-.2738-.2416H6.3916c-.2276 0-.3558-.2307-.2168-.3894l4.7774-5.4443c.1101-.1258.326-.1247.4349.002l4.674 5.4443c.1367.1592.0079.3874-.2185.3874h-2.0397c-.1511 0-.2741.1081-.2741.2416l.0009 5.5894c.0003.1335-.1223.2416-.2738.2416Z"
18
+ fill="#fff"
19
+ />
20
+ <path
21
+ d="M13.0102 22.138H8.9881c-.4116 0-.7467-.3349-.7467-.7473L8.24 15.856H6.748a.7413.7413 0 0 1-.6702-.4177.741.741 0 0 1 .079-.7862l4.3584-5.6329c.286-.3703.9022-.3686 1.1859.0054l4.2638 5.6335a.7405.7405 0 0 1 .073.7834.7422.7422 0 0 1-.6689.4146h-1.6132l.0012 5.5347c0 .4122-.3351.7472-.7467.7472Zm-3.7756-.9944h3.5291l-.0012-5.5353c0-.4117.335-.7469.7467-.7469h1.3631l-3.7684-4.9783-3.8522 4.9783h1.2362c.4116 0 .7455.3351.7455.7469l.0012 5.5353Z"
22
+ fill="#528693"
23
+ />
24
+ </g>
25
+ <path
26
+ d="M15.5869 24.7998H6.5156c-.719 0-1.3017-.5827-1.3017-1.3017v-2.1516a.1487.1487 0 0 1 .1486-.1487h1.2027a.1485.1485 0 0 1 .1487.1487v1.7948c0 .0875.071.1585.1587.1585h8.3576a.1585.1585 0 0 0 .1585-.1585v-1.7948a.1487.1487 0 0 1 .1487-.1487H16.74a.1485.1485 0 0 1 .1487.1487v2.1516c.0001.719-.5828 1.3017-1.3018 1.3017Z"
27
+ fill="#528693"
28
+ />
29
+ </svg>
30
+ );
31
+ });
32
+
33
+ Download.displayName = 'DownloadIcon';
package/src/iconography/drag-handle.tsx ADDED
@@ -0,0 +1,20 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type DragHandleProps = SVGProps<SVGSVGElement>;
4
+
5
+ type DragHandleRef = SVGSVGElement;
6
+
7
+ export const DragHandle = forwardRef<DragHandleRef, DragHandleProps>((delegated, ref) => {
8
+ return (
9
+ <svg ref={ref} width="11" height="18" viewBox="0 0 11 18" fill="none" {...delegated}>
10
+ <circle cx="2" cy="2" r="2" fill="#7E8592" />
11
+ <circle cx="2" cy="9" r="2" fill="#7E8592" />
12
+ <circle cx="2" cy="16" r="2" fill="#7E8592" />
13
+ <circle cx="9" cy="2" r="2" fill="#7E8592" />
14
+ <circle cx="9" cy="9" r="2" fill="#7E8592" />
15
+ <circle cx="9" cy="16" r="2" fill="#7E8592" />
16
+ </svg>
17
+ );
18
+ });
19
+
20
+ DragHandle.displayName = 'DragHandleIcon';
package/src/iconography/error-white.tsx ADDED
@@ -0,0 +1,14 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type ErrorWhiteProps = SVGProps<SVGSVGElement>;
4
+ type ErrorWhiteRef = SVGSVGElement;
5
+
6
+ export const ErrorWhite = forwardRef<ErrorWhiteRef, ErrorWhiteProps>((delegated, ref) => {
7
+ return (
8
+ <svg ref={ref} width="17" height="15" viewBox="0 0 17 15" fill="none" color="#fff" {...delegated}>
9
+ <path d="M15.463 1.2L8.5 12.685 1.537 1.2h13.925zM1.353.896s0 0 0 0h0z" stroke="currentColor" strokeWidth={2.4} />
10
+ </svg>
11
+ );
12
+ });
13
+
14
+ ErrorWhite.displayName = 'ErrorWhiteIcon';
package/src/iconography/error.tsx CHANGED
@@ -5,34 +5,19 @@ type ErrorRef = SVGSVGElement;
5
5
 
6
6
  export const Error = forwardRef<ErrorRef, ErrorProps>((delegated, ref) => {
7
7
  return (
8
- <svg
9
- ref={ref}
10
- xmlns="http://www.w3.org/2000/svg"
11
- width="22"
12
- height="22"
13
- fill="none"
14
- viewBox="0 0 22 22"
15
- {...delegated}
16
- >
17
- <g clipPath="url(#clip0_1679_677)">
18
- <path
19
- fillRule="evenodd"
20
- clipRule="evenodd"
21
- d="M9.63864 18.2702C10.2437 19.3181 11.7562 19.3181 12.3613 18.2702L19.8485 5.3019C20.4536 4.25396 19.6973 2.94403 18.4872 2.94403L3.51271 2.94403C2.30265 2.94403 1.54636 4.25396 2.15139 5.3019L9.63864 18.2702ZM10.4355 12.9854C10.6864 13.4199 11.3135 13.4199 11.5643 12.9854L14.6686 7.60866C14.9195 7.17417 14.6059 6.63107 14.1042 6.63107L7.89566 6.63107C7.39396 6.63107 7.08039 7.17417 7.33124 7.60866L10.4355 12.9854Z"
22
- fill="#EB1782"
23
- />
24
- <path
25
- fillRule="evenodd"
26
- clipRule="evenodd"
27
- d="M10.1583 17.9702C10.5323 18.6181 11.4676 18.6181 11.8417 17.9702L19.3289 5.0019C19.703 4.35396 19.2354 3.54403 18.4872 3.54403L3.51271 3.54403C2.76453 3.54403 2.29692 4.35396 2.67101 5.0019L10.1583 17.9702ZM12.084 13.2854C11.6022 14.1199 10.3977 14.1199 9.9159 13.2854L6.81163 7.90866C6.32984 7.07417 6.93207 6.03107 7.89566 6.03107L14.1042 6.03107C15.0678 6.03107 15.67 7.07418 15.1882 7.90866L12.084 13.2854ZM12.3613 18.2702C11.7562 19.3181 10.2437 19.3181 9.63864 18.2702L2.15139 5.3019C1.54636 4.25396 2.30265 2.94403 3.51271 2.94403L18.4872 2.94403C19.6973 2.94403 20.4536 4.25396 19.8485 5.3019L12.3613 18.2702ZM11.5643 12.9854C11.3135 13.4199 10.6864 13.4199 10.4355 12.9854L7.33124 7.60866C7.08039 7.17417 7.39396 6.63107 7.89566 6.63107L14.1042 6.63107C14.6059 6.63107 14.9195 7.17417 14.6686 7.60866L11.5643 12.9854Z"
28
- fill="#528693"
29
- />
30
- </g>
31
- <defs>
32
- <clipPath id="clip0_1679_677">
33
- <rect width="22" height="22" fill="white" />
34
- </clipPath>
35
- </defs>
8
+ <svg ref={ref} width="22" height="22" fill="none" viewBox="0 0 22 22" {...delegated}>
9
+ <path
10
+ fillRule="evenodd"
11
+ clipRule="evenodd"
12
+ d="M9.63864 18.2702C10.2437 19.3181 11.7562 19.3181 12.3613 18.2702L19.8485 5.3019C20.4536 4.25396 19.6973 2.94403 18.4872 2.94403L3.51271 2.94403C2.30265 2.94403 1.54636 4.25396 2.15139 5.3019L9.63864 18.2702ZM10.4355 12.9854C10.6864 13.4199 11.3135 13.4199 11.5643 12.9854L14.6686 7.60866C14.9195 7.17417 14.6059 6.63107 14.1042 6.63107L7.89566 6.63107C7.39396 6.63107 7.08039 7.17417 7.33124 7.60866L10.4355 12.9854Z"
13
+ fill="#EB1782"
14
+ />
15
+ <path
16
+ fillRule="evenodd"
17
+ clipRule="evenodd"
18
+ d="M10.1583 17.9702C10.5323 18.6181 11.4676 18.6181 11.8417 17.9702L19.3289 5.0019C19.703 4.35396 19.2354 3.54403 18.4872 3.54403L3.51271 3.54403C2.76453 3.54403 2.29692 4.35396 2.67101 5.0019L10.1583 17.9702ZM12.084 13.2854C11.6022 14.1199 10.3977 14.1199 9.9159 13.2854L6.81163 7.90866C6.32984 7.07417 6.93207 6.03107 7.89566 6.03107L14.1042 6.03107C15.0678 6.03107 15.67 7.07418 15.1882 7.90866L12.084 13.2854ZM12.3613 18.2702C11.7562 19.3181 10.2437 19.3181 9.63864 18.2702L2.15139 5.3019C1.54636 4.25396 2.30265 2.94403 3.51271 2.94403L18.4872 2.94403C19.6973 2.94403 20.4536 4.25396 19.8485 5.3019L12.3613 18.2702ZM11.5643 12.9854C11.3135 13.4199 10.6864 13.4199 10.4355 12.9854L7.33124 7.60866C7.08039 7.17417 7.39396 6.63107 7.89566 6.63107L14.1042 6.63107C14.6059 6.63107 14.9195 7.17417 14.6686 7.60866L11.5643 12.9854Z"
19
+ fill="#528693"
20
+ />
36
21
  </svg>
37
22
  );
38
23
  });
package/src/iconography/index.ts CHANGED
@@ -8,9 +8,11 @@ import { Bin } from './bin';
8
8
  import { Cancel } from './cancel';
9
9
  import { Caret } from './caret';
10
10
  import { Catalogue } from './catalogue';
11
+ import { Check } from './check';
11
12
  import { CheckWithCircle } from './check-with-circle';
12
13
  import { Choice } from './choice';
13
14
  import { Chunk } from './chunk';
15
+ import { Clock } from './clock';
14
16
  import { Cloud } from './cloud';
15
17
  import { CloudWithKeyHole } from './cloud-with-key-hole';
16
18
  import { Copy } from './copy';
@@ -20,8 +22,11 @@ import { Customers } from './customers';
20
22
  import { Dashboard } from './dashboard';
21
23
  import { Date } from './date';
22
24
  import { Document } from './document';
25
+ import { Download } from './download';
26
+ import { DragHandle } from './drag-handle';
23
27
  import { Edit } from './edit';
24
28
  import { Error } from './error';
29
+ import { ErrorWhite } from './error-white';
25
30
  import { FileUpload } from './file-upload';
26
31
  import { FixedPropertyTable } from './fixed-property-table';
27
32
  import { Folder } from './folder';
@@ -37,6 +42,7 @@ import { Image } from './image';
37
42
  import { Info } from './info';
38
43
  import { Key } from './key';
39
44
  import { Language } from './language';
45
+ import { Lifebouy } from './lifebouy';
40
46
  import { Location } from './location';
41
47
  import { LockClosed } from './lock-closed';
42
48
  import { Magnifier } from './magnifier';
@@ -81,6 +87,7 @@ import { UsageMeter } from './usage-meter';
81
87
  import { UserCard } from './user-card';
82
88
  import { Users } from './users';
83
89
  import { Video } from './video';
90
+ import { Wand } from './wand';
84
91
  import { Warning } from './warning';
85
92
 
86
93
  export const Icon = {
@@ -91,14 +98,18 @@ export const Icon = {
91
98
  Bell,
92
99
  Caret,
93
100
  Catalogue,
101
+ Check,
94
102
  CheckWithCircle,
95
103
  Cloud,
104
+ Clock,
96
105
  CloudWithKeyHole,
97
106
  Copy,
98
107
  CopyWithCloud,
99
108
  Customers,
100
109
  Dashboard,
101
110
  Document,
111
+ Download,
112
+ DragHandle,
102
113
  Edit,
103
114
  Folder,
104
115
  Frontends,
@@ -111,6 +122,7 @@ export const Icon = {
111
122
  Info,
112
123
  Key,
113
124
  Language,
125
+ Lifebouy,
114
126
  LockClosed,
115
127
  Multilingual,
116
128
  Magnifier,
@@ -160,6 +172,7 @@ export const Icon = {
160
172
  Atom,
161
173
  Cancel,
162
174
  Error,
175
+ ErrorWhite,
163
176
  Particle,
164
177
  Crystal,
165
178
  Choice,
@@ -176,5 +189,6 @@ export const Icon = {
176
189
  Usage,
177
190
  UserCard,
178
191
  Users,
192
+ Wand,
179
193
  Warning,
180
194
  };
package/src/iconography/lifebouy.tsx ADDED
@@ -0,0 +1,58 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type LifebouyProps = SVGProps<SVGSVGElement>;
4
+
5
+ type LifebouyRef = SVGSVGElement;
6
+
7
+ export const Lifebouy = forwardRef<LifebouyRef, LifebouyProps>((delegated, ref) => {
8
+ return (
9
+ <svg ref={ref} width="20" height="19" viewBox="0 0 20 19" fill="none" {...delegated}>
10
+ <path
11
+ d="M16.5203 3.17017C17.356 4.00589 18.019 4.99805 18.4713 6.08998C18.9236 7.18191 19.1564 8.35223 19.1564 9.53413C19.1564 10.716 18.9236 11.8863 18.4713 12.9783C18.019 14.0702 17.356 15.0624 16.5203 15.8981L12.9624 12.3402C13.3309 11.9717 13.6232 11.5342 13.8226 11.0528C14.0221 10.5713 14.1247 10.0553 14.1247 9.53413C14.1247 9.013 14.0221 8.49697 13.8226 8.0155C13.6232 7.53404 13.3309 7.09657 12.9624 6.72808L16.5203 3.17017Z"
12
+ fill="#FFCCEC"
13
+ />
14
+ <path
15
+ fillRule="evenodd"
16
+ clipRule="evenodd"
17
+ d="M16.5203 2.75818L16.7263 2.96421C17.5891 3.82699 18.2735 4.85126 18.7404 5.97855C19.2073 7.10583 19.4477 8.31404 19.4477 9.5342C19.4477 10.7544 19.2073 11.9626 18.7404 13.0899C18.2735 14.2171 17.5891 15.2414 16.7263 16.1042L16.5203 16.3102L12.5503 12.3403L12.7563 12.1342C13.0978 11.7928 13.3686 11.3874 13.5534 10.9413C13.7382 10.4952 13.8333 10.0171 13.8333 9.5342C13.8333 9.05133 13.7382 8.57319 13.5534 8.12708C13.3686 7.68097 13.0978 7.27562 12.7563 6.93418L12.5503 6.72815L16.5203 2.75818ZM16.5168 3.58574L13.3674 6.73521C13.6701 7.08254 13.915 7.4772 14.0918 7.90407C14.3058 8.42089 14.416 8.97481 14.416 9.5342C14.416 10.0936 14.3058 10.6475 14.0918 11.1643C13.915 11.5912 13.6701 11.9859 13.3674 12.3332L16.5168 15.4827C17.2305 14.7195 17.8016 13.8336 18.202 12.8668C18.6397 11.8103 18.8649 10.6778 18.8649 9.5342C18.8649 8.39057 18.6397 7.25813 18.202 6.20155C17.8016 5.23479 17.2305 4.34886 16.5168 3.58574Z"
18
+ fill="#528693"
19
+ />
20
+ <path
21
+ d="M16.5203 15.8981C15.6845 16.7338 14.6924 17.3968 13.6005 17.8491C12.5085 18.3014 11.3382 18.5342 10.1563 18.5342C8.97441 18.5342 7.80408 18.3014 6.71215 17.8491C5.62022 17.3968 4.62807 16.7338 3.79234 15.8981L7.35025 12.3402C7.71875 12.7087 8.15622 13.001 8.63768 13.2004C9.11914 13.3999 9.63517 13.5025 10.1563 13.5025C10.6774 13.5025 11.1935 13.3999 11.6749 13.2004C12.1564 13.001 12.5939 12.7087 12.9624 12.3402L16.5203 15.8981Z"
22
+ fill="white"
23
+ />
24
+ <path
25
+ fillRule="evenodd"
26
+ clipRule="evenodd"
27
+ d="M16.9324 15.8982L16.7263 16.1042C15.8636 16.967 14.8393 17.6514 13.712 18.1183C12.5847 18.5853 11.3765 18.8256 10.1564 18.8256C8.93619 18.8256 7.72798 18.5853 6.6007 18.1183C5.47342 17.6514 4.44914 16.967 3.58636 16.1042L3.38033 15.8982L7.3503 11.9282L7.55633 12.1343C7.89777 12.4757 8.30312 12.7465 8.74923 12.9313C9.19534 13.1161 9.67348 13.2112 10.1564 13.2112C10.6392 13.2112 11.1174 13.1161 11.5635 12.9313C12.0096 12.7465 12.4149 12.4757 12.7564 12.1343L12.9624 11.9282L16.9324 15.8982ZM16.1048 15.8947L12.9553 12.7453C12.608 13.048 12.2134 13.2929 11.7865 13.4697C11.2697 13.6838 10.7157 13.794 10.1564 13.794C9.59696 13.794 9.04304 13.6838 8.52623 13.4697C8.09935 13.2929 7.70469 13.048 7.35736 12.7453L4.2079 15.8947C4.97101 16.6084 5.85694 17.1795 6.8237 17.58C7.88028 18.0176 9.01272 18.2429 10.1564 18.2429C11.3 18.2429 12.4324 18.0176 13.489 17.58C14.4558 17.1795 15.3417 16.6084 16.1048 15.8947Z"
28
+ fill="#528693"
29
+ />
30
+ <path
31
+ d="M3.79219 15.8982C2.95646 15.0625 2.29352 14.0703 1.84123 12.9784C1.38894 11.8865 1.15615 10.7161 1.15615 9.53423C1.15615 8.35233 1.38894 7.18201 1.84123 6.09008C2.29352 4.99815 2.95646 4.006 3.79219 3.17027L7.3501 6.72818C6.9816 7.09668 6.6893 7.53415 6.48987 8.01561C6.29044 8.49707 6.1878 9.0131 6.1878 9.53423C6.1878 10.0554 6.29044 10.5714 6.48987 11.0529C6.6893 11.5343 6.9816 11.9718 7.3501 12.3403L3.79219 15.8982Z"
32
+ fill="#FFCCEC"
33
+ />
34
+ <path
35
+ fillRule="evenodd"
36
+ clipRule="evenodd"
37
+ d="M3.79224 16.3102L3.58621 16.1042C2.72342 15.2414 2.03903 14.2171 1.57209 13.0898C1.10516 11.9625 0.864828 10.7543 0.864828 9.53416C0.864828 8.314 1.10516 7.10579 1.57209 5.97851C2.03903 4.85122 2.72342 3.82695 3.58621 2.96417L3.79224 2.75814L7.76221 6.72811L7.55618 6.93414C7.21474 7.27558 6.94389 7.68093 6.75911 8.12704C6.57432 8.57315 6.47921 9.05129 6.47921 9.53416C6.47921 10.017 6.57432 10.4952 6.75911 10.9413C6.94389 11.3874 7.21474 11.7927 7.55618 12.1342L7.76221 12.3402L3.79224 16.3102ZM3.79568 15.4826L6.94514 12.3332C6.64238 11.9858 6.39754 11.5912 6.22073 11.1643C6.00666 10.6475 5.89647 10.0936 5.89647 9.53416C5.89647 8.97476 6.00666 8.42085 6.22073 7.90403C6.39754 7.47716 6.64238 7.0825 6.94514 6.73516L3.79568 3.5857C3.08201 4.34882 2.51092 5.23475 2.11047 6.20151C1.67282 7.25809 1.44757 8.39053 1.44757 9.53416C1.44757 10.6778 1.67282 11.8102 2.11047 12.8668C2.51092 13.8336 3.08201 14.7195 3.79568 15.4826Z"
38
+ fill="#528693"
39
+ />
40
+ <path
41
+ d="M2.8449 13.4563C2.20686 12.2467 1.8751 10.8991 1.87869 9.53156C1.88228 8.164 2.2211 6.81817 2.86549 5.61194L3.38013 5.88687C2.78069 7.00897 2.4655 8.26092 2.46216 9.53309C2.45882 10.8053 2.76744 12.0588 3.36098 13.1841L2.8449 13.4563Z"
42
+ fill="#EEEFF1"
43
+ />
44
+ <path
45
+ d="M3.79224 3.17024C4.62796 2.33451 5.62012 1.67157 6.71205 1.21928C7.80398 0.76699 8.9743 0.534198 10.1562 0.534198C11.3381 0.534197 12.5084 0.766988 13.6003 1.21928C14.6923 1.67157 15.6844 2.33451 16.5202 3.17024L12.9622 6.72815C12.5937 6.35965 12.1563 6.06735 11.6748 5.86792C11.1934 5.66849 10.6773 5.56585 10.1562 5.56585C9.63507 5.56585 9.11904 5.66849 8.63757 5.86792C8.15611 6.06735 7.71864 6.35965 7.35015 6.72815L3.79224 3.17024Z"
46
+ fill="white"
47
+ />
48
+ <path
49
+ fillRule="evenodd"
50
+ clipRule="evenodd"
51
+ d="M3.38013 3.17017L3.58616 2.96414C4.44894 2.10135 5.47321 1.41696 6.60049 0.95002C7.72777 0.483085 8.93598 0.242757 10.1561 0.242757C11.3763 0.242757 12.5845 0.483085 13.7118 0.95002C14.8391 1.41695 15.8634 2.10135 16.7261 2.96414L16.9322 3.17016L12.9622 7.14014L12.7562 6.93411C12.4147 6.59267 12.0094 6.32182 11.5633 6.13704C11.1172 5.95225 10.639 5.85714 10.1561 5.85714C9.67328 5.85714 9.19514 5.95225 8.74903 6.13704C8.30291 6.32182 7.89757 6.59267 7.55613 6.93411L7.3501 7.14014L3.38013 3.17017ZM4.20769 3.17361L7.35715 6.32307C7.70448 6.02031 8.09914 5.77547 8.52602 5.59865C9.04283 5.38458 9.59675 5.2744 10.1561 5.2744C10.7155 5.2744 11.2695 5.38458 11.7863 5.59865C12.2131 5.77547 12.6078 6.02031 12.9551 6.32307L16.1046 3.17361C15.3415 2.45994 14.4556 1.88885 13.4888 1.4884C12.4322 1.05075 11.2998 0.825497 10.1561 0.825497C9.01251 0.825497 7.88008 1.05075 6.8235 1.4884C5.85673 1.88885 4.9708 2.45994 4.20769 3.17361Z"
52
+ fill="#528693"
53
+ />
54
+ </svg>
55
+ );
56
+ });
57
+
58
+ Lifebouy.displayName = 'LifebouyProps';
package/src/iconography/wand.tsx ADDED
@@ -0,0 +1,45 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type WandProps = SVGProps<SVGSVGElement>;
4
+
5
+ type WandRef = SVGSVGElement;
6
+
7
+ export const Wand = forwardRef<WandRef, WandProps>((delegated, ref) => {
8
+ return (
9
+ <svg ref={ref} width="19" height="19" viewBox="0 0 19 19" fill="none" {...delegated}>
10
+ <g clipPath="url(#wand-clip-path)">
11
+ <path
12
+ fill="#fff"
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"
14
+ />
15
+ <path
16
+ fill="#528693"
17
+ fillRule="evenodd"
18
+ d="M11.023 9.545 3.82 16.748a.82.82 0 0 1-1.161-1.161l7.203-7.203 1.161 1.16Zm-6.805 7.6A1.384 1.384 0 0 1 2.26 15.19l7.601-7.6 1.957 1.956-7.601 7.6Z"
19
+ clipRule="evenodd"
20
+ />
21
+ <path
22
+ fill="#BFF6F8"
23
+ d="M9.695 2.72c0-.47.542-.732.91-.441l1.93 1.52a.562.562 0 0 0 .521.094l2.336-.758a.562.562 0 0 1 .701.73l-.85 2.304a.562.562 0 0 0 .073.525l1.442 1.988a.563.563 0 0 1-.477.892l-2.454-.097a.563.563 0 0 0-.477.232l-1.445 1.986a.562.562 0 0 1-.996-.178l-.667-2.364a.563.563 0 0 0-.367-.383L7.54 8.01A.562.562 0 0 1 7.4 7.008l2.043-1.365a.562.562 0 0 0 .25-.467V2.72Z"
24
+ />
25
+ <path
26
+ fill="#528693"
27
+ fillRule="evenodd"
28
+ d="m10.953 1.837 1.929 1.52 2.336-.757a1.125 1.125 0 0 1 1.402 1.46l-.85 2.304 1.443 1.987a1.125 1.125 0 0 1-.955 1.785l-2.454-.096-1.445 1.986a1.125 1.125 0 0 1-1.992-.357L9.7 9.305l-2.335-.76a1.125 1.125 0 0 1-.277-2.005L9.13 5.176l.002-2.456c0-.94 1.084-1.465 1.821-.883Zm-.348.442a.562.562 0 0 0-.91.441l-.002 2.456a.562.562 0 0 1-.25.467L7.4 7.008a.563.563 0 0 0 .138 1.002l2.335.76a.563.563 0 0 1 .368.383l.666 2.364c.128.452.72.558.997.178l1.444-1.986a.563.563 0 0 1 .477-.232l2.454.097a.563.563 0 0 0 .478-.892l-1.443-1.988a.563.563 0 0 1-.072-.525l.85-2.304a.562.562 0 0 0-.701-.73l-2.337.758a.563.563 0 0 1-.521-.094l-1.929-1.52Z"
29
+ clipRule="evenodd"
30
+ />
31
+ <path
32
+ fill="#528693"
33
+ d="M15.967 10.93a.704.704 0 1 1-1.408 0 .704.704 0 0 1 1.408 0ZM17.668 5.933a.505.505 0 1 1-1.01 0 .505.505 0 0 1 1.01 0ZM18.067 1.985a.704.704 0 1 1-1.409 0 .704.704 0 0 1 1.41 0ZM13.49 1.77a.49.49 0 1 1-.98 0 .49.49 0 0 1 .98 0ZM8.525 3.792a.49.49 0 1 1-.98 0 .49.49 0 0 1 .98 0Z"
34
+ />
35
+ </g>
36
+ <defs>
37
+ <clipPath id="wand-clip-path">
38
+ <path fill="#fff" d="M0 0h18v18H0z" transform="translate(.572 .576)" />
39
+ </clipPath>
40
+ </defs>
41
+ </svg>
42
+ );
43
+ });
44
+
45
+ Wand.displayName = 'Wand';
package/src/iconography/warning.tsx CHANGED
@@ -5,15 +5,7 @@ type WarningRef = SVGSVGElement;
5
5
 
6
6
  export const Warning = forwardRef<WarningRef, WarningProps>((delegated, ref) => {
7
7
  return (
8
- <svg
9
- ref={ref}
10
- xmlns="http://www.w3.org/2000/svg"
11
- width="22"
12
- height="22"
13
- fill="none"
14
- viewBox="0 0 22 22"
15
- {...delegated}
16
- >
8
+ <svg ref={ref} width="22" height="22" fill="none" viewBox="0 0 22 22" {...delegated}>
17
9
  <path
18
10
  d="M9.67541 3.72993C10.2804 2.68198 11.793 2.68198 12.398 3.72993L19.8853 16.6982C20.4903 17.7462 19.734 19.0561 18.524 19.0561H3.54948C2.33942 19.0561 1.58313 17.7462 2.18816 16.6982L9.67541 3.72993Z"
19
11
  fill="#FFDE99"
package/src/index.ts CHANGED
@@ -21,6 +21,7 @@ export * from './radio';
21
21
  export * from './select';
22
22
  export * from './slider';
23
23
  export * from './spinner';
24
+ export * from './stack-icon';
24
25
  export * from './tag';
25
26
  export * from './rich-text-editor';
26
27
  export * from './tooltip';
package/src/input-with-label/input-with-label.tsx CHANGED
@@ -4,6 +4,7 @@ import { cva, cx, VariantProps } from 'class-variance-authority';
4
4
  import { Triangle } from '../iconography/triangle';
5
5
  import { Input } from '../input';
6
6
  import { Label } from '../label';
7
+ import { Tooltip } from '../tooltip';
7
8
 
8
9
  const inputWithLabelStyles = cva(['c-input-with-label'], {
9
10
  variants: {
@@ -45,9 +46,9 @@ export const InputWithLabel = forwardRef<InputWithLabelRef, InputWithLabelProps>
45
46
  <span className="c-input-with-label-input-wrap">
46
47
  <Input className={cx('c-input-with-label-input', className)} ref={ref} id={id} {...delegated} />
47
48
  {!append && !errorMessage ? null : (
48
- <div className="c-input-with-label-append" title={errorMessage}>
49
- {errorMessage ? <Triangle /> : append}
50
- </div>
49
+ <Tooltip content={errorMessage}>
50
+ <div className="c-input-with-label-append">{errorMessage ? <Triangle /> : append}</div>
51
+ </Tooltip>
51
52
  )}
52
53
  </span>
53
54
  </Label>
package/src/stack-icon/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { StackIcon } from './stack-icon';
package/src/stack-icon/stack-icon.stories.tsx ADDED
@@ -0,0 +1,24 @@
1
+ import type { StoryObj, Meta } from '@storybook/react';
2
+
3
+ import { StackIcon } from '.';
4
+ import { Icon } from '../iconography';
5
+
6
+ const meta: Meta<typeof StackIcon> = {
7
+ title: 'Components/StackIcon',
8
+ component: StackIcon,
9
+ argTypes: {},
10
+ };
11
+
12
+ export default meta;
13
+ type Story = StoryObj<typeof StackIcon>;
14
+
15
+ export const WithTypeCreate: Story = {
16
+ name: 'With type create',
17
+ render: () => (
18
+ <div>
19
+ <StackIcon type="create">
20
+ <Icon.Catalogue width={24} height={24} />
21
+ </StackIcon>
22
+ </div>
23
+ ),
24
+ };
package/src/stack-icon/stack-icon.tsx ADDED
@@ -0,0 +1,23 @@
1
+ import { Icon } from '../iconography';
2
+
3
+ type StackIconProps = {
4
+ type: 'create';
5
+ children: React.ReactNode;
6
+ size?: number;
7
+ };
8
+
9
+ export function StackIcon({ type, children, size = 18 }: StackIconProps) {
10
+ return (
11
+ <span className="relative leading-[0] inline-block">
12
+ {type === 'create' && (
13
+ <span
14
+ style={{ width: size, height: size }}
15
+ className="absolute right-0 top-0 flex -translate-y-1/3 translate-x-1/3 items-center justify-center rounded border border-solid border-white bg-gray-50-900"
16
+ >
17
+ <Icon.Add width={size - 4} height={size - 4} />
18
+ </span>
19
+ )}
20
+ {children}
21
+ </span>
22
+ );
23
+ }
package/src/tooltip/tooltip.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .c-tooltip-content {
2
- @apply 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 bg-white px-4 py-2 text-xs font-medium italic leading-none text-gray-500-400 shadow-tooltip transition;
3
3
  }
4
4
 
5
5
  .c-tooltip-arrow {
package/src/tooltip/tooltip.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { ReactNode } from 'react';
2
2
  import * as RadixTooltip from '@radix-ui/react-tooltip';
3
3
 
4
- type TooltipProps = Pick<RadixTooltip.TooltipContentProps, 'side'> & {
4
+ type TooltipProps = Partial<Pick<RadixTooltip.TooltipContentProps, 'side'>> & {
5
5
  children: ReactNode;
6
6
  content: ReactNode;
7
7
  delayDuration?: number;
@@ -12,7 +12,7 @@ type TooltipProps = Pick<RadixTooltip.TooltipContentProps, 'side'> & {
12
12
  export function Tooltip({
13
13
  children,
14
14
  content,
15
- side,
15
+ side = 'top',
16
16
  align = 'center',
17
17
  defaultOpen = false,
18
18
  delayDuration = 800,