@crystallize/design-system 1.24.18 → 1.24.20

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-GAFUHKHL.mjs";
+} from "./chunk-W7U5TSTK.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
@@ -129,12 +129,18 @@ function CollapsibleTrigger({
   children,
   arrowPosition,
   className,
+  mode,
   ...delegated
 }) {
   return /* @__PURE__ */ jsx4(CollapsiblePrimitives.Trigger, {
     asChild: true,
     ...delegated,
-    className: cx("c-collapsible-trigger", arrowPosition === "right" ? "arrow-right" : "", className),
+    className: cx(
+      "c-collapsible-trigger",
+      arrowPosition === "right" ? "arrow-right" : "",
+      mode === "tree" ? "c-collapsible-tree" : "",
+      className
+    ),
     children: /* @__PURE__ */ jsxs2("div", {
       children: [
         arrowPosition && /* @__PURE__ */ jsx4(Icon.Caret, {
@@ -480,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-REO7ES7Q.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-3QCILLYH.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx15(Suspense, {
     fallback: null,
@@ -545,6 +551,7 @@ var toast = ({ title, message, id, type = "success", timeout = 6e3 }) => {
         }),
         /* @__PURE__ */ jsx16("div", {
           className: "c-toast-close",
+          "data-testid": "toast-close",
           children: /* @__PURE__ */ jsx16(IconButton, {
             onClick: () => sonnerToast.dismiss(id2),
             size: "xs",

package/dist/{rich-text-editor-REO7ES7Q.mjs → rich-text-editor-3QCILLYH.mjs}

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

package/src/collapsible/collapsible.css

@@ -3,7 +3,7 @@
 }
 
 .c-collapsible-trigger {
-  @apply flex gap-2 items-center;
+  @apply flex items-center gap-2;
 
   &.arrow-right {
     @apply flex-row-reverse;
@@ -11,9 +11,17 @@
 }
 
 .c-collapsible-arrow {
-  transition: 0.3s;
+  @apply transition duration-300;
+}
+
+.c-collapsible-tree .c-collapsible-arrow {
+  @apply -rotate-90 duration-200;
 }
 
 .c-collapsible-trigger[data-state='open'] .c-collapsible-arrow {
-  transform: rotate(180deg);
+  @apply rotate-180;
+}
+
+.c-collapsible-tree[data-state='open'] .c-collapsible-arrow {
+  @apply rotate-0;
 }

package/src/collapsible/collapsible.tsx

@@ -14,19 +14,26 @@ function Content({ className, ...delegated }: CollapsibleContentProps) {
 
 type CollapsibleTriggerPropsExtendedProps = CollapsibleTriggerProps & {
   arrowPosition?: 'left' | 'right';
+  mode?: 'tree';
 };
 
 export function CollapsibleTrigger({
   children,
   arrowPosition,
   className,
+  mode,
   ...delegated
 }: CollapsibleTriggerPropsExtendedProps) {
   return (
     <CollapsiblePrimitives.Trigger
       asChild
       {...delegated}
-      className={cx('c-collapsible-trigger', arrowPosition === 'right' ? 'arrow-right' : '', className)}
+      className={cx(
+        'c-collapsible-trigger',
+        arrowPosition === 'right' ? 'arrow-right' : '',
+        mode === 'tree' ? 'c-collapsible-tree' : '',
+        className,
+      )}
     >
       <div>
         {arrowPosition && <Icon.Caret className="c-collapsible-arrow" width={9} height={9} />}

package/src/iconography/index.ts

@@ -62,6 +62,7 @@ import { Mushroom } from './mushroom';
 import { NailPolish } from './nail-polish';
 import { Numeric } from './numeric';
 import { Order } from './order';
+import { Organization } from './organization';
 import { ParagraphCollection } from './paragraph-collection';
 import { Particle } from './particle';
 import { Paths } from './paths';
@@ -100,6 +101,7 @@ import { Topics } from './topics';
 import { Unpublish } from './unpublish';
 import { Usage } from './usage';
 import { UsageMeter } from './usage-meter';
+import { User } from './user';
 import { UserCard } from './user-card';
 import { Users } from './users';
 import { Video } from './video';
@@ -155,6 +157,7 @@ export const Icon = {
   Mushroom,
   NailPolish,
   Order,
+  Organization,
   Paths,
   People,
   Percentage,
@@ -218,6 +221,7 @@ export const Icon = {
   Topics,
   UsageMeter,
   Unpublish,
+  User,
   Usage,
   UserCard,
   Users,

package/src/iconography/info.tsx

@@ -5,18 +5,11 @@ type InfoRef = SVGSVGElement;
 
 export const Info = forwardRef<InfoRef, InfoProps>((delegated, ref) => {
   return (
-    <svg
-      ref={ref}
-      xmlns="http://www.w3.org/2000/svg"
-      width="22"
-      height="22"
-      fill="none"
-      viewBox="0 0 22 22"
-      {...delegated}
-    >
+    <svg ref={ref} width="22" height="22" fill="none" viewBox="0 0 22 22" {...delegated}>
       <path
         d="M17.593 3.85212C17.593 4.67937 16.9224 5.34999 16.0952 5.34999C15.2679 5.34999 14.5973 4.67937 14.5973 3.85212C14.5973 3.02487 15.2679 2.35425 16.0952 2.35425C16.9224 2.35425 17.593 3.02487 17.593 3.85212Z"
         fill="#BFF6F8"
+        className="c-icon-fill"
       />
       <path
         fillRule="evenodd"
@@ -27,6 +20,7 @@ export const Info = forwardRef<InfoRef, InfoProps>((delegated, ref) => {
       <path
         d="M11.2267 19.6338C10.1339 19.5731 9.0685 19.2687 8.1091 18.743C6.45171 17.8422 5.90412 16.3181 6.67909 14.7659C7.26511 13.7065 7.9836 12.7256 8.81732 11.8468L8.91693 11.7313C9.29243 11.2963 9.68044 10.8467 10.0199 10.3976C10.4486 9.83253 10.8215 9.28929 10.6797 8.86312C10.5968 8.6196 10.3605 8.44373 9.9584 8.32457C9.83715 8.29874 9.71404 8.28256 9.59022 8.27617L9.50938 8.26941C9.26232 8.2834 9.01575 8.23452 8.79281 8.12735C8.54248 7.93066 8.64731 7.36817 8.77404 7.12204C8.87835 6.92966 9.02762 6.76522 9.2092 6.64266C9.39077 6.5201 9.59929 6.44304 9.81707 6.41802C10.0235 6.38077 10.2331 6.36335 10.4429 6.36598C11.4176 6.41652 12.3773 6.6275 13.2831 6.9904C14.9259 7.62106 15.7097 8.86885 15.3801 10.3284C15.1357 11.2718 14.6733 12.1451 14.0299 12.8781C13.8385 13.118 13.6419 13.3464 13.4458 13.5795L13.3415 13.7024C12.9232 14.1775 12.5323 14.6759 12.1707 15.1952L11.9564 15.5012C11.7156 15.8119 11.5223 16.1565 11.3827 16.5237C11.303 16.7335 11.308 16.966 11.3968 17.1721C11.4855 17.3783 11.651 17.5421 11.8583 17.6289C12.0086 17.6973 12.1701 17.7377 12.335 17.748C12.5957 17.7793 12.8648 17.8126 12.9712 18.0603C13.0139 18.1752 13.0313 18.298 13.0223 18.4203C13.0133 18.5425 12.9781 18.6615 12.9191 18.769C12.7552 19.0647 12.5066 19.305 12.2052 19.459C11.9037 19.6131 11.563 19.6739 11.2267 19.6338Z"
         fill="#BFF6F8"
+        className="c-icon-fill"
       />
       <path
         fillRule="evenodd"

package/src/iconography/organization.tsx

@@ -0,0 +1,31 @@
+import { forwardRef, SVGProps } from 'react';
+
+type OrganizationProps = SVGProps<SVGSVGElement>;
+
+type OrganizationRef = SVGSVGElement;
+
+export const Organization = forwardRef<OrganizationRef, OrganizationProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" fill="none" viewBox="0 0 22 22" {...delegated}>
+      <path d="M2.911 3.495h9.652V18.72H2.911V3.495Z" fill="#fff" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.394 3.568a.193.193 0 0 0-.193.193V18.24c0 .106.086.193.193.193h6.685a.29.29 0 0 1 0 .579H3.394a.772.772 0 0 1-.772-.772V3.76c0-.426.346-.772.772-.772h8.687c.426 0 .772.346.772.772v4.13a.29.29 0 1 1-.58 0V3.76a.193.193 0 0 0-.192-.193H3.394Z"
+        fill="#528693"
+      />
+      <path
+        d="m10.15 9.213 4.885-3.554 4.875 3.554v9.205c0 .267-.383.425-.65.425l-9.028-.113-.082-9.517Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.916 5.457a.29.29 0 0 1 .331.003l4.532 3.23c.203.144.324.379.324.628v8.92a.772.772 0 0 1-.772.773H10.15a.29.29 0 0 1-.29-.29V9.324c0-.255.126-.493.336-.637l4.72-3.23Zm.16.592-4.553 3.116a.193.193 0 0 0-.084.16v9.107h8.892a.193.193 0 0 0 .193-.193v-8.92a.193.193 0 0 0-.081-.158L15.076 6.05Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Organization.displayName = 'OrganizationIcon';

package/src/iconography/user.tsx

@@ -0,0 +1,44 @@
+import { forwardRef, SVGProps } from 'react';
+
+type UserProps = SVGProps<SVGSVGElement>;
+
+type UserRef = SVGSVGElement;
+
+export const User = forwardRef<UserRef, UserProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="23" height="22" viewBox="0 0 23 22" fill="none" {...delegated}>
+      <path
+        d="M19.0183 18.5C19.0183 19 15.4366 20 11.0183 20C6.60001 20 3.01829 19 3.01829 18.5C3.01829 15.4624 6.60001 13 11.0183 13C15.4366 13 19.0183 15.4624 19.0183 18.5Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.8017 20.024C15.312 20.3456 13.2695 20.6 11.0183 20.6C8.76706 20.6 6.72461 20.3456 5.23484 20.024C4.49262 19.8638 3.87028 19.6832 3.42161 19.5014C3.2008 19.4119 2.99558 19.3117 2.8349 19.1983C2.75497 19.1419 2.66392 19.0669 2.58765 18.9698C2.5131 18.8748 2.41829 18.7139 2.41829 18.5C2.41829 16.7268 3.46427 15.1871 5.02152 14.1165C6.58142 13.0441 8.70343 12.4 11.0183 12.4C13.3331 12.4 15.4552 13.0441 17.0151 14.1165C18.5723 15.1871 19.6183 16.7268 19.6183 18.5C19.6183 18.7139 19.5235 18.8748 19.4489 18.9698C19.3727 19.0669 19.2816 19.1419 19.2017 19.1983C19.041 19.3117 18.8358 19.4119 18.615 19.5014C18.1663 19.6832 17.544 19.8638 16.8017 20.024ZM11.0183 20C15.4366 20 19.0183 19 19.0183 18.5C19.0183 15.4625 15.4366 13 11.0183 13C6.60001 13 3.01829 15.4625 3.01829 18.5C3.01829 19 6.60001 20 11.0183 20Z"
+        fill="#528693"
+      />
+      <path
+        d="M13.0183 12.5C13.0183 13.8807 12.1229 15 11.0183 15C9.91373 15 9.0183 13.8807 9.0183 12.5C9.0183 11.1193 9.91373 10 11.0183 10C12.1229 10 13.0183 11.1193 13.0183 12.5Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.6183 12.5C13.6183 14.0802 12.5722 15.6 11.0183 15.6C9.46433 15.6 8.41829 14.0802 8.41829 12.5C8.41829 10.9198 9.46433 9.40002 11.0183 9.40002C12.5722 9.40002 13.6183 10.9198 13.6183 12.5ZM11.0183 15C12.1229 15 13.0183 13.8807 13.0183 12.5C13.0183 11.1193 12.1229 10 11.0183 10C9.91372 10 9.01829 11.1193 9.01829 12.5C9.01829 13.8807 9.91372 15 11.0183 15Z"
+        fill="#528693"
+      />
+      <path
+        d="M15.1183 7.99999C15.1183 11.3137 11.98 12.8 11.0183 12.8C10.0566 12.8 6.91831 11.3137 6.91831 7.99999C6.91831 4.68628 7.91836 2.29999 11.0183 2.29999C14.1183 2.29999 15.1183 4.68628 15.1183 7.99999Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.3086 13.0642C11.8438 13.2711 11.3786 13.4 11.0183 13.4C10.658 13.4 10.1929 13.2711 9.72804 13.0642C9.2481 12.8506 8.71451 12.5301 8.21426 12.0957C7.2092 11.2228 6.31831 9.86784 6.31831 8.00001C6.31831 6.30355 6.57045 4.74139 7.29834 3.58729C8.0574 2.38379 9.28518 1.70001 11.0183 1.70001C12.7515 1.70001 13.9793 2.38379 14.7383 3.5873C15.4662 4.74139 15.7183 6.30356 15.7183 8.00001C15.7183 9.86783 14.8274 11.2228 13.8224 12.0957C13.3221 12.5301 12.7886 12.8506 12.3086 13.0642ZM11.0183 12.8C11.98 12.8 15.1183 11.3137 15.1183 8.00001C15.1183 4.6863 14.1183 2.30001 11.0183 2.30001C7.91836 2.30001 6.91831 4.6863 6.91831 8.00001C6.91831 11.3137 10.0566 12.8 11.0183 12.8Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+User.displayName = 'UserIcon';

package/src/iconography/warning.tsx

@@ -9,6 +9,7 @@ export const Warning = forwardRef<WarningRef, WarningProps>((delegated, ref) =>
       <path
         d="M9.67541 3.72993C10.2804 2.68198 11.793 2.68198 12.398 3.72993L19.8853 16.6982C20.4903 17.7462 19.734 19.0561 18.524 19.0561H3.54948C2.33942 19.0561 1.58313 17.7462 2.18816 16.6982L9.67541 3.72993Z"
         fill="#FFDE99"
+        className="c-icon-fill"
       />
       <path
         fillRule="evenodd"

package/src/toast/toast.tsx

@@ -53,7 +53,7 @@ export const toast = ({ title, message, id, type = 'success', timeout = 6000 }:
           <div className="c-toast-title">{title}</div>
           {!!message && <div className="c-toast-message">{message}</div>}
         </div>
-        <div className="c-toast-close">
+        <div className="c-toast-close" data-testid="toast-close">
           <IconButton onClick={() => sonnerToast.dismiss(id)} size="xs">
             <Icon.Cancel width={12} height={12} />
           </IconButton>