@crystallize/design-system 1.24.44 → 1.24.46

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-ZT2DX3UW.mjs";
+} from "./chunk-6DIAYHKQ.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
@@ -488,7 +488,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-NIDZLNDY.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-QGMRYDKQ.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx15(Suspense, {
     fallback: null,

package/dist/{rich-text-editor-NIDZLNDY.mjs → rich-text-editor-QGMRYDKQ.mjs}

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-ZT2DX3UW.mjs";
+} from "./chunk-6DIAYHKQ.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.44",
+  "version": "1.24.46",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/iconography/eye-closed.tsx

@@ -1,5 +1,7 @@
 import { forwardRef, SVGProps } from 'react';
 
+import { stroke } from './variables';
+
 type EyeClosedProps = SVGProps<SVGSVGElement>;
 
 type EyeClosedRef = SVGSVGElement;
@@ -8,7 +10,7 @@ export const EyeClosed = forwardRef<EyeClosedRef, EyeClosedProps>((delegated, re
   return (
     <svg ref={ref} width="17" height="17" fill="none" viewBox="0 0 17 17" {...delegated}>
       <path
-        fill="#528693"
+        fill={stroke}
         d="M12.772 7.303c.515-.48.77-.882.795-.924a.294.294 0 1 0-.502-.308c-.014.024-1.492 2.367-4.89 2.367-3.385 0-4.832-2.27-4.892-2.367a.294.294 0 0 0-.501.308c.025.042.28.445.794.924l-.966.975a.21.21 0 0 0 .298.296l.987-.995c.2.163.43.327.689.485l-.698 1.167a.21.21 0 1 0 .36.216L4.95 8.27c.22.115.456.222.711.317L5.25 9.894a.21.21 0 0 0 .4.127l.41-1.298c.242.074.5.137.772.186l-.202 1.364a.21.21 0 0 0 .416.062l.201-1.364c.23.028.469.045.717.051v1.372a.21.21 0 0 0 .42 0V9.022a7.63 7.63 0 0 0 .733-.053l.277 1.377a.21.21 0 1 0 .412-.084l-.273-1.356c.253-.047.494-.105.722-.173l.445 1.293a.21.21 0 1 0 .397-.137L10.654 8.6c.268-.099.516-.21.745-.33l.703 1.177a.21.21 0 1 0 .36-.216l-.697-1.167c.259-.158.488-.322.689-.485l.986.995a.21.21 0 0 0 .298.002.21.21 0 0 0 0-.298l-.966-.975Z"
       />
     </svg>

package/src/iconography/eye-open.tsx

@@ -1,5 +1,7 @@
 import { forwardRef, SVGProps } from 'react';
 
+import { fill, stroke } from './variables';
+
 type EyeOpenProps = SVGProps<SVGSVGElement>;
 
 type EyeOpenRef = SVGSVGElement;
@@ -9,23 +11,23 @@ export const EyeOpen = forwardRef<EyeOpenRef, EyeOpenProps>((delegated, ref) =>
     <svg ref={ref} width="17" height="17" fill="none" viewBox="0 0 17 17" {...delegated}>
       <g clipPath="url(#eye-open)">
         <path
-          fill="#BFF6F8"
+          fill={fill}
           d="M8.15 4.132c2.607-.007 5.953 2.523 7.313 3.649a.674.674 0 0 1-.005 1.052c-1.366 1.108-4.714 3.59-7.308 3.583-2.577-.007-5.907-2.478-7.268-3.583a.675.675 0 0 1-.005-1.052C2.232 6.658 5.56 4.139 8.15 4.13Z"
         />
         <path
-          fill="#528693"
+          fill={stroke}
           fillRule="evenodd"
-          d="M12.052 5.914c-1.317-.764-2.72-1.343-3.901-1.34-1.174.003-2.568.583-3.878 1.346-1.296.754-2.446 1.647-3.114 2.2-.12.1-.12.271.002.37.67.545 1.822 1.422 3.118 2.163 1.31.748 2.703 1.318 3.872 1.321 1.177.003 2.578-.566 3.895-1.316 1.303-.74 2.46-1.622 3.133-2.168a.233.233 0 0 0 .002-.369c-.67-.555-1.826-1.452-3.129-2.207Zm3.41 1.867c-1.359-1.126-4.705-3.656-7.312-3.65-2.59.008-5.918 2.527-7.273 3.65a.675.675 0 0 0 .005 1.052c1.36 1.105 4.691 3.576 7.268 3.583 2.594.007 5.942-2.475 7.308-3.583a.674.674 0 0 0 .005-1.052Z"
           clipRule="evenodd"
+          d="M12.052 5.914c-1.317-.764-2.72-1.343-3.901-1.34-1.174.003-2.568.583-3.878 1.346-1.296.754-2.446 1.647-3.114 2.2-.12.1-.12.271.002.37.67.545 1.822 1.422 3.118 2.163 1.31.748 2.703 1.318 3.872 1.321 1.177.003 2.578-.566 3.895-1.316 1.303-.74 2.46-1.622 3.133-2.168a.233.233 0 0 0 .002-.369c-.67-.555-1.826-1.452-3.129-2.207Zm3.41 1.867c-1.359-1.126-4.705-3.656-7.312-3.65-2.59.008-5.918 2.527-7.273 3.65a.675.675 0 0 0 .005 1.052c1.36 1.105 4.691 3.576 7.268 3.583 2.594.007 5.942-2.475 7.308-3.583a.674.674 0 0 0 .005-1.052Z"
         />
         <path fill="#fff" d="M11.678 8.273a3.508 3.508 0 1 1-7.016 0 3.508 3.508 0 0 1 7.016 0Z" />
         <path
-          fill="#528693"
+          fill={stroke}
           fillRule="evenodd"
-          d="M12.12 8.273a3.95 3.95 0 1 1-7.9 0 3.95 3.95 0 0 1 7.9 0Zm-3.95 3.508a3.508 3.508 0 1 0 0-7.016 3.508 3.508 0 0 0 0 7.016Z"
           clipRule="evenodd"
+          d="M12.12 8.273a3.95 3.95 0 1 1-7.9 0 3.95 3.95 0 0 1 7.9 0Zm-3.95 3.508a3.508 3.508 0 1 0 0-7.016 3.508 3.508 0 0 0 0 7.016Z"
         />
-        <path fill="#528693" d="M8.168 6.445a1.829 1.829 0 1 0 0 3.657 1.829 1.829 0 0 0 0-3.657Z" />
+        <path fill={stroke} d="M8.168 6.445a1.829 1.829 0 1 0 0 3.657 1.829 1.829 0 0 0 0-3.657Z" />
       </g>
       <defs>
         <clipPath id="eye-open">

package/src/iconography/index.ts

@@ -116,6 +116,10 @@ import { Target } from './target';
 import { Topics } from './topics';
 import { TopicsBranch } from './topics-branch';
 import { TopicsLeaf } from './topics-leaf';
+import { TransitionIn } from './transition-in';
+import { TransitionInDisabled } from './transition-in-disabled';
+import { TransitionOut } from './transition-out';
+import { TransitionOutDisabled } from './transition-out-disabled';
 import { Unpublish } from './unpublish';
 import { Usage } from './usage';
 import { UsageMeter } from './usage-meter';
@@ -257,6 +261,10 @@ export const Icon = {
   Topics,
   TopicsBranch,
   TopicsLeaf,
+  TransitionIn,
+  TransitionInDisabled,
+  TransitionOut,
+  TransitionOutDisabled,
   UsageMeter,
   Unpublish,
   User,

package/src/iconography/transition-in-disabled.tsx

@@ -0,0 +1,22 @@
+import { forwardRef, SVGProps } from 'react';
+
+import { stroke } from './variables';
+
+type TransitionInDisabledProps = SVGProps<SVGSVGElement>;
+
+type TransitionInDisabledRef = SVGSVGElement;
+
+export const TransitionInDisabled = forwardRef<TransitionInDisabledRef, TransitionInDisabledProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <rect width="7" height="1" x="12.95" y="18.77" fill={stroke} rx=".5" transform="rotate(-135 12.95 18.77)" />
+      <rect width="7" height="1" x="8" y="18.063" fill={stroke} rx=".5" transform="rotate(-45 8 18.063)" />
+      <path
+        fill={stroke}
+        d="M2.702 10.268h1.06a.3.3 0 0 0 0-.6h-1.06c-.27 0-.401-.176-.402-.296v-.944a.3.3 0 0 0-.6 0v.944c0 .539.496.896 1.002.896Zm0-4.968h1.06a.3.3 0 0 0 0-.6h-1.06c-.506 0-1.002.357-1.002.896v.944a.3.3 0 0 0 .6 0v-.944c0-.12.132-.296.402-.296Zm3.18 4.968h2.121a.3.3 0 1 0 0-.6h-2.12a.3.3 0 0 0 0 .6Zm0-4.968h2.121a.3.3 0 1 0 0-.6h-2.12a.3.3 0 0 0 0 .6Zm4.242 4.968h2.121a.3.3 0 0 0 0-.6h-2.12a.3.3 0 1 0 0 .6Zm0-4.968h2.121a.3.3 0 0 0 0-.6h-2.12a.3.3 0 1 0 0 .6Zm4.242 4.968h2.12a.3.3 0 1 0 0-.6h-2.12a.3.3 0 0 0 0 .6Zm0-4.968h2.12a.3.3 0 0 0 0-.6h-2.12a.3.3 0 0 0 0 .6Zm4.242 4.968h1.06c.506 0 1.001-.357 1.001-.896v-.944a.3.3 0 1 0-.6 0v.944c0 .12-.132.296-.4.296h-1.061a.3.3 0 1 0 0 .6Zm0-4.968h1.06c.27 0 .402.176.402.296v.944a.3.3 0 1 0 .6 0v-.944c0-.539-.496-.896-1.002-.896h-1.06a.3.3 0 1 0 0 .6Z"
+      />
+    </svg>
+  );
+});
+
+TransitionInDisabled.displayName = 'TransitionInDisabledIcon';

package/src/iconography/transition-in.tsx

@@ -0,0 +1,30 @@
+import { forwardRef, SVGProps } from 'react';
+
+import { fill, stroke } from './variables';
+
+type TransitionInProps = SVGProps<SVGSVGElement>;
+
+type TransitionInRef = SVGSVGElement;
+
+export const TransitionIn = forwardRef<TransitionInRef, TransitionInProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        fill={fill}
+        d="M2.565 3.85c-.387-.001-.702.265-.703.594l-.01 3.776c0 .329.313.597.7.598l16.967.044c.387 0 .702-.265.703-.595l.01-3.775c0-.33-.313-.597-.7-.598L2.565 3.85Z"
+      />
+      <path
+        fill={stroke}
+        d="M2.553 8.473c-.252 0-.357-.164-.357-.253l.01-3.775c0-.088.107-.252.358-.251l16.966.044c.252 0 .357.165.357.253l-.01 3.775c0 .089-.106.252-.358.252L2.553 8.473Zm16.964.733c.523.001 1.047-.368 1.049-.938l.01-3.775c.001-.57-.521-.942-1.044-.943L2.566 3.505c-.523 0-1.047.369-1.048.938l-.01 3.775c-.002.57.52.942 1.044.944l16.965.044Z"
+      />
+      <path
+        fill={stroke}
+        fillRule="evenodd"
+        d="m13.888 16.014-2.424 2.424a.381.381 0 0 1-.539 0l-2.424-2.424a.38.38 0 1 1 .539-.539l1.774 1.774.033-5.868a.381.381 0 0 1 .762 0l-.033 5.868 1.774-1.774a.38.38 0 1 1 .538.539Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+});
+
+TransitionIn.displayName = 'TransitionInIcon';

package/src/iconography/transition-out-disabled.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, SVGProps } from 'react';
+
+import { stroke } from './variables';
+
+type TransitionOutDisabledProps = SVGProps<SVGSVGElement>;
+
+type TransitionOutDisabledRef = SVGSVGElement;
+
+export const TransitionOutDisabled = forwardRef<TransitionOutDisabledRef, TransitionOutDisabledProps>(
+  (delegated, ref) => {
+    return (
+      <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+        <path
+          fill={stroke}
+          d="M2.475 18.428h1.06a.3.3 0 0 0 0-.6h-1.06c-.27 0-.401-.176-.401-.296v-.944a.3.3 0 0 0-.601 0v.944c0 .54.497.896 1.002.896Zm0-4.968h1.06a.3.3 0 0 0 0-.6h-1.06c-.505 0-1.002.357-1.002.896v.944a.3.3 0 0 0 .6 0v-.944c0-.12.133-.296.402-.296Zm3.18 4.968h2.122a.3.3 0 1 0 0-.6H5.656a.3.3 0 0 0 0 .6Zm0-4.968h2.122a.3.3 0 1 0 0-.6H5.656a.3.3 0 0 0 0 .6Zm4.243 4.968h2.12a.3.3 0 0 0 0-.6h-2.12a.3.3 0 1 0 0 .6Zm0-4.968h2.12a.3.3 0 0 0 0-.6h-2.12a.3.3 0 1 0 0 .6Zm4.241 4.968h2.121a.3.3 0 1 0 0-.6H14.14a.3.3 0 0 0 0 .6Zm0-4.968h2.121a.3.3 0 1 0 0-.6H14.14a.3.3 0 0 0 0 .6Zm4.242 4.968h1.06c.506 0 1.002-.357 1.002-.896v-.944a.3.3 0 1 0-.6 0v.944c0 .12-.132.296-.401.296h-1.06a.3.3 0 1 0 0 .6Zm0-4.968h1.06c.27 0 .402.177.402.296v.944a.3.3 0 0 0 .6 0v-.944c0-.538-.496-.895-1.001-.895h-1.06a.3.3 0 1 0 0 .6Z"
+        />
+        <rect width="7" height="1" x="8.707" y="4" fill={stroke} rx=".5" transform="rotate(45 8.707 4)" />
+        <rect width="7" height="1" x="13.657" y="4.707" fill={stroke} rx=".5" transform="rotate(135 13.657 4.707)" />
+      </svg>
+    );
+  },
+);
+
+TransitionOutDisabled.displayName = 'TransitionOutDisabledIcon';

package/src/iconography/transition-out.tsx

@@ -0,0 +1,30 @@
+import { forwardRef, SVGProps } from 'react';
+
+import { fill, stroke } from './variables';
+
+type TransitionOutProps = SVGProps<SVGSVGElement>;
+
+type TransitionOutRef = SVGSVGElement;
+
+export const TransitionOut = forwardRef<TransitionOutRef, TransitionOutProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        fill={fill}
+        d="M19.44 18.136c.387 0 .701-.267.701-.596l.004-3.775c0-.33-.314-.597-.701-.597l-16.967-.015c-.387 0-.702.266-.702.595l-.003 3.776c0 .33.313.596.7.597l16.967.015Z"
+      />
+      <path
+        fill={stroke}
+        d="M19.443 13.512c.252 0 .357.164.357.252l-.003 3.776c0 .088-.106.252-.358.252l-16.966-.015c-.252 0-.357-.164-.357-.253l.003-3.775c0-.089.106-.252.358-.252l16.966.015Zm-16.965-.703c-.523 0-1.047.37-1.047.94l-.003 3.774c0 .57.522.942 1.045.942l16.966.015c.523 0 1.046-.37 1.046-.94l.004-3.775c0-.57-.522-.941-1.045-.942L2.478 12.81Z"
+      />
+      <path
+        fill={stroke}
+        fillRule="evenodd"
+        d="m8.112 5.986 2.424-2.424a.38.38 0 0 1 .539 0l2.424 2.424a.381.381 0 0 1-.539.539L11.186 4.75l-.033 5.868a.381.381 0 0 1-.762 0l.033-5.868L8.65 6.525a.381.381 0 0 1-.538-.539Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+});
+
+TransitionOut.displayName = 'TransitionOutIcon';