@crystallize/design-system 2.0.3 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -20,6 +20,14 @@
     "./styles.css": {
       "import": "./dist/index.css",
       "require": "./dist/index.css"
+    },
+    "./styles-light-core.css": {
+      "import": "./dist/styles-light-core.css",
+      "require": "./dist/styles-light-core.css"
+    },
+    "./styles-rich-text-editor.css": {
+      "import": "./dist/styles-rich-text-editor.css",
+      "require": "./dist/styles-rich-text-editor.css"
     }
   },
   "dependencies": {
@@ -126,9 +134,10 @@
     "build:storybook": "storybook build public",
     "build:tw": "tailwindcss -c ./tailwind.config.cjs -i src/index.css -o dist/index.css",
     "build:tsup": "tsup src/index.ts --format esm,cjs --dts",
-    "build": "pnpm build:tw && pnpm build:tsup",
-    "dev:tw": "tailwindcss --content ./src/**/*.tsx,!./src/**/*.stories.tsx -c ./tailwind.config.cjs -i src/index.css -o dist/index.css --watch & tsup src/index.ts --format esm --dts --watch",
-    "dev:tsup": "tsup src/index.ts --format esm --dts --watch",
+    "build:split-styles": "node ./scripts/split-styles.mjs",
+    "build": "pnpm build:tw && pnpm build:tsup && pnpm build:split-styles",
+    "dev:tw": "tailwindcss --content ./src/**/*.tsx,!./src/**/*.stories.tsx -c ./tailwind.config.cjs -i src/index.css -o dist/index.css --watch",
+    "dev:tsup": "tsup src/index.ts --format esm --dts --watch --onSuccess \"node ./scripts/split-styles.mjs\"",
     "dev:storybook": "storybook dev -p 6006 --no-open public",
     "dev": "concurrently \"npm:dev:*\"",
     "test": "vitest run src/",

package/src/iconography/customer-shortcut.tsx

@@ -0,0 +1,69 @@
+import { forwardRef, SVGProps } from 'react';
+
+import { fill, stroke } from './variables';
+
+export const CustomerShortcut = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <g clipPath="url(#a)">
+        <path
+          fill={stroke}
+          fillRule="evenodd"
+          d="M10.28 11.897v-.002zl-.007.012-.025.065a3 3 0 0 0-.088.285c-.065.26-.132.66-.132 1.2a.3.3 0 1 1-.6 0c0-.591.074-1.04.15-1.345a3 3 0 0 1 .158-.472l.004-.009.001-.003h.001s0-.002.266.13l-.266-.132a.3.3 0 0 1 .537.268M7.557 14.675a.3.3 0 0 1 .22.362c-.073.3-.2.535-.38.694a.8.8 0 0 1-.624.205c-.415-.043-.765-.386-.87-.803a.3.3 0 0 1 .583-.146c.052.21.221.339.348.352A.2.2 0 0 0 7 15.28c.062-.054.14-.167.194-.387a.3.3 0 0 1 .363-.22"
+          clipRule="evenodd"
+        />
+        <path
+          fill={stroke}
+          fillRule="evenodd"
+          d="M7.495 14.666a.3.3 0 0 0-.3.3c0 .36.114.655.307.873.19.214.441.335.689.382.246.046.504.022.724-.072s.424-.273.492-.545a.3.3 0 1 0-.582-.145c-.01.042-.048.096-.147.139a.67.67 0 0 1-.376.033.62.62 0 0 1-.352-.19c-.086-.098-.155-.246-.155-.475a.3.3 0 0 0-.3-.3"
+          clipRule="evenodd"
+        />
+        <path
+          fill={fill}
+          d="M18.688 17.889c0 .503-3.6 1.508-8.042 1.508s-8.043-1.005-8.043-1.508c0-3.054 3.6-5.53 8.043-5.53 4.441 0 8.042 2.476 8.042 5.53"
+        />
+        <path
+          fill={stroke}
+          fillRule="evenodd"
+          d="M16.46 19.42c-1.498.324-3.551.58-5.815.58-2.263 0-4.316-.256-5.814-.58-.746-.16-1.371-.342-1.822-.525a3 3 0 0 1-.59-.304 1.2 1.2 0 0 1-.249-.23.77.77 0 0 1-.17-.472c0-1.783 1.052-3.33 2.617-4.407 1.568-1.078 3.701-1.725 6.029-1.725s4.46.647 6.028 1.725c1.566 1.076 2.617 2.624 2.617 4.407a.77.77 0 0 1-.17.472 1.2 1.2 0 0 1-.249.23 3 3 0 0 1-.59.304c-.45.183-1.076.365-1.823.526m-5.815-.023c4.442 0 8.043-1.006 8.043-1.508 0-3.054-3.6-5.53-8.042-5.53s-8.043 2.476-8.043 5.53c0 .502 3.6 1.508 8.043 1.508"
+          clipRule="evenodd"
+        />
+        <path
+          fill="#fff"
+          d="M12.656 11.857c0 1.388-.9 2.513-2.01 2.513s-2.011-1.125-2.011-2.513.9-2.513 2.01-2.513 2.011 1.125 2.011 2.513"
+        />
+        <path
+          fill={stroke}
+          fillRule="evenodd"
+          d="M13.26 11.857c0 1.589-1.052 3.117-2.614 3.117-1.563 0-2.614-1.528-2.614-3.117s1.051-3.116 2.614-3.116 2.613 1.527 2.613 3.116m-2.614 2.513c1.11 0 2.01-1.125 2.01-2.513s-.9-2.513-2.01-2.513-2.011 1.125-2.011 2.513.9 2.513 2.01 2.513"
+          clipRule="evenodd"
+        />
+        <path
+          fill="#fff"
+          d="M14.767 7.333c0 3.332-3.155 4.826-4.121 4.826s-4.122-1.495-4.122-4.826 1.005-5.73 4.122-5.73 4.121 2.4 4.121 5.73"
+        />
+        <path
+          fill={stroke}
+          fillRule="evenodd"
+          d="M11.943 12.424c-.468.208-.935.338-1.297.338-.363 0-.83-.13-1.298-.338a6.2 6.2 0 0 1-1.521-.973c-1.01-.878-1.906-2.24-1.906-4.118 0-1.705.253-3.276.985-4.436C7.669 1.687 8.903 1 10.646 1c1.742 0 2.976.687 3.74 1.897.73 1.16.984 2.73.984 4.436 0 1.878-.895 3.24-1.906 4.118a6.2 6.2 0 0 1-1.521.973m-1.297-.265c.966 0 4.121-1.494 4.121-4.826 0-3.33-1.005-5.73-4.121-5.73s-4.122 2.4-4.122 5.73c0 3.332 3.155 4.826 4.122 4.826"
+          clipRule="evenodd"
+        />
+        <path
+          fill="#ffde99"
+          d="M19.769 1.927a.558.558 0 0 1 .616.614l-.511 6.188c-.045.545-.716.835-1.083.469l-.67-.67-.668-.669L6.098 19.214S4.738 20.87 3.5 20.5c-1.215-.363-2.096-1.111-2-2.5.072-1.04 1-1.5 1-1.5L2 18 14.59 4.997l-.805-.805-.65-.651c-.367-.366-.078-1.036.466-1.083z"
+        />
+        <path
+          fill={stroke}
+          d="M19.717 1.33a1.156 1.156 0 0 1 1.27 1.124l-.004.136-.511 6.188c-.043.52-.385.906-.78 1.077-.398.172-.933.159-1.325-.233l-.914-.914L6.539 19.622l-.053.061q-.069.078-.192.204a6 6 0 0 1-.673.59c-.518.386-1.38.87-2.293.598-.67-.2-1.308-.524-1.769-1.043-.475-.535-.716-1.23-.658-2.073.05-.703.39-1.206.698-1.52A2.7 2.7 0 0 1 2.162 16l.046-.024.016-.01.006-.001.001-.002h.002l.267.537-.266-.538 1.29-.639-.12.365L13.748 5.004 12.71 3.965c-.39-.39-.406-.926-.235-1.323s.556-.737 1.075-.782zm.668 1.211a.558.558 0 0 0-.616-.614l-6.168.531-.099.016c-.446.106-.679.644-.43.995l.062.072 1.457 1.457L2 18l.5-1.5s-.928.459-1 1.5c-.09 1.301.679 2.04 1.776 2.427l.225.073c1.23.368 2.58-1.265 2.597-1.286L17.453 7.86l1.338 1.338.072.06c.376.27.969-.018 1.01-.53z"
+        />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path fill="#fff" d="M0 0h22v22H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+});
+
+CustomerShortcut.displayName = 'CustomerShortcutIcon';

package/src/iconography/desktop.tsx

@@ -0,0 +1,22 @@
+import { forwardRef, SVGProps } from 'react';
+
+import { fill, stroke } from './variables';
+
+export const Desktop = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path fill="#fff" d="M3 6.6a.6.6 0 0 1 .6-.6h14.8a.6.6 0 0 1 .6.6v8.8a.6.6 0 0 1-.6.6H3.6a.6.6 0 0 1-.6-.6z" />
+      <path
+        fill={stroke}
+        d="M2.4 15.4V6.6a1.2 1.2 0 0 1 1.2-1.2V6a.6.6 0 0 0-.6.6v8.8l.012.12A.6.6 0 0 0 3.6 16h14.8l.12-.012a.6.6 0 0 0 .468-.467L19 15.4V6.6a.6.6 0 0 0-.48-.588L18.4 6v-.6a1.2 1.2 0 0 1 1.2 1.2v8.8a1.2 1.2 0 0 1-1.2 1.2H3.6a1.2 1.2 0 0 1-1.2-1.2m16-10V6H3.6v-.6z"
+      />
+      <path fill={fill} d="M3 14h16v1.4a.6.6 0 0 1-.6.6H3.6a.6.6 0 0 1-.6-.6z" />
+      <path
+        fill={stroke}
+        d="M3 14v1.4l.012.12A.6.6 0 0 0 3.6 16h14.8l.12-.012a.6.6 0 0 0 .468-.467L19 15.4V14zm16.6 1.4a1.2 1.2 0 0 1-1.2 1.2H3.6a1.2 1.2 0 0 1-1.2-1.2V14a.6.6 0 0 1 .6-.6h16a.6.6 0 0 1 .6.6z"
+      />
+    </svg>
+  );
+});
+
+Desktop.displayName = 'DesktopIcon';

package/src/iconography/index.ts

@@ -28,10 +28,12 @@ import { Copy } from './copy';
 import { CopyWithCloud } from './copy-with-cloud';
 import { Coupon } from './coupon';
 import { Crystal } from './crystal';
+import { CustomerShortcut } from './customer-shortcut';
 import { Customers } from './customers';
 import { Dashboard } from './dashboard';
 import { Date } from './date';
 import { DateInfinity } from './date-infinity';
+import { Desktop } from './desktop';
 import { Discovery } from './discovery';
 import { Document } from './document';
 import { DocumentShortcut } from './document-shortcut';
@@ -88,6 +90,7 @@ import { Particle } from './particle';
 import { Paths } from './paths';
 import { People } from './people';
 import { Percentage } from './percentage';
+import { Phone } from './phone';
 import { Piece } from './piece';
 import { Pin } from './pin';
 import { PipelineDashed } from './pipeline-dashed';
@@ -119,6 +122,7 @@ import { Subscription } from './subscription';
 import { SubscriptionContracts } from './subscription-contracts';
 import { SubscriptionPlans } from './subscription-plans';
 import { Switch } from './switch';
+import { Tablet } from './tablet';
 import { Target } from './target';
 import { Topics } from './topics';
 import { TopicsBranch } from './topics-branch';
@@ -167,6 +171,10 @@ export const Icon: Record<
   Copy,
   Coupon,
   CopyWithCloud,
+  CustomerShortcut,
+  Desktop,
+  Phone,
+  Tablet,
   Customers,
   Dashboard,
   Document,

package/src/iconography/phone.tsx

@@ -0,0 +1,22 @@
+import { forwardRef, SVGProps } from 'react';
+
+import { fill, stroke } from './variables';
+
+export const Phone = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path fill="#fff" d="M7.5 5.1a.6.6 0 0 1 .6-.6h5.8a.6.6 0 0 1 .6.6v11.8a.6.6 0 0 1-.6.6H8.1a.6.6 0 0 1-.6-.6z" />
+      <path
+        fill={stroke}
+        d="M6.9 16.9V5.1a1.2 1.2 0 0 1 1.2-1.2v.6a.6.6 0 0 0-.6.6v11.8l.012.12a.6.6 0 0 0 .588.48h5.8l.12-.012a.6.6 0 0 0 .468-.468l.012-.12V5.1a.6.6 0 0 0-.48-.588L13.9 4.5v-.6a1.2 1.2 0 0 1 1.2 1.2v11.8a1.2 1.2 0 0 1-1.2 1.2H8.1a1.2 1.2 0 0 1-1.2-1.2m7-13v.6H8.1v-.6z"
+      />
+      <path fill={fill} d="M11.65 15.15a.65.65 0 1 1-1.3 0 .65.65 0 0 1 1.3 0" />
+      <path
+        fill={stroke}
+        d="M9.75 15.15c0-.69.56-1.25 1.25-1.25v.6a.65.65 0 0 0-.65.65l.014.131a.65.65 0 0 0 .504.506L11 15.8a.65.65 0 0 0 .637-.519l.013-.13a.65.65 0 0 0-.519-.637l-.13-.014v-.6a1.25 1.25 0 1 1-1.25 1.25"
+      />
+    </svg>
+  );
+});
+
+Phone.displayName = 'PhoneIcon';

package/src/iconography/tablet.tsx

@@ -0,0 +1,22 @@
+import { forwardRef, SVGProps } from 'react';
+
+import { fill, stroke } from './variables';
+
+export const Tablet = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path fill="#fff" d="M5.5 4.6a.6.6 0 0 1 .6-.6h9.8a.6.6 0 0 1 .6.6v12.8a.6.6 0 0 1-.6.6H6.1a.6.6 0 0 1-.6-.6z" />
+      <path
+        fill={stroke}
+        d="M4.9 17.4V4.6a1.2 1.2 0 0 1 1.2-1.2V4a.6.6 0 0 0-.6.6v12.8l.012.12A.6.6 0 0 0 6.1 18h9.8l.12-.012a.6.6 0 0 0 .468-.468l.012-.12V4.6a.6.6 0 0 0-.48-.588L15.9 4v-.6a1.2 1.2 0 0 1 1.2 1.2v12.8a1.2 1.2 0 0 1-1.2 1.2H6.1a1.2 1.2 0 0 1-1.2-1.2m11-14V4H6.1v-.6z"
+      />
+      <path fill={fill} d="M11.65 16.15a.65.65 0 1 1-1.3 0 .65.65 0 0 1 1.3 0" />
+      <path
+        fill={stroke}
+        d="M9.75 16.15c0-.69.56-1.25 1.25-1.25v.6a.65.65 0 0 0-.65.65l.014.131a.65.65 0 0 0 .504.506L11 16.8a.65.65 0 0 0 .637-.519l.013-.13a.65.65 0 0 0-.519-.637l-.13-.014v-.6a1.25 1.25 0 1 1-1.25 1.25"
+      />
+    </svg>
+  );
+});
+
+Tablet.displayName = 'TabletIcon';