@crystallize/design-system 1.16.1 → 1.16.3

package/dist/index.mjs

@@ -107,6 +107,11 @@ var buttonStyles = cva("c-btn", {
       intent: "danger",
       variant: "elevate",
       class: "c-btn-danger c-btn-elevate"
+    },
+    {
+      intent: "action",
+      variant: "elevate",
+      class: "c-btn-action c-btn-elevate"
     }
   ],
   defaultVariants: {
@@ -1729,29 +1734,36 @@ Info.displayName = "InfoIcon";
 
 // src/iconography/key.tsx
 import { forwardRef as forwardRef33 } from "react";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
 var Key = forwardRef33((delegated, ref) => {
-  return /* @__PURE__ */ jsx40("svg", {
+  return /* @__PURE__ */ jsxs32("svg", {
     ref,
-    viewBox: "0 0 24 25",
-    width: "24",
-    height: "25",
+    viewBox: "0 0 22 22",
+    width: "22",
+    height: "22",
     fill: "none",
     ...delegated,
-    children: /* @__PURE__ */ jsx40("path", {
-      fill: "#BFF6F8",
-      stroke: "#528693",
-      d: "M23.486 5.617a6.308 6.308 0 0 0-2.738-4.03 6.314 6.314 0 0 0-2.335-.942 6.251 6.251 0 0 0-2.51.051c-.928.212-1.799.637-2.545 1.243a6.435 6.435 0 0 0-1.762 2.257 6.617 6.617 0 0 0-.11 5.42 3308.703 3308.703 0 0 1-3.087 3.164l-.042-.043c-.335-.34-1.163-1.187-1.495-1.537-.315-.333-.644-.403-.868-.403-.323 0-.616.138-.868.41-.273.291-.633.671-1.007 1.039-.326.32-.395.657-.396.884 0 .33.135.633.402.9.353.35 1.191 1.208 1.535 1.56l-.545.556-.048-.05c-.331-.337-1.155-1.18-1.484-1.526-.256-.269-.549-.405-.868-.405h-.007c-.222 0-.552.073-.864.409-.312.336-.65.686-1.025 1.058-.319.317-.385.653-.385.878 0 .328.13.625.39.883.355.355 1.195 1.216 1.543 1.573l-.048.05c-.218.221-.443.45-.663.685-.419.449-.65 1.048-.643 1.67a2.41 2.41 0 0 0 1.436 2.181c.284.123.588.187.896.189a2.286 2.286 0 0 0 1.592-.661c.067-.065.127-.127.186-.187l.057-.06 9.604-9.845c.899.388 1.72.562 2.504.528h.017c1.04 0 2.003-.232 2.864-.692a6.458 6.458 0 0 0 2.862-3.016c.595-1.293.75-2.743.455-4.19ZM14.437 7.04c-.016-.738.295-1.487.851-2.056.567-.578 1.312-.9 2.043-.88.755.014 1.475.331 2.003.884.529.553.823 1.298.82 2.072 0 1.631-1.26 2.904-2.866 2.904h-.002c-1.563-.001-2.815-1.283-2.849-2.924Z"
-    })
+    children: [
+      /* @__PURE__ */ jsx40("path", {
+        d: "M19.8945 5.95026C19.6477 4.73793 18.937 3.69147 17.8935 3.00418C17.3743 2.6618 16.7941 2.42807 16.1865 2.31644C15.5788 2.20481 15.0511 2.19471 14.3527 2.35376C13.5642 2.53331 13.1208 2.75386 12.4919 3.26216C11.8563 3.77585 11.5544 4.17318 11.2039 4.91138C10.8646 5.62576 10.7544 6.19904 10.7405 6.88273C10.7266 7.56642 10.8573 8.24508 11.1235 8.87212C10.2697 9.74839 10.1453 9.89094 9.46986 10.5822C9.21027 10.3192 8.95563 10.0513 8.70158 9.78292C8.47173 9.53937 8.2306 9.48806 8.06702 9.48806C7.83118 9.48806 7.61684 9.5896 7.43247 9.78834C7.23329 10.0008 6.96995 10.2787 6.69709 10.5472C6.45878 10.7806 6.40802 11.0274 6.40766 11.1933C6.40766 11.435 6.50567 11.6562 6.70132 11.8506C6.95902 12.1064 7.46819 12.6368 7.46819 12.6368L6.46693 13.6448C6.46693 13.6448 5.71608 12.8816 5.3473 12.4936C5.1601 12.2966 4.94612 12.1969 4.71274 12.1969H4.70781C4.54564 12.1969 4.30416 12.2507 4.07607 12.4961C3.84798 12.7414 3.60051 12.9973 3.3273 13.2694C3.09392 13.5014 3.04527 13.7464 3.04527 13.9108C3.04527 14.1507 3.14116 14.3679 3.33047 14.5565C3.58993 14.8156 4.20439 15.4454 4.45856 15.7063C4.28469 15.8845 4.10935 16.0613 3.93894 16.2429C3.63263 16.5712 3.46379 17.0092 3.46853 17.4634C3.47328 17.9176 3.65123 18.3519 3.96432 18.6733C4.12254 18.8375 4.31076 18.9681 4.51824 19.0577C4.72571 19.1473 4.94837 19.1941 5.1735 19.1955C5.60732 19.1934 6.02377 19.0206 6.33685 18.7127C8.80299 16.3293 11.1381 13.791 13.5345 11.3369C14.1912 11.6205 14.7909 11.7474 15.3644 11.7232H15.3771C16.1365 11.7232 16.7219 11.6011 17.4701 11.2173C18.526 10.6756 19.127 9.95834 19.562 9.01305C19.997 8.06776 20.1098 7.00829 19.8945 5.95026ZM13.2806 6.98913C13.2818 6.35405 13.4569 5.9388 13.9028 5.48665C14.3486 5.0347 14.761 4.83886 15.3958 4.84381C16.0207 4.84868 16.4251 5.04079 16.86 5.48958C17.3025 5.94622 17.4666 6.36776 17.4592 7.00359C17.4455 8.16811 16.5384 9.12651 15.3648 9.12651H15.3627C14.1974 9.12592 13.2786 8.15439 13.2806 6.98913Z",
+        fill: "#BFF6F8"
+      }),
+      /* @__PURE__ */ jsx40("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M14.2861 2.06126C15.0279 1.89233 15.5969 1.90313 16.2407 2.02139C16.8882 2.14034 17.5061 2.38935 18.0586 2.75375C19.168 3.48444 19.9256 4.59912 20.1884 5.89043C20.4159 7.00773 20.2975 8.13239 19.8345 9.13848C19.375 10.1371 18.7298 10.9082 17.607 11.4842C16.8141 11.891 16.1813 12.0232 15.3771 12.0232H15.3706C14.803 12.0461 14.2219 11.9333 13.6076 11.6916C12.8526 12.4665 12.1015 13.2514 11.3489 14.0378C9.77024 15.6873 8.18529 17.3435 6.54613 18.9277C6.17818 19.2889 5.68752 19.493 5.17496 19.4955L5.17167 19.4955C4.90609 19.4939 4.64362 19.4386 4.3993 19.3331C4.1553 19.2278 3.9344 19.0744 3.74899 18.8822C3.38162 18.5049 3.17408 17.9966 3.16855 17.4666C3.16301 16.9363 3.36003 16.4236 3.7196 16.0382C3.82475 15.9262 4.03922 15.706 4.03922 15.706C4.03922 15.706 3.32162 14.9716 3.11872 14.769C2.88007 14.5311 2.74527 14.2397 2.74527 13.9108C2.74527 13.6833 2.81488 13.3558 3.1158 13.0566C3.38648 12.787 3.63119 12.534 3.85634 12.2918C4.14888 11.9772 4.47429 11.8969 4.7078 11.8969H4.71274C5.04159 11.8969 5.33075 12.0407 5.56473 12.2869C5.74754 12.4792 6.02614 12.7657 6.25999 13.005C6.33588 13.0827 6.4069 13.1553 6.46821 13.2178L7.04848 12.6337C7.02239 12.6067 6.9947 12.5781 6.96596 12.5484C6.80638 12.3838 6.61651 12.1891 6.48996 12.0635C6.24557 11.8206 6.10766 11.5255 6.10766 11.1933C6.10815 10.9628 6.181 10.6329 6.48692 10.3331C6.75501 10.0693 7.01468 9.79536 7.21306 9.58374C7.4447 9.33431 7.73505 9.18807 8.06702 9.18807C8.29928 9.18807 8.62426 9.26401 8.91959 9.57685C9.10286 9.77043 9.28546 9.96275 9.46954 10.1527C9.68431 9.93175 9.83739 9.7722 10.0018 9.60089C10.1998 9.39453 10.4141 9.17111 10.7724 8.8027C10.5401 8.18952 10.4272 7.5352 10.4406 6.87665C10.4552 6.15474 10.5737 5.53909 10.9329 4.7827C11.3015 4.00641 11.6307 3.57251 12.3033 3.02885C12.9666 2.49276 13.4515 2.25131 14.2861 2.06126ZM7.68462 12.4291L7.88748 12.6404L6.4659 14.0716L6.25307 13.8552L6.12971 13.7296C6.05344 13.6519 5.94791 13.5442 5.83082 13.4243C5.59705 13.1851 5.31582 12.8959 5.12984 12.7003C4.98945 12.5525 4.85064 12.4969 4.71274 12.4969H4.7078C4.61699 12.4969 4.45943 12.5243 4.29579 12.7004C4.06482 12.9488 3.81465 13.2074 3.53899 13.482C3.37316 13.6468 3.34527 13.8094 3.34527 13.9108C3.34527 14.0616 3.40239 14.2047 3.54221 14.344C3.80349 14.6049 4.41991 15.2367 4.67344 15.497L4.87754 15.7065L4.6733 15.9158C4.63245 15.9577 4.59185 15.9991 4.55148 16.0404C4.41786 16.1768 4.28682 16.3106 4.15806 16.4478C3.90514 16.719 3.76457 17.0823 3.76851 17.4603C3.77246 17.8385 3.92067 18.1986 4.17922 18.464L4.18033 18.4652C4.31121 18.601 4.46652 18.7086 4.63716 18.7823C4.80725 18.8558 4.98946 18.8941 5.17354 18.8955L5.17203 18.8955L5.17532 18.8955L5.17354 18.8955C5.52759 18.8934 5.8688 18.7522 6.12651 18.4988L6.12836 18.497C7.75985 16.9203 9.33034 15.2792 10.904 13.6348C11.7056 12.7971 12.5081 11.9586 13.3198 11.1273L13.464 10.9797L13.6534 11.0615C14.2788 11.3316 14.8332 11.4453 15.3518 11.4234L15.3644 11.4229L15.3771 11.4232C16.0917 11.4232 16.6298 11.3112 17.3332 10.9504C18.3222 10.443 18.879 9.77955 19.2895 8.88764C19.6965 8.00315 19.8038 7.00887 19.6005 6.01012C19.3698 4.87684 18.7061 3.89862 17.7285 3.25473C17.2427 2.93437 16.7001 2.71582 16.1323 2.61151C15.5607 2.50651 15.0743 2.49712 14.4193 2.64628C13.677 2.81532 13.275 3.01499 12.6805 3.4955C12.082 3.97922 11.8073 4.33997 11.4749 5.04008C11.1556 5.71245 11.0536 6.24336 11.0405 6.88883C11.0274 7.53036 11.15 8.16698 11.3996 8.7549L11.4776 8.93858L11.3384 9.0815C10.9129 9.51811 10.6644 9.77704 10.4358 10.0151C10.2142 10.246 10.0114 10.4572 9.68443 10.7919L9.47093 11.0104L9.25634 10.7929C8.99434 10.5275 8.73781 10.2576 8.48371 9.98917C8.31939 9.81506 8.16187 9.78807 8.06702 9.78807C7.92755 9.78807 7.78942 9.84468 7.6524 9.99238L7.65133 9.99352C7.45148 10.2067 7.1848 10.4882 6.9075 10.761C6.73719 10.9278 6.70794 11.0923 6.70766 11.1936C6.70774 11.3447 6.76592 11.4918 6.91268 11.6377M14.6993 5.26848C14.5063 5.35343 14.3222 5.48871 14.1164 5.69732C13.9122 5.90435 13.7828 6.08986 13.7019 6.28448C13.6211 6.47884 13.5811 6.70037 13.5806 6.98968C13.5789 7.99854 14.3727 8.82602 15.3628 8.82652H15.3648C16.3635 8.82652 17.1473 8.01108 17.1592 7.00008C17.1626 6.70925 17.1266 6.48571 17.0492 6.28946C16.9719 6.09342 16.8461 5.90632 16.6446 5.69836C16.4445 5.49196 16.2651 5.35857 16.0764 5.27398C15.8889 5.18989 15.6744 5.146 15.3935 5.14381C15.109 5.14159 14.8908 5.18419 14.6993 5.26848ZM14.4576 4.71932C14.7424 4.59395 15.0479 4.5411 15.3981 4.54383C15.7422 4.54651 16.0423 4.60112 16.3219 4.7265C16.6004 4.85137 16.8405 5.03842 17.0754 5.28081C17.3164 5.5295 17.4939 5.78148 17.6074 6.06934C17.7208 6.35697 17.7632 6.66212 17.7591 7.00712C17.7437 8.32517 16.7132 9.42652 15.3648 9.42652H15.3627C14.0223 9.42584 12.9783 8.31027 12.9806 6.98862C12.9812 6.64284 13.0294 6.33921 13.1479 6.05413C13.2663 5.76932 13.4475 5.52112 13.6893 5.27599C13.9293 5.03266 14.1742 4.84405 14.4576 4.71932Z",
+        fill: "#528693"
+      })
+    ]
   });
 });
 Key.displayName = "KeyIcon";
 
 // src/iconography/language.tsx
 import { forwardRef as forwardRef34 } from "react";
-import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
 var Language = forwardRef34((delegated, ref) => {
-  return /* @__PURE__ */ jsxs32("svg", {
+  return /* @__PURE__ */ jsxs33("svg", {
     ref,
     width: "34",
     height: "34",
@@ -1789,9 +1801,9 @@ Language.displayName = "LanguageProps";
 
 // src/iconography/lock-closed.tsx
 import { forwardRef as forwardRef35 } from "react";
-import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
 var LockClosed = forwardRef35((delegated, ref) => {
-  return /* @__PURE__ */ jsxs33("svg", {
+  return /* @__PURE__ */ jsxs34("svg", {
     ref,
     width: "17",
     height: "16",
@@ -1838,9 +1850,9 @@ LockClosed.displayName = "LockClosedIcon";
 
 // src/iconography/multilingual.tsx
 import { forwardRef as forwardRef36 } from "react";
-import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
 var Multilingual = forwardRef36((delegated, ref) => {
-  return /* @__PURE__ */ jsxs34("svg", {
+  return /* @__PURE__ */ jsxs35("svg", {
     ref,
     width: "34",
     height: "34",
@@ -1878,9 +1890,9 @@ Multilingual.displayName = "MultilingualIcon";
 
 // src/iconography/mushroom.tsx
 import { forwardRef as forwardRef37 } from "react";
-import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
 var Mushroom = forwardRef37((delegated, ref) => {
-  return /* @__PURE__ */ jsxs35("svg", {
+  return /* @__PURE__ */ jsxs36("svg", {
     ref,
     width: "22",
     height: "22",
@@ -1899,7 +1911,7 @@ var Mushroom = forwardRef37((delegated, ref) => {
         clipRule: "evenodd"
       }),
       /* @__PURE__ */ jsx44("path", {
-        fill: "#BFF6F8",
+        fill: "#FFA1DB",
         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"
       }),
       /* @__PURE__ */ jsx44("path", {
@@ -1955,9 +1967,9 @@ Mushroom.displayName = "MushroomIcon";
 
 // src/iconography/nail-polish.tsx
 import { forwardRef as forwardRef38 } from "react";
-import { jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
 var NailPolish = forwardRef38((delegated, ref) => {
-  return /* @__PURE__ */ jsxs36("svg", {
+  return /* @__PURE__ */ jsxs37("svg", {
     ref,
     width: "12",
     height: "16",
@@ -2039,9 +2051,9 @@ NailPolish.displayName = "NailPolishIcon";
 
 // src/iconography/order.tsx
 import { forwardRef as forwardRef39 } from "react";
-import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs38 } from "react/jsx-runtime";
 var Order = forwardRef39((delegated, ref) => {
-  return /* @__PURE__ */ jsxs37("svg", {
+  return /* @__PURE__ */ jsxs38("svg", {
     ref,
     width: "22",
     height: "23",
@@ -2080,9 +2092,9 @@ Order.displayName = "OrderIcon";
 
 // src/iconography/particle.tsx
 import { forwardRef as forwardRef40 } from "react";
-import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs39 } from "react/jsx-runtime";
 var Particle = forwardRef40((delegated, ref) => {
-  return /* @__PURE__ */ jsxs38("svg", {
+  return /* @__PURE__ */ jsxs39("svg", {
     ref,
     width: "22",
     height: "20",
@@ -2164,9 +2176,9 @@ Particle.displayName = "ParticleIcon";
 
 // src/iconography/people.tsx
 import { forwardRef as forwardRef41 } from "react";
-import { jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs40 } from "react/jsx-runtime";
 var People = forwardRef41((delegated, ref) => {
-  return /* @__PURE__ */ jsxs39("svg", {
+  return /* @__PURE__ */ jsxs40("svg", {
     ref,
     width: "17",
     height: "16",
@@ -2229,9 +2241,9 @@ People.displayName = "PeopleIcon";
 
 // src/iconography/percentage.tsx
 import { forwardRef as forwardRef42 } from "react";
-import { jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
 var Percentage = forwardRef42((delegated, ref) => {
-  return /* @__PURE__ */ jsxs40("svg", {
+  return /* @__PURE__ */ jsxs41("svg", {
     ref,
     width: "17",
     height: "16",
@@ -2276,9 +2288,9 @@ Percentage.displayName = "PercentageIcon";
 
 // src/iconography/pin.tsx
 import { forwardRef as forwardRef43 } from "react";
-import { jsx as jsx50, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs42 } from "react/jsx-runtime";
 var Pin = forwardRef43((delegated, ref) => {
-  return /* @__PURE__ */ jsxs41("svg", {
+  return /* @__PURE__ */ jsxs42("svg", {
     ref,
     width: "26",
     height: "26",
@@ -2309,9 +2321,9 @@ Pin.displayName = "PinIcon";
 
 // src/iconography/plans-and-pricing.tsx
 import { forwardRef as forwardRef44 } from "react";
-import { jsx as jsx51, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
 var PlansAndPricing = forwardRef44((delegated, ref) => {
-  return /* @__PURE__ */ jsxs42("svg", {
+  return /* @__PURE__ */ jsxs43("svg", {
     ref,
     width: "17",
     height: "16",
@@ -2370,9 +2382,9 @@ PlansAndPricing.displayName = "PlansAndPricingIcon";
 
 // src/iconography/price-list.tsx
 import { forwardRef as forwardRef45 } from "react";
-import { jsx as jsx52, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs44 } from "react/jsx-runtime";
 var PriceList = forwardRef45((delegated, ref) => {
-  return /* @__PURE__ */ jsxs43("svg", {
+  return /* @__PURE__ */ jsxs44("svg", {
     ref,
     width: "23",
     height: "22",
@@ -2427,9 +2439,9 @@ PriceList.displayName = "PriceListIcon";
 
 // src/iconography/price-tag.tsx
 import { forwardRef as forwardRef46 } from "react";
-import { jsx as jsx53, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs45 } from "react/jsx-runtime";
 var PriceTag = forwardRef46((delegated, ref) => {
-  return /* @__PURE__ */ jsxs44("svg", {
+  return /* @__PURE__ */ jsxs45("svg", {
     ref,
     width: "17",
     height: "16",
@@ -2476,9 +2488,9 @@ PriceTag.displayName = "PriceTagIcon";
 
 // src/iconography/product.tsx
 import { forwardRef as forwardRef47 } from "react";
-import { jsx as jsx54, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs46 } from "react/jsx-runtime";
 var Product = forwardRef47((delegated, ref) => {
-  return /* @__PURE__ */ jsxs45("svg", {
+  return /* @__PURE__ */ jsxs46("svg", {
     ref,
     width: "34",
     height: "34",
@@ -2521,9 +2533,9 @@ Product.displayName = "ProductIcon";
 
 // src/iconography/restricted-catalogue.tsx
 import { forwardRef as forwardRef48 } from "react";
-import { jsx as jsx55, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs47 } from "react/jsx-runtime";
 var RestrictedCatalogue = forwardRef48((delegated, ref) => {
-  return /* @__PURE__ */ jsxs46("svg", {
+  return /* @__PURE__ */ jsxs47("svg", {
     ref,
     width: "22",
     height: "22",
@@ -2578,9 +2590,9 @@ RestrictedCatalogue.displayName = "RestrictedCatalogueIcon";
 
 // src/iconography/rocket.tsx
 import { forwardRef as forwardRef49 } from "react";
-import { jsx as jsx56, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs48 } from "react/jsx-runtime";
 var Rocket = forwardRef49((delegated, ref) => {
-  return /* @__PURE__ */ jsxs47("svg", {
+  return /* @__PURE__ */ jsxs48("svg", {
     ref,
     width: "16",
     height: "16",
@@ -2619,9 +2631,9 @@ Rocket.displayName = "RocketIcon";
 
 // src/iconography/search.tsx
 import { forwardRef as forwardRef50 } from "react";
-import { jsx as jsx57, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs49 } from "react/jsx-runtime";
 var Search = forwardRef50((delegated, ref) => {
-  return /* @__PURE__ */ jsxs48("svg", {
+  return /* @__PURE__ */ jsxs49("svg", {
     ref,
     width: "22",
     height: "23",
@@ -2654,9 +2666,9 @@ Search.displayName = "SearchIcon";
 
 // src/iconography/settings.tsx
 import { forwardRef as forwardRef51 } from "react";
-import { jsx as jsx58, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs50 } from "react/jsx-runtime";
 var Settings = forwardRef51((delegated, ref) => {
-  return /* @__PURE__ */ jsxs49("svg", {
+  return /* @__PURE__ */ jsxs50("svg", {
     ref,
     width: "34",
     height: "34",
@@ -2690,9 +2702,9 @@ Settings.displayName = "SettingsIcon";
 
 // src/iconography/shapes.tsx
 import { forwardRef as forwardRef52 } from "react";
-import { jsx as jsx59, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs51 } from "react/jsx-runtime";
 var Shapes = forwardRef52((delegated, ref) => {
-  return /* @__PURE__ */ jsxs50("svg", {
+  return /* @__PURE__ */ jsxs51("svg", {
     ref,
     width: "23",
     height: "22",
@@ -2747,9 +2759,9 @@ Shapes.displayName = "ShapesIcon";
 
 // src/iconography/stock-location.tsx
 import { forwardRef as forwardRef53 } from "react";
-import { jsx as jsx60, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs52 } from "react/jsx-runtime";
 var StockLocation = forwardRef53((delegated, ref) => {
-  return /* @__PURE__ */ jsxs51("svg", {
+  return /* @__PURE__ */ jsxs52("svg", {
     ref,
     width: "17",
     height: "16",
@@ -2830,9 +2842,9 @@ StockLocation.displayName = "StockLocationIcon";
 
 // src/iconography/subscription.tsx
 import { forwardRef as forwardRef54 } from "react";
-import { jsx as jsx61, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs53 } from "react/jsx-runtime";
 var Subscription = forwardRef54((delegated, ref) => {
-  return /* @__PURE__ */ jsxs52("svg", {
+  return /* @__PURE__ */ jsxs53("svg", {
     ref,
     width: "34",
     height: "34",
@@ -2867,10 +2879,10 @@ Subscription.displayName = "SubscriptionIcon";
 
 // src/iconography/subscription-contracts.tsx
 import { forwardRef as forwardRef55 } from "react";
-import { jsx as jsx62, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs54 } from "react/jsx-runtime";
 var SubscriptionContracts = forwardRef55(
   (delegated, ref) => {
-    return /* @__PURE__ */ jsxs53("svg", {
+    return /* @__PURE__ */ jsxs54("svg", {
       ref,
       width: "23",
       height: "22",
@@ -2922,9 +2934,9 @@ SubscriptionContracts.displayName = "SubscriptionContractsIcon";
 
 // src/iconography/subscription-plans.tsx
 import { forwardRef as forwardRef56 } from "react";
-import { jsx as jsx63, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs55 } from "react/jsx-runtime";
 var SubscriptionPlans = forwardRef56((delegated, ref) => {
-  return /* @__PURE__ */ jsxs54("svg", {
+  return /* @__PURE__ */ jsxs55("svg", {
     ref,
     width: "23",
     height: "22",
@@ -2985,9 +2997,9 @@ SubscriptionPlans.displayName = "SubscriptionPlansIcon";
 
 // src/iconography/target.tsx
 import { forwardRef as forwardRef57 } from "react";
-import { jsx as jsx64, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs56 } from "react/jsx-runtime";
 var Target = forwardRef57((delegated, ref) => {
-  return /* @__PURE__ */ jsxs55("svg", {
+  return /* @__PURE__ */ jsxs56("svg", {
     ref,
     width: "23",
     height: "22",
@@ -3068,9 +3080,9 @@ Target.displayName = "TargetIcon";
 
 // src/iconography/topics.tsx
 import { forwardRef as forwardRef58 } from "react";
-import { jsx as jsx65, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs57 } from "react/jsx-runtime";
 var Topics = forwardRef58((delegated, ref) => {
-  return /* @__PURE__ */ jsxs56("svg", {
+  return /* @__PURE__ */ jsxs57("svg", {
     ref,
     width: "23",
     height: "23",
@@ -3129,9 +3141,9 @@ Topics.displayName = "TopicsIcon";
 
 // src/iconography/unpublish.tsx
 import { forwardRef as forwardRef59 } from "react";
-import { jsx as jsx66, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs58 } from "react/jsx-runtime";
 var Unpublish = forwardRef59((delegated, ref) => {
-  return /* @__PURE__ */ jsxs57("svg", {
+  return /* @__PURE__ */ jsxs58("svg", {
     ref,
     width: "22",
     height: "22",
@@ -3178,9 +3190,9 @@ Unpublish.displayName = "UnpublishIcon";
 
 // src/iconography/usage.tsx
 import { forwardRef as forwardRef60 } from "react";
-import { jsx as jsx67, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs59 } from "react/jsx-runtime";
 var Usage = forwardRef60((delegated, ref) => {
-  return /* @__PURE__ */ jsxs58("svg", {
+  return /* @__PURE__ */ jsxs59("svg", {
     ref,
     width: "23",
     height: "23",
@@ -3215,9 +3227,9 @@ Usage.displayName = "UsageIcon";
 
 // src/iconography/usage-meter.tsx
 import { forwardRef as forwardRef61 } from "react";
-import { jsx as jsx68, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs60 } from "react/jsx-runtime";
 var UsageMeter = forwardRef61((delegated, ref) => {
-  return /* @__PURE__ */ jsxs59("svg", {
+  return /* @__PURE__ */ jsxs60("svg", {
     ref,
     width: "17",
     height: "16",
@@ -3225,7 +3237,7 @@ var UsageMeter = forwardRef61((delegated, ref) => {
     fill: "none",
     ...delegated,
     children: [
-      /* @__PURE__ */ jsxs59("g", {
+      /* @__PURE__ */ jsxs60("g", {
         clipPath: "url(#a)",
         children: [
           /* @__PURE__ */ jsx68("path", {
@@ -3267,9 +3279,9 @@ UsageMeter.displayName = "UsageMeterIcon";
 
 // src/iconography/user-card.tsx
 import { forwardRef as forwardRef62 } from "react";
-import { jsx as jsx69, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs61 } from "react/jsx-runtime";
 var UserCard = forwardRef62((delegated, ref) => {
-  return /* @__PURE__ */ jsxs60("svg", {
+  return /* @__PURE__ */ jsxs61("svg", {
     ref,
     width: "17",
     height: "16",
@@ -3308,9 +3320,9 @@ UserCard.displayName = "UserCardIcon";
 
 // src/iconography/users.tsx
 import { forwardRef as forwardRef63 } from "react";
-import { jsx as jsx70, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs62 } from "react/jsx-runtime";
 var Users = forwardRef63((delegated, ref) => {
-  return /* @__PURE__ */ jsxs61("svg", {
+  return /* @__PURE__ */ jsxs62("svg", {
     ref,
     width: "24",
     height: "24",
@@ -3355,9 +3367,9 @@ Users.displayName = "UsersIcon";
 
 // src/iconography/warning.tsx
 import { forwardRef as forwardRef64 } from "react";
-import { jsx as jsx71, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs63 } from "react/jsx-runtime";
 var Warning = forwardRef64((delegated, ref) => {
-  return /* @__PURE__ */ jsxs62("svg", {
+  return /* @__PURE__ */ jsxs63("svg", {
     ref,
     xmlns: "http://www.w3.org/2000/svg",
     width: "22",
@@ -3466,7 +3478,7 @@ var Icon = {
 };
 
 // src/dialog/dialog.tsx
-import { jsx as jsx72, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs64 } from "react/jsx-runtime";
 var IconMap = {
   error: Icon.Error,
   info: Icon.Info,
@@ -3482,13 +3494,13 @@ var dialogContentStyles = cva5("c-dialog", {
 function DialogContent({ children, closable = true, type, className, container, ...delegated }) {
   const withIcon = typeof type !== "undefined";
   const IconComponent = type && IconMap[type];
-  return /* @__PURE__ */ jsxs63(DialogPrimitive.Portal, {
+  return /* @__PURE__ */ jsxs64(DialogPrimitive.Portal, {
     container,
     children: [
       /* @__PURE__ */ jsx72(DialogPrimitive.Overlay, {
         className: "c-dialog-overlay"
       }),
-      /* @__PURE__ */ jsxs63(DialogPrimitive.Content, {
+      /* @__PURE__ */ jsxs64(DialogPrimitive.Content, {
         className: dialogContentStyles({ withIcon, class: className }),
         ...delegated,
         children: [
@@ -3549,7 +3561,7 @@ DialogBase.Overlay = DialogPrimitive.Overlay;
 DialogBase.Close = DialogPrimitive.Close;
 
 // src/dialog/confirm-dialog.tsx
-import { jsx as jsx73, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs65 } from "react/jsx-runtime";
 function ConfirmDialog({
   open,
   close,
@@ -3588,7 +3600,7 @@ function ConfirmDialog({
   return /* @__PURE__ */ jsx73(DialogRoot, {
     open,
     onOpenChange: () => close(),
-    children: /* @__PURE__ */ jsxs64(Dialog.Content, {
+    children: /* @__PURE__ */ jsxs65(Dialog.Content, {
       onEscapeKeyDown,
       onInteractOutside,
       onPointerDownOutside,
@@ -3602,7 +3614,7 @@ function ConfirmDialog({
           children: description
         }),
         content,
-        (displayOk || okCancel || displayCancel) && /* @__PURE__ */ jsxs64("div", {
+        (displayOk || okCancel || displayCancel) && /* @__PURE__ */ jsxs65("div", {
           className: "mt-4 flex items-center justify-end gap-4",
           children: [
             cancelButton,
@@ -3892,7 +3904,7 @@ var Label2 = forwardRef68(({ className, ...delegated }, ref) => {
 Label2.displayName = "Label";
 
 // src/input-with-label/input-with-label.tsx
-import { Fragment, jsx as jsx80, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx80, jsxs as jsxs66 } from "react/jsx-runtime";
 var inputWithLabelStyles = cva9(["c-input-with-label"], {
   variants: {
     variant: {
@@ -3910,13 +3922,13 @@ var InputWithLabel = forwardRef69(
   ({ className, label, append, errorMessage, status, variant, id, labelProps, ...delegated }, ref) => {
     const { className: labelClassName, ...labelPropsRest } = labelProps ?? {};
     return /* @__PURE__ */ jsx80(Fragment, {
-      children: /* @__PURE__ */ jsxs65(Label2, {
+      children: /* @__PURE__ */ jsxs66(Label2, {
         className: inputWithLabelStyles({ status, variant, className: labelClassName }),
         htmlFor: id,
         ...labelPropsRest,
         children: [
           label,
-          /* @__PURE__ */ jsxs65("span", {
+          /* @__PURE__ */ jsxs66("span", {
             className: "c-input-with-label-input-wrap",
             children: [
               /* @__PURE__ */ jsx80(Input, {
@@ -3974,10 +3986,10 @@ var Radio = {
 // src/select/select-item.tsx
 import { forwardRef as forwardRef70 } from "react";
 import * as SelectPrimitives from "@radix-ui/react-select";
-import { jsx as jsx83, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs67 } from "react/jsx-runtime";
 var SelectItem = forwardRef70((props, ref) => {
   const { children, ...delegated } = props;
-  return /* @__PURE__ */ jsxs66(SelectPrimitives.Item, {
+  return /* @__PURE__ */ jsxs67(SelectPrimitives.Item, {
     className: "c-select-item",
     ref,
     ...delegated,
@@ -3995,7 +4007,7 @@ SelectItem.displayName = "SelectItem";
 import { forwardRef as forwardRef71 } from "react";
 import { cva as cva10 } from "class-variance-authority";
 import * as SelectPrimitives2 from "@radix-ui/react-select";
-import { jsx as jsx84, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs68 } from "react/jsx-runtime";
 var selectTriggerStyles = cva10("c-select-trigger", {
   variants: {
     size: {
@@ -4011,10 +4023,10 @@ var selectTriggerStyles = cva10("c-select-trigger", {
 });
 var SelectContainer = forwardRef71(
   ({ children, id, placeholder, disabled, size, ...delegated }, ref) => {
-    return /* @__PURE__ */ jsxs67(SelectPrimitives2.Root, {
+    return /* @__PURE__ */ jsxs68(SelectPrimitives2.Root, {
       ...delegated,
       children: [
-        /* @__PURE__ */ jsxs67(SelectPrimitives2.Trigger, {
+        /* @__PURE__ */ jsxs68(SelectPrimitives2.Trigger, {
           ref,
           className: selectTriggerStyles({ size }),
           disabled,
@@ -4030,7 +4042,7 @@ var SelectContainer = forwardRef71(
           ]
         }),
         /* @__PURE__ */ jsx84(SelectPrimitives2.Portal, {
-          children: /* @__PURE__ */ jsxs67(SelectPrimitives2.Content, {
+          children: /* @__PURE__ */ jsxs68(SelectPrimitives2.Content, {
             className: "c-select-content",
             children: [
               /* @__PURE__ */ jsx84(SelectPrimitives2.ScrollUpButton, {}),
@@ -4058,9 +4070,9 @@ var Select = {
 import { forwardRef as forwardRef72 } from "react";
 import { cx as cx10 } from "class-variance-authority";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { jsx as jsx85, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs69 } from "react/jsx-runtime";
 var Slider = forwardRef72(({ className, transparentRange, ...delegated }, ref) => {
-  return /* @__PURE__ */ jsxs68(SliderPrimitive.Root, {
+  return /* @__PURE__ */ jsxs69(SliderPrimitive.Root, {
     className: cx10("c-slider-root", className),
     ref,
     ...delegated,
@@ -4080,7 +4092,7 @@ var Slider = forwardRef72(({ className, transparentRange, ...delegated }, ref) =
 
 // src/tag/tag.tsx
 import { cva as cva11 } from "class-variance-authority";
-import { jsx as jsx86, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs70 } from "react/jsx-runtime";
 var tagStyles = cva11("c-tag", {
   variants: {
     variant: {
@@ -4100,7 +4112,7 @@ var tagStyles = cva11("c-tag", {
   }
 });
 function Tag({ children, className, variant, size, prepend, onRemove, ...delegated }) {
-  return /* @__PURE__ */ jsxs69("div", {
+  return /* @__PURE__ */ jsxs70("div", {
     className: tagStyles({ className, variant, size }),
     ...delegated,
     children: [
@@ -4109,7 +4121,7 @@ function Tag({ children, className, variant, size, prepend, onRemove, ...delegat
         children: prepend
       }),
       children,
-      onRemove && /* @__PURE__ */ jsxs69("button", {
+      onRemove && /* @__PURE__ */ jsxs70("button", {
         type: "button",
         className: "c-tag__remove-button",
         onClick: (e) => {
@@ -4787,7 +4799,7 @@ import "react";
 import { useState as useState2 } from "react";
 import { $getNearestNodeFromDOMNode as $getNearestNodeFromDOMNode2 } from "lexical";
 import { $isCodeNode as $isCodeNode3 } from "@lexical/code";
-import { jsx as jsx91, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs71 } from "react/jsx-runtime";
 var PRETTIER_PARSER_MODULES = {
   css: () => import("prettier/parser-postcss"),
   html: () => import("prettier/parser-html"),
@@ -4873,7 +4885,7 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
       setTipsVisible(false);
     }
   }
-  return /* @__PURE__ */ jsxs70("div", {
+  return /* @__PURE__ */ jsxs71("div", {
     className: "c-rte-prettier-wrapper",
     children: [
       /* @__PURE__ */ jsx91("button", {
@@ -4897,7 +4909,7 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
 }
 
 // src/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx
-import { Fragment as Fragment2, jsx as jsx92, jsxs as jsxs71 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx92, jsxs as jsxs72 } from "react/jsx-runtime";
 var CODE_PADDING = 0;
 function CodeActionMenuContainer({ anchorElem }) {
   const [editor] = useLexicalComposerContext();
@@ -4975,7 +4987,7 @@ function CodeActionMenuContainer({ anchorElem }) {
   const normalizedLang = normalizeCodeLang(lang);
   const codeFriendlyName = getLanguageFriendlyName(lang);
   return /* @__PURE__ */ jsx92(Fragment2, {
-    children: isShown ? /* @__PURE__ */ jsxs71("div", {
+    children: isShown ? /* @__PURE__ */ jsxs72("div", {
       className: "c-rte-code-action-menu-container",
       style: { ...position },
       children: [
@@ -5084,7 +5096,7 @@ import { $findMatchingParent, mergeRegister } from "@lexical/utils";
 import { Suspense, useEffect as useEffect4, useState as useState5 } from "react";
 import { $getSelection as $getSelection2, $isTextNode as $isTextNode3 } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
-import { Fragment as Fragment3, jsx as jsx94, jsxs as jsxs72 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx94, jsxs as jsxs73 } from "react/jsx-runtime";
 var PREVIEW_CACHE = {};
 var URL_MATCHER2 = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 function useSuspenseRequest(url) {
@@ -5141,7 +5153,7 @@ function LinkPreviewContent({
   if (!hasPreview) {
     return null;
   }
-  return /* @__PURE__ */ jsxs72("div", {
+  return /* @__PURE__ */ jsxs73("div", {
     className: "c-rte-link-preview",
     children: [
       preview.google.image && /* @__PURE__ */ jsx94("div", {
@@ -5182,7 +5194,7 @@ function LinkPreview({
   url
 }) {
   return /* @__PURE__ */ jsx94(Suspense, {
-    fallback: /* @__PURE__ */ jsxs72(Fragment3, {
+    fallback: /* @__PURE__ */ jsxs73(Fragment3, {
       children: [
         /* @__PURE__ */ jsx94(Glimmer, {
           style: { height: "80px" },
@@ -5266,7 +5278,7 @@ function validateUrl(url) {
 }
 
 // src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx
-import { Fragment as Fragment4, jsx as jsx95, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx95, jsxs as jsxs74 } from "react/jsx-runtime";
 function FloatingLinkEditor({
   editor,
   isLink,
@@ -5390,7 +5402,7 @@ function FloatingLinkEditor({
   return /* @__PURE__ */ jsx95("div", {
     ref: editorRef,
     className: "c-rte-link-editor",
-    children: isEditMode ? /* @__PURE__ */ jsxs73("div", {
+    children: isEditMode ? /* @__PURE__ */ jsxs74("div", {
       children: [
         /* @__PURE__ */ jsx95("div", {
           className: "c-rte-link-editor-input-group",
@@ -5438,12 +5450,12 @@ function FloatingLinkEditor({
           })
         })
       ]
-    }) : /* @__PURE__ */ jsxs73(Fragment4, {
+    }) : /* @__PURE__ */ jsxs74(Fragment4, {
       children: [
-        /* @__PURE__ */ jsxs73("div", {
+        /* @__PURE__ */ jsxs74("div", {
           className: "c-rte-link-editor-link-input",
           children: [
-            /* @__PURE__ */ jsxs73("div", {
+            /* @__PURE__ */ jsxs74("div", {
               className: "c-rte-link-editor-link-preview",
               children: [
                 /* @__PURE__ */ jsx95("a", {
@@ -5452,7 +5464,7 @@ function FloatingLinkEditor({
                   rel: "noopener noreferrer",
                   children: linkUrl
                 }),
-                rel || target ? /* @__PURE__ */ jsxs73("div", {
+                rel || target ? /* @__PURE__ */ jsxs74("div", {
                   className: "c-rte-link-editor-preview-attrs",
                   children: [
                     rel && /* @__PURE__ */ jsx95("div", {
@@ -5582,7 +5594,7 @@ function getDOMRangeRect(nativeSelection, rootElement) {
 }
 
 // src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.tsx
-import { Fragment as Fragment5, jsx as jsx96, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx96, jsxs as jsxs75 } from "react/jsx-runtime";
 function TextFormatFloatingToolbar({
   editor,
   anchorElem,
@@ -5655,97 +5667,98 @@ function TextFormatFloatingToolbar({
       )
     );
   }, [editor, updateTextFormatFloatingToolbar]);
-  return /* @__PURE__ */ jsx96("div", {
+  if (!editor.isEditable()) {
+    return /* @__PURE__ */ jsx96("span", {});
+  }
+  return /* @__PURE__ */ jsxs75("div", {
     ref: popupCharStylesEditorRef,
     className: "c-rte-floating-text-format-tb-plugin",
-    children: editor.isEditable() && /* @__PURE__ */ jsxs74(Fragment5, {
-      children: [
-        /* @__PURE__ */ jsx96(IconButton, {
-          onClick: () => {
-            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
-          },
-          style: { padding: 0, overflow: "hidden" },
-          title: tr(IS_APPLE ? "actionFormatAsStrongTitleApple" : "actionFormatAsStrongTitle"),
-          "aria-label": tr("actionFormatAsStrongLabel"),
-          children: /* @__PURE__ */ jsx96("i", {
-            className: `c-rte-icon-bold c-rte-floating-text-format-tb-plugin__format-icon ${isBold ? "selected" : ""}`
-          })
-        }),
-        /* @__PURE__ */ jsx96(IconButton, {
-          style: { padding: 0, overflow: "hidden" },
-          onClick: () => {
-            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
-          },
-          title: tr("actionFormatAsEmphasizedTitle"),
-          "aria-label": tr("actionFormatAsEmphasizedLabel"),
-          children: /* @__PURE__ */ jsx96("i", {
-            className: `c-rte-icon-italic c-rte-floating-text-format-tb-plugin__format-icon ${isItalic ? "selected" : ""}`
-          })
-        }),
-        /* @__PURE__ */ jsx96(IconButton, {
-          style: { padding: 0, overflow: "hidden" },
-          onClick: () => {
-            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
-          },
-          title: tr("actionFormatAsUnderlinedTitle"),
-          "aria-label": tr("actionFormatAsUnderlinedLabel"),
-          children: /* @__PURE__ */ jsx96("i", {
-            className: `c-rte-icon-underline c-rte-floating-text-format-tb-plugin__format-icon ${isUnderline ? "selected" : ""}`
-          })
-        }),
-        /* @__PURE__ */ jsx96(IconButton, {
-          style: { padding: 0, overflow: "hidden" },
-          onClick: () => {
-            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
-          },
-          title: tr("actionFormatWithStrikethroughTitle"),
-          "aria-label": tr("actionFormatWithStrikethroughLabel"),
-          children: /* @__PURE__ */ jsx96("i", {
-            className: `c-rte-icon-strikethrough c-rte-floating-text-format-tb-plugin__format-icon ${isStrikethrough ? "selected" : ""}`
-          })
-        }),
-        /* @__PURE__ */ jsx96(IconButton, {
-          style: { padding: 0, overflow: "hidden" },
-          onClick: () => {
-            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "subscript");
-          },
-          title: tr("actionFormatWithSubscriptTitle"),
-          "aria-label": tr("actionFormatWithSubscriptLabel"),
-          children: /* @__PURE__ */ jsx96("i", {
-            className: `c-rte-icon-subscript c-rte-floating-text-format-tb-plugin__format-icon ${isSubscript ? "selected" : ""}`
-          })
-        }),
-        /* @__PURE__ */ jsx96(IconButton, {
-          style: { padding: 0, overflow: "hidden" },
-          onClick: () => {
-            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "superscript");
-          },
-          title: tr("actionFormatWithSuperscriptTitle"),
-          "aria-label": tr("actionFormatWithSuperscriptLabel"),
-          children: /* @__PURE__ */ jsx96("i", {
-            className: `c-rte-icon-superscript c-rte-floating-text-format-tb-plugin__format-icon ${isSuperscript ? "selected" : ""}`
-          })
-        }),
-        /* @__PURE__ */ jsx96(IconButton, {
-          style: { padding: 0, overflow: "hidden" },
-          onClick: () => {
-            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
-          },
-          "aria-label": tr("actionInsertCodeBlock"),
-          children: /* @__PURE__ */ jsx96("i", {
-            className: `c-rte-icon-code c-rte-floating-text-format-tb-plugin__format-icon ${isCode ? "selected" : ""}`
-          })
-        }),
-        /* @__PURE__ */ jsx96(IconButton, {
-          style: { padding: 0, overflow: "hidden" },
-          onClick: insertLink,
-          "aria-label": tr("actionInsertlink"),
-          children: /* @__PURE__ */ jsx96("i", {
-            className: `c-rte-icon-link c-rte-floating-text-format-tb-plugin__format-icon ${isLink ? "selected" : ""}`
-          })
+    children: [
+      /* @__PURE__ */ jsx96(IconButton, {
+        onClick: () => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+        },
+        style: { padding: 0, overflow: "hidden" },
+        title: tr(IS_APPLE ? "actionFormatAsStrongTitleApple" : "actionFormatAsStrongTitle"),
+        "aria-label": tr("actionFormatAsStrongLabel"),
+        children: /* @__PURE__ */ jsx96("i", {
+          className: `c-rte-icon-bold c-rte-floating-text-format-tb-plugin__format-icon ${isBold ? "selected" : ""}`
         })
-      ]
-    })
+      }),
+      /* @__PURE__ */ jsx96(IconButton, {
+        style: { padding: 0, overflow: "hidden" },
+        onClick: () => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+        },
+        title: tr("actionFormatAsEmphasizedTitle"),
+        "aria-label": tr("actionFormatAsEmphasizedLabel"),
+        children: /* @__PURE__ */ jsx96("i", {
+          className: `c-rte-icon-italic c-rte-floating-text-format-tb-plugin__format-icon ${isItalic ? "selected" : ""}`
+        })
+      }),
+      /* @__PURE__ */ jsx96(IconButton, {
+        style: { padding: 0, overflow: "hidden" },
+        onClick: () => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
+        },
+        title: tr("actionFormatAsUnderlinedTitle"),
+        "aria-label": tr("actionFormatAsUnderlinedLabel"),
+        children: /* @__PURE__ */ jsx96("i", {
+          className: `c-rte-icon-underline c-rte-floating-text-format-tb-plugin__format-icon ${isUnderline ? "selected" : ""}`
+        })
+      }),
+      /* @__PURE__ */ jsx96(IconButton, {
+        style: { padding: 0, overflow: "hidden" },
+        onClick: () => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
+        },
+        title: tr("actionFormatWithStrikethroughTitle"),
+        "aria-label": tr("actionFormatWithStrikethroughLabel"),
+        children: /* @__PURE__ */ jsx96("i", {
+          className: `c-rte-icon-strikethrough c-rte-floating-text-format-tb-plugin__format-icon ${isStrikethrough ? "selected" : ""}`
+        })
+      }),
+      /* @__PURE__ */ jsx96(IconButton, {
+        style: { padding: 0, overflow: "hidden" },
+        onClick: () => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "subscript");
+        },
+        title: tr("actionFormatWithSubscriptTitle"),
+        "aria-label": tr("actionFormatWithSubscriptLabel"),
+        children: /* @__PURE__ */ jsx96("i", {
+          className: `c-rte-icon-subscript c-rte-floating-text-format-tb-plugin__format-icon ${isSubscript ? "selected" : ""}`
+        })
+      }),
+      /* @__PURE__ */ jsx96(IconButton, {
+        style: { padding: 0, overflow: "hidden" },
+        onClick: () => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "superscript");
+        },
+        title: tr("actionFormatWithSuperscriptTitle"),
+        "aria-label": tr("actionFormatWithSuperscriptLabel"),
+        children: /* @__PURE__ */ jsx96("i", {
+          className: `c-rte-icon-superscript c-rte-floating-text-format-tb-plugin__format-icon ${isSuperscript ? "selected" : ""}`
+        })
+      }),
+      /* @__PURE__ */ jsx96(IconButton, {
+        style: { padding: 0, overflow: "hidden" },
+        onClick: () => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
+        },
+        "aria-label": tr("actionInsertCodeBlock"),
+        children: /* @__PURE__ */ jsx96("i", {
+          className: `c-rte-icon-code c-rte-floating-text-format-tb-plugin__format-icon ${isCode ? "selected" : ""}`
+        })
+      }),
+      /* @__PURE__ */ jsx96(IconButton, {
+        style: { padding: 0, overflow: "hidden" },
+        onClick: insertLink,
+        "aria-label": tr("actionInsertlink"),
+        children: /* @__PURE__ */ jsx96("i", {
+          className: `c-rte-icon-link c-rte-floating-text-format-tb-plugin__format-icon ${isLink ? "selected" : ""}`
+        })
+      })
+    ]
   });
 }
 function useFloatingTextFormatToolbar(editor, anchorElem) {
@@ -6036,7 +6049,7 @@ import {
   TableCellHeaderStates,
   TableCellNode as TableCellNode2
 } from "@lexical/table";
-import { Fragment as Fragment6, jsx as jsx98, jsxs as jsxs75 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx98, jsxs as jsxs76 } from "react/jsx-runtime";
 function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
   const [editor] = useLexicalComposerContext9();
   const [tableCellNode, updateTableCellNode] = useState8(_tableCellNode);
@@ -6191,7 +6204,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  return /* @__PURE__ */ jsxs75(Fragment6, {
+  return /* @__PURE__ */ jsxs76(Fragment5, {
     children: [
       /* @__PURE__ */ jsx98(DropdownMenu.Item, {
         onSelect: () => insertTableRowAtSelection(false),
@@ -6388,7 +6401,7 @@ import {
 import { useRef as useRef6 } from "react";
 import { CLEAR_EDITOR_COMMAND } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
-import { jsx as jsx99, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs77 } from "react/jsx-runtime";
 async function copyJson(editor) {
   const json = lexicalToCrystallizeRichText({ editor, editorState: editor.getEditorState() });
   try {
@@ -6407,7 +6420,7 @@ function ActionsPlugin({
   return /* @__PURE__ */ jsx99("div", {
     ref: actionMenuAnchorRef,
     className: "c-rte-actions-plugin",
-    children: /* @__PURE__ */ jsxs76(ActionMenu, {
+    children: /* @__PURE__ */ jsxs77(ActionMenu, {
       container: actionMenuAnchorRef.current,
       children: [
         !prepend ? null : prepend.map((actionItem) => /* @__PURE__ */ jsx99(ActionMenu.Item, {
@@ -6440,7 +6453,7 @@ function ActionsPlugin({
 // src/rich-text-editor/plugins/ToolbarPlugin/insert-table.tsx
 import { useState as useState9 } from "react";
 import { INSERT_TABLE_COMMAND } from "@lexical/table";
-import { jsx as jsx100, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs78 } from "react/jsx-runtime";
 function InsertTableDialog({ activeEditor }) {
   const [rows, setRows] = useState9("5");
   const [columns, setColumns] = useState9("5");
@@ -6458,10 +6471,10 @@ function InsertTableDialog({ activeEditor }) {
       }
     });
   };
-  return /* @__PURE__ */ jsxs77("div", {
+  return /* @__PURE__ */ jsxs78("div", {
     className: "c-rte-insert-table",
     children: [
-      /* @__PURE__ */ jsxs77("div", {
+      /* @__PURE__ */ jsxs78("div", {
         className: "c-rte-insert-table__dimensions",
         children: [
           /* @__PURE__ */ jsx100(InputWithLabel, {
@@ -6501,7 +6514,7 @@ function InsertTableDialog({ activeEditor }) {
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/index.tsx
-import { Fragment as Fragment7, jsx as jsx101, jsxs as jsxs78 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx101, jsxs as jsxs79 } from "react/jsx-runtime";
 var headingTypeToBlockName = {
   h1: "Heading 1",
   h2: "Heading 2",
@@ -6608,9 +6621,9 @@ function BlockFormatDropDown({
   return /* @__PURE__ */ jsx101(DropdownMenu.Root, {
     disabled,
     style: { zIndex: 1 },
-    content: /* @__PURE__ */ jsxs78(Fragment7, {
+    content: /* @__PURE__ */ jsxs79(Fragment6, {
       children: [
-        /* @__PURE__ */ jsxs78(DropdownMenu.Item, {
+        /* @__PURE__ */ jsxs79(DropdownMenu.Item, {
           onClick: formatParagraph,
           children: [
             /* @__PURE__ */ jsx101("i", {
@@ -6622,7 +6635,7 @@ function BlockFormatDropDown({
             })
           ]
         }),
-        headings.map((headingSize) => /* @__PURE__ */ jsxs78(DropdownMenu.Item, {
+        headings.map((headingSize) => /* @__PURE__ */ jsxs79(DropdownMenu.Item, {
           onClick: () => formatHeading(headingSize),
           children: [
             /* @__PURE__ */ jsx101("i", {
@@ -6634,7 +6647,7 @@ function BlockFormatDropDown({
             })
           ]
         }, headingSize)),
-        /* @__PURE__ */ jsxs78(DropdownMenu.Item, {
+        /* @__PURE__ */ jsxs79(DropdownMenu.Item, {
           onClick: formatBulletList,
           children: [
             /* @__PURE__ */ jsx101("i", {
@@ -6646,7 +6659,7 @@ function BlockFormatDropDown({
             })
           ]
         }),
-        /* @__PURE__ */ jsxs78(DropdownMenu.Item, {
+        /* @__PURE__ */ jsxs79(DropdownMenu.Item, {
           onClick: formatNumberedList,
           children: [
             /* @__PURE__ */ jsx101("i", {
@@ -6658,7 +6671,7 @@ function BlockFormatDropDown({
             })
           ]
         }),
-        /* @__PURE__ */ jsxs78(DropdownMenu.Item, {
+        /* @__PURE__ */ jsxs79(DropdownMenu.Item, {
           onClick: formatQuote,
           "data-testid": "toggle-block-format-quote",
           children: [
@@ -6671,7 +6684,7 @@ function BlockFormatDropDown({
             })
           ]
         }),
-        /* @__PURE__ */ jsxs78(DropdownMenu.Item, {
+        /* @__PURE__ */ jsxs79(DropdownMenu.Item, {
           onClick: formatCode,
           "data-testid": "toggle-block-format-code",
           children: [
@@ -6686,7 +6699,7 @@ function BlockFormatDropDown({
         })
       ]
     }),
-    children: /* @__PURE__ */ jsxs78(Button, {
+    children: /* @__PURE__ */ jsxs79(Button, {
       style: { backgroundColor: "transparent", padding: "0 8px" },
       "aria-label": "Formatting options for text style",
       "data-testid": "toggle-block-format",
@@ -6849,10 +6862,10 @@ function ToolbarPlugin({
     },
     [activeEditor, selectedElementKey]
   );
-  return /* @__PURE__ */ jsxs78("div", {
+  return /* @__PURE__ */ jsxs79("div", {
     className: "c-rte-toolbar",
     children: [
-      /* @__PURE__ */ jsxs78("div", {
+      /* @__PURE__ */ jsxs79("div", {
         className: "c-rte-toolbar__inner",
         children: [
           /* @__PURE__ */ jsx101(IconButton, {
@@ -6881,7 +6894,7 @@ function ToolbarPlugin({
             })
           }),
           /* @__PURE__ */ jsx101(Divider, {}),
-          blockType in blockTypeToBlockName && activeEditor === editor && /* @__PURE__ */ jsxs78(Fragment7, {
+          blockType in blockTypeToBlockName && activeEditor === editor && /* @__PURE__ */ jsxs79(Fragment6, {
             children: [
               /* @__PURE__ */ jsx101(BlockFormatDropDown, {
                 disabled: !isEditable,
@@ -6891,11 +6904,11 @@ function ToolbarPlugin({
               /* @__PURE__ */ jsx101(Divider, {})
             ]
           }),
-          blockType === "code" ? /* @__PURE__ */ jsx101(Fragment7, {
+          blockType === "code" ? /* @__PURE__ */ jsx101(Fragment6, {
             children: /* @__PURE__ */ jsx101(DropdownMenu.Root, {
               disabled: !isEditable,
               style: { zIndex: 1 },
-              content: /* @__PURE__ */ jsx101(Fragment7, {
+              content: /* @__PURE__ */ jsx101(Fragment6, {
                 children: CODE_LANGUAGE_OPTIONS.map(([value, name]) => {
                   return /* @__PURE__ */ jsx101(DropdownMenu.Item, {
                     className: `item ${dropDownActiveClass(value === codeLanguage)}`,
@@ -6917,7 +6930,7 @@ function ToolbarPlugin({
               })
             })
           }) : /* @__PURE__ */ jsx101(Dialog, {
-            children: /* @__PURE__ */ jsxs78("div", {
+            children: /* @__PURE__ */ jsxs79("div", {
               className: "c-rte-toolbar__actions-rest",
               children: [
                 /* @__PURE__ */ jsx101(IconButton, {
@@ -6989,9 +7002,9 @@ function ToolbarPlugin({
                 /* @__PURE__ */ jsx101(DropdownMenu.Root, {
                   disabled: !isEditable,
                   style: { zIndex: 1 },
-                  content: /* @__PURE__ */ jsxs78(Fragment7, {
+                  content: /* @__PURE__ */ jsxs79(Fragment6, {
                     children: [
-                      /* @__PURE__ */ jsxs78(DropdownMenu.Item, {
+                      /* @__PURE__ */ jsxs79(DropdownMenu.Item, {
                         onClick: () => {
                           activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND2, "strikethrough");
                         },
@@ -7007,7 +7020,7 @@ function ToolbarPlugin({
                           })
                         ]
                       }),
-                      /* @__PURE__ */ jsxs78(DropdownMenu.Item, {
+                      /* @__PURE__ */ jsxs79(DropdownMenu.Item, {
                         onClick: () => {
                           activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND2, "subscript");
                         },
@@ -7023,7 +7036,7 @@ function ToolbarPlugin({
                           })
                         ]
                       }),
-                      /* @__PURE__ */ jsxs78(DropdownMenu.Item, {
+                      /* @__PURE__ */ jsxs79(DropdownMenu.Item, {
                         onClick: () => {
                           activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND2, "superscript");
                         },
@@ -7039,7 +7052,7 @@ function ToolbarPlugin({
                           })
                         ]
                       }),
-                      /* @__PURE__ */ jsxs78(DropdownMenu.Item, {
+                      /* @__PURE__ */ jsxs79(DropdownMenu.Item, {
                         onClick: clearFormatting,
                         className: "item",
                         title: tr("actionClearTextFormatting"),
@@ -7056,7 +7069,7 @@ function ToolbarPlugin({
                       })
                     ]
                   }),
-                  children: /* @__PURE__ */ jsxs78(Button, {
+                  children: /* @__PURE__ */ jsxs79(Button, {
                     style: { backgroundColor: "transparent", padding: "0 8px" },
                     "aria-label": tr("actionTextFormattingOptions"),
                     children: [
@@ -7071,9 +7084,9 @@ function ToolbarPlugin({
                 /* @__PURE__ */ jsx101(DropdownMenu.Root, {
                   style: { zIndex: 1 },
                   disabled: !isEditable,
-                  content: /* @__PURE__ */ jsxs78(Fragment7, {
+                  content: /* @__PURE__ */ jsxs79(Fragment6, {
                     children: [
-                      /* @__PURE__ */ jsxs78(DropdownMenu.Item, {
+                      /* @__PURE__ */ jsxs79(DropdownMenu.Item, {
                         onClick: () => {
                           activeEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, void 0);
                         },
@@ -7090,7 +7103,7 @@ function ToolbarPlugin({
                       /* @__PURE__ */ jsx101(DropdownMenu.Item, {
                         children: /* @__PURE__ */ jsx101(Dialog.Trigger, {
                           asChild: true,
-                          children: /* @__PURE__ */ jsxs78("div", {
+                          children: /* @__PURE__ */ jsxs79("div", {
                             className: "c-rte-toolbar__dd-item--table",
                             children: [
                               /* @__PURE__ */ jsx101("i", {
@@ -7112,7 +7125,7 @@ function ToolbarPlugin({
                     })
                   })
                 }),
-                /* @__PURE__ */ jsxs78(Dialog.Content, {
+                /* @__PURE__ */ jsxs79(Dialog.Content, {
                   children: [
                     /* @__PURE__ */ jsx101(Dialog.Title, {
                       children: tr("insertTableTitle")
@@ -7241,19 +7254,18 @@ var theme = {
 var CrystallizeRTEditorTheme_default = theme;
 
 // src/rich-text-editor/rich-text-editor.tsx
-import { Fragment as Fragment8, jsx as jsx102, jsxs as jsxs79 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx102, jsxs as jsxs80 } from "react/jsx-runtime";
 function RichTextEditor({
   initialData,
-  editable = true,
   language = "en",
   labelTranslations,
   ...rest
 }) {
   return /* @__PURE__ */ jsx102(LexicalComposer, {
     initialConfig: {
+      editable: !rest.disabled,
       namespace: "crystallize-rich-text-editor",
       nodes: [...BaseNodes],
-      editable,
       onError: (error) => {
         throw error;
       },
@@ -7269,8 +7281,7 @@ function RichTextEditor({
         children: /* @__PURE__ */ jsx102("div", {
           className: "c-rich-text-editor",
           children: /* @__PURE__ */ jsx102(RichTextEditorWithoutContext, {
-            ...rest,
-            editable
+            ...rest
           })
         })
       })
@@ -7286,9 +7297,10 @@ function RichTextEditorWithoutContext({
   actionsMenuAppend,
   slotPreContent,
   maxLength,
-  editable,
+  disabled,
   id
 }) {
+  const editable = !disabled;
   const { historyState } = useSharedHistoryContext();
   const placeholder = /* @__PURE__ */ jsx102("div", {
     className: "c-rte-placeholder",
@@ -7314,7 +7326,7 @@ function RichTextEditorWithoutContext({
     }
     firstOnChangeTriggeredRef.current = true;
   }
-  return /* @__PURE__ */ jsxs79(Fragment8, {
+  return /* @__PURE__ */ jsxs80(Fragment7, {
     children: [
       /* @__PURE__ */ jsx102(OnChangePlugin, {
         onChange: onLocalChange,
@@ -7328,8 +7340,8 @@ function RichTextEditorWithoutContext({
         actionsMenuAppend
       }),
       slotPreContent,
-      /* @__PURE__ */ jsxs79("div", {
-        className: "c-rte-editor-container",
+      /* @__PURE__ */ jsxs80("div", {
+        className: `c-rte-editor-container ${disabled ? "disabled" : ""}`,
         children: [
           maxLength != null ? /* @__PURE__ */ jsx102(MaxLengthPlugin, {
             maxLength
@@ -7365,7 +7377,7 @@ function RichTextEditorWithoutContext({
           /* @__PURE__ */ jsx102(HorizontalRulePlugin, {}),
           /* @__PURE__ */ jsx102(TabFocusPlugin, {}),
           /* @__PURE__ */ jsx102(TabIndentationPlugin, {}),
-          floatingAnchorElem && !isSmallWidthViewport && /* @__PURE__ */ jsxs79(Fragment8, {
+          floatingAnchorElem && !isSmallWidthViewport && /* @__PURE__ */ jsxs80(Fragment7, {
             children: [
               /* @__PURE__ */ jsx102(CodeActionMenuPlugin, {
                 anchorElem: floatingAnchorElem