@crystallize/design-system 1.24.26 → 1.24.28

package/dist/index.mjs

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

package/dist/{rich-text-editor-QPSSPPTF.mjs → rich-text-editor-FMYEV5BL.mjs}

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-DDFZZP2K.mjs";
+} from "./chunk-OD4GHCZ2.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/rich-text-editor/rich-text-editor.tsx

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.24.26",
+  "version": "1.24.28",
   "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/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-item.tsx

@@ -1,18 +1,24 @@
+import { forwardRef } from 'react';
 import { cx } from 'class-variance-authority';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
-type DropdownMenuItemProps = DropdownMenuPrimitive.MenuItemProps & {
+export type DropdownMenuItemProps = DropdownMenuPrimitive.DropdownMenuItemProps & {
   children: React.ReactNode;
   isSelected?: boolean;
 };
 
-export function DropdownMenuItem({ children, className, isSelected, ...delegated }: DropdownMenuItemProps) {
-  return (
-    <DropdownMenuPrimitive.Item
-      {...delegated}
-      className={cx('c-dropdown-menu-item', isSelected ? 'selected' : '', className)}
-    >
-      {children}
-    </DropdownMenuPrimitive.Item>
-  );
-}
+export const DropdownMenuItem = forwardRef<React.ElementRef<typeof DropdownMenuPrimitive.Item>, DropdownMenuItemProps>(
+  ({ children, className, isSelected, ...delegated }, ref) => {
+    return (
+      <DropdownMenuPrimitive.Item
+        ref={ref}
+        {...delegated}
+        className={cx('c-dropdown-menu-item', isSelected ? 'selected' : '', className)}
+      >
+        {children}
+      </DropdownMenuPrimitive.Item>
+    );
+  },
+);
+
+DropdownMenuItem.displayName = 'DropdownMenuItem';

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/chevron.tsx

@@ -0,0 +1,16 @@
+import { forwardRef, type SVGProps } from 'react';
+
+type ChevronIconProps = SVGProps<SVGSVGElement>;
+
+export const Chevron = forwardRef<SVGSVGElement, ChevronIconProps>((delegated, ref) => (
+  <svg width="22" height="22" fill="none" viewBox="0 0 22 22" ref={ref} {...delegated}>
+    <path
+      fill={delegated.fill ?? '#528693'}
+      fillRule="evenodd"
+      d="m9.763 7.464 3.182 3.182a.5.5 0 0 1 0 .707l-3.182 3.183a.5.5 0 1 1-.708-.708l2.796-2.795v-.066L9.055 8.172a.5.5 0 0 1 .708-.708"
+      clipRule="evenodd"
+    />
+  </svg>
+));
+
+Chevron.displayName = 'Chevron';

package/src/iconography/index.ts

@@ -9,9 +9,11 @@ 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';
+import { Chevron } from './chevron';
 import { Choice } from './choice';
 import { Chunk } from './chunk';
 import { Clock } from './clock';
@@ -120,9 +122,11 @@ export const Icon = {
   Bin,
   Bell,
   Caret,
+  Cart,
   Catalogue,
   Check,
   CheckWithCircle,
+  Chevron,
   Cloud,
   Clock,
   CloudWithKeyHole,

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;