@lostgradient/cinder 0.5.0 → 0.6.0

package/dist/components/team-section/index.js

@@ -1930,9 +1930,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) {
@@ -1940,13 +1941,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;
@@ -1954,8 +1993,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);
@@ -1968,26 +2032,31 @@ function createPortalAttachment(options = {}) {
       anchor.parentNode.insertBefore(element, anchor.nextSibling);
     }
     $.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();
         }
@@ -2040,7 +2109,12 @@ function Portal($$anchor, $$props) {
   $2.attach(div, () => createPortalAttachment({
     target: () => target(),
     disabled: () => disabled(),
-    inheritAttributes: () => inheritAttributes()
+    inheritAttributes: () => inheritAttributes(),
+    explicitAttributes: () => ({
+      dir: $$props.dir,
+      dataTheme: rest["data-theme"],
+      theme: rest["data-cinder-theme"]
+    })
   }));
   $2.append($$anchor, div);
   $2.pop();
@@ -2053,7 +2127,7 @@ import"@lostgradient/cinder/team-section/styles";
 
 // src/components/team-section/team-section.svelte
 import"svelte/internal/disclose-version";
-import * as $10 from "svelte/internal/client";
+import * as $12 from "svelte/internal/client";
 
 // src/components/avatar/avatar.svelte
 import"svelte/internal/disclose-version";
@@ -2775,15 +2849,160 @@ function Avatar_group($$anchor, $$props) {
 
 // src/components/card/card.svelte
 import"svelte/internal/disclose-version";
+import * as $10 from "svelte/internal/client";
+
+// ../../node_modules/lucide-svelte/dist/icons/circle-alert.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $9 from "svelte/internal/client";
+
+// ../../node_modules/lucide-svelte/dist/Icon.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
 import * as $8 from "svelte/internal/client";
-var root_13 = $8.from_html(`<div class="cinder-card__header"><!></div>`);
-var root_42 = $8.from_html(`<p class="cinder-card__description"> </p>`);
-var root_22 = $8.from_html(`<div class="cinder-card__header"><!> <!></div>`);
-var root_53 = $8.from_html(`<div class="cinder-card__footer"><!></div>`);
-var root5 = $8.from_html(`<div><!> <div class="cinder-card__body"><!></div> <!></div>`);
+
+// ../../node_modules/lucide-svelte/dist/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": 2,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+var defaultAttributes_default = defaultAttributes;
+
+// ../../node_modules/lucide-svelte/dist/Icon.svelte
+var root5 = $8.from_svg(`<svg><!><!></svg>`);
+function Icon($$anchor, $$props) {
+  const $$sanitized_props = $8.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const $$restProps = $8.legacy_rest_props($$sanitized_props, [
+    "name",
+    "color",
+    "size",
+    "strokeWidth",
+    "absoluteStrokeWidth",
+    "iconNode"
+  ]);
+  $8.push($$props, false);
+  let name = $8.prop($$props, "name", 8, undefined);
+  let color = $8.prop($$props, "color", 8, "currentColor");
+  let size3 = $8.prop($$props, "size", 8, 24);
+  let strokeWidth = $8.prop($$props, "strokeWidth", 8, 2);
+  let absoluteStrokeWidth = $8.prop($$props, "absoluteStrokeWidth", 8, false);
+  let iconNode = $8.prop($$props, "iconNode", 24, () => []);
+  const mergeClasses = (...classes) => classes.filter((className, index2, array) => {
+    return Boolean(className) && array.indexOf(className) === index2;
+  }).join(" ");
+  $8.init();
+  var svg = root5();
+  $8.attribute_effect(svg, ($0, $1) => ({
+    ...defaultAttributes_default,
+    ...$$restProps,
+    width: size3(),
+    height: size3(),
+    stroke: color(),
+    "stroke-width": $0,
+    class: $1
+  }), [
+    () => ($8.deep_read_state(absoluteStrokeWidth()), $8.deep_read_state(strokeWidth()), $8.deep_read_state(size3()), $8.untrack(() => absoluteStrokeWidth() ? Number(strokeWidth()) * 24 / Number(size3()) : strokeWidth())),
+    () => ($8.deep_read_state(name()), $8.deep_read_state($$sanitized_props), $8.untrack(() => mergeClasses("lucide-icon", "lucide", name() ? `lucide-${name()}` : "", $$sanitized_props.class)))
+  ]);
+  var node = $8.child(svg);
+  $8.each(node, 1, iconNode, $8.index, ($$anchor2, $$item) => {
+    var $$array = $8.derived(() => $8.to_array($8.get($$item), 2));
+    let tag = () => $8.get($$array)[0];
+    let attrs = () => $8.get($$array)[1];
+    var fragment = $8.comment();
+    var node_1 = $8.first_child(fragment);
+    $8.element(node_1, tag, true, ($$element, $$anchor3) => {
+      $8.attribute_effect($$element, () => ({ ...attrs() }));
+    });
+    $8.append($$anchor2, fragment);
+  });
+  var node_2 = $8.sibling(node);
+  $8.slot(node_2, $$props, "default", {}, null);
+  $8.reset(svg);
+  $8.append($$anchor, svg);
+  $8.pop();
+}
+
+// ../../node_modules/lucide-svelte/dist/icons/circle-alert.svelte
+function Circle_alert($$anchor, $$props) {
+  const $$sanitized_props = $9.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const iconNode = [
+    ["circle", { cx: "12", cy: "12", r: "10" }],
+    ["line", { x1: "12", x2: "12", y1: "8", y2: "12" }],
+    [
+      "line",
+      { x1: "12", x2: "12.01", y1: "16", y2: "16" }
+    ]
+  ];
+  Icon($$anchor, $9.spread_props({ name: "circle-alert" }, () => $$sanitized_props, {
+    get iconNode() {
+      return iconNode;
+    },
+    children: ($$anchor2, $$slotProps) => {
+      var fragment_1 = $9.comment();
+      var node = $9.first_child(fragment_1);
+      $9.slot(node, $$props, "default", {}, null);
+      $9.append($$anchor2, fragment_1);
+    },
+    $$slots: { default: true }
+  }));
+}
+// src/_internal/field-control.ts
+function describeId(fieldId, hasDescription) {
+  return hasDescription ? `${fieldId}-description` : undefined;
+}
+function errorId(fieldId, hasError) {
+  return hasError ? `${fieldId}-error` : undefined;
+}
+function composeDescribedBy(...ids) {
+  const filtered = ids.flatMap((id) => typeof id === "string" ? id.trim().split(/\s+/).filter(Boolean) : []);
+  const unique = Array.from(new Set(filtered));
+  return unique.length > 0 ? unique.join(" ") : undefined;
+}
+function ariaInvalid(hasError) {
+  return hasError ? "true" : undefined;
+}
+function resolveFieldControl(input) {
+  const resolvedId = input.id ?? input.context?.controlId ?? input.generatedId;
+  const defaultDescriptionId = describeId(resolvedId, input.hasDescription ?? false);
+  const defaultErrorId = errorId(resolvedId, input.hasError ?? false);
+  const ownDescriptionId = defaultDescriptionId && defaultDescriptionId === input.context?.descriptionId && input.localIdNamespace ? `${resolvedId}-${input.localIdNamespace}-description` : defaultDescriptionId;
+  const ownErrorId = defaultErrorId && defaultErrorId === input.context?.errorId && input.localIdNamespace ? `${resolvedId}-${input.localIdNamespace}-error` : defaultErrorId;
+  const descriptionId = ownDescriptionId ?? input.context?.descriptionId;
+  const resolvedErrorId = ownErrorId ?? input.context?.errorId;
+  const explicitInvalid = ariaInvalid(input.hasError ?? false);
+  const consumerInvalid = input.consumerInvalid === true ? "true" : input.consumerInvalid === false ? undefined : input.consumerInvalid ?? undefined;
+  return {
+    id: resolvedId,
+    ownDescriptionId,
+    ownErrorId,
+    descriptionId,
+    errorId: resolvedErrorId,
+    describedBy: composeDescribedBy(descriptionId, ...input.additionalDescribedBy ?? [], resolvedErrorId, input.context?.describedBy, input.consumerDescribedBy),
+    ariaInvalid: explicitInvalid ?? input.context?.invalid ?? consumerInvalid,
+    required: input.required ?? input.context?.required ?? false,
+    disabled: input.disabled ?? input.context?.disabled ?? false
+  };
+}
+
+// src/components/card/card.svelte
+var root_13 = $10.from_html(`<div class="cinder-card__header"><!></div>`);
+var root_32 = $10.from_html(`<span class="cinder-card__risk-icon" aria-hidden="true"><!></span>`);
+var root_53 = $10.from_html(`<p class="cinder-card__description"> </p>`);
+var root_22 = $10.from_html(`<div class="cinder-card__header"><div class="cinder-card__title-row"><!> <!></div> <!></div>`);
+var root_6 = $10.from_html(`<div class="cinder-card__footer"><!></div>`);
+var root6 = $10.from_html(`<div><!> <div class="cinder-card__body"><!></div> <!></div>`);
 function Card($$anchor, $$props) {
-  $8.push($$props, true);
-  let headingLevel = $8.prop($$props, "headingLevel", 3, 3), variant = $8.prop($$props, "variant", 3, "card"), bodyTone = $8.prop($$props, "bodyTone", 3, "default"), footerTone = $8.prop($$props, "footerTone", 3, "default"), edgeToEdgeOnMobile = $8.prop($$props, "edgeToEdgeOnMobile", 3, false), padding = $8.prop($$props, "padding", 3, "default"), rest = $8.rest_props($$props, [
+  const generatedId = $10.props_id();
+  $10.push($$props, true);
+  let headingLevel = $10.prop($$props, "headingLevel", 3, 3), variant = $10.prop($$props, "variant", 3, "card"), tone = $10.prop($$props, "tone", 3, "default"), bodyTone = $10.prop($$props, "bodyTone", 3, "default"), footerTone = $10.prop($$props, "footerTone", 3, "default"), edgeToEdgeOnMobile = $10.prop($$props, "edgeToEdgeOnMobile", 3, false), padding = $10.prop($$props, "padding", 3, "default"), rest = $10.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -2795,96 +3014,129 @@ function Card($$anchor, $$props) {
     "description",
     "footer",
     "variant",
+    "tone",
     "bodyTone",
     "footerTone",
     "edgeToEdgeOnMobile",
     "padding"
   ]);
-  const resolvedHeadingLevel = $8.derived(() => Number.isFinite(Math.trunc(Number(headingLevel()))) ? Math.min(6, Math.max(1, Math.trunc(Number(headingLevel())))) : 3);
-  const titleTag = $8.derived(() => `h${$8.get(resolvedHeadingLevel)}`);
-  var div = root5();
-  $8.attribute_effect(div, ($0) => ({
+  const resolvedHeadingLevel = $10.derived(() => Number.isFinite(Math.trunc(Number(headingLevel()))) ? Math.min(6, Math.max(1, Math.trunc(Number(headingLevel())))) : 3);
+  const titleTag = $10.derived(() => `h${$10.get(resolvedHeadingLevel)}`);
+  const hasGeneratedHeader = $10.derived(() => Boolean($$props.title && !$$props.header));
+  const titleId = $10.derived(() => $10.get(hasGeneratedHeader) ? `${generatedId}-title` : undefined);
+  const descriptionId = $10.derived(() => $10.get(hasGeneratedHeader) && $$props.description ? `${generatedId}-description` : undefined);
+  const hasExternalRole = $10.derived(() => typeof $$props.role === "string" && $$props.role.trim().length > 0);
+  const hasExternalLabel = $10.derived(() => typeof rest["aria-labelledby"] === "string" && rest["aria-labelledby"].trim().length > 0 || typeof rest["aria-label"] === "string" && rest["aria-label"].trim().length > 0);
+  const describedBy = $10.derived(() => composeDescribedBy($10.get(descriptionId), rest["aria-describedby"]));
+  const labelAttributes = $10.derived(() => $10.get(hasGeneratedHeader) ? {
+    ...!$10.get(hasExternalRole) ? { role: "group" } : {},
+    ...!$10.get(hasExternalLabel) ? { "aria-labelledby": $10.get(titleId) } : {},
+    ...$10.get(describedBy) ? { "aria-describedby": $10.get(describedBy) } : {}
+  } : {});
+  var div = root6();
+  $10.attribute_effect(div, ($0) => ({
+    ...rest,
     class: $0,
     "data-cinder-variant": variant(),
+    "data-cinder-tone": tone(),
     "data-cinder-edge-to-edge-mobile": edgeToEdgeOnMobile() ? "" : undefined,
-    ...rest
+    ...$10.get(labelAttributes)
   }), [() => classNames("cinder-card", $$props.class)]);
-  var node = $8.child(div);
+  var node = $10.child(div);
   {
     var consequent = ($$anchor2) => {
       var div_1 = root_13();
-      var node_1 = $8.child(div_1);
-      $8.snippet(node_1, () => $$props.header);
-      $8.reset(div_1);
-      $8.append($$anchor2, div_1);
+      var node_1 = $10.child(div_1);
+      $10.snippet(node_1, () => $$props.header);
+      $10.reset(div_1);
+      $10.append($$anchor2, div_1);
     };
-    var consequent_2 = ($$anchor2) => {
+    var consequent_3 = ($$anchor2) => {
       var div_2 = root_22();
-      var node_2 = $8.child(div_2);
-      $8.element(node_2, () => $8.get(titleTag), false, ($$element, $$anchor3) => {
-        $8.set_class($$element, 0, "cinder-card__title");
-        var text3 = $8.text();
-        $8.template_effect(() => $8.set_text(text3, $$props.title));
-        $8.append($$anchor3, text3);
-      });
-      var node_3 = $8.sibling(node_2, 2);
+      var div_3 = $10.child(div_2);
+      var node_2 = $10.child(div_3);
       {
         var consequent_1 = ($$anchor3) => {
-          var p = root_42();
-          var text_1 = $8.child(p, true);
-          $8.reset(p);
-          $8.template_effect(() => $8.set_text(text_1, $$props.description));
-          $8.append($$anchor3, p);
+          var span = root_32();
+          var node_3 = $10.child(span);
+          Circle_alert(node_3, { size: 18, strokeWidth: 2.25 });
+          $10.reset(span);
+          $10.append($$anchor3, span);
         };
-        $8.if(node_3, ($$render) => {
-          if ($$props.description)
+        $10.if(node_2, ($$render) => {
+          if (tone() === "danger")
             $$render(consequent_1);
         });
       }
-      $8.reset(div_2);
-      $8.append($$anchor2, div_2);
+      var node_4 = $10.sibling(node_2, 2);
+      $10.element(node_4, () => $10.get(titleTag), false, ($$element, $$anchor3) => {
+        $10.attribute_effect($$element, () => ({ id: $10.get(titleId), class: "cinder-card__title" }));
+        var text3 = $10.text();
+        $10.template_effect(() => $10.set_text(text3, $$props.title));
+        $10.append($$anchor3, text3);
+      });
+      $10.reset(div_3);
+      var node_5 = $10.sibling(div_3, 2);
+      {
+        var consequent_2 = ($$anchor3) => {
+          var p = root_53();
+          var text_1 = $10.child(p, true);
+          $10.reset(p);
+          $10.template_effect(() => {
+            $10.set_attribute(p, "id", $10.get(descriptionId));
+            $10.set_text(text_1, $$props.description);
+          });
+          $10.append($$anchor3, p);
+        };
+        $10.if(node_5, ($$render) => {
+          if ($$props.description)
+            $$render(consequent_2);
+        });
+      }
+      $10.reset(div_2);
+      $10.append($$anchor2, div_2);
     };
-    $8.if(node, ($$render) => {
+    $10.if(node, ($$render) => {
       if ($$props.header)
         $$render(consequent);
       else if ($$props.title)
-        $$render(consequent_2, 1);
+        $$render(consequent_3, 1);
     });
   }
-  var div_3 = $8.sibling(node, 2);
-  var node_4 = $8.child(div_3);
-  $8.snippet(node_4, () => $$props.children);
-  $8.reset(div_3);
-  var node_5 = $8.sibling(div_3, 2);
+  var div_4 = $10.sibling(node, 2);
+  var node_6 = $10.child(div_4);
+  $10.snippet(node_6, () => $$props.children);
+  $10.reset(div_4);
+  var node_7 = $10.sibling(div_4, 2);
   {
-    var consequent_3 = ($$anchor2) => {
-      var div_4 = root_53();
-      var node_6 = $8.child(div_4);
-      $8.snippet(node_6, () => $$props.footer);
-      $8.reset(div_4);
-      $8.template_effect(() => $8.set_attribute(div_4, "data-cinder-tone", footerTone()));
-      $8.append($$anchor2, div_4);
+    var consequent_4 = ($$anchor2) => {
+      var div_5 = root_6();
+      var node_8 = $10.child(div_5);
+      $10.snippet(node_8, () => $$props.footer);
+      $10.reset(div_5);
+      $10.template_effect(() => $10.set_attribute(div_5, "data-cinder-tone", footerTone()));
+      $10.append($$anchor2, div_5);
     };
-    $8.if(node_5, ($$render) => {
+    $10.if(node_7, ($$render) => {
       if ($$props.footer)
-        $$render(consequent_3);
+        $$render(consequent_4);
     });
   }
-  $8.reset(div);
-  $8.template_effect(() => {
-    $8.set_attribute(div_3, "data-cinder-tone", bodyTone());
-    $8.set_attribute(div_3, "data-cinder-padding", padding());
+  $10.reset(div);
+  $10.template_effect(() => {
+    $10.set_attribute(div_4, "data-cinder-tone", bodyTone());
+    $10.set_attribute(div_4, "data-cinder-padding", padding());
   });
-  $8.append($$anchor, div);
-  $8.pop();
+  $10.append($$anchor, div);
+  $10.pop();
 }
 
 // src/components/container/container.svelte
 import"svelte/internal/disclose-version";
-import * as $9 from "svelte/internal/client";
+import * as $11 from "svelte/internal/client";
 function Container($$anchor, $$props) {
-  $9.push($$props, true);
-  let centered = $9.prop($$props, "centered", 3, true), padded = $9.prop($$props, "padded", 3, true), as = $9.prop($$props, "as", 3, "div"), rest = $9.rest_props($$props, [
+  $11.push($$props, true);
+  let centered = $11.prop($$props, "centered", 3, true), padded = $11.prop($$props, "padded", 3, true), as = $11.prop($$props, "as", 3, "div"), rest = $11.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -2895,37 +3147,37 @@ function Container($$anchor, $$props) {
     "class",
     "children"
   ]);
-  var fragment = $9.comment();
-  var node = $9.first_child(fragment);
-  $9.element(node, as, false, ($$element, $$anchor2) => {
-    $9.attribute_effect($$element, ($0) => ({
+  var fragment = $11.comment();
+  var node = $11.first_child(fragment);
+  $11.element(node, as, false, ($$element, $$anchor2) => {
+    $11.attribute_effect($$element, ($0) => ({
       ...rest,
       class: $0,
       "data-cinder-max-width": $$props.maxWidth,
       "data-cinder-centered": centered() ? "" : undefined,
       "data-cinder-padded": padded() ? "" : undefined
     }), [() => classNames("cinder-container", $$props.class)]);
-    var fragment_1 = $9.comment();
-    var node_1 = $9.first_child(fragment_1);
-    $9.snippet(node_1, () => $$props.children);
-    $9.append($$anchor2, fragment_1);
+    var fragment_1 = $11.comment();
+    var node_1 = $11.first_child(fragment_1);
+    $11.snippet(node_1, () => $$props.children);
+    $11.append($$anchor2, fragment_1);
   });
-  $9.append($$anchor, fragment);
-  $9.pop();
+  $11.append($$anchor, fragment);
+  $11.pop();
 }
 
 // src/components/team-section/team-section.svelte
-var root_43 = $10.from_html(`<p class="cinder-team-section__description"> </p>`);
-var root_32 = $10.from_html(`<header class="cinder-team-section__header"><h2 class="cinder-team-section__title"> </h2> <!></header>`);
-var root_54 = $10.from_html(`<div class="cinder-team-section__summary"><!></div>`);
-var root_8 = $10.from_html(`<p class="cinder-team-section__bio"> </p>`);
-var root_9 = $10.from_html(`<a class="cinder-team-section__link">View profile</a>`);
-var root_7 = $10.from_html(`<div class="cinder-team-section__person"><!> <div class="cinder-team-section__meta"><p class="cinder-team-section__name"> </p> <p class="cinder-team-section__role"> </p></div></div> <!> <!>`, 1);
-var root_6 = $10.from_html(`<li class="cinder-team-section__item"><!></li>`);
-var root_23 = $10.from_html(`<div class="cinder-team-section__inner"><!> <!> <ul class="cinder-team-section__list"></ul></div>`);
+var root_42 = $12.from_html(`<p class="cinder-team-section__description"> </p>`);
+var root_33 = $12.from_html(`<header class="cinder-team-section__header"><h2 class="cinder-team-section__title"> </h2> <!></header>`);
+var root_54 = $12.from_html(`<div class="cinder-team-section__summary"><!></div>`);
+var root_8 = $12.from_html(`<p class="cinder-team-section__bio"> </p>`);
+var root_9 = $12.from_html(`<a class="cinder-team-section__link">View profile</a>`);
+var root_7 = $12.from_html(`<div class="cinder-team-section__person"><!> <div class="cinder-team-section__meta"><p class="cinder-team-section__name"> </p> <p class="cinder-team-section__role"> </p></div></div> <!> <!>`, 1);
+var root_62 = $12.from_html(`<li class="cinder-team-section__item"><!></li>`);
+var root_23 = $12.from_html(`<div class="cinder-team-section__inner"><!> <!> <ul class="cinder-team-section__list"></ul></div>`);
 function Team_section($$anchor, $$props) {
-  $10.push($$props, true);
-  let as = $10.prop($$props, "as", 3, "section"), columns = $10.prop($$props, "columns", 3, 3), showAvatarGroup = $10.prop($$props, "showAvatarGroup", 3, false), avatarGroupLabel = $10.prop($$props, "avatarGroupLabel", 3, "Team members"), maxWidth = $10.prop($$props, "maxWidth", 3, "wide"), rest = $10.rest_props($$props, [
+  $12.push($$props, true);
+  let as = $12.prop($$props, "as", 3, "section"), columns = $12.prop($$props, "columns", 3, 3), showAvatarGroup = $12.prop($$props, "showAvatarGroup", 3, false), avatarGroupLabel = $12.prop($$props, "avatarGroupLabel", 3, "Team members"), maxWidth = $12.prop($$props, "maxWidth", 3, "wide"), rest = $12.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -2939,14 +3191,14 @@ function Team_section($$anchor, $$props) {
     "maxWidth",
     "class"
   ]);
-  const avatarItems = $10.derived(() => $$props.members.map((member) => member.avatarSrc ? { name: member.name, src: member.avatarSrc } : { name: member.name }));
+  const avatarItems = $12.derived(() => $$props.members.map((member) => member.avatarSrc ? { name: member.name, src: member.avatarSrc } : { name: member.name }));
   function avatarProps(name, src) {
     return src ? { name, src } : { name };
   }
-  var fragment = $10.comment();
-  var node = $10.first_child(fragment);
-  $10.element(node, as, false, ($$element, $$anchor2) => {
-    $10.attribute_effect($$element, ($0, $1) => ({ class: $0, "data-cinder-columns": $1, ...rest }), [
+  var fragment = $12.comment();
+  var node = $12.first_child(fragment);
+  $12.element(node, as, false, ($$element, $$anchor2) => {
+    $12.attribute_effect($$element, ($0, $1) => ({ class: $0, "data-cinder-columns": $1, ...rest }), [
       () => classNames("cinder-team-section", $$props.class),
       () => String(columns())
     ]);
@@ -2956,129 +3208,129 @@ function Team_section($$anchor, $$props) {
       },
       children: ($$anchor3, $$slotProps) => {
         var div = root_23();
-        var node_1 = $10.child(div);
+        var node_1 = $12.child(div);
         {
           var consequent_1 = ($$anchor4) => {
-            var header = root_32();
-            var h2 = $10.child(header);
-            var text3 = $10.child(h2, true);
-            $10.reset(h2);
-            var node_2 = $10.sibling(h2, 2);
+            var header = root_33();
+            var h2 = $12.child(header);
+            var text3 = $12.child(h2, true);
+            $12.reset(h2);
+            var node_2 = $12.sibling(h2, 2);
             {
               var consequent = ($$anchor5) => {
-                var p = root_43();
-                var text_1 = $10.child(p, true);
-                $10.reset(p);
-                $10.template_effect(() => $10.set_text(text_1, $$props.description));
-                $10.append($$anchor5, p);
+                var p = root_42();
+                var text_1 = $12.child(p, true);
+                $12.reset(p);
+                $12.template_effect(() => $12.set_text(text_1, $$props.description));
+                $12.append($$anchor5, p);
               };
-              $10.if(node_2, ($$render) => {
+              $12.if(node_2, ($$render) => {
                 if ($$props.description)
                   $$render(consequent);
               });
             }
-            $10.reset(header);
-            $10.template_effect(() => $10.set_text(text3, $$props.title));
-            $10.append($$anchor4, header);
+            $12.reset(header);
+            $12.template_effect(() => $12.set_text(text3, $$props.title));
+            $12.append($$anchor4, header);
           };
-          $10.if(node_1, ($$render) => {
+          $12.if(node_1, ($$render) => {
             if ($$props.title)
               $$render(consequent_1);
           });
         }
-        var node_3 = $10.sibling(node_1, 2);
+        var node_3 = $12.sibling(node_1, 2);
         {
           var consequent_2 = ($$anchor4) => {
             var div_1 = root_54();
-            var node_4 = $10.child(div_1);
+            var node_4 = $12.child(div_1);
             Avatar_group(node_4, {
               get avatars() {
-                return $10.get(avatarItems);
+                return $12.get(avatarItems);
               },
               get label() {
                 return avatarGroupLabel();
               },
               maxVisible: 6
             });
-            $10.reset(div_1);
-            $10.append($$anchor4, div_1);
+            $12.reset(div_1);
+            $12.append($$anchor4, div_1);
           };
-          $10.if(node_3, ($$render) => {
+          $12.if(node_3, ($$render) => {
             if (showAvatarGroup())
               $$render(consequent_2);
           });
         }
-        var ul = $10.sibling(node_3, 2);
-        $10.each(ul, 23, () => $$props.members, (member, index) => `${member.name}-${index}`, ($$anchor4, member) => {
-          var li = root_6();
-          var node_5 = $10.child(li);
+        var ul = $12.sibling(node_3, 2);
+        $12.each(ul, 23, () => $$props.members, (member, index2) => `${member.name}-${index2}`, ($$anchor4, member) => {
+          var li = root_62();
+          var node_5 = $12.child(li);
           Card(node_5, {
             children: ($$anchor5, $$slotProps2) => {
               var fragment_2 = root_7();
-              var div_2 = $10.first_child(fragment_2);
-              var node_6 = $10.child(div_2);
+              var div_2 = $12.first_child(fragment_2);
+              var node_6 = $12.child(div_2);
               {
-                let $0 = $10.derived(() => avatarProps($10.get(member).name, $10.get(member).avatarSrc));
-                Avatar(node_6, $10.spread_props(() => $10.get($0), { size: "lg" }));
+                let $0 = $12.derived(() => avatarProps($12.get(member).name, $12.get(member).avatarSrc));
+                Avatar(node_6, $12.spread_props(() => $12.get($0), { size: "lg" }));
               }
-              var div_3 = $10.sibling(node_6, 2);
-              var p_1 = $10.child(div_3);
-              var text_2 = $10.child(p_1, true);
-              $10.reset(p_1);
-              var p_2 = $10.sibling(p_1, 2);
-              var text_3 = $10.child(p_2, true);
-              $10.reset(p_2);
-              $10.reset(div_3);
-              $10.reset(div_2);
-              var node_7 = $10.sibling(div_2, 2);
+              var div_3 = $12.sibling(node_6, 2);
+              var p_1 = $12.child(div_3);
+              var text_2 = $12.child(p_1, true);
+              $12.reset(p_1);
+              var p_2 = $12.sibling(p_1, 2);
+              var text_3 = $12.child(p_2, true);
+              $12.reset(p_2);
+              $12.reset(div_3);
+              $12.reset(div_2);
+              var node_7 = $12.sibling(div_2, 2);
               {
                 var consequent_3 = ($$anchor6) => {
                   var p_3 = root_8();
-                  var text_4 = $10.child(p_3, true);
-                  $10.reset(p_3);
-                  $10.template_effect(() => $10.set_text(text_4, $10.get(member).bio));
-                  $10.append($$anchor6, p_3);
+                  var text_4 = $12.child(p_3, true);
+                  $12.reset(p_3);
+                  $12.template_effect(() => $12.set_text(text_4, $12.get(member).bio));
+                  $12.append($$anchor6, p_3);
                 };
-                $10.if(node_7, ($$render) => {
-                  if ($10.get(member).bio)
+                $12.if(node_7, ($$render) => {
+                  if ($12.get(member).bio)
                     $$render(consequent_3);
                 });
               }
-              var node_8 = $10.sibling(node_7, 2);
+              var node_8 = $12.sibling(node_7, 2);
               {
                 var consequent_4 = ($$anchor6) => {
                   var a = root_9();
-                  $10.template_effect(() => {
-                    $10.set_attribute(a, "href", $10.get(member).href);
-                    $10.set_attribute(a, "aria-label", `View ${$10.get(member).name}'s profile`);
+                  $12.template_effect(() => {
+                    $12.set_attribute(a, "href", $12.get(member).href);
+                    $12.set_attribute(a, "aria-label", `View ${$12.get(member).name}'s profile`);
                   });
-                  $10.append($$anchor6, a);
+                  $12.append($$anchor6, a);
                 };
-                $10.if(node_8, ($$render) => {
-                  if ($10.get(member).href)
+                $12.if(node_8, ($$render) => {
+                  if ($12.get(member).href)
                     $$render(consequent_4);
                 });
               }
-              $10.template_effect(() => {
-                $10.set_text(text_2, $10.get(member).name);
-                $10.set_text(text_3, $10.get(member).role);
+              $12.template_effect(() => {
+                $12.set_text(text_2, $12.get(member).name);
+                $12.set_text(text_3, $12.get(member).role);
               });
-              $10.append($$anchor5, fragment_2);
+              $12.append($$anchor5, fragment_2);
             },
             $$slots: { default: true }
           });
-          $10.reset(li);
-          $10.append($$anchor4, li);
+          $12.reset(li);
+          $12.append($$anchor4, li);
         });
-        $10.reset(ul);
-        $10.reset(div);
-        $10.append($$anchor3, div);
+        $12.reset(ul);
+        $12.reset(div);
+        $12.append($$anchor3, div);
       },
       $$slots: { default: true }
     });
   });
-  $10.append($$anchor, fragment);
-  $10.pop();
+  $12.append($$anchor, fragment);
+  $12.pop();
 }
 
 // src/components/team-section/index.ts
@@ -3088,4 +3340,4 @@ export {
   Team_section as TeamSection
 };
 
-//# debugId=E331409863F5561164756E2164756E21
+//# debugId=097802C17C1D0CD864756E2164756E21