@crystallize/design-system 1.24.27 → 1.24.29

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.29",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -9,9 +9,9 @@
   },
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./tailwind-config": "./tailwind.config.cjs",
     "./styles.css": {
@@ -62,19 +62,23 @@
     "@faker-js/faker": "7.6.0",
     "@ianvs/prettier-plugin-sort-imports": "^3.7.1",
     "@mdx-js/react": "^2.2.1",
-    "@storybook/addon-actions": "7.6.2",
-    "@storybook/addon-backgrounds": "7.6.2",
-    "@storybook/addon-docs": "7.0.0-beta.14",
-    "@storybook/addon-essentials": "7.6.2",
-    "@storybook/addon-highlight": "7.6.2",
-    "@storybook/addon-interactions": "7.6.2",
-    "@storybook/addon-links": "7.6.2",
-    "@storybook/addon-measure": "7.6.2",
-    "@storybook/addon-outline": "7.6.2",
-    "@storybook/manager-api": "7.6.2",
-    "@storybook/react": "7.6.2",
-    "@storybook/react-vite": "7.6.2",
-    "@storybook/theming": "7.6.2",
+    "@storybook/addon-actions": "8.6.11",
+    "@storybook/addon-backgrounds": "8.6.11",
+    "@storybook/addon-designs": "8.2.1",
+    "@storybook/addon-docs": "8.6.11",
+    "@storybook/addon-essentials": "8.6.11",
+    "@storybook/addon-highlight": "8.6.11",
+    "@storybook/addon-interactions": "8.6.11",
+    "@storybook/addon-links": "8.6.11",
+    "@storybook/addon-measure": "8.6.11",
+    "@storybook/addon-outline": "8.6.11",
+    "@storybook/client-logger": "8.6.11",
+    "@storybook/manager-api": "8.6.11",
+    "@storybook/preview-api": "8.6.11",
+    "@storybook/react": "8.6.11",
+    "@storybook/react-vite": "8.6.11",
+    "@storybook/theming": "8.6.11",
+    "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "14.5.2",
@@ -87,13 +91,12 @@
     "postcss": "^8.4.21",
     "postcss-import": "^15.1.0",
     "prettier": "2.8.4",
-    "storybook": "7.6.2",
-    "storybook-addon-designs": "^6.3.1",
-    "storybook-dark-mode": "^2.0.5",
+    "storybook": "8.6.11",
+    "storybook-dark-mode": "4.0.2",
     "tailwindcss": "^3.3.5",
     "tsup": "^6.5.0",
     "typescript": "4.9.4",
-    "vite": "5.3.5",
+    "vite": "6.2.4",
     "vitest": "2.1.8",
     "tsconfig": "0.0.0"
   },
@@ -117,13 +120,13 @@
     "tailwind.config.cjs"
   ],
   "scripts": {
-    "build:storybook": "storybook build -s public",
+    "build:storybook": "storybook build public",
     "build:tw": "tailwindcss -c ./tailwind.config.cjs -i src/index.css -o dist/index.css",
     "build:tsup": "tsup src/index.ts --format esm,cjs --dts",
     "build": "pnpm build:tw && pnpm build:tsup",
     "dev:tw": "tailwindcss --content ./src/**/*.tsx,!./src/**/*.stories.tsx -c ./tailwind.config.cjs -i src/index.css -o dist/index.css --watch & tsup src/index.ts --format esm --dts --watch",
     "dev:tsup": "tsup src/index.ts --format esm --dts --watch",
-    "dev:storybook": "storybook dev -p 6006 --no-open -s public",
+    "dev:storybook": "storybook dev -p 6006 --no-open public",
     "dev": "concurrently \"npm:dev:*\"",
     "test": "vitest run src/",
     "test:watch": "vitest src/"

package/src/colors/Colors.stories.tsx

@@ -1,6 +1,6 @@
-import { useDarkMode } from 'storybook-dark-mode';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { useDarkMode } from '../../.storybook/use-dark-mode';
 import colorDefaults from './color-defaults.json';
 import colorPairing from './color-pairing.json';
 import rawColors from './colors.json';
@@ -65,7 +65,7 @@ export default meta;
 function ColorItem({ colorName, color }: { colorName: ColorName; color: Color }) {
   const shades = Object.keys(color);
 
-  const isDark = useDarkMode();
+  const [isDark] = useDarkMode();
 
   // @ts-expect-error
   const applicationsForMode = !isDark ? applications : applications.map(a => ({ ...a, shade: colorPairing[a.shade] }));

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,