@crystallize/design-system 1.24.20 → 1.24.22

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-W7U5TSTK.mjs";
+} from "./chunk-DDFZZP2K.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-A5TU4T3X.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx15(Suspense, {
     fallback: null,

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

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-W7U5TSTK.mjs";
+} from "./chunk-DDFZZP2K.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.22",
   "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/discovery.tsx

@@ -0,0 +1,131 @@
+import { forwardRef, SVGProps } from 'react';
+
+type DiscoveryProps = SVGProps<SVGSVGElement>;
+
+type DiscoveryRef = SVGSVGElement;
+
+export const Discovery = forwardRef<DiscoveryRef, DiscoveryProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <g clipPath="url(#discovery)">
+        <path
+          d="M11.005 20.983c2.59 0 4.69-2.1 4.69-4.69V10.07a4.69 4.69 0 0 0-4.569-4.69 7.82 7.82 0 0 1-.12 15.638v-.035Z"
+          fill="#BFF6F8"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11.951 20.925a4.729 4.729 0 0 0 3.781-4.633V10.07a4.73 4.73 0 0 0-3.42-4.545 7.785 7.785 0 0 1-.36 15.4Zm-.773.055a4.69 4.69 0 0 0 4.518-4.688V10.07a4.692 4.692 0 0 0-4.57-4.69 7.82 7.82 0 0 1-.085 15.638h-.036v-.035c.058 0 .115-.001.173-.003Z"
+          fill="#528693"
+        />
+        <path
+          d="M11.005 21.018a7.82 7.82 0 0 1-.12-15.637 4.69 4.69 0 0 0-4.57 4.689v6.222c0 2.59 2.1 4.69 4.69 4.69v.036Z"
+          fill="#BFF6F8"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10.059 20.925a7.784 7.784 0 0 1-.36-15.4 4.73 4.73 0 0 0-3.421 4.545v6.222a4.729 4.729 0 0 0 3.78 4.633Zm.773.091a7.82 7.82 0 0 1 .052-15.635 4.692 4.692 0 0 0-4.57 4.69v6.221a4.69 4.69 0 0 0 4.691 4.69v.036h-.036c-.046 0-.092 0-.137-.002Z"
+          fill="#528693"
+        />
+        <path d="M11.005 5.38h.121a4.766 4.766 0 0 0-.12 0Z" fill="#BFF6F8" />
+        <path fillRule="evenodd" clipRule="evenodd" d="M11.126 5.38h-.121.121Z" fill="#528693" />
+        <path d="M11.005 5.38h-.12.12Z" fill="#BFF6F8" />
+        <path fillRule="evenodd" clipRule="evenodd" d="M11.005 5.38h-.121.121Z" fill="#528693" />
+        <path
+          d="M6.314 10.07v6.222c0 2.59 2.1 4.69 4.691 4.69-.862 0-1.562-.698-1.562-1.56V6.94c0-.863.7-1.562 1.562-1.562l-.12.002a4.69 4.69 0 0 0-4.57 4.689Z"
+          fill="#fff"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10.589 20.965c.137.012.276.018.416.018a1.563 1.563 0 0 1-1.562-1.562V6.941a1.563 1.563 0 0 1 1.441-1.557c.04-.003.08-.005.121-.005l-.092.001h-.029a4.691 4.691 0 0 0-4.57 4.69v6.222a4.691 4.691 0 0 0 4.275 4.673Zm-.165-.055a4.655 4.655 0 0 1-4.073-4.618V10.07a4.655 4.655 0 0 1 4.073-4.618A1.599 1.599 0 0 0 9.407 6.94v12.48c0 .678.421 1.257 1.017 1.49Z"
+          fill="#528693"
+        />
+        <path
+          d="M12.567 6.96v12.48c0 .862-.7 1.561-1.562 1.561 2.59 0 4.69-2.1 4.69-4.69v-6.223A4.69 4.69 0 0 0 11.127 5.4l-.12-.002c.862 0 1.561.7 1.561 1.562Z"
+          fill="#BFF6F8"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11.421 5.416a4.747 4.747 0 0 0-.295-.017h-.029l-.092-.002a1.556 1.556 0 0 1 .41.054c.664.18 1.152.788 1.152 1.508v12.48a1.562 1.562 0 0 1-1.562 1.562 4.691 4.691 0 0 0 4.69-4.69v-6.223a4.691 4.691 0 0 0-4.274-4.672Zm.166.054a4.655 4.655 0 0 1 4.072 4.618v6.223a4.655 4.655 0 0 1-4.072 4.618 1.599 1.599 0 0 0 1.017-1.49V6.96c0-.677-.422-1.256-1.017-1.489Z"
+          fill="#528693"
+        />
+        <path d="M12.567 17.108h3.061c.044-.259.068-.525.068-.797v-3.13h-3.129v3.927Z" fill="#fff" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M15.597 17.072h-2.993v-3.854h3.055v3.093c0 .259-.021.513-.062.76Zm.031.036h-3.061v-3.927h3.129v3.13c0 .272-.024.538-.068.797Z"
+          fill="#528693"
+        />
+        <path d="M9.443 17.108h-3.06a4.722 4.722 0 0 1-.069-.797v-3.13h3.13v3.927Z" fill="#BFF6F8" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.413 17.072a4.683 4.683 0 0 1-.062-.761v-3.094h3.056v3.855H6.413Zm-.03.036a4.722 4.722 0 0 1-.069-.797v-3.13h3.13v3.927H6.381Z"
+          fill="#528693"
+        />
+        <path d="M9.443 9.254h-3.06c-.045.259-.069.525-.069.797v3.13h3.13V9.254Z" fill="#fff" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.413 9.29h2.994v3.855H6.35V10.05c0-.259.021-.513.062-.76Zm-.03-.036c-.045.259-.069.525-.069.797v3.13h3.13V9.254H6.381Z"
+          fill="#528693"
+        />
+        <path d="M9.443 6.94v12.481a1.562 1.562 0 0 0 3.124 0V6.941a1.562 1.562 0 0 0-3.124 0Z" fill="#BFF6F8" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.48 19.421V6.941a1.525 1.525 0 1 1 3.05 0v12.48a1.525 1.525 0 0 1-3.05 0Zm-.037 0V6.941a1.562 1.562 0 1 1 3.124 0v12.48a1.562 1.562 0 0 1-3.124 0Z"
+          fill="#528693"
+        />
+        <path d="m21.019 19.696-1.323 1.323-1.323-1.323 1.323-1.323 1.323 1.323Z" fill="#BFF6F8" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11.005 20.718a7.52 7.52 0 1 1 0-15.039 7.52 7.52 0 0 1 0 15.04Zm-8.12-7.52a8.12 8.12 0 1 0 16.24 0 8.12 8.12 0 0 0-16.24 0Z"
+          fill="#528693"
+        />
+        <path d="M13.607 2.773H8.393V.98h5.213v1.792Z" fill="#fff" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.393 2.773h5.213V.98H8.393v1.792Zm.037-1.756h5.14v1.719H8.43V1.017ZM2.886 13.199a.3.3 0 0 0 .3.3h15.639a.3.3 0 1 0 0-.6H3.185a.3.3 0 0 0-.3.3ZM4.235 9.289a.3.3 0 0 0 .3.3h12.94a.3.3 0 1 0 0-.6H4.536a.3.3 0 0 0-.3.3ZM4.235 17.108a.3.3 0 0 0 .3.3h12.94a.3.3 0 1 0 0-.6H4.536a.3.3 0 0 0-.3.3Z"
+          fill="#528693"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.094 2.773a.3.3 0 0 0 .3.3h5.213a.3.3 0 0 0 .3-.3V.98a.3.3 0 0 0-.3-.3H8.394a.3.3 0 0 0-.3.3v1.792Zm.6-.3V1.28h4.613v1.192H8.694Z"
+          fill="#528693"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11 5.502a.3.3 0 0 1-.3-.3V2.935a.3.3 0 1 1 .6 0v2.267a.3.3 0 0 1-.3.3ZM19.484 21.232a.3.3 0 0 0 .424 0l1.323-1.323a.3.3 0 0 0 0-.425l-1.323-1.323a.3.3 0 0 0-.424 0l-1.324 1.323a.3.3 0 0 0 0 .424l1.324 1.324Zm-.687-1.536.899-.899.899.9-.9.898-.898-.899Z"
+          fill="#528693"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.014 16.292a4.99 4.99 0 1 0 9.982 0V10.07a4.99 4.99 0 1 0-9.982 0v6.222Zm4.991 4.39a4.39 4.39 0 0 1-4.39-4.39V10.07a4.39 4.39 0 1 1 8.78 0v6.222a4.39 4.39 0 0 1-4.39 4.39Z"
+          fill="#528693"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.143 19.421a1.862 1.862 0 0 0 3.724 0V6.941a1.862 1.862 0 1 0-3.724 0v12.48Zm1.862 1.262a1.262 1.262 0 0 1-1.262-1.262V6.941a1.262 1.262 0 1 1 2.524 0v12.48c0 .697-.565 1.262-1.262 1.262ZM3.278 3.18a.3.3 0 0 0 .3.3h.661a.3.3 0 0 0 0-.6h-.66a.3.3 0 0 0-.3.3ZM.681 3.18a.3.3 0 0 0 .3.3h.615a.3.3 0 0 0 0-.6H.981a.3.3 0 0 0-.3.3ZM2.61 2.447a.3.3 0 0 0 .3-.3V1.55a.3.3 0 1 0-.6 0v.596a.3.3 0 0 0 .3.3ZM2.61 5.109a.3.3 0 0 0 .3-.3v-.48a.3.3 0 1 0-.6 0v.48a.3.3 0 0 0 .3.3Z"
+          fill="#528693"
+        />
+      </g>
+      <defs>
+        <clipPath id="discovery">
+          <path fill="#fff" transform="rotate(-180 11 11)" d="M0 0h22v22H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+});
+
+Discovery.displayName = 'DiscoveryIcon';

package/src/iconography/index.ts

@@ -23,6 +23,7 @@ import { Crystal } from './crystal';
 import { Customers } from './customers';
 import { Dashboard } from './dashboard';
 import { Date } from './date';
+import { Discovery } from './discovery';
 import { Document } from './document';
 import { DocumentShortcut } from './document-shortcut';
 import { Download } from './download';
@@ -98,6 +99,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';
@@ -131,6 +134,7 @@ export const Icon = {
   DocumentShortcut,
   Download,
   DragHandle,
+  Discovery,
   Edit,
   EyeClosed,
   EyeOpen,
@@ -219,6 +223,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: {