@crystallize/design-system 1.24.25 → 1.24.27

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-DDFZZP2K.mjs";
+} from "./chunk-TMB3VHAI.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
@@ -26,7 +26,7 @@ import { jsx } from "react/jsx-runtime";
 var cardStyles = cva("c-card", {
   variants: {
     variant: {
-      default: "c-card",
+      default: "",
       elevate: "c-card-elevate"
     }
   },
@@ -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-7VOY4KHA.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-XIO7AL7L.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx15(Suspense, {
     fallback: null,

package/dist/{rich-text-editor-XW66E4QG.css → rich-text-editor-RUYX7OQE.css}

@@ -889,8 +889,7 @@
   align-items: center;
   justify-content: center;
 }
-.c-btn,
-.c-btn .c-btn__loading-spinner {
+.c-btn {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
 }
@@ -906,14 +905,15 @@
 .c-btn-loading {
   position: relative;
 }
-.c-btn-loading .c-btn__prepend,
-.c-btn-loading .c-btn__append {
+.c-btn-loading .c-btn__prepend {
   opacity: 0;
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 .c-btn-elevate {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
   --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
   --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
   box-shadow:
@@ -921,11 +921,6 @@
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.c-btn-elevate,
-.c-btn-elevate .c-btn__loading-spinner {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
-}
 .c-btn-elevate:not(:disabled):hover {
   outline-color: rgb(var(--c-color-gray-100-800) / 1);
 }
@@ -933,8 +928,7 @@
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
 }
-.c-btn-action,
-.c-btn-action .c-btn__loading-spinner {
+.c-btn-action {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-cyan-100-800) / var(--tw-bg-opacity));
 }
@@ -1278,7 +1272,7 @@
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-green-600-300) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
 }
 .c-tooltip-info .c-tooltip-arrow {
   fill: #fff;
@@ -1458,6 +1452,11 @@
   --tw-scale-y: -1;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.c-dropdown-menu-content [role=separator] {
+  height: 1px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
+}
 .c-dropdown-menu-label {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));

package/dist/{rich-text-editor-7VOY4KHA.mjs → rich-text-editor-XIO7AL7L.mjs}

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-DDFZZP2K.mjs";
+} from "./chunk-TMB3VHAI.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/rich-text-editor/rich-text-editor.tsx
@@ -269,13 +269,12 @@ function composeInitialState({ richText }) {
             lexicalNode = $createTableRowNode();
             break;
           }
-          case "table-cell":
+          case "table-cell": {
+            lexicalNode = $createTableCellNode(0, void 0);
+            break;
+          }
           case "table-head-cell": {
-            const colSpan = void 0;
-            lexicalNode = $createTableCellNode(
-              0,
-              colSpan
-            );
+            lexicalNode = $createTableCellNode(2, void 0);
             break;
           }
           case "container":

package/package.json

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

package/src/button/button.css

@@ -28,10 +28,7 @@
 }
 
 .c-btn {
-  &,
-  .c-btn__loading-spinner {
-    @apply bg-purple-50-900;
-  }
+  @apply bg-purple-50-900;
 
   &:not(:disabled):hover {
     @apply outline outline-1 outline-purple-200-700;
@@ -45,19 +42,13 @@
 .c-btn-loading {
   @apply relative;
 
-  .c-btn__prepend,
-  .c-btn__append {
+  .c-btn__prepend {
     @apply opacity-0 transition-opacity;
   }
 }
 
 .c-btn-elevate {
-  @apply shadow;
-
-  &,
-  .c-btn__loading-spinner {
-    @apply bg-elevate;
-  }
+  @apply bg-elevate shadow;
 
   &:not(:disabled):hover {
     @apply outline-gray-100-800;
@@ -69,10 +60,7 @@
 }
 
 .c-btn-action {
-  &,
-  .c-btn__loading-spinner {
-    @apply bg-cyan-100-800;
-  }
+  @apply bg-cyan-100-800;
 
   &:not(:disabled):hover {
     @apply outline outline-1 outline-cyan-300-600;

package/src/card/card.tsx

@@ -7,7 +7,7 @@ type CardStylesProps = VariantProps<typeof cardStyles>;
 const cardStyles = cva('c-card', {
   variants: {
     variant: {
-      default: 'c-card',
+      default: '',
       elevate: 'c-card-elevate',
     },
   },

package/src/dialog/confirm-dialog.tsx

@@ -22,6 +22,7 @@ export function ConfirmDialog({
   onPointerDownOutside,
   type,
   closable,
+  className,
 }: ConfirmDialogProps) {
   const cancelButton = (okCancel || displayCancel) && (
     <Button
@@ -54,6 +55,7 @@ export function ConfirmDialog({
         onPointerDownOutside={onPointerDownOutside}
         type={type}
         closable={closable}
+        className={className}
       >
         {title && <Dialog.Title>{title}</Dialog.Title>}
         {description && <Dialog.Description>{description}</Dialog.Description>}

package/src/dropdown-menu/dropdown-menu.css

@@ -21,6 +21,10 @@
   }
 }
 
+.c-dropdown-menu-content [role='separator'] {
+  @apply h-px bg-purple-100-800;
+}
+
 .c-dropdown-menu-label {
   @apply bg-elevate px-4 pb-1 pt-3 font-sans text-[11px] font-bold text-gray-500-400;
   @apply first:rounded-tl first:rounded-tr;
@@ -84,4 +88,4 @@
 
 .c-dialog ~ [data-radix-popper-content-wrapper] {
   z-index: calc(var(--dialog-z-index) + 1) !important;
-}
+}

package/src/iconography/cart.tsx

@@ -0,0 +1,30 @@
+import { forwardRef, SVGProps } from 'react';
+
+type CartProps = SVGProps<SVGSVGElement>;
+
+type CartRef = SVGSVGElement;
+
+export const Cart = forwardRef<CartRef, CartProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="23" viewBox="0 0 22 23" fill="currentColor" {...delegated}>
+      <path
+        fill="#BFF6F8"
+        stroke="#528693"
+        strokeWidth=".568"
+        d="M15.808 5.962H6.304c-.898 0-1.646.686-1.725 1.58L3.681 17.79a1.731 1.731 0 0 0 1.725 1.882h11.188a1.73 1.73 0 0 0 1.726-1.863L17.534 7.56a1.731 1.731 0 0 0-1.726-1.599Z"
+      />
+      <path
+        fill="#fff"
+        stroke="#528693"
+        strokeWidth=".568"
+        d="M10.99 4.04c.668 0 1.218.55 1.218 1.217V7.36a.83.83 0 1 0 1.66 0V5.257A2.884 2.884 0 0 0 10.99 2.38a2.884 2.884 0 0 0-2.877 2.877V7.36a.83.83 0 1 0 1.66 0V5.257c0-.668.55-1.217 1.217-1.217Z"
+      />
+      <path
+        fill="#528693"
+        d="M12.103 14.841a.822.822 0 0 0-.258-.614c-.17-.167-.456-.318-.86-.452-.564-.172-.975-.396-1.234-.67-.256-.278-.385-.63-.385-1.056 0-.433.126-.789.377-1.066.254-.278.602-.443 1.043-.496v-.869h.591v.873c.444.06.79.247 1.035.559.249.312.373.739.373 1.281h-.73c0-.373-.088-.669-.265-.888a.874.874 0 0 0-.718-.33c-.315 0-.556.082-.722.246-.167.162-.25.388-.25.678 0 .27.087.486.262.647.177.159.466.304.868.436.405.13.72.274.944.433.228.155.394.338.5.547.108.209.162.453.162.733 0 .447-.134.807-.404 1.08-.267.271-.643.433-1.126.483v.758h-.587v-.758c-.492-.045-.878-.22-1.158-.524-.278-.306-.417-.721-.417-1.245h.734c0 .368.096.65.29.849.193.198.466.297.82.297.347 0 .62-.083.817-.25.199-.166.298-.393.298-.682Z"
+      />
+    </svg>
+  );
+});
+
+Cart.displayName = 'CartIcon';

package/src/iconography/index.ts

@@ -9,6 +9,7 @@ import { BillingPayments } from './billing-payments';
 import { Bin } from './bin';
 import { Cancel } from './cancel';
 import { Caret } from './caret';
+import { Cart } from './cart';
 import { Catalogue } from './catalogue';
 import { Check } from './check';
 import { CheckWithCircle } from './check-with-circle';
@@ -120,6 +121,7 @@ export const Icon = {
   Bin,
   Bell,
   Caret,
+  Cart,
   Catalogue,
   Check,
   CheckWithCircle,

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

@@ -116,23 +116,12 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
             lexicalNode = $createTableRowNode();
             break;
           }
-          case 'table-cell':
+          case 'table-cell': {
+            lexicalNode = $createTableCellNode(0, undefined);
+            break;
+          }
           case 'table-head-cell': {
-            // ** colSpan / rowSpan has not yet been implemented **
-            // const colSpanFromMeta = metadata?.colSpan;
-            // const colSpanParsed =
-            //   typeof colSpanFromMeta === 'number'
-            //     ? colSpanFromMeta
-            //     : parseInt(colSpanFromMeta as unknown as string, 10);
-            // const colSpan = !isNaN(colSpanParsed) ? colSpanParsed : undefined;
-            const colSpan = undefined;
-
-            lexicalNode = $createTableCellNode(
-              // 2 indicates NO_HEADER_STATUS
-              // See TableCellHeaderStates in @lexical/table/LexicalTableCellNode for details
-              0,
-              colSpan,
-            );
+            lexicalNode = $createTableCellNode(2, undefined);
             break;
           }
           // We do not deal with these tags. They should just be skipped.

package/src/tooltip/tooltip.css

@@ -28,7 +28,7 @@
 }
 
 .c-tooltip-info {
-  @apply border border-solid border-purple-200-700 bg-white text-green-600-300;
+  @apply border border-solid border-purple-200-700 bg-white text-gray-500-400;
 
   .c-tooltip-arrow {
     @apply fill-white;