@crystallize/design-system 1.24.31 → 1.24.33

package/dist/index.mjs

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

package/dist/{rich-text-editor-FXEPVDMG.mjs → rich-text-editor-LN7M5QFI.mjs}

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

package/dist/{rich-text-editor-KXLB6GMR.css → rich-text-editor-TNAEFB7D.css}

@@ -1412,12 +1412,17 @@
 .c-dropdown-menu-content {
   animation-duration: 0.4s;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  max-height: var(--radix-dropdown-menu-content-available-height);
+  scrollbar-width: thin;
   z-index: 100;
+  overflow: auto;
   border-radius: 0.25rem;
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
   border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / 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:

package/package.json

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

package/src/action-menu/action-menu.tsx

@@ -18,13 +18,14 @@ const buttonStyles = cva('c-action-menu', {
   },
 });
 
-type ActionMenuProps = ButtonStylesProps & {
-  children: ReactNode;
-  container?: Container;
-  tabIndex?: number;
-  disabled?: boolean;
-  onOpenChange?: (open: boolean) => void;
-};
+type ActionMenuProps = Omit<React.ComponentProps<typeof DropdownMenu.Root>, 'content'> &
+  ButtonStylesProps & {
+    children: ReactNode;
+    container?: Container;
+    tabIndex?: number;
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  };
 
 export function ActionMenu({ children, tabIndex, size, ...delegated }: ActionMenuProps) {
   return (

package/src/collapsible/collapsible.tsx

@@ -3,8 +3,8 @@ import { cx } from 'class-variance-authority';
 import * as CollapsiblePrimitives from '@radix-ui/react-collapsible';
 import type { CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
 
-import './collapsible.css';
 import { Icon } from '../iconography';
+import './collapsible.css';
 
 type CollapsibleContentProps = ComponentProps<typeof CollapsiblePrimitives.Content>;
 

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

@@ -1,7 +1,9 @@
 .c-dropdown-menu-content {
   animation-duration: 0.4s;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  @apply z-[100] rounded border border-solid border-purple-200-700 shadow;
+  max-height: var(--radix-dropdown-menu-content-available-height);
+  scrollbar-width: thin;
+  @apply z-[100] overflow-auto rounded border border-solid border-purple-200-700 bg-white shadow;
 }
 
 .c-dropdown-menu-content[data-side='top'] {

package/src/iconography/index.ts

@@ -59,6 +59,7 @@ import { Items } from './items';
 import { Key } from './key';
 import { Language } from './language';
 import { Lifebouy } from './lifebouy';
+import { Limitations } from './limitations';
 import { Location } from './location';
 import { LockClosed } from './lock-closed';
 import { LockOpen } from './lock-open';
@@ -168,6 +169,7 @@ export const Icon = {
   Key,
   Language,
   Lifebouy,
+  Limitations,
   LockClosed,
   LockOpen,
   Multilingual,

package/src/iconography/limitations.tsx

@@ -0,0 +1,29 @@
+import { forwardRef, SVGProps } from 'react';
+
+import { fill, stroke } from './variables';
+
+type LimitationsProps = SVGProps<SVGSVGElement>;
+
+type LimitationsRef = SVGSVGElement;
+
+export const Limitations = forwardRef<LimitationsRef, LimitationsProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="23" height="23" viewBox="0 0 23 23" fill="none" {...delegated}>
+      <path
+        d="M19.388 11.607a7.44 7.44 0 0 1-2.187 5.28 7.444 7.444 0 0 1-5.281 2.188 7.444 7.444 0 0 1-5.28-2.188 7.444 7.444 0 0 1-2.188-5.28 7.444 7.444 0 0 1 2.188-5.28 7.44 7.44 0 0 1 5.28-2.188 7.44 7.44 0 0 1 5.28 2.187 7.44 7.44 0 0 1 2.188 5.28Z"
+        fill={fill}
+      />
+      <path
+        d="M3.852 11.606c0-1.087.213-2.145.634-3.14l.161-.356c.394-.819.92-1.561 1.568-2.209a8.04 8.04 0 0 1 2.208-1.567l.356-.161a8.02 8.02 0 0 1 3.141-.634v.6A7.443 7.443 0 0 0 6.64 6.327a7.445 7.445 0 0 0-2.187 5.28l.008.376c.037.75.186 1.482.442 2.183l.137.348c.376.89.915 1.688 1.6 2.374a7.447 7.447 0 0 0 4.904 2.178l.377.01a7.427 7.427 0 0 0 5.28-2.188 7.444 7.444 0 0 0 2.18-4.905l.008-.377a7.423 7.423 0 0 0-.587-2.907l-.148-.329a7.425 7.425 0 0 0-1.202-1.782l-.25-.262a7.44 7.44 0 0 0-2.373-1.6l-.001-.001.234-.552A8.04 8.04 0 0 1 17.625 5.9a8.041 8.041 0 0 1 1.729 2.565l.148.376c.323.884.486 1.813.486 2.764 0 .952-.163 1.882-.486 2.766l-.148.376a8.04 8.04 0 0 1-1.729 2.563 8.049 8.049 0 0 1-2.209 1.569l-.355.161a8.023 8.023 0 0 1-3.14.634c-.952 0-1.881-.164-2.765-.486l-.377-.148a8.033 8.033 0 0 1-2.28-1.459l-.284-.27a8.043 8.043 0 0 1-1.568-2.209l-.161-.355a8.025 8.025 0 0 1-.634-3.142ZM11.92 3.54a8.02 8.02 0 0 1 3.141.634l-.234.552a7.405 7.405 0 0 0-2.53-.578l-.377-.008v-.6Z"
+        fill={stroke}
+      />
+      <path d="M15.094 10.412H8.746a1.195 1.195 0 1 0 0 2.39h6.348a1.195 1.195 0 1 0 0-2.39Z" fill="#fff" />
+      <path
+        d="M6.952 11.607c0-.991.803-1.794 1.795-1.794v.6c-.66 0-1.196.534-1.196 1.194l.006.123c.057.562.505 1.009 1.068 1.066l.122.006h6.347c.619 0 1.127-.47 1.189-1.072l.006-.123c0-.618-.47-1.128-1.073-1.189l-.122-.006v-.6a1.795 1.795 0 0 1 0 3.59H8.747a1.795 1.795 0 0 1-1.795-1.795Zm8.142-1.794v.6H8.747v-.6h6.347Z"
+        fill={stroke}
+      />
+    </svg>
+  );
+});
+
+Limitations.displayName = 'LimitationsIcon';

package/src/popover/popover.tsx

@@ -2,8 +2,8 @@ import type { ReactNode } from 'react';
 import { cx } from 'class-variance-authority';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-import './popover.css';
 import { PopoverClose } from './popover-close';
+import './popover.css';
 
 type PopoverProps = Pick<PopoverPrimitive.PopoverProps, 'open' | 'onOpenChange'> &
   Pick<PopoverPrimitive.PortalProps, 'container'> &