@lostgradient/cinder 0.5.0 → 0.7.0

package/dist/components/markdown-editor/index.js

@@ -2114,20 +2114,21 @@ function createFocusTrap(options = {}) {
 }
 
 // src/components/focus-trap/focus-trap.svelte
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "active",
+  "restoreFocus",
+  "initialFocus",
+  "fallbackFocus",
+  "class",
+  "children"
+]);
 var root = $2.from_html(`<div><!></div>`);
 function Focus_trap($$anchor, $$props) {
   $2.push($$props, true);
-  let active = $2.prop($$props, "active", 3, true), restoreFocus = $2.prop($$props, "restoreFocus", 3, true), initialFocus = $2.prop($$props, "initialFocus", 3, null), fallbackFocus = $2.prop($$props, "fallbackFocus", 3, null), rest = $2.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "active",
-    "restoreFocus",
-    "initialFocus",
-    "fallbackFocus",
-    "class",
-    "children"
-  ]);
+  let active = $2.prop($$props, "active", 3, true), restoreFocus = $2.prop($$props, "restoreFocus", 3, true), initialFocus = $2.prop($$props, "initialFocus", 3, null), fallbackFocus = $2.prop($$props, "fallbackFocus", 3, null), rest = $2.rest_props($$props, rest_excludes);
   var div = root();
   $2.attribute_effect(div, ($0) => ({ class: $0, ...rest }), [() => classNames($$props.class)]);
   var node = $2.child(div);
@@ -2180,9 +2181,10 @@ function resolvePortalTarget(target) {
 }
 function copyInheritedPortalAttributes(element, source, inheritAttributes, fallbackAttributes = {
   dir: element.getAttribute("dir"),
+  dataTheme: element.getAttribute("data-theme"),
   theme: element.getAttribute("data-cinder-theme")
 }) {
-  const preservesExplicitDirection = element.dataset["cinderExplicitDirection"] === "true";
+  const preservesExplicitDirection = fallbackAttributes.preserveDirection || element.dataset["cinderExplicitDirection"] === "true";
   const inheritedDir = inheritAttributes && source && !preservesExplicitDirection ? source.closest("[dir]")?.getAttribute("dir") : null;
   const nextDir = inheritedDir ?? fallbackAttributes.dir;
   if (nextDir) {
@@ -2190,13 +2192,51 @@ function copyInheritedPortalAttributes(element, source, inheritAttributes, fallb
   } else {
     element.removeAttribute("dir");
   }
-  const inheritedTheme = inheritAttributes && source ? source.closest("[data-cinder-theme]")?.getAttribute("data-cinder-theme") : null;
+  const preservesExplicitDataTheme = fallbackAttributes.preserveDataTheme === true;
+  const inheritedDataTheme = inheritAttributes && source && !preservesExplicitDataTheme && fallbackAttributes.dataTheme === null ? source.closest("[data-theme]")?.getAttribute("data-theme") : null;
+  const nextDataTheme = inheritedDataTheme ?? fallbackAttributes.dataTheme;
+  if (nextDataTheme) {
+    element.setAttribute("data-theme", nextDataTheme);
+  } else {
+    element.removeAttribute("data-theme");
+  }
+  const preservesExplicitTheme = fallbackAttributes.preserveTheme === true;
+  const inheritedTheme = inheritAttributes && source && !preservesExplicitTheme && fallbackAttributes.theme === null ? source.closest("[data-cinder-theme]")?.getAttribute("data-cinder-theme") : null;
   const nextTheme = inheritedTheme ?? fallbackAttributes.theme;
   if (nextTheme) {
     element.setAttribute("data-cinder-theme", nextTheme);
   } else {
     element.removeAttribute("data-cinder-theme");
   }
+  return {
+    dir: inheritedDir ?? null,
+    dataTheme: inheritedDataTheme ?? null,
+    theme: inheritedTheme ?? null
+  };
+}
+function observeInheritedPortalAttributes(source, inheritAttributes, syncAttributes) {
+  if (!inheritAttributes || !source || typeof MutationObserver === "undefined")
+    return null;
+  const observer = new MutationObserver(() => {
+    syncAttributes();
+  });
+  function observe(elementToObserve) {
+    if (!elementToObserve || observedElements.includes(elementToObserve))
+      return;
+    observedElements.push(elementToObserve);
+    observer.observe(elementToObserve, {
+      attributes: true,
+      attributeFilter: ["dir", "data-theme", "data-cinder-theme"]
+    });
+  }
+  const observedElements = [];
+  let ancestor = source;
+  while (ancestor) {
+    observe(ancestor);
+    ancestor = ancestor.parentElement;
+  }
+  observe(document.documentElement);
+  return () => observer.disconnect();
 }
 function createPortalAttachment(options = {}) {
   let lastWarnedUnresolvedKey = null;
@@ -2204,8 +2244,33 @@ function createPortalAttachment(options = {}) {
     const initialParent = element.parentElement;
     const initialAttributes = {
       dir: element.getAttribute("dir"),
+      dataTheme: element.getAttribute("data-theme"),
       theme: element.getAttribute("data-cinder-theme")
     };
+    const managedAttributes = { dir: null, dataTheme: null, theme: null };
+    function currentFallbackAttributes() {
+      const explicitAttributes = readOption(options.explicitAttributes ?? {});
+      const explicitDirection = explicitAttributes.dir;
+      const explicitDataTheme = explicitAttributes.dataTheme;
+      const explicitTheme = explicitAttributes.theme;
+      const direction = element.getAttribute("dir");
+      const dataTheme = element.getAttribute("data-theme");
+      const theme = element.getAttribute("data-cinder-theme");
+      return {
+        dir: explicitDirection !== undefined ? explicitDirection : direction !== managedAttributes.dir ? direction : initialAttributes.dir,
+        preserveDirection: explicitDirection !== undefined,
+        dataTheme: explicitDataTheme !== undefined ? explicitDataTheme : dataTheme !== managedAttributes.dataTheme ? dataTheme : null,
+        preserveDataTheme: explicitDataTheme !== undefined,
+        theme: explicitTheme !== undefined ? explicitTheme : theme !== managedAttributes.theme ? theme : null,
+        preserveTheme: explicitTheme !== undefined
+      };
+    }
+    function syncInheritedAttributes(source, inheritAttributes) {
+      const nextManagedAttributes = copyInheritedPortalAttributes(element, source, inheritAttributes, currentFallbackAttributes());
+      managedAttributes.dir = nextManagedAttributes.dir;
+      managedAttributes.dataTheme = nextManagedAttributes.dataTheme;
+      managedAttributes.theme = nextManagedAttributes.theme;
+    }
     const anchor = typeof document !== "undefined" ? document.createComment("@lostgradient/cinder/portal") : null;
     if (anchor && initialParent && element.parentNode === initialParent) {
       initialParent.insertBefore(anchor, element);
@@ -2218,26 +2283,31 @@ function createPortalAttachment(options = {}) {
       anchor.parentNode.insertBefore(element, anchor.nextSibling);
     }
     $3.user_effect(() => {
+      let stopObservingInheritedAttributes = null;
       const disabled = readOption(options.disabled ?? false);
       const inheritAttributes = readOption(options.inheritAttributes ?? true);
       const targetValue = readOption(options.target ?? null);
       const attributeSource = readOption(options.source ?? initialParent) ?? initialParent;
       const resolved = disabled ? null : resolvePortalTarget(targetValue);
       if (!disabled && resolved?.kind === "resolved") {
-        copyInheritedPortalAttributes(element, attributeSource, inheritAttributes, initialAttributes);
+        syncInheritedAttributes(attributeSource, inheritAttributes);
+        stopObservingInheritedAttributes = observeInheritedPortalAttributes(attributeSource, inheritAttributes, () => syncInheritedAttributes(attributeSource, inheritAttributes));
         resolved.target.appendChild(element);
         lastWarnedUnresolvedKey = null;
       } else if (!disabled && resolved?.kind === "unresolved") {
         restoreInline();
+        syncInheritedAttributes(null, false);
         if (lastWarnedUnresolvedKey !== resolved.key) {
           devWarn(`[cinder/portal] could not resolve portal target ${JSON.stringify(resolved.key)}.`);
           lastWarnedUnresolvedKey = resolved.key;
         }
       } else if (disabled) {
         restoreInline();
+        syncInheritedAttributes(null, false);
         lastWarnedUnresolvedKey = null;
       }
       return () => {
+        stopObservingInheritedAttributes?.();
         if (element.isConnected) {
           element.remove();
         }
@@ -2252,19 +2322,20 @@ function createPortalAttachment(options = {}) {
 }
 
 // src/components/portal/portal.svelte
+var rest_excludes2 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "target",
+  "disabled",
+  "class",
+  "inheritAttributes",
+  "children"
+]);
 var root2 = $4.from_html(`<div><!></div>`);
 function Portal($$anchor, $$props) {
   $4.push($$props, true);
-  let target = $4.prop($$props, "target", 3, null), disabled = $4.prop($$props, "disabled", 3, false), inheritAttributes = $4.prop($$props, "inheritAttributes", 3, true), rest = $4.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "target",
-    "disabled",
-    "class",
-    "inheritAttributes",
-    "children"
-  ]);
+  let target = $4.prop($$props, "target", 3, null), disabled = $4.prop($$props, "disabled", 3, false), inheritAttributes = $4.prop($$props, "inheritAttributes", 3, true), rest = $4.rest_props($$props, rest_excludes2);
   let hasHydrated = $4.state(false);
   $4.user_effect(() => {
     $4.set(hasHydrated, true);
@@ -2290,7 +2361,12 @@ function Portal($$anchor, $$props) {
   $4.attach(div, () => createPortalAttachment({
     target: () => target(),
     disabled: () => disabled(),
-    inheritAttributes: () => inheritAttributes()
+    inheritAttributes: () => inheritAttributes(),
+    explicitAttributes: () => ({
+      dir: $$props.dir,
+      dataTheme: rest["data-theme"],
+      theme: rest["data-cinder-theme"]
+    })
   }));
   $4.append($$anchor, div);
   $4.pop();
@@ -2327,7 +2403,22 @@ import { untrack } from "svelte";
 
 // src/components/segmented-control/segmented-control-state.svelte.ts
 import * as $5 from "svelte/internal/client";
-import { createContext } from "svelte";
+
+// src/_internal/strict-stable-context.ts
+import { getContext, setContext } from "svelte";
+function strictStableContext(key, missingMessage) {
+  const contextKey = Symbol.for(key);
+  return [
+    () => {
+      const context = getContext(contextKey);
+      if (context === undefined) {
+        throw new Error(`missing_context: ${missingMessage}`);
+      }
+      return context;
+    },
+    (context) => setContext(contextKey, context)
+  ];
+}
 
 // src/utilities/document-order.ts
 var DOCUMENT_POSITION_PRECEDING = 2;
@@ -2418,8 +2509,7 @@ function getFocusableIndex(selectedIndex, length, isDisabled) {
 }
 
 // src/components/segmented-control/segmented-control-state.svelte.ts
-var [getSegmentedControlContext, setSegmentedControlContext] = createContext();
-
+var [getSegmentedControlContext, setSegmentedControlContext] = strictStableContext("@lostgradient/cinder/segmented-control/context", "Segment must be rendered inside a SegmentedControl");
 class SegmentedControlController {
   #registrations = [];
   #version = $5.state(0);
@@ -2547,23 +2637,24 @@ class SegmentedControlController {
 }
 
 // src/components/segment/segment.svelte
-var root_1 = $6.from_html(`<span class="cinder-segmented-control-option-icon" aria-hidden="true"><!></span>`);
-var root_2 = $6.from_html(`<span class="cinder-segmented-control-option-trailing" aria-hidden="true"><!></span>`);
-var root3 = $6.from_html(`<button><!> <!> <!></button>`);
+var rest_excludes3 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "value",
+  "disabled",
+  "controls",
+  "leading",
+  "trailing",
+  "children",
+  "class"
+]);
+var root3 = $6.from_html(`<span class="cinder-segmented-control-option-icon" aria-hidden="true"><!></span>`);
+var root_1 = $6.from_html(`<span class="cinder-segmented-control-option-trailing" aria-hidden="true"><!></span>`);
+var root_2 = $6.from_html(`<button><!> <!> <!></button>`);
 function Segment($$anchor, $$props) {
   $6.push($$props, true);
-  let disabled = $6.prop($$props, "disabled", 3, false), rest = $6.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "value",
-    "disabled",
-    "controls",
-    "leading",
-    "trailing",
-    "children",
-    "class"
-  ]);
+  let disabled = $6.prop($$props, "disabled", 3, false), rest = $6.rest_props($$props, rest_excludes3);
   const context = getSegmentedControlContext();
   const registerSegment = (node) => {
     return untrack(() => context.register({
@@ -2583,7 +2674,7 @@ function Segment($$anchor, $$props) {
   const isFocusable = $6.derived(() => context.isFocusable($$props.value));
   const effectiveDisabled = $6.derived(() => disabled() || context.controlDisabled);
   const role = $6.derived(() => context.selectionMode === "multiple" ? undefined : context.variant === "tablist" ? "tab" : "radio");
-  var button = root3();
+  var button = root_2();
   var event_handler = () => context.toggle($$props.value);
   $6.attribute_effect(button, ($0) => ({
     ...rest,
@@ -2607,7 +2698,7 @@ function Segment($$anchor, $$props) {
   var node_1 = $6.child(button);
   {
     var consequent = ($$anchor2) => {
-      var span = root_1();
+      var span = root3();
       var node_2 = $6.child(span);
       $6.snippet(node_2, () => $$props.leading);
       $6.reset(span);
@@ -2623,7 +2714,7 @@ function Segment($$anchor, $$props) {
   var node_4 = $6.sibling(node_3, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var span_1 = root_2();
+      var span_1 = root_1();
       var node_5 = $6.child(span_1);
       $6.snippet(node_5, () => $$props.trailing);
       $6.reset(span_1);
@@ -2645,33 +2736,34 @@ import"svelte/internal/disclose-version";
 import * as $7 from "svelte/internal/client";
 import { untrack as untrack2 } from "svelte";
 import { SvelteSet } from "svelte/reactivity";
-var root_22 = $7.from_html(`<input type="hidden"/>`);
+var rest_excludes4 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "value",
+  "label",
+  "name",
+  "hideLabel",
+  "disabled",
+  "size",
+  "density",
+  "orientation",
+  "detached",
+  "fullWidth",
+  "variant",
+  "selectionMode",
+  "disallowEmptySelection",
+  "class",
+  "onchange",
+  "children"
+]);
+var root4 = $7.from_html(`<input type="hidden"/>`);
 var root_12 = $7.from_html(`<input type="hidden" disabled=""/> <!>`, 1);
-var root4 = $7.from_html(`<div class="cinder-segmented-control-container"><span> </span> <div><!></div> <!></div>`);
+var root_22 = $7.from_html(`<div class="cinder-segmented-control-container"><span> </span> <div><!></div> <!></div>`);
 function Segmented_control($$anchor, $$props) {
   $7.push($$props, true);
-  let value = $7.prop($$props, "value", 15), hideLabel = $7.prop($$props, "hideLabel", 3, false), disabled = $7.prop($$props, "disabled", 3, false), size = $7.prop($$props, "size", 3, "md"), orientation = $7.prop($$props, "orientation", 3, "horizontal"), detached = $7.prop($$props, "detached", 3, false), fullWidth = $7.prop($$props, "fullWidth", 3, false), variant = $7.prop($$props, "variant", 3, "radiogroup"), selectionMode = $7.prop($$props, "selectionMode", 3, "single"), disallowEmptySelection = $7.prop($$props, "disallowEmptySelection", 3, true), rest = $7.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "value",
-    "label",
-    "name",
-    "hideLabel",
-    "disabled",
-    "size",
-    "density",
-    "orientation",
-    "detached",
-    "fullWidth",
-    "variant",
-    "selectionMode",
-    "disallowEmptySelection",
-    "class",
-    "onchange",
-    "children"
-  ]);
+  let value = $7.prop($$props, "value", 15), hideLabel = $7.prop($$props, "hideLabel", 3, false), disabled = $7.prop($$props, "disabled", 3, false), size = $7.prop($$props, "size", 3, "md"), orientation = $7.prop($$props, "orientation", 3, "horizontal"), detached = $7.prop($$props, "detached", 3, false), fullWidth = $7.prop($$props, "fullWidth", 3, false), variant = $7.prop($$props, "variant", 3, "radiogroup"), selectionMode = $7.prop($$props, "selectionMode", 3, "single"), disallowEmptySelection = $7.prop($$props, "disallowEmptySelection", 3, true), rest = $7.rest_props($$props, rest_excludes4);
   let resetInputElement = $7.state(null);
   let resetSyncTimeout;
   const initialSingleValue = untrack2(() => typeof value() === "string" ? value() : undefined);
@@ -2735,7 +2827,7 @@ function Segmented_control($$anchor, $$props) {
       }
     };
   });
-  var div = root4();
+  var div = root_22();
   var span = $7.child(div);
   var text = $7.child(span, true);
   $7.reset(span);
@@ -2769,7 +2861,7 @@ function Segmented_control($$anchor, $$props) {
       $7.bind_this(input_1, ($$value) => $7.set(resetInputElement, $$value), () => $7.get(resetInputElement));
       var node_2 = $7.sibling(input_1, 2);
       $7.each(node_2, 16, () => $7.get(selectedValues), (selectedValue) => selectedValue, ($$anchor3, selectedValue) => {
-        var input_2 = root_22();
+        var input_2 = root4();
         $7.remove_input_defaults(input_2);
         $7.template_effect(() => {
           $7.set_attribute(input_2, "name", $$props.name);
@@ -2800,11 +2892,12 @@ function Segmented_control($$anchor, $$props) {
 // src/components/markdown-editor/editor-skeleton.svelte
 import"svelte/internal/disclose-version";
 import * as $8 from "svelte/internal/client";
-var root_13 = $8.from_html(`<div class="skeleton-line svelte-1h3fabh"></div>`);
-var root5 = $8.from_html(`<div><span class="sr-only svelte-1h3fabh">Loading editor...</span> <div class="skeleton-content svelte-1h3fabh"></div></div>`);
+var rest_excludes5 = new Set(["$$slots", "$$events", "$$legacy", "lines", "class"]);
+var root5 = $8.from_html(`<div class="skeleton-line svelte-1h3fabh"></div>`);
+var root_13 = $8.from_html(`<div><span class="sr-only svelte-1h3fabh">Loading editor...</span> <div class="skeleton-content svelte-1h3fabh"></div></div>`);
 function Editor_skeleton($$anchor, $$props) {
   $8.push($$props, true);
-  let lines = $8.prop($$props, "lines", 3, 8), rest = $8.rest_props($$props, ["$$slots", "$$events", "$$legacy", "lines", "class"]);
+  let lines = $8.prop($$props, "lines", 3, 8), rest = $8.rest_props($$props, rest_excludes5);
   const SHIMMER_WIDTHS = [68, 84, 56, 92, 72, 80, 60, 88];
   const lineWidths = $8.derived(() => Array.from({ length: lines() }, (_, i) => {
     if (i === 0)
@@ -2813,7 +2906,7 @@ function Editor_skeleton($$anchor, $$props) {
       return 30;
     return SHIMMER_WIDTHS[i % SHIMMER_WIDTHS.length] ?? 68;
   }));
-  var div = root5();
+  var div = root_13();
   $8.attribute_effect(div, ($0) => ({
     class: $0,
     role: "status",
@@ -2824,7 +2917,7 @@ function Editor_skeleton($$anchor, $$props) {
   ], undefined, undefined, "svelte-1h3fabh");
   var div_1 = $8.sibling($8.child(div), 2);
   $8.each(div_1, 21, () => $8.get(lineWidths), $8.index, ($$anchor2, width) => {
-    var div_2 = root_13();
+    var div_2 = root5();
     let styles;
     $8.template_effect(() => styles = $8.set_style(div_2, "", styles, { "--skeleton-line-width": `${$8.get(width) ?? ""}%` }));
     $8.append($$anchor2, div_2);
@@ -3375,6 +3468,20 @@ function useMutationObserver(onMutate, options = {}) {
 }
 
 // src/components/toolbar/toolbar.svelte
+var rest_excludes6 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "class",
+  "orientation",
+  "children",
+  "onkeydown",
+  "onfocusin",
+  "role",
+  "aria-orientation",
+  "aria-label",
+  "aria-labelledby"
+]);
 var root7 = $25.from_html(`<div><!></div>`);
 function Toolbar($$anchor, $$props) {
   $25.push($$props, true);
@@ -3387,20 +3494,7 @@ function Toolbar($$anchor, $$props) {
     "[tabindex]",
     "[data-cinder-toolbar-item]"
   ].join(",");
-  let orientation = $25.prop($$props, "orientation", 3, "horizontal"), rest = $25.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "class",
-    "orientation",
-    "children",
-    "onkeydown",
-    "onfocusin",
-    "role",
-    "aria-orientation",
-    "aria-label",
-    "aria-labelledby"
-  ]);
+  let orientation = $25.prop($$props, "orientation", 3, "horizontal"), rest = $25.rest_props($$props, rest_excludes6);
   let rootElement = null;
   let toolbarItems = $25.state($25.proxy([]));
   let activeItem = $25.state(null);
@@ -4135,22 +4229,23 @@ function Tooltip($$anchor, $$props) {
 $27.delegate(["focusin", "focusout"]);
 
 // src/components/markdown-editor/editor-toolbar/toolbar-button.svelte
-var root_14 = $28.from_html(`<button><!></button>`);
+var rest_excludes7 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "icon",
+  "label",
+  "toggle",
+  "pressed",
+  "shortcut",
+  "disabled",
+  "class",
+  "onclick"
+]);
+var root9 = $28.from_html(`<button><!></button>`);
 function Toolbar_button($$anchor, $$props) {
   $28.push($$props, true);
-  let toggle = $28.prop($$props, "toggle", 3, false), pressed = $28.prop($$props, "pressed", 3, false), disabled = $28.prop($$props, "disabled", 3, false), rest = $28.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "icon",
-    "label",
-    "toggle",
-    "pressed",
-    "shortcut",
-    "disabled",
-    "class",
-    "onclick"
-  ]);
+  let toggle = $28.prop($$props, "toggle", 3, false), pressed = $28.prop($$props, "pressed", 3, false), disabled = $28.prop($$props, "disabled", 3, false), rest = $28.rest_props($$props, rest_excludes7);
   const tooltipLabel = $28.derived(() => $$props.shortcut ? `${$$props.label} (${$$props.shortcut})` : $$props.label);
   Tooltip($$anchor, {
     get text() {
@@ -4158,7 +4253,7 @@ function Toolbar_button($$anchor, $$props) {
     },
     placement: "bottom",
     children: ($$anchor2, $$slotProps) => {
-      var button = root_14();
+      var button = root9();
       $28.attribute_effect(button, ($0) => ({
         type: "button",
         class: $0,
@@ -4171,7 +4266,7 @@ function Toolbar_button($$anchor, $$props) {
       }), [() => classNames("toolbar-button", $$props.class)], undefined, undefined, "svelte-143lto0");
       var node = $28.child(button);
       $28.component(node, () => $$props.icon, ($$anchor3, Icon_1) => {
-        Icon_1($$anchor3, { class: "icon-sm" });
+        Icon_1($$anchor3, { class: "cinder-icon-sm" });
       });
       $28.reset(button);
       $28.append($$anchor2, button);
@@ -4184,11 +4279,12 @@ function Toolbar_button($$anchor, $$props) {
 // src/components/markdown-editor/editor-toolbar/toolbar-separator.svelte
 import"svelte/internal/disclose-version";
 import * as $29 from "svelte/internal/client";
-var root9 = $29.from_html(`<div></div>`);
+var rest_excludes8 = new Set(["$$slots", "$$events", "$$legacy", "class"]);
+var root10 = $29.from_html(`<div></div>`);
 function Toolbar_separator($$anchor, $$props) {
   $29.push($$props, true);
-  let rest = $29.rest_props($$props, ["$$slots", "$$events", "$$legacy", "class"]);
-  var div = root9();
+  let rest = $29.rest_props($$props, rest_excludes8);
+  var div = root10();
   $29.attribute_effect(div, ($0) => ({
     class: $0,
     role: "separator",
@@ -4338,35 +4434,36 @@ function overflowFade() {
 }
 
 // src/components/dropdown/dropdown.context.ts
-import { createContext as createContext2 } from "svelte";
-var [getDropdownContextStrict, setDropdownContext] = createContext2();
+import { createContext } from "svelte";
+var [getDropdownContextStrict, setDropdownContext] = createContext();
 var getDropdownContext = getDropdownContextStrict;
-var [getDropdownRegisterStrict, setDropdownRegister] = createContext2();
+var [getDropdownRegisterStrict, setDropdownRegister] = createContext();
 var getDropdownRegister = getDropdownRegisterStrict;
-var [getDropdownRegisterTriggerStrict, setDropdownRegisterTrigger] = createContext2();
+var [getDropdownRegisterTriggerStrict, setDropdownRegisterTrigger] = createContext();
 var getDropdownRegisterTrigger = getDropdownRegisterTriggerStrict;
-var [getDropdownSetOpenStrict, setDropdownSetOpen] = createContext2();
+var [getDropdownSetOpenStrict, setDropdownSetOpen] = createContext();
 var getDropdownSetOpen = getDropdownSetOpenStrict;
 
 // src/components/dropdown/dropdown.svelte
-var root_3 = $31.from_html(`<div class="cinder-dropdown__menu" popover="auto" role="menu"><!></div>`);
-var root_5 = $31.from_html(`<div class="cinder-dropdown__menu" role="menu"><!></div>`);
-var root_15 = $31.from_html(`<div class="cinder-dropdown__trigger" role="presentation"><!></div> <!>`, 1);
-var root10 = $31.from_html(`<div><!></div>`);
+var rest_excludes9 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "open",
+  "placement",
+  "class",
+  "trigger",
+  "children"
+]);
+var root11 = $31.from_html(`<div class="cinder-dropdown__menu" popover="auto" role="menu"><!></div>`);
+var root_14 = $31.from_html(`<div class="cinder-dropdown__menu" role="menu"><!></div>`);
+var root_23 = $31.from_html(`<div class="cinder-dropdown__trigger" role="presentation"><!></div> <!>`, 1);
+var root_3 = $31.from_html(`<div><!></div>`);
 function Dropdown($$anchor, $$props) {
   const generatedId = $31.props_id();
   $31.push($$props, true);
-  let id = $31.prop($$props, "id", 3, generatedId), open = $31.prop($$props, "open", 15, false), placement = $31.prop($$props, "placement", 3, "bottom-start"), rest = $31.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "open",
-    "placement",
-    "class",
-    "trigger",
-    "children"
-  ]);
+  let id = $31.prop($$props, "id", 3, generatedId), open = $31.prop($$props, "open", 15, false), placement = $31.prop($$props, "placement", 3, "bottom-start"), rest = $31.rest_props($$props, rest_excludes9);
   let compoundMenuElement = $31.state(null);
   let compoundTriggerElement = $31.state(null);
   let compoundOpen = $31.state(false);
@@ -4474,7 +4571,7 @@ function Dropdown($$anchor, $$props) {
     const toggleEvent = event3;
     open(toggleEvent.newState === "open");
   }
-  var div = root10();
+  var div = root_3();
   $31.attribute_effect(div, ($0) => ({
     id: id(),
     class: $0,
@@ -4485,7 +4582,7 @@ function Dropdown($$anchor, $$props) {
   var node = $31.child(div);
   {
     var consequent_5 = ($$anchor2) => {
-      var fragment = root_15();
+      var fragment = root_23();
       var div_1 = $31.first_child(fragment);
       var node_1 = $31.child(div_1);
       {
@@ -4505,7 +4602,7 @@ function Dropdown($$anchor, $$props) {
       var node_3 = $31.sibling(div_1, 2);
       {
         var consequent_2 = ($$anchor3) => {
-          var div_2 = root_3();
+          var div_2 = root11();
           var node_4 = $31.child(div_2);
           {
             var consequent_1 = ($$anchor4) => {
@@ -4530,7 +4627,7 @@ function Dropdown($$anchor, $$props) {
           $31.append($$anchor3, div_2);
         };
         var consequent_4 = ($$anchor3) => {
-          var div_3 = root_5();
+          var div_3 = root_14();
           var node_6 = $31.child(div_3);
           {
             var consequent_3 = ($$anchor4) => {
@@ -4585,19 +4682,20 @@ $31.delegate(["click"]);
 // src/components/dropdown-trigger/dropdown-trigger.svelte
 import"svelte/internal/disclose-version";
 import * as $32 from "svelte/internal/client";
-var root_23 = $32.from_svg(`<svg class="cinder-dropdown-trigger__caret" aria-hidden="true" focusable="false" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8l4 4 4-4"></path></svg>`);
-var root11 = $32.from_html(`<button><!> <!></button>`);
+var rest_excludes10 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "class",
+  "showCaret",
+  "children",
+  "onclick"
+]);
+var root12 = $32.from_svg(`<svg class="cinder-dropdown-trigger__caret" aria-hidden="true" focusable="false" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8l4 4 4-4"></path></svg>`);
+var root_15 = $32.from_html(`<button><!> <!></button>`);
 function Dropdown_trigger($$anchor, $$props) {
   $32.push($$props, true);
-  let showCaret = $32.prop($$props, "showCaret", 3, true), rest = $32.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "class",
-    "showCaret",
-    "children",
-    "onclick"
-  ]);
+  let showCaret = $32.prop($$props, "showCaret", 3, true), rest = $32.rest_props($$props, rest_excludes10);
   const context = getDropdownContext();
   const registerTrigger = getDropdownRegisterTrigger();
   const setOpen = getDropdownSetOpen();
@@ -4613,7 +4711,7 @@ function Dropdown_trigger($$anchor, $$props) {
       setOpen(!context.isOpen);
     }
   }
-  var button = root11();
+  var button = root_15();
   $32.attribute_effect(button, ($0) => ({
     type: "button",
     class: $0,
@@ -4641,7 +4739,7 @@ function Dropdown_trigger($$anchor, $$props) {
   var node_3 = $32.sibling(node_1, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var svg = root_23();
+      var svg = root12();
       $32.append($$anchor2, svg);
     };
     $32.if(node_3, ($$render) => {
@@ -4661,7 +4759,7 @@ import * as $33 from "svelte/internal/client";
 import { tick } from "svelte";
 
 // src/_internal/locale-context.ts
-import { createContext as createContext3 } from "svelte";
+import { createContext as createContext2 } from "svelte";
 
 // src/_internal/optional-context.ts
 function optionalContext(getStrict) {
@@ -4675,7 +4773,7 @@ function optionalContext(getStrict) {
 }
 
 // src/_internal/locale-context.ts
-var [getLocaleContextStrict, setLocaleContextRaw] = createContext3();
+var [getLocaleContextStrict, setLocaleContextRaw] = createContext2();
 function setLocaleContext(context) {
   setLocaleContextRaw(context);
 }
@@ -4898,17 +4996,18 @@ class TypeaheadBuffer {
 }
 
 // src/components/dropdown-menu/dropdown-menu.svelte
-var root_16 = $33.from_html(`<div><!></div>`);
+var rest_excludes11 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "class",
+  "children",
+  "dir"
+]);
+var root13 = $33.from_html(`<div><!></div>`);
 function Dropdown_menu($$anchor, $$props) {
   $33.push($$props, true);
-  let rest = $33.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "class",
-    "children",
-    "dir"
-  ]);
+  let rest = $33.rest_props($$props, rest_excludes11);
   const context = getDropdownContext();
   const registerMenu = getDropdownRegister();
   const setOpen = getDropdownSetOpen();
@@ -5047,7 +5146,7 @@ function Dropdown_menu($$anchor, $$props) {
   var node = $33.first_child(fragment);
   {
     var consequent_1 = ($$anchor2) => {
-      var div = root_16();
+      var div = root13();
       $33.attribute_effect(div, ($0) => ({
         id: context.menuId,
         popover: context.supportsPopover ? "auto" : undefined,
@@ -5097,26 +5196,27 @@ function Dropdown_menu($$anchor, $$props) {
 // src/components/dropdown-item/dropdown-item.svelte
 import"svelte/internal/disclose-version";
 import * as $34 from "svelte/internal/client";
-var root_17 = $34.from_html(`<a><!></a>`);
-var root_32 = $34.from_html(`<button><!></button>`);
+var rest_excludes12 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "variant",
+  "itemRole",
+  "checked",
+  "inset",
+  "disabled",
+  "closeOnSelect",
+  "class",
+  "onclick",
+  "onkeydown",
+  "href",
+  "children"
+]);
+var root14 = $34.from_html(`<a><!></a>`);
+var root_16 = $34.from_html(`<button><!></button>`);
 function Dropdown_item($$anchor, $$props) {
   $34.push($$props, true);
-  let variant = $34.prop($$props, "variant", 3, "default"), itemRole = $34.prop($$props, "itemRole", 3, "menuitem"), checked = $34.prop($$props, "checked", 3, false), inset = $34.prop($$props, "inset", 3, false), closeOnSelect = $34.prop($$props, "closeOnSelect", 3, true), rest = $34.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "variant",
-    "itemRole",
-    "checked",
-    "inset",
-    "disabled",
-    "closeOnSelect",
-    "class",
-    "onclick",
-    "onkeydown",
-    "href",
-    "children"
-  ]);
+  let variant = $34.prop($$props, "variant", 3, "default"), itemRole = $34.prop($$props, "itemRole", 3, "menuitem"), checked = $34.prop($$props, "checked", 3, false), inset = $34.prop($$props, "inset", 3, false), closeOnSelect = $34.prop($$props, "closeOnSelect", 3, true), rest = $34.rest_props($$props, rest_excludes12);
   const context = getDropdownContext();
   const isLink = $34.derived(() => $$props.href !== undefined);
   const sharedClass = $34.derived(() => classNames("cinder-_option-row", "cinder-dropdown-item", inset() && "cinder-dropdown-item--inset", $$props.class));
@@ -5157,7 +5257,7 @@ function Dropdown_item($$anchor, $$props) {
   var node = $34.first_child(fragment);
   {
     var consequent_1 = ($$anchor2) => {
-      var a = root_17();
+      var a = root14();
       $34.attribute_effect(a, () => ({
         ...$34.get(anchorAttributes),
         href: $$props.href,
@@ -5188,7 +5288,7 @@ function Dropdown_item($$anchor, $$props) {
       $34.append($$anchor2, a);
     };
     var alternate = ($$anchor2) => {
-      var button = root_32();
+      var button = root_16();
       $34.attribute_effect(button, () => ({
         ...$34.get(buttonAttributes),
         type: $34.get(buttonType),
@@ -5230,9 +5330,9 @@ function Dropdown_item($$anchor, $$props) {
 }
 
 // src/components/markdown-editor/editor-toolbar/toolbar-dropdown.svelte
-var root_24 = $35.from_html(`<!> <span class="toolbar-dropdown-label svelte-1v28aut"> </span>`, 1);
-var root_6 = $35.from_html(`<!> <span class="dropdown-item-label svelte-1v28aut"> </span> <!>`, 1);
-var root_18 = $35.from_html(`<!> <!>`, 1);
+var root15 = $35.from_html(`<!> <span class="toolbar-dropdown-label svelte-1v28aut"> </span>`, 1);
+var root_17 = $35.from_html(`<!> <span class="dropdown-item-label svelte-1v28aut"> </span> <!>`, 1);
+var root_24 = $35.from_html(`<!> <!>`, 1);
 function Toolbar_dropdown($$anchor, $$props) {
   $35.push($$props, true);
   let disabled = $35.prop($$props, "disabled", 3, false);
@@ -5245,7 +5345,7 @@ function Toolbar_dropdown($$anchor, $$props) {
       return $$props.id;
     },
     children: ($$anchor2, $$slotProps) => {
-      var fragment_1 = root_18();
+      var fragment_1 = root_24();
       var node = $35.first_child(fragment_1);
       {
         let $0 = $35.derived(() => classNames("toolbar-dropdown-trigger", $$props.class));
@@ -5261,14 +5361,14 @@ function Toolbar_dropdown($$anchor, $$props) {
             return $35.get($1);
           },
           children: ($$anchor3, $$slotProps2) => {
-            var fragment_2 = root_24();
+            var fragment_2 = root15();
             var node_1 = $35.first_child(fragment_2);
             {
               var consequent = ($$anchor4) => {
                 var fragment_3 = $35.comment();
                 var node_2 = $35.first_child(fragment_3);
                 $35.component(node_2, () => $35.get(currentOption).icon, ($$anchor5, currentOption_icon) => {
-                  currentOption_icon($$anchor5, { class: "icon-sm" });
+                  currentOption_icon($$anchor5, { class: "cinder-icon-sm" });
                 });
                 $35.append($$anchor4, fragment_3);
               };
@@ -5305,10 +5405,10 @@ function Toolbar_dropdown($$anchor, $$props) {
                   return $35.get(isActive);
                 },
                 children: ($$anchor5, $$slotProps3) => {
-                  var fragment_6 = root_6();
+                  var fragment_6 = root_17();
                   var node_5 = $35.first_child(fragment_6);
                   $35.component(node_5, () => $35.get(option).icon, ($$anchor6, option_icon) => {
-                    option_icon($$anchor6, { class: "icon-sm" });
+                    option_icon($$anchor6, { class: "cinder-icon-sm" });
                   });
                   var span_1 = $35.sibling(node_5, 2);
                   var text_1 = $35.child(span_1, true);
@@ -5316,7 +5416,7 @@ function Toolbar_dropdown($$anchor, $$props) {
                   var node_6 = $35.sibling(span_1, 2);
                   {
                     var consequent_1 = ($$anchor6) => {
-                      Check($$anchor6, { class: "icon-sm dropdown-item-check" });
+                      Check($$anchor6, { class: "cinder-icon-sm dropdown-item-check" });
                     };
                     $35.if(node_6, ($$render) => {
                       if ($35.get(isActive))
@@ -5342,30 +5442,31 @@ function Toolbar_dropdown($$anchor, $$props) {
 }
 
 // src/components/markdown-editor/editor-toolbar/editor-toolbar.svelte
-var root_25 = $36.from_html(`<div class="toolbar-spacer svelte-1m9m099"></div> <!>`, 1);
-var root_19 = $36.from_html(`<div class="toolbar-group svelte-1m9m099" role="group" aria-label="History"><!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Block type"><!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Text formatting"><!> <!> <!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Links"><!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Lists"><!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Block operations"><!></div> <!>`, 1);
+var rest_excludes13 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "editorId",
+  "editorContext",
+  "activeMarks",
+  "activeBlockType",
+  "canUndo",
+  "canRedo",
+  "disabled",
+  "linkPopoverOpen",
+  "onLinkClick",
+  "onUndo",
+  "onRedo",
+  "actions",
+  "class",
+  "aria-label"
+]);
+var root16 = $36.from_html(`<div class="toolbar-spacer svelte-1m9m099"></div> <!>`, 1);
+var root_18 = $36.from_html(`<div class="toolbar-group svelte-1m9m099" role="group" aria-label="History"><!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Block type"><!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Text formatting"><!> <!> <!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Links"><!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Lists"><!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Block operations"><!></div> <!>`, 1);
 function Editor_toolbar($$anchor, $$props) {
   $36.push($$props, true);
-  let canUndo = $36.prop($$props, "canUndo", 3, false), canRedo = $36.prop($$props, "canRedo", 3, false), disabled = $36.prop($$props, "disabled", 3, false), linkPopoverOpen = $36.prop($$props, "linkPopoverOpen", 3, false), rest = $36.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "editorId",
-    "editorContext",
-    "activeMarks",
-    "activeBlockType",
-    "canUndo",
-    "canRedo",
-    "disabled",
-    "linkPopoverOpen",
-    "onLinkClick",
-    "onUndo",
-    "onRedo",
-    "actions",
-    "class",
-    "aria-label"
-  ]);
+  let canUndo = $36.prop($$props, "canUndo", 3, false), canRedo = $36.prop($$props, "canRedo", 3, false), disabled = $36.prop($$props, "disabled", 3, false), linkPopoverOpen = $36.prop($$props, "linkPopoverOpen", 3, false), rest = $36.rest_props($$props, rest_excludes13);
   const blockTypeOptions = [
     { type: "paragraph", label: "Paragraph", icon: Pilcrow },
     { type: "heading1", label: "Heading 1", icon: Heading_1 },
@@ -5464,7 +5565,7 @@ function Editor_toolbar($$anchor, $$props) {
       }
     }, () => rest, {
       children: ($$anchor2, $$slotProps) => {
-        var fragment_1 = root_19();
+        var fragment_1 = root_18();
         var div = $36.first_child(fragment_1);
         var node = $36.child(div);
         {
@@ -5726,7 +5827,7 @@ function Editor_toolbar($$anchor, $$props) {
         var node_16 = $36.sibling(div_5, 2);
         {
           var consequent = ($$anchor3) => {
-            var fragment_2 = root_25();
+            var fragment_2 = root16();
             var node_17 = $36.sibling($36.first_child(fragment_2), 2);
             $36.snippet(node_17, () => $$props.actions);
             $36.append($$anchor3, fragment_2);
@@ -5751,22 +5852,44 @@ import { tick as tick2 } from "svelte";
 // src/components/button/button.svelte
 import"svelte/internal/disclose-version";
 import * as $37 from "svelte/internal/client";
-var root_26 = $37.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
-var root_4 = $37.from_html(`<span class="cinder-sr-only"> </span>`);
-var root_52 = $37.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
-var root_33 = $37.from_html(`<!> <!>`, 1);
-var root_8 = $37.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
-var root_110 = $37.from_html(`<!> <!> <!>`, 1);
-var root_9 = $37.from_html(`<a><!></a>`);
-var root_10 = $37.from_html(`<button><!></button>`);
+var rest_excludes14 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "variant",
+  "size",
+  "fullWidth",
+  "loading",
+  "iconOnly",
+  "leadingIcon",
+  "trailingIcon",
+  "children",
+  "label",
+  "class",
+  "href",
+  "onclick",
+  "aria-disabled",
+  "aria-busy",
+  "aria-label",
+  "aria-labelledby",
+  "aria-expanded",
+  "aria-controls",
+  "aria-haspopup"
+]);
+var root17 = $37.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
+var root_19 = $37.from_html(`<span class="cinder-sr-only"> </span>`);
+var root_25 = $37.from_html(`<!> <!>`, 1);
+var root_32 = $37.from_html(`<!> <!> <!>`, 1);
+var root_4 = $37.from_html(`<a><!></a>`);
+var root_5 = $37.from_html(`<button><!></button>`);
 function Button($$anchor, $$props) {
   $37.push($$props, true);
   const buttonContent = ($$anchor2) => {
-    var fragment = root_110();
+    var fragment = root_32();
     var node = $37.first_child(fragment);
     {
       var consequent = ($$anchor3) => {
-        var span = root_26();
+        var span = root17();
         var node_1 = $37.child(span);
         $37.snippet(node_1, () => $$props.leadingIcon);
         $37.reset(span);
@@ -5780,11 +5903,11 @@ function Button($$anchor, $$props) {
     var node_2 = $37.sibling(node, 2);
     {
       var consequent_3 = ($$anchor3) => {
-        var fragment_1 = root_33();
+        var fragment_1 = root_25();
         var node_3 = $37.first_child(fragment_1);
         {
           var consequent_1 = ($$anchor4) => {
-            var span_1 = root_4();
+            var span_1 = root_19();
             var text2 = $37.child(span_1, true);
             $37.reset(span_1);
             $37.template_effect(() => $37.set_text(text2, $$props.label));
@@ -5798,7 +5921,7 @@ function Button($$anchor, $$props) {
         var node_4 = $37.sibling(node_3, 2);
         {
           var consequent_2 = ($$anchor4) => {
-            var span_2 = root_52();
+            var span_2 = root17();
             var node_5 = $37.child(span_2);
             $37.snippet(node_5, () => $$props.children);
             $37.reset(span_2);
@@ -5834,7 +5957,7 @@ function Button($$anchor, $$props) {
     var node_7 = $37.sibling(node_2, 2);
     {
       var consequent_5 = ($$anchor3) => {
-        var span_3 = root_8();
+        var span_3 = root17();
         var node_8 = $37.child(span_3);
         $37.snippet(node_8, () => $$props.trailingIcon);
         $37.reset(span_3);
@@ -5847,30 +5970,7 @@ function Button($$anchor, $$props) {
     }
     $37.append($$anchor2, fragment);
   };
-  const variant = $37.prop($$props, "variant", 3, "secondary"), size3 = $37.prop($$props, "size", 3, "md"), fullWidth = $37.prop($$props, "fullWidth", 3, false), loading = $37.prop($$props, "loading", 3, false), iconOnly = $37.prop($$props, "iconOnly", 3, false), rest = $37.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "variant",
-    "size",
-    "fullWidth",
-    "loading",
-    "iconOnly",
-    "leadingIcon",
-    "trailingIcon",
-    "children",
-    "label",
-    "class",
-    "href",
-    "onclick",
-    "aria-disabled",
-    "aria-busy",
-    "aria-label",
-    "aria-labelledby",
-    "aria-expanded",
-    "aria-controls",
-    "aria-haspopup"
-  ]);
+  const variant = $37.prop($$props, "variant", 3, "secondary"), size3 = $37.prop($$props, "size", 3, "md"), fullWidth = $37.prop($$props, "fullWidth", 3, false), loading = $37.prop($$props, "loading", 3, false), iconOnly = $37.prop($$props, "iconOnly", 3, false), rest = $37.rest_props($$props, rest_excludes14);
   const mergedClassName = $37.derived(() => classNames("cinder-button", $$props.class));
   const dataAttributes = $37.derived(() => ({
     "data-cinder-variant": variant(),
@@ -5916,7 +6016,7 @@ function Button($$anchor, $$props) {
   var node_9 = $37.first_child(fragment_4);
   {
     var consequent_6 = ($$anchor2) => {
-      var a = root_9();
+      var a = root_4();
       $37.attribute_effect(a, () => ({
         ...anchorAttributes,
         href: loading() ? undefined : $$props.href,
@@ -5938,7 +6038,7 @@ function Button($$anchor, $$props) {
       $37.append($$anchor2, a);
     };
     var alternate_1 = ($$anchor2) => {
-      var button = root_10();
+      var button = root_5();
       $37.attribute_effect(button, () => ({
         ...buttonAttributes,
         type: $37.get(buttonType) ?? "button",
@@ -6013,8 +6113,8 @@ function resolveFieldControl(input) {
 }
 
 // src/_internal/form-field-context.ts
-import { createContext as createContext4 } from "svelte";
-var [getFormFieldContextStrict, setFormFieldContextRaw] = createContext4();
+import { createContext as createContext3 } from "svelte";
+var [getFormFieldContextStrict, setFormFieldContextRaw] = createContext3();
 function setFormFieldContext(context) {
   setFormFieldContextRaw(context);
 }
@@ -6029,24 +6129,47 @@ function commitValue(proposed, onValueChange, setValue) {
 
 // src/components/input/input.svelte
 var calendarIcon = ($$anchor) => {
-  var svg = root_111();
+  var svg = root18();
   $38.append($$anchor, svg);
 };
-var root_111 = $38.from_svg(`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`);
-var root_27 = $38.from_html(`<input/>`);
-var root_42 = $38.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
-var root_34 = $38.from_html(`<label> <!></label>`);
-var root_62 = $38.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
-var root_7 = $38.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
-var root_82 = $38.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
-var root_53 = $38.from_html(`<div class="cinder-input-group"><!> <!> <!></div>`);
-var root_102 = $38.from_html(`<p class="cinder-input-field__description"> </p>`);
-var root_11 = $38.from_html(`<p class="cinder-input-field__error" aria-live="polite"> </p>`);
-var root12 = $38.from_html(`<div class="cinder-input-field"><!> <!> <!> <!></div>`);
+var rest_excludes15 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "value",
+  "onValueChange",
+  "label",
+  "hideLabel",
+  "description",
+  "error",
+  "disabled",
+  "required",
+  "type",
+  "class",
+  "leading",
+  "trailing",
+  "leadingInteractive",
+  "trailingInteractive",
+  "aria-describedby",
+  "aria-invalid",
+  "oninput"
+]);
+var root18 = $38.from_svg(`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`);
+var root_110 = $38.from_html(`<input/>`);
+var root_26 = $38.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root_33 = $38.from_html(`<label> <!></label>`);
+var root_42 = $38.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
+var root_52 = $38.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
+var root_6 = $38.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
+var root_7 = $38.from_html(`<div class="cinder-input-group"><!> <!> <!></div>`);
+var root_8 = $38.from_html(`<p class="cinder-input-field__description"> </p>`);
+var root_9 = $38.from_html(`<p class="cinder-input-field__error" aria-live="polite"> </p>`);
+var root_10 = $38.from_html(`<div class="cinder-input-field"><!> <!> <!> <!></div>`);
 function Input($$anchor, $$props) {
   $38.push($$props, true);
   const inputElement = ($$anchor2) => {
-    var input = root_27();
+    var input = root_110();
     $38.attribute_effect(input, ($0) => ({
       id: $$props.id,
       type: type(),
@@ -6063,29 +6186,7 @@ function Input($$anchor, $$props) {
     $38.bind_this(input, ($$value) => $38.set(inputNode, $$value), () => $38.get(inputNode));
     $38.append($$anchor2, input);
   };
-  let value = $38.prop($$props, "value", 15, ""), hideLabel = $38.prop($$props, "hideLabel", 3, false), type = $38.prop($$props, "type", 3, "text"), leadingInteractive = $38.prop($$props, "leadingInteractive", 3, false), trailingInteractive = $38.prop($$props, "trailingInteractive", 3, false), rest = $38.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "value",
-    "onValueChange",
-    "label",
-    "hideLabel",
-    "description",
-    "error",
-    "disabled",
-    "required",
-    "type",
-    "class",
-    "leading",
-    "trailing",
-    "leadingInteractive",
-    "trailingInteractive",
-    "aria-describedby",
-    "aria-invalid",
-    "oninput"
-  ]);
+  let value = $38.prop($$props, "value", 15, ""), hideLabel = $38.prop($$props, "hideLabel", 3, false), type = $38.prop($$props, "type", 3, "text"), leadingInteractive = $38.prop($$props, "leadingInteractive", 3, false), trailingInteractive = $38.prop($$props, "trailingInteractive", 3, false), rest = $38.rest_props($$props, rest_excludes15);
   const context = getFormFieldContext();
   $38.user_effect(() => {
     if (context && context.controlId !== $$props.id) {
@@ -6147,16 +6248,16 @@ function Input($$anchor, $$props) {
     target.value = committed;
     $$props.oninput?.(event3);
   }
-  var div = root12();
+  var div = root_10();
   var node = $38.child(div);
   {
     var consequent_1 = ($$anchor2) => {
-      var label_1 = root_34();
+      var label_1 = root_33();
       var text2 = $38.child(label_1);
       var node_1 = $38.sibling(text2);
       {
         var consequent = ($$anchor3) => {
-          var span = root_42();
+          var span = root_26();
           $38.append($$anchor3, span);
         };
         $38.if(node_1, ($$render) => {
@@ -6183,11 +6284,11 @@ function Input($$anchor, $$props) {
   var node_2 = $38.sibling(node, 2);
   {
     var consequent_5 = ($$anchor2) => {
-      var div_1 = root_53();
+      var div_1 = root_7();
       var node_3 = $38.child(div_1);
       {
         var consequent_2 = ($$anchor3) => {
-          var span_1 = root_62();
+          var span_1 = root_42();
           var node_4 = $38.child(span_1);
           $38.snippet(node_4, () => $$props.leading);
           $38.reset(span_1);
@@ -6204,7 +6305,7 @@ function Input($$anchor, $$props) {
       var node_6 = $38.sibling(node_5, 2);
       {
         var consequent_3 = ($$anchor3) => {
-          var span_2 = root_7();
+          var span_2 = root_52();
           var node_7 = $38.child(span_2);
           $38.snippet(node_7, () => $$props.trailing);
           $38.reset(span_2);
@@ -6212,7 +6313,7 @@ function Input($$anchor, $$props) {
           $38.append($$anchor3, span_2);
         };
         var consequent_4 = ($$anchor3) => {
-          var span_3 = root_82();
+          var span_3 = root_6();
           var node_8 = $38.child(span_3);
           calendarIcon(node_8);
           $38.reset(span_3);
@@ -6248,7 +6349,7 @@ function Input($$anchor, $$props) {
   var node_9 = $38.sibling(node_2, 2);
   {
     var consequent_6 = ($$anchor2) => {
-      var p = root_102();
+      var p = root_8();
       var text_1 = $38.child(p, true);
       $38.reset(p);
       $38.template_effect(() => {
@@ -6265,7 +6366,7 @@ function Input($$anchor, $$props) {
   var node_10 = $38.sibling(node_9, 2);
   {
     var consequent_7 = ($$anchor2) => {
-      var p_1 = root_11();
+      var p_1 = root_9();
       var text_2 = $38.child(p_1, true);
       $38.reset(p_1);
       $38.template_effect(() => {
@@ -6345,8 +6446,8 @@ function X($$anchor, $$props) {
   }));
 }
 // src/components/markdown-editor/editor-toolbar/link-popover.svelte
-var root_35 = $41.from_html(`<!> Remove`, 1);
-var root13 = $41.from_html(`<div role="dialog" aria-modal="true" tabindex="-1"><header class="link-popover-header svelte-13b14j2"><h2 class="link-popover-title svelte-13b14j2"><!> </h2> <button type="button" class="link-popover-close svelte-13b14j2" aria-label="Close"><!></button></header> <div class="link-popover-content svelte-13b14j2"><!> <!></div> <footer class="link-popover-footer svelte-13b14j2"><div class="link-popover-actions svelte-13b14j2"><!></div> <div class="link-popover-primary-actions svelte-13b14j2"><!> <!></div></footer></div>`);
+var root19 = $41.from_html(`<!> Remove`, 1);
+var root_111 = $41.from_html(`<div role="dialog" aria-modal="true" tabindex="-1"><header class="link-popover-header svelte-13b14j2"><h2 class="link-popover-title svelte-13b14j2"><!> </h2> <button type="button" class="link-popover-close svelte-13b14j2" aria-label="Close"><!></button></header> <div class="link-popover-content svelte-13b14j2"><!> <!></div> <footer class="link-popover-footer svelte-13b14j2"><div class="link-popover-actions svelte-13b14j2"><!></div> <div class="link-popover-primary-actions svelte-13b14j2"><!> <!></div></footer></div>`);
 function Link_popover($$anchor, $$props) {
   $41.push($$props, true);
   let mode = $41.prop($$props, "mode", 3, "insert"), initialUrl = $41.prop($$props, "initialUrl", 3, ""), initialText = $41.prop($$props, "initialText", 3, ""), hasSelection = $41.prop($$props, "hasSelection", 3, false), anchorElement = $41.prop($$props, "anchorElement", 3, null);
@@ -6440,16 +6541,16 @@ function Link_popover($$anchor, $$props) {
   function handleRemove() {
     $$props.onremove?.();
   }
-  var div = root13();
+  var div = root_111();
   var header = $41.child(div);
   var h2 = $41.child(header);
   var node = $41.child(h2);
-  Link(node, { class: "icon-sm" });
+  Link(node, { class: "cinder-icon-sm" });
   var text_1 = $41.sibling(node);
   $41.reset(h2);
   var button = $41.sibling(h2, 2);
   var node_1 = $41.child(button);
-  X(node_1, { class: "icon-sm" });
+  X(node_1, { class: "cinder-icon-sm" });
   $41.reset(button);
   $41.reset(header);
   var div_1 = $41.sibling(header, 2);
@@ -6513,9 +6614,9 @@ function Link_popover($$anchor, $$props) {
         size: "sm",
         onclick: handleRemove,
         children: ($$anchor3, $$slotProps) => {
-          var fragment_2 = root_35();
+          var fragment_2 = root19();
           var node_5 = $41.first_child(fragment_2);
-          Unlink(node_5, { class: "icon-sm" });
+          Unlink(node_5, { class: "cinder-icon-sm" });
           $41.next();
           $41.append($$anchor3, fragment_2);
         },
@@ -6589,44 +6690,45 @@ function Link_popover($$anchor, $$props) {
 }
 $41.delegate(["keydown", "click"]);
 // src/components/markdown-editor/markdown-editor.svelte
-var root_43 = $42.from_html(`<div class="toolbar-leading svelte-1mxvqjb"><!></div>`);
-var root_54 = $42.from_html(`<div class="toolbar-actions svelte-1mxvqjb"><!></div>`);
-var root_72 = $42.from_html(`<!> <!>`, 1);
-var root_63 = $42.from_html(`<div class="toolbar-mode-toggle svelte-1mxvqjb"><!></div>`);
-var root_36 = $42.from_html(`<div class="editor-toolbar-wrapper svelte-1mxvqjb"><!> <!> <!> <!></div>`);
-var root_112 = $42.from_html(`<div class="cinder-markdown-content prose markdown-editor surface svelte-1mxvqjb" role="application" tabindex="0"></div>`);
-var root_122 = $42.from_html(`<textarea class="markdown-editor surface source-mode svelte-1mxvqjb" aria-multiline="true"></textarea>`);
-var root14 = $42.from_html(`<div><!> <!> <!></div>`);
+var rest_excludes16 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "label",
+  "value",
+  "mode",
+  "showModeToggle",
+  "modeLabel",
+  "readonly",
+  "placeholder",
+  "showToolbar",
+  "class",
+  "onchange",
+  "onready",
+  "onmodechange",
+  "onselectionchange",
+  "oncommentshortcut",
+  "plugins",
+  "placeholderCompletion",
+  "placeholderDecoration",
+  "toolbar",
+  "toolbarActions",
+  "toolbarLeading",
+  "snapshotMode",
+  "aria-describedby"
+]);
+var root20 = $42.from_html(`<div class="toolbar-leading svelte-1mxvqjb"><!></div>`);
+var root_112 = $42.from_html(`<div class="toolbar-actions svelte-1mxvqjb"><!></div>`);
+var root_27 = $42.from_html(`<!> <!>`, 1);
+var root_34 = $42.from_html(`<div class="toolbar-mode-toggle svelte-1mxvqjb"><!></div>`);
+var root_43 = $42.from_html(`<div class="editor-toolbar-wrapper svelte-1mxvqjb"><!> <!> <!> <!></div>`);
+var root_53 = $42.from_html(`<div class="cinder-markdown-content markdown-editor surface svelte-1mxvqjb" role="application" tabindex="0"></div>`);
+var root_62 = $42.from_html(`<textarea class="markdown-editor surface source-mode svelte-1mxvqjb" aria-multiline="true"></textarea>`);
+var root_72 = $42.from_html(`<div><div class="markdown-editor-layout svelte-1mxvqjb"><!> <!></div> <!></div>`);
 function Markdown_editor($$anchor, $$props) {
   $42.push($$props, true);
-  let label = $42.prop($$props, "label", 3, "Markdown editor"), value = $42.prop($$props, "value", 15, ""), mode = $42.prop($$props, "mode", 15, "wysiwyg"), showModeToggle = $42.prop($$props, "showModeToggle", 3, false), modeLabel = $42.prop($$props, "modeLabel", 3, "Editor mode"), readonly = $42.prop($$props, "readonly", 3, false), placeholder = $42.prop($$props, "placeholder", 3, "Start writing..."), showToolbar = $42.prop($$props, "showToolbar", 3, true), plugins = $42.prop($$props, "plugins", 19, () => []), snapshotMode = $42.prop($$props, "snapshotMode", 3, false), rest = $42.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "label",
-    "value",
-    "mode",
-    "showModeToggle",
-    "modeLabel",
-    "readonly",
-    "placeholder",
-    "showToolbar",
-    "class",
-    "onchange",
-    "onready",
-    "onmodechange",
-    "onselectionchange",
-    "oncommentshortcut",
-    "plugins",
-    "placeholderCompletion",
-    "placeholderDecoration",
-    "toolbar",
-    "toolbarActions",
-    "toolbarLeading",
-    "snapshotMode",
-    "aria-describedby"
-  ]);
+  let label = $42.prop($$props, "label", 3, "Markdown editor"), value = $42.prop($$props, "value", 15, ""), mode = $42.prop($$props, "mode", 15, "wysiwyg"), showModeToggle = $42.prop($$props, "showModeToggle", 3, false), modeLabel = $42.prop($$props, "modeLabel", 3, "Editor mode"), readonly = $42.prop($$props, "readonly", 3, false), placeholder = $42.prop($$props, "placeholder", 3, "Start writing..."), showToolbar = $42.prop($$props, "showToolbar", 3, true), plugins = $42.prop($$props, "plugins", 19, () => []), snapshotMode = $42.prop($$props, "snapshotMode", 3, false), rest = $42.rest_props($$props, rest_excludes16);
   let wrapperElement = $42.state(null);
   $42.user_effect(() => {
     if (!snapshotMode())
@@ -7021,7 +7123,7 @@ function Markdown_editor($$anchor, $$props) {
     getView,
     getEditor
   };
-  var div = root14();
+  var div = root_72();
   $42.attribute_effect(div, ($0) => ({
     class: $0,
     "data-initializing": $42.get(isInitializing) || undefined,
@@ -7031,7 +7133,8 @@ function Markdown_editor($$anchor, $$props) {
     "data-snapshot-mode": snapshotMode() || undefined,
     ...rest
   }), [() => classNames("markdown-editor-wrapper", $$props.class)], undefined, undefined, "svelte-1mxvqjb");
-  var node = $42.child(div);
+  var div_1 = $42.child(div);
+  var node = $42.child(div_1);
   {
     var consequent_4 = ($$anchor2) => {
       var fragment = $42.comment();
@@ -7044,15 +7147,15 @@ function Markdown_editor($$anchor, $$props) {
           $42.append($$anchor3, fragment_1);
         };
         var alternate = ($$anchor3) => {
-          var div_1 = root_36();
-          var node_3 = $42.child(div_1);
+          var div_2 = root_43();
+          var node_3 = $42.child(div_2);
           {
             var consequent_1 = ($$anchor4) => {
-              var div_2 = root_43();
-              var node_4 = $42.child(div_2);
+              var div_3 = root20();
+              var node_4 = $42.child(div_3);
               $42.snippet(node_4, () => $$props.toolbarLeading, () => $42.get(toolbarContext));
-              $42.reset(div_2);
-              $42.append($$anchor4, div_2);
+              $42.reset(div_3);
+              $42.append($$anchor4, div_3);
             };
             $42.if(node_3, ($$render) => {
               if ($$props.toolbarLeading)
@@ -7099,11 +7202,11 @@ function Markdown_editor($$anchor, $$props) {
           var node_6 = $42.sibling(node_5, 2);
           {
             var consequent_2 = ($$anchor4) => {
-              var div_3 = root_54();
-              var node_7 = $42.child(div_3);
+              var div_4 = root_112();
+              var node_7 = $42.child(div_4);
               $42.snippet(node_7, () => $$props.toolbarActions, () => $42.get(toolbarContext));
-              $42.reset(div_3);
-              $42.append($$anchor4, div_3);
+              $42.reset(div_4);
+              $42.append($$anchor4, div_4);
             };
             $42.if(node_6, ($$render) => {
               if ($$props.toolbarActions)
@@ -7113,8 +7216,8 @@ function Markdown_editor($$anchor, $$props) {
           var node_8 = $42.sibling(node_6, 2);
           {
             var consequent_3 = ($$anchor4) => {
-              var div_4 = root_63();
-              var node_9 = $42.child(div_4);
+              var div_5 = root_34();
+              var node_9 = $42.child(div_5);
               {
                 let $0 = $42.derived(() => `${$$props.id}-mode-toggle`);
                 Segmented_control(node_9, {
@@ -7134,7 +7237,7 @@ function Markdown_editor($$anchor, $$props) {
                     mode($$value);
                   },
                   children: ($$anchor5, $$slotProps) => {
-                    var fragment_2 = root_72();
+                    var fragment_2 = root_27();
                     var node_10 = $42.first_child(fragment_2);
                     Segment(node_10, {
                       value: "wysiwyg",
@@ -7160,16 +7263,16 @@ function Markdown_editor($$anchor, $$props) {
                   $$slots: { default: true }
                 });
               }
-              $42.reset(div_4);
-              $42.append($$anchor4, div_4);
+              $42.reset(div_5);
+              $42.append($$anchor4, div_5);
             };
             $42.if(node_8, ($$render) => {
               if (showModeToggle())
                 $$render(consequent_3);
             });
           }
-          $42.reset(div_1);
-          $42.append($$anchor3, div_1);
+          $42.reset(div_2);
+          $42.append($$anchor3, div_2);
         };
         $42.if(node_1, ($$render) => {
           if ($$props.toolbar)
@@ -7192,21 +7295,21 @@ function Markdown_editor($$anchor, $$props) {
       var node_13 = $42.first_child(fragment_3);
       {
         var consequent_5 = ($$anchor3) => {
-          var div_5 = root_112();
+          var div_6 = root_53();
           let styles;
-          $42.attach(div_5, () => editorAttachment);
+          $42.attach(div_6, () => editorAttachment);
           $42.template_effect(() => {
-            $42.set_attribute(div_5, "id", $$props.id);
-            $42.set_attribute(div_5, "data-readonly", readonly() || undefined);
-            $42.set_attribute(div_5, "aria-label", $42.get(accessibleEditorLabel));
-            styles = $42.set_style(div_5, "", styles, {
+            $42.set_attribute(div_6, "id", $$props.id);
+            $42.set_attribute(div_6, "data-readonly", readonly() || undefined);
+            $42.set_attribute(div_6, "aria-label", $42.get(accessibleEditorLabel));
+            styles = $42.set_style(div_6, "", styles, {
               "--editor-placeholder": `'${$42.get(escapedPlaceholder) ?? ""}'`
             });
           });
-          $42.append($$anchor3, div_5);
+          $42.append($$anchor3, div_6);
         };
         var alternate_1 = ($$anchor3) => {
-          var textarea = root_122();
+          var textarea = root_62();
           $42.remove_textarea_child(textarea);
           $42.template_effect(() => {
             $42.set_attribute(textarea, "id", $$props.id);
@@ -7238,7 +7341,8 @@ function Markdown_editor($$anchor, $$props) {
         $$render(alternate_2, -1);
     });
   }
-  var node_14 = $42.sibling(node_12, 2);
+  $42.reset(div_1);
+  var node_14 = $42.sibling(div_1, 2);
   {
     var consequent_7 = ($$anchor2) => {
       {
@@ -7287,4 +7391,4 @@ export {
   Markdown_editor as MarkdownEditor
 };
 
-//# debugId=470073BB9F5AAF7A64756E2164756E21
+//# debugId=76C8DBBE69E4BDC864756E2164756E21