@crystallize/design-system 1.24.20 → 1.24.21

package/dist/index.mjs

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

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

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

package/src/collapsible/collapsible.css

@@ -11,11 +11,11 @@
 }
 
 .c-collapsible-arrow {
-  @apply transition duration-300;
+  @apply transition duration-150;
 }
 
 .c-collapsible-tree .c-collapsible-arrow {
-  @apply -rotate-90 duration-200;
+  @apply -rotate-90 duration-150;
 }
 
 .c-collapsible-trigger[data-state='open'] .c-collapsible-arrow {

package/src/iconography/index.ts

@@ -98,6 +98,8 @@ 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';
@@ -219,6 +221,8 @@ export const Icon = {
   Subscription,
   Target,
   Topics,
+  TopicsBranch,
+  TopicsLeaf,
   UsageMeter,
   Unpublish,
   User,

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/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: {