@crystallize/design-system 1.22.0 → 1.23.1

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-PB47BT3T.mjs";
+} from "./chunk-VYFBR7S4.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
@@ -224,13 +224,13 @@ var selectTriggerStyles = cva4("c-select-trigger", {
   }
 });
 var SelectContainer = forwardRef4(
-  ({ children, id, placeholder, disabled, size, ...delegated }, ref) => {
+  ({ children, id, placeholder, disabled, size, triggerClassName, ...delegated }, ref) => {
     return /* @__PURE__ */ jsxs3(SelectPrimitives2.Root, {
       ...delegated,
       children: [
         /* @__PURE__ */ jsxs3(SelectPrimitives2.Trigger, {
           ref,
-          className: selectTriggerStyles({ size }),
+          className: selectTriggerStyles({ size, className: triggerClassName }),
           disabled,
           id,
           children: [
@@ -368,7 +368,7 @@ function Tag({ children, className, variant, size, prepend, onRemove, ...delegat
 // src/rich-text-editor/index.tsx
 import { lazy, Suspense } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var LazyRichTextEditor = lazy(() => import("./rich-text-editor-UNPP4LX5.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-PXZQZRPK.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx12(Suspense, {
     fallback: null,

package/dist/{rich-text-editor-OUGDPSPV.css → rich-text-editor-EVP7CTRQ.css}

@@ -1582,11 +1582,14 @@
 }
 
 /* src/dialog/dialog.css */
+:root {
+  --dialog-z-index: 100;
+}
 .c-dialog {
   position: fixed;
   left: 50%;
   top: 50%;
-  z-index: 100;
+  z-index: var(--dialog-z-index);
   width: auto;
   min-width: 25%;
   max-width: 800px;
@@ -1608,7 +1611,7 @@
 .c-dialog-overlay {
   position: fixed;
   inset: 0px;
-  z-index: 100;
+  z-index: var(--dialog-z-index);
   background-color: rgb(var(--c-color-overlay) / 0.3);
 }
 .c-dialog-icon-wrapper {

package/dist/{rich-text-editor-UNPP4LX5.mjs → rich-text-editor-PXZQZRPK.mjs}

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

package/src/dialog/dialog.css

@@ -1,9 +1,18 @@
+:root {
+  --dialog-z-index: 100;
+}
+
 .c-dialog {
-  @apply fixed left-1/2 top-1/2 z-[100] w-auto min-w-[25%] max-w-[800px] rounded-lg bg-elevate p-14 leading-6 text-gray-500-400 shadow;
+  @apply fixed
+  left-1/2 top-1/2
+  z-[--dialog-z-index]
+  w-auto min-w-[25%] max-w-[800px] rounded-lg bg-elevate p-14 leading-6 text-gray-500-400 shadow;
   transform: translate(-50%, -50%);
 
   &-overlay {
-    @apply fixed inset-0 z-[100] bg-overlay;
+    @apply fixed
+    inset-0 z-[--dialog-z-index]
+    bg-overlay;
   }
 
   &-icon-wrapper {

package/src/iconography/flow.tsx

@@ -0,0 +1,58 @@
+import { forwardRef, SVGProps } from 'react';
+
+type FlowProps = SVGProps<SVGSVGElement>;
+
+type FlowRef = SVGSVGElement;
+
+export const Flow = forwardRef<FlowRef, FlowProps>((delegated, ref) => {
+  return (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      width="23"
+      height="22"
+      fill="none"
+      viewBox="0 0 23 22"
+      {...delegated}
+    >
+      <path
+        fill="#fff"
+        d="M9.892 13.114a1.04 1.04 0 01-1.041-1.04v-2.29c0-.576.466-1.042 1.04-1.042h2.29c.576 0 1.042.466 1.042 1.041v2.29a1.04 1.04 0 01-1.041 1.04h-2.29z"
+      ></path>
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M8.226 12.073v-2.29c0-.92.746-1.665 1.666-1.665h2.29c.92 0 1.665.745 1.665 1.665v2.29c0 .92-.746 1.665-1.665 1.665h-2.29c-.92 0-1.666-.745-1.666-1.665zm.625 0c0 .575.466 1.04 1.04 1.04h2.29a1.04 1.04 0 001.042-1.04v-2.29a1.04 1.04 0 00-1.041-1.04h-2.29a1.04 1.04 0 00-1.041 1.04v2.29z"
+        clipRule="evenodd"
+      ></path>
+      <path
+        fill="#BFF6F8"
+        d="M15.79 13.114a1.04 1.04 0 01-1.041-1.04v-2.29c0-.576.465-1.042 1.04-1.042h2.29c.575 0 1.041.466 1.041 1.041v2.29a1.04 1.04 0 01-1.04 1.04h-2.29z"
+      ></path>
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M14.124 12.073v-2.29c0-.92.746-1.665 1.665-1.665h2.29c.92 0 1.665.745 1.665 1.665v2.29c0 .92-.745 1.665-1.665 1.665h-2.29c-.92 0-1.665-.745-1.665-1.665zm.624 0c0 .575.466 1.04 1.041 1.04h2.29a1.04 1.04 0 001.041-1.04v-2.29a1.04 1.04 0 00-1.04-1.04h-2.29a1.04 1.04 0 00-1.041 1.04v2.29z"
+        clipRule="evenodd"
+      ></path>
+      <path
+        fill="#BFF6F8"
+        d="M3.994 13.114a1.04 1.04 0 01-1.04-1.04v-2.29c0-.576.465-1.042 1.04-1.042h2.29c.575 0 1.041.466 1.041 1.041v2.29a1.04 1.04 0 01-1.04 1.04h-2.29z"
+      ></path>
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M2.329 12.073v-2.29c0-.92.746-1.665 1.665-1.665h2.29c.92 0 1.665.745 1.665 1.665v2.29c0 .92-.745 1.665-1.665 1.665h-2.29c-.92 0-1.665-.745-1.665-1.665zm.624 0c0 .575.466 1.04 1.041 1.04h2.29a1.04 1.04 0 001.041-1.04v-2.29a1.04 1.04 0 00-1.04-1.04h-2.29a1.04 1.04 0 00-1.042 1.04v2.29zM5.14 17.778a.312.312 0 01-.313-.313v-2.558a.312.312 0 11.624 0v2.558c0 .173-.14.313-.312.313zM14.617 5.526l1.987-1.987a.312.312 0 01.442 0l1.987 1.987a.312.312 0 01-.441.441l-1.454-1.454V8.34a.312.312 0 01-.625 0V4.513l-1.454 1.454a.312.312 0 11-.442-.441z"
+        clipRule="evenodd"
+      ></path>
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M11.037 8.651c.172 0 .312-.14.312-.312V4.59c0-.747-.606-1.353-1.353-1.353h-3.97c-.748 0-1.354.606-1.354 1.353v3.75a.312.312 0 00.625 0V4.59c0-.402.326-.728.728-.728h3.97c.403 0 .73.326.73.728v3.75c0 .173.14.312.312.312zM11.037 13.479a.312.312 0 00-.313.312v3.75c0 .747.606 1.353 1.354 1.353h3.97c.748 0 1.353-.606 1.353-1.353v-3.75a.312.312 0 00-.624 0v3.75a.729.729 0 01-.729.728h-3.97a.729.729 0 01-.729-.728v-3.75a.312.312 0 00-.312-.312zM5.14 20.29a.312.312 0 01-.313-.311v-.91a.312.312 0 11.624 0v.91c0 .172-.14.312-.312.312z"
+        clipRule="evenodd"
+      ></path>
+    </svg>
+  );
+});
+
+Flow.displayName = 'FlowIcon';

package/src/iconography/index.ts

@@ -34,6 +34,7 @@ import { EyeOpen } from './eye-open';
 import { FileUpload } from './file-upload';
 import { Filename } from './filename';
 import { FixedPropertyTable } from './fixed-property-table';
+import { Flow } from './flow';
 import { Folder } from './folder';
 import { FolderShortcut } from './folder-shortcut';
 import { Frontends } from './frontends';
@@ -124,6 +125,7 @@ export const Icon = {
   Edit,
   EyeClosed,
   EyeOpen,
+  Flow,
   Folder,
   FolderShortcut,
   Frontends,

package/src/select/select-root.tsx

@@ -21,16 +21,22 @@ const selectTriggerStyles = cva('c-select-trigger', {
 export type SelectRef = HTMLButtonElement;
 export type SelectProps = ComponentProps<typeof SelectPrimitives.Root> &
   VariantProps<typeof selectTriggerStyles> & {
+    triggerClassName?: string;
     disabled?: boolean;
     id?: string;
     placeholder?: string;
   };
 
 export const SelectContainer = forwardRef<SelectRef, SelectProps>(
-  ({ children, id, placeholder, disabled, size, ...delegated }, ref) => {
+  ({ children, id, placeholder, disabled, size, triggerClassName, ...delegated }, ref) => {
     return (
       <SelectPrimitives.Root {...delegated}>
-        <SelectPrimitives.Trigger ref={ref} className={selectTriggerStyles({ size })} disabled={disabled} id={id}>
+        <SelectPrimitives.Trigger
+          ref={ref}
+          className={selectTriggerStyles({ size, className: triggerClassName })}
+          disabled={disabled}
+          id={id}
+        >
           <SelectPrimitives.Value placeholder={<span className="c-select-value">{placeholder ?? 'Select...'}</span>} />
           <Icon.Arrow />
         </SelectPrimitives.Trigger>

package/src/select/select.css

@@ -43,3 +43,9 @@
     @apply bg-gray-50-900 outline-none;
   }
 }
+
+/*This is a workaround to handle z-index on dialog component that is also rendered in portal on the same level*/
+/*Styles added to .c-dialog are added to parent div as inline styles, therefore ~ div > .c-select-content*/
+.c-dialog ~ div > .c-select-content {
+  z-index: calc(var(--dialog-z-index) + 1);
+}