@crystallize/design-system 1.24.27 → 1.24.28

package/dist/index.mjs

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

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

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

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/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

@@ -13,6 +13,7 @@ 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';
@@ -125,6 +126,7 @@ export const Icon = {
   Catalogue,
   Check,
   CheckWithCircle,
+  Chevron,
   Cloud,
   Clock,
   CloudWithKeyHole,