@crystallize/design-system 1.24.5 → 1.24.7

package/dist/index.mjs

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

package/dist/{rich-text-editor-ZJS3XSIV.mjs → rich-text-editor-BSPSXJSK.mjs}

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-7K3KQDTQ.mjs";
+} from "./chunk-BNSEEMOM.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/rich-text-editor/rich-text-editor.tsx
@@ -160,7 +160,7 @@ import { $createTableCellNode, $createTableNode, $createTableRowNode } from "@le
 function parseInitialState({ richText }) {
   let richTextArray = Array.isArray(richText) ? richText : [richText];
   richTextArray = richTextArray.map((rootNode) => {
-    if (!rootNode.kind || rootNode.kind === "inline") {
+    if (!rootNode?.kind || rootNode.kind === "inline") {
       return {
         type: "paragraph",
         kind: "block",
@@ -180,7 +180,7 @@ function composeInitialState({ richText }) {
       crystallizeContentNode,
       lexicalParent
     }) {
-      const { textContent, kind, type, children, metadata } = crystallizeContentNode;
+      const { textContent, kind, type, children, metadata } = crystallizeContentNode ?? {};
       let lexicalNode = null;
       let insertedTextContent = false;
       const customTextFormat = getLexicalTextFormat(crystallizeContentNode);
@@ -275,10 +275,14 @@ function composeInitialState({ richText }) {
             );
             break;
           }
+          case "container":
           case "preformatted": {
             lexicalNode = lexicalParent;
             if (children) {
               children.forEach((n) => handleNode({ crystallizeContentNode: n, lexicalParent }));
+            } else if (typeof textContent === "string" && kind === "inline") {
+              const textNode = $createTextNode(textContent);
+              lexicalNode.append(textNode);
             }
             return;
           }
@@ -301,11 +305,11 @@ function composeInitialState({ richText }) {
                 if (textFormat && !lexicalNode.hasFormat(textFormat)) {
                   lexicalNode.toggleFormat(textFormat);
                 }
-                if (child.textContent) {
+                if (child?.textContent) {
                   lexicalNode.setTextContent(child.textContent);
                 }
               }
-              if ("children" in child) {
+              if (child && "children" in child) {
                 child.children?.forEach(handleInlineTextChild);
               }
             };
@@ -323,7 +327,7 @@ function composeInitialState({ richText }) {
   };
 }
 function getLexicalTextFormat(node) {
-  switch (node.type) {
+  switch (node?.type) {
     case "strong":
       return "bold";
     case "emphasized":
@@ -337,7 +341,7 @@ function getLexicalTextFormat(node) {
     case "deleted":
       return "strikethrough";
     case "code": {
-      if (node.kind === "inline") {
+      if (node?.kind === "inline") {
         return "code";
       }
       break;
@@ -467,8 +471,8 @@ function lexicalToCrystallizeRichText({
               const [first] = children;
               if ($isTextNode2(first)) {
                 const childTextNode = getTextChild(first);
-                if (!childTextNode.type) {
-                  crystallizeNode.textContent = childTextNode.textContent;
+                if (!childTextNode?.type) {
+                  crystallizeNode.textContent = childTextNode?.textContent;
                   onlyChildIsPureTextContent = true;
                 }
               }
@@ -520,14 +524,9 @@ function getTextChild(n) {
           kind: "inline",
           type
         };
-      } else {
-        currentChild.children = [
-          {
-            kind: "inline",
-            type
-          }
-        ];
-        currentChild = currentChild.children[0];
+      } else if (!!currentChild) {
+        currentChild.children = [{ kind: "inline", type }];
+        currentChild = currentChild?.children[0];
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.24.5",
+  "version": "1.24.7",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -94,7 +94,7 @@
     "tailwindcss": "^3.3.5",
     "tsup": "^6.5.0",
     "typescript": "4.9.4",
-    "vite": "4.3.4",
+    "vite": "5.2.8",
     "vitest": "0.30.1",
     "tsconfig": "0.0.0"
   },

package/src/collapsible/collapsible.css

@@ -6,7 +6,7 @@
   @apply flex gap-2 items-center;
 
   &.arrow-right {
-    @apply flex-row-reverse justify-end;
+    @apply flex-row-reverse;
   }
 }
 

package/src/iconography/index.ts

@@ -57,6 +57,7 @@ import { LockClosed } from './lock-closed';
 import { LockOpen } from './lock-open';
 import { Magnifier } from './magnifier';
 import { Multilingual } from './multilingual';
+import { MultipleChoice } from './multiple-choice';
 import { Mushroom } from './mushroom';
 import { NailPolish } from './nail-polish';
 import { Numeric } from './numeric';
@@ -147,6 +148,7 @@ export const Icon = {
   LockClosed,
   LockOpen,
   Multilingual,
+  MultipleChoice,
   Magnifier,
   Mushroom,
   NailPolish,

package/src/iconography/multiple-choice.tsx

@@ -0,0 +1,57 @@
+import { forwardRef, SVGProps } from 'react';
+
+type MultipleChoiceProps = SVGProps<SVGSVGElement>;
+
+type MultipleChoiceRef = SVGSVGElement;
+
+export const MultipleChoice = forwardRef<MultipleChoiceRef, MultipleChoiceProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="currentColor" {...delegated}>
+      <g clipPath="url(#a)">
+        <path
+          fill="#528693"
+          fillRule="evenodd"
+          d="M18.933 15.77a.2.2 0 0 0 .005-.37l-.91-.382a.3.3 0 1 1 .232-.553l.91.381c.663.278.651 1.221-.018 1.483l-.914.358a.3.3 0 1 1-.219-.56l.915-.357ZM16.6 14.095a.3.3 0 0 1-.392.16l-1.82-.763a.3.3 0 1 1 .231-.553l1.82.763a.3.3 0 0 1 .161.393Zm-3.64-1.526a.3.3 0 0 1-.393.16l-.91-.38a1.7 1.7 0 0 0-1.314 0l-.91.38a.3.3 0 0 1-.232-.553l.91-.381a2.3 2.3 0 0 1 1.778 0l.91.381a.3.3 0 0 1 .16.393Zm3.62 4.444a.3.3 0 0 1-.17.389l-1.83.715a.3.3 0 1 1-.218-.559l1.829-.715a.3.3 0 0 1 .388.17ZM7.772 13.1a.3.3 0 0 1-.16.393l-1.82.762a.3.3 0 1 1-.233-.553l1.82-.763a.3.3 0 0 1 .393.16Zm5.15 5.344a.3.3 0 0 1-.17.389l-.915.357a2.3 2.3 0 0 1-1.676 0l-.914-.358a.3.3 0 1 1 .218-.558l.915.357a1.7 1.7 0 0 0 1.238 0l.915-.357a.3.3 0 0 1 .388.17Zm-5.115-.497a.3.3 0 0 1-.389.17l-1.828-.715a.3.3 0 1 1 .218-.559l1.829.715a.3.3 0 0 1 .17.39Zm-3.675-3.322a.3.3 0 0 1-.16.393l-.911.381a.2.2 0 0 0 .004.371l.915.358a.3.3 0 0 1-.219.559l-.914-.358a.8.8 0 0 1-.018-1.483l.91-.381a.3.3 0 0 1 .393.16Z"
+          clipRule="evenodd"
+        />
+        <path
+          fill="#BFF6F8"
+          d="M10.227 8.842a2 2 0 0 1 1.546 0l7.778 3.26a.5.5 0 0 1-.011.926l-7.811 3.056a2 2 0 0 1-1.458 0l-7.81-3.056a.5.5 0 0 1-.012-.927l7.778-3.26Z"
+        />
+        <path
+          fill="#528693"
+          fillRule="evenodd"
+          d="m19.091 12.56-7.55-3.165a1.4 1.4 0 0 0-1.082 0l-7.55 3.164 7.581 2.966a1.4 1.4 0 0 0 1.02 0l7.581-2.966Zm-7.318-3.718a2 2 0 0 0-1.546 0l-7.778 3.26a.5.5 0 0 0 .011.926l7.811 3.056a2 2 0 0 0 1.458 0l7.81-3.056a.5.5 0 0 0 .012-.927l-7.778-3.26Z"
+          clipRule="evenodd"
+        />
+        <path
+          fill="#fff"
+          d="M10.227 5.685a2 2 0 0 1 1.546 0l7.778 3.26a.5.5 0 0 1-.011.926l-7.811 3.056a2 2 0 0 1-1.458 0L2.461 9.87a.5.5 0 0 1-.012-.927l7.778-3.26Z"
+        />
+        <path
+          fill="#528693"
+          fillRule="evenodd"
+          d="m19.091 9.402-7.55-3.164a1.4 1.4 0 0 0-1.082 0l-7.55 3.164 7.581 2.966a1.4 1.4 0 0 0 1.02 0l7.581-2.966Zm-7.318-3.717a2 2 0 0 0-1.546 0l-7.778 3.26a.5.5 0 0 0 .011.926l7.811 3.056a2 2 0 0 0 1.458 0l7.81-3.056a.5.5 0 0 0 .012-.927l-7.778-3.26Z"
+          clipRule="evenodd"
+        />
+        <path
+          fill="#BFF6F8"
+          d="M10.227 2.528a2 2 0 0 1 1.546 0l7.778 3.26a.5.5 0 0 1-.011.926L11.729 9.77a2 2 0 0 1-1.458 0l-7.81-3.056a.5.5 0 0 1-.012-.927l7.778-3.26Z"
+        />
+        <path
+          fill="#528693"
+          fillRule="evenodd"
+          d="m19.091 6.245-7.55-3.164a1.4 1.4 0 0 0-1.082 0l-7.55 3.164 7.581 2.966a1.4 1.4 0 0 0 1.02 0l7.581-2.966Zm-7.318-3.717a2 2 0 0 0-1.546 0l-7.778 3.26a.5.5 0 0 0 .011.926l7.811 3.056a2 2 0 0 0 1.458 0l7.81-3.056a.5.5 0 0 0 .012-.927l-7.778-3.26Z"
+          clipRule="evenodd"
+        />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path fill="#fff" d="M0 0h22v22H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+});
+
+MultipleChoice.displayName = 'MultipleChoiceIcon';

package/src/rich-text-editor/model/crystallize-to-lexical.ts

@@ -28,7 +28,7 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
       crystallizeContentNode: CrystallizeRichTextNode;
       lexicalParent: LexicalNode;
     }) {
-      const { textContent, kind, type, children, metadata } = crystallizeContentNode;
+      const { textContent, kind, type, children, metadata } = crystallizeContentNode ?? {};
       let lexicalNode: LexicalNode | null = null;
 
       let insertedTextContent = false;
@@ -76,7 +76,6 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
             lexicalNode = $createCodeNode(language);
             lexicalNode.append($createCodeHighlightNode(textContent ?? ''));
             insertedTextContent = true;
-
             break;
           }
           case 'ordered-list': {
@@ -137,13 +136,15 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
             );
             break;
           }
+          // We do not deal with these tags. They should just be skipped.
+          case 'container':
           case 'preformatted': {
-            /**
-             * We do not deal with this tag. It should just be skipped.
-             */
             lexicalNode = lexicalParent;
             if (children) {
               children.forEach(n => handleNode({ crystallizeContentNode: n, lexicalParent }));
+            } else if (typeof textContent === 'string' && kind === 'inline') {
+              const textNode = $createTextNode(textContent);
+              lexicalNode.append(textNode);
             }
             return;
           }
@@ -175,12 +176,12 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
                 }
 
                 // Text content will be stored at the deepest nested child
-                if (child.textContent) {
+                if (child?.textContent) {
                   lexicalNode.setTextContent(child.textContent);
                 }
               }
 
-              if ('children' in child) {
+              if (child && 'children' in child) {
                 child.children?.forEach(handleInlineTextChild);
               }
             };
@@ -202,7 +203,7 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
 }
 
 function getLexicalTextFormat(node: CrystallizeRichTextNode): null | TextFormatType {
-  switch (node.type) {
+  switch (node?.type) {
     case 'strong':
       return 'bold';
     case 'emphasized':
@@ -216,7 +217,7 @@ function getLexicalTextFormat(node: CrystallizeRichTextNode): null | TextFormatT
     case 'deleted':
       return 'strikethrough';
     case 'code': {
-      if (node.kind === 'inline') {
+      if (node?.kind === 'inline') {
         return 'code';
       }
       break;

package/src/rich-text-editor/model/lexical-to-crystallize.ts

@@ -39,7 +39,7 @@ export function lexicalToCrystallizeRichText({
   editor?: LexicalEditor;
   editorState: EditorState;
 }): CrystallizeRichText {
-  const crystallizeRichText: CrystallizeRichTextNode['children'] = [];
+  const crystallizeRichText: NonNullable<CrystallizeRichTextNode>['children'] | undefined = [];
 
   editorState.read(() => {
     handleNode($getRoot(), crystallizeRichText);
@@ -157,7 +157,7 @@ export function lexicalToCrystallizeRichText({
          */
         let onlyChildIsPureTextContent = false;
 
-        const children = lexicalNode.getChildren();
+        const children = lexicalNode.getChildren() as ElementNode[];
         if (children?.length > 0) {
           let parentChildrenToUse = parentChildren;
           if (crystallizeNode) {
@@ -165,8 +165,8 @@ export function lexicalToCrystallizeRichText({
               const [first] = children;
               if ($isTextNode(first)) {
                 const childTextNode = getTextChild(first);
-                if (!childTextNode.type) {
-                  crystallizeNode.textContent = childTextNode.textContent;
+                if (!childTextNode?.type) {
+                  crystallizeNode.textContent = childTextNode?.textContent;
                   onlyChildIsPureTextContent = true;
                 }
               }
@@ -228,15 +228,9 @@ function getTextChild(n: TextNode): CrystallizeRichTextNode {
           kind: 'inline',
           type,
         } as CrystallizeRichTextNode;
-      } else {
-        currentChild.children = [
-          {
-            kind: 'inline',
-            type,
-          },
-        ];
-
-        currentChild = currentChild.children[0];
+      } else if (!!currentChild) {
+        currentChild.children = [{ kind: 'inline', type }];
+        currentChild = currentChild?.children[0];
       }
     }
   }

package/src/rich-text-editor/model/parse-initial-state.ts

@@ -5,7 +5,7 @@ export function parseInitialState({ richText }: { richText: CrystallizeRichText
 
   // Ensure all root items are block elements
   richTextArray = richTextArray.map(rootNode => {
-    if (!rootNode.kind || rootNode.kind === 'inline') {
+    if (!rootNode?.kind || rootNode.kind === 'inline') {
       return {
         type: 'paragraph',
         kind: 'block',

package/src/rich-text-editor/types/crystallize-rich-text-types/index.ts

@@ -54,14 +54,16 @@ export type CrystallizeRichTextInlineFormattedNodes = {
   type: 'deleted' | 'strong' | 'subscripted' | 'superscripted' | 'underlined' | 'emphasized' | 'code' | 'highlight';
 };
 
-export type CrystallizeRichTextNode = CrystallizeRichTextNodeBase &
-  (
-    | CrystallizeRichTextParagraphNode
-    | CrystallizeRichTextHeadingNodes
-    | CrystallizeRichTextCodeNodes
-    | CrystallizeRichTextGenericNode
-    | CrystallizeRichTextLinkNode
-    | CrystallizeRichTextTableNodes
-    | CrystallizeRichTextHorizontalLineNode
-    | CrystallizeRichTextInlineFormattedNodes
-  );
+export type CrystallizeRichTextNode =
+  | (CrystallizeRichTextNodeBase &
+      (
+        | CrystallizeRichTextParagraphNode
+        | CrystallizeRichTextHeadingNodes
+        | CrystallizeRichTextCodeNodes
+        | CrystallizeRichTextGenericNode
+        | CrystallizeRichTextLinkNode
+        | CrystallizeRichTextTableNodes
+        | CrystallizeRichTextHorizontalLineNode
+        | CrystallizeRichTextInlineFormattedNodes
+      ))
+  | null;

package/src/tag/tag.css

@@ -36,10 +36,16 @@
 
 .c-tag-xxs {
   @apply h-5 px-2 text-xs;
+  .c-tag__prepend {
+    @apply -ml-1;
+  }
 }
 
 .c-tag-xs {
   @apply h-6 px-2 text-xs;
+  .c-tag__prepend {
+    @apply -ml-1;
+  }
 }
 
 .c-tag-sm {