@crystallize/design-system 1.11.5 → 1.11.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/index.css +8 -1
  3. package/dist/index.d.ts +4 -2
  4. package/dist/index.js +1050 -963
  5. package/dist/index.mjs +931 -844
  6. package/package.json +1 -1
  7. package/src/card/card.css +2 -2
  8. package/src/iconography/catalogue.tsx +0 -1
  9. package/src/iconography/check-with-circle.tsx +38 -0
  10. package/src/iconography/copy-with-cloud.tsx +51 -0
  11. package/src/iconography/copy.tsx +19 -5
  12. package/src/iconography/edit.tsx +9 -7
  13. package/src/iconography/index.ts +6 -2
  14. package/src/input-with-label/input-with-label.css +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crystallize/design-system",
3
- "version": "1.11.5",
3
+ "version": "1.11.6",
4
4
  "types": "./dist/index.d.ts",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
package/src/card/card.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .c-card {
2
- @apply rounded-lg bg-gray-50-900 p-4 sm:p-8;
2
+ @apply rounded-md bg-gray-50-900 p-4 sm:p-8;
3
3
  }
4
4
 
5
5
  .c-card-elevate {
6
- @apply bg-elevate;
6
+ @apply bg-elevate shadow;
7
7
  }
package/src/iconography/catalogue.tsx CHANGED
@@ -1,7 +1,6 @@
1
1
  import { forwardRef, SVGProps } from 'react';
2
2
 
3
3
  type CatalogueProps = SVGProps<SVGSVGElement>;
4
-
5
4
  type CatalogueRef = SVGSVGElement;
6
5
 
7
6
  export const Catalogue = forwardRef<CatalogueRef, CatalogueProps>((delegated, ref) => {
package/src/iconography/check-with-circle.tsx ADDED
@@ -0,0 +1,38 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type CheckWithCircleProps = SVGProps<SVGSVGElement>;
4
+ type CheckWithCircleRef = SVGSVGElement;
5
+
6
+ export const CheckWithCircle = forwardRef<CheckWithCircleRef, CheckWithCircleProps>((delegated, ref) => {
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
+ <path fill="#BFF6F8" d="M19.152 11a8.152 8.152 0 1 1-16.304 0 8.152 8.152 0 0 1 16.304 0Z" />
18
+ <path
19
+ fill="#528693"
20
+ fillRule="evenodd"
21
+ d="M11 18.637a7.637 7.637 0 1 0 0-15.274 7.637 7.637 0 0 0 0 15.274Zm0 .515a8.152 8.152 0 1 0 0-16.304 8.152 8.152 0 0 0 0 16.304Z"
22
+ clipRule="evenodd"
23
+ />
24
+ <path
25
+ fill="#fff"
26
+ d="m6.536 12.863 2.703 2.34c.183.231.432.382.705.426.064.01.13.014.194.013.353-.009.694-.191.936-.501l4.637-5.925a1.64 1.64 0 0 0 .34-1.048 1.458 1.458 0 0 0-.386-.983 1.107 1.107 0 0 0-.625-.335c-.417-.067-.84.115-1.13.488l-3.772 4.805-1.727-1.273a1.129 1.129 0 0 0-.698-.417c-.369-.059-.745.078-1.031.375-.523.542-.588 1.455-.146 2.035Z"
27
+ />
28
+ <path
29
+ fill="#528693"
30
+ fillRule="evenodd"
31
+ d="M13.707 7.179c.34-.435.852-.667 1.374-.583.293.047.56.19.77.41.29.303.448.716.458 1.156.01.441-.128.872-.395 1.213l-4.637 5.924c-.284.363-.694.59-1.133.6a1.313 1.313 0 0 1-.24-.016 1.385 1.385 0 0 1-.851-.5L6.348 13.04l-.016-.022c-.524-.686-.442-1.74.164-2.37.338-.35.796-.524 1.258-.45.325.052.618.225.836.483l1.5 1.105 3.617-4.608Zm1.292-.075c-.311-.05-.645.083-.887.392l-3.926 5.002-1.954-1.44-.021-.027a.872.872 0 0 0-.538-.324c-.277-.044-.571.056-.806.3-.432.448-.487 1.204-.141 1.68l2.7 2.337.015.02c.145.183.34.298.544.33a.803.803 0 0 0 .146.01c.267-.006.54-.145.74-.402l4.638-5.925c.19-.243.293-.556.286-.883a1.201 1.201 0 0 0-.316-.811M15 7.104a.85.85 0 0 1 .48.259Z"
32
+ clipRule="evenodd"
33
+ />
34
+ </svg>
35
+ );
36
+ });
37
+
38
+ CheckWithCircle.displayName = 'CheckWithCircleIcon';
package/src/iconography/copy-with-cloud.tsx ADDED
@@ -0,0 +1,51 @@
1
+ import { forwardRef, SVGProps } from 'react';
2
+
3
+ type CopyWithCloudProps = SVGProps<SVGSVGElement>;
4
+ type CopyWithCloudRef = SVGSVGElement;
5
+
6
+ export const CopyWithCloud = forwardRef<CopyWithCloudRef, CopyWithCloudProps>((delegated, ref) => {
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
+ <path
18
+ fill="#fff"
19
+ d="M19.055 13.054c-.595 1.263-1.441 1.553-3.22 1.553-3.734 0-5.845-.123-9.562-.123-1.725 0-3.546-.242-4.082-1.92-.34-1.064-.153-2.123.496-2.817.473-.493 1.014-.699 1.76-.763.563-.048 1.429.226 1.429.226s-.324-2.173.61-2.764c.37-.234.64-.306 1.078-.308.343-.003.86.18.86.18l.911.642s1.164-2.957 3.686-2.957c.217 0 .434.022.647.067 1.136.242 2.228.971 2.757 2.259.405.986.05 2.729.05 2.729s1.887.405 2.454 1.338c.54.888.57 1.718.126 2.658Z"
20
+ />
21
+ <path
22
+ fill="#528693"
23
+ fillRule="evenodd"
24
+ d="M2.254 9.331c.6-.625 1.294-.872 2.142-.944.27-.023.57.008.826.052a6.314 6.314 0 0 1 .01-.424c.02-.339.072-.727.199-1.087.125-.357.344-.742.734-.989.219-.138.432-.244.671-.311a2.67 2.67 0 0 1 .724-.09c.255-.002.534.061.715.109a5.191 5.191 0 0 1 .317.094l.022.008.006.002h.002l.001.001-.2.566s-.516-.183-.86-.18c-.437.002-.707.074-1.077.308-.607.384-.683 1.436-.662 2.125.012.372.052.639.052.639s-.279-.088-.622-.156c-.263-.05-.563-.09-.806-.07-.747.064-1.288.27-1.76.763-.65.694-.837 1.753-.497 2.817.536 1.678 2.357 1.92 4.082 1.92 1.856 0 3.312.03 4.77.062 1.46.03 2.923.061 4.793.061 1.778 0 2.624-.29 3.22-1.553.442-.94.412-1.77-.127-2.658-.567-.933-2.455-1.338-2.455-1.338s.357-1.743-.049-2.73c-.529-1.287-1.621-2.016-2.757-2.258a3.144 3.144 0 0 0-.647-.067c-1.83 0-2.945 1.557-3.419 2.411-.18.324-.267.546-.267.546l-.911-.642.2-.566a.602.602 0 0 1 .146.075l.34.24c.158-.28.376-.622.658-.966.66-.805 1.735-1.698 3.252-1.698.259 0 .517.026.77.08h.003C15.09 3.759 16.364 4.6 16.98 6.1c.26.63.26 1.432.22 2.003-.013.19-.031.365-.05.517.166.051.36.118.562.2.552.22 1.336.615 1.73 1.263.311.513.493 1.04.518 1.594.025.554-.109 1.094-.362 1.632-.342.725-.792 1.237-1.461 1.54-.632.287-1.399.357-2.301.357-1.875 0-3.342-.03-4.801-.061h-.004a209.73 209.73 0 0 0-4.758-.062c-.876 0-1.851-.059-2.693-.367-.87-.319-1.624-.916-1.96-1.97-.393-1.228-.197-2.527.629-3.41l.005-.006Z"
25
+ clipRule="evenodd"
26
+ />
27
+ <path
28
+ fill="#fff"
29
+ d="M7.264 10.434a1 1 0 0 1 1-1h4.595a1 1 0 0 1 1 1v5.848a1 1 0 0 1-1 1H8.264a1 1 0 0 1-1-1v-5.848Z"
30
+ />
31
+ <path
32
+ fill="#528693"
33
+ fillRule="evenodd"
34
+ d="M6.964 10.434a1.3 1.3 0 0 1 1.3-1.3h4.595a1.3 1.3 0 0 1 1.3 1.3v5.848a1.3 1.3 0 0 1-1.3 1.3H8.264a1.3 1.3 0 0 1-1.3-1.3v-5.848Zm1.3-.7a.7.7 0 0 0-.7.7v5.848a.7.7 0 0 0 .7.7h4.595a.7.7 0 0 0 .7-.7v-5.848a.7.7 0 0 0-.7-.7H8.264Z"
35
+ clipRule="evenodd"
36
+ />
37
+ <path
38
+ fill="#BFF6F8"
39
+ d="M8.627 8.785a1 1 0 0 1 1-1h5.06a1 1 0 0 1 1 1v6.4a1 1 0 0 1-1 1h-5.06a1 1 0 0 1-1-1v-6.4Z"
40
+ />
41
+ <path
42
+ fill="#528693"
43
+ fillRule="evenodd"
44
+ d="M9.627 8.085a.697.697 0 0 0-.268.053.3.3 0 0 1-.23-.554c.154-.064.322-.099.498-.099h.632a.3.3 0 1 1 0 .6h-.632Zm1.597-.3a.3.3 0 0 1 .3-.3h1.265a.3.3 0 1 1 0 .6h-1.265a.3.3 0 0 1-.3-.3Zm2.53 0a.3.3 0 0 1 .3-.3h.632c.176 0 .344.035.498.099a.3.3 0 0 1-.23.554.698.698 0 0 0-.268-.053h-.632a.3.3 0 0 1-.3-.3Zm1.741.34a.3.3 0 0 1 .392.163c.064.153.1.322.1.497v.8a.3.3 0 1 1-.6 0v-.8a.698.698 0 0 0-.054-.268.3.3 0 0 1 .162-.392Zm-6.677 0a.3.3 0 0 1 .162.392.697.697 0 0 0-.053.268v.8a.3.3 0 0 1-.6 0v-.8c0-.175.035-.344.099-.497a.3.3 0 0 1 .392-.163Zm-.19 2.76a.3.3 0 0 1 .3.3v1.6a.3.3 0 1 1-.6 0v-1.6a.3.3 0 0 1 .3-.3Zm7.058 0a.3.3 0 0 1 .3.3v1.6a.3.3 0 1 1-.6 0v-1.6a.3.3 0 0 1 .3-.3Zm-7.059 3.2a.3.3 0 0 1 .3.3v.8c0 .096.02.186.053.268a.3.3 0 1 1-.554.23 1.297 1.297 0 0 1-.099-.498v-.8a.3.3 0 0 1 .3-.3Zm7.06 0a.3.3 0 0 1 .3.3v.8c0 .176-.036.344-.1.498a.3.3 0 1 1-.554-.23.698.698 0 0 0 .053-.268v-.8a.3.3 0 0 1 .3-.3Zm-6.72 1.91a.3.3 0 0 1 .392-.163.696.696 0 0 0 .268.053h.632a.3.3 0 1 1 0 .6h-.632c-.176 0-.344-.035-.498-.098a.3.3 0 0 1-.162-.393Zm6.379 0a.3.3 0 0 1-.162.392 1.298 1.298 0 0 1-.498.098h-.632a.3.3 0 1 1 0-.6h.632a.697.697 0 0 0 .268-.053.3.3 0 0 1 .392.162Zm-4.122.19a.3.3 0 0 1 .3-.3h1.265a.3.3 0 1 1 0 .6h-1.265a.3.3 0 0 1-.3-.3Z"
45
+ clipRule="evenodd"
46
+ />
47
+ </svg>
48
+ );
49
+ });
50
+
51
+ CopyWithCloud.displayName = 'CopyWithCloudIcon';
package/src/iconography/copy.tsx CHANGED
@@ -8,15 +8,29 @@ export const Copy = forwardRef<CopyRef, CopyProps>((delegated, ref) => {
8
8
  return (
9
9
  <svg
10
10
  ref={ref}
11
- width="14"
12
- height="16"
13
- viewBox="0 0 14 16"
11
+ width="22"
12
+ height="22"
13
+ viewBox="0 0 22 22"
14
14
  fill="none"
15
15
  xmlns="http://www.w3.org/2000/svg"
16
16
  {...delegated}
17
17
  >
18
- <rect x=".5" y="3.5" width="9" height="12" rx="2.5" fill="#EAEBEE" stroke="#80878D" strokeDasharray="3 2" />
19
- <rect x="4.5" y=".5" width="9" height="12" rx="2.5" fill="#EAEBEE" stroke="#80878D" />
18
+ <path
19
+ fill-rule="evenodd"
20
+ clip-rule="evenodd"
21
+ d="M5.60925 19.5266L5.88208 18.9923C6.25379 19.182 6.67497 19.2893 7.12296 19.2893H8.45636V19.8893H7.12296C6.57795 19.8893 6.06349 19.7586 5.60925 19.5266ZM10.2342 19.8893V19.2893H11.5676C12.0156 19.2893 12.4368 19.182 12.8085 18.9923L13.0813 19.5266C12.6271 19.7586 12.1126 19.8893 11.5676 19.8893H10.2342ZM14.9011 11.1111H14.3011V8.77766C14.3011 8.32967 14.1938 7.9085 14.0041 7.53678L14.5384 7.26395C14.7703 7.71819 14.9011 8.23265 14.9011 8.77766V11.1111ZM8.45636 5.44415H7.12296C6.57795 5.44415 6.06349 5.57495 5.60925 5.80686L5.88208 6.34124C6.25379 6.15146 6.67497 6.04415 7.12296 6.04415H8.45636V5.44415ZM3.78945 14.2224H4.38945V16.5558C4.38945 17.0038 4.49676 17.425 4.68654 17.7967L4.15215 18.0696C3.92024 17.6153 3.78945 17.1009 3.78945 16.5558V14.2224ZM3.78945 11.1111H4.38945V8.77766C4.38945 8.32968 4.49676 7.9085 4.68654 7.53678L4.15215 7.26395C3.92024 7.71819 3.78945 8.23265 3.78945 8.77766V11.1111ZM10.2342 5.44415V6.04415H11.5676C12.0156 6.04415 12.4368 6.15146 12.8085 6.34124L13.0813 5.80686C12.6271 5.57495 12.1126 5.44415 11.5676 5.44415H10.2342ZM14.9011 14.2224H14.3011V16.5558C14.3011 17.0038 14.1938 17.425 14.0041 17.7967L14.5384 18.0696C14.7703 17.6153 14.9011 17.1009 14.9011 16.5558V14.2224Z"
22
+ fill="#528693"
23
+ />
24
+ <path
25
+ d="M8.23413 5.44417C8.23413 3.60312 9.72659 2.11066 11.5676 2.11066H16.0123C17.8534 2.11066 19.3458 3.60312 19.3458 5.44416V13.2223C19.3458 15.0634 17.8534 16.5559 16.0123 16.5559H11.5676C9.72659 16.5559 8.23413 15.0634 8.23413 13.2223V5.44417Z"
26
+ fill="#BFF6F8"
27
+ />
28
+ <path
29
+ fill-rule="evenodd"
30
+ clip-rule="evenodd"
31
+ d="M16.0123 2.71066H11.5676C10.058 2.71066 8.83413 3.93449 8.83413 5.44417V13.2223C8.83413 14.732 10.058 15.9559 11.5676 15.9559H16.0123C17.522 15.9559 18.7458 14.732 18.7458 13.2223V5.44416C18.7458 3.93449 17.522 2.71066 16.0123 2.71066ZM11.5676 2.11066C9.72659 2.11066 8.23413 3.60312 8.23413 5.44417V13.2223C8.23413 15.0634 9.72659 16.5559 11.5676 16.5559H16.0123C17.8534 16.5559 19.3458 15.0634 19.3458 13.2223V5.44416C19.3458 3.60312 17.8534 2.11066 16.0123 2.11066H11.5676Z"
32
+ fill="#528693"
33
+ />
20
34
  </svg>
21
35
  );
22
36
  });
package/src/iconography/edit.tsx CHANGED
@@ -8,20 +8,22 @@ export const Edit = forwardRef<EditRef, EditProps>((delegated, ref) => {
8
8
  return (
9
9
  <svg
10
10
  ref={ref}
11
- width="34"
12
- height="34"
13
- viewBox="0 0 34 34"
11
+ width="22"
12
+ height="22"
13
+ viewBox="0 0 22 22"
14
14
  fill="none"
15
15
  xmlns="http://www.w3.org/2000/svg"
16
16
  {...delegated}
17
17
  >
18
18
  <path
19
- d="m27.2751 9.9953-4.3639-4.367a.5799.5799 0 0 0-.8067.007c-3.9421 4.0122-4.6858 4.447-8.5799 8.509-1.3464 1.4174-2.7077 2.8197-4.0611 4.2301l-1.6672 1.6982a2.3308 2.3308 0 0 0-.8766 1.5362c-.3718 2.237-1.0105 3.9282-1.3824 6.1801-.07.4628-.007.8346.4568.7227 1.3884-.3089 2.6088-.7437 3.9911-1.0595.7227-.1619 2.199-.6597 3.0446-.9546a3.9637 3.9637 0 0 0 1.3194-.9535c.8996-.7787.9995-.9546 1.8581-1.7612a285.1786 285.1786 0 0 0 3.0096-2.8826 9.4842 9.4842 0 0 1 .9755-.9196s.084-.084.9536-.9675l3.2555-3.2555c1.0525-1.0525 2.6587-2.7987 3.7672-3.7982a1.0384 1.0384 0 0 0 .2998-.3998.5995.5995 0 0 0-.1269-.5328 8.0111 8.0111 0 0 0-1.0665-1.0315Zm.1 1.4733c-.014.014-.035.007-.042.028-3.9642 3.8982-4.4689 4.4689-8.439 8.3411l-5.7673 5.5414c-1.6323.5087-3.2495 1.1084-4.9197 1.5472l-.6097.147a2.7125 2.7125 0 0 1-.7647.1329l1.3324-6.0751L22.5183 6.6239c1.8522 1.8801 2.9956 2.9716 4.8548 4.8407l.002.004Z"
20
- fill="#528693"
19
+ d="M18.4051 7.1124C18.41 7.09758 18.4248 7.10252 18.4347 7.09264C17.1224 5.77326 16.3152 5.0028 15.0079 3.67566L4.87616 13.916L3.71256 18.5L8.3771 16.9118L12.4481 13.0002C15.2506 10.2669 15.6069 9.86404 18.4051 7.1124Z"
20
+ fill="#BFF6F8"
21
21
  />
22
22
  <path
23
- d="M27.3731 11.4646c-.014.014-.035.007-.042.028-3.9641 3.8982-4.4689 4.4689-8.439 8.3411l-5.7673 5.5414c-1.6302.5127-3.2475 1.1124-4.9177 1.5512l-.6097.147a2.7125 2.7125 0 0 1-.7646.1329l1.3323-6.0751L22.5184 6.6239c1.8521 1.8801 2.9956 2.9716 4.8547 4.8407Z"
24
- fill="none"
23
+ fill-rule="evenodd"
24
+ clip-rule="evenodd"
25
+ d="M18.8601 6.66954C19.0934 6.90404 19.0929 7.28307 18.859 7.51694C18.8345 7.54136 18.8098 7.56205 18.7858 7.57957C17.5816 8.76397 16.8308 9.51236 16.1327 10.2081C15.2384 11.0996 14.4307 11.9047 12.8671 13.4298L12.8638 13.4329L8.79281 17.3445C8.7295 17.4053 8.6536 17.4515 8.57049 17.4798L3.90595 19.068C3.69763 19.1389 3.46719 19.0901 3.30551 18.9408C3.14383 18.7915 3.07686 18.5657 3.13101 18.3524L4.2946 13.7684C4.32091 13.6648 4.37444 13.5701 4.44964 13.494L14.5813 3.25369C14.6942 3.13962 14.848 3.07551 15.0085 3.07568C15.169 3.07586 15.3227 3.1403 15.4353 3.25461C16.1648 3.99512 16.7297 4.55358 17.3157 5.13286C17.7852 5.59695 18.2682 6.07441 18.8601 6.66954ZM18.0109 6.66797C18.0089 6.66601 18.007 6.66405 18.005 6.66209C17.6061 6.26368 17.2496 5.91124 16.8996 5.56518C16.4274 5.09833 15.9669 4.64309 15.4298 4.10229C15.2945 3.96604 15.1543 3.82435 15.0079 3.67568L4.87616 13.916L3.71256 18.5L8.3771 16.9118L12.4481 13.0002C14.0128 11.4741 14.815 10.6745 15.7054 9.78696C16.3298 9.16449 16.9976 8.49875 18.0024 7.50881C18.1309 7.38218 18.2649 7.25025 18.4051 7.11242C18.408 7.10379 18.4142 7.10186 18.4208 7.0998C18.4256 7.09834 18.4305 7.09681 18.4346 7.09274C18.4346 7.09277 18.4347 7.09272 18.4346 7.09274C18.2875 6.94479 18.1468 6.80367 18.0109 6.66797Z"
26
+ fill="#528693"
25
27
  />
26
28
  </svg>
27
29
  );
package/src/iconography/index.ts CHANGED
@@ -5,9 +5,11 @@ import { Atom } from './atom';
5
5
  import { BillingPayments } from './billing-payments';
6
6
  import { Cancel } from './cancel';
7
7
  import { Catalogue } from './catalogue';
8
+ import { CheckWithCircle } from './check-with-circle';
8
9
  import { Cloud } from './cloud';
9
10
  import { CloudWithKeyHole } from './cloud-with-key-hole';
10
11
  import { Copy } from './copy';
12
+ import { CopyWithCloud } from './copy-with-cloud';
11
13
  import { Crystal } from './crystal';
12
14
  import { Customers } from './customers';
13
15
  import { Document } from './document';
@@ -56,9 +58,11 @@ export const Icon = {
56
58
  BillingPayments,
57
59
  Cancel,
58
60
  Catalogue,
59
- Copy,
61
+ CheckWithCircle,
60
62
  Cloud,
61
63
  CloudWithKeyHole,
64
+ Copy,
65
+ CopyWithCloud,
62
66
  Crystal,
63
67
  Customers,
64
68
  Document,
@@ -79,8 +83,8 @@ export const Icon = {
79
83
  Multilingual,
80
84
  NailPolish,
81
85
  Order,
82
- People,
83
86
  Particle,
87
+ People,
84
88
  Percentage,
85
89
  PlansAndPricing,
86
90
  PriceTag,
package/src/input-with-label/input-with-label.css CHANGED
@@ -6,7 +6,7 @@
6
6
  }
7
7
 
8
8
  &-input {
9
- @apply flex-1 overflow-hidden text-ellipsis text-base;
9
+ @apply flex-1 overflow-hidden text-ellipsis text-base font-medium;
10
10
  }
11
11
 
12
12
  &-append {