npm - @crystallize/design-system - Versions diffs - 1.24.45 → 2.0.1 - Mend

@crystallize/design-system 1.24.45 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (170) hide show

package/CHANGELOG.md +25 -0
package/dist/{chunk-ASHS3SWM.mjs → chunk-B2Q2EUTC.mjs} +5341 -4418
package/dist/index.css +156 -208
package/dist/index.d.ts +57 -204
package/dist/index.js +8877 -8260
package/dist/index.mjs +137 -307
package/dist/{parser-babel-B7AMC4UT.mjs → parser-babel-D5SPHKKD.mjs} +2424 -2411
package/dist/{parser-html-URMUOK6U.mjs → parser-html-RZQPYQ4H.mjs} +3 -3
package/dist/{parser-postcss-AN2EJ77H.mjs → parser-postcss-D5TI5WMI.mjs} +6 -6
package/dist/{rich-text-editor-EVN3N57G.css → rich-text-editor-4ZROYBHM.css} +98 -147
package/dist/{rich-text-editor-LL7UCSDS.mjs → rich-text-editor-SIZB67MA.mjs} +667 -873
package/dist/{standalone-AR2ENVE7.mjs → standalone-COC5HE24.mjs} +8 -6
package/package.json +26 -27
package/src/action-menu/action-menu.tsx +1 -2
package/src/dialog/config.tsx +6 -10
package/src/dialog/dialog.tsx +2 -2
package/src/dropdown-menu/dropdown-menu-root.tsx +3 -4
package/src/iconography/Icon.stories.tsx +0 -1
package/src/iconography/actions.tsx +1 -5
package/src/iconography/add.tsx +1 -5
package/src/iconography/advance.tsx +1 -5
package/src/iconography/app.tsx +1 -5
package/src/iconography/archive.tsx +1 -5
package/src/iconography/arrow.tsx +1 -5
package/src/iconography/atom.tsx +1 -5
package/src/iconography/battery.tsx +1 -5
package/src/iconography/bell.tsx +1 -5
package/src/iconography/billing-payments.tsx +1 -5
package/src/iconography/bin.tsx +1 -5
package/src/iconography/boolean.tsx +17 -0
package/src/iconography/cancel.tsx +1 -5
package/src/iconography/caret.tsx +2 -6
package/src/iconography/cart.tsx +1 -5
package/src/iconography/catalogue.tsx +1 -4
package/src/iconography/check-with-circle.tsx +1 -4
package/src/iconography/check.tsx +1 -4
package/src/iconography/checkbox.tsx +24 -0
package/src/iconography/chevron.tsx +1 -3
package/src/iconography/choice.tsx +1 -5
package/src/iconography/chunk.tsx +1 -5
package/src/iconography/clock.tsx +1 -5
package/src/iconography/cloud-with-key-hole.tsx +1 -5
package/src/iconography/cloud.tsx +1 -5
package/src/iconography/compact.tsx +1 -5
package/src/iconography/copy-with-cloud.tsx +2 -13
package/src/iconography/copy.tsx +1 -5
package/src/iconography/coupon.tsx +1 -5
package/src/iconography/crystal.tsx +2 -14
package/src/iconography/customers.tsx +1 -5
package/src/iconography/dashboard.tsx +1 -5
package/src/iconography/date-infinity.tsx +1 -5
package/src/iconography/date.tsx +1 -5
package/src/iconography/discovery.tsx +1 -5
package/src/iconography/document-shortcut.tsx +1 -5
package/src/iconography/document.tsx +1 -5
package/src/iconography/dots.tsx +1 -5
package/src/iconography/download.tsx +1 -5
package/src/iconography/drag-handle.tsx +1 -5
package/src/iconography/dynamic-value.tsx +1 -5
package/src/iconography/edit.tsx +1 -5
package/src/iconography/error-white.tsx +1 -4
package/src/iconography/error.tsx +1 -4
package/src/iconography/expanded.tsx +1 -5
package/src/iconography/eye-closed.tsx +3 -5
package/src/iconography/eye-open.tsx +8 -10
package/src/iconography/file-upload.tsx +1 -5
package/src/iconography/filename.tsx +1 -5
package/src/iconography/fixed-property-table.tsx +1 -5
package/src/iconography/fixed-value.tsx +1 -5
package/src/iconography/flow.tsx +9 -21
package/src/iconography/folder-shortcut.tsx +1 -5
package/src/iconography/folder.tsx +1 -5
package/src/iconography/frontends.tsx +1 -5
package/src/iconography/fulfilment.tsx +1 -5
package/src/iconography/glasses.tsx +2 -13
package/src/iconography/graphQL.tsx +2 -13
package/src/iconography/grid-relation.tsx +1 -5
package/src/iconography/grid.tsx +1 -5
package/src/iconography/hand-mirror.tsx +1 -4
package/src/iconography/hooks.tsx +1 -5
package/src/iconography/image.tsx +1 -5
package/src/iconography/index.ts +16 -1
package/src/iconography/info.tsx +1 -4
package/src/iconography/items.tsx +1 -5
package/src/iconography/key.tsx +1 -5
package/src/iconography/language.tsx +2 -6
package/src/iconography/lifebouy.tsx +2 -6
package/src/iconography/limitations.tsx +1 -5
package/src/iconography/location.tsx +2 -6
package/src/iconography/lock-closed.tsx +1 -5
package/src/iconography/lock-open.tsx +2 -6
package/src/iconography/magnifier.tsx +22 -37
package/src/iconography/meta-preset.tsx +36 -0
package/src/iconography/min-quantity.tsx +2 -6
package/src/iconography/min-value.tsx +2 -6
package/src/iconography/multilingual.tsx +2 -6
package/src/iconography/multiple-choice.tsx +2 -6
package/src/iconography/mushroom.tsx +2 -6
package/src/iconography/nail-polish.tsx +3 -14
package/src/iconography/number.tsx +16 -0
package/src/iconography/numeric.tsx +2 -6
package/src/iconography/order.tsx +2 -6
package/src/iconography/organization.tsx +2 -6
package/src/iconography/paragraph-collection.tsx +2 -6
package/src/iconography/particle.tsx +3 -15
package/src/iconography/paths.tsx +2 -5
package/src/iconography/people.tsx +2 -6
package/src/iconography/percentage.tsx +3 -8
package/src/iconography/piece.tsx +4 -8
package/src/iconography/pin.tsx +2 -6
package/src/iconography/pipeline-dashed.tsx +2 -6
package/src/iconography/plans-and-pricing.tsx +2 -6
package/src/iconography/plug.tsx +2 -6
package/src/iconography/price-list.tsx +2 -6
package/src/iconography/price-tag.tsx +2 -6
package/src/iconography/product-shortcut.tsx +2 -6
package/src/iconography/product.tsx +2 -6
package/src/iconography/promotion.tsx +2 -6
package/src/iconography/property-table.tsx +2 -6
package/src/iconography/relation.tsx +2 -6
package/src/iconography/remove.tsx +2 -6
package/src/iconography/renew.tsx +2 -6
package/src/iconography/restricted-catalogue.tsx +2 -5
package/src/iconography/rich-text.tsx +2 -6
package/src/iconography/rocket.tsx +2 -6
package/src/iconography/search.tsx +2 -6
package/src/iconography/select.tsx +20 -0
package/src/iconography/selection.tsx +2 -6
package/src/iconography/settings.tsx +2 -6
package/src/iconography/shapes.tsx +2 -6
package/src/iconography/singleline.tsx +2 -6
package/src/iconography/special-price.tsx +2 -6
package/src/iconography/split.tsx +2 -6
package/src/iconography/stock-location.tsx +2 -6
package/src/iconography/string.tsx +16 -0
package/src/iconography/subscription-contracts.tsx +43 -49
package/src/iconography/subscription-plans.tsx +2 -6
package/src/iconography/subscription.tsx +2 -6
package/src/iconography/switch.tsx +2 -6
package/src/iconography/target.tsx +2 -6
package/src/iconography/topics-branch.tsx +2 -6
package/src/iconography/topics-leaf.tsx +2 -6
package/src/iconography/topics.tsx +2 -6
package/src/iconography/transition-in-disabled.tsx +2 -6
package/src/iconography/transition-in.tsx +2 -6
package/src/iconography/transition-out-disabled.tsx +13 -19
package/src/iconography/transition-out.tsx +2 -6
package/src/iconography/unpublish.tsx +2 -6
package/src/iconography/usage-meter.tsx +4 -8
package/src/iconography/usage.tsx +2 -6
package/src/iconography/user-card.tsx +2 -6
package/src/iconography/user.tsx +2 -6
package/src/iconography/users.tsx +2 -6
package/src/iconography/variant.tsx +2 -6
package/src/iconography/video.tsx +2 -6
package/src/iconography/wand.tsx +2 -6
package/src/iconography/warning.tsx +2 -5
package/src/iconography/x-for-y.tsx +2 -6
package/src/label/label.tsx +1 -1
package/src/popover/popover.tsx +5 -6
package/src/rich-text-editor/tests/rich-text-editor-basic-rendering.test.tsx +8 -6
package/src/rich-text-editor/tests/rich-text-editor-code.test.tsx +1 -1
package/src/rich-text-editor/tests/rich-text-editor-onchange.test.tsx +4 -18
package/src/rich-text-editor/tests/rich-text-editor-quote.test.tsx +2 -1
package/src/rich-text-editor/tests/rich-text-editor-typing.test.tsx +6 -4
package/src/rich-text-editor/tests/utils.ts +3 -1
package/src/select/select-root.tsx +2 -2
package/src/spinner/index.tsx +3 -3
package/src/tag/tag.tsx +2 -2
package/src/tooltip/tooltip.tsx +1 -1

package/dist/index.css CHANGED Viewed

@@ -453,9 +453,6 @@
 .border-solid {
   border-style: solid;
 }
-.p-0 {
-  padding: 0px;
-}
 .p-0\.5 {
   padding: 0.125rem;
 }
@@ -474,7 +471,7 @@
 }
 .text-gray-500-400 {
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity, 1));
 }
 /* src/button/button.css */
@@ -492,13 +489,6 @@
     Roboto,
     ui-sans-serif,
     system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    "Noto Sans",
     sans-serif,
     "Apple Color Emoji",
     "Segoe UI Emoji",
@@ -518,7 +508,7 @@
 .c-btn:disabled {
   cursor: default;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-300-600) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-300-600) / var(--tw-text-opacity, 1));
 }
 .c-btn__prepend,
 .c-btn__append {
@@ -540,7 +530,7 @@
 }
 .c-btn {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity, 1));
 }
 .c-btn:not(:disabled):hover {
   outline-style: solid;
@@ -549,7 +539,7 @@
 }
 .c-btn:not(:disabled):active {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity, 1));
 }
 .c-btn-loading {
   position: relative;
@@ -562,7 +552,7 @@
 }
 .c-btn-elevate {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity, 1));
   --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
   --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
   box-shadow:
@@ -575,11 +565,11 @@
 }
 .c-btn-elevate:not(:disabled):active {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity, 1));
 }
 .c-btn-action {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-cyan-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-cyan-100-800) / var(--tw-bg-opacity, 1));
 }
 .c-btn-action:not(:disabled):hover {
   outline-style: solid;
@@ -588,11 +578,11 @@
 }
 .c-btn-action:not(:disabled):active {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-cyan-200-700) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-cyan-200-700) / var(--tw-bg-opacity, 1));
 }
 .c-btn-danger {
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-pink-600-300) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-pink-600-300) / var(--tw-text-opacity, 1));
 }
 .c-btn-danger:not(:disabled):hover {
   outline-color: rgb(var(--c-color-pink-300-600) / 1);
@@ -669,7 +659,7 @@
 .c-card {
   border-radius: 0.375rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity, 1));
   padding: 1rem;
 }
 @media (min-width: 640px) {
@@ -679,7 +669,7 @@
 }
 .c-card-elevate {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity, 1));
   --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
   --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
   box-shadow:
@@ -737,7 +727,7 @@
 .c-action-menu:not(:disabled):hover {
   gap: 3px;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity, 1));
   outline-style: solid;
   outline-width: 1px;
   outline-color: rgb(var(--c-color-purple-200-700) / 1);
@@ -747,7 +737,7 @@
   --tw-scale-y: .95;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity, 1));
 }
 .c-action-menu__trigger-text {
   position: absolute;
@@ -792,13 +782,6 @@
     Roboto,
     ui-sans-serif,
     system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    "Noto Sans",
     sans-serif,
     "Apple Color Emoji",
     "Segoe UI Emoji",
@@ -819,7 +802,7 @@
   height: 1px;
   width: 100%;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-700-200) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-700-200) / var(--tw-bg-opacity, 1));
   padding: 0px;
 }
@@ -835,9 +818,9 @@
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
   --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
   --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
   box-shadow:
@@ -863,11 +846,11 @@
 .c-dropdown-menu-content [role=separator] {
   height: 1px;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity, 1));
 }
 .c-dropdown-menu-label {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity, 1));
   padding-left: 1rem;
   padding-right: 1rem;
   padding-bottom: 0.25rem;
@@ -876,13 +859,6 @@
     Roboto,
     ui-sans-serif,
     system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    "Noto Sans",
     sans-serif,
     "Apple Color Emoji",
     "Segoe UI Emoji",
@@ -891,7 +867,7 @@
   font-size: 11px;
   font-weight: 700;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity, 1));
 }
 .c-dropdown-menu-label:first-child {
   border-top-left-radius: 0.25rem;
@@ -902,20 +878,13 @@
   height: 2.5rem;
   align-items: center;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity, 1));
   padding-left: 1rem;
   padding-right: 1rem;
   font-family:
     Roboto,
     ui-sans-serif,
     system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    "Noto Sans",
     sans-serif,
     "Apple Color Emoji",
     "Segoe UI Emoji",
@@ -936,7 +905,7 @@
 .c-dropdown-menu-item:not([data-disabled]) {
   cursor: pointer;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity, 1));
 }
 .c-dropdown-menu-item:not([data-disabled]):hover,
 .c-dropdown-menu-item:not([data-disabled]):focus,
@@ -945,7 +914,7 @@
 .c-dropdown-menu-item:not([data-disabled]):focus.selected,
 .c-dropdown-menu-item:not([data-disabled]):focus-visible.selected {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity, 1));
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
@@ -955,14 +924,14 @@
 }
 .c-dropdown-menu-item.selected {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity, 1));
   font-weight: 700;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-green-500-400) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-green-500-400) / var(--tw-text-opacity, 1));
 }
 .c-dropdown-menu-item.danger {
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-pink-600-300) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-pink-600-300) / var(--tw-text-opacity, 1));
 }
 .c-dropdown-menu-item.danger[data-disabled] {
   color: rgb(var(--c-color-pink-600-300) / 0.5);
@@ -1000,11 +969,11 @@
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-cyan-800-100) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-cyan-800-100) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-cyan-200-700) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-cyan-200-700) / var(--tw-bg-opacity, 1));
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-cyan-800-100) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-cyan-800-100) / var(--tw-text-opacity, 1));
 }
 .c-avatar-initials {
   font-weight: 700;
@@ -1048,15 +1017,15 @@
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity, 1));
 }
 .c-checkbox[aria-checked=true] {
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-cyan-700-200) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-cyan-700-200) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-cyan-200-700) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-cyan-200-700) / var(--tw-bg-opacity, 1));
 }
 .c-checkbox:focus {
   outline: 2px solid transparent;
@@ -1068,7 +1037,7 @@
     var(--tw-ring-shadow),
     var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(var(--c-color-cyan-700-200) / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(var(--c-color-cyan-700-200) / var(--tw-ring-opacity, 1));
   --tw-ring-offset-width: 1px ;
 }
 .c-checkbox:disabled {
@@ -1167,11 +1136,11 @@
   max-width: 800px;
   border-radius: 0.5rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity, 1));
   padding: 3.5rem;
   line-height: 1.5rem;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity, 1));
   --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
   --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
   box-shadow:
@@ -1195,7 +1164,7 @@
   justify-content: center;
   border-radius: 0.5rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity, 1));
   padding: 5px;
 }
 .c-dialog-icon {
@@ -1244,11 +1213,11 @@
 }
 .c-dialog-close-button:hover {
   --tw-bg-opacity: 1 !important;
-  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity)) !important;
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity, 1)) !important;
 }
 .c-dialog-close-button:focus {
   --tw-bg-opacity: 1 !important;
-  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity)) !important;
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity, 1)) !important;
 }
 .c-dialog-with-icon {
   display: flex;
@@ -1292,7 +1261,7 @@
 .c-icon-button:enabled:focus,
 .c-icon-button:enabled:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity, 1));
   --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
   --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
   box-shadow:
@@ -1313,7 +1282,7 @@
 }
 .c-icon-button-elevate {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity, 1));
   --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
   --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
   box-shadow:
@@ -1348,7 +1317,7 @@
   gap: 0.25rem;
   border-radius: 0.25rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity, 1));
   padding: 3px;
 }
 .c-inline-radio-group-xs {
@@ -1390,12 +1359,12 @@
 }
 .c-inline-radio:hover {
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity, 1));
 }
 .c-inline-radio[aria-checked=true] {
   border-color: transparent;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity, 1));
   --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
   --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
   box-shadow:
@@ -1445,7 +1414,7 @@
 }
 .c-input-with-label-elevated {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity, 1));
   --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
   --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
   box-shadow:
@@ -1455,11 +1424,11 @@
 }
 .c-input-with-label.c-input-with-label--error {
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-pink-700-200) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-pink-700-200) / var(--tw-text-opacity, 1));
 }
 .c-input-with-label.c-input-with-label--warning {
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-orange-200-700) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-orange-200-700) / var(--tw-text-opacity, 1));
 }
 .c-input-with-label-error {
   margin-top: 0.25rem !important;
@@ -1488,7 +1457,7 @@
   font-weight: 400;
   font-style: italic;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-300-600) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-300-600) / var(--tw-text-opacity, 1));
 }
 .c-input:focus {
   outline: 2px solid transparent;
@@ -1497,7 +1466,7 @@
 .c-input:disabled {
   cursor: not-allowed;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-400-500) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-400-500) / var(--tw-text-opacity, 1));
 }
 /* src/label/label.css */
@@ -1506,7 +1475,7 @@
   line-height: 1.25rem;
   font-weight: 500;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity, 1));
 }
 /* src/tooltip/tooltip.css */
@@ -1548,52 +1517,52 @@
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-cyan-300-600) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-cyan-300-600) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-cyan-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-cyan-100-800) / var(--tw-bg-opacity, 1));
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-green-600-300) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-green-600-300) / var(--tw-text-opacity, 1));
 }
 .c-tooltip-error {
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-pink-200-700) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-pink-200-700) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-pink-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-pink-100-800) / var(--tw-bg-opacity, 1));
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-pink-700-200) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-pink-700-200) / var(--tw-text-opacity, 1));
 }
 .c-tooltip-warning {
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-orange-200-700) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-orange-200-700) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-orange-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-orange-100-800) / var(--tw-bg-opacity, 1));
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-green-600-300) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-green-600-300) / var(--tw-text-opacity, 1));
 }
 .c-tooltip-info {
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity, 1));
 }
 /* src/popover/popover.css */
 .c-popover-content {
   border-radius: 0.375rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity, 1));
   font-size: 0.75rem;
   line-height: 1rem;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity, 1));
   --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
   --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
   box-shadow:
@@ -1630,14 +1599,14 @@
   overflow: hidden;
   border-radius: 9999px;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity, 1));
 }
 .c-progress-indicator {
   height: 100%;
   width: 100%;
   border-radius: 9999px;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-cyan-300-600) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-cyan-300-600) / var(--tw-bg-opacity, 1));
   transition-duration: 500ms;
   transition-timing-function: linear;
 }
@@ -1654,9 +1623,9 @@
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-gray-200-700) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-gray-200-700) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity, 1));
   padding: 0px;
 }
 .c-radio-item:focus,
@@ -1666,7 +1635,7 @@
 }
 .c-radio-item:disabled {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity, 1));
   opacity: 0.4;
 }
 .c-radio-item:not(:disabled) {
@@ -1674,9 +1643,9 @@
 }
 .c-radio-item[aria-checked=true] {
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-cyan-700-200) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-cyan-700-200) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-cyan-200-700) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-cyan-200-700) / var(--tw-bg-opacity, 1));
 }
 .c-radio-indicator {
   display: block;
@@ -1684,7 +1653,7 @@
   width: 6px;
   border-radius: 9999px;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-cyan-700-200) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-cyan-700-200) / var(--tw-bg-opacity, 1));
 }
 /* src/select/select.css */
@@ -1698,7 +1667,7 @@
   border-radius: 0.25rem;
   border-width: 0px;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity, 1));
   padding-left: 1rem;
   padding-right: 1rem;
   font-size: 0.875rem;
@@ -1736,14 +1705,14 @@
 }
 .c-select-value {
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity, 1));
   font-style: italic;
 }
 .c-select-content {
   overflow: hidden;
   border-radius: 0.25rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity, 1));
   color: rgb(var(--c-color-gray));
   --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
   --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
@@ -1771,7 +1740,7 @@
 .c-select-item:hover,
 .c-select-item:focus {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity, 1));
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
@@ -1801,7 +1770,7 @@
   flex-grow: 1;
   border-radius: 9999px;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity, 1));
 }
 .c-slider-track[data-orientation=horizontal] {
   height: 3px;
@@ -1813,7 +1782,7 @@
   position: absolute;
   border-radius: 9999px;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-600-300) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-600-300) / var(--tw-bg-opacity, 1));
 }
 .c-slider-range[data-orientation=horizontal] {
   height: 100%;
@@ -1830,7 +1799,7 @@
   width: 1.25rem;
   border-radius: 0.75rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-600-300) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-600-300) / var(--tw-bg-opacity, 1));
   --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
   --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
   box-shadow:
@@ -1840,7 +1809,7 @@
 }
 .c-slider-thumb:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-700-200) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-700-200) / var(--tw-bg-opacity, 1));
 }
 .c-slider-thumb:focus {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
@@ -1870,9 +1839,9 @@
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity, 1));
   transform: translate(33.33%, -33.33%);
 }
@@ -1886,7 +1855,7 @@
   border-radius: 0.25rem;
   font-weight: 500;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity, 1));
   border-width: 1px;
   border-style: solid;
   border-color: transparent;
@@ -1938,13 +1907,13 @@
 }
 .c-tag-default {
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-gray-200-700) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-gray-200-700) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity, 1));
 }
 .c-tag-elevate {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity, 1));
   --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
   --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
   box-shadow:
@@ -2169,7 +2138,7 @@
   font-size: 0.75rem;
   line-height: 1rem;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity, 1));
 }
 .c-rte-code-highlight-language {
   margin-right: 4px;
@@ -2192,7 +2161,7 @@
 .c-rte-code-button:active {
   border-color: rgb(var(--c-color-gray-900-50) / 0.5);
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity, 1));
 }
 .c-rte-code-button__icon {
   height: 16px;
@@ -2212,10 +2181,10 @@
   margin-top: 0.5rem;
   border-radius: 0.25rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-200-700) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-200-700) / var(--tw-bg-opacity, 1));
   padding: 0.75rem;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-900-50) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-900-50) / var(--tw-text-opacity, 1));
 }
 .c-rte-draggable-block-menu {
   border-radius: 4px;
@@ -2298,7 +2267,7 @@
 }
 .c-rte-toolbar__block-format__icon.selected {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity, 1));
   opacity: 1;
 }
 .c-rte-toolbar__block-format__text {
@@ -2362,7 +2331,7 @@
 }
 .c-rte-toolbar__icon-btn.selected {
   --tw-bg-opacity: 1 !important;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity)) !important;
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity, 1)) !important;
   opacity: 1;
 }
 .c-rte-toolbar__icon-btn__icon {
@@ -2385,7 +2354,7 @@
 }
 .c-rte-toolbar__dd-item__icon.selected {
   --tw-bg-opacity: 1 !important;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity)) !important;
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity, 1)) !important;
   opacity: 1;
 }
 .c-rte-toolbar__dd-item__text {
@@ -2395,13 +2364,6 @@
     Roboto,
     ui-sans-serif,
     system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    "Noto Sans",
     sans-serif,
     "Apple Color Emoji",
     "Segoe UI Emoji",
@@ -2417,7 +2379,7 @@
 .c-rte-toolbar__dd-item__text--clear {
   margin-left: 0.75rem;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-pink-600-300) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-pink-600-300) / var(--tw-text-opacity, 1));
 }
 .c-rte-toolbar__dd-item--table {
   display: flex;
@@ -2426,13 +2388,6 @@
     Roboto,
     ui-sans-serif,
     system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    "Noto Sans",
     sans-serif,
     "Apple Color Emoji",
     "Segoe UI Emoji",
@@ -2458,7 +2413,7 @@
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity, 1));
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
   box-shadow:
@@ -2470,7 +2425,7 @@
 .c-rte-insert-table__dimensions__separator {
   height: 100%;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity, 1));
 }
 .c-rte-insert-table__actions {
   margin-top: 0.75rem;
@@ -2495,13 +2450,6 @@
     Roboto,
     ui-sans-serif,
     system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    "Noto Sans",
     sans-serif,
     "Apple Color Emoji",
     "Segoe UI Emoji",
@@ -2509,7 +2457,7 @@
     "Noto Color Emoji" !important;
   font-weight: 400;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-900-50) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-900-50) / var(--tw-text-opacity, 1));
 }
 .c-rich-text-editor .c-rte-editor-scroller {
   min-height: var(--c-rte-min-height, 150px);
@@ -2544,7 +2492,7 @@
   overflow: auto;
   max-height: 180px;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity, 1));
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
@@ -2569,7 +2517,7 @@
   background-color: #ccc;
   line-height: 1px;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity, 1));
 }
 .c-rich-text-editor [contenteditable] hr.selected {
   outline: 2px solid rgb(60, 132, 244);
@@ -2578,7 +2526,7 @@
 .c-rich-text-editor [role=separator] {
   height: 1px;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-200-700) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-gray-200-700) / var(--tw-bg-opacity, 1));
 }
 .c-rich-text-editor .ltr {
   text-align: left;
@@ -2637,7 +2585,7 @@
   font-size: 14px;
   font-weight: 400;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-300-600) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-300-600) / var(--tw-text-opacity, 1));
   font-style: italic;
   left: var(--c-rte-content-pl, 1.5rem);
 }
@@ -2688,7 +2636,7 @@
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity, 1));
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
   box-shadow:
@@ -2713,7 +2661,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-s-blue-600-300) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-s-blue-600-300) / var(--tw-text-opacity, 1));
 }
 .c-rte-link-editor-link-input a {
   display: block;
@@ -2721,7 +2669,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-s-blue-600-300) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-s-blue-600-300) / var(--tw-text-opacity, 1));
   text-decoration-line: none;
 }
 .c-rte-link-editor-link-input a:hover {
@@ -2737,7 +2685,7 @@
   border-bottom-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity, 1));
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
@@ -2757,14 +2705,14 @@
 .c-rte-link-editor-preview-attr {
   border-radius: 0.375rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity, 1));
   padding-left: 0.25rem;
   padding-right: 0.25rem;
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
   font-size: 10px;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity, 1));
 }
 @keyframes c-rte-glimmer-animation {
   0% {
@@ -2781,7 +2729,7 @@
 }
 .c-rte-link-preview-image-wrapper {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity, 1));
   text-align: center;
 }
 .c-rte-link-preview-image {
@@ -2797,7 +2745,7 @@
   font-weight: 600;
   line-height: 1.25rem;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity, 1));
 }
 .c-rte-link-preview-description {
   margin-left: 1.5rem;
@@ -2840,7 +2788,7 @@
   gap: 0.125rem;
   border-radius: 0.375rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity, 1));
   padding: 0.25rem;
   opacity: 0;
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
@@ -2860,7 +2808,7 @@
 }
 .c-rte-floating-text-format-tb-plugin__format-icon.selected {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity, 1));
   opacity: 1;
 }
 .c-floating-text-format-popup button.popup-item {
@@ -2980,7 +2928,7 @@
   margin-top: 0.5rem;
   line-height: 1.5rem;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity, 1));
 }
 .CrystallizeRTEditorTheme__paragraph + .CrystallizeRTEditorTheme__paragraph {
   position: relative;
@@ -2997,10 +2945,10 @@
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
   --tw-border-opacity: 1;
-  border-left-color: rgb(var(--c-color-purple-700-200) / var(--tw-border-opacity));
+  border-left-color: rgb(var(--c-color-purple-700-200) / var(--tw-border-opacity, 1));
   font-weight: 400;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity, 1));
 }
 .CrystallizeRTEditorTheme__h1 {
   font-size: 20px;
@@ -3010,7 +2958,7 @@
   font-weight: 500;
   line-height: 1.5rem;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity, 1));
 }
 .CrystallizeRTEditorTheme__h2 {
   font-size: 19px;
@@ -3021,7 +2969,7 @@
   font-weight: 500;
   line-height: 1.5rem;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity, 1));
 }
 .CrystallizeRTEditorTheme__h3 {
   font-size: 18px;
@@ -3031,7 +2979,7 @@
   font-weight: 500;
   line-height: 1.5rem;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity, 1));
 }
 .CrystallizeRTEditorTheme__h4 {
   font-size: 17px;
@@ -3041,7 +2989,7 @@
   font-weight: 500;
   line-height: 1.5rem;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity, 1));
 }
 .CrystallizeRTEditorTheme__h5 {
   font-size: 16px;
@@ -3051,7 +2999,7 @@
   font-weight: 500;
   line-height: 1.5rem;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity, 1));
 }
 .CrystallizeRTEditorTheme__h6 {
   font-size: 16px;
@@ -3061,7 +3009,7 @@
   font-weight: 500;
   line-height: 1.5rem;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity, 1));
 }
 .CrystallizeRTEditorTheme__indent {
   --lexical-indent-base-value: 20px;
@@ -3101,15 +3049,15 @@
   border-style: solid;
   border-radius: 0.375rem;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity, 1));
 }
 .CrystallizeRTEditorTheme__link {
   text-decoration: none;
   box-shadow: #5d96fd 0 -2px inset;
   --tw-text-opacity: 1 !important;
-  color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity)) !important;
+  color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity, 1)) !important;
 }
 .CrystallizeRTEditorTheme__link:hover {
   cursor: pointer;
@@ -3126,9 +3074,9 @@
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity, 1));
   padding: 0.5rem;
   padding-left: 3.5rem;
   font-size: 0.875rem;
@@ -3149,13 +3097,13 @@
   border-right-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity, 1));
   padding: 0.5rem;
   text-align: right;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-400-500) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-400-500) / var(--tw-text-opacity, 1));
   content: attr(data-gutter);
   white-space: pre-wrap;
   min-width: 25px;
@@ -3172,7 +3120,7 @@
   border-style: solid;
   border-radius: 0.375rem;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity, 1));
 }
 .CrystallizeRTEditorTheme__tableSelected {
   outline-width: 2px;
@@ -3184,7 +3132,7 @@
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity, 1));
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   padding-top: 0px;
@@ -3223,7 +3171,7 @@
 }
 .CrystallizeRTEditorTheme__tableCellHeader {
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity, 1));
   text-align: start;
 }
 .CrystallizeRTEditorTheme__tableCellSelected {
@@ -3233,7 +3181,7 @@
   border-width: 2px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity, 1));
   display: block;
   height: calc(100% - 2px);
   position: absolute;
@@ -3262,7 +3210,7 @@
   cursor: pointer;
   border: 1px solid transparent;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity, 1));
 }
 .CrystallizeRTEditorTheme__tableAddColumns:after {
   background-image: url(./plus-CQISIKEC.svg);
@@ -3281,7 +3229,7 @@
 .CrystallizeRTEditorTheme__tableAddColumns:hover {
   border-radius: 0.125rem;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity, 1));
 }
 .CrystallizeRTEditorTheme__tableAddRows {
   position: absolute;
@@ -3294,7 +3242,7 @@
   cursor: pointer;
   border: 1px solid transparent;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity, 1));
 }
 .CrystallizeRTEditorTheme__tableAddRows:after {
   background-image: url(./plus-CQISIKEC.svg);
@@ -3313,7 +3261,7 @@
 .CrystallizeRTEditorTheme__tableAddRows:hover {
   border-radius: 0.125rem;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity, 1));
 }
 @keyframes table-controls {
   0% {
@@ -3389,7 +3337,7 @@
   margin-bottom: 0px;
   line-height: 1.5rem;
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity, 1));
 }
 .CrystallizeRTEditorTheme__listItemChecked,
 .CrystallizeRTEditorTheme__listItemUnchecked {
@@ -3513,7 +3461,7 @@
   gap: 0.5rem;
   border-radius: 0.375rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
   padding-left: 0.75rem;
   padding-right: 1.5rem;
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -3545,41 +3493,41 @@
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-cyan-300-600) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-cyan-300-600) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-cyan-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-cyan-100-800) / var(--tw-bg-opacity, 1));
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-green-600-300) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-green-600-300) / var(--tw-text-opacity, 1));
 }
 .c-toast-error {
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-pink-200-700) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-pink-200-700) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-pink-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-pink-100-800) / var(--tw-bg-opacity, 1));
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-pink-700-200) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-pink-700-200) / var(--tw-text-opacity, 1));
 }
 .c-toast-warning {
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-orange-200-700) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-orange-200-700) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-orange-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-orange-100-800) / var(--tw-bg-opacity, 1));
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-green-600-300) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-green-600-300) / var(--tw-text-opacity, 1));
 }
 .c-toast-info {
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-green-600-300) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-green-600-300) / var(--tw-text-opacity, 1));
 }
 .c-toast-title {
   font-size: 0.875rem;
@@ -3604,9 +3552,9 @@
   border-width: 1px;
   border-style: solid;
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity, 1));
   padding-left: 0.125rem;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3614,7 +3562,7 @@
 }
 .c-switch-root:hover {
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-purple-300-600) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-purple-300-600) / var(--tw-border-opacity, 1));
 }
 .c-switch-root:focus {
   outline: 2px solid transparent;
@@ -3628,9 +3576,9 @@
 }
 .c-switch-root[data-state=checked] {
   --tw-border-opacity: 1;
-  border-color: rgb(var(--c-color-green-400-500) / var(--tw-border-opacity));
+  border-color: rgb(var(--c-color-green-400-500) / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-cyan-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-cyan-100-800) / var(--tw-bg-opacity, 1));
 }
 .c-switch-root-sm {
   height: 1.5rem;
@@ -3667,14 +3615,14 @@
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   border-radius: 9999px;
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 .c-switch-thumb[data-state=checked] {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 .c-switch-thumb {
   box-shadow: 0px 1px 2px 0px rgba(40, 41, 61, 0.2), 0px 2px 4px 0px rgba(96, 97, 112, 0.2);