@crystallize/design-system 1.24.36 → 1.24.38

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-RGQ4WALV.mjs";
+} from "./chunk-LZQXHYRL.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
@@ -486,7 +486,7 @@ function Tag({
 // src/rich-text-editor/index.tsx
 import { lazy, Suspense } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var LazyRichTextEditor = lazy(() => import("./rich-text-editor-MZTMZK5H.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-KQLVUXHE.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx15(Suspense, {
     fallback: null,

package/dist/{rich-text-editor-MZTMZK5H.mjs → rich-text-editor-KQLVUXHE.mjs}

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-RGQ4WALV.mjs";
+} from "./chunk-LZQXHYRL.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/rich-text-editor/rich-text-editor.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.24.36",
+  "version": "1.24.38",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/iconography/compact.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, SVGProps } from 'react';
+
+type CompactProps = SVGProps<SVGSVGElement>;
+
+type CompactRef = SVGSVGElement;
+
+export const Compact = forwardRef<CompactRef, CompactProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        d="M4 4.6a.6.6 0 0 1 .6-.6h12.8a.6.6 0 0 1 .6.6v1.6a.6.6 0 0 1-.6.6H4.6a.6.6 0 0 1-.6-.6V4.6Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.6 3.4h12.8a1.2 1.2 0 0 1 1.2 1.2v1.6a1.2 1.2 0 0 1-1.2 1.2H4.6a1.2 1.2 0 0 1-1.2-1.2V4.6a1.2 1.2 0 0 1 1.2-1.2Zm0 .6a.6.6 0 0 0-.6.6v1.6a.6.6 0 0 0 .6.6h12.8a.6.6 0 0 0 .6-.6V4.6a.6.6 0 0 0-.6-.6H4.6Z"
+        fill="#528693"
+      />
+      <path
+        d="M4 10.2a.6.6 0 0 1 .6-.6h12.8a.6.6 0 0 1 .6.6v1.6a.6.6 0 0 1-.6.6H4.6a.6.6 0 0 1-.6-.6v-1.6ZM4 16.4a.6.6 0 0 1 .6-.6h12.8a.6.6 0 0 1 .6.6V18a.6.6 0 0 1-.6.6H4.6A.6.6 0 0 1 4 18v-1.6Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.6 9h12.8a1.2 1.2 0 0 1 1.2 1.2v1.6a1.2 1.2 0 0 1-1.2 1.2H4.6a1.2 1.2 0 0 1-1.2-1.2v-1.6A1.2 1.2 0 0 1 4.6 9Zm0 .6a.6.6 0 0 0-.6.6v1.6a.6.6 0 0 0 .6.6h12.8a.6.6 0 0 0 .6-.6v-1.6a.6.6 0 0 0-.6-.6H4.6ZM4.6 15.2h12.8a1.2 1.2 0 0 1 1.2 1.2V18a1.2 1.2 0 0 1-1.2 1.2H4.6A1.2 1.2 0 0 1 3.4 18v-1.6a1.2 1.2 0 0 1 1.2-1.2Zm0 .6a.6.6 0 0 0-.6.6V18a.6.6 0 0 0 .6.6h12.8a.6.6 0 0 0 .6-.6v-1.6a.6.6 0 0 0-.6-.6H4.6Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Compact.displayName = 'CompactIcon';

package/src/iconography/copy.tsx

@@ -1,35 +1,29 @@
 import { forwardRef, SVGProps } from 'react';
 
+import { fill, stroke } from './variables';
+
 type CopyProps = SVGProps<SVGSVGElement>;
 
 type CopyRef = SVGSVGElement;
 
 export const Copy = forwardRef<CopyRef, CopyProps>((delegated, ref) => {
   return (
-    <svg
-      ref={ref}
-      width="22"
-      height="22"
-      viewBox="0 0 22 22"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...delegated}
-    >
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         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"
-        fill="#528693"
+        fill={stroke}
       />
       <path
         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"
-        fill="#BFF6F8"
+        fill={fill}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         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"
-        fill="#528693"
+        fill={stroke}
       />
     </svg>
   );

package/src/iconography/dots.tsx

@@ -0,0 +1,17 @@
+import { forwardRef, SVGProps } from 'react';
+
+type DotsProps = SVGProps<SVGSVGElement>;
+
+type DotsRef = SVGSVGElement;
+
+export const Dots = forwardRef<DotsRef, DotsProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" {...delegated}>
+      <circle cx="10" cy="5" r="1.7857" fill="#9095A8" />
+      <circle cx="10" cy="10" r="1.7857" fill="#9095A8" />
+      <circle cx="10" cy="15" r="1.7857" fill="#9095A8" />
+    </svg>
+  );
+});
+
+Dots.displayName = 'DotsIcon';

package/src/iconography/expanded.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, SVGProps } from 'react';
+
+type ExpandedProps = SVGProps<SVGSVGElement>;
+
+type ExpandedRef = SVGSVGElement;
+
+export const Expanded = forwardRef<ExpandedRef, ExpandedProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        d="M10.648 8.12c0-.233.269-.422.6-.422h6.16c.33 0 .6.19.6.422v1.126c0 .233-.27.422-.6.422h-6.16c-.331 0-.6-.19-.6-.422V8.12ZM4.117 3.984c0-.233.269-.422.6-.422h12.69c.331 0 .6.189.6.422v1.125c0 .233-.269.422-.6.422H4.717c-.331 0-.6-.189-.6-.422V3.984Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.247 7.1H17.4a1.2 1.2 0 0 1 1.2 1.2l-.017.766a1.2 1.2 0 0 1-1.2 1.2h-6.152a1.2 1.2 0 0 1-1.2-1.2l.016-.766a1.2 1.2 0 0 1 1.2-1.2Zm0 .6a.6.6 0 0 0-.6.6l-.016.766a.6.6 0 0 0 .6.6h6.152a.6.6 0 0 0 .6-.6L18 8.3a.6.6 0 0 0-.6-.6h-6.153ZM4.75 2.963H17.4a1.2 1.2 0 0 1 1.2 1.2l-.017.766a1.2 1.2 0 0 1-1.2 1.2H4.733a1.2 1.2 0 0 1-1.2-1.2l.017-.766a1.2 1.2 0 0 1 1.2-1.2Zm0 .6a.6.6 0 0 0-.6.6l-.017.766a.6.6 0 0 0 .6.6h12.65a.6.6 0 0 0 .6-.6L18 4.163a.6.6 0 0 0-.6-.6H4.75Z"
+        fill="#528693"
+      />
+      <path
+        d="M10.648 16.157c0-.233.269-.422.6-.422h6.16c.33 0 .6.19.6.422v1.126c0 .233-.27.422-.6.422h-6.16c-.331 0-.6-.189-.6-.422v-1.126ZM4.117 12.02c0-.232.269-.421.6-.421h12.69c.331 0 .6.189.6.422v1.125c0 .233-.269.422-.6.422H4.717c-.331 0-.6-.189-.6-.422v-1.125Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.247 15.137H17.4a1.2 1.2 0 0 1 1.2 1.2l-.017.766a1.2 1.2 0 0 1-1.2 1.2h-6.152a1.2 1.2 0 0 1-1.2-1.2l.016-.766a1.2 1.2 0 0 1 1.2-1.2Zm0 .6a.6.6 0 0 0-.6.6l-.016.766a.6.6 0 0 0 .6.6h6.152a.6.6 0 0 0 .6-.6l.017-.766a.6.6 0 0 0-.6-.6h-6.153ZM4.75 11H17.4a1.2 1.2 0 0 1 1.2 1.2l-.017.767a1.2 1.2 0 0 1-1.2 1.2H4.733a1.2 1.2 0 0 1-1.2-1.2l.017-.767a1.2 1.2 0 0 1 1.2-1.2Zm0 .6a.6.6 0 0 0-.6.6l-.017.767a.6.6 0 0 0 .6.6h12.65a.6.6 0 0 0 .6-.6L18 12.2a.6.6 0 0 0-.6-.6H4.75Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Expanded.displayName = 'ExpandedIcon';

package/src/iconography/index.ts

@@ -19,6 +19,7 @@ import { Chunk } from './chunk';
 import { Clock } from './clock';
 import { Cloud } from './cloud';
 import { CloudWithKeyHole } from './cloud-with-key-hole';
+import { Compact } from './compact';
 import { Copy } from './copy';
 import { CopyWithCloud } from './copy-with-cloud';
 import { Coupon } from './coupon';
@@ -30,12 +31,14 @@ import { DateInfinity } from './date-infinity';
 import { Discovery } from './discovery';
 import { Document } from './document';
 import { DocumentShortcut } from './document-shortcut';
+import { Dots } from './dots';
 import { Download } from './download';
 import { DragHandle } from './drag-handle';
 import { DynamicValue } from './dynamic-value';
 import { Edit } from './edit';
 import { Error } from './error';
 import { ErrorWhite } from './error-white';
+import { Expanded } from './expanded';
 import { EyeClosed } from './eye-closed';
 import { EyeOpen } from './eye-open';
 import { FileUpload } from './file-upload';
@@ -139,6 +142,7 @@ export const Icon = {
   Cloud,
   Clock,
   CloudWithKeyHole,
+  Compact,
   Copy,
   Coupon,
   CopyWithCloud,
@@ -146,6 +150,7 @@ export const Icon = {
   Dashboard,
   Document,
   DocumentShortcut,
+  Dots,
   Download,
   DragHandle,
   DynamicValue,
@@ -153,6 +158,7 @@ export const Icon = {
   Edit,
   EyeClosed,
   EyeOpen,
+  Expanded,
   FixedValue,
   Flow,
   Folder,