@crystallize/design-system 1.21.2 → 1.23.0

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-PB47BT3T.mjs";
+} from "./chunk-VYFBR7S4.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
@@ -368,7 +368,7 @@ function Tag({ children, className, variant, size, prepend, onRemove, ...delegat
 // src/rich-text-editor/index.tsx
 import { lazy, Suspense } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var LazyRichTextEditor = lazy(() => import("./rich-text-editor-BA5R66CS.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-PXZQZRPK.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx12(Suspense, {
     fallback: null,
@@ -410,7 +410,7 @@ var toast = ({ title, message, type = "success", timeout = 6e3 }) => {
   const toastId = Date.now().toString();
   sonnerToast.custom(
     (id) => /* @__PURE__ */ jsxs7("div", {
-      "data-testid": "toast-content",
+      "data-testid": `toast-${type}`,
       className: cx4(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
       children: [
         /* @__PURE__ */ jsx13("div", {

package/dist/{rich-text-editor-BA5R66CS.mjs → rich-text-editor-PXZQZRPK.mjs}

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-PB47BT3T.mjs";
+} from "./chunk-VYFBR7S4.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/rich-text-editor/rich-text-editor.tsx
@@ -3164,6 +3164,7 @@ function RichTextEditorWithoutContext({
       slotPreContent,
       /* @__PURE__ */ jsxs10("div", {
         className: `c-rte-editor-container ${disabled ? "disabled" : ""}`,
+        "data-testid": "rich-text-editor",
         children: [
           maxLength != null ? /* @__PURE__ */ jsx15(MaxLengthPlugin, {
             maxLength

package/package.json

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

package/src/iconography/flow.tsx

@@ -0,0 +1,58 @@
+import { forwardRef, SVGProps } from 'react';
+
+type FlowProps = SVGProps<SVGSVGElement>;
+
+type FlowRef = SVGSVGElement;
+
+export const Flow = forwardRef<FlowRef, FlowProps>((delegated, ref) => {
+  return (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      width="23"
+      height="22"
+      fill="none"
+      viewBox="0 0 23 22"
+      {...delegated}
+    >
+      <path
+        fill="#fff"
+        d="M9.892 13.114a1.04 1.04 0 01-1.041-1.04v-2.29c0-.576.466-1.042 1.04-1.042h2.29c.576 0 1.042.466 1.042 1.041v2.29a1.04 1.04 0 01-1.041 1.04h-2.29z"
+      ></path>
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M8.226 12.073v-2.29c0-.92.746-1.665 1.666-1.665h2.29c.92 0 1.665.745 1.665 1.665v2.29c0 .92-.746 1.665-1.665 1.665h-2.29c-.92 0-1.666-.745-1.666-1.665zm.625 0c0 .575.466 1.04 1.04 1.04h2.29a1.04 1.04 0 001.042-1.04v-2.29a1.04 1.04 0 00-1.041-1.04h-2.29a1.04 1.04 0 00-1.041 1.04v2.29z"
+        clipRule="evenodd"
+      ></path>
+      <path
+        fill="#BFF6F8"
+        d="M15.79 13.114a1.04 1.04 0 01-1.041-1.04v-2.29c0-.576.465-1.042 1.04-1.042h2.29c.575 0 1.041.466 1.041 1.041v2.29a1.04 1.04 0 01-1.04 1.04h-2.29z"
+      ></path>
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M14.124 12.073v-2.29c0-.92.746-1.665 1.665-1.665h2.29c.92 0 1.665.745 1.665 1.665v2.29c0 .92-.745 1.665-1.665 1.665h-2.29c-.92 0-1.665-.745-1.665-1.665zm.624 0c0 .575.466 1.04 1.041 1.04h2.29a1.04 1.04 0 001.041-1.04v-2.29a1.04 1.04 0 00-1.04-1.04h-2.29a1.04 1.04 0 00-1.041 1.04v2.29z"
+        clipRule="evenodd"
+      ></path>
+      <path
+        fill="#BFF6F8"
+        d="M3.994 13.114a1.04 1.04 0 01-1.04-1.04v-2.29c0-.576.465-1.042 1.04-1.042h2.29c.575 0 1.041.466 1.041 1.041v2.29a1.04 1.04 0 01-1.04 1.04h-2.29z"
+      ></path>
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M2.329 12.073v-2.29c0-.92.746-1.665 1.665-1.665h2.29c.92 0 1.665.745 1.665 1.665v2.29c0 .92-.745 1.665-1.665 1.665h-2.29c-.92 0-1.665-.745-1.665-1.665zm.624 0c0 .575.466 1.04 1.041 1.04h2.29a1.04 1.04 0 001.041-1.04v-2.29a1.04 1.04 0 00-1.04-1.04h-2.29a1.04 1.04 0 00-1.042 1.04v2.29zM5.14 17.778a.312.312 0 01-.313-.313v-2.558a.312.312 0 11.624 0v2.558c0 .173-.14.313-.312.313zM14.617 5.526l1.987-1.987a.312.312 0 01.442 0l1.987 1.987a.312.312 0 01-.441.441l-1.454-1.454V8.34a.312.312 0 01-.625 0V4.513l-1.454 1.454a.312.312 0 11-.442-.441z"
+        clipRule="evenodd"
+      ></path>
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M11.037 8.651c.172 0 .312-.14.312-.312V4.59c0-.747-.606-1.353-1.353-1.353h-3.97c-.748 0-1.354.606-1.354 1.353v3.75a.312.312 0 00.625 0V4.59c0-.402.326-.728.728-.728h3.97c.403 0 .73.326.73.728v3.75c0 .173.14.312.312.312zM11.037 13.479a.312.312 0 00-.313.312v3.75c0 .747.606 1.353 1.354 1.353h3.97c.748 0 1.353-.606 1.353-1.353v-3.75a.312.312 0 00-.624 0v3.75a.729.729 0 01-.729.728h-3.97a.729.729 0 01-.729-.728v-3.75a.312.312 0 00-.312-.312zM5.14 20.29a.312.312 0 01-.313-.311v-.91a.312.312 0 11.624 0v.91c0 .172-.14.312-.312.312z"
+        clipRule="evenodd"
+      ></path>
+    </svg>
+  );
+});
+
+Flow.displayName = 'FlowIcon';

package/src/iconography/index.ts

@@ -34,6 +34,7 @@ import { EyeOpen } from './eye-open';
 import { FileUpload } from './file-upload';
 import { Filename } from './filename';
 import { FixedPropertyTable } from './fixed-property-table';
+import { Flow } from './flow';
 import { Folder } from './folder';
 import { FolderShortcut } from './folder-shortcut';
 import { Frontends } from './frontends';
@@ -124,6 +125,7 @@ export const Icon = {
   Edit,
   EyeClosed,
   EyeOpen,
+  Flow,
   Folder,
   FolderShortcut,
   Frontends,

package/src/rich-text-editor/rich-text-editor.tsx

@@ -142,7 +142,7 @@ function RichTextEditorWithoutContext({
         actionsMenuAppend={actionsMenuAppend}
       />
       {slotPreContent}
-      <div className={`c-rte-editor-container ${disabled ? 'disabled' : ''}`}>
+      <div className={`c-rte-editor-container ${disabled ? 'disabled' : ''}`} data-testid="rich-text-editor">
         {maxLength != null ? <MaxLengthPlugin maxLength={maxLength} /> : null}
         {!autoFocus ? null : <AutoFocusPlugin />}
         <ClearEditorPlugin />

package/src/toast/toast.tsx

@@ -44,7 +44,7 @@ export const toast = ({ title, message, type = 'success', timeout = 6000 }: Toas
   sonnerToast.custom(
     id => (
       <div
-        data-testid="toast-content"
+        data-testid={`toast-${type}`}
         className={cx(toastStyles({ type }), withMessage ? 'c-toast-with-message' : 'c-toast-title-only')}
       >
         <div>{<ToastIcon width={26} height={26} />}</div>