@crystallize/design-system 1.11.6 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.11.6",
+  "version": "1.12.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -58,20 +58,20 @@
     "@faker-js/faker": "7.6.0",
     "@ianvs/prettier-plugin-sort-imports": "^3.7.1",
     "@mdx-js/react": "^2.2.1",
-    "@storybook/addon-actions": "7.0.0-beta.14",
-    "@storybook/addon-backgrounds": "7.0.0-beta.14",
-    "@storybook/addon-docs": "7.0.0-beta.14",
-    "@storybook/addon-essentials": "7.0.0-beta.14",
-    "@storybook/addon-highlight": "7.0.0-beta.14",
-    "@storybook/addon-interactions": "7.0.0-beta.14",
-    "@storybook/addon-links": "7.0.0-beta.14",
-    "@storybook/addon-measure": "7.0.0-beta.14",
-    "@storybook/addon-outline": "7.0.0-beta.14",
+    "@storybook/addon-actions": "7.0.7",
+    "@storybook/addon-backgrounds": "7.0.7",
+    "@storybook/addon-docs": "7.0.7",
+    "@storybook/addon-essentials": "7.0.7",
+    "@storybook/addon-highlight": "7.0.7",
+    "@storybook/addon-interactions": "7.0.7",
+    "@storybook/addon-links": "7.0.7",
+    "@storybook/addon-measure": "7.0.7",
+    "@storybook/addon-outline": "7.0.7",
     "@storybook/addons": "^6.5.15",
-    "@storybook/react": "7.0.0-beta.14",
-    "@storybook/react-vite": "7.0.0-beta.14",
+    "@storybook/react": "7.0.7",
+    "@storybook/react-vite": "7.0.7",
     "@storybook/testing-library": "^0.0.13",
-    "@storybook/theming": "7.0.0-beta.14",
+    "@storybook/theming": "7.0.7",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -83,14 +83,14 @@
     "concurrently": "^7.6.0",
     "hex-rgb": "4.3.0",
     "postcss": "^8.4.21",
-    "storybook": "7.0.0-beta.14",
+    "storybook": "7.0.7",
     "storybook-addon-designs": "^6.3.1",
     "storybook-dark-mode": "^2.0.5",
     "tailwindcss": "^3.3.0",
     "tsup": "^6.5.0",
     "typescript": "^4.9.4",
-    "vite": "^4.2.1",
-    "vitest": "^0.30.1",
+    "vite": "4.3.4",
+    "vitest": "0.30.1",
     "tsconfig": "0.0.0"
   },
   "keywords": [
@@ -116,7 +116,7 @@
     "build:storybook": "storybook build -s public",
     "build:tw": "tailwindcss --content ./src/**/*.tsx,!./src/**/*.stories.tsx -c ./tailwind.config.cjs -i src/index.css -o dist/index.css --minify",
     "build:tsup": "tsup src/index.ts --format esm,cjs --dts",
-    "build": "pnpm build:tw && pnpm build:tsup && pnpm build:storybook",
+    "build": "pnpm build:tw && pnpm build:tsup",
     "dev:tw": "tailwindcss --content ./src/**/*.tsx,!./src/**/*.stories.tsx -c ./tailwind.config.cjs -i src/index.css -o dist/index.css --watch & tsup src/index.ts --format esm --dts --watch",
     "dev:tsup": "tsup src/index.ts --format esm --dts --watch",
     "dev:storybook": "storybook dev -p 6006 --no-open -s public",

package/src/action-menu/action-menu.css

@@ -15,6 +15,10 @@
     outline-color: currentColor;
   }
 
+  &:enabled {
+    @apply cursor-pointer;
+  }
+
   &:not(:disabled):hover {
     @apply gap-[3px] bg-gray-100-800 outline outline-1 outline-purple-200-700;
   }

package/src/action-menu/action-menu.tsx

@@ -22,11 +22,12 @@ type ActionMenuProps = ButtonStylesProps & {
   children: ReactNode;
   container?: Container;
   tabIndex?: number;
+  disabled?: boolean;
 };
 
-export function ActionMenu({ children, container, tabIndex, size }: ActionMenuProps) {
+export function ActionMenu({ children, container, tabIndex, size, disabled }: ActionMenuProps) {
   return (
-    <DropdownMenu.Root content={children} alignContent="center" container={container}>
+    <DropdownMenu.Root content={children} alignContent="center" container={container} disabled={disabled}>
       <button
         aria-label="more options"
         className={buttonStyles({ size })}

package/src/dialog/dialog.tsx

@@ -1,11 +1,10 @@
 import type { ReactNode, RefAttributes } from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { cva, cx, VariantProps } from 'class-variance-authority';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 
 import { Button } from '../button';
 import { Icon } from '../iconography';
 import type { DialogFuncProps } from './types';
-
 import './dialog.css';
 
 const IconMap = {

package/src/iconography/bin.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, SVGProps } from 'react';
+
+type BinProps = SVGProps<SVGSVGElement>;
+
+type BinRef = SVGSVGElement;
+
+export const Bin = forwardRef<BinRef, BinProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path fill="#BFF6F8" d="M5.5 6h11v13h-11V6Z" />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M4.9 6a.6.6 0 0 1 .6-.6h11a.6.6 0 0 1 .6.6v13a.6.6 0 0 1-.6.6h-11a.6.6 0 0 1-.6-.6V6Zm.6 0v13h11V6h-11Z"
+        clipRule="evenodd"
+      />
+      <path fill="#BFF6F8" d="M15.25 4.5h-8.5a2 2 0 0 0-2 2h12.5a2 2 0 0 0-2-2Z" />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M17.85 7.1H4.15v-.6a2.6 2.6 0 0 1 2.6-2.6h8.5a2.6 2.6 0 0 1 2.6 2.6v.6ZM4.842 5.9A2 2 0 0 1 6.75 4.5h8.5a2 2 0 0 1 2 2H4.75a2 2 0 0 1 .092-.6Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M8.45 4a1.6 1.6 0 0 1 1.6-1.6h1.9a1.6 1.6 0 0 1 1.6 1.6h-.6a1 1 0 0 0-1-1h-1.9a1 1 0 0 0-1 1h-.6ZM8.4 8.2a.3.3 0 0 1 .3.3v9a.3.3 0 1 1-.6 0v-9a.3.3 0 0 1 .3-.3ZM11 8.2a.3.3 0 0 1 .3.3v9a.3.3 0 1 1-.6 0v-9a.3.3 0 0 1 .3-.3ZM13.6 8.2a.3.3 0 0 1 .3.3v9a.3.3 0 1 1-.6 0v-9a.3.3 0 0 1 .3-.3Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+});
+
+Bin.displayName = 'BinIcon';

package/src/iconography/edit.tsx

@@ -6,24 +6,16 @@ type EditRef = SVGSVGElement;
 
 export const Edit = forwardRef<EditRef, EditProps>((delegated, ref) => {
   return (
-    <svg
-      ref={ref}
-      width="22"
-      height="22"
-      viewBox="0 0 22 22"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...delegated}
-    >
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path
-        d="M18.4051 7.1124C18.41 7.09758 18.4248 7.10252 18.4347 7.09264C17.1224 5.77326 16.3152 5.0028 15.0079 3.67566L4.87616 13.916L3.71256 18.5L8.3771 16.9118L12.4481 13.0002C15.2506 10.2669 15.6069 9.86404 18.4051 7.1124Z"
         fill="#BFF6F8"
+        d="M18.293 7.112c.005-.014.02-.01.03-.02-1.313-1.319-2.12-2.09-3.428-3.416L4.764 13.916 3.6 18.5l4.665-1.588L12.335 13c2.803-2.733 3.16-3.136 5.957-5.888Z"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M18.8601 6.66954C19.0934 6.90404 19.0929 7.28307 18.859 7.51694C18.8345 7.54136 18.8098 7.56205 18.7858 7.57957C17.5816 8.76397 16.8308 9.51236 16.1327 10.2081C15.2384 11.0996 14.4307 11.9047 12.8671 13.4298L12.8638 13.4329L8.79281 17.3445C8.7295 17.4053 8.6536 17.4515 8.57049 17.4798L3.90595 19.068C3.69763 19.1389 3.46719 19.0901 3.30551 18.9408C3.14383 18.7915 3.07686 18.5657 3.13101 18.3524L4.2946 13.7684C4.32091 13.6648 4.37444 13.5701 4.44964 13.494L14.5813 3.25369C14.6942 3.13962 14.848 3.07551 15.0085 3.07568C15.169 3.07586 15.3227 3.1403 15.4353 3.25461C16.1648 3.99512 16.7297 4.55358 17.3157 5.13286C17.7852 5.59695 18.2682 6.07441 18.8601 6.66954ZM18.0109 6.66797C18.0089 6.66601 18.007 6.66405 18.005 6.66209C17.6061 6.26368 17.2496 5.91124 16.8996 5.56518C16.4274 5.09833 15.9669 4.64309 15.4298 4.10229C15.2945 3.96604 15.1543 3.82435 15.0079 3.67568L4.87616 13.916L3.71256 18.5L8.3771 16.9118L12.4481 13.0002C14.0128 11.4741 14.815 10.6745 15.7054 9.78696C16.3298 9.16449 16.9976 8.49875 18.0024 7.50881C18.1309 7.38218 18.2649 7.25025 18.4051 7.11242C18.408 7.10379 18.4142 7.10186 18.4208 7.0998C18.4256 7.09834 18.4305 7.09681 18.4346 7.09274C18.4346 7.09277 18.4347 7.09272 18.4346 7.09274C18.2875 6.94479 18.1468 6.80367 18.0109 6.66797Z"
         fill="#528693"
+        fillRule="evenodd"
+        d="M18.748 6.67a.6.6 0 0 1-.075.91c-1.204 1.184-1.955 1.932-2.653 2.628a359.59 359.59 0 0 1-3.265 3.222l-.004.003-4.07 3.912a.6.6 0 0 1-.223.135l-4.665 1.588a.6.6 0 0 1-.775-.716l1.164-4.584a.6.6 0 0 1 .155-.274L14.47 3.254a.6.6 0 0 1 .854 0c.73.741 1.294 1.3 1.88 1.879.47.464.953.941 1.545 1.537Zm-.85-.002-.006-.006c-.398-.398-.755-.75-1.105-1.097a216.01 216.01 0 0 1-1.892-1.89L4.764 13.917 3.6 18.5l4.665-1.588L12.335 13c1.565-1.526 2.367-2.325 3.258-3.213.624-.623 1.292-1.288 2.297-2.278l.402-.397c.003-.008.01-.01.016-.012.005-.002.01-.003.014-.007l-.424-.425Z"
+        clipRule="evenodd"
       />
     </svg>
   );

package/src/iconography/index.ts

@@ -3,6 +3,7 @@ import { App } from './app';
 import { Arrow } from './arrow';
 import { Atom } from './atom';
 import { BillingPayments } from './billing-payments';
+import { Bin } from './bin';
 import { Cancel } from './cancel';
 import { Catalogue } from './catalogue';
 import { CheckWithCircle } from './check-with-circle';
@@ -28,6 +29,7 @@ import { Key } from './key';
 import { Language } from './language';
 import { LockClosed } from './lock-closed';
 import { Multilingual } from './multilingual';
+import { Mushroom } from './mushroom';
 import { NailPolish } from './nail-polish';
 import { Order } from './order';
 import { Particle } from './particle';
@@ -44,6 +46,7 @@ import { SubscriptionContracts } from './subscription-contracts';
 import { SubscriptionPlans } from './subscription-plans';
 import { Target } from './target';
 import { Topics } from './topics';
+import { Unpublish } from './unpublish';
 import { Usage } from './usage';
 import { UsageMeter } from './usage-meter';
 import { UserCard } from './user-card';
@@ -56,6 +59,7 @@ export const Icon = {
   Arrow,
   Atom,
   BillingPayments,
+  Bin,
   Cancel,
   Catalogue,
   CheckWithCircle,
@@ -81,6 +85,7 @@ export const Icon = {
   Language,
   LockClosed,
   Multilingual,
+  Mushroom,
   NailPolish,
   Order,
   Particle,
@@ -101,6 +106,7 @@ export const Icon = {
   Target,
   Topics,
   UsageMeter,
+  Unpublish,
   Usage,
   UserCard,
   Users,

package/src/iconography/mushroom.tsx

@@ -0,0 +1,74 @@
+import { forwardRef, SVGProps } from 'react';
+
+type MushroomProps = SVGProps<SVGSVGElement>;
+
+type MushroomRef = SVGSVGElement;
+
+export const Mushroom = forwardRef<MushroomRef, MushroomProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        fill="#fff"
+        d="m6.102 13.239 2.683 1.042 6.438-.722s.33 3.881-1.237 4.711c-1.71.906-6.004.714-6.976-.83-1.092-1.735-.908-4.201-.908-4.201Z"
+      />
+      <path
+        fill="#468695"
+        fillRule="evenodd"
+        d="m5.564 12.386 3.301 1.283 6.904-.775.052.614-.598.051-6.438.722-2.683-1.042-.598-.045.06-.808Zm.53 1.493c-.01-.393.008-.64.008-.64l-.598-.045v.012l-.002.026a8.228 8.228 0 0 0-.01.419c-.002.275.01.66.058 1.103.095.873.337 2.027.953 3.006.34.541.928.905 1.549 1.147.632.247 1.371.397 2.115.464 1.46.133 3.096-.04 4.1-.57.572-.304.917-.854 1.132-1.397.217-.551.33-1.174.39-1.738a12.514 12.514 0 0 0 .036-2.106l-.003-.037V13.51l-.001-.002-.598.051c0 .003.02.237.027.601.02 1.123-.082 3.484-1.264 4.11-1.71.906-6.004.714-6.976-.83-.746-1.185-.896-2.713-.917-3.561Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#BFF6F8"
+        d="M17.618 9.944c0 3.195-3.875 4.271-6.712 4.271-5.683 0-6.976-2.556-6.976-4.512 0-2.837 4.138-7.1 6.976-7.1 2.837 0 6.712 3.22 6.712 7.34Z"
+      />
+      <path
+        fill="#468695"
+        fillRule="evenodd"
+        d="M15.596 13.813c-1.433.724-3.212 1.002-4.69 1.002-2.921 0-4.827-.656-6.009-1.666-1.195-1.022-1.567-2.334-1.567-3.446 0-.845.304-1.744.763-2.592.463-.854 1.104-1.697 1.832-2.441.727-.744 1.555-1.403 2.399-1.879.837-.472 1.731-.788 2.582-.788 1.622 0 3.444.905 4.843 2.3 1.411 1.407 2.469 3.388 2.469 5.64 0 1.9-1.174 3.139-2.622 3.87Zm-4.69.402c2.837 0 6.712-1.076 6.712-4.271 0-4.122-3.875-7.34-6.712-7.34-2.838 0-6.976 4.262-6.976 7.1 0 1.954 1.293 4.511 6.976 4.511Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#fff"
+        d="M4.06 8.155c3.643 2.103 2.76 4.098 1.826 5.403 0 0-.953-.59-1.365-1.153a4.633 4.633 0 0 1-.865-2.058c-.147-.933.404-2.192.404-2.192Z"
+      />
+      <path
+        fill="#468695"
+        fillRule="evenodd"
+        d="M4.279 12.582a4.933 4.933 0 0 1-.92-2.189c-.083-.53.032-1.13.154-1.572a6.909 6.909 0 0 1 .264-.769l.005-.012.002-.004c0-.001 0-.002.276.119l-.276-.12.135-.308.29.168c1.86 1.073 2.643 2.164 2.778 3.223.133 1.044-.382 1.95-.857 2.615l-.163.228-.239-.148-.003-.002-.01-.006-.033-.02a8.67 8.67 0 0 1-.505-.352c-.293-.222-.664-.532-.898-.851Zm1.527.563c.383-.584.676-1.244.586-1.951-.095-.745-.63-1.637-2.18-2.599-.038.11-.08.241-.12.386-.117.42-.203.918-.14 1.32.112.713.382 1.34.811 1.926.179.244.49.51.776.726.097.073.189.139.267.192Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#fff"
+        d="M15.12 13.599c-1.09-4.064.945-4.85 2.529-5.113 0 0 .348 1.312.24 2.002-.118.764-.389 1.176-.843 1.8-.556.764-1.927 1.311-1.927 1.311Z"
+      />
+      <path
+        fill="#468695"
+        fillRule="evenodd"
+        d="M18.186 10.534c-.13.837-.436 1.296-.898 1.931-.317.436-.847.79-1.267 1.026a7.779 7.779 0 0 1-.772.379l-.013.005-.004.002-.113-.278.112.278-.314.126-.088-.326c-.555-2.074-.337-3.4.316-4.243.644-.833 1.65-1.11 2.454-1.244l.27-.044.07.263v.005l.004.012.011.045.04.163c.031.138.073.329.11.542.074.414.144.959.082 1.358Zm-.763-1.7c-.688.141-1.365.4-1.804.967-.46.594-.712 1.602-.296 3.378.116-.056.255-.127.404-.21.405-.229.838-.53 1.076-.857.448-.615.683-.98.79-1.67.045-.29-.006-.746-.08-1.161-.03-.17-.062-.325-.09-.448Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#fff"
+        d="M13.758 3.166C10.783 6.141 8.7 4.81 7.68 3.57c0 0 1.192-.774 1.843-1.027.72-.279 1.269-.29 2.037-.21.938.1 2.197.834 2.197.834Z"
+      />
+      <path
+        fill="#468695"
+        fillRule="evenodd"
+        d="M9.416 2.263c.78-.303 1.382-.313 2.177-.229.519.055 1.104.28 1.542.48a10.064 10.064 0 0 1 .713.359l.044.024.012.007.004.002.337.197-.275.275c-1.527 1.527-2.877 1.998-4.018 1.868-1.13-.128-1.969-.837-2.503-1.486l-.213-.26.281-.183.004-.002.01-.007.04-.025a20.263 20.263 0 0 1 .634-.39c.379-.225.86-.494 1.21-.63ZM8.139 3.634c.47.493 1.103.927 1.88 1.016.838.095 1.919-.202 3.234-1.414a9.412 9.412 0 0 0-.366-.176c-.426-.193-.939-.385-1.358-.429-.741-.079-1.237-.065-1.896.191-.3.116-.741.36-1.122.586-.138.083-.266.16-.372.226Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#fff"
+        d="M12.719 9.265c0 .918-.549 2.113-1.492 2.113s-1.924-1.195-1.924-2.113c0-.92-.055-1.88.888-1.88.943 0 2.528.96 2.528 1.88Z"
+      />
+      <path
+        fill="#468695"
+        fillRule="evenodd"
+        d="M12.837 10.98c-.316.513-.852.998-1.61.998-.713 0-1.345-.436-1.766-.916-.426-.485-.758-1.148-.758-1.797V9.12c-.002-.394-.005-.9.115-1.31.073-.248.205-.52.457-.725.257-.211.575-.3.916-.3.634 0 1.384.304 1.959.7.295.205.576.454.788.739.21.281.38.637.38 1.04 0 .563-.163 1.202-.48 1.716Zm-1.61.398c.943 0 1.492-1.195 1.492-2.113 0-.92-1.585-1.88-2.528-1.88-.893 0-.89.863-.888 1.735v.145c0 .918.98 2.113 1.924 2.113ZM10.913 15.51c.237 0 .43.134.43.3v.966c0 .166-.193.3-.43.3-.238 0-.43-.134-.43-.3v-.966c0-.166.192-.3.43-.3ZM13.815 15.158c.238 0 .43.135.43.3v.966c0 .166-.192.3-.43.3-.237 0-.43-.134-.43-.3v-.966c0-.165.193-.3.43-.3Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+});
+
+Mushroom.displayName = 'MushroomIcon';

package/src/iconography/unpublish.tsx

@@ -0,0 +1,43 @@
+import { forwardRef, SVGProps } from 'react';
+
+type UnpublishProps = SVGProps<SVGSVGElement>;
+
+type UnpublishRef = SVGSVGElement;
+
+export const Unpublish = forwardRef<UnpublishRef, UnpublishProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        fill="#fff"
+        d="M19.055 13.054c-.595 1.263-1.441 1.553-3.22 1.553-3.734 0-5.845-.123-9.562-.123-1.725 0-3.546-.242-4.082-1.92-.34-1.064-.153-2.123.496-2.817.473-.493 1.014-.699 1.76-.763.563-.048 1.429.226 1.429.226s-.324-2.173.61-2.764c.37-.234.64-.306 1.078-.308.343-.003.86.18.86.18l.911.642s1.164-2.957 3.686-2.957c.217 0 .434.022.647.067 1.136.242 2.228.971 2.757 2.259.405.986.05 2.729.05 2.729s1.887.405 2.454 1.338c.54.888.57 1.718.126 2.658Z"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M2.254 9.331c.6-.625 1.294-.872 2.143-.944.27-.023.568.008.825.052a6.314 6.314 0 0 1 .01-.424c.02-.339.072-.727.199-1.087.125-.357.344-.742.734-.989.219-.138.432-.244.671-.311a2.67 2.67 0 0 1 .724-.09c.255-.002.534.061.715.109a5.195 5.195 0 0 1 .317.094l.022.008.006.002h.002l.001.001-.2.566s-.516-.183-.86-.18c-.437.002-.707.074-1.077.308-.607.384-.683 1.436-.662 2.125.012.372.052.639.052.639s-.279-.088-.622-.156c-.263-.05-.563-.09-.806-.07-.747.064-1.288.27-1.76.763-.65.694-.837 1.753-.497 2.817.536 1.678 2.357 1.92 4.082 1.92 1.856 0 3.312.03 4.77.062 1.46.03 2.923.061 4.793.061 1.778 0 2.624-.29 3.22-1.553.442-.94.412-1.77-.127-2.658-.567-.933-2.455-1.338-2.455-1.338s.357-1.743-.049-2.73c-.529-1.287-1.621-2.016-2.757-2.258a3.144 3.144 0 0 0-.647-.067c-1.83 0-2.945 1.557-3.419 2.411-.18.324-.267.546-.267.546l-.911-.642.2-.566a.602.602 0 0 1 .146.075l.34.24c.158-.28.376-.622.658-.966.66-.805 1.735-1.698 3.252-1.698.26 0 .517.026.77.08h.003C15.09 3.759 16.364 4.6 16.98 6.1c.26.63.26 1.432.22 2.003-.013.19-.031.365-.05.517.166.051.36.118.562.2.552.22 1.336.615 1.73 1.263.311.513.493 1.04.518 1.594.025.554-.109 1.094-.362 1.632-.342.725-.792 1.237-1.461 1.54-.632.287-1.399.357-2.301.357-1.875 0-3.342-.03-4.801-.061h-.004c-1.458-.031-2.908-.062-4.758-.062-.876 0-1.851-.059-2.693-.367-.87-.319-1.624-.916-1.96-1.97-.393-1.228-.197-2.527.629-3.41l.005-.006Z"
+        clipRule="evenodd"
+      />
+      <path fill="#BFF6F8" d="M14.8 14.25a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M15.4 14.25a4.35 4.35 0 1 1-8.7 0 4.35 4.35 0 0 1 8.7 0ZM11.05 18a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M9.088 12.288a.3.3 0 0 1 .424 0l3.5 3.5a.3.3 0 1 1-.424.424l-3.5-3.5a.3.3 0 0 1 0-.424Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M9.088 16.212a.3.3 0 0 1 0-.424l3.5-3.5a.3.3 0 1 1 .424.424l-3.5 3.5a.3.3 0 0 1-.424 0Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+});
+
+Unpublish.displayName = 'UnpublishIcon';

package/src/rich-text-editor/model/crystallize-to-lexical.ts

@@ -15,13 +15,12 @@ import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
 import { $createTableCellNode, $createTableNode, $createTableRowNode } from '@lexical/table';
 
 import type { CrystallizeRichTextNode, CrystallizeRichText } from '../types/crystallize-rich-text-types';
+import { parseInitialState } from './parse-initial-state';
 
 export function composeInitialState({ richText }: { richText: CrystallizeRichText }) {
   return function setLexicalState() {
     const root = $getRoot();
 
-    const richTextArray = Array.isArray(richText) ? richText : [richText];
-
     function handleNode({
       crystallizeContentNode,
       lexicalParent,
@@ -196,7 +195,9 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
       }
     }
 
-    richTextArray.forEach(crystallizeContentNode => handleNode({ crystallizeContentNode, lexicalParent: root }));
+    parseInitialState({ richText }).forEach(crystallizeContentNode =>
+      handleNode({ crystallizeContentNode, lexicalParent: root }),
+    );
   };
 }
 

package/src/rich-text-editor/model/parse-initial-state.test.ts

@@ -0,0 +1,48 @@
+/* eslint-disable no-console */
+
+import type { CrystallizeRichText } from '../rich-text-editor';
+import { parseInitialState } from './parse-initial-state';
+
+describe('RichTextEditor parseInitialState', () => {
+  it('ensures that the initial state is an array', async () => {
+    expect(
+      parseInitialState({
+        richText: {
+          kind: 'block',
+          type: 'paragraph',
+          textContent: 'hello',
+        },
+      }),
+    ).toEqual([
+      {
+        kind: 'block',
+        type: 'paragraph',
+        textContent: 'hello',
+      },
+    ]);
+  });
+
+  it('ensures that all root nodes are block elements', async () => {
+    expect(
+      parseInitialState({
+        richText: [
+          {
+            kind: 'inline',
+            textContent: 'hello',
+          },
+        ],
+      }),
+    ).toEqual([
+      {
+        kind: 'block',
+        type: 'paragraph',
+        children: [
+          {
+            kind: 'inline',
+            textContent: 'hello',
+          },
+        ],
+      } as CrystallizeRichText,
+    ]);
+  });
+});

package/src/rich-text-editor/model/parse-initial-state.ts

@@ -0,0 +1,20 @@
+import type { CrystallizeRichText, CrystallizeRichTextNode } from '../types/crystallize-rich-text-types';
+
+export function parseInitialState({ richText }: { richText: CrystallizeRichText }): CrystallizeRichTextNode[] {
+  let richTextArray = Array.isArray(richText) ? richText : [richText];
+
+  // Ensure all root items are block elements
+  richTextArray = richTextArray.map(rootNode => {
+    if (!rootNode.kind || rootNode.kind === 'inline') {
+      return {
+        type: 'paragraph',
+        kind: 'block',
+        children: [rootNode],
+      };
+    }
+
+    return rootNode;
+  });
+
+  return richTextArray;
+}

package/src/rich-text-editor/rich-text-editor.stories.tsx

@@ -459,3 +459,16 @@ export const CustomTranslation: Story = {
     },
   },
 };
+
+export const Bug: Story = {
+  args: {
+    initialData: [
+      {
+        kind: 'inline',
+        type: null,
+        textContent:
+          'Krigsårene frem mot 1814 inneholder noen av de mest dramatiske begivenhetene i både dansk og norsk historie. I denne boken finner du for første gang en samlet fremstilling av krigsårene mellom 1807 og 1814 fra et felles dansk-norsk perspektiv.Dette verket er et sentralt bidrag i markeringen av 200-årsjubileet for grunnloven og den dansk-norske skilsmissen, skrevet av en dansk og en norsk historiker. I boken forteller de om krigsbegivenhetene både til lands og til sjøs, hvordan de ble opplevd blant ulike samfunnslag fra elitene i København, Christiania og Kiel, til husmenn i Østerdalen, bønder på Lolland-Falster og småhandelsfolk i Slesvig-Holstein.1814 var det moderne Norges fødsel. Norge ble selvstendig med en av Europas mest liberale grunnlover, og både selvstendigheten og grunnloven fikk leve videre selv om Norge mot slutten av året ble forent med Sverige i en løs union. Politisk sett gjorde dette Norge til en av Napoleonskrigenes vinnere, men ""mirakelåret"" 1814 ble født av et nederlag.',
+      },
+    ],
+  },
+};

package/src/tag/tag.css

@@ -1,7 +1,37 @@
 .c-tag {
-  @apply inline-flex items-center rounded border border-solid border-gray-200-700 bg-purple-50-900 p-1 text-center text-xs font-medium text-gray-700-200 shadow-sm;
+  @apply inline-grid grid-flow-col items-center gap-2 whitespace-nowrap;
+  @apply rounded font-medium text-gray-700-200;
+  @apply border border-solid border-transparent;
+
+  &__prepend {
+    @apply -ml-2 flex items-center;
+  }
+
+  &__remove-button {
+    @apply m-0 -mr-2 cursor-pointer border-none bg-transparent p-0 text-[0];
+  }
+}
+
+.c-tag-default {
+  @apply border-gray-200-700 bg-purple-50-900;
 }
 
 .c-tag-elevate {
-  @apply bg-elevate;
+  @apply bg-elevate shadow;
+}
+
+.c-tag-xs {
+  @apply h-6 px-2 text-xs;
+}
+
+.c-tag-sm {
+  @apply h-9 px-4 text-sm;
+}
+
+.c-tag-md {
+  @apply h-11 px-6 text-base;
+}
+
+.c-tag-lg {
+  @apply h-14 px-6 text-lg;
 }

package/src/tag/tag.tsx

@@ -1,27 +1,52 @@
 import { cva, VariantProps } from 'class-variance-authority';
-import type { ComponentProps } from 'react';
 
+import { Icon } from '../iconography';
 import './tag.css';
 
 type TagStylesProps = VariantProps<typeof tagStyles>;
 const tagStyles = cva('c-tag', {
   variants: {
     variant: {
-      default: '',
+      default: 'c-tag-default',
       elevate: 'c-tag-elevate',
     },
+    size: {
+      xs: 'c-tag-xs',
+      sm: 'c-tag-sm',
+      md: 'c-tag-md',
+      lg: 'c-tag-lg',
+    },
   },
   defaultVariants: {
     variant: 'default',
+    size: 'xs',
   },
 });
 
-export type TagProps = ComponentProps<'span'> & TagStylesProps;
+export type TagProps = React.ComponentProps<'div'> &
+  TagStylesProps & {
+    prepend?: React.ReactNode;
+    onRemove?: () => void;
+  };
 
-export function Tag({ children, className, variant, ...delegated }: TagProps) {
+export function Tag({ children, className, variant, size, prepend, onRemove, ...delegated }: TagProps) {
   return (
-    <span className={tagStyles({ className, variant })} {...delegated}>
+    <div className={tagStyles({ className, variant, size })} {...delegated}>
+      {!prepend ? null : <span className="c-tag__prepend">{prepend}</span>}
       {children}
-    </span>
+      {onRemove && (
+        <button
+          type="button"
+          className="c-tag__remove-button"
+          onClick={e => {
+            e.stopPropagation();
+            onRemove();
+          }}
+        >
+          <Icon.Cancel width={12} height={12} />
+          <span className="sr-only">Remove</span>
+        </button>
+      )}
+    </div>
   );
 }