@crystallize/design-system 1.17.4 → 1.17.6

package/package.json

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

package/src/dropdown-menu/dropdown-menu-root.tsx

@@ -3,14 +3,14 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
 export type Container = HTMLElement | null | undefined;
 
-export type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps & {
-  children: ReactNode;
-  content: ReactNode;
-  alignContent?: 'start' | 'center' | 'end';
-  disabled?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  container?: Container;
-};
+export type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps &
+  Pick<DropdownMenuPrimitive.DropdownMenuProps, 'onOpenChange' | 'modal'> & {
+    children: ReactNode;
+    content: ReactNode;
+    alignContent?: 'start' | 'center' | 'end';
+    disabled?: boolean;
+    container?: Container;
+  };
 
 export function DropdownMenuRoot({
   children,
@@ -19,6 +19,7 @@ export function DropdownMenuRoot({
   disabled,
   onOpenChange,
   container,
+  modal,
   ...delegated
 }: DropdownMenuRootProps) {
   const contentProps = {
@@ -30,7 +31,7 @@ export function DropdownMenuRoot({
   };
 
   return (
-    <DropdownMenuPrimitive.Root onOpenChange={onOpenChange}>
+    <DropdownMenuPrimitive.Root onOpenChange={onOpenChange} modal={modal}>
       <DropdownMenuPrimitive.Trigger disabled={disabled} asChild>
         {children}
       </DropdownMenuPrimitive.Trigger>

package/src/iconography/add.tsx

@@ -6,15 +6,7 @@ type AddRef = SVGSVGElement;
 
 export const Add = forwardRef<AddRef, AddProps>((delegated, ref) => {
   return (
-    <svg
-      ref={ref}
-      xmlns="http://www.w3.org/2000/svg"
-      width="22"
-      height="22"
-      viewBox="0 0 22 22"
-      fill="currentColor"
-      {...delegated}
-    >
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="currentColor" {...delegated}>
       <path
         fill="#528693"
         d="M13.258 19.467c.005-.095-.045-3.832-.045-3.832v-2.157l-.05-.096.141-.13 5.963.028a.647.647 0 0 0 .407-.15.587.587 0 0 0 .202-.376l.005-.188.055-3.064a.576.576 0 0 0-.174-.521.6.6 0 0 0-.266-.155 1.606 1.606 0 0 0-.366-.028c-.055.01-.114.004-.194.01h-.646l-4.962.031a.188.188 0 0 1-.133-.032l-.055-.091v-.348l.05-5.612a.61.61 0 0 0-.16-.434.625.625 0 0 0-.316-.16c-.109-.009-.258-.004-.38-.004-.058-.005-2.166-.092-2.974-.12a.517.517 0 0 0-.42.165.567.567 0 0 0-.156.44l.004 2.336-.045 2.57.022 1.222a.151.151 0 0 1-.04.086.105.105 0 0 1-.079.033l-5.894-.05a.57.57 0 0 0-.517.25c-.095.202-.13.427-.101.648L2.06 12.59a.598.598 0 0 0 .178.453l.054.055a.573.573 0 0 0 .247.11c.086.016.172.022.26.018l2.68.037 3.287-.014a16.393 16.393 0 0 0-.046 2.005l.02.22c-.02.017-.02.274 0 3.384.006.077.007.155.004.232-.01.136.006.273.045.403.024.083.07.157.133.215.053.059.12.104.194.133.146.037.297.052.448.046.06-.005.119 0 .174 0l2.748.077c.2.022.4-.016.577-.11a.452.452 0 0 0 .194-.388Zm-.873-.278h-.12a52.435 52.435 0 0 0-1.019-.05l-1.527-.066-.092-.046a.18.18 0 0 1-.04-.168l.044-3.357.015-2.401a.678.678 0 0 0-.188-.535.651.651 0 0 0-.457-.194l-5.185.017-.695-.009-.114.05-.12-.118.005-2.474a.248.248 0 0 1 .037-.202l.073-.054 5.163.022H9.3a.194.194 0 0 0 .156-.064.189.189 0 0 0 .06-.151l.004-1.706.014-2.62.013-1.45.018-.582-.004-.088.055-.054a.239.239 0 0 1 .165-.055l2.487.055.092.01.065.064.022.077-.091 5.333-.002.797a.452.452 0 0 0 .457.457l5.479-.018h.165c.165-.008.33-.002.493.018.046.006.09.02.13.041.05.05.036.156.036.238l-.004.078-.032 1.898s-.005.178-.01.22a.567.567 0 0 0 .005.123.5.5 0 0 1 .005.114c-.028.11-.12.119-.28.114l-5.583-.013a.905.905 0 0 0-.59.114.6.6 0 0 0-.234.499l.02 2.743.113 3.023c0 .068-.007.135-.018.201a.165.165 0 0 1-.12.17v-.002Z"

package/src/iconography/eye-closed.tsx

@@ -0,0 +1,18 @@
+import { forwardRef, SVGProps } from 'react';
+
+type EyeClosedProps = SVGProps<SVGSVGElement>;
+
+type EyeClosedRef = SVGSVGElement;
+
+export const EyeClosed = forwardRef<EyeClosedRef, EyeClosedProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="17" height="17" fill="none" viewBox="0 0 17 17" {...delegated}>
+      <path
+        fill="#528693"
+        d="M12.772 7.303c.515-.48.77-.882.795-.924a.294.294 0 1 0-.502-.308c-.014.024-1.492 2.367-4.89 2.367-3.385 0-4.832-2.27-4.892-2.367a.294.294 0 0 0-.501.308c.025.042.28.445.794.924l-.966.975a.21.21 0 0 0 .298.296l.987-.995c.2.163.43.327.689.485l-.698 1.167a.21.21 0 1 0 .36.216L4.95 8.27c.22.115.456.222.711.317L5.25 9.894a.21.21 0 0 0 .4.127l.41-1.298c.242.074.5.137.772.186l-.202 1.364a.21.21 0 0 0 .416.062l.201-1.364c.23.028.469.045.717.051v1.372a.21.21 0 0 0 .42 0V9.022a7.63 7.63 0 0 0 .733-.053l.277 1.377a.21.21 0 1 0 .412-.084l-.273-1.356c.253-.047.494-.105.722-.173l.445 1.293a.21.21 0 1 0 .397-.137L10.654 8.6c.268-.099.516-.21.745-.33l.703 1.177a.21.21 0 1 0 .36-.216l-.697-1.167c.259-.158.488-.322.689-.485l.986.995a.21.21 0 0 0 .298.002.21.21 0 0 0 0-.298l-.966-.975Z"
+      />
+    </svg>
+  );
+});
+
+EyeClosed.displayName = 'EyeClosedIcon';

package/src/iconography/eye-open.tsx

@@ -0,0 +1,39 @@
+import { forwardRef, SVGProps } from 'react';
+
+type EyeOpenProps = SVGProps<SVGSVGElement>;
+
+type EyeOpenRef = SVGSVGElement;
+
+export const EyeOpen = forwardRef<EyeOpenRef, EyeOpenProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="17" height="17" fill="none" viewBox="0 0 17 17" {...delegated}>
+      <g clipPath="url(#eye-open)">
+        <path
+          fill="#BFF6F8"
+          d="M8.15 4.132c2.607-.007 5.953 2.523 7.313 3.649a.674.674 0 0 1-.005 1.052c-1.366 1.108-4.714 3.59-7.308 3.583-2.577-.007-5.907-2.478-7.268-3.583a.675.675 0 0 1-.005-1.052C2.232 6.658 5.56 4.139 8.15 4.13Z"
+        />
+        <path
+          fill="#528693"
+          fillRule="evenodd"
+          d="M12.052 5.914c-1.317-.764-2.72-1.343-3.901-1.34-1.174.003-2.568.583-3.878 1.346-1.296.754-2.446 1.647-3.114 2.2-.12.1-.12.271.002.37.67.545 1.822 1.422 3.118 2.163 1.31.748 2.703 1.318 3.872 1.321 1.177.003 2.578-.566 3.895-1.316 1.303-.74 2.46-1.622 3.133-2.168a.233.233 0 0 0 .002-.369c-.67-.555-1.826-1.452-3.129-2.207Zm3.41 1.867c-1.359-1.126-4.705-3.656-7.312-3.65-2.59.008-5.918 2.527-7.273 3.65a.675.675 0 0 0 .005 1.052c1.36 1.105 4.691 3.576 7.268 3.583 2.594.007 5.942-2.475 7.308-3.583a.674.674 0 0 0 .005-1.052Z"
+          clipRule="evenodd"
+        />
+        <path fill="#fff" d="M11.678 8.273a3.508 3.508 0 1 1-7.016 0 3.508 3.508 0 0 1 7.016 0Z" />
+        <path
+          fill="#528693"
+          fillRule="evenodd"
+          d="M12.12 8.273a3.95 3.95 0 1 1-7.9 0 3.95 3.95 0 0 1 7.9 0Zm-3.95 3.508a3.508 3.508 0 1 0 0-7.016 3.508 3.508 0 0 0 0 7.016Z"
+          clipRule="evenodd"
+        />
+        <path fill="#528693" d="M8.168 6.445a1.829 1.829 0 1 0 0 3.657 1.829 1.829 0 0 0 0-3.657Z" />
+      </g>
+      <defs>
+        <clipPath id="eye-open">
+          <path fill="#fff" d="M.068.173H16.27v16.2H.07z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+});
+
+EyeOpen.displayName = 'EyeOpenIcon';

package/src/iconography/index.ts

@@ -27,6 +27,8 @@ import { DragHandle } from './drag-handle';
 import { Edit } from './edit';
 import { Error } from './error';
 import { ErrorWhite } from './error-white';
+import { EyeClosed } from './eye-closed';
+import { EyeOpen } from './eye-open';
 import { FileUpload } from './file-upload';
 import { FixedPropertyTable } from './fixed-property-table';
 import { Folder } from './folder';
@@ -45,6 +47,7 @@ import { Language } from './language';
 import { Lifebouy } from './lifebouy';
 import { Location } from './location';
 import { LockClosed } from './lock-closed';
+import { LockOpen } from './lock-open';
 import { Magnifier } from './magnifier';
 import { Multilingual } from './multilingual';
 import { Mushroom } from './mushroom';
@@ -111,6 +114,8 @@ export const Icon = {
   Download,
   DragHandle,
   Edit,
+  EyeClosed,
+  EyeOpen,
   Folder,
   Frontends,
   Fulfilment,
@@ -124,6 +129,7 @@ export const Icon = {
   Language,
   Lifebouy,
   LockClosed,
+  LockOpen,
   Multilingual,
   Magnifier,
   Mushroom,

package/src/iconography/lock-open.tsx

@@ -0,0 +1,41 @@
+import { forwardRef, SVGProps } from 'react';
+
+type LockOpenProps = SVGProps<SVGSVGElement>;
+
+type LockOpenRef = SVGSVGElement;
+
+export const LockOpen = forwardRef<LockOpenRef, LockOpenProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="20" height="20" fill="none" viewBox="0 0 20 20" {...delegated}>
+      <path
+        fill="#BFF6F8"
+        d="M5.045 9.758c0-.593.48-1.074 1.073-1.074h8.588c.593 0 1.073.48 1.073 1.074v6.44c0 .593-.48 1.074-1.073 1.074H6.118c-.592 0-1.073-.481-1.073-1.074v-6.44Z"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M14.706 9.113H6.118a.644.644 0 0 0-.644.645v6.44c0 .356.289.644.644.644h8.588a.644.644 0 0 0 .644-.644v-6.44a.644.644 0 0 0-.644-.645Zm-8.588-.429c-.592 0-1.073.48-1.073 1.074v6.44c0 .593.48 1.074 1.073 1.074h8.588c.593 0 1.073-.481 1.073-1.074v-6.44c0-.593-.48-1.074-1.073-1.074H6.118Z"
+        clipRule="evenodd"
+      />
+      <g fillRule="evenodd" clipRule="evenodd">
+        <path fill="#fff" d="M11.01 13.296a1.192 1.192 0 1 0-1.193 0v.756a.596.596 0 0 0 1.193 0v-.756Z" />
+        <path
+          fill="#528693"
+          d="M10.413 11.284a.978.978 0 0 0-.489 1.826l.108.062v.88a.382.382 0 1 0 .763 0v-.88l.107-.062a.978.978 0 0 0-.489-1.826Zm-1.407.978a1.407 1.407 0 1 1 2.218 1.15v.64a.811.811 0 1 1-1.622 0v-.64a1.406 1.406 0 0 1-.596-1.15Z"
+        />
+      </g>
+      <path
+        fill="#fff"
+        d="m12.718 8.882.001-1.314a3.054 3.054 0 0 1 .832-2.038 2.776 2.776 0 0 1 2.01-.874c.753 0 1.476.315 2.009.874.521.547.819 1.284.832 2.056v1.296h-.545l-.001-1.296a2.468 2.468 0 0 0-.672-1.651 2.243 2.243 0 0 0-1.624-.706c-.609 0-1.193.254-1.623.706a2.468 2.468 0 0 0-.673 1.633v1.314h-.546Z"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M12.34 9.104V7.557a3.51 3.51 0 0 1 .952-2.343 3.132 3.132 0 0 1 2.267-.987c.846 0 1.662.352 2.267.987.594.623.939 1.47.954 2.363l.001 1.097v.43h-1.303l-.002-1.133v-.376a2.012 2.012 0 0 0-.55-1.346 1.887 1.887 0 0 0-1.367-.591c-.517 0-1.008.216-1.366.591a2.013 2.013 0 0 0-.551 1.332v1.523H12.34Zm5.517-.43-.002-1.089a2.469 2.469 0 0 0-.672-1.65 2.243 2.243 0 0 0-1.624-.706c-.609 0-1.193.253-1.623.705a2.468 2.468 0 0 0-.673 1.634v.677l.001.374v.055h-.546V7.568a3.055 3.055 0 0 1 .832-2.039 2.776 2.776 0 0 1 2.01-.873c.753 0 1.476.314 2.009.873.521.547.82 1.285.832 2.056 0 .013.001-.036.001.66v.43h-.546Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+});
+
+LockOpen.displayName = 'LockOpenIcon';