@crystallize/design-system 1.24.19 → 1.24.21

package/dist/index.mjs

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

package/dist/{rich-text-editor-OKFI7OCV.mjs → rich-text-editor-PGTFVNXG.mjs}

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-7ZEBQCV7.mjs";
+} from "./chunk-5RNPHH5B.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.19",
+  "version": "1.24.21",
   "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-150;
+}
+
+.c-collapsible-tree .c-collapsible-arrow {
+  @apply -rotate-90 duration-150;
 }
 
 .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';
@@ -97,9 +98,12 @@ import { SubscriptionPlans } from './subscription-plans';
 import { Switch } from './switch';
 import { Target } from './target';
 import { Topics } from './topics';
+import { TopicsBranch } from './topics-branch';
+import { TopicsLeaf } from './topics-leaf';
 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 +159,7 @@ export const Icon = {
   Mushroom,
   NailPolish,
   Order,
+  Organization,
   Paths,
   People,
   Percentage,
@@ -216,8 +221,11 @@ export const Icon = {
   Subscription,
   Target,
   Topics,
+  TopicsBranch,
+  TopicsLeaf,
   UsageMeter,
   Unpublish,
+  User,
   Usage,
   UserCard,
   Users,

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/topics-branch.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, SVGProps } from 'react';
+
+type TopicsBranchProps = SVGProps<SVGSVGElement>;
+
+type TopicsBranchRef = SVGSVGElement;
+
+export const TopicsBranch = forwardRef<TopicsBranchRef, TopicsBranchProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" fill="none" viewBox="0 0 22 22" {...delegated}>
+      <path d="M3.6 10.9a2.1 2.1 0 0 1 4.2 0 2.1 2.1 0 1 1-4.2 0Z" fill="#BFF6F8" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.7 13.6a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4Zm0-4.8a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Z"
+        fill="#528693"
+      />
+      <path d="M13.2 16.3a2.1 2.1 0 0 1 4.2 0 2.1 2.1 0 1 1-4.2 0Z" fill="#BFF6F8" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.3 19a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4Zm0-4.8a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Z"
+        fill="#528693"
+      />
+      <path d="M13.2 5.5a2.1 2.1 0 0 1 4.2 0 2.1 2.1 0 1 1-4.2 0Z" fill="#fff" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.3 8.2a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4Zm0-4.8a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.1 5.74a.3.3 0 0 1 .3-.3h2.4a.3.3 0 1 1 0 .6h-2.1v9.92h2.1a.3.3 0 1 1 0 .6h-2.4a.3.3 0 0 1-.3-.3V5.74Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.1 11a.3.3 0 0 1 .3-.3h1.907a.3.3 0 1 1 0 .6H8.4a.3.3 0 0 1-.3-.3Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+TopicsBranch.displayName = 'TopicsBranchIcon';

package/src/iconography/topics-leaf.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, SVGProps } from 'react';
+
+type TopicsLeafProps = SVGProps<SVGSVGElement>;
+
+type TopicsLeafRef = SVGSVGElement;
+
+export const TopicsLeaf = forwardRef<TopicsLeafRef, TopicsLeafProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" fill="none" viewBox="0 0 22 22" {...delegated}>
+      <path d="M3.6 10.9a2.1 2.1 0 0 1 4.2 0 2.1 2.1 0 1 1-4.2 0Z" fill="#BFF6F8" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.7 13.6a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4Zm0-4.8a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Z"
+        fill="#528693"
+      />
+      <path d="M13.2 10.9a2.1 2.1 0 1 1 4.2 0 2.1 2.1 0 1 1-4.2 0Z" fill="#fff" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.3 13.6a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4Zm0-4.8a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 11a.3.3 0 0 1 .3-.3h4.4a.3.3 0 0 1 0 .6H8.3A.3.3 0 0 1 8 11Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+TopicsLeaf.displayName = 'TopicsLeafIcon';

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/tailwind.config.cjs

@@ -64,8 +64,8 @@ module.exports = {
         },
       },
       animation: {
-        'collapsible-open': 'collapsible-open 300ms ease-out forwards',
-        'collapsible-close': 'collapsible-close 300ms ease-out forwards',
+        'collapsible-open': 'collapsible-open 150ms ease-out',
+        'collapsible-close': 'collapsible-close 150ms ease-out',
         spin: 'spin 2s linear infinite',
       },
       boxShadow: {