@crystallize/design-system 1.24.43 → 1.24.45

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-ZT2DX3UW.mjs";
+} from "./chunk-ASHS3SWM.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-FTDWUJL3.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-LL7UCSDS.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx15(Suspense, {
     fallback: null,

package/dist/{rich-text-editor-FTDWUJL3.mjs → rich-text-editor-LL7UCSDS.mjs}

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-ZT2DX3UW.mjs";
+} from "./chunk-ASHS3SWM.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/rich-text-editor/rich-text-editor.tsx
@@ -675,11 +675,12 @@ var PRETTIER_PARSER_MODULES = {
 };
 async function loadPrettierParserByLang(lang) {
   const dynamicImport = PRETTIER_PARSER_MODULES[lang];
-  return await dynamicImport();
+  const parser = await dynamicImport();
+  return parser?.default || parser;
 }
 async function loadPrettierFormat() {
-  const { format } = await import("./standalone-AR2ENVE7.mjs");
-  return format;
+  const prettier = await import("./standalone-AR2ENVE7.mjs");
+  return prettier?.default?.format || prettier?.format;
 }
 var PRETTIER_OPTIONS_BY_LANG = {
   css: {
@@ -712,6 +713,19 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
   const tr = useTr();
   async function handleClick() {
     const codeDOMNode = getCodeDOMNode();
+    if (!codeDOMNode) {
+      return;
+    }
+    let content = "";
+    editor.update(() => {
+      const codeNode = $getNearestNodeFromDOMNode2(codeDOMNode);
+      if ($isCodeNode3(codeNode)) {
+        content = codeNode.getTextContent();
+      }
+    });
+    if (content === "") {
+      return;
+    }
     try {
       const format = await loadPrettierFormat();
       const options = getPrettierOptions(lang);
@@ -719,16 +733,14 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
       if (!codeDOMNode) {
         return;
       }
+      const parsed = await format(content, options);
+      const formattedCode = parsed.replace(/[\r\n]+$/, "");
       editor.update(() => {
         const codeNode = $getNearestNodeFromDOMNode2(codeDOMNode);
         if ($isCodeNode3(codeNode)) {
-          const content = codeNode.getTextContent();
-          let parsed = "";
-          parsed = format(content, options);
-          parsed = parsed.replace(/[\r\n]+$/, "");
-          if (parsed !== "") {
+          if (formattedCode !== "") {
             const selection = codeNode.select(0);
-            selection.insertText(parsed);
+            selection.insertText(formattedCode);
             setSyntaxError("");
             setTipsVisible(false);
           }

package/package.json

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

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';

package/src/rich-text-editor/plugins/CodeActionMenuPlugin/components/PrettierButton/index.tsx

@@ -30,12 +30,13 @@ type LanguagesType = keyof typeof PRETTIER_PARSER_MODULES;
 
 async function loadPrettierParserByLang(lang: string) {
   const dynamicImport = PRETTIER_PARSER_MODULES[lang as LanguagesType];
-  return await dynamicImport();
+  const parser = await dynamicImport();
+  return parser?.default || parser;
 }
 
 async function loadPrettierFormat() {
-  const { format } = await import('prettier/standalone');
-  return format;
+  const prettier = await import('prettier/standalone');
+  return prettier?.default?.format || prettier?.format;
 }
 
 const PRETTIER_OPTIONS_BY_LANG: Record<string, Options> = {
@@ -75,6 +76,20 @@ export function PrettierButton({ lang, editor, getCodeDOMNode }: Props) {
 
   async function handleClick(): Promise<void> {
     const codeDOMNode = getCodeDOMNode();
+    if (!codeDOMNode) {
+      return;
+    }
+
+    let content = '';
+    editor.update(() => {
+      const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);
+      if ($isCodeNode(codeNode)) {
+        content = codeNode.getTextContent();
+      }
+    });
+    if (content === '') {
+      return;
+    }
 
     try {
       const format = await loadPrettierFormat();
@@ -85,26 +100,21 @@ export function PrettierButton({ lang, editor, getCodeDOMNode }: Props) {
         return;
       }
 
+      const parsed = await format(content, options);
+      /**
+       * Remove EOF from prettier output. This is useful when
+       * using prettier on files, but becomes weird when the code
+       * is embedded within a larger portion of text (like we do)
+       */
+      const formattedCode = parsed.replace(/[\r\n]+$/, '');
+
       editor.update(() => {
         const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);
 
         if ($isCodeNode(codeNode)) {
-          const content = codeNode.getTextContent();
-
-          let parsed = '';
-
-          parsed = format(content, options);
-
-          /**
-           * Remove EOF from prettier output. This is useful when
-           * using prettier on files, but becomes weird when the code
-           * is embedded within a larger portion of text (like we do)
-           */
-          parsed = parsed.replace(/[\r\n]+$/, '');
-
-          if (parsed !== '') {
+          if (formattedCode !== '') {
             const selection = codeNode.select(0);
-            selection.insertText(parsed);
+            selection.insertText(formattedCode);
             setSyntaxError('');
             setTipsVisible(false);
           }