@blockbite/ui 2.0.21 → 2.0.22

package/dist/index.js

@@ -1,22 +1,22 @@
-import { Button as v, Dropdown as Y, TextControl as O, CheckboxControl as J, DropdownMenu as Q, FocalPointPicker as ee, PanelRow as te, Popover as ae, RangeControl as le, Modal as ne, Notice as re, __experimentalInputControl as ce, __experimentalInputControlSuffixWrapper as se, SelectControl as oe, Spinner as ie, TabPanel as me, __experimentalToggleGroupControl as ue, __experimentalToggleGroupControlOptionIcon as de, __experimentalToggleGroupControlOption as pe, ToggleControl as fe } from "@wordpress/components";
-import { memo as j, useState as p, useEffect as g, useCallback as A, useRef as k, createPortal as D, forwardRef as F, createContext as G, useContext as V, Children as M, isValidElement as S, useMemo as ge, createElement as Re } from "@wordpress/element";
-import Ee from "@wordpress/api-fetch";
-import { __ as y } from "@wordpress/i18n";
-import { MediaUploadCheck as B, MediaUpload as $ } from "@wordpress/block-editor";
-import { jsx as be } from "react/jsx-runtime";
-import { createBlock as he } from "@wordpress/blocks";
-function Ce(e) {
+import { Button as C, Dropdown as X, TextControl as B, CheckboxControl as Y, DropdownMenu as J, FocalPointPicker as Q, PanelRow as ee, Popover as te, RangeControl as ae, __experimentalInputControl as O, __experimentalInputControlSuffixWrapper as z, Modal as le, Notice as ne, SelectControl as re, Spinner as ce, TabPanel as se, __experimentalToggleGroupControl as oe, __experimentalToggleGroupControlOptionIcon as ie, __experimentalToggleGroupControlOption as me, ToggleControl as ue } from "@wordpress/components";
+import { memo as V, useCallback as j, useState as g, useEffect as R, useRef as y, createPortal as D, forwardRef as de, createContext as A, useContext as P, Children as _, isValidElement as L, useMemo as fe } from "@wordpress/element";
+import pe from "@wordpress/api-fetch";
+import { __ as w } from "@wordpress/i18n";
+import { MediaUploadCheck as T, MediaUpload as $ } from "@wordpress/block-editor";
+import { SVG as ge, Path as Re } from "@wordpress/primitives";
+import { createBlock as Ee } from "@wordpress/blocks";
+function he(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var P = { exports: {} };
+var H = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
 */
-var z;
-function xe() {
-  return z || (z = 1, function(e) {
+var I;
+function Ce() {
+  return I || (I = 1, function(e) {
     (function() {
       var t = {}.hasOwnProperty;
       function l() {
@@ -45,56 +45,47 @@ function xe() {
       }
       e.exports ? (l.default = l, e.exports = l) : window.classNames = l;
     })();
-  }(P)), P.exports;
+  }(H)), H.exports;
 }
-var ve = xe();
-const f = /* @__PURE__ */ Ce(ve), h = ({
-  children: e,
-  className: t,
-  important: l = !1,
-  onClick: a
-}) => l ? /* @__PURE__ */ React.createElement("div", { onClick: a }, /* @__PURE__ */ React.createElement("div", { className: t }, e)) : /* @__PURE__ */ React.createElement("div", { className: t }, e), N = ({ icon: e, className: t = "" }) => e ? /* @__PURE__ */ React.createElement(h, { className: "blockbite--icon" }, /* @__PURE__ */ React.createElement(e, { className: t }), " ") : null, we = j(
+var be = Ce();
+const p = /* @__PURE__ */ he(be), v = ({ icon: e, ...t }) => e ? /* @__PURE__ */ React.createElement("div", { className: "blockbite--icon" }, /* @__PURE__ */ React.createElement(e, { ...t })) : null, xe = V(
   ({
     children: e,
     className: t,
     value: l,
     variant: a = "secondary",
-    defaultPressed: n,
+    pressed: n,
     onPressedChange: r,
     icon: s,
     size: c = "compact",
     display: i = "auto",
     label: o
   }) => {
-    const [m, u] = p(!1);
-    g(() => {
-      u(n === l);
-    }, [n]);
-    const E = A(() => {
-      u((R) => !R), r(l);
-    }, [m, r]);
+    const f = j(() => {
+      r(l);
+    }, [r, l]);
     return /* @__PURE__ */ React.createElement(
-      v,
+      C,
       {
         "aria-label": o,
-        className: f(t, "blockbite-ui__button--default"),
+        className: p(t, "blockbite-ui__button--default"),
         value: l,
         size: c,
         label: o,
         variant: a,
         showTooltip: !0,
-        isPressed: m,
-        onClick: E
+        isPressed: n,
+        onClick: f
       },
-      s && /* @__PURE__ */ React.createElement(N, { icon: s }),
+      s && /* @__PURE__ */ React.createElement(v, { icon: s }),
       i !== "icon" ? e : null,
       o && !e && i !== "icon" ? /* @__PURE__ */ React.createElement("span", null, o) : null
     );
   }
-), ye = j(
+), we = V(
   ({
     className: e,
-    defaultPressed: t = "",
+    value: t,
     toggle: l = !0,
     display: a = "auto",
     options: n,
@@ -104,72 +95,73 @@ const f = /* @__PURE__ */ Ce(ve), h = ({
     stretch: i = !1,
     onPressedChange: o
   }) => {
-    const [m, u] = p(t);
-    g(() => {
-      u(t);
-    }, [t]);
-    const E = A(
-      (d) => {
-        const x = l && m === d ? "" : d;
-        u(x), o == null || o(x);
+    const f = j(
+      (m) => {
+        const u = l && t === m ? "" : m;
+        o == null || o(u);
       },
-      [m, o, l]
-    ), R = (d) => a === "icon" && (d != null && d.icon) ? /* @__PURE__ */ React.createElement(N, { icon: d.icon }) : a === "label" ? /* @__PURE__ */ React.createElement("span", null, d.label) : /* @__PURE__ */ React.createElement("span", { className: "flex items-center justify-center gap-1" }, d.icon && /* @__PURE__ */ React.createElement(N, { icon: d.icon }), /* @__PURE__ */ React.createElement("span", null, d.label));
+      [o, l, t]
+    ), d = (m) => a === "icon" && (m != null && m.icon) ? /* @__PURE__ */ React.createElement(v, { icon: m.icon }) : a === "label" ? /* @__PURE__ */ React.createElement("span", null, m.label) : /* @__PURE__ */ React.createElement("span", { className: "flex items-center justify-center gap-1" }, m.icon && /* @__PURE__ */ React.createElement(v, { icon: m.icon }), /* @__PURE__ */ React.createElement("span", null, m.label));
     return /* @__PURE__ */ React.createElement(
-      h,
+      "div",
       {
-        className: f(
+        className: p(
           "blockbite-ui__button-group flex flex-wrap gap-1",
           e,
           s ? "blockbite-ui__button-group--tabs" : ""
         )
       },
-      n.map((d, x) => /* @__PURE__ */ React.createElement(
-        v,
+      n.map((m, u) => /* @__PURE__ */ React.createElement(
+        C,
         {
-          key: `ButtonToggleGroup__${d.value}__${d.label}__${x}`,
-          className: f("blockbite-ui__button--default", {
+          key: `ButtonToggleGroup__${m.value}__${m.label}__${u}`,
+          className: p("blockbite-ui__button--default", {
             grow: i,
             "justify-center": i
           }),
-          "aria-label": d.label,
+          "aria-label": m.label,
           showTooltip: !0,
-          value: d.value,
+          value: m.value,
           size: r,
-          label: (d == null ? void 0 : d.tooltip) || d.label,
+          label: (m == null ? void 0 : m.tooltip) || m.label,
           variant: c,
-          isPressed: m === d.value,
-          onClick: () => E(d.value)
+          isPressed: t === m.value,
+          onClick: () => f(m.value)
         },
-        R(d),
-        d.children && d.children
+        d(m),
+        m.children && m.children
       ))
     );
   }
-);
-function ct({
-  defaultValue: e,
+), E = ({
+  children: e,
+  className: t,
+  important: l = !1,
+  onClick: a
+}) => l ? /* @__PURE__ */ React.createElement("div", { onClick: a }, /* @__PURE__ */ React.createElement("div", { className: t }, e)) : /* @__PURE__ */ React.createElement("div", { className: t }, e);
+function at({
+  value: e,
   options: t,
   swatch: l,
   onPressedChange: a
 }) {
-  const [n, r] = p(""), [s, c] = p([]);
-  return g(() => {
+  const [n, r] = g(""), [s, c] = g([]);
+  return R(() => {
     c(
       t.filter(
         (i) => i.label.toLowerCase().includes(n.toLowerCase())
       )
     );
-  }, [n, t]), g(() => {
+  }, [n, t]), R(() => {
     r(""), c(t);
   }, [e, t]), /* @__PURE__ */ React.createElement(
-    Y,
+    X,
     {
       className: "option-panel-dropdown",
       contentClassName: "option-panel-dropdown-content",
       popoverProps: { placement: "bottom-start" },
-      renderToggle: ({ isOpen: i, onToggle: o }) => /* @__PURE__ */ React.createElement(h, { important: !0 }, /* @__PURE__ */ React.createElement(
-        v,
+      renderToggle: ({ isOpen: i, onToggle: o }) => /* @__PURE__ */ React.createElement(E, { important: !0 }, /* @__PURE__ */ React.createElement(
+        C,
         {
           variant: "secondary",
           size: "small",
@@ -179,14 +171,12 @@ function ct({
         /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 !bg-transparent !p-0 !text-[11px] !text-current" }, l && !!e && /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: f(
-              `h-3 w-3 rounded-full bg-${e}`
-            )
+            className: p(`h-3 w-3 rounded-full bg-${e}`)
           }
         ), /* @__PURE__ */ React.createElement("span", null, e || "Select option…"))
       )),
-      renderContent: () => /* @__PURE__ */ React.createElement(h, { important: !0 }, /* @__PURE__ */ React.createElement("div", { className: "w-52" }, /* @__PURE__ */ React.createElement(
-        O,
+      renderContent: () => /* @__PURE__ */ React.createElement(E, { important: !0 }, /* @__PURE__ */ React.createElement("div", { className: "w-52" }, /* @__PURE__ */ React.createElement(
+        B,
         {
           __next40pxDefaultSize: !0,
           __nextHasNoMarginBottom: !0,
@@ -196,23 +186,23 @@ function ct({
           autoComplete: "off"
         }
       ), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-1 !bg-transparent p-0 !pt-2" }, s.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "!text-gray-medium col-span-2 pb-2 text-center !text-[11px]" }, "No options found."), s.map((i, o) => /* @__PURE__ */ React.createElement(
-        we,
+        xe,
         {
           key: `ButtonToggle__${i.value}___${o}`,
-          className: f({
+          className: p({
             "bg-primary": i.value
           }),
           size: "small",
           value: i.value.toString(),
-          defaultPressed: e,
-          onPressedChange: (m) => {
-            a(m ? i.value : "");
+          pressed: e === i.value,
+          onPressedChange: (f) => {
+            a(f ? i.value : "");
           }
         },
         l && /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: f(
+            className: p(
               `mr-3 h-3 w-3 rounded-full bg-${i.value}`
             )
           }
@@ -222,38 +212,38 @@ function ct({
     }
   );
 }
-const Ne = ({ children: e, className: t, label: l, onClick: a }) => /* @__PURE__ */ React.createElement(
+const ve = ({ children: e, className: t, label: l, onClick: a }) => /* @__PURE__ */ React.createElement(
   "div",
   {
     onClick: a,
-    className: f(
+    className: p(
       t,
       "inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800"
     )
   },
   l && /* @__PURE__ */ React.createElement("span", { className: "mr-1 text-xs font-semibold text-gray-700" }, l),
   e
-), st = ({ htmlContent: e, cssContent: t, frontendAssets: l }) => {
-  const a = k(null), [n, r] = p(null);
-  return g(() => {
+), lt = ({ htmlContent: e, cssContent: t, frontendAssets: l }) => {
+  const a = y(null), [n, r] = g(null);
+  return R(() => {
     const s = a.current;
     return s && (s.onload = () => {
       const c = s.contentDocument || s.contentWindow.document;
       if (c) {
         r(c.body);
         const i = c.createElement("style");
-        i.innerHTML = t, c.head.appendChild(i), l.forEach(({ type: o, id: m, url: u }) => {
-          const E = document.getElementById(m);
-          if (E) {
-            const R = document.adoptNode(
-              E.cloneNode(!0)
+        i.innerHTML = t, c.head.appendChild(i), l.forEach(({ type: o, id: f, url: d }) => {
+          const m = document.getElementById(f);
+          if (m) {
+            const u = document.adoptNode(
+              m.cloneNode(!0)
             );
-            c.head.appendChild(R);
+            c.head.appendChild(u);
           } else {
-            const R = c.createElement(
+            const u = c.createElement(
               o === "script" ? "script" : "link"
             );
-            R.id = m, o === "script" ? (R.src = u, R.async = !0) : (R.rel = "stylesheet", R.href = u), c.head.appendChild(R);
+            u.id = f, o === "script" ? (u.src = d, u.async = !0) : (u.rel = "stylesheet", u.href = d), c.head.appendChild(u);
           }
         });
       }
@@ -287,7 +277,7 @@ const Ne = ({ children: e, className: t, label: l, onClick: a }) => /* @__PURE__
       n
     )
   );
-}, ot = ({
+}, nt = ({
   children: e,
   size: t = "default",
   label: l,
@@ -300,14 +290,14 @@ const Ne = ({ children: e, className: t, label: l, onClick: a }) => /* @__PURE__
 }) => {
   const o = s === "icon" || s === "icon-lg";
   return /* @__PURE__ */ React.createElement(
-    v,
+    C,
     {
       size: t,
       variant: r,
       label: l,
       showTooltip: !0,
       disabled: i,
-      className: f(
+      className: p(
         a,
         "blockbite-ui__button",
         "flex items-center justify-center gap-1",
@@ -320,37 +310,38 @@ const Ne = ({ children: e, className: t, label: l, onClick: a }) => /* @__PURE__
       onClick: n
     },
     c && /* @__PURE__ */ React.createElement(
-      N,
+      v,
       {
         icon: c,
-        className: f({ "h-4 w-4": s === "icon-lg" })
+        className: p({ "h-4 w-4": s === "icon-lg" })
       }
     ),
     o ? null : e,
     l && !e && !o ? /* @__PURE__ */ React.createElement("span", null, l) : null
   );
-}, it = ({ children: e, title: t }) => /* @__PURE__ */ React.createElement(
-  h,
+}, rt = ({ children: e, title: t }) => /* @__PURE__ */ React.createElement(
+  E,
   {
-    className: f(
+    className: p(
       "text-gray-medium my-2 flex items-center gap-1 text-[12px] font-medium",
-      f
+      p
     )
   },
-  t && /* @__PURE__ */ React.createElement(h, { className: "font-medium" }, t),
+  "dwdwwdwd",
+  t && /* @__PURE__ */ React.createElement(E, { className: "font-medium" }, t),
   e
-), mt = ({
+), ct = ({
   title: e,
   className: t,
   help: l,
   badge: a,
   ...n
-}) => /* @__PURE__ */ React.createElement("div", { className: f("mb-2", t), ...n }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-wrap items-center gap-2 justify-between" }, /* @__PURE__ */ React.createElement("span", { className: "shrink-1 text-[11px] font-medium uppercase leading-snug" }, e), !!a && /* @__PURE__ */ React.createElement(Ne, { className: "text-[10px] py-px px-1" }, a)), l && /* @__PURE__ */ React.createElement("small", { className: "w-full shrink-0 text-[11px]" }, l)), ut = ({ label: e, help: t, defaultChecked: l }) => {
-  const [a, n] = p(l);
-  return g(() => {
+}) => /* @__PURE__ */ React.createElement("div", { className: p("mb-2", t), ...n }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-wrap items-center gap-2 justify-between" }, /* @__PURE__ */ React.createElement("span", { className: "shrink-1 text-[11px] font-medium uppercase leading-snug" }, e), !!a && /* @__PURE__ */ React.createElement(ve, { className: "text-[10px] py-px px-1" }, a)), l && /* @__PURE__ */ React.createElement("small", { className: "w-full shrink-0 text-[11px]" }, l)), st = ({ label: e, help: t, defaultChecked: l }) => {
+  const [a, n] = g(l);
+  return R(() => {
     n(l);
-  }, [l]), /* @__PURE__ */ React.createElement(h, { className: "blockbite-ui__checkbox mx-1 flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-    J,
+  }, [l]), /* @__PURE__ */ React.createElement(E, { className: "blockbite-ui__checkbox mx-1 flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
+    Y,
     {
       label: e,
       help: t,
@@ -358,82 +349,249 @@ const Ne = ({ children: e, className: t, label: l, onClick: a }) => /* @__PURE__
       onChange: n
     }
   ));
-}, ke = (e) => React.createElement(
+}, Ne = (e) => /* @__PURE__ */ React.createElement(
   "svg",
-  Object.assign({ width: e.width || "1em", height: e.height || "1em", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, e),
-  React.createElement("path", { d: "M3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523Z", fill: "currentColor" })
-), _e = (e) => React.createElement(
+  {
+    width: e.width || "1em",
+    height: e.height || "1em",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    ...e
+  },
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523Z",
+      fill: "currentColor"
+    }
+  )
+), ye = (e) => /* @__PURE__ */ React.createElement(
   "svg",
-  Object.assign({ width: e.width || "1em", height: e.height || "1em", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, e),
-  React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.50012 1C7.22398 1 7.00012 1.22386 7.00012 1.5V13.5C7.00012 13.7761 7.22398 14 7.50012 14C7.77626 14 8.00012 13.7761 8.00012 13.5V1.5C8.00012 1.22386 7.77626 1 7.50012 1ZM3.31812 5.18161C3.14239 5.00587 2.85746 5.00587 2.68173 5.18161L0.681729 7.18161C0.505993 7.35734 0.505993 7.64227 0.681729 7.818L2.68173 9.818C2.85746 9.99374 3.14239 9.99374 3.31812 9.818C3.49386 9.64227 3.49386 9.35734 3.31812 9.18161L2.08632 7.9498H5.50017C5.7487 7.9498 5.95017 7.74833 5.95017 7.4998C5.95017 7.25128 5.7487 7.0498 5.50017 7.0498H2.08632L3.31812 5.818C3.49386 5.64227 3.49386 5.35734 3.31812 5.18161ZM11.6817 5.18161C11.506 5.35734 11.506 5.64227 11.6817 5.818L12.9135 7.0498H9.50017C9.25164 7.0498 9.05017 7.25128 9.05017 7.4998C9.05017 7.74833 9.25164 7.9498 9.50017 7.9498H12.9135L11.6817 9.18161C11.506 9.35734 11.506 9.64227 11.6817 9.818C11.8575 9.99374 12.1424 9.99374 12.3181 9.818L14.3181 7.818C14.4939 7.64227 14.4939 7.35734 14.3181 7.18161L12.3181 5.18161C12.1424 5.00587 11.8575 5.00587 11.6817 5.18161Z", fill: "currentColor" })
-), Le = (e) => React.createElement(
+  {
+    width: e.width || "1em",
+    height: e.height || "1em",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    ...e
+  },
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7.50012 1C7.22398 1 7.00012 1.22386 7.00012 1.5V13.5C7.00012 13.7761 7.22398 14 7.50012 14C7.77626 14 8.00012 13.7761 8.00012 13.5V1.5C8.00012 1.22386 7.77626 1 7.50012 1ZM3.31812 5.18161C3.14239 5.00587 2.85746 5.00587 2.68173 5.18161L0.681729 7.18161C0.505993 7.35734 0.505993 7.64227 0.681729 7.818L2.68173 9.818C2.85746 9.99374 3.14239 9.99374 3.31812 9.818C3.49386 9.64227 3.49386 9.35734 3.31812 9.18161L2.08632 7.9498H5.50017C5.7487 7.9498 5.95017 7.74833 5.95017 7.4998C5.95017 7.25128 5.7487 7.0498 5.50017 7.0498H2.08632L3.31812 5.818C3.49386 5.64227 3.49386 5.35734 3.31812 5.18161ZM11.6817 5.18161C11.506 5.35734 11.506 5.64227 11.6817 5.818L12.9135 7.0498H9.50017C9.25164 7.0498 9.05017 7.25128 9.05017 7.4998C9.05017 7.74833 9.25164 7.9498 9.50017 7.9498H12.9135L11.6817 9.18161C11.506 9.35734 11.506 9.64227 11.6817 9.818C11.8575 9.99374 12.1424 9.99374 12.3181 9.818L14.3181 7.818C14.4939 7.64227 14.4939 7.35734 14.3181 7.18161L12.3181 5.18161C12.1424 5.00587 11.8575 5.00587 11.6817 5.18161Z",
+      fill: "currentColor"
+    }
+  )
+), ke = (e) => /* @__PURE__ */ React.createElement(
   "svg",
-  Object.assign({ width: e.width || "1em", height: e.height || "1em", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, e),
-  React.createElement("path", { d: "M11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184Z", fill: "currentColor" })
-), Me = (e) => React.createElement(
+  {
+    width: e.width || "1em",
+    height: e.height || "1em",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    ...e
+  },
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184Z",
+      fill: "currentColor"
+    }
+  )
+), _e = (e) => /* @__PURE__ */ React.createElement(
   "svg",
-  Object.assign({ width: e.width || "1em", height: e.height || "1em", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, e),
-  React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 3.25V10.75C0 11.4404 0.559644 12 1.25 12H5.07341L4.82991 13.2986C4.76645 13.6371 5.02612 13.95 5.37049 13.95H9.62951C9.97389 13.95 10.2336 13.6371 10.1701 13.2986L9.92659 12H13.75C14.4404 12 15 11.4404 15 10.75V3.25C15 2.55964 14.4404 2 13.75 2H1.25C0.559643 2 0 2.55964 0 3.25ZM1.25 3H13.75C13.8881 3 14 3.11193 14 3.25V10.75C14 10.8881 13.8881 11 13.75 11H1.25C1.11193 11 1 10.8881 1 10.75V3.25C1 3.11193 1.11193 3 1.25 3ZM5.98909 12L5.79222 13.05H9.20778L9.01091 12H5.98909Z", fill: "currentColor" })
-), Se = (e) => React.createElement(
+  {
+    width: e.width || "1em",
+    height: e.height || "1em",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    ...e
+  },
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M0 3.25V10.75C0 11.4404 0.559644 12 1.25 12H5.07341L4.82991 13.2986C4.76645 13.6371 5.02612 13.95 5.37049 13.95H9.62951C9.97389 13.95 10.2336 13.6371 10.1701 13.2986L9.92659 12H13.75C14.4404 12 15 11.4404 15 10.75V3.25C15 2.55964 14.4404 2 13.75 2H1.25C0.559643 2 0 2.55964 0 3.25ZM1.25 3H13.75C13.8881 3 14 3.11193 14 3.25V10.75C14 10.8881 13.8881 11 13.75 11H1.25C1.11193 11 1 10.8881 1 10.75V3.25C1 3.11193 1.11193 3 1.25 3ZM5.98909 12L5.79222 13.05H9.20778L9.01091 12H5.98909Z",
+      fill: "currentColor"
+    }
+  )
+), Le = (e) => /* @__PURE__ */ React.createElement(
   "svg",
-  Object.assign({ width: e.width || "1em", height: e.height || "1em", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, e),
-  React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1 2.5V12.5C1 13.3284 1.67157 14 2.5 14H12.5C13.3284 14 14 13.3284 14 12.5V2.5C14 1.67157 13.3284 1 12.5 1H2.5C1.67157 1 1 1.67157 1 2.5ZM8 2V7H13V2.5C13 2.22386 12.7761 2 12.5 2H8ZM8 8V13H12.5C12.7761 13 13 12.7761 13 12.5V8H8ZM7 2H2.5C2.22386 2 2 2.22386 2 2.5V7H7V2ZM2 12.5C2 12.7761 2.22386 13 2.5 13H7V8H2V12.5Z", fill: "currentColor" })
-), Te = (e) => React.createElement(
+  {
+    width: e.width || "1em",
+    height: e.height || "1em",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    ...e
+  },
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M1 2.5V12.5C1 13.3284 1.67157 14 2.5 14H12.5C13.3284 14 14 13.3284 14 12.5V2.5C14 1.67157 13.3284 1 12.5 1H2.5C1.67157 1 1 1.67157 1 2.5ZM8 2V7H13V2.5C13 2.22386 12.7761 2 12.5 2H8ZM8 8V13H12.5C12.7761 13 13 12.7761 13 12.5V8H8ZM7 2H2.5C2.22386 2 2 2.22386 2 2.5V7H7V2ZM2 12.5C2 12.7761 2.22386 13 2.5 13H7V8H2V12.5Z",
+      fill: "currentColor"
+    }
+  )
+), Me = (e) => /* @__PURE__ */ React.createElement(
   "svg",
-  Object.assign({ width: e.width || "1em", height: e.height || "1em", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, e),
-  React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.1465 1.14645L3.71455 8.57836C3.62459 8.66832 3.55263 8.77461 3.50251 8.89155L2.04044 12.303C1.9599 12.491 2.00189 12.709 2.14646 12.8536C2.29103 12.9981 2.50905 13.0401 2.69697 12.9596L6.10847 11.4975C6.2254 11.4474 6.3317 11.3754 6.42166 11.2855L13.8536 3.85355C14.0488 3.65829 14.0488 3.34171 13.8536 3.14645L11.8536 1.14645C11.6583 0.951184 11.3417 0.951184 11.1465 1.14645ZM11.5 2.20711L12.7929 3.5L5.71455 10.5784L4.21924 11.2192L3.78081 10.7808L4.42166 9.28547L11.5 2.20711Z", fill: "currentColor" })
-), He = (e) => React.createElement(
+  {
+    width: e.width || "1em",
+    height: e.height || "1em",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    ...e
+  },
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M11.1465 1.14645L3.71455 8.57836C3.62459 8.66832 3.55263 8.77461 3.50251 8.89155L2.04044 12.303C1.9599 12.491 2.00189 12.709 2.14646 12.8536C2.29103 12.9981 2.50905 13.0401 2.69697 12.9596L6.10847 11.4975C6.2254 11.4474 6.3317 11.3754 6.42166 11.2855L13.8536 3.85355C14.0488 3.65829 14.0488 3.34171 13.8536 3.14645L11.8536 1.14645C11.6583 0.951184 11.3417 0.951184 11.1465 1.14645ZM11.5 2.20711L12.7929 3.5L5.71455 10.5784L4.21924 11.2192L3.78081 10.7808L4.42166 9.28547L11.5 2.20711Z",
+      fill: "currentColor"
+    }
+  )
+), Se = (e) => /* @__PURE__ */ React.createElement(
   "svg",
-  Object.assign({ width: e.width || "1em", height: e.height || "1em", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, e),
-  React.createElement("circle", { cx: 4.85355, cy: 4.5, r: 1.5, fill: "currentColor" }),
-  React.createElement("circle", { cx: 9.85355, cy: 10.5, r: 1.5, fill: "currentColor" }),
-  React.createElement("path", { d: "M3 11.6464L11 3.64642", stroke: "currentColor", strokeLinecap: "round" })
-), Be = (e) => React.createElement(
+  {
+    width: e.width || "1em",
+    height: e.height || "1em",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    ...e
+  },
+  /* @__PURE__ */ React.createElement("circle", { cx: 4.85355, cy: 4.5, r: 1.5, fill: "currentColor" }),
+  /* @__PURE__ */ React.createElement("circle", { cx: 9.85355, cy: 10.5, r: 1.5, fill: "currentColor" }),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M3 11.6464L11 3.64642",
+      stroke: "currentColor",
+      strokeLinecap: "round"
+    }
+  )
+), Te = (e) => /* @__PURE__ */ React.createElement(
   "svg",
-  Object.assign({ width: e.width || "1em", height: e.height || "1em", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, e),
-  React.createElement("path", { d: "M7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75C8 2.47386 7.77614 2.25 7.5 2.25Z", fill: "currentColor" })
-), Pe = (e) => React.createElement(
+  {
+    width: e.width || "1em",
+    height: e.height || "1em",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    ...e
+  },
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75C8 2.47386 7.77614 2.25 7.5 2.25Z",
+      fill: "currentColor"
+    }
+  )
+), He = (e) => /* @__PURE__ */ React.createElement(
   "svg",
-  Object.assign({ width: e.width || "1em", height: e.height || "1em", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, e),
-  React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.49988 10.2504C7.1516 10.2504 6.0299 9.28026 5.79473 7.99997H0.5C0.223858 7.99997 0 7.77611 0 7.49997C0 7.22383 0.223858 6.99997 0.5 6.99997H5.7947C6.0298 5.71959 7.15154 4.74939 8.49988 4.74939C9.84822 4.74939 10.97 5.71959 11.2051 6.99997H14.5C14.7761 6.99997 15 7.22383 15 7.49997C15 7.77611 14.7761 7.99997 14.5 7.99997H11.205C10.9699 9.28026 9.84816 10.2504 8.49988 10.2504ZM8.49988 9.30038C7.50549 9.30038 6.69938 8.49427 6.69938 7.49988C6.69938 6.5055 7.50549 5.69939 8.49988 5.69939C9.49426 5.69939 10.3004 6.5055 10.3004 7.49988C10.3004 8.49427 9.49426 9.30038 8.49988 9.30038Z", fill: "currentColor" })
-), Oe = (e) => React.createElement(
+  {
+    width: e.width || "1em",
+    height: e.height || "1em",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    ...e
+  },
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M8.49988 10.2504C7.1516 10.2504 6.0299 9.28026 5.79473 7.99997H0.5C0.223858 7.99997 0 7.77611 0 7.49997C0 7.22383 0.223858 6.99997 0.5 6.99997H5.7947C6.0298 5.71959 7.15154 4.74939 8.49988 4.74939C9.84822 4.74939 10.97 5.71959 11.2051 6.99997H14.5C14.7761 6.99997 15 7.22383 15 7.49997C15 7.77611 14.7761 7.99997 14.5 7.99997H11.205C10.9699 9.28026 9.84816 10.2504 8.49988 10.2504ZM8.49988 9.30038C7.50549 9.30038 6.69938 8.49427 6.69938 7.49988C6.69938 6.5055 7.50549 5.69939 8.49988 5.69939C9.49426 5.69939 10.3004 6.5055 10.3004 7.49988C10.3004 8.49427 9.49426 9.30038 8.49988 9.30038Z",
+      fill: "currentColor"
+    }
+  )
+), Be = (e) => /* @__PURE__ */ React.createElement(
   "svg",
-  Object.assign({ width: e.width || "1em", height: e.height || "1em", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, e),
-  React.createElement("path", { d: "M4 5.33333C4.4 3.77778 5.4 3 7 3C9.4 3 9.7 4.75 10.9 5.04167C11.7 5.23611 12.4 4.94444 13 4.16667C12.6 5.72222 11.6 6.5 10 6.5C7.6 6.5 7.3 4.75 6.1 4.45833C5.3 4.26389 4.6 4.55556 4 5.33333ZM1 8.83333C1.4 7.27778 2.4 6.5 4 6.5C6.4 6.5 6.7 8.25 7.9 8.54167C8.7 8.73611 9.4 8.44444 10 7.66667C9.6 9.22222 8.6 10 7 10C4.6 10 4.3 8.25 3.1 7.95833C2.3 7.76389 1.6 8.05556 1 8.83333Z", fill: "currentColor" })
-), je = (e) => React.createElement(
+  {
+    width: e.width || "1em",
+    height: e.height || "1em",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    ...e
+  },
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M4 5.33333C4.4 3.77778 5.4 3 7 3C9.4 3 9.7 4.75 10.9 5.04167C11.7 5.23611 12.4 4.94444 13 4.16667C12.6 5.72222 11.6 6.5 10 6.5C7.6 6.5 7.3 4.75 6.1 4.45833C5.3 4.26389 4.6 4.55556 4 5.33333ZM1 8.83333C1.4 7.27778 2.4 6.5 4 6.5C6.4 6.5 6.7 8.25 7.9 8.54167C8.7 8.73611 9.4 8.44444 10 7.66667C9.6 9.22222 8.6 10 7 10C4.6 10 4.3 8.25 3.1 7.95833C2.3 7.76389 1.6 8.05556 1 8.83333Z",
+      fill: "currentColor"
+    }
+  )
+), Ve = (e) => /* @__PURE__ */ React.createElement(
   "svg",
-  Object.assign({ width: e.width || "1em", height: e.height || "1em", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, e),
-  React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5 1.5C5 1.77614 5.22386 2 5.5 2H9.5C9.77614 2 10 1.77614 10 1.5C10 1.22386 9.77614 1 9.5 1H5.5C5.22386 1 5 1.22386 5 1.5ZM3.5 3H11.5C11.7761 3 12 3.22386 12 3.5C12 3.77614 11.7761 4 11.5 4H11V12C11 12.5523 10.5523 13 10 13H5C4.44772 13 4 12.5523 4 12V4L3.5 4C3.22386 4 3 3.77614 3 3.5C3 3.22386 3.22386 3 3.5 3ZM10 4V12H5V4H10Z", fill: "currentColor" })
-), I = F(
+  {
+    width: e.width || "1em",
+    height: e.height || "1em",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    ...e
+  },
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M5 1.5C5 1.77614 5.22386 2 5.5 2H9.5C9.77614 2 10 1.77614 10 1.5C10 1.22386 9.77614 1 9.5 1H5.5C5.22386 1 5 1.22386 5 1.5ZM3.5 3H11.5C11.7761 3 12 3.22386 12 3.5C12 3.77614 11.7761 4 11.5 4H11V12C11 12.5523 10.5523 13 10 13H5C4.44772 13 4 12.5523 4 12V4L3.5 4C3.22386 4 3 3.77614 3 3.5C3 3.22386 3.22386 3 3.5 3ZM10 4V12H5V4H10Z",
+      fill: "currentColor"
+    }
+  )
+), F = de(
   ({
     onClick: e,
     onChange: t,
     className: l,
-    defaultValue: a,
+    value: a,
     children: n,
     inputClassName: r,
     readOnly: s,
     placeholder: c,
     onBlur: i,
     type: o = "text",
-    label: m,
-    helper: u = "",
-    ...E
-  }, R) => {
-    const d = `text-control-${Math.random().toString(36).substring(2, 15)}`;
+    label: f,
+    helper: d = "",
+    ...m
+  }, u) => {
+    const b = `text-control-${Math.random().toString(36).substring(2, 15)}`;
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: f("flex items-center p-0", l),
-        ...E
+        className: p("flex items-center p-0", l),
+        ...m
       },
-      m ? /* @__PURE__ */ React.createElement("label", { htmlFor: d, className: "text-primary !m-0 !mb-0 !mr-2" }, m) : null,
+      f ? /* @__PURE__ */ React.createElement("label", { htmlFor: b, className: "text-primary !m-0 !mb-0 !mr-2" }, f) : null,
       /* @__PURE__ */ React.createElement(
         "input",
         {
-          id: d,
-          className: f(
-            "border-primary !m-0 !mb-0 h-[32px] !rounded-none border border-opacity-70 focus:outline-none focus:ring-0",
+          id: b,
+          className: p(
+            "components-text-control__input",
             r
           ),
           type: o,
@@ -445,16 +603,16 @@ const Ne = ({ children: e, className: t, label: l, onClick: a }) => /* @__PURE__
           },
           onChange: (x) => t && t(x.target.value),
           readOnly: s,
-          ref: R
+          ref: u
         }
       ),
-      /* @__PURE__ */ React.createElement("span", null, n),
-      u && /* @__PURE__ */ React.createElement("p", { className: "text-primary !m-0 !mb-0 text-xs" }, u)
+      n,
+      d && /* @__PURE__ */ React.createElement("p", { className: "text-primary !m-0 !mb-0 text-xs" }, d)
     );
   }
 );
-I.displayName = "TextControl";
-const dt = ({
+F.displayName = "TextControl";
+const ot = ({
   data: e,
   active: t,
   setActive: l,
@@ -465,31 +623,31 @@ const dt = ({
   renderItemActions: c,
   addons: i,
   className: o = "",
-  footerSlot: m,
-  footerSlotClassName: u = ""
+  footerSlot: f,
+  footerSlotClassName: d = ""
 }) => {
-  const [E, R] = p({
+  const [m, u] = g({
     id: "",
     name: ""
-  }), [d, x] = p(!1), T = k(null), b = () => {
+  }), [b, x] = g(!1), k = y(null), N = () => {
     a();
-  }, _ = () => {
+  }, W = () => {
     if (!t || e.length === 0) return;
-    const C = e.filter((H) => H.id !== (t == null ? void 0 : t.id)), w = e.findIndex((H) => H.id === (t == null ? void 0 : t.id)), X = C[w] || C[0];
-    n(t == null ? void 0 : t.id), l(X);
-  }, L = (C) => {
-    x(!0), E.id && r(E.id, { name: C }), setTimeout(() => {
-      R({ id: "", name: "" }), x(!1);
+    const h = e.filter((S) => S.id !== (t == null ? void 0 : t.id)), M = e.findIndex((S) => S.id === (t == null ? void 0 : t.id)), q = h[M] || h[0];
+    n(t == null ? void 0 : t.id), l(q);
+  }, K = (h) => {
+    x(!0), m.id && r(m.id, { name: h }), setTimeout(() => {
+      u({ id: "", name: "" }), x(!1);
     }, 500);
   };
-  return /* @__PURE__ */ React.createElement(h, { important: !0, className: o }, /* @__PURE__ */ React.createElement("ul", { className: "h-[calc(100%-80px)] divide-y overflow-auto" }, i, e.length > 0 && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("ul", { className: "divide-y border-b" }, e.map((C) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(E, { important: !0, className: o }, /* @__PURE__ */ React.createElement("ul", { className: "h-[calc(100%-80px)] divide-y overflow-auto" }, i, e.length > 0 && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("ul", { className: "divide-y divide-border border-b border-border" }, e.map((h) => /* @__PURE__ */ React.createElement(
     "li",
     {
-      key: `data__${C.id}`,
-      className: f(
-        "relative m-0 flex items-center justify-between gap-1 bg-opacity-50 hover:bg-easy",
+      key: `data__${h.id}`,
+      className: p(
+        "relative !mb-0 flex items-center justify-between gap-1 bg-opacity-50 hover:bg-easy",
         {
-          "bg-easy": C.id === (t == null ? void 0 : t.id)
+          "bg-easy": h.id === (t == null ? void 0 : t.id)
         }
       )
     },
@@ -498,49 +656,49 @@ const dt = ({
       {
         className: "text-gray-medium w-full truncate  px-3 py-2 text-left text-sm/6 font-semibold hover:text-wordpress",
         onClick: () => {
-          s(t == null ? void 0 : t.id, { ...t }), l(C);
+          s(t == null ? void 0 : t.id, { ...t }), l(h);
         },
         onDoubleClick: () => {
-          R({ id: C.id, name: C.name || "" });
+          u({ id: h.id, name: h.name || "" });
         }
       },
-      d && E.id === C.id ? /* @__PURE__ */ React.createElement("span", { className: "animate-pulse text-gray-medium" }, E.name) : /* @__PURE__ */ React.createElement("span", { className: "text-gray-medium" }, C.name || "Untitled")
-    ), E.id === C.id && !d && /* @__PURE__ */ React.createElement(
-      I,
+      b && m.id === h.id ? /* @__PURE__ */ React.createElement("span", { className: "animate-pulse text-gray-medium" }, m.name) : /* @__PURE__ */ React.createElement("span", { className: "text-gray-medium" }, h.name || "Untitled")
+    ), m.id === h.id && !b && /* @__PURE__ */ React.createElement(
+      F,
       {
         className: "absolute left-1 top-0 w-[calc(100%-.5rem)] h-full",
         inputClassName: "w-full",
-        defaultValue: E.name,
-        onChange: (w) => R({ ...E, name: w }),
-        ref: T,
-        onBlur: L
+        defaultValue: m.name,
+        onChange: (M) => u({ ...m, name: M }),
+        ref: k,
+        onBlur: K
       }
     )),
-    c && /* @__PURE__ */ React.createElement("div", { className: "flex gap-1 pr-1" }, c(C))
+    c && /* @__PURE__ */ React.createElement("div", { className: "flex gap-1 pr-1" }, c(h))
   ))))), /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: f(
+      className: p(
         "flex flex-wrap justify-center gap-2 p-2",
-        u
+        d
       )
     },
-    m,
+    f,
     /* @__PURE__ */ React.createElement(
-      v,
+      C,
       {
-        onClick: b,
-        icon: /* @__PURE__ */ React.createElement(Be, { className: "h-4 w-4" }),
+        onClick: N,
+        icon: /* @__PURE__ */ React.createElement(Te, { className: "h-4 w-4" }),
         variant: "tertiary",
         size: "compact"
       },
       "Add"
     ),
     /* @__PURE__ */ React.createElement(
-      v,
+      C,
       {
-        onClick: _,
-        icon: /* @__PURE__ */ React.createElement(je, { className: "h-4 w-4" }),
+        onClick: W,
+        icon: /* @__PURE__ */ React.createElement(Ve, { className: "h-4 w-4" }),
         variant: "tertiary",
         size: "compact",
         disabled: !t || e.length === 0
@@ -548,17 +706,17 @@ const dt = ({
       "Remove"
     )
   ));
-}, pt = ({
+}, it = ({
   duration: e = 3e3,
   className: t,
   children: l,
   show: a,
   message: n
 }) => {
-  const [r, s] = p(!1), c = k(!1), i = k(null);
-  return g(() => {
+  const [r, s] = g(!1), c = y(!1), i = y(null);
+  return R(() => {
     c.current = !0;
-  }, []), g(() => {
+  }, []), R(() => {
     if (c.current)
       return a && (s(!0), i.current = setTimeout(() => {
         s(!1);
@@ -566,59 +724,60 @@ const dt = ({
         i.current && clearTimeout(i.current);
       };
   }, [a, e]), r ? /* @__PURE__ */ React.createElement(
-    h,
+    E,
     {
       important: !0,
-      className: f("bb-ui__disappearing-message", t)
+      className: p("bb-ui__disappearing-message", t)
     },
     /* @__PURE__ */ React.createElement("div", { className: "bb-ui__disappearing-message__content" }, n ?? l)
   ) : null;
-}, Ve = ({
+}, Pe = ({
   label: e,
   className: t,
-  defaultValue: l,
-  defaultIcon: a = ke,
-  onPressedChange: n,
-  options: r
+  value: l,
+  defaultIcon: a = Ne,
+  size: n = "medium",
+  onPressedChange: r,
+  options: s,
+  ...c
 }) => {
-  var o;
-  const [s, c] = p(null);
-  g(() => {
-    c(l);
+  var m;
+  const [i, o] = g(null);
+  R(() => {
+    o(l);
   }, [l]);
-  const i = [
-    ...r.map((m) => ({
-      icon: m.icon,
-      label: m.label,
-      title: m.label,
-      value: m.value,
+  const f = [
+    ...s.map((u) => ({
+      icon: u.icon,
+      label: u.label,
+      title: u.label,
+      value: u.value,
       onClick: () => {
-        c(m.value), n(m.value);
+        o(u.value), r(u.value);
       }
     })),
     {
-      icon: /* @__PURE__ */ React.createElement(N, { icon: a }),
+      icon: /* @__PURE__ */ React.createElement(v, { icon: a }),
       title: "Reset",
       value: "reset",
       onClick: () => {
-        c("reset"), n("reset");
+        o("reset"), r("reset");
       }
     }
   ];
-  return /* @__PURE__ */ React.createElement(
-    Q,
+  let d = "1em";
+  return n === "medium" ? d = "1.5em" : n === "large" && (d = "2em"), /* @__PURE__ */ React.createElement(
+    J,
     {
-      controls: i,
-      className: f(
-        "blockbite-ui__dropdown-picker border-primary border",
-        t
-      ),
-      icon: ((o = r.find((m) => m.value === s)) == null ? void 0 : o.icon) || /* @__PURE__ */ React.createElement(N, { icon: a }),
-      label: e || "Select"
+      controls: f,
+      className: p("blockbite-ui__dropdown-picker", t),
+      icon: ((m = s.find((u) => u.value === i)) == null ? void 0 : m.icon) || /* @__PURE__ */ React.createElement(v, { width: d, height: d, icon: a }),
+      label: e || "Select",
+      ...c
     }
   );
 };
-function ft({
+function mt({
   icon: e,
   title: t,
   description: l,
@@ -627,24 +786,24 @@ function ft({
 }) {
   return /* @__PURE__ */ React.createElement("div", { ...n }, /* @__PURE__ */ React.createElement("div", { className: "flex h-full w-full flex-col items-center justify-center text-center !font-sans" }, /* @__PURE__ */ React.createElement("div", { className: "max-w-sm" }, e && /* @__PURE__ */ React.createElement("div", { className: "mx-auto !text-gray-400" }, e), /* @__PURE__ */ React.createElement("h3", { className: "text-gray-medium mt-2 !font-sans text-sm font-medium" }, t), /* @__PURE__ */ React.createElement("p", { className: "mt-1 !font-sans text-sm !text-gray-500" }, l), a && /* @__PURE__ */ React.createElement("div", { className: "mt-4" }, a))));
 }
-function gt({
+function ut({
   children: e
 }) {
-  const t = k(null), [l, a] = p({ x: 100, y: 100 }), [n, r] = p(!1), [s, c] = p({ x: 0, y: 0 });
-  g(() => {
-    const o = (u) => {
+  const t = y(null), [l, a] = g({ x: 100, y: 100 }), [n, r] = g(!1), [s, c] = g({ x: 0, y: 0 });
+  R(() => {
+    const o = (d) => {
       n && a({
-        x: u.clientX - s.x,
-        y: u.clientY - s.y
+        x: d.clientX - s.x,
+        y: d.clientY - s.y
       });
-    }, m = () => r(!1);
-    return window.addEventListener("mousemove", o), window.addEventListener("mouseup", m), () => {
-      window.removeEventListener("mousemove", o), window.removeEventListener("mouseup", m);
+    }, f = () => r(!1);
+    return window.addEventListener("mousemove", o), window.addEventListener("mouseup", f), () => {
+      window.removeEventListener("mousemove", o), window.removeEventListener("mouseup", f);
     };
   }, [n, s]);
   const i = (o) => {
-    const m = t.current.getBoundingClientRect();
-    c({ x: o.clientX - m.left, y: o.clientY - m.top }), r(!0);
+    const f = t.current.getBoundingClientRect();
+    c({ x: o.clientX - f.left, y: o.clientY - f.top }), r(!0);
   };
   return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
     "div",
@@ -663,67 +822,62 @@ function gt({
     )
   ));
 }
-const Rt = ({
-  defaultValue: e,
+const dt = ({
+  value: e,
   onValueChange: t,
   url: l
 }) => {
-  const [a, n] = p({
+  const [a, n] = g({
     x: 0.5,
     y: 0.5
   });
-  return g(() => {
-    t(
-      `[${(a.x * 100).toFixed(2)}%_${(a.y * 100).toFixed(
-        2
-      )}%]`
-    );
-  }, [a]), g(() => {
-    if (e.includes("%")) {
+  return R(() => {
+    if (e && e.includes("%")) {
       const [r, s] = e.replace("[", "").replace("%]", "").split("_").map((c) => parseFloat(c) / 100);
-      n({
-        x: r,
-        y: s
-      });
+      n({ x: r, y: s });
     }
-  }, [e]), /* @__PURE__ */ React.createElement(h, { className: "relative flex flex-col" }, /* @__PURE__ */ React.createElement(
-    ee,
+  }, [e]), R(() => {
+    t(
+      `[${(a.x * 100).toFixed(2)}%_${(a.y * 100).toFixed(2)}%]`
+    );
+  }, [a]), /* @__PURE__ */ React.createElement(E, { className: "relative flex flex-col" }, /* @__PURE__ */ React.createElement(
+    Q,
     {
       url: l,
       value: a,
-      onDrag: (r) => n(r),
-      onChange: (r) => n(r)
+      onDrag: n,
+      onChange: n
     }
   ));
 };
-function Et(e) {
-  const [t, l] = p(""), [a, n] = p([]), [r, s] = p({
+function ft(e) {
+  const [t, l] = g(""), [a, n] = g([]), [r, s] = g({
     url: "",
     title: ""
   });
-  return g(() => {
-    t !== "" && (n(null), Ee({
+  return R(() => {
+    t !== "" && (n(null), pe({
       path: `/blockbite/v1/block-helpers/get-links/${t}`
     }).then(
       (c) => {
         c != null && c.length ? n([...c]) : n([]);
       }
     ));
-  }, [t]), g(() => {
+  }, [t]), R(() => {
     r.url !== "" && e.parentCallback(r);
-  }, [r]), /* @__PURE__ */ React.createElement(h, { className: "blockbite--editor-linkwrap" }, /* @__PURE__ */ React.createElement(
-    O,
+  }, [r]), /* @__PURE__ */ React.createElement(E, { className: "blockbite--editor-linkwrap" }, /* @__PURE__ */ React.createElement(
+    B,
     {
       __next40pxDefaultSize: !0,
       __nextHasNoMarginBottom: !0,
-      label: y("Search link", "blockbitelinks"),
+      label: w("Search link", "blockbitelinks"),
       value: t,
       placeholder: "Example: About",
       onChange: (c) => l(c),
-      help: y("Type a post, page, title", "blockbitelinks")
+      help: w("Type a post, page, title", "blockbitelinks")
     }
   ), t ? /* @__PURE__ */ React.createElement("div", { className: "blockbite--editor-linklist" }, /* @__PURE__ */ React.createElement(
-    Ie,
+    Ze,
     {
       links: a,
       onActiveLink: (c) => [
@@ -733,12 +887,12 @@ function Et(e) {
     }
   )) : null);
 }
-function Ie({ links: e, onActiveLink: t }) {
+function Ze({ links: e, onActiveLink: t }) {
   if (e === null)
     return /* @__PURE__ */ React.createElement("p", null, "Loading...");
   if (e.length === 0)
     return /* @__PURE__ */ React.createElement("p", null, "No Results");
-  const l = e.map((a) => /* @__PURE__ */ React.createElement(h, { key: a.id }, /* @__PURE__ */ React.createElement(
+  const l = e.map((a) => /* @__PURE__ */ React.createElement(E, { key: a.id }, /* @__PURE__ */ React.createElement(
     "span",
     {
       className: "blockbite--editor-link",
@@ -750,7 +904,7 @@ function Ie({ links: e, onActiveLink: t }) {
   )));
   return /* @__PURE__ */ React.createElement(React.Fragment, null, l);
 }
-function bt({ mediaProps: e, mediaCallback: t }) {
+function pt({ mediaProps: e, mediaCallback: t }) {
   const l = [
     "image",
     "video",
@@ -758,7 +912,7 @@ function bt({ mediaProps: e, mediaCallback: t }) {
     "svg",
     "text/plain",
     "application/json"
-  ], [a, n] = p({
+  ], [a, n] = g({
     id: null,
     url: "",
     sizes: [],
@@ -767,7 +921,7 @@ function bt({ mediaProps: e, mediaCallback: t }) {
     width: 0,
     height: 0
   });
-  g(() => {
+  R(() => {
     e && n({ ...e });
   }, [e]);
   const r = () => {
@@ -781,9 +935,9 @@ function bt({ mediaProps: e, mediaCallback: t }) {
       medium: null,
       large: null
     };
-    c != null && c.sizes && Object.keys(c.sizes).map((m) => {
-      const u = c.sizes[m];
-      return (m === "thumbnail" || u.width < 768 || u.height < 768) && (i.thumbnail = u.url), (m === "medium" || u.width > 1024 && u.width < 1024 || u.height < 1536 && u.height > 1536) && (i.medium = u.url), (m === "large" || u.width > 1536 || u.height > 1536) && (i.large = u.url), null;
+    c != null && c.sizes && Object.keys(c.sizes).map((f) => {
+      const d = c.sizes[f];
+      return (f === "thumbnail" || d.width < 768 || d.height < 768) && (i.thumbnail = d.url), (f === "medium" || d.width > 1024 && d.width < 1024 || d.height < 1536 && d.height > 1536) && (i.medium = d.url), (f === "large" || d.width > 1536 || d.height > 1536) && (i.large = d.url), null;
     }), c.url.endsWith(".json") && (c.type = "lottie"), c.url.endsWith(".svg") && (c.type = "svg");
     const o = {
       id: c.id,
@@ -796,40 +950,40 @@ function bt({ mediaProps: e, mediaCallback: t }) {
     };
     t({ ...o });
   };
-  return /* @__PURE__ */ React.createElement(te, null, a.id !== null && /* @__PURE__ */ React.createElement(B, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(ee, null, a.id !== null && /* @__PURE__ */ React.createElement(T, null, /* @__PURE__ */ React.createElement(
     $,
     {
       onSelect: s,
       value: a.id,
       allowedTypes: l,
       render: ({ open: c }) => /* @__PURE__ */ React.createElement(
-        v,
+        C,
         {
           className: a.id === 0 ? "editor-post-featured-image__toggle" : "editor-post-featured-image__preview",
           onClick: c
         },
-        a.id === 0 && y("Choose Media", "blockbite"),
+        a.id === 0 && w("Choose Media", "blockbite"),
         a.id && a.type === "image" ? /* @__PURE__ */ React.createElement("div", { className: "blockbite--editor-visual-image" }, /* @__PURE__ */ React.createElement(
           "img",
           {
-            alt: a.alt ? a.alt : y("Image", "blockbite"),
+            alt: a.alt ? a.alt : w("Image", "blockbite"),
             src: a.url
           }
         )) : "Add media"
       )
     }
-  )), a.id !== 0 && /* @__PURE__ */ React.createElement(B, null, /* @__PURE__ */ React.createElement(
+  )), a.id !== 0 && /* @__PURE__ */ React.createElement(T, null, /* @__PURE__ */ React.createElement(
     $,
     {
-      title: y("Replace media", "blockbite"),
+      title: w("Replace media", "blockbite"),
       value: a.id,
       onSelect: s,
       allowedTypes: l,
-      render: ({ open: c }) => /* @__PURE__ */ React.createElement(v, { onClick: c }, y("Replace media", "blockbite"))
+      render: ({ open: c }) => /* @__PURE__ */ React.createElement(C, { onClick: c }, w("Replace media", "blockbite"))
     }
-  )), a.id !== 0 && /* @__PURE__ */ React.createElement(B, null, /* @__PURE__ */ React.createElement(v, { onClick: () => r(), isDestructive: !0 }, y("Remove media", "blockbite"))));
+  )), a.id !== 0 && /* @__PURE__ */ React.createElement(T, null, /* @__PURE__ */ React.createElement(C, { onClick: () => r(), isDestructive: !0 }, w("Remove media", "blockbite"))));
 }
-const Ze = ({
+const $e = ({
   children: e,
   className: t,
   position: l,
@@ -837,8 +991,8 @@ const Ze = ({
   onClick: n,
   onVisibleChange: r
 }) => {
-  const [s, c] = p(!!a);
-  g(() => {
+  const [s, c] = g(!!a);
+  R(() => {
     a !== void 0 && c(a);
   }, [a]);
   const i = () => {
@@ -846,7 +1000,7 @@ const Ze = ({
     c(o), r && r(o);
   };
   return /* @__PURE__ */ React.createElement(React.Fragment, null, s && /* @__PURE__ */ React.createElement(
-    ae,
+    te,
     {
       position: l,
       className: "blockbite-ui__popover",
@@ -856,17 +1010,17 @@ const Ze = ({
       }
     },
     /* @__PURE__ */ React.createElement("div", { className: t }, /* @__PURE__ */ React.createElement("div", { className: "relative h-full w-full p-4" }, /* @__PURE__ */ React.createElement(
-      v,
+      C,
       {
         onClick: i,
         size: "small",
         className: "close-button absolute right-0 top-0"
       },
-      /* @__PURE__ */ React.createElement(Le, null)
+      /* @__PURE__ */ React.createElement(ke, null)
     ), e))
   ));
-}, $e = ({
-  defaultValue: e,
+}, Ie = ({
+  value: e,
   label: t,
   min: l = 0,
   max: a = 2e3,
@@ -876,198 +1030,190 @@ const Ze = ({
   showTooltip: c = !1,
   ...i
 }) => {
-  const [o] = p(0), [m, u] = p(0);
-  g(() => {
-    u(Math.round(parseInt(e) / (s ? 16 : 1)));
+  const [o] = g(0), [f, d] = g(0);
+  R(() => {
+    d(Math.round(parseInt(e) / (s ? 16 : 1)));
   }, [e]);
-  function E(R) {
-    const d = R * (s ? 16 : 1);
-    r(d.toString());
+  function m(u) {
+    const b = u * (s ? 16 : 1);
+    r(b.toString());
   }
-  return /* @__PURE__ */ React.createElement(h, { className: "flex min-w-[240px] flex-col" }, /* @__PURE__ */ React.createElement(
-    le,
+  return /* @__PURE__ */ React.createElement(E, { className: "flex min-w-[240px] flex-col" }, /* @__PURE__ */ React.createElement(
+    ae,
     {
       __next40pxDefaultSize: !0,
       __nextHasNoMarginBottom: !0,
       label: t,
-      value: m,
+      value: f,
       min: l,
       max: a,
       showTooltip: c,
       withInputField: n,
-      onChange: (R) => {
-        u(R), E(R);
+      onChange: (u) => {
+        d(u), m(u);
       },
       resetFallbackValue: o,
       ...i
     }
-  ), /* @__PURE__ */ React.createElement("span", null, s ? `${m * 16}px` : null, " "));
-}, ht = ({
-  defaultUnit: e,
-  defaultValue: t,
+  ), /* @__PURE__ */ React.createElement("span", null, s ? `${f * 16}px` : null, " "));
+}, gt = ({
+  unit: e,
+  value: t,
   onValueChange: l,
   onUnitChange: a,
-  inputClassName: n = "w-[75px]"
+  inputClassName: n = ""
 }) => {
-  const [r, s] = p(!1), [c, i] = p([]), [o, m] = p(e), [u, E] = p(""), [R, d] = p(t);
-  g(() => {
-    e && m(e), E(t.toString());
-  }, [e, t]), g(() => {
-    !r && o === "arbitrary" && d(u);
+  const [r, s] = g(!1), [c, i] = g([]), [o, f] = g(t);
+  R(() => {
+    !r && e === "arbitrary" && f(t);
   }, [r]);
-  const x = (b) => {
-    var _, L, C;
-    if (b !== "arbitrary" && ((C = (L = (_ = bb == null ? void 0 : bb.codex) == null ? void 0 : _.units) == null ? void 0 : L.spacing) != null && C[b])) {
-      const w = bb.codex.units.spacing[b];
+  const d = (u) => {
+    var b, x, k;
+    if (u !== "arbitrary" && ((k = (x = (b = bb == null ? void 0 : bb.codex) == null ? void 0 : b.units) == null ? void 0 : x.spacing) != null && k[u])) {
+      const N = bb.codex.units.spacing[u];
       i(
-        Array.isArray(w) ? w : Object.keys(w)
+        Array.isArray(N) ? N : Object.keys(N)
       );
     } else
       i([]);
     s(!0);
-  }, T = [
+  }, m = [
     {
-      icon: /* @__PURE__ */ React.createElement(Oe, null),
+      icon: /* @__PURE__ */ React.createElement(Be, null),
       label: "Tailwind CSS Units",
       value: "native"
     },
-    { icon: /* @__PURE__ */ React.createElement(He, null), label: "Percentage Units", value: "percent" },
-    { icon: /* @__PURE__ */ React.createElement(Se, null), label: "Grid Units", value: "grid" },
-    { icon: /* @__PURE__ */ React.createElement(Me, null), label: "Screen Units", value: "screen" },
-    { icon: /* @__PURE__ */ React.createElement(Pe, null), label: "Pixel Units", value: "arbitrary" },
-    { icon: /* @__PURE__ */ React.createElement(_e, null), label: "Fluid Units", value: "fluid" }
+    { icon: /* @__PURE__ */ React.createElement(Se, null), label: "Percentage Units", value: "percent" },
+    { icon: /* @__PURE__ */ React.createElement(Le, null), label: "Grid Units", value: "grid" },
+    { icon: /* @__PURE__ */ React.createElement(_e, null), label: "Screen Units", value: "screen" },
+    { icon: /* @__PURE__ */ React.createElement(He, null), label: "Pixel Units", value: "arbitrary" },
+    { icon: /* @__PURE__ */ React.createElement(ye, null), label: "Fluid Units", value: "fluid" }
   ];
   return /* @__PURE__ */ React.createElement("div", { className: "relative flex flex-col items-baseline" }, /* @__PURE__ */ React.createElement(
-    I,
+    O,
     {
-      inputClassName: n,
-      defaultValue: (
-        // Remove the "b_" prefix for grid units
-        o === "grid" ? u.replace("b_", "") : u
-      ),
-      onClick: () => o !== "arbitrary" && x(o),
-      onChange: (b) => {
-        E(b), l(b);
-      },
-      readOnly: o !== "arbitrary"
-    },
-    /* @__PURE__ */ React.createElement(
-      Ze,
-      {
-        visible: r,
-        position: "bottom left",
-        className: "w-[300px] bg-white shadow-sm",
-        onVisibleChange: s
-      },
-      o === "arbitrary" ? /* @__PURE__ */ React.createElement(
+      __next40pxDefaultSize: !0,
+      className: n,
+      value: e === "grid" ? t.replace("b_", "") : t,
+      onClick: () => e !== "arbitrary" && d(e),
+      onChange: l,
+      readOnly: e !== "arbitrary",
+      autoComplete: "off",
+      suffix: /* @__PURE__ */ React.createElement(z, null, /* @__PURE__ */ React.createElement(
         $e,
         {
-          defaultValue: u,
-          label: "Pixel Value",
-          min: 0,
-          max: 100,
-          gridMode: !0,
-          showTooltip: !1,
-          allowReset: !0,
-          resetFallbackValue: isNaN(R.toString()) ? 0 : Number(R) / 16,
-          onValueChange: (b) => {
-            E(b), l(b);
+          visible: r,
+          position: "bottom left",
+          className: "w-[300px] bg-white shadow-sm",
+          onVisibleChange: s
+        },
+        e === "arbitrary" ? /* @__PURE__ */ React.createElement(
+          Ie,
+          {
+            value: t,
+            label: "Pixel Value",
+            min: 0,
+            max: 100,
+            gridMode: !0,
+            showTooltip: !1,
+            allowReset: !0,
+            resetFallbackValue: isNaN(o.toString()) ? 0 : Number(o) / 16,
+            onValueChange: l
           }
-        }
-      ) : /* @__PURE__ */ React.createElement(
-        ye,
+        ) : /* @__PURE__ */ React.createElement(
+          we,
+          {
+            className: "mt-4",
+            options: c.map((u) => ({
+              value: u,
+              label: e === "grid" ? u.toString().replace("b_", "") : u,
+              onClick: () => {
+                l(u);
+              }
+            })),
+            size: "small",
+            value: (t == null ? void 0 : t.toString()) || "",
+            onPressedChange: l
+          }
+        )
+      ), /* @__PURE__ */ React.createElement(
+        Pe,
         {
-          className: "mt-4",
-          options: c.map((b) => ({
-            value: b,
-            label: o === "grid" ? b.toString().replace("b_", "") : b,
-            onClick: () => {
-              E(b), l(b);
-            }
-          })),
-          size: "small",
-          defaultPressed: (u == null ? void 0 : u.toString()) || "",
-          onPressedChange: (b) => {
-            E(b), l(b);
+          value: e,
+          options: m,
+          toggleProps: {
+            className: "!p-0 !min-w-0 !h-6 w-6"
+          },
+          onPressedChange: (u) => {
+            u === "reset" ? (l(""), s(!1)) : (a(u), d(u));
           }
         }
-      )
-    ),
-    /* @__PURE__ */ React.createElement(
-      Ve,
-      {
-        className: "h-[32px]",
-        defaultValue: o,
-        options: T,
-        onPressedChange: (b) => {
-          b === "reset" ? (E(""), l(""), s(!1)) : (m(b), a(b), x(b));
-        }
-      }
-    )
+      ))
+    }
   ));
-}, U = G(null), W = () => {
-  const e = V(U);
+}, U = A(null), G = () => {
+  const e = P(U);
   if (!e)
     throw new Error("useModalContext must be used within a ModalProvider");
   return e;
-}, Ct = ({
+}, Rt = ({
   children: e,
   defaultOpen: t,
   onOpenChange: l,
   title: a,
   className: n
 }) => {
-  const [r, s] = p(!1);
-  g(() => {
+  const [r, s] = g(!1);
+  R(() => {
     s(t);
   }, [t]);
   const c = () => s(!0), i = () => s(!1);
-  return g(() => {
+  return R(() => {
     l(r);
-  }, [r, l]), /* @__PURE__ */ React.createElement(U.Provider, { value: { closeModal: i, openModal: c } }, M.map(e, (o) => S(o) && o.type === Fe ? o : null), r && /* @__PURE__ */ React.createElement(
-    ne,
+  }, [r, l]), /* @__PURE__ */ React.createElement(U.Provider, { value: { closeModal: i, openModal: c } }, _.map(e, (o) => L(o) && o.type === De ? o : null), r && /* @__PURE__ */ React.createElement(
+    le,
     {
-      className: f("blockbite-ui__modal", n),
+      className: p("blockbite-ui__modal", n),
       onRequestClose: i,
       title: a
     },
-    /* @__PURE__ */ React.createElement("div", { className: "relative" }, M.map(e, (o) => S(o) && o.type === ze ? o : null), M.map(e, (o) => S(o) && o.type === De ? o : null), M.map(e, (o) => S(o) && o.type === Ae ? o : null))
+    /* @__PURE__ */ React.createElement("div", { className: "relative" }, _.map(e, (o) => L(o) && o.type === Oe ? o : null), _.map(e, (o) => L(o) && o.type === je ? o : null), _.map(e, (o) => L(o) && o.type === ze ? o : null))
   ));
-}, ze = ({ children: e, className: t = "", ...l }) => /* @__PURE__ */ React.createElement(
+}, Oe = ({ children: e, className: t = "", ...l }) => /* @__PURE__ */ React.createElement(
   "div",
   {
-    className: f(
+    className: p(
       "flex flex-col space-y-1.5 text-center sm:text-left",
       t
     ),
     ...l
   },
   e
-), Ae = ({ children: e, className: t = "", ...l }) => /* @__PURE__ */ React.createElement(
+), ze = ({ children: e, className: t = "", ...l }) => /* @__PURE__ */ React.createElement(
   "div",
   {
-    className: f(
-      "border-gray-light fixed bottom-0 left-0 right-0 flex h-[4rem] flex-row items-center justify-end space-x-2 border-t bg-white px-4",
+    className: p(
+      "border-border fixed bottom-0 left-0 right-0 flex h-[4rem] flex-row items-center justify-end gap-2 border-t bg-white px-4",
       t
     ),
     ...l
   },
   e
-), De = ({ children: e, className: t = "", ...l }) => /* @__PURE__ */ React.createElement(
+), je = ({ children: e, className: t = "", ...l }) => /* @__PURE__ */ React.createElement(
   "div",
   {
-    className: f("text-gray-medium px-4 pb-4 text-sm", t),
+    className: p("text-gray-medium px-4 pb-4 text-sm", t),
     ...l
   },
   e
-), xt = ({ children: e }) => {
-  const { closeModal: t } = W();
+), Et = ({ children: e }) => {
+  const { closeModal: t } = G();
   return /* @__PURE__ */ React.createElement("div", { onClick: t, className: "cursor-pointer" }, e);
-}, Fe = ({ children: e }) => {
-  const { openModal: t } = W();
+}, De = ({ children: e }) => {
+  const { openModal: t } = G();
   return /* @__PURE__ */ React.createElement("div", { onClick: t, className: "cursor-pointer" }, e);
 };
-function Ge(e, t) {
+function Ae(e, t) {
   Array.from(e.styleSheets).forEach((l) => {
     try {
       if (l.cssRules) {
@@ -1088,15 +1234,15 @@ function Ge(e, t) {
     }
   });
 }
-const vt = ({
+const ht = ({
   windowInstance: e,
   onClose: t,
   children: l
 }) => {
-  const a = ge(() => document.createElement("div"), []);
-  return g(() => {
+  const a = fe(() => document.createElement("div"), []);
+  return R(() => {
     const n = e;
-    n.document.body.innerHTML = "", n.document.body.appendChild(a), Ge(document, n.document), n.document.title = document.title || "Blockbite Editor";
+    n.document.body.innerHTML = "", n.document.body.appendChild(a), Ae(document, n.document), n.document.title = document.title || "Blockbite Editor";
     const r = () => {
       setTimeout(t, 100);
     };
@@ -1104,81 +1250,39 @@ const vt = ({
       n.removeEventListener("beforeunload", r);
     };
   }, [e]), D(l, a);
-}, wt = ({
+}, Ct = ({
   children: e,
   status: t = "success",
   className: l
 }) => {
-  const [a, n] = p(!0);
-  return /* @__PURE__ */ React.createElement(h, { onClick: () => n(!1) }, a && /* @__PURE__ */ React.createElement(
-    re,
+  const [a, n] = g(!0);
+  return /* @__PURE__ */ React.createElement(E, { onClick: () => n(!1) }, a && /* @__PURE__ */ React.createElement(
+    ne,
     {
       status: t,
-      className: f(l),
+      className: p(l),
       onRemove: () => n(!1)
     },
     e
   ));
-};
-function K(e) {
-  var t, l, a = "";
-  if (typeof e == "string" || typeof e == "number") a += e;
-  else if (typeof e == "object") if (Array.isArray(e)) {
-    var n = e.length;
-    for (t = 0; t < n; t++) e[t] && (l = K(e[t])) && (a && (a += " "), a += l);
-  } else for (l in e) e[l] && (a && (a += " "), a += l);
-  return a;
-}
-function Ue() {
-  for (var e, t, l = 0, a = "", n = arguments.length; l < n; l++) (e = arguments[l]) && (t = K(e)) && (a && (a += " "), a += t);
-  return a;
-}
-const We = (e) => Re("path", e), q = F(
-  /**
-   * @param {SVGProps}                                    props isPressed indicates whether the SVG should appear as pressed.
-   *                                                            Other props will be passed through to svg component.
-   * @param {import('react').ForwardedRef<SVGSVGElement>} ref   The forwarded ref to the SVG element.
-   *
-   * @return {JSX.Element} Stop component
-   */
-  ({
-    className: e,
-    isPressed: t,
-    ...l
-  }, a) => {
-    const n = {
-      ...l,
-      className: Ue(e, {
-        "is-pressed": t
-      }) || void 0,
-      "aria-hidden": !0,
-      focusable: !1
-    };
-    return /* @__PURE__ */ be("svg", {
-      ...n,
-      ref: a
-    });
-  }
-);
-q.displayName = "SVG";
-const yt = ({
+}, bt = ({
   label: e,
   value: t,
   onChange: l,
   ...a
 }) => {
-  const [n, r] = p(!1);
+  const [n, r] = g(!1);
   return /* @__PURE__ */ React.createElement(
-    ce,
+    O,
     {
       label: e,
       value: t,
       type: n ? "text" : "password",
-      suffix: /* @__PURE__ */ React.createElement(se, { variant: "control" }, /* @__PURE__ */ React.createElement(
-        v,
+      suffix: /* @__PURE__ */ React.createElement(z, { variant: "control" }, /* @__PURE__ */ React.createElement(
+        C,
         {
-          icon: /* @__PURE__ */ React.createElement(q, { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React.createElement(
-            We,
+          icon: /* @__PURE__ */ React.createElement(ge, { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React.createElement(
+            Re,
             {
               d: n ? "M3.99961 13C4.67043 13.3354 4.6703 13.3357 4.67017 13.3359L4.67298 13.3305C4.67621 13.3242 4.68184 13.3135 4.68988 13.2985C4.70595 13.2686 4.7316 13.2218 4.76695 13.1608C4.8377 13.0385 4.94692 12.8592 5.09541 12.6419C5.39312 12.2062 5.84436 11.624 6.45435 11.0431C7.67308 9.88241 9.49719 8.75 11.9996 8.75C14.502 8.75 16.3261 9.88241 17.5449 11.0431C18.1549 11.624 18.6061 12.2062 18.9038 12.6419C19.0523 12.8592 19.1615 13.0385 19.2323 13.1608C19.2676 13.2218 19.2933 13.2686 19.3093 13.2985C19.3174 13.3135 19.323 13.3242 19.3262 13.3305L19.3291 13.3359C19.3289 13.3357 19.3288 13.3354 19.9996 13C20.6704 12.6646 20.6703 12.6643 20.6701 12.664L20.6697 12.6632L20.6688 12.6614L20.6662 12.6563L20.6583 12.6408C20.6517 12.6282 20.6427 12.6108 20.631 12.5892C20.6078 12.5459 20.5744 12.4852 20.5306 12.4096C20.4432 12.2584 20.3141 12.0471 20.1423 11.7956C19.7994 11.2938 19.2819 10.626 18.5794 9.9569C17.1731 8.61759 14.9972 7.25 11.9996 7.25C9.00203 7.25 6.82614 8.61759 5.41987 9.9569C4.71736 10.626 4.19984 11.2938 3.85694 11.7956C3.68511 12.0471 3.55605 12.2584 3.4686 12.4096C3.42484 12.4852 3.39142 12.5459 3.36818 12.5892C3.35656 12.6108 3.34748 12.6282 3.34092 12.6408L3.33297 12.6563L3.33041 12.6614L3.32948 12.6632L3.32911 12.664C3.32894 12.6643 3.32879 12.6646 3.99961 13ZM11.9996 16C13.9326 16 15.4996 14.433 15.4996 12.5C15.4996 10.567 13.9326 9 11.9996 9C10.0666 9 8.49961 10.567 8.49961 12.5C8.49961 14.433 10.0666 16 11.9996 16Z" : "M20.7 12.7s0-.1-.1-.2c0-.2-.2-.4-.4-.6-.3-.5-.9-1.2-1.6-1.8-.7-.6-1.5-1.3-2.6-1.8l-.6 1.4c.9.4 1.6 1 2.1 1.5.6.6 1.1 1.2 1.4 1.6.1.2.3.4.3.5v.1l.7-.3.7-.3Zm-5.2-9.3-1.8 4c-.5-.1-1.1-.2-1.7-.2-3 0-5.2 1.4-6.6 2.7-.7.7-1.2 1.3-1.6 1.8-.2.3-.3.5-.4.6 0 0 0 .1-.1.2s0 0 .7.3l.7.3V13c0-.1.2-.3.3-.5.3-.4.7-1 1.4-1.6 1.2-1.2 3-2.3 5.5-2.3H13v.3c-.4 0-.8-.1-1.1-.1-1.9 0-3.5 1.6-3.5 3.5s.6 2.3 1.6 2.9l-2 4.4.9.4 7.6-16.2-.9-.4Zm-3 12.6c1.7-.2 3-1.7 3-3.5s-.2-1.4-.6-1.9L12.4 16Z"
             }
@@ -1192,12 +1296,12 @@ const yt = ({
       ...a
     }
   );
-}, Nt = ({
+}, xt = ({
   items: e,
   activeId: t,
   onSelect: l,
   className: a
-}) => /* @__PURE__ */ React.createElement(h, { important: !0, className: a }, /* @__PURE__ */ React.createElement("div", { className: "w-[200px] overflow-y-auto border-r border-gray-200 gap-2" }, e.map((n) => /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ React.createElement(E, { important: !0, className: a }, /* @__PURE__ */ React.createElement("div", { className: "w-[200px] overflow-y-auto border-r border-border gap-2" }, e.map((n) => /* @__PURE__ */ React.createElement(
   "div",
   {
     key: n.id,
@@ -1207,11 +1311,11 @@ const yt = ({
   /* @__PURE__ */ React.createElement("span", { className: "rounded bg-slate-300 w-12 h-12 flex items-center justify-center text-2xl font-bold text-white" }, n.name.charAt(0).toUpperCase()),
   /* @__PURE__ */ React.createElement("p", { className: "text-sm text-center mt-1" }, n.name)
 ))));
-function kt(e) {
+function wt(e) {
   const { media: t, mediaClass: l } = e, { url: a, alt: n, sizes: r } = t;
   if (r === void 0)
     return /* @__PURE__ */ React.createElement("img", { src: a, alt: n, className: `media ${l}` });
-  const { thumbnail: s, medium: c, large: i } = r, o = s || a, m = c || a, u = i || a;
+  const { thumbnail: s, medium: c, large: i } = r, o = s || a, f = c || a, d = i || a;
   return /* @__PURE__ */ React.createElement("picture", { className: "responsive-media" }, o ? /* @__PURE__ */ React.createElement(
     "source",
     {
@@ -1219,23 +1323,23 @@ function kt(e) {
       srcSet: o,
       className: `media ${l}`
     }
-  ) : null, m ? /* @__PURE__ */ React.createElement(
+  ) : null, f ? /* @__PURE__ */ React.createElement(
     "source",
     {
       media: "(min-width: 1024px)",
-      srcSet: m,
+      srcSet: f,
       className: `media ${l}`
     }
-  ) : null, u ? /* @__PURE__ */ React.createElement(
+  ) : null, d ? /* @__PURE__ */ React.createElement(
     "source",
     {
       media: "(min-width: 1536px)",
-      srcSet: u,
+      srcSet: d,
       className: `media ${l}`
     }
-  ) : null, m ? /* @__PURE__ */ React.createElement("img", { src: m, alt: n, className: `media ${l}` }) : null);
+  ) : null, f ? /* @__PURE__ */ React.createElement("img", { src: f, alt: n, className: `media ${l}` }) : null);
 }
-function _t(e) {
+function vt(e) {
   const { media: t, mediaClass: l } = e, { url: a } = t, n = a;
   return /* @__PURE__ */ React.createElement(
     "video",
@@ -1251,68 +1355,64 @@ function _t(e) {
     /* @__PURE__ */ React.createElement("source", { src: n, type: "video/mp4" })
   );
 }
-const Lt = ({
+const Nt = ({
   children: e,
   className: t = "",
   height: l = "large"
 }) => /* @__PURE__ */ React.createElement(
-  h,
+  E,
   {
-    className: f("scrollbar relative overflow-y-scroll", t, {
+    className: p("scrollbar relative overflow-y-scroll", t, {
       "h-[400px]": l === "large",
       "h-[300px]": l === "medium",
       "h-[200px]": l === "small"
     })
   },
   e
-), Mt = ({
+), yt = ({
   onChange: e,
   className: t,
-  defaultValue: l,
+  value: l,
   options: a,
   label: n = "",
   emptyLabel: r = "No options available"
 }) => {
-  const [s, c] = p("");
-  g(() => {
-    c(l);
-  }, []);
-  const i = (o) => {
-    c(o), e && e(o);
+  const s = (c) => {
+    e && e(c);
   };
   return /* @__PURE__ */ React.createElement("div", { className: t }, a && a.length > 0 && /* @__PURE__ */ React.createElement(
-    oe,
+    re,
     {
       __next40pxDefaultSize: !0,
       __nextHasNoMarginBottom: !0,
       label: n || "",
-      value: s || "",
-      onChange: i,
+      value: l || "",
+      onChange: s,
       options: [{ value: "", label: "Select an option" }, ...a]
     }
   ), (!a || (a == null ? void 0 : a.length) === 0) && /* @__PURE__ */ React.createElement("p", { className: "mb-2" }, r));
-}, { select: Ke, dispatch: qe } = wp.data, St = ({
+}, { select: Fe, dispatch: Ue } = wp.data, kt = ({
   buttonText: e = "Add block"
 }) => {
   const t = () => {
-    const l = Ke("core/block-editor").getSelectedBlock(), { clientId: a, innerBlocks: n } = l, r = n[n.length - 1], s = he(
+    const l = Fe("core/block-editor").getSelectedBlock(), { clientId: a, innerBlocks: n } = l, r = n[n.length - 1], s = Ee(
       r.name,
       r.attributes,
       r.innerBlocks
     );
-    qe("core/block-editor").insertBlocks(s, 0, a);
+    Ue("core/block-editor").insertBlocks(s, 0, a);
   };
-  return /* @__PURE__ */ React.createElement(v, { variant: "primary", onClick: () => t() }, e);
-}, Tt = ({ children: e, watch: t, className: l }) => {
-  const [a, n] = p(0);
-  return g(() => {
+  return /* @__PURE__ */ React.createElement(C, { variant: "primary", onClick: () => t() }, e);
+}, _t = ({ children: e, watch: t, className: l }) => {
+  const [a, n] = g(0);
+  return R(() => {
     setTimeout(() => {
       n(1);
     }, 250);
   }, [t]), /* @__PURE__ */ React.createElement(
-    h,
+    E,
     {
-      className: f(
+      className: p(
         l,
         "duration-50 transform transition-all ease-in-out",
         {
@@ -1323,38 +1423,38 @@ const Lt = ({
     },
     e
   );
-}, Ht = ({ className: e, defaultValue: t }) => {
-  const [l, a] = p(!1);
-  return g(() => {
+}, Lt = ({ className: e, defaultValue: t }) => {
+  const [l, a] = g(!1);
+  return R(() => {
     setTimeout(() => {
       a(!1);
     }, 500), t && a(!0);
-  }, [l, t]), l && /* @__PURE__ */ React.createElement(ie, { className: f(e) });
-}, Z = G(null), Xe = ({
+  }, [l, t]), l && /* @__PURE__ */ React.createElement(ce, { className: p(e) });
+}, Z = A(null), Ge = ({
   children: e,
   defaultValue: t,
   value: l,
   onValueChange: a,
   ...n
 }) => {
-  const r = l !== void 0, [s, c] = p(t || ""), m = {
+  const r = l !== void 0, [s, c] = g(t || ""), f = {
     activeTab: r ? l : s,
-    setActiveTab: (u) => {
-      r || c(u), a && a(u);
+    setActiveTab: (d) => {
+      r || c(d), a && a(d);
     }
   };
-  return /* @__PURE__ */ React.createElement(Z.Provider, { value: m }, /* @__PURE__ */ React.createElement(h, { important: !0, className: n.className }, e));
-}, Ye = ({
+  return /* @__PURE__ */ React.createElement(Z.Provider, { value: f }, /* @__PURE__ */ React.createElement(E, { important: !0, className: n.className }, e));
+}, We = ({
   options: e,
   children: t,
   className: l,
   onValueChange: a
 }) => {
-  const n = V(Z), r = a || (n == null ? void 0 : n.setActiveTab);
+  const n = P(Z), r = a || (n == null ? void 0 : n.setActiveTab);
   return /* @__PURE__ */ React.createElement(
-    me,
+    se,
     {
-      className: f("tabs-list", l),
+      className: p("tabs-list", l),
       tabs: e,
       onSelect: (s) => {
         r(s);
@@ -1362,28 +1462,28 @@ const Lt = ({
     },
     () => t
   );
-}, Je = ({
+}, Ke = ({
   value: e,
   children: t,
   className: l
 }) => {
-  const a = V(Z);
-  return (a == null ? void 0 : a.activeTab) === e ? /* @__PURE__ */ React.createElement(h, { className: l }, t) : null;
-}, Bt = {
-  Wrapper: Xe,
-  List: Ye,
-  Content: Je
-}, Pt = ({
+  const a = P(Z);
+  return (a == null ? void 0 : a.activeTab) === e ? /* @__PURE__ */ React.createElement(E, { className: l }, t) : null;
+}, Mt = {
+  Wrapper: Ge,
+  List: We,
+  Content: Ke
+}, St = ({
   children: e,
   onClick: t,
   color: l = "blue",
   className: a
-}) => /* @__PURE__ */ React.createElement("button", { onClick: t }, /* @__PURE__ */ React.createElement("div", { color: l, className: f(a) }, e)), Ot = ({
+}) => /* @__PURE__ */ React.createElement("button", { onClick: t }, /* @__PURE__ */ React.createElement("div", { color: l, className: p(a) }, e)), Tt = ({
   onChange: e,
   defaultValue: t,
   children: l
-}) => /* @__PURE__ */ React.createElement(h, { className: "blockbite-ui__text-control-label flex items-center" }, /* @__PURE__ */ React.createElement("span", { className: "outline-b-2 relative block -outline-offset-2 outline-black" }, /* @__PURE__ */ React.createElement(
-  O,
+}) => /* @__PURE__ */ React.createElement(E, { className: "blockbite-ui__text-control-label flex items-center" }, /* @__PURE__ */ React.createElement("span", { className: "outline-b-2 relative block -outline-offset-2 outline-black" }, /* @__PURE__ */ React.createElement(
+  B,
   {
     __next40pxDefaultSize: !0,
     __nextHasNoMarginBottom: !0,
@@ -1391,63 +1491,61 @@ const Lt = ({
     value: t,
     onChange: e
   }
-), /* @__PURE__ */ React.createElement(Te, { className: "absolute right-1 top-2" })), " ", l), jt = j(
+), /* @__PURE__ */ React.createElement(Me, { className: "absolute right-1 top-2" })), " ", l), Ht = V(
   ({
     className: e,
     options: t,
-    defaultPressed: l,
+    value: l,
     display: a = "label",
     label: n = !1,
     onPressedChange: r
   }) => {
-    const [s, c] = p(""), i = (o) => {
-      r(o);
+    const s = (c) => {
+      r(c);
     };
-    return g(() => {
-      c(l);
-    }, [l]), /* @__PURE__ */ React.createElement(h, { className: f(e) }, /* @__PURE__ */ React.createElement(
-      ue,
+    return /* @__PURE__ */ React.createElement(E, { className: p(e) }, /* @__PURE__ */ React.createElement(
+      oe,
       {
         __next40pxDefaultSize: !0,
         __nextHasNoMarginBottom: !0,
         isBlock: !0,
-        value: s,
-        label: typeof n == "string" ? n : ""
+        value: l,
+        ...n ? { label: n } : {}
       },
       t.map(
-        (o) => a === "icon" ? /* @__PURE__ */ React.createElement(
-          de,
+        (c) => a === "icon" ? /* @__PURE__ */ React.createElement(
+          ie,
           {
-            icon: o.icon,
-            label: o.label,
-            key: `ToggleGroupControlIcon-${o.value}`,
-            value: o.value,
-            onClick: () => i(o.value)
+            icon: c.icon,
+            label: c.label,
+            key: `ToggleGroupControlIcon-${c.value}`,
+            value: c.value,
+            onClick: () => s(c.value)
           }
         ) : /* @__PURE__ */ React.createElement(
-          pe,
+          me,
           {
-            key: `ToggleGroupControlOption-${o.value}`,
-            value: o.value,
-            label: o.label,
-            onClick: () => i(o.value)
+            key: `ToggleGroupControlOption-${c.value}`,
+            value: c.value,
+            label: c.label,
+            onClick: () => s(c.value)
           }
         )
       )
     ));
   }
-), Vt = ({
+), Bt = ({
   label: e,
   className: t,
   onChange: l,
   checked: a = !1
   // Default to false if undefined, so it's always controlled
 }) => {
-  const [n, r] = p(a);
-  return g(() => {
+  const [n, r] = g(a);
+  return R(() => {
     r(a);
-  }, [a]), /* @__PURE__ */ React.createElement(h, { className: f(t, "flex items-center gap-2") }, /* @__PURE__ */ React.createElement(
-    fe,
+  }, [a]), /* @__PURE__ */ React.createElement(E, { className: p(t, "flex items-center gap-2") }, /* @__PURE__ */ React.createElement(
+    ue,
     {
       checked: n,
       label: e,
@@ -1458,54 +1556,54 @@ const Lt = ({
   ));
 };
 export {
-  ct as AutocompleteDropdown,
-  Ne as Badge,
-  st as BitePreview,
-  ot as Button,
-  we as ButtonToggle,
-  ye as ButtonToggleGroup,
-  it as Chapter,
-  mt as ChapterDivider,
-  ut as Checkbox,
-  dt as DataItemList,
-  pt as DisappearingMessage,
-  Ve as DropdownPicker,
-  ft as EmptyState,
-  gt as FloatingPanel,
-  Rt as FocalPointControl,
-  N as Icon,
-  Et as LinkPicker,
-  bt as MediaPicker,
-  ht as MetricsControl,
-  Ct as Modal,
-  xt as ModalClose,
-  De as ModalContent,
-  Ae as ModalFooter,
-  ze as ModalHeader,
-  Fe as ModalTrigger,
-  vt as NewWindowPortal,
-  wt as Notice,
-  yt as PasswordInput,
-  Ze as Popover,
-  Nt as ProjectsNavigation,
-  $e as RangeSlider,
-  kt as ResponsiveImage,
-  _t as ResponsiveVideo,
-  Lt as ScrollList,
-  Mt as SelectControlWrapper,
-  St as SingleBlockTypeAppender,
-  Tt as SlideIn,
-  Ht as Spinner,
-  Bt as Tabs,
-  Je as TabsContent,
-  Ye as TabsList,
-  Xe as TabsWrapper,
-  Pt as Tag,
-  I as TextControl,
-  Ot as TextControlLabel,
-  jt as ToggleGroup,
-  Vt as ToggleSwitch,
-  h as Wrap,
-  W as useModalContext
+  at as AutocompleteDropdown,
+  ve as Badge,
+  lt as BitePreview,
+  nt as Button,
+  xe as ButtonToggle,
+  we as ButtonToggleGroup,
+  rt as Chapter,
+  ct as ChapterDivider,
+  st as Checkbox,
+  ot as DataItemList,
+  it as DisappearingMessage,
+  Pe as DropdownPicker,
+  mt as EmptyState,
+  ut as FloatingPanel,
+  dt as FocalPointControl,
+  v as Icon,
+  ft as LinkPicker,
+  pt as MediaPicker,
+  gt as MetricsControl,
+  Rt as Modal,
+  Et as ModalClose,
+  je as ModalContent,
+  ze as ModalFooter,
+  Oe as ModalHeader,
+  De as ModalTrigger,
+  ht as NewWindowPortal,
+  Ct as Notice,
+  bt as PasswordInput,
+  $e as Popover,
+  xt as ProjectsNavigation,
+  Ie as RangeSlider,
+  wt as ResponsiveImage,
+  vt as ResponsiveVideo,
+  Nt as ScrollList,
+  yt as SelectControlWrapper,
+  kt as SingleBlockTypeAppender,
+  _t as SlideIn,
+  Lt as Spinner,
+  Mt as Tabs,
+  Ke as TabsContent,
+  We as TabsList,
+  Ge as TabsWrapper,
+  St as Tag,
+  F as TextControl,
+  Tt as TextControlLabel,
+  Ht as ToggleGroup,
+  Bt as ToggleSwitch,
+  E as Wrap,
+  G as useModalContext
 };
 //# sourceMappingURL=index.js.map