@lostgradient/cinder 0.5.0 → 0.6.0

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

@@ -2180,9 +2180,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 +2191,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 +2243,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 +2282,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();
         }
@@ -2290,7 +2359,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();
@@ -4394,7 +4468,7 @@ function Toolbar_button($$anchor, $$props) {
       }), [() => classNames("toolbar-button", $$props.class)], undefined, undefined, "svelte-143lto0");
       var node = $30.child(button);
       $30.component(node, () => $$props.icon, ($$anchor3, Icon_1) => {
-        Icon_1($$anchor3, { class: "icon-sm" });
+        Icon_1($$anchor3, { class: "cinder-icon-sm" });
       });
       $30.reset(button);
       $30.append($$anchor2, button);
@@ -5491,7 +5565,7 @@ function Toolbar_dropdown($$anchor, $$props) {
                 var fragment_3 = $37.comment();
                 var node_2 = $37.first_child(fragment_3);
                 $37.component(node_2, () => $37.get(currentOption).icon, ($$anchor5, currentOption_icon) => {
-                  currentOption_icon($$anchor5, { class: "icon-sm" });
+                  currentOption_icon($$anchor5, { class: "cinder-icon-sm" });
                 });
                 $37.append($$anchor4, fragment_3);
               };
@@ -5531,7 +5605,7 @@ function Toolbar_dropdown($$anchor, $$props) {
                   var fragment_6 = root_6();
                   var node_5 = $37.first_child(fragment_6);
                   $37.component(node_5, () => $37.get(option).icon, ($$anchor6, option_icon) => {
-                    option_icon($$anchor6, { class: "icon-sm" });
+                    option_icon($$anchor6, { class: "cinder-icon-sm" });
                   });
                   var span_1 = $37.sibling(node_5, 2);
                   var text_1 = $37.child(span_1, true);
@@ -5539,7 +5613,7 @@ function Toolbar_dropdown($$anchor, $$props) {
                   var node_6 = $37.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" });
                     };
                     $37.if(node_6, ($$render) => {
                       if ($37.get(isActive))
@@ -6667,12 +6741,12 @@ function Link_popover($$anchor, $$props) {
   var header = $43.child(div);
   var h2 = $43.child(header);
   var node = $43.child(h2);
-  Link(node, { class: "icon-sm" });
+  Link(node, { class: "cinder-icon-sm" });
   var text_1 = $43.sibling(node);
   $43.reset(h2);
   var button = $43.sibling(h2, 2);
   var node_1 = $43.child(button);
-  X(node_1, { class: "icon-sm" });
+  X(node_1, { class: "cinder-icon-sm" });
   $43.reset(button);
   $43.reset(header);
   var div_1 = $43.sibling(header, 2);
@@ -6738,7 +6812,7 @@ function Link_popover($$anchor, $$props) {
         children: ($$anchor3, $$slotProps) => {
           var fragment_2 = root_35();
           var node_5 = $43.first_child(fragment_2);
-          Unlink(node_5, { class: "icon-sm" });
+          Unlink(node_5, { class: "cinder-icon-sm" });
           $43.next();
           $43.append($$anchor3, fragment_2);
         },
@@ -6817,9 +6891,9 @@ var root_54 = $44.from_html(`<div class="toolbar-actions svelte-1mxvqjb"><!></di
 var root_72 = $44.from_html(`<!> <!>`, 1);
 var root_63 = $44.from_html(`<div class="toolbar-mode-toggle svelte-1mxvqjb"><!></div>`);
 var root_36 = $44.from_html(`<div class="editor-toolbar-wrapper svelte-1mxvqjb"><!> <!> <!> <!></div>`);
-var root_112 = $44.from_html(`<div class="cinder-markdown-content prose markdown-editor surface svelte-1mxvqjb" role="application" tabindex="0"></div>`);
+var root_112 = $44.from_html(`<div class="cinder-markdown-content markdown-editor surface svelte-1mxvqjb" role="application" tabindex="0"></div>`);
 var root_122 = $44.from_html(`<textarea class="markdown-editor surface source-mode svelte-1mxvqjb" aria-multiline="true"></textarea>`);
-var root14 = $44.from_html(`<div><!> <!> <!></div>`);
+var root14 = $44.from_html(`<div><div class="markdown-editor-layout svelte-1mxvqjb"><!> <!></div> <!></div>`);
 function Markdown_editor($$anchor, $$props) {
   $44.push($$props, true);
   let label = $44.prop($$props, "label", 3, "Markdown editor"), value = $44.prop($$props, "value", 15, ""), mode = $44.prop($$props, "mode", 15, "wysiwyg"), showModeToggle = $44.prop($$props, "showModeToggle", 3, false), modeLabel = $44.prop($$props, "modeLabel", 3, "Editor mode"), readonly = $44.prop($$props, "readonly", 3, false), placeholder = $44.prop($$props, "placeholder", 3, "Start writing..."), showToolbar = $44.prop($$props, "showToolbar", 3, true), plugins = $44.prop($$props, "plugins", 19, () => []), snapshotMode = $44.prop($$props, "snapshotMode", 3, false), rest = $44.rest_props($$props, [
@@ -7254,7 +7328,8 @@ function Markdown_editor($$anchor, $$props) {
     "data-snapshot-mode": snapshotMode() || undefined,
     ...rest
   }), [() => classNames("markdown-editor-wrapper", $$props.class)], undefined, undefined, "svelte-1mxvqjb");
-  var node = $44.child(div);
+  var div_1 = $44.child(div);
+  var node = $44.child(div_1);
   {
     var consequent_4 = ($$anchor2) => {
       var fragment = $44.comment();
@@ -7267,15 +7342,15 @@ function Markdown_editor($$anchor, $$props) {
           $44.append($$anchor3, fragment_1);
         };
         var alternate = ($$anchor3) => {
-          var div_1 = root_36();
-          var node_3 = $44.child(div_1);
+          var div_2 = root_36();
+          var node_3 = $44.child(div_2);
           {
             var consequent_1 = ($$anchor4) => {
-              var div_2 = root_43();
-              var node_4 = $44.child(div_2);
+              var div_3 = root_43();
+              var node_4 = $44.child(div_3);
               $44.snippet(node_4, () => $$props.toolbarLeading, () => $44.get(toolbarContext));
-              $44.reset(div_2);
-              $44.append($$anchor4, div_2);
+              $44.reset(div_3);
+              $44.append($$anchor4, div_3);
             };
             $44.if(node_3, ($$render) => {
               if ($$props.toolbarLeading)
@@ -7322,11 +7397,11 @@ function Markdown_editor($$anchor, $$props) {
           var node_6 = $44.sibling(node_5, 2);
           {
             var consequent_2 = ($$anchor4) => {
-              var div_3 = root_54();
-              var node_7 = $44.child(div_3);
+              var div_4 = root_54();
+              var node_7 = $44.child(div_4);
               $44.snippet(node_7, () => $$props.toolbarActions, () => $44.get(toolbarContext));
-              $44.reset(div_3);
-              $44.append($$anchor4, div_3);
+              $44.reset(div_4);
+              $44.append($$anchor4, div_4);
             };
             $44.if(node_6, ($$render) => {
               if ($$props.toolbarActions)
@@ -7336,8 +7411,8 @@ function Markdown_editor($$anchor, $$props) {
           var node_8 = $44.sibling(node_6, 2);
           {
             var consequent_3 = ($$anchor4) => {
-              var div_4 = root_63();
-              var node_9 = $44.child(div_4);
+              var div_5 = root_63();
+              var node_9 = $44.child(div_5);
               {
                 let $0 = $44.derived(() => `${$$props.id}-mode-toggle`);
                 Segmented_control(node_9, {
@@ -7383,16 +7458,16 @@ function Markdown_editor($$anchor, $$props) {
                   $$slots: { default: true }
                 });
               }
-              $44.reset(div_4);
-              $44.append($$anchor4, div_4);
+              $44.reset(div_5);
+              $44.append($$anchor4, div_5);
             };
             $44.if(node_8, ($$render) => {
               if (showModeToggle())
                 $$render(consequent_3);
             });
           }
-          $44.reset(div_1);
-          $44.append($$anchor3, div_1);
+          $44.reset(div_2);
+          $44.append($$anchor3, div_2);
         };
         $44.if(node_1, ($$render) => {
           if ($$props.toolbar)
@@ -7415,18 +7490,18 @@ function Markdown_editor($$anchor, $$props) {
       var node_13 = $44.first_child(fragment_3);
       {
         var consequent_5 = ($$anchor3) => {
-          var div_5 = root_112();
+          var div_6 = root_112();
           let styles;
-          $44.attach(div_5, () => editorAttachment);
+          $44.attach(div_6, () => editorAttachment);
           $44.template_effect(() => {
-            $44.set_attribute(div_5, "id", $$props.id);
-            $44.set_attribute(div_5, "data-readonly", readonly() || undefined);
-            $44.set_attribute(div_5, "aria-label", $44.get(accessibleEditorLabel));
-            styles = $44.set_style(div_5, "", styles, {
+            $44.set_attribute(div_6, "id", $$props.id);
+            $44.set_attribute(div_6, "data-readonly", readonly() || undefined);
+            $44.set_attribute(div_6, "aria-label", $44.get(accessibleEditorLabel));
+            styles = $44.set_style(div_6, "", styles, {
               "--editor-placeholder": `'${$44.get(escapedPlaceholder) ?? ""}'`
             });
           });
-          $44.append($$anchor3, div_5);
+          $44.append($$anchor3, div_6);
         };
         var alternate_1 = ($$anchor3) => {
           var textarea = root_122();
@@ -7461,7 +7536,8 @@ function Markdown_editor($$anchor, $$props) {
         $$render(alternate_2, -1);
     });
   }
-  var node_14 = $44.sibling(node_12, 2);
+  $44.reset(div_1);
+  var node_14 = $44.sibling(div_1, 2);
   {
     var consequent_7 = ($$anchor2) => {
       {
@@ -7761,7 +7837,7 @@ function Comment_list($$anchor, $$props) {
           var consequent_2 = ($$anchor4) => {
             var button = root_83();
             var node_7 = $47.child(button);
-            Pencil(node_7, { class: "icon-sm" });
+            Pencil(node_7, { class: "cinder-icon-sm" });
             $47.reset(button);
             $47.delegated("click", button, () => startEdit($47.get(comment29)));
             $47.append($$anchor4, button);
@@ -7777,7 +7853,7 @@ function Comment_list($$anchor, $$props) {
           var consequent_3 = ($$anchor4) => {
             var button_1 = root_92();
             var node_9 = $47.child(button_1);
-            Trash_2(node_9, { class: "icon-sm" });
+            Trash_2(node_9, { class: "cinder-icon-sm" });
             $47.reset(button_1);
             $47.delegated("click", button_1, () => $$props.ondelete?.($47.get(comment29).id));
             $47.append($$anchor4, button_1);
@@ -8124,7 +8200,7 @@ function Thread_popover($$anchor, $$props) {
     var consequent = ($$anchor2) => {
       var span = root_115();
       var node_1 = $50.child(span);
-      File_text(node_1, { class: "icon-xs" });
+      File_text(node_1, { class: "cinder-icon-xs" });
       $50.next();
       $50.reset(span);
       $50.append($$anchor2, span);
@@ -8162,7 +8238,7 @@ function Thread_popover($$anchor, $$props) {
           },
           "aria-label": "Delete thread",
           children: ($$anchor3, $$slotProps) => {
-            Trash_2($$anchor3, { class: "icon-sm" });
+            Trash_2($$anchor3, { class: "cinder-icon-sm" });
           },
           $$slots: { default: true }
         });
@@ -8175,7 +8251,7 @@ function Thread_popover($$anchor, $$props) {
   }
   var button = $50.sibling(node_2, 2);
   var node_3 = $50.child(button);
-  X(node_3, { class: "icon-sm" });
+  X(node_3, { class: "cinder-icon-sm" });
   $50.reset(button);
   $50.reset(div_2);
   $50.reset(div_1);
@@ -8592,7 +8668,7 @@ function Export_actions($$anchor, $$props) {
         children: ($$anchor3, $$slotProps2) => {
           var fragment_2 = root_38();
           var node_3 = $57.first_child(fragment_2);
-          Copy(node_3, { class: "icon-sm" });
+          Copy(node_3, { class: "cinder-icon-sm" });
           $57.next(2);
           $57.append($$anchor3, fragment_2);
         },
@@ -8612,10 +8688,10 @@ function Export_actions($$anchor, $$props) {
                   var node_6 = $57.first_child(fragment_5);
                   {
                     var consequent_1 = ($$anchor6) => {
-                      Check($$anchor6, { class: "icon-sm export-icon-success" });
+                      Check($$anchor6, { class: "cinder-icon-sm export-icon-success" });
                     };
                     var alternate = ($$anchor6) => {
-                      File_text($$anchor6, { class: "icon-sm" });
+                      File_text($$anchor6, { class: "cinder-icon-sm" });
                     };
                     $57.if(node_6, ($$render) => {
                       if (copyState.copiedKey === "content")
@@ -8657,10 +8733,10 @@ function Export_actions($$anchor, $$props) {
               var node_9 = $57.first_child(fragment_8);
               {
                 var consequent_4 = ($$anchor5) => {
-                  Check($$anchor5, { class: "icon-sm export-icon-success" });
+                  Check($$anchor5, { class: "cinder-icon-sm export-icon-success" });
                 };
                 var alternate_1 = ($$anchor5) => {
-                  File_text($$anchor5, { class: "icon-sm" });
+                  File_text($$anchor5, { class: "cinder-icon-sm" });
                 };
                 $57.if(node_9, ($$render) => {
                   if (copyState.copiedKey === "summary")
@@ -8696,10 +8772,10 @@ function Export_actions($$anchor, $$props) {
               var node_12 = $57.first_child(fragment_11);
               {
                 var consequent_6 = ($$anchor5) => {
-                  Check($$anchor5, { class: "icon-sm export-icon-success" });
+                  Check($$anchor5, { class: "cinder-icon-sm export-icon-success" });
                 };
                 var alternate_2 = ($$anchor5) => {
-                  Git_branch($$anchor5, { class: "icon-sm" });
+                  Git_branch($$anchor5, { class: "cinder-icon-sm" });
                 };
                 $57.if(node_12, ($$render) => {
                   if (copyState.copiedKey === "diff")
@@ -8737,10 +8813,10 @@ function Export_actions($$anchor, $$props) {
                   var node_15 = $57.first_child(fragment_15);
                   {
                     var consequent_8 = ($$anchor6) => {
-                      Check($$anchor6, { class: "icon-sm export-icon-success" });
+                      Check($$anchor6, { class: "cinder-icon-sm export-icon-success" });
                     };
                     var alternate_3 = ($$anchor6) => {
-                      Message_square($$anchor6, { class: "icon-sm" });
+                      Message_square($$anchor6, { class: "cinder-icon-sm" });
                     };
                     $57.if(node_15, ($$render) => {
                       if (copyState.copiedKey === "comments")
@@ -8782,10 +8858,10 @@ function Export_actions($$anchor, $$props) {
               var node_18 = $57.first_child(fragment_18);
               {
                 var consequent_11 = ($$anchor5) => {
-                  Check($$anchor5, { class: "icon-sm export-icon-success" });
+                  Check($$anchor5, { class: "cinder-icon-sm export-icon-success" });
                 };
                 var alternate_4 = ($$anchor5) => {
-                  File_code($$anchor5, { class: "icon-sm" });
+                  File_code($$anchor5, { class: "cinder-icon-sm" });
                 };
                 $57.if(node_18, ($$render) => {
                   if (copyState.copiedKey === "json")
@@ -8944,7 +9020,7 @@ function Comment_sidebar($$anchor, $$props) {
   var aside = root19();
   var div = $60.child(aside);
   var node = $60.child(div);
-  Message_square(node, { class: "icon-sm" });
+  Message_square(node, { class: "cinder-icon-sm" });
   var span = $60.sibling(node, 4);
   var text8 = $60.child(span, true);
   $60.reset(span);
@@ -8972,10 +9048,10 @@ function Comment_sidebar($$anchor, $$props) {
             var node_2 = $60.first_child(fragment_1);
             {
               var consequent = ($$anchor4) => {
-                X($$anchor4, { class: "icon-sm" });
+                X($$anchor4, { class: "cinder-icon-sm" });
               };
               var alternate = ($$anchor4) => {
-                Plus($$anchor4, { class: "icon-sm" });
+                Plus($$anchor4, { class: "cinder-icon-sm" });
               };
               $60.if(node_2, ($$render) => {
                 if ($60.get(composingDocumentComment))
@@ -9010,7 +9086,7 @@ function Comment_sidebar($$anchor, $$props) {
             "aria-label": "Comment actions",
             showCaret: false,
             children: ($$anchor4, $$slotProps2) => {
-              Ellipsis($$anchor4, { class: "icon-sm" });
+              Ellipsis($$anchor4, { class: "cinder-icon-sm" });
             },
             $$slots: { default: true }
           });
@@ -9023,7 +9099,7 @@ function Comment_sidebar($$anchor, $$props) {
                 children: ($$anchor5, $$slotProps3) => {
                   var fragment_8 = root_94();
                   var node_6 = $60.first_child(fragment_8);
-                  Trash_2(node_6, { class: "icon-sm" });
+                  Trash_2(node_6, { class: "cinder-icon-sm" });
                   $60.next();
                   $60.append($$anchor5, fragment_8);
                 },
@@ -9095,7 +9171,7 @@ function Comment_sidebar($$anchor, $$props) {
       var div_3 = root_133();
       var div_4 = $60.child(div_3);
       var node_11 = $60.child(div_4);
-      File_text(node_11, { class: "icon-xs" });
+      File_text(node_11, { class: "cinder-icon-xs" });
       $60.next(2);
       $60.reset(div_4);
       var node_12 = $60.sibling(div_4, 2);
@@ -9129,7 +9205,7 @@ function Comment_sidebar($$anchor, $$props) {
         var button = root_162();
         var div_7 = $60.child(button);
         var node_15 = $60.child(div_7);
-        File_text(node_15, { class: "icon-xs" });
+        File_text(node_15, { class: "cinder-icon-xs" });
         $60.next(2);
         $60.reset(div_7);
         var p_1 = $60.sibling(div_7, 2);
@@ -9200,7 +9276,7 @@ var root_213 = $61.from_html(`<span class="cinder-_required-marker" aria-hidden=
 var root_117 = $61.from_html(`<label class="cinder-checkbox-field__label"> <!></label>`);
 var root_39 = $61.from_html(`<p class="cinder-checkbox-field__description"> </p>`);
 var root_45 = $61.from_html(`<p class="cinder-checkbox-field__error" aria-live="polite"> </p>`);
-var root20 = $61.from_html(`<div class="cinder-checkbox-field"><div class="cinder-checkbox-row"><span class="cinder-checkbox-field__control"><input/> <span class="cinder-checkbox-field__indicator" aria-hidden="true"></span></span> <!></div> <!> <!></div>`);
+var root20 = $61.from_html(`<div><div class="cinder-checkbox-row"><span class="cinder-checkbox-field__control"><input/> <span class="cinder-checkbox-field__indicator" aria-hidden="true"></span></span> <!></div> <!> <!></div>`);
 function Checkbox($$anchor, $$props) {
   const generatedId = $61.props_id();
   $61.push($$props, true);
@@ -9217,6 +9293,7 @@ function Checkbox($$anchor, $$props) {
     "error",
     "disabled",
     "required",
+    "fieldClass",
     "class",
     "aria-describedby",
     "aria-invalid",
@@ -9364,6 +9441,9 @@ function Checkbox($$anchor, $$props) {
     });
   }
   $61.reset(div);
+  $61.template_effect(($0) => $61.set_class(div, 1, $0), [
+    () => $61.clsx(classNames("cinder-checkbox-field", $$props.fieldClass))
+  ]);
   $61.append($$anchor, div);
   $61.pop();
 }
@@ -9979,7 +10059,7 @@ import * as $67 from "svelte/internal/client";
 import"svelte/internal/disclose-version";
 import * as $64 from "svelte/internal/client";
 var root_311 = $64.from_svg(`<path></path>`);
-var root_216 = $64.from_svg(`<svg class="icon-sm" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></svg>`);
+var root_216 = $64.from_svg(`<svg class="cinder-icon-sm" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></svg>`);
 var root_119 = $64.from_html(`<!> <!>`, 1);
 var root23 = $64.from_html(`<span><!></span>`);
 function Badge($$anchor, $$props) {
@@ -10336,7 +10416,7 @@ function Review_editor_controls($$anchor, $$props) {
       var node_1 = $67.first_child(fragment_1);
       {
         const leading = ($$anchor3) => {
-          Pencil($$anchor3, { class: "icon-xs" });
+          Pencil($$anchor3, { class: "cinder-icon-xs" });
         };
         let $0 = $67.derived(() => $$props.viewPanelIds?.editor);
         Segment(node_1, {
@@ -10360,7 +10440,7 @@ function Review_editor_controls($$anchor, $$props) {
           var node_3 = $67.first_child(fragment_3);
           {
             const leading = ($$anchor4) => {
-              Git_branch($$anchor4, { class: "icon-xs" });
+              Git_branch($$anchor4, { class: "cinder-icon-xs" });
             };
             let $0 = $67.derived(() => $$props.viewPanelIds?.diff);
             Segment(node_3, {
@@ -10380,7 +10460,7 @@ function Review_editor_controls($$anchor, $$props) {
           var node_4 = $67.sibling(node_3, 2);
           {
             const leading = ($$anchor4) => {
-              File_text($$anchor4, { class: "icon-xs" });
+              File_text($$anchor4, { class: "cinder-icon-xs" });
             };
             let $0 = $67.derived(() => $$props.viewPanelIds?.summary);
             Segment(node_4, {
@@ -10510,7 +10590,7 @@ function Review_editor_controls($$anchor, $$props) {
         children: ($$anchor3, $$slotProps) => {
           var fragment_10 = root_163();
           var node_12 = $67.first_child(fragment_10);
-          Rotate_ccw(node_12, { class: "icon-sm" });
+          Rotate_ccw(node_12, { class: "cinder-icon-sm" });
           $67.next(2);
           $67.append($$anchor3, fragment_10);
         },
@@ -10547,7 +10627,7 @@ function Review_editor_controls($$anchor, $$props) {
       children: ($$anchor2, $$slotProps) => {
         var fragment_11 = root_174();
         var node_14 = $67.first_child(fragment_11);
-        Message_square(node_14, { class: "icon-sm" });
+        Message_square(node_14, { class: "cinder-icon-sm" });
         var node_15 = $67.sibling(node_14, 2);
         Badge(node_15, {
           "aria-hidden": "true",
@@ -10933,10 +11013,10 @@ function Front_matter_header($$anchor, $$props) {
   var node = $72.child(span);
   {
     var consequent = ($$anchor2) => {
-      Chevron_down($$anchor2, { class: "icon-sm" });
+      Chevron_down($$anchor2, { class: "cinder-icon-sm" });
     };
     var alternate = ($$anchor2) => {
-      Chevron_right($$anchor2, { class: "icon-sm" });
+      Chevron_right($$anchor2, { class: "cinder-icon-sm" });
     };
     $72.if(node, ($$render) => {
       if (expanded())
@@ -10947,7 +11027,7 @@ function Front_matter_header($$anchor, $$props) {
   }
   $72.reset(span);
   var node_1 = $72.sibling(span, 2);
-  File_text(node_1, { class: "icon-sm" });
+  File_text(node_1, { class: "cinder-icon-sm" });
   var span_1 = $72.sibling(node_1, 2);
   var text11 = $72.child(span_1, true);
   $72.reset(span_1);
@@ -11810,7 +11890,7 @@ function Diff_toolbar($$anchor, $$props) {
         children: ($$anchor3, $$slotProps) => {
           var fragment_11 = root_176();
           var node_13 = $79.first_child(fragment_11);
-          Rotate_ccw(node_13, { class: "icon-sm" });
+          Rotate_ccw(node_13, { class: "cinder-icon-sm" });
           $79.next();
           $79.append($$anchor3, fragment_11);
         },
@@ -11837,7 +11917,7 @@ function Diff_toolbar($$anchor, $$props) {
         children: ($$anchor3, $$slotProps) => {
           var fragment_13 = root_194();
           var node_15 = $79.first_child(fragment_13);
-          Refresh_cw(node_15, { class: "icon-sm" });
+          Refresh_cw(node_15, { class: "cinder-icon-sm" });
           $79.next();
           $79.append($$anchor3, fragment_13);
         },
@@ -11867,7 +11947,7 @@ function Diff_toolbar($$anchor, $$props) {
             },
             "aria-label": "Previous change",
             children: ($$anchor4, $$slotProps) => {
-              Chevron_left($$anchor4, { class: "icon-sm" });
+              Chevron_left($$anchor4, { class: "cinder-icon-sm" });
             },
             $$slots: { default: true }
           });
@@ -11883,7 +11963,7 @@ function Diff_toolbar($$anchor, $$props) {
             },
             "aria-label": "Next change",
             children: ($$anchor4, $$slotProps) => {
-              Chevron_right($$anchor4, { class: "icon-sm" });
+              Chevron_right($$anchor4, { class: "cinder-icon-sm" });
             },
             $$slots: { default: true }
           });
@@ -12258,7 +12338,7 @@ ${match[1] ?? ""}
                 children: ($$anchor5, $$slotProps2) => {
                   var fragment_8 = root_1113();
                   var node_10 = $80.first_child(fragment_8);
-                  Rotate_ccw(node_10, { class: "icon-xs" });
+                  Rotate_ccw(node_10, { class: "cinder-icon-xs" });
                   $80.next();
                   $80.append($$anchor5, fragment_8);
                 },
@@ -14540,4 +14620,4 @@ export {
   Comment_composer as CommentComposer
 };
 
-//# debugId=A38858C24406F30164756E2164756E21
+//# debugId=10488A2BFC29CC0964756E2164756E21

package/dist/components/run-step-timeline/index.js

@@ -67,7 +67,7 @@ function classNames(...parts) {
 import"svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 var root_3 = $.from_svg(`<path></path>`);
-var root_2 = $.from_svg(`<svg class="icon-sm" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></svg>`);
+var root_2 = $.from_svg(`<svg class="cinder-icon-sm" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></svg>`);
 var root_1 = $.from_html(`<!> <!>`, 1);
 var root = $.from_html(`<span><!></span>`);
 function Badge($$anchor, $$props) {
@@ -1173,4 +1173,4 @@ export {
   Run_step_timeline as RunStepTimeline
 };
 
-//# debugId=F06CACD3819BEA2964756E2164756E21
+//# debugId=6E412EEA0E4C913D64756E2164756E21