@solibo/solibo-ui 1.0.22 → 1.0.23

package/dist/assets/index18.css

@@ -1 +1 @@
-._header_xu8zs_1{color:var(--colors-semantic-content-secondary);display:grid;font-weight:var(--font-font-weight-bold);gap:var(--shape-spacing-3xs) var(--shape-spacing-xs);grid-template-columns:minmax(25ch,1fr) minmax(0,-webkit-max-content);grid-template-columns:minmax(25ch,1fr) minmax(0,max-content);margin:var(--shape-spacing-md) 0;position:relative}._header_xu8zs_1>*{grid-column:1;min-width:0}._header_xu8zs_1 :is(h1,h2,h3,h4,h5,h6){color:var(--colors-semantic-content-primary);margin:0;overflow-wrap:break-word}._header_xu8zs_1 h1{font-size:var(--typography-font-sizes-h1);letter-spacing:-1.2px}._header_xu8zs_1 h2,._header_xu8zs_1 sup{font-size:var(--typography-font-sizes-h2)}._header_xu8zs_1 h3{font-size:var(--typography-font-sizes-h3)}._header_xu8zs_1 p{font-size:var(--typography-font-sizes-body-lg);font-weight:var(--font-font-weight-regular);margin:var(--shape-spacing-xs) 0 0!important}._header_xu8zs_1 sub{font-weight:var(--font-font-weight-regular)}._header_xu8zs_1 sub[data-clipboard]{align-items:center;cursor:copy;display:flex;gap:var(--scale-8);padding:var(--scale-8) 0}._header_xu8zs_1 sub,._header_xu8zs_1 sup{font-size:var(--typography-font-sizes-body-sm)}._header_xu8zs_1:has([data-component=badge]) h1,._header_xu8zs_1:has([data-component=badge]) h2,._header_xu8zs_1:has([data-component=badge]) h3,._header_xu8zs_1:has([data-component=badge]) h4{display:inline-block}._header_xu8zs_1 [data-component=button],._header_xu8zs_1 [data-component=controls],._header_xu8zs_1 [data-component=popover],._header_xu8zs_1 [data-component=toggle]{grid-column:2;grid-row:1 / span 2;height:-webkit-min-content;height:-moz-min-content;height:min-content;min-width:0;overflow-wrap:anywhere}._header_xu8zs_1 [data-component=controls]{margin-top:0}@media (width < 480px){._header_xu8zs_1{grid-template-columns:1fr}._header_xu8zs_1>[data-component=button],._header_xu8zs_1 [data-component=controls],._header_xu8zs_1 [data-component=toggle]{grid-column:1;grid-row:auto;margin-top:var(--shape-spacing-md)}}@media (width >= 960px){._jumbo_xu8zs_96{margin:calc(var(--utils-tokens-unit) * 3) 0}._jumbo_xu8zs_96 h1{font-size:var(--typography-font-sizes-display-sm)}}
+._header_1gh64_1{color:var(--colors-semantic-content-secondary);display:grid;font-weight:var(--font-font-weight-bold);gap:var(--shape-spacing-3xs) var(--shape-spacing-xs);grid-template-columns:1fr;margin:var(--shape-spacing-md) 0;position:relative}._header_1gh64_1>*{grid-column:1;min-width:0}._header_1gh64_1 :is(h1,h2,h3,h4,h5,h6){color:var(--colors-semantic-content-primary);margin:0;overflow-wrap:break-word}._header_1gh64_1 h1{font-size:var(--typography-font-sizes-h1);letter-spacing:-1.2px}._header_1gh64_1 h2,._header_1gh64_1 sup{font-size:var(--typography-font-sizes-h2)}._header_1gh64_1 h3{font-size:var(--typography-font-sizes-h3)}._header_1gh64_1 p{font-size:var(--typography-font-sizes-body-lg);font-weight:var(--font-font-weight-regular);margin:var(--shape-spacing-xs) 0 0!important}._header_1gh64_1 sub{font-weight:var(--font-font-weight-regular)}._header_1gh64_1 sub[data-clipboard]{align-items:center;cursor:copy;display:flex;gap:var(--scale-8);padding:var(--scale-8) 0}._header_1gh64_1 sub,._header_1gh64_1 sup{font-size:var(--typography-font-sizes-body-sm)}._header_1gh64_1:has([data-component=badge]) h1,._header_1gh64_1:has([data-component=badge]) h2,._header_1gh64_1:has([data-component=badge]) h3,._header_1gh64_1:has([data-component=badge]) h4{display:inline-block}._header_1gh64_1 ._controls_1gh64_67{display:grid;grid-template-columns:minmax(25ch,1fr) minmax(0,-webkit-max-content);grid-template-columns:minmax(25ch,1fr) minmax(0,max-content);flex:1 0 auto;gap:var(--shape-spacing-xs);justify-content:space-between;max-width:100%}._header_1gh64_1 ._controls_1gh64_67 h1,._header_1gh64_1 ._controls_1gh64_67 h2,._header_1gh64_1 ._controls_1gh64_67 h3,._header_1gh64_1 ._controls_1gh64_67 h4,._header_1gh64_1 ._controls_1gh64_67 h5,._header_1gh64_1 ._controls_1gh64_67 h6,._header_1gh64_1 ._controls_1gh64_67 sub,._header_1gh64_1 ._controls_1gh64_67 sup{grid-column:1}._header_1gh64_1 ._controls_1gh64_67 [data-component=controls]{align-self:center;grid-column:2;height:-webkit-max-content;height:-moz-max-content;height:max-content;margin-top:0}._header_1gh64_1 ._cta_1gh64_94{display:flex;flex-wrap:wrap;gap:var(--shape-spacing-xs);justify-content:space-between}._header_1gh64_1 ._cta_1gh64_94 [data-component=button]{height:-webkit-max-content;height:-moz-max-content;height:max-content;align-self:center}._header_1gh64_1 ._header-content_1gh64_106{display:flex;flex-direction:column;gap:var(--shape-spacing-3xs)}@media (width < 480px){._header_1gh64_1 ._cta_1gh64_94{flex-direction:column}._header_1gh64_1 ._cta_1gh64_94 [data-component=button]{width:100%}._header_1gh64_1 ._controls_1gh64_67:not(:has([data-adaptive=true])){grid-template-columns:1fr;gap:var(--shape-spacing-3xs)}._header_1gh64_1 ._controls_1gh64_67:not(:has([data-adaptive=true])) [data-component=controls]{grid-column:1;margin-top:var(--shape-spacing-md)}}@media (width >= 960px){._jumbo_1gh64_136{margin:calc(var(--utils-tokens-unit) * 3) 0}._jumbo_1gh64_136 h1{font-size:var(--typography-font-sizes-display-sm)}}

package/dist/assets/index24.css

@@ -1 +1 @@
-._aside_1162s_3 section{padding:var(--utils-tokens-unit) 0}._sidebar_1162s_9{border-right:var(--scale-1) solid var(--colors-semantic-border-default);height:100vh;overflow:hidden auto;padding:var(--shape-spacing-xl) var(--shape-spacing-md) var(--shape-spacing-xl) var(--shape-spacing-sm)}._sidebar_1162s_9 header{margin-bottom:var(--shape-spacing-lg);margin-top:0}._sidebar_1162s_9 [data-sidebar-toggle]{display:none}@supports (-moz-appearance: none){._sidebar_1162s_9{scrollbar-color:var(--colors-semantic-border-default) transparent;scrollbar-width:thin}}@supports selector(::-webkit-scrollbar){._sidebar_1162s_9::-webkit-scrollbar{height:var(--scale-2);width:var(--scale-2)}._sidebar_1162s_9::-webkit-scrollbar-track{background-color:transparent}._sidebar_1162s_9::-webkit-scrollbar-thumb{background-color:var(--colors-semantic-border-default);border-radius:var(--scale-4)}}@media (width <= 768px){._sidebar_1162s_9{background-color:var(--colors-semantic-primary-primary-subtle);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;overscroll-behavior-y:auto;padding:var(--shape-spacing-md);position:relative;top:0;transition:all var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function);width:100vw;z-index:2}._sidebar_1162s_9>nav{display:none}._sidebar_1162s_9>header{margin-bottom:0}._sidebar_1162s_9 [data-sidebar-toggle]{position:relative;display:block;float:right;margin-top:var(--shape-spacing-2xs);padding:0}._sidebar_1162s_9 [data-sidebar-toggle]:after{content:"";inset:var(--utils-tokens-negative-unit);position:absolute}._sidebar_1162s_9._open_1162s_57{background-color:var(--colors-semantic-bg-page);display:block;height:calc(100vh - var(--shape-spacing-3xl))}._sidebar_1162s_9._open_1162s_57>header{margin-bottom:var(--shape-spacing-md)}._sidebar_1162s_9._open_1162s_57>nav{display:block}}._sticky_1162s_73{position:-webkit-sticky;position:sticky;top:0}
+._aside_1u3pz_3 section{padding:var(--utils-tokens-unit) 0}._sidebar_1u3pz_9{border-right:var(--scale-1) solid var(--colors-semantic-border-default);height:100vh;overflow:hidden auto;padding:var(--shape-spacing-xl) var(--shape-spacing-md) var(--shape-spacing-xl) var(--shape-spacing-sm)}._sidebar_1u3pz_9 header{margin-bottom:var(--shape-spacing-lg);margin-top:0}._sidebar_1u3pz_9 [data-sidebar-toggle]{display:none}@supports (-moz-appearance: none){._sidebar_1u3pz_9{scrollbar-color:var(--colors-semantic-border-default) transparent;scrollbar-width:thin}}@supports selector(::-webkit-scrollbar){._sidebar_1u3pz_9::-webkit-scrollbar{height:var(--scale-2);width:var(--scale-2)}._sidebar_1u3pz_9::-webkit-scrollbar-track{background-color:transparent}._sidebar_1u3pz_9::-webkit-scrollbar-thumb{background-color:var(--colors-semantic-border-default);border-radius:var(--scale-4)}}@media (width <= 1024px){._sidebar_1u3pz_9{height:calc(100vh - var(--utils-tokens-unit) * 4)}}@media (width <= 768px){._sidebar_1u3pz_9{background-color:var(--colors-semantic-primary-primary-subtle);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;overscroll-behavior-y:auto;padding:var(--shape-spacing-md);position:relative;top:0;transition:all var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function);width:100vw;z-index:2}._sidebar_1u3pz_9>nav{display:none}._sidebar_1u3pz_9>header{margin-bottom:0}._sidebar_1u3pz_9 [data-sidebar-toggle]{position:relative;display:block;float:right;margin-top:var(--shape-spacing-2xs);padding:0}._sidebar_1u3pz_9 [data-sidebar-toggle]:after{content:"";inset:var(--utils-tokens-negative-unit);position:absolute}._sidebar_1u3pz_9._open_1u3pz_62{background-color:var(--colors-semantic-bg-page);display:block;height:calc(100vh - var(--shape-spacing-3xl))}._sidebar_1u3pz_9._open_1u3pz_62>header{margin-bottom:var(--shape-spacing-md)}._sidebar_1u3pz_9._open_1u3pz_62>nav{display:block}}._sticky_1u3pz_78{position:-webkit-sticky;position:sticky;top:0}

package/dist/assets/index34.css

@@ -1 +1 @@
-@keyframes _reveal_1bkuq_1{0%{opacity:0;transform:translateY(100%) translate(-50%)}to{opacity:1;transform:translateY(0) translate(-50%)}}._controls_1bkuq_13{align-items:center;display:flex;flex-wrap:wrap;gap:var(--shape-spacing-md)}._controls_1bkuq_13>*{flex-shrink:0}._controls_1bkuq_13>[data-component=button]{white-space:nowrap}._default_1bkuq_28{justify-content:flex-end;margin-top:var(--shape-spacing-md);width:100%}@media (width <= 768px){._default_1bkuq_28{flex-direction:column}._default_1bkuq_28 [data-component=button]{width:100%}}._inline_1bkuq_43{justify-content:flex-end;margin-left:auto}._embedded_1bkuq_48,._fixed_1bkuq_49{background-color:var(--colors-semantic-bg-surface);border-radius:var(--shape-border-radius-radius-lg);box-shadow:var(--shape-box-shadow-xs-position-x) var(--shape-box-shadow-xs-position-y) var(--shape-box-shadow-xs-blur) var(--shape-box-shadow-xs-spread) var(--shape-box-shadow-xs-color);gap:var(--shape-spacing-2xs);justify-content:center;padding:var(--shape-spacing-2xs);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}._embedded_1bkuq_48._adaptive_1bkuq_60,._fixed_1bkuq_49._adaptive_1bkuq_60{flex-wrap:nowrap}._embedded_1bkuq_48>[data-component=button],._embedded_1bkuq_48 ._measurement_1bkuq_65>[data-component=button],._fixed_1bkuq_49>[data-component=button],._fixed_1bkuq_49 ._measurement_1bkuq_65>[data-component=button]{background-color:transparent;border:none;box-shadow:none;color:var(--colors-semantic-content-secondary)}._embedded_1bkuq_48>[data-component=button]:hover,._embedded_1bkuq_48 ._measurement_1bkuq_65>[data-component=button]:hover,._fixed_1bkuq_49>[data-component=button]:hover,._fixed_1bkuq_49 ._measurement_1bkuq_65>[data-component=button]:hover{background-color:var(--colors-semantic-interactive-hover-subtle)}._embedded_1bkuq_48._adaptive_1bkuq_60{max-width:100%}._fixed_1bkuq_49{animation:_reveal_1bkuq_1 var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function) var(--utils-tokens-transition-delay) both;border-left:var(--scale-4) solid var(--colors-semantic-border-focus);bottom:var(--shape-spacing-2xl);box-shadow:var(--shape-box-shadow-md-position-x) var(--shape-box-shadow-md-position-y) var(--shape-box-shadow-md-blur) var(--shape-box-shadow-md-spread) var(--colors-box-shadow-heavy);left:50%;position:fixed;will-change:opacity,transform;z-index:4}._fixed_1bkuq_49._adaptive_1bkuq_60{max-width:calc(100dvw - var(--shape-spacing-2xl))}._fixed_1bkuq_49>._non-button-content_1bkuq_99{align-items:center;border-right:1px solid var(--colors-semantic-border-default);display:inline-flex;padding:var(--shape-spacing-2xs) var(--shape-spacing-md);white-space:nowrap}._fixed_1bkuq_49>._non-button-content_1bkuq_99 [data-component=link]{margin-right:var(--shape-spacing-xs)}._measurement_1bkuq_65{align-items:center;display:flex;left:0;pointer-events:none;position:fixed;top:0;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}._measurement_1bkuq_65>*{flex-shrink:0;white-space:nowrap}._overflow-trigger_1bkuq_128{display:inline-flex;flex:none}
+@keyframes _reveal_t1re6_1{0%{opacity:0;transform:translateY(100%) translate(-50%)}to{opacity:1;transform:translateY(0) translate(-50%)}}._controls_t1re6_13{align-items:center;display:flex;flex-wrap:wrap;gap:var(--shape-spacing-md)}._controls_t1re6_13>*{flex-shrink:0}._controls_t1re6_13>[data-component=button]{white-space:nowrap}._default_t1re6_28{justify-content:flex-end;margin-top:var(--shape-spacing-md);width:100%}@media (width <= 480px){._default_t1re6_28{flex-direction:column}._default_t1re6_28 [data-component=button]{width:100%}}._inline_t1re6_43{justify-content:flex-end;margin-left:auto}._embedded_t1re6_48,._fixed_t1re6_49{background-color:var(--colors-semantic-bg-surface);border-radius:var(--shape-border-radius-radius-lg);box-shadow:var(--shape-box-shadow-xs-position-x) var(--shape-box-shadow-xs-position-y) var(--shape-box-shadow-xs-blur) var(--shape-box-shadow-xs-spread) var(--shape-box-shadow-xs-color);gap:var(--shape-spacing-2xs);justify-content:center;padding:var(--shape-spacing-2xs);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}._embedded_t1re6_48._adaptive_t1re6_60,._fixed_t1re6_49._adaptive_t1re6_60{flex-wrap:nowrap}._embedded_t1re6_48>[data-component=button],._embedded_t1re6_48 ._measurement_t1re6_65>[data-component=button],._fixed_t1re6_49>[data-component=button],._fixed_t1re6_49 ._measurement_t1re6_65>[data-component=button]{background-color:transparent;border:none;box-shadow:none;color:var(--colors-semantic-content-secondary)}._embedded_t1re6_48>[data-component=button]:hover,._embedded_t1re6_48 ._measurement_t1re6_65>[data-component=button]:hover,._fixed_t1re6_49>[data-component=button]:hover,._fixed_t1re6_49 ._measurement_t1re6_65>[data-component=button]:hover{background-color:var(--colors-semantic-interactive-hover-subtle)}._embedded_t1re6_48._adaptive_t1re6_60{max-width:100%}._fixed_t1re6_49{animation:_reveal_t1re6_1 var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function) var(--utils-tokens-transition-delay) both;border-left:var(--scale-4) solid var(--colors-semantic-border-focus);bottom:var(--shape-spacing-2xl);box-shadow:var(--shape-box-shadow-md-position-x) var(--shape-box-shadow-md-position-y) var(--shape-box-shadow-md-blur) var(--shape-box-shadow-md-spread) var(--colors-box-shadow-heavy);left:50%;position:fixed;will-change:opacity,transform;z-index:4}._fixed_t1re6_49._adaptive_t1re6_60{max-width:calc(100dvw - var(--shape-spacing-2xl))}._fixed_t1re6_49>._non-button-content_t1re6_99{align-items:center;border-right:1px solid var(--colors-semantic-border-default);display:inline-flex;padding:var(--shape-spacing-2xs) var(--shape-spacing-md);white-space:nowrap}._fixed_t1re6_49>._non-button-content_t1re6_99 [data-component=link]{margin-right:var(--shape-spacing-xs)}._measurement_t1re6_65{align-items:center;display:flex;left:0;pointer-events:none;position:fixed;top:0;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}._measurement_t1re6_65>*{flex-shrink:0;white-space:nowrap}._overflow-trigger_t1re6_128{display:inline-flex;flex:none}

package/dist/components/aside/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index24.css');const t=require("react/jsx-runtime"),l=require("../../classix-5H4IWnMA.cjs"),_=require("react"),b=require("../button/index.cjs"),f=require("../icon/index.cjs"),p="_aside_1162s_3",x="_sidebar_1162s_9",y="_open_1162s_57",k="_sticky_1162s_73",e={aside:p,sidebar:x,open:y,sticky:k},m={default:e.default,sidebar:e.sidebar},g=({children:c,className:n,sticky:d=!1,variant:i="default"})=>{const[s,o]=_.useState(!1);return t.jsxs("aside",{className:l.t(n&&n,s&&e.open,e.aside,d&&e.sticky,m[i]),onClick:u=>{var r;const a=u.target.closest("a[href]");a&&!((r=a.getAttribute("href"))!=null&&r.startsWith("#"))&&o(!1)},"data-component":"aside",children:[i==="sidebar"&&t.jsx(b.Button,{"data-sidebar-toggle":"true",onClick:()=>o(!s),variant:"tertiary",children:t.jsx(f.Icon,{name:s?"x":"menu"})}),c]})};exports.Aside=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index24.css');const s=require("react/jsx-runtime"),l=require("../../classix-5H4IWnMA.cjs"),_=require("react"),p=require("../button/index.cjs"),b=require("../icon/index.cjs"),f="_aside_1u3pz_3",x="_sidebar_1u3pz_9",y="_open_1u3pz_62",k="_sticky_1u3pz_78",e={aside:f,sidebar:x,open:y,sticky:k},m={default:e.default,sidebar:e.sidebar},g=({children:c,className:n,sticky:d=!1,variant:i="default"})=>{const[t,o]=_.useState(!1);return s.jsxs("aside",{className:l.t(n&&n,t&&e.open,e.aside,d&&e.sticky,m[i]),onClick:u=>{var r;const a=u.target.closest("a[href]");a&&!((r=a.getAttribute("href"))!=null&&r.startsWith("#"))&&o(!1)},"data-component":"aside",children:[i==="sidebar"&&s.jsx(p.Button,{"data-sidebar-toggle":"true",onClick:()=>o(!t),variant:"tertiary",children:s.jsx(b.Icon,{name:t?"x":"menu"})}),c]})};exports.Aside=g;
 //# sourceMappingURL=index.cjs.map

package/dist/components/aside/index.js

@@ -1,9 +1,9 @@
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
-import { t as m } from "../../classix-DG18itHa.js";
-import { useState as p } from "react";
-import { Button as _ } from "../button/index.js";
-import { Icon as u } from "../icon/index.js";
-import '../../assets/index24.css';const b = "_aside_1162s_3", k = "_sidebar_1162s_9", y = "_open_1162s_57", h = "_sticky_1162s_73", t = {
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { t as l } from "../../classix-DG18itHa.js";
+import { useState as m } from "react";
+import { Button as u } from "../button/index.js";
+import { Icon as _ } from "../icon/index.js";
+import '../../assets/index24.css';const b = "_aside_1u3pz_3", k = "_sidebar_1u3pz_9", y = "_open_1u3pz_62", h = "_sticky_1u3pz_78", t = {
   aside: b,
   sidebar: k,
   open: y,
@@ -11,23 +11,23 @@ import '../../assets/index24.css';const b = "_aside_1162s_3", k = "_sidebar_1162
 }, g = {
   default: t.default,
   sidebar: t.sidebar
-}, B = ({
+}, v = ({
   children: d,
   className: s,
   sticky: c = !1,
   variant: i = "default"
 }) => {
-  const [e, o] = p(!1);
-  return /* @__PURE__ */ l("aside", { className: m(s && s, e && t.open, t.aside, c && t.sticky, g[i]), onClick: (f) => {
+  const [e, o] = m(!1);
+  return /* @__PURE__ */ f("aside", { className: l(s && s, e && t.open, t.aside, c && t.sticky, g[i]), onClick: (p) => {
     var r;
-    const a = f.target.closest("a[href]");
+    const a = p.target.closest("a[href]");
     a && !((r = a.getAttribute("href")) != null && r.startsWith("#")) && o(!1);
   }, "data-component": "aside", children: [
-    i === "sidebar" && /* @__PURE__ */ n(_, { "data-sidebar-toggle": "true", onClick: () => o(!e), variant: "tertiary", children: /* @__PURE__ */ n(u, { name: e ? "x" : "menu" }) }),
+    i === "sidebar" && /* @__PURE__ */ n(u, { "data-sidebar-toggle": "true", onClick: () => o(!e), variant: "tertiary", children: /* @__PURE__ */ n(_, { name: e ? "x" : "menu" }) }),
     d
   ] });
 };
 export {
-  B as Aside
+  v as Aside
 };
 //# sourceMappingURL=index.js.map

package/dist/components/controls/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index34.css');const b=require("react/jsx-runtime"),U=require("../../classix-5H4IWnMA.cjs"),m=require("react"),X=require("../button/index.cjs"),S=require("../../menu-popover-D1ALaiV5.cjs"),Y="_controls_1bkuq_13",Z="_inline_1bkuq_43",ee="_embedded_1bkuq_48",te="_fixed_1bkuq_49",ne="_adaptive_1bkuq_60",ie="_measurement_1bkuq_65",h={controls:Y,default:"_default_1bkuq_28",inline:Z,embedded:ee,fixed:te,adaptive:ne,measurement:ie,"non-button-content":"_non-button-content_1bkuq_99","overflow-trigger":"_overflow-trigger_1bkuq_128"},re={primary:3,danger:2,secondary:1,tertiary:0,simple:0},oe={default:h.default,embedded:h.embedded,fixed:h.fixed,inline:h.inline},se=s=>re[s.props.variant??"secondary"];function de({buttons:s,menuAccessibleLabel:i,triggerAccessibleLabel:n}){const x=s.map(o=>({button:o,isDanger:o.props.variant==="danger",value:o}));return b.jsx(S.MenuPopover,{triggerAccessibleLabel:n,"data-component":"overflowmenu",children:({close:o,initialFocus:r})=>b.jsx(S.MenuActionList,{actions:x,initialFocus:r,menuAccessibleLabel:i,onSelect:()=>o(),usesMenuSemantics:!0})})}const g=(s,i)=>{const n=Number.parseFloat(String(s[i]));return Number.isFinite(n)?n:0},ce=s=>{if(!s.trim().endsWith("px"))return;const i=Number.parseFloat(s);return Number.isFinite(i)?i:void 0},le=(s,i)=>{const n=s.parentElement;if(!n)return;const x=n.getBoundingClientRect(),o=getComputedStyle(n),r=x.width||n.clientWidth,B=x.left+g(o,"borderLeftWidth")+g(o,"paddingLeft"),E=x.left+r-g(o,"borderRightWidth")-g(o,"paddingRight"),_=Array.from(n.children).slice(0,Array.from(n.children).indexOf(s)),R=_.reduce((f,a)=>Math.max(f,a.getBoundingClientRect().right),B),c=_.length>0?g(o,"columnGap"):0,l=Math.max(0,E-R-c),W=(i==null?void 0:i.parent)===n?Math.max(0,r-i.parentWidth):0;return{availableWidth:W>0?Math.max(l,((i==null?void 0:i.availableWidth)??0)+W):l,parent:n,parentWidth:r}},ae=({children:s,className:i,maxVisibleButtons:n,overflow:x,overflowAccessibleLabel:o="More actions",variant:r="default",...B})=>{const E=m.Children.toArray(s),_=[],R=[];E.forEach(e=>{m.isValidElement(e)&&e.type===X.Button?_.push(e):R.push(e)});const c=_.map((e,d)=>({button:e,index:d,rank:se(e)})).sort((e,d)=>e.rank-d.rank||e.index-d.index).map(({button:e,index:d})=>m.cloneElement(e,{key:e.key??d})),l=r==="embedded"||r==="fixed"&&x==="menu",W=typeof n=="number"&&Number.isFinite(n)?Math.floor(n):0,f=r==="embedded"&&W>0?Math.min(c.length,W):c.length,a=m.useRef(null),A=m.useRef(void 0),N=m.useRef(null),M=m.useRef(null),[j,C]=m.useState(f),p=m.useCallback(()=>{var L,I,T;if(!l){C(f);return}const e=a.current,d=N.current;if(!e||!d)return;const w=Array.from(d.querySelectorAll('[data-component="button"]')),y=w.at(-1);if(!y)return;const v=w.slice(0,c.length).map(t=>t.getBoundingClientRect().width);if(v.length!==c.length)return;const u=getComputedStyle(e),G=g(u,"paddingLeft")+g(u,"paddingRight")+g(u,"borderLeftWidth")+g(u,"borderRightWidth"),$=ce(u.maxWidth),k=r==="embedded"?le(e,A.current):void 0;k&&(A.current=k);const H=(k==null?void 0:k.availableWidth)??((L=e.parentElement)==null?void 0:L.clientWidth)??0,J=((I=window.visualViewport)==null?void 0:I.width)??document.documentElement.clientWidth,F=Math.min(...[$,H,J].filter(t=>typeof t=="number"&&Number.isFinite(t)&&t>0));if(!Number.isFinite(F))return;const O=Math.max(0,F-G),V=((T=M.current)==null?void 0:T.getBoundingClientRect().width)??0,K=v.reduce((t,Q)=>t+Q,0);if(f===c.length&&V+K<=O){C(t=>t===f?t:f);return}let P=V+y.getBoundingClientRect().width,q=0;for(let t=0;t<f&&!(P+v[t]>O);t+=1)P+=v[t],q=t+1;C(t=>t===q?t:q)},[l,c.length,r,f]);if(m.useLayoutEffect(()=>{var d,w,y,v;if(p(),!l)return;const e=typeof ResizeObserver>"u"?void 0:new ResizeObserver(p);return a.current&&(e==null||e.observe(a.current)),(d=a.current)!=null&&d.parentElement&&(e==null||e.observe(a.current.parentElement)),r==="embedded"&&((w=a.current)!=null&&w.parentElement)&&Array.from(a.current.parentElement.children).forEach(u=>{u!==a.current&&(e==null||e.observe(u))}),M.current&&(e==null||e.observe(M.current)),window.addEventListener("resize",p),(y=window.visualViewport)==null||y.addEventListener("resize",p),(v=document.fonts)==null||v.ready.then(p),()=>{var u;e==null||e.disconnect(),window.removeEventListener("resize",p),(u=window.visualViewport)==null||u.removeEventListener("resize",p)}},[l,s,p,r]),E.length===0)return null;const D=l?c.slice(0,j):c,z=l?c.slice(j):[];return b.jsxs("div",{"data-component":"controls","data-dynamic-position":r==="fixed"?!0:void 0,className:U.t(h.controls,oe[r],l&&h.adaptive,i),ref:a,...B,children:[l&&b.jsxs("div",{"aria-hidden":"true",className:h.measurement,ref:N,children:[c.map((e,d)=>m.cloneElement(e,{"aria-hidden":!0,id:void 0,key:`measure-${String(e.key??d)}`,onClick:void 0,ref:void 0,tabIndex:-1})),b.jsx(S.MenuPopover,{triggerAccessibleLabel:o,children:null})]}),r!=="embedded"&&R.length>0&&b.jsx("span",{className:h["non-button-content"],ref:M,children:R}),D,z.length>0&&b.jsx("span",{className:h["overflow-trigger"],children:b.jsx(de,{buttons:z,menuAccessibleLabel:o,triggerAccessibleLabel:o})})]})};exports.Controls=ae;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index34.css');const b=require("react/jsx-runtime"),U=require("../../classix-5H4IWnMA.cjs"),m=require("react"),X=require("../button/index.cjs"),A=require("../../menu-popover-D1ALaiV5.cjs"),Y="_controls_t1re6_13",Z="_inline_t1re6_43",ee="_embedded_t1re6_48",te="_fixed_t1re6_49",ne="_adaptive_t1re6_60",ie="_measurement_t1re6_65",h={controls:Y,default:"_default_t1re6_28",inline:Z,embedded:ee,fixed:te,adaptive:ne,measurement:ie,"non-button-content":"_non-button-content_t1re6_99","overflow-trigger":"_overflow-trigger_t1re6_128"},re={primary:3,danger:2,secondary:1,tertiary:0,simple:0},oe={default:h.default,embedded:h.embedded,fixed:h.fixed,inline:h.inline},de=d=>re[d.props.variant??"secondary"];function se({buttons:d,menuAccessibleLabel:i,triggerAccessibleLabel:n}){const x=d.map(o=>({button:o,isDanger:o.props.variant==="danger",value:o}));return b.jsx(A.MenuPopover,{triggerAccessibleLabel:n,"data-component":"overflowmenu",children:({close:o,initialFocus:r})=>b.jsx(A.MenuActionList,{actions:x,initialFocus:r,menuAccessibleLabel:i,onSelect:()=>o(),usesMenuSemantics:!0})})}const g=(d,i)=>{const n=Number.parseFloat(String(d[i]));return Number.isFinite(n)?n:0},ce=d=>{if(!d.trim().endsWith("px"))return;const i=Number.parseFloat(d);return Number.isFinite(i)?i:void 0},ae=(d,i)=>{const n=d.parentElement;if(!n)return;const x=n.getBoundingClientRect(),o=getComputedStyle(n),r=x.width||n.clientWidth,C=x.left+g(o,"borderLeftWidth")+g(o,"paddingLeft"),M=x.left+r-g(o,"borderRightWidth")-g(o,"paddingRight"),_=Array.from(n.children).slice(0,Array.from(n.children).indexOf(d)),R=_.reduce((f,l)=>Math.max(f,l.getBoundingClientRect().right),C),c=_.length>0?g(o,"columnGap"):0,a=Math.max(0,M-R-c),W=(i==null?void 0:i.parent)===n?Math.max(0,r-i.parentWidth):0;return{availableWidth:W>0?Math.max(a,((i==null?void 0:i.availableWidth)??0)+W):a,parent:n,parentWidth:r}},le=({children:d,className:i,maxVisibleButtons:n,overflow:x,overflowAccessibleLabel:o="More actions",variant:r="default",...C})=>{const M=m.Children.toArray(d),_=[],R=[];M.forEach(e=>{m.isValidElement(e)&&e.type===X.Button?_.push(e):R.push(e)});const c=_.map((e,s)=>({button:e,index:s,rank:de(e)})).sort((e,s)=>e.rank-s.rank||e.index-s.index).map(({button:e,index:s})=>m.cloneElement(e,{key:e.key??s})),a=r==="embedded"||r==="fixed"&&x==="menu",W=typeof n=="number"&&Number.isFinite(n)?Math.floor(n):0,f=r==="embedded"&&W>0?Math.min(c.length,W):c.length,l=m.useRef(null),N=m.useRef(void 0),j=m.useRef(null),B=m.useRef(null),[z,S]=m.useState(f),p=m.useCallback(()=>{var L,I,T;if(!a){S(f);return}const e=l.current,s=j.current;if(!e||!s)return;const w=Array.from(s.querySelectorAll('[data-component="button"]')),y=w.at(-1);if(!y)return;const v=w.slice(0,c.length).map(t=>t.getBoundingClientRect().width);if(v.length!==c.length)return;const u=getComputedStyle(e),G=g(u,"paddingLeft")+g(u,"paddingRight")+g(u,"borderLeftWidth")+g(u,"borderRightWidth"),$=ce(u.maxWidth),E=r==="embedded"?ae(e,N.current):void 0;E&&(N.current=E);const H=(E==null?void 0:E.availableWidth)??((L=e.parentElement)==null?void 0:L.clientWidth)??0,J=((I=window.visualViewport)==null?void 0:I.width)??document.documentElement.clientWidth,O=Math.min(...[$,H,J].filter(t=>typeof t=="number"&&Number.isFinite(t)&&t>0));if(!Number.isFinite(O))return;const V=Math.max(0,O-G),q=((T=B.current)==null?void 0:T.getBoundingClientRect().width)??0,K=v.reduce((t,Q)=>t+Q,0);if(f===c.length&&q+K<=V){S(t=>t===f?t:f);return}let P=q+y.getBoundingClientRect().width,k=0;for(let t=0;t<f&&!(P+v[t]>V);t+=1)P+=v[t],k=t+1;S(t=>t===k?t:k)},[a,c.length,r,f]);if(m.useLayoutEffect(()=>{var s,w,y,v;if(p(),!a)return;const e=typeof ResizeObserver>"u"?void 0:new ResizeObserver(p);return l.current&&(e==null||e.observe(l.current)),(s=l.current)!=null&&s.parentElement&&(e==null||e.observe(l.current.parentElement)),r==="embedded"&&((w=l.current)!=null&&w.parentElement)&&Array.from(l.current.parentElement.children).forEach(u=>{u!==l.current&&(e==null||e.observe(u))}),B.current&&(e==null||e.observe(B.current)),window.addEventListener("resize",p),(y=window.visualViewport)==null||y.addEventListener("resize",p),(v=document.fonts)==null||v.ready.then(p),()=>{var u;e==null||e.disconnect(),window.removeEventListener("resize",p),(u=window.visualViewport)==null||u.removeEventListener("resize",p)}},[a,d,p,r]),M.length===0)return null;const D=a?c.slice(0,z):c,F=a?c.slice(z):[];return b.jsxs("div",{"data-component":"controls","data-dynamic-position":r==="fixed"?!0:void 0,"data-adaptive":a?!0:void 0,className:U.t(h.controls,oe[r],a&&h.adaptive,i),ref:l,...C,children:[a&&b.jsxs("div",{"aria-hidden":"true",className:h.measurement,ref:j,children:[c.map((e,s)=>m.cloneElement(e,{"aria-hidden":!0,id:void 0,key:`measure-${String(e.key??s)}`,onClick:void 0,ref:void 0,tabIndex:-1})),b.jsx(A.MenuPopover,{triggerAccessibleLabel:o,children:null})]}),r!=="embedded"&&R.length>0&&b.jsx("span",{className:h["non-button-content"],ref:B,children:R}),D,F.length>0&&b.jsx("span",{className:h["overflow-trigger"],children:b.jsx(se,{buttons:F,menuAccessibleLabel:o,triggerAccessibleLabel:o})})]})};exports.Controls=le;
 //# sourceMappingURL=index.cjs.map

package/dist/components/controls/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport { type MenuAction, MenuActionList } from '../menu/action-list';\nimport { MenuPopover } from '../menu/menu-popover';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n  primary: 3,\n  danger: 2,\n  secondary: 1,\n  tertiary: 0,\n  simple: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n  default: styles.default,\n  embedded: styles.embedded,\n  fixed: styles.fixed,\n  inline: styles.inline,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n  children?: React.ReactNode;\n  maxVisibleButtons?: number;\n  overflow?: 'menu';\n  overflowAccessibleLabel?: string;\n  variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n  buttonVariantOrder[button.props.variant ?? 'secondary'];\n\nfunction OverflowMenu({\n  buttons,\n  menuAccessibleLabel,\n  triggerAccessibleLabel,\n}: {\n  buttons: React.ReactElement<ButtonProps>[];\n  menuAccessibleLabel: string;\n  triggerAccessibleLabel: string;\n}) {\n  const actions: MenuAction<React.ReactElement<ButtonProps>>[] = buttons.map((button) => ({\n    button,\n    isDanger: button.props.variant === 'danger',\n    value: button,\n  }));\n\n  return (\n    <MenuPopover triggerAccessibleLabel={triggerAccessibleLabel}>\n      {({ close, initialFocus }) => (\n        <MenuActionList\n          actions={actions}\n          initialFocus={initialFocus}\n          menuAccessibleLabel={menuAccessibleLabel}\n          onSelect={() => close()}\n          usesMenuSemantics\n        />\n      )}\n    </MenuPopover>\n  );\n}\n\nconst numericStyle = (style: CSSStyleDeclaration, property: keyof CSSStyleDeclaration) => {\n  const value = Number.parseFloat(String(style[property]));\n  return Number.isFinite(value) ? value : 0;\n};\n\nconst pixelStyle = (value: string) => {\n  if (!value.trim().endsWith('px')) return undefined;\n  const parsedValue = Number.parseFloat(value);\n  return Number.isFinite(parsedValue) ? parsedValue : undefined;\n};\n\ntype EmbeddedLayout = {\n  availableWidth: number;\n  parent: HTMLElement;\n  parentWidth: number;\n};\n\nconst availableWidthToRight = (\n  controls: HTMLDivElement,\n  previousLayout?: EmbeddedLayout\n): EmbeddedLayout | undefined => {\n  const parent = controls.parentElement;\n  if (!parent) return undefined;\n\n  const parentRect = parent.getBoundingClientRect();\n  const parentStyle = getComputedStyle(parent);\n  const parentWidth = parentRect.width || parent.clientWidth;\n  const contentLeft =\n    parentRect.left +\n    numericStyle(parentStyle, 'borderLeftWidth') +\n    numericStyle(parentStyle, 'paddingLeft');\n  const contentRight =\n    parentRect.left +\n    parentWidth -\n    numericStyle(parentStyle, 'borderRightWidth') -\n    numericStyle(parentStyle, 'paddingRight');\n  const precedingSiblings = Array.from(parent.children).slice(\n    0,\n    Array.from(parent.children).indexOf(controls)\n  );\n  const occupiedRight = precedingSiblings.reduce(\n    (right, sibling) => Math.max(right, sibling.getBoundingClientRect().right),\n    contentLeft\n  );\n  const gap = precedingSiblings.length > 0 ? numericStyle(parentStyle, 'columnGap') : 0;\n\n  const measuredAvailableWidth = Math.max(0, contentRight - occupiedRight - gap);\n  const parentWidthIncrease =\n    previousLayout?.parent === parent ? Math.max(0, parentWidth - previousLayout.parentWidth) : 0;\n\n  return {\n    availableWidth:\n      parentWidthIncrease > 0\n        ? Math.max(\n            measuredAvailableWidth,\n            (previousLayout?.availableWidth ?? 0) + parentWidthIncrease\n          )\n        : measuredAvailableWidth,\n    parent,\n    parentWidth,\n  };\n};\n\nexport const Controls = ({\n  children,\n  className,\n  maxVisibleButtons,\n  overflow,\n  overflowAccessibleLabel = 'More actions',\n  variant = 'default',\n  ...props\n}: ControlsProps) => {\n  const childArray = Children.toArray(children);\n  const buttons: React.ReactElement<ButtonProps>[] = [];\n  const nonButtons: React.ReactNode[] = [];\n\n  childArray.forEach((child) => {\n    if (isValidElement<ButtonProps>(child) && child.type === Button) {\n      buttons.push(child);\n    } else {\n      nonButtons.push(child);\n    }\n  });\n\n  const sortedButtons = buttons\n    .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n    .sort((a, b) => a.rank - b.rank || a.index - b.index)\n    .map(({ button, index }) =>\n      cloneElement(button, {\n        key: button.key ?? index,\n      })\n    );\n\n  const adaptive = variant === 'embedded' || (variant === 'fixed' && overflow === 'menu');\n  const normalizedMaxVisibleButtons =\n    typeof maxVisibleButtons === 'number' && Number.isFinite(maxVisibleButtons)\n      ? Math.floor(maxVisibleButtons)\n      : 0;\n  const visibleButtonLimit =\n    variant === 'embedded' && normalizedMaxVisibleButtons > 0\n      ? Math.min(sortedButtons.length, normalizedMaxVisibleButtons)\n      : sortedButtons.length;\n  const controlsRef = useRef<HTMLDivElement>(null);\n  const embeddedLayoutRef = useRef<EmbeddedLayout>(undefined);\n  const measurementRef = useRef<HTMLDivElement>(null);\n  const nonButtonsRef = useRef<HTMLSpanElement>(null);\n  const [visibleButtonCount, setVisibleButtonCount] = useState(visibleButtonLimit);\n\n  const updateOverflow = useCallback(() => {\n    if (!adaptive) {\n      setVisibleButtonCount(visibleButtonLimit);\n      return;\n    }\n\n    const controls = controlsRef.current;\n    const measurement = measurementRef.current;\n    if (!controls || !measurement) return;\n\n    const measurementButtons = Array.from(\n      measurement.querySelectorAll<HTMLElement>('[data-component=\"button\"]')\n    );\n    const trigger = measurementButtons.at(-1);\n    if (!trigger) return;\n\n    const buttonWidths = measurementButtons\n      .slice(0, sortedButtons.length)\n      .map((button) => button.getBoundingClientRect().width);\n    if (buttonWidths.length !== sortedButtons.length) return;\n\n    const style = getComputedStyle(controls);\n    const horizontalChrome =\n      numericStyle(style, 'paddingLeft') +\n      numericStyle(style, 'paddingRight') +\n      numericStyle(style, 'borderLeftWidth') +\n      numericStyle(style, 'borderRightWidth');\n    const configuredMaxWidth = pixelStyle(style.maxWidth);\n    const embeddedLayout =\n      variant === 'embedded'\n        ? availableWidthToRight(controls, embeddedLayoutRef.current)\n        : undefined;\n    if (embeddedLayout) embeddedLayoutRef.current = embeddedLayout;\n    const layoutWidth = embeddedLayout?.availableWidth ?? controls.parentElement?.clientWidth ?? 0;\n    const viewportWidth = window.visualViewport?.width ?? document.documentElement.clientWidth;\n    const outerAvailableWidth = Math.min(\n      ...[configuredMaxWidth, layoutWidth, viewportWidth].filter(\n        (width): width is number => typeof width === 'number' && Number.isFinite(width) && width > 0\n      )\n    );\n    if (!Number.isFinite(outerAvailableWidth)) return;\n\n    const availableWidth = Math.max(0, outerAvailableWidth - horizontalChrome);\n    const prefixWidth = nonButtonsRef.current?.getBoundingClientRect().width ?? 0;\n    const actionWidth = buttonWidths.reduce((total, width) => total + width, 0);\n\n    if (\n      visibleButtonLimit === sortedButtons.length &&\n      prefixWidth + actionWidth <= availableWidth\n    ) {\n      setVisibleButtonCount((current) =>\n        current === visibleButtonLimit ? current : visibleButtonLimit\n      );\n      return;\n    }\n\n    let usedWidth = prefixWidth + trigger.getBoundingClientRect().width;\n    let nextVisibleButtonCount = 0;\n    for (let index = 0; index < visibleButtonLimit; index += 1) {\n      if (usedWidth + buttonWidths[index] > availableWidth) break;\n      usedWidth += buttonWidths[index];\n      nextVisibleButtonCount = index + 1;\n    }\n\n    setVisibleButtonCount((current) =>\n      current === nextVisibleButtonCount ? current : nextVisibleButtonCount\n    );\n  }, [adaptive, sortedButtons.length, variant, visibleButtonLimit]);\n\n  useLayoutEffect(() => {\n    updateOverflow();\n\n    if (!adaptive) return undefined;\n\n    const observer =\n      typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateOverflow);\n    if (controlsRef.current) observer?.observe(controlsRef.current);\n    if (controlsRef.current?.parentElement) observer?.observe(controlsRef.current.parentElement);\n    if (variant === 'embedded' && controlsRef.current?.parentElement) {\n      Array.from(controlsRef.current.parentElement.children).forEach((sibling) => {\n        if (sibling !== controlsRef.current) observer?.observe(sibling);\n      });\n    }\n    if (nonButtonsRef.current) observer?.observe(nonButtonsRef.current);\n\n    window.addEventListener('resize', updateOverflow);\n    window.visualViewport?.addEventListener('resize', updateOverflow);\n    void document.fonts?.ready.then(updateOverflow);\n\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener('resize', updateOverflow);\n      window.visualViewport?.removeEventListener('resize', updateOverflow);\n    };\n  }, [adaptive, children, updateOverflow, variant]);\n\n  if (childArray.length === 0) {\n    return null;\n  }\n\n  const visibleButtons = adaptive ? sortedButtons.slice(0, visibleButtonCount) : sortedButtons;\n  const overflowedButtons = adaptive ? sortedButtons.slice(visibleButtonCount) : [];\n\n  return (\n    <div\n      data-component='controls'\n      data-dynamic-position={variant === 'fixed' ? true : undefined}\n      className={cx(styles.controls, variants[variant], adaptive && styles.adaptive, className)}\n      ref={controlsRef}\n      {...props}\n    >\n      {adaptive && (\n        <div\n          aria-hidden='true'\n          className={styles.measurement}\n          ref={measurementRef}\n        >\n          {sortedButtons.map((button, index) =>\n            cloneElement(button, {\n              'aria-hidden': true,\n              id: undefined,\n              key: `measure-${String(button.key ?? index)}`,\n              onClick: undefined,\n              ref: undefined,\n              tabIndex: -1,\n            })\n          )}\n          <MenuPopover triggerAccessibleLabel={overflowAccessibleLabel}>{null}</MenuPopover>\n        </div>\n      )}\n      {variant !== 'embedded' && nonButtons.length > 0 && (\n        <span\n          className={styles['non-button-content']}\n          ref={nonButtonsRef}\n        >\n          {nonButtons}\n        </span>\n      )}\n      {visibleButtons}\n      {overflowedButtons.length > 0 && (\n        <span className={styles['overflow-trigger']}>\n          <OverflowMenu\n            buttons={overflowedButtons}\n            menuAccessibleLabel={overflowAccessibleLabel}\n            triggerAccessibleLabel={overflowAccessibleLabel}\n          />\n        </span>\n      )}\n    </div>\n  );\n};\n"],"names":["buttonVariantOrder","primary","danger","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","value","jsx","MenuPopover","close","initialFocus","MenuActionList","numericStyle","style","property","Number","parseFloat","String","isFinite","pixelStyle","trim","endsWith","parsedValue","undefined","availableWidthToRight","controls","previousLayout","parent","parentElement","parentRect","getBoundingClientRect","parentStyle","getComputedStyle","parentWidth","width","clientWidth","contentLeft","left","contentRight","precedingSiblings","Array","from","children","slice","indexOf","occupiedRight","reduce","right","sibling","Math","max","gap","length","measuredAvailableWidth","parentWidthIncrease","availableWidth","Controls","className","maxVisibleButtons","overflow","overflowAccessibleLabel","childArray","Children","toArray","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","index","rank","sort","a","b","cloneElement","key","adaptive","normalizedMaxVisibleButtons","floor","visibleButtonLimit","min","controlsRef","useRef","embeddedLayoutRef","measurementRef","nonButtonsRef","visibleButtonCount","setVisibleButtonCount","useState","updateOverflow","useCallback","current","measurement","measurementButtons","querySelectorAll","trigger","at","buttonWidths","horizontalChrome","configuredMaxWidth","maxWidth","embeddedLayout","layoutWidth","viewportWidth","window","visualViewport","document","documentElement","outerAvailableWidth","filter","prefixWidth","actionWidth","total","usedWidth","nextVisibleButtonCount","useLayoutEffect","observer","ResizeObserver","observe","addEventListener","fonts","ready","then","disconnect","removeEventListener","visibleButtons","overflowedButtons","jsxs","cx","id","onClick","ref","tabIndex"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport { type MenuAction, MenuActionList } from '../menu/action-list';\nimport { MenuPopover } from '../menu/menu-popover';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n  primary: 3,\n  danger: 2,\n  secondary: 1,\n  tertiary: 0,\n  simple: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n  default: styles.default,\n  embedded: styles.embedded,\n  fixed: styles.fixed,\n  inline: styles.inline,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n  children?: React.ReactNode;\n  maxVisibleButtons?: number;\n  overflow?: 'menu';\n  overflowAccessibleLabel?: string;\n  variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n  buttonVariantOrder[button.props.variant ?? 'secondary'];\n\nfunction OverflowMenu({\n  buttons,\n  menuAccessibleLabel,\n  triggerAccessibleLabel,\n}: {\n  buttons: React.ReactElement<ButtonProps>[];\n  menuAccessibleLabel: string;\n  triggerAccessibleLabel: string;\n}) {\n  const actions: MenuAction<React.ReactElement<ButtonProps>>[] = buttons.map((button) => ({\n    button,\n    isDanger: button.props.variant === 'danger',\n    value: button,\n  }));\n\n  return (\n    <MenuPopover triggerAccessibleLabel={triggerAccessibleLabel}>\n      {({ close, initialFocus }) => (\n        <MenuActionList\n          actions={actions}\n          initialFocus={initialFocus}\n          menuAccessibleLabel={menuAccessibleLabel}\n          onSelect={() => close()}\n          usesMenuSemantics\n        />\n      )}\n    </MenuPopover>\n  );\n}\n\nconst numericStyle = (style: CSSStyleDeclaration, property: keyof CSSStyleDeclaration) => {\n  const value = Number.parseFloat(String(style[property]));\n  return Number.isFinite(value) ? value : 0;\n};\n\nconst pixelStyle = (value: string) => {\n  if (!value.trim().endsWith('px')) return undefined;\n  const parsedValue = Number.parseFloat(value);\n  return Number.isFinite(parsedValue) ? parsedValue : undefined;\n};\n\ntype EmbeddedLayout = {\n  availableWidth: number;\n  parent: HTMLElement;\n  parentWidth: number;\n};\n\nconst availableWidthToRight = (\n  controls: HTMLDivElement,\n  previousLayout?: EmbeddedLayout\n): EmbeddedLayout | undefined => {\n  const parent = controls.parentElement;\n  if (!parent) return undefined;\n\n  const parentRect = parent.getBoundingClientRect();\n  const parentStyle = getComputedStyle(parent);\n  const parentWidth = parentRect.width || parent.clientWidth;\n  const contentLeft =\n    parentRect.left +\n    numericStyle(parentStyle, 'borderLeftWidth') +\n    numericStyle(parentStyle, 'paddingLeft');\n  const contentRight =\n    parentRect.left +\n    parentWidth -\n    numericStyle(parentStyle, 'borderRightWidth') -\n    numericStyle(parentStyle, 'paddingRight');\n  const precedingSiblings = Array.from(parent.children).slice(\n    0,\n    Array.from(parent.children).indexOf(controls)\n  );\n  const occupiedRight = precedingSiblings.reduce(\n    (right, sibling) => Math.max(right, sibling.getBoundingClientRect().right),\n    contentLeft\n  );\n  const gap = precedingSiblings.length > 0 ? numericStyle(parentStyle, 'columnGap') : 0;\n\n  const measuredAvailableWidth = Math.max(0, contentRight - occupiedRight - gap);\n  const parentWidthIncrease =\n    previousLayout?.parent === parent ? Math.max(0, parentWidth - previousLayout.parentWidth) : 0;\n\n  return {\n    availableWidth:\n      parentWidthIncrease > 0\n        ? Math.max(\n            measuredAvailableWidth,\n            (previousLayout?.availableWidth ?? 0) + parentWidthIncrease\n          )\n        : measuredAvailableWidth,\n    parent,\n    parentWidth,\n  };\n};\n\nexport const Controls = ({\n  children,\n  className,\n  maxVisibleButtons,\n  overflow,\n  overflowAccessibleLabel = 'More actions',\n  variant = 'default',\n  ...props\n}: ControlsProps) => {\n  const childArray = Children.toArray(children);\n  const buttons: React.ReactElement<ButtonProps>[] = [];\n  const nonButtons: React.ReactNode[] = [];\n\n  childArray.forEach((child) => {\n    if (isValidElement<ButtonProps>(child) && child.type === Button) {\n      buttons.push(child);\n    } else {\n      nonButtons.push(child);\n    }\n  });\n\n  const sortedButtons = buttons\n    .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n    .sort((a, b) => a.rank - b.rank || a.index - b.index)\n    .map(({ button, index }) =>\n      cloneElement(button, {\n        key: button.key ?? index,\n      })\n    );\n\n  const adaptive = variant === 'embedded' || (variant === 'fixed' && overflow === 'menu');\n  const normalizedMaxVisibleButtons =\n    typeof maxVisibleButtons === 'number' && Number.isFinite(maxVisibleButtons)\n      ? Math.floor(maxVisibleButtons)\n      : 0;\n  const visibleButtonLimit =\n    variant === 'embedded' && normalizedMaxVisibleButtons > 0\n      ? Math.min(sortedButtons.length, normalizedMaxVisibleButtons)\n      : sortedButtons.length;\n  const controlsRef = useRef<HTMLDivElement>(null);\n  const embeddedLayoutRef = useRef<EmbeddedLayout>(undefined);\n  const measurementRef = useRef<HTMLDivElement>(null);\n  const nonButtonsRef = useRef<HTMLSpanElement>(null);\n  const [visibleButtonCount, setVisibleButtonCount] = useState(visibleButtonLimit);\n\n  const updateOverflow = useCallback(() => {\n    if (!adaptive) {\n      setVisibleButtonCount(visibleButtonLimit);\n      return;\n    }\n\n    const controls = controlsRef.current;\n    const measurement = measurementRef.current;\n    if (!controls || !measurement) return;\n\n    const measurementButtons = Array.from(\n      measurement.querySelectorAll<HTMLElement>('[data-component=\"button\"]')\n    );\n    const trigger = measurementButtons.at(-1);\n    if (!trigger) return;\n\n    const buttonWidths = measurementButtons\n      .slice(0, sortedButtons.length)\n      .map((button) => button.getBoundingClientRect().width);\n    if (buttonWidths.length !== sortedButtons.length) return;\n\n    const style = getComputedStyle(controls);\n    const horizontalChrome =\n      numericStyle(style, 'paddingLeft') +\n      numericStyle(style, 'paddingRight') +\n      numericStyle(style, 'borderLeftWidth') +\n      numericStyle(style, 'borderRightWidth');\n    const configuredMaxWidth = pixelStyle(style.maxWidth);\n    const embeddedLayout =\n      variant === 'embedded'\n        ? availableWidthToRight(controls, embeddedLayoutRef.current)\n        : undefined;\n    if (embeddedLayout) embeddedLayoutRef.current = embeddedLayout;\n    const layoutWidth = embeddedLayout?.availableWidth ?? controls.parentElement?.clientWidth ?? 0;\n    const viewportWidth = window.visualViewport?.width ?? document.documentElement.clientWidth;\n    const outerAvailableWidth = Math.min(\n      ...[configuredMaxWidth, layoutWidth, viewportWidth].filter(\n        (width): width is number => typeof width === 'number' && Number.isFinite(width) && width > 0\n      )\n    );\n    if (!Number.isFinite(outerAvailableWidth)) return;\n\n    const availableWidth = Math.max(0, outerAvailableWidth - horizontalChrome);\n    const prefixWidth = nonButtonsRef.current?.getBoundingClientRect().width ?? 0;\n    const actionWidth = buttonWidths.reduce((total, width) => total + width, 0);\n\n    if (\n      visibleButtonLimit === sortedButtons.length &&\n      prefixWidth + actionWidth <= availableWidth\n    ) {\n      setVisibleButtonCount((current) =>\n        current === visibleButtonLimit ? current : visibleButtonLimit\n      );\n      return;\n    }\n\n    let usedWidth = prefixWidth + trigger.getBoundingClientRect().width;\n    let nextVisibleButtonCount = 0;\n    for (let index = 0; index < visibleButtonLimit; index += 1) {\n      if (usedWidth + buttonWidths[index] > availableWidth) break;\n      usedWidth += buttonWidths[index];\n      nextVisibleButtonCount = index + 1;\n    }\n\n    setVisibleButtonCount((current) =>\n      current === nextVisibleButtonCount ? current : nextVisibleButtonCount\n    );\n  }, [adaptive, sortedButtons.length, variant, visibleButtonLimit]);\n\n  useLayoutEffect(() => {\n    updateOverflow();\n\n    if (!adaptive) return undefined;\n\n    const observer =\n      typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateOverflow);\n    if (controlsRef.current) observer?.observe(controlsRef.current);\n    if (controlsRef.current?.parentElement) observer?.observe(controlsRef.current.parentElement);\n    if (variant === 'embedded' && controlsRef.current?.parentElement) {\n      Array.from(controlsRef.current.parentElement.children).forEach((sibling) => {\n        if (sibling !== controlsRef.current) observer?.observe(sibling);\n      });\n    }\n    if (nonButtonsRef.current) observer?.observe(nonButtonsRef.current);\n\n    window.addEventListener('resize', updateOverflow);\n    window.visualViewport?.addEventListener('resize', updateOverflow);\n    void document.fonts?.ready.then(updateOverflow);\n\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener('resize', updateOverflow);\n      window.visualViewport?.removeEventListener('resize', updateOverflow);\n    };\n  }, [adaptive, children, updateOverflow, variant]);\n\n  if (childArray.length === 0) {\n    return null;\n  }\n\n  const visibleButtons = adaptive ? sortedButtons.slice(0, visibleButtonCount) : sortedButtons;\n  const overflowedButtons = adaptive ? sortedButtons.slice(visibleButtonCount) : [];\n\n  return (\n    <div\n      data-component='controls'\n      data-dynamic-position={variant === 'fixed' ? true : undefined}\n      data-adaptive={adaptive ? true : undefined}\n      className={cx(styles.controls, variants[variant], adaptive && styles.adaptive, className)}\n      ref={controlsRef}\n      {...props}\n    >\n      {adaptive && (\n        <div\n          aria-hidden='true'\n          className={styles.measurement}\n          ref={measurementRef}\n        >\n          {sortedButtons.map((button, index) =>\n            cloneElement(button, {\n              'aria-hidden': true,\n              id: undefined,\n              key: `measure-${String(button.key ?? index)}`,\n              onClick: undefined,\n              ref: undefined,\n              tabIndex: -1,\n            })\n          )}\n          <MenuPopover triggerAccessibleLabel={overflowAccessibleLabel}>{null}</MenuPopover>\n        </div>\n      )}\n      {variant !== 'embedded' && nonButtons.length > 0 && (\n        <span\n          className={styles['non-button-content']}\n          ref={nonButtonsRef}\n        >\n          {nonButtons}\n        </span>\n      )}\n      {visibleButtons}\n      {overflowedButtons.length > 0 && (\n        <span className={styles['overflow-trigger']}>\n          <OverflowMenu\n            buttons={overflowedButtons}\n            menuAccessibleLabel={overflowAccessibleLabel}\n            triggerAccessibleLabel={overflowAccessibleLabel}\n          />\n        </span>\n      )}\n    </div>\n  );\n};\n"],"names":["buttonVariantOrder","primary","danger","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","value","jsx","MenuPopover","close","initialFocus","MenuActionList","numericStyle","style","property","Number","parseFloat","String","isFinite","pixelStyle","trim","endsWith","parsedValue","undefined","availableWidthToRight","controls","previousLayout","parent","parentElement","parentRect","getBoundingClientRect","parentStyle","getComputedStyle","parentWidth","width","clientWidth","contentLeft","left","contentRight","precedingSiblings","Array","from","children","slice","indexOf","occupiedRight","reduce","right","sibling","Math","max","gap","length","measuredAvailableWidth","parentWidthIncrease","availableWidth","Controls","className","maxVisibleButtons","overflow","overflowAccessibleLabel","childArray","Children","toArray","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","index","rank","sort","a","b","cloneElement","key","adaptive","normalizedMaxVisibleButtons","floor","visibleButtonLimit","min","controlsRef","useRef","embeddedLayoutRef","measurementRef","nonButtonsRef","visibleButtonCount","setVisibleButtonCount","useState","updateOverflow","useCallback","current","measurement","measurementButtons","querySelectorAll","trigger","at","buttonWidths","horizontalChrome","configuredMaxWidth","maxWidth","embeddedLayout","layoutWidth","viewportWidth","window","visualViewport","document","documentElement","outerAvailableWidth","filter","prefixWidth","actionWidth","total","usedWidth","nextVisibleButtonCount","useLayoutEffect","observer","ResizeObserver","observe","addEventListener","fonts","ready","then","disconnect","removeEventListener","visibleButtons","overflowedButtons","jsxs","cx","id","onClick","ref","tabIndex"],"mappings":"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"}

package/dist/components/controls/index.js

@@ -1,18 +1,18 @@
 import { jsxs as G, jsx as v } from "react/jsx-runtime";
 import { t as Y } from "../../classix-DG18itHa.js";
-import { Children as Z, isValidElement as ee, cloneElement as P, useRef as E, useState as te, useCallback as ne, useLayoutEffect as ie } from "react";
+import { Children as Z, isValidElement as ee, cloneElement as P, useRef as M, useState as te, useCallback as ne, useLayoutEffect as ie } from "react";
 import { Button as re } from "../button/index.js";
 import { a as T, M as oe } from "../../menu-popover-DQHDIw-8.js";
-import '../../assets/index34.css';const de = "_controls_1bkuq_13", se = "_inline_1bkuq_43", ce = "_embedded_1bkuq_48", ae = "_fixed_1bkuq_49", le = "_adaptive_1bkuq_60", ue = "_measurement_1bkuq_65", f = {
+import '../../assets/index34.css';const de = "_controls_t1re6_13", se = "_inline_t1re6_43", ce = "_embedded_t1re6_48", ae = "_fixed_t1re6_49", le = "_adaptive_t1re6_60", ue = "_measurement_t1re6_65", f = {
   controls: de,
-  default: "_default_1bkuq_28",
+  default: "_default_t1re6_28",
   inline: se,
   embedded: ce,
   fixed: ae,
   adaptive: le,
   measurement: ue,
-  "non-button-content": "_non-button-content_1bkuq_99",
-  "overflow-trigger": "_overflow-trigger_1bkuq_128"
+  "non-button-content": "_non-button-content_t1re6_99",
+  "overflow-trigger": "_overflow-trigger_t1re6_128"
 }, me = {
   primary: 3,
   danger: 2,
@@ -50,7 +50,7 @@ const h = (d, i) => {
 }, be = (d, i) => {
   const n = d.parentElement;
   if (!n) return;
-  const g = n.getBoundingClientRect(), o = getComputedStyle(n), r = g.width || n.clientWidth, M = g.left + h(o, "borderLeftWidth") + h(o, "paddingLeft"), y = g.left + r - h(o, "borderRightWidth") - h(o, "paddingRight"), _ = Array.from(n.children).slice(0, Array.from(n.children).indexOf(d)), W = _.reduce((m, l) => Math.max(m, l.getBoundingClientRect().right), M), c = _.length > 0 ? h(o, "columnGap") : 0, a = Math.max(0, y - W - c), x = (i == null ? void 0 : i.parent) === n ? Math.max(0, r - i.parentWidth) : 0;
+  const g = n.getBoundingClientRect(), o = getComputedStyle(n), r = g.width || n.clientWidth, C = g.left + h(o, "borderLeftWidth") + h(o, "paddingLeft"), B = g.left + r - h(o, "borderRightWidth") - h(o, "paddingRight"), _ = Array.from(n.children).slice(0, Array.from(n.children).indexOf(d)), W = _.reduce((m, l) => Math.max(m, l.getBoundingClientRect().right), C), c = _.length > 0 ? h(o, "columnGap") : 0, a = Math.max(0, B - W - c), x = (i == null ? void 0 : i.parent) === n ? Math.max(0, r - i.parentWidth) : 0;
   return {
     availableWidth: x > 0 ? Math.max(a, ((i == null ? void 0 : i.availableWidth) ?? 0) + x) : a,
     parent: n,
@@ -63,10 +63,10 @@ const h = (d, i) => {
   overflow: g,
   overflowAccessibleLabel: o = "More actions",
   variant: r = "default",
-  ...M
+  ...C
 }) => {
-  const y = Z.toArray(d), _ = [], W = [];
-  y.forEach((e) => {
+  const B = Z.toArray(d), _ = [], W = [];
+  B.forEach((e) => {
     ee(e) && e.type === re ? _.push(e) : W.push(e);
   });
   const c = _.map((e, s) => ({
@@ -78,10 +78,10 @@ const h = (d, i) => {
     index: s
   }) => P(e, {
     key: e.key ?? s
-  })), a = r === "embedded" || r === "fixed" && g === "menu", x = typeof n == "number" && Number.isFinite(n) ? Math.floor(n) : 0, m = r === "embedded" && x > 0 ? Math.min(c.length, x) : c.length, l = E(null), A = E(void 0), N = E(null), B = E(null), [q, C] = te(m), p = ne(() => {
-    var j, I, D;
+  })), a = r === "embedded" || r === "fixed" && g === "menu", x = typeof n == "number" && Number.isFinite(n) ? Math.floor(n) : 0, m = r === "embedded" && x > 0 ? Math.min(c.length, x) : c.length, l = M(null), A = M(void 0), N = M(null), E = M(null), [z, S] = te(m), p = ne(() => {
+    var I, q, D;
     if (!a) {
-      C(m);
+      S(m);
       return;
     }
     const e = l.current, s = N.current;
@@ -90,19 +90,19 @@ const h = (d, i) => {
     if (!R) return;
     const b = w.slice(0, c.length).map((t) => t.getBoundingClientRect().width);
     if (b.length !== c.length) return;
-    const u = getComputedStyle(e), H = h(u, "paddingLeft") + h(u, "paddingRight") + h(u, "borderLeftWidth") + h(u, "borderRightWidth"), J = ge(u.maxWidth), k = r === "embedded" ? be(e, A.current) : void 0;
-    k && (A.current = k);
-    const K = (k == null ? void 0 : k.availableWidth) ?? ((j = e.parentElement) == null ? void 0 : j.clientWidth) ?? 0, Q = ((I = window.visualViewport) == null ? void 0 : I.width) ?? document.documentElement.clientWidth, F = Math.min(...[J, K, Q].filter((t) => typeof t == "number" && Number.isFinite(t) && t > 0));
-    if (!Number.isFinite(F)) return;
-    const V = Math.max(0, F - H), O = ((D = B.current) == null ? void 0 : D.getBoundingClientRect().width) ?? 0, U = b.reduce((t, X) => t + X, 0);
-    if (m === c.length && O + U <= V) {
-      C((t) => t === m ? t : m);
+    const u = getComputedStyle(e), H = h(u, "paddingLeft") + h(u, "paddingRight") + h(u, "borderLeftWidth") + h(u, "borderRightWidth"), J = ge(u.maxWidth), y = r === "embedded" ? be(e, A.current) : void 0;
+    y && (A.current = y);
+    const K = (y == null ? void 0 : y.availableWidth) ?? ((I = e.parentElement) == null ? void 0 : I.clientWidth) ?? 0, Q = ((q = window.visualViewport) == null ? void 0 : q.width) ?? document.documentElement.clientWidth, V = Math.min(...[J, K, Q].filter((t) => typeof t == "number" && Number.isFinite(t) && t > 0));
+    if (!Number.isFinite(V)) return;
+    const O = Math.max(0, V - H), L = ((D = E.current) == null ? void 0 : D.getBoundingClientRect().width) ?? 0, U = b.reduce((t, X) => t + X, 0);
+    if (m === c.length && L + U <= O) {
+      S((t) => t === m ? t : m);
       return;
     }
-    let L = O + R.getBoundingClientRect().width, S = 0;
-    for (let t = 0; t < m && !(L + b[t] > V); t += 1)
-      L += b[t], S = t + 1;
-    C((t) => t === S ? t : S);
+    let j = L + R.getBoundingClientRect().width, k = 0;
+    for (let t = 0; t < m && !(j + b[t] > O); t += 1)
+      j += b[t], k = t + 1;
+    S((t) => t === k ? t : k);
   }, [a, c.length, r, m]);
   if (ie(() => {
     var s, w, R, b;
@@ -110,14 +110,14 @@ const h = (d, i) => {
     const e = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(p);
     return l.current && (e == null || e.observe(l.current)), (s = l.current) != null && s.parentElement && (e == null || e.observe(l.current.parentElement)), r === "embedded" && ((w = l.current) != null && w.parentElement) && Array.from(l.current.parentElement.children).forEach((u) => {
       u !== l.current && (e == null || e.observe(u));
-    }), B.current && (e == null || e.observe(B.current)), window.addEventListener("resize", p), (R = window.visualViewport) == null || R.addEventListener("resize", p), (b = document.fonts) == null || b.ready.then(p), () => {
+    }), E.current && (e == null || e.observe(E.current)), window.addEventListener("resize", p), (R = window.visualViewport) == null || R.addEventListener("resize", p), (b = document.fonts) == null || b.ready.then(p), () => {
       var u;
       e == null || e.disconnect(), window.removeEventListener("resize", p), (u = window.visualViewport) == null || u.removeEventListener("resize", p);
     };
-  }, [a, d, p, r]), y.length === 0)
+  }, [a, d, p, r]), B.length === 0)
     return null;
-  const $ = a ? c.slice(0, q) : c, z = a ? c.slice(q) : [];
-  return /* @__PURE__ */ G("div", { "data-component": "controls", "data-dynamic-position": r === "fixed" ? !0 : void 0, className: Y(f.controls, fe[r], a && f.adaptive, i), ref: l, ...M, children: [
+  const $ = a ? c.slice(0, z) : c, F = a ? c.slice(z) : [];
+  return /* @__PURE__ */ G("div", { "data-component": "controls", "data-dynamic-position": r === "fixed" ? !0 : void 0, "data-adaptive": a ? !0 : void 0, className: Y(f.controls, fe[r], a && f.adaptive, i), ref: l, ...C, children: [
     a && /* @__PURE__ */ G("div", { "aria-hidden": "true", className: f.measurement, ref: N, children: [
       c.map((e, s) => P(e, {
         "aria-hidden": !0,
@@ -129,9 +129,9 @@ const h = (d, i) => {
       })),
       /* @__PURE__ */ v(T, { triggerAccessibleLabel: o, children: null })
     ] }),
-    r !== "embedded" && W.length > 0 && /* @__PURE__ */ v("span", { className: f["non-button-content"], ref: B, children: W }),
+    r !== "embedded" && W.length > 0 && /* @__PURE__ */ v("span", { className: f["non-button-content"], ref: E, children: W }),
     $,
-    z.length > 0 && /* @__PURE__ */ v("span", { className: f["overflow-trigger"], children: /* @__PURE__ */ v(pe, { buttons: z, menuAccessibleLabel: o, triggerAccessibleLabel: o }) })
+    F.length > 0 && /* @__PURE__ */ v("span", { className: f["overflow-trigger"], children: /* @__PURE__ */ v(pe, { buttons: F, menuAccessibleLabel: o, triggerAccessibleLabel: o }) })
   ] });
 };
 export {

package/dist/components/controls/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport { type MenuAction, MenuActionList } from '../menu/action-list';\nimport { MenuPopover } from '../menu/menu-popover';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n  primary: 3,\n  danger: 2,\n  secondary: 1,\n  tertiary: 0,\n  simple: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n  default: styles.default,\n  embedded: styles.embedded,\n  fixed: styles.fixed,\n  inline: styles.inline,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n  children?: React.ReactNode;\n  maxVisibleButtons?: number;\n  overflow?: 'menu';\n  overflowAccessibleLabel?: string;\n  variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n  buttonVariantOrder[button.props.variant ?? 'secondary'];\n\nfunction OverflowMenu({\n  buttons,\n  menuAccessibleLabel,\n  triggerAccessibleLabel,\n}: {\n  buttons: React.ReactElement<ButtonProps>[];\n  menuAccessibleLabel: string;\n  triggerAccessibleLabel: string;\n}) {\n  const actions: MenuAction<React.ReactElement<ButtonProps>>[] = buttons.map((button) => ({\n    button,\n    isDanger: button.props.variant === 'danger',\n    value: button,\n  }));\n\n  return (\n    <MenuPopover triggerAccessibleLabel={triggerAccessibleLabel}>\n      {({ close, initialFocus }) => (\n        <MenuActionList\n          actions={actions}\n          initialFocus={initialFocus}\n          menuAccessibleLabel={menuAccessibleLabel}\n          onSelect={() => close()}\n          usesMenuSemantics\n        />\n      )}\n    </MenuPopover>\n  );\n}\n\nconst numericStyle = (style: CSSStyleDeclaration, property: keyof CSSStyleDeclaration) => {\n  const value = Number.parseFloat(String(style[property]));\n  return Number.isFinite(value) ? value : 0;\n};\n\nconst pixelStyle = (value: string) => {\n  if (!value.trim().endsWith('px')) return undefined;\n  const parsedValue = Number.parseFloat(value);\n  return Number.isFinite(parsedValue) ? parsedValue : undefined;\n};\n\ntype EmbeddedLayout = {\n  availableWidth: number;\n  parent: HTMLElement;\n  parentWidth: number;\n};\n\nconst availableWidthToRight = (\n  controls: HTMLDivElement,\n  previousLayout?: EmbeddedLayout\n): EmbeddedLayout | undefined => {\n  const parent = controls.parentElement;\n  if (!parent) return undefined;\n\n  const parentRect = parent.getBoundingClientRect();\n  const parentStyle = getComputedStyle(parent);\n  const parentWidth = parentRect.width || parent.clientWidth;\n  const contentLeft =\n    parentRect.left +\n    numericStyle(parentStyle, 'borderLeftWidth') +\n    numericStyle(parentStyle, 'paddingLeft');\n  const contentRight =\n    parentRect.left +\n    parentWidth -\n    numericStyle(parentStyle, 'borderRightWidth') -\n    numericStyle(parentStyle, 'paddingRight');\n  const precedingSiblings = Array.from(parent.children).slice(\n    0,\n    Array.from(parent.children).indexOf(controls)\n  );\n  const occupiedRight = precedingSiblings.reduce(\n    (right, sibling) => Math.max(right, sibling.getBoundingClientRect().right),\n    contentLeft\n  );\n  const gap = precedingSiblings.length > 0 ? numericStyle(parentStyle, 'columnGap') : 0;\n\n  const measuredAvailableWidth = Math.max(0, contentRight - occupiedRight - gap);\n  const parentWidthIncrease =\n    previousLayout?.parent === parent ? Math.max(0, parentWidth - previousLayout.parentWidth) : 0;\n\n  return {\n    availableWidth:\n      parentWidthIncrease > 0\n        ? Math.max(\n            measuredAvailableWidth,\n            (previousLayout?.availableWidth ?? 0) + parentWidthIncrease\n          )\n        : measuredAvailableWidth,\n    parent,\n    parentWidth,\n  };\n};\n\nexport const Controls = ({\n  children,\n  className,\n  maxVisibleButtons,\n  overflow,\n  overflowAccessibleLabel = 'More actions',\n  variant = 'default',\n  ...props\n}: ControlsProps) => {\n  const childArray = Children.toArray(children);\n  const buttons: React.ReactElement<ButtonProps>[] = [];\n  const nonButtons: React.ReactNode[] = [];\n\n  childArray.forEach((child) => {\n    if (isValidElement<ButtonProps>(child) && child.type === Button) {\n      buttons.push(child);\n    } else {\n      nonButtons.push(child);\n    }\n  });\n\n  const sortedButtons = buttons\n    .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n    .sort((a, b) => a.rank - b.rank || a.index - b.index)\n    .map(({ button, index }) =>\n      cloneElement(button, {\n        key: button.key ?? index,\n      })\n    );\n\n  const adaptive = variant === 'embedded' || (variant === 'fixed' && overflow === 'menu');\n  const normalizedMaxVisibleButtons =\n    typeof maxVisibleButtons === 'number' && Number.isFinite(maxVisibleButtons)\n      ? Math.floor(maxVisibleButtons)\n      : 0;\n  const visibleButtonLimit =\n    variant === 'embedded' && normalizedMaxVisibleButtons > 0\n      ? Math.min(sortedButtons.length, normalizedMaxVisibleButtons)\n      : sortedButtons.length;\n  const controlsRef = useRef<HTMLDivElement>(null);\n  const embeddedLayoutRef = useRef<EmbeddedLayout>(undefined);\n  const measurementRef = useRef<HTMLDivElement>(null);\n  const nonButtonsRef = useRef<HTMLSpanElement>(null);\n  const [visibleButtonCount, setVisibleButtonCount] = useState(visibleButtonLimit);\n\n  const updateOverflow = useCallback(() => {\n    if (!adaptive) {\n      setVisibleButtonCount(visibleButtonLimit);\n      return;\n    }\n\n    const controls = controlsRef.current;\n    const measurement = measurementRef.current;\n    if (!controls || !measurement) return;\n\n    const measurementButtons = Array.from(\n      measurement.querySelectorAll<HTMLElement>('[data-component=\"button\"]')\n    );\n    const trigger = measurementButtons.at(-1);\n    if (!trigger) return;\n\n    const buttonWidths = measurementButtons\n      .slice(0, sortedButtons.length)\n      .map((button) => button.getBoundingClientRect().width);\n    if (buttonWidths.length !== sortedButtons.length) return;\n\n    const style = getComputedStyle(controls);\n    const horizontalChrome =\n      numericStyle(style, 'paddingLeft') +\n      numericStyle(style, 'paddingRight') +\n      numericStyle(style, 'borderLeftWidth') +\n      numericStyle(style, 'borderRightWidth');\n    const configuredMaxWidth = pixelStyle(style.maxWidth);\n    const embeddedLayout =\n      variant === 'embedded'\n        ? availableWidthToRight(controls, embeddedLayoutRef.current)\n        : undefined;\n    if (embeddedLayout) embeddedLayoutRef.current = embeddedLayout;\n    const layoutWidth = embeddedLayout?.availableWidth ?? controls.parentElement?.clientWidth ?? 0;\n    const viewportWidth = window.visualViewport?.width ?? document.documentElement.clientWidth;\n    const outerAvailableWidth = Math.min(\n      ...[configuredMaxWidth, layoutWidth, viewportWidth].filter(\n        (width): width is number => typeof width === 'number' && Number.isFinite(width) && width > 0\n      )\n    );\n    if (!Number.isFinite(outerAvailableWidth)) return;\n\n    const availableWidth = Math.max(0, outerAvailableWidth - horizontalChrome);\n    const prefixWidth = nonButtonsRef.current?.getBoundingClientRect().width ?? 0;\n    const actionWidth = buttonWidths.reduce((total, width) => total + width, 0);\n\n    if (\n      visibleButtonLimit === sortedButtons.length &&\n      prefixWidth + actionWidth <= availableWidth\n    ) {\n      setVisibleButtonCount((current) =>\n        current === visibleButtonLimit ? current : visibleButtonLimit\n      );\n      return;\n    }\n\n    let usedWidth = prefixWidth + trigger.getBoundingClientRect().width;\n    let nextVisibleButtonCount = 0;\n    for (let index = 0; index < visibleButtonLimit; index += 1) {\n      if (usedWidth + buttonWidths[index] > availableWidth) break;\n      usedWidth += buttonWidths[index];\n      nextVisibleButtonCount = index + 1;\n    }\n\n    setVisibleButtonCount((current) =>\n      current === nextVisibleButtonCount ? current : nextVisibleButtonCount\n    );\n  }, [adaptive, sortedButtons.length, variant, visibleButtonLimit]);\n\n  useLayoutEffect(() => {\n    updateOverflow();\n\n    if (!adaptive) return undefined;\n\n    const observer =\n      typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateOverflow);\n    if (controlsRef.current) observer?.observe(controlsRef.current);\n    if (controlsRef.current?.parentElement) observer?.observe(controlsRef.current.parentElement);\n    if (variant === 'embedded' && controlsRef.current?.parentElement) {\n      Array.from(controlsRef.current.parentElement.children).forEach((sibling) => {\n        if (sibling !== controlsRef.current) observer?.observe(sibling);\n      });\n    }\n    if (nonButtonsRef.current) observer?.observe(nonButtonsRef.current);\n\n    window.addEventListener('resize', updateOverflow);\n    window.visualViewport?.addEventListener('resize', updateOverflow);\n    void document.fonts?.ready.then(updateOverflow);\n\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener('resize', updateOverflow);\n      window.visualViewport?.removeEventListener('resize', updateOverflow);\n    };\n  }, [adaptive, children, updateOverflow, variant]);\n\n  if (childArray.length === 0) {\n    return null;\n  }\n\n  const visibleButtons = adaptive ? sortedButtons.slice(0, visibleButtonCount) : sortedButtons;\n  const overflowedButtons = adaptive ? sortedButtons.slice(visibleButtonCount) : [];\n\n  return (\n    <div\n      data-component='controls'\n      data-dynamic-position={variant === 'fixed' ? true : undefined}\n      className={cx(styles.controls, variants[variant], adaptive && styles.adaptive, className)}\n      ref={controlsRef}\n      {...props}\n    >\n      {adaptive && (\n        <div\n          aria-hidden='true'\n          className={styles.measurement}\n          ref={measurementRef}\n        >\n          {sortedButtons.map((button, index) =>\n            cloneElement(button, {\n              'aria-hidden': true,\n              id: undefined,\n              key: `measure-${String(button.key ?? index)}`,\n              onClick: undefined,\n              ref: undefined,\n              tabIndex: -1,\n            })\n          )}\n          <MenuPopover triggerAccessibleLabel={overflowAccessibleLabel}>{null}</MenuPopover>\n        </div>\n      )}\n      {variant !== 'embedded' && nonButtons.length > 0 && (\n        <span\n          className={styles['non-button-content']}\n          ref={nonButtonsRef}\n        >\n          {nonButtons}\n        </span>\n      )}\n      {visibleButtons}\n      {overflowedButtons.length > 0 && (\n        <span className={styles['overflow-trigger']}>\n          <OverflowMenu\n            buttons={overflowedButtons}\n            menuAccessibleLabel={overflowAccessibleLabel}\n            triggerAccessibleLabel={overflowAccessibleLabel}\n          />\n        </span>\n      )}\n    </div>\n  );\n};\n"],"names":["buttonVariantOrder","primary","danger","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","value","jsx","MenuPopover","close","initialFocus","MenuActionList","numericStyle","style","property","Number","parseFloat","String","isFinite","pixelStyle","trim","endsWith","parsedValue","undefined","availableWidthToRight","controls","previousLayout","parent","parentElement","parentRect","getBoundingClientRect","parentStyle","getComputedStyle","parentWidth","width","clientWidth","contentLeft","left","contentRight","precedingSiblings","Array","from","children","slice","indexOf","occupiedRight","reduce","right","sibling","Math","max","gap","length","measuredAvailableWidth","parentWidthIncrease","availableWidth","Controls","className","maxVisibleButtons","overflow","overflowAccessibleLabel","childArray","Children","toArray","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","index","rank","sort","a","b","cloneElement","key","adaptive","normalizedMaxVisibleButtons","floor","visibleButtonLimit","min","controlsRef","useRef","embeddedLayoutRef","measurementRef","nonButtonsRef","visibleButtonCount","setVisibleButtonCount","useState","updateOverflow","useCallback","current","measurement","measurementButtons","querySelectorAll","trigger","at","buttonWidths","horizontalChrome","configuredMaxWidth","maxWidth","embeddedLayout","layoutWidth","viewportWidth","window","visualViewport","document","documentElement","outerAvailableWidth","filter","prefixWidth","actionWidth","total","usedWidth","nextVisibleButtonCount","useLayoutEffect","observer","ResizeObserver","observe","addEventListener","fonts","ready","then","disconnect","removeEventListener","visibleButtons","overflowedButtons","jsxs","cx","id","onClick","ref","tabIndex"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport { type MenuAction, MenuActionList } from '../menu/action-list';\nimport { MenuPopover } from '../menu/menu-popover';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n  primary: 3,\n  danger: 2,\n  secondary: 1,\n  tertiary: 0,\n  simple: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n  default: styles.default,\n  embedded: styles.embedded,\n  fixed: styles.fixed,\n  inline: styles.inline,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n  children?: React.ReactNode;\n  maxVisibleButtons?: number;\n  overflow?: 'menu';\n  overflowAccessibleLabel?: string;\n  variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n  buttonVariantOrder[button.props.variant ?? 'secondary'];\n\nfunction OverflowMenu({\n  buttons,\n  menuAccessibleLabel,\n  triggerAccessibleLabel,\n}: {\n  buttons: React.ReactElement<ButtonProps>[];\n  menuAccessibleLabel: string;\n  triggerAccessibleLabel: string;\n}) {\n  const actions: MenuAction<React.ReactElement<ButtonProps>>[] = buttons.map((button) => ({\n    button,\n    isDanger: button.props.variant === 'danger',\n    value: button,\n  }));\n\n  return (\n    <MenuPopover triggerAccessibleLabel={triggerAccessibleLabel}>\n      {({ close, initialFocus }) => (\n        <MenuActionList\n          actions={actions}\n          initialFocus={initialFocus}\n          menuAccessibleLabel={menuAccessibleLabel}\n          onSelect={() => close()}\n          usesMenuSemantics\n        />\n      )}\n    </MenuPopover>\n  );\n}\n\nconst numericStyle = (style: CSSStyleDeclaration, property: keyof CSSStyleDeclaration) => {\n  const value = Number.parseFloat(String(style[property]));\n  return Number.isFinite(value) ? value : 0;\n};\n\nconst pixelStyle = (value: string) => {\n  if (!value.trim().endsWith('px')) return undefined;\n  const parsedValue = Number.parseFloat(value);\n  return Number.isFinite(parsedValue) ? parsedValue : undefined;\n};\n\ntype EmbeddedLayout = {\n  availableWidth: number;\n  parent: HTMLElement;\n  parentWidth: number;\n};\n\nconst availableWidthToRight = (\n  controls: HTMLDivElement,\n  previousLayout?: EmbeddedLayout\n): EmbeddedLayout | undefined => {\n  const parent = controls.parentElement;\n  if (!parent) return undefined;\n\n  const parentRect = parent.getBoundingClientRect();\n  const parentStyle = getComputedStyle(parent);\n  const parentWidth = parentRect.width || parent.clientWidth;\n  const contentLeft =\n    parentRect.left +\n    numericStyle(parentStyle, 'borderLeftWidth') +\n    numericStyle(parentStyle, 'paddingLeft');\n  const contentRight =\n    parentRect.left +\n    parentWidth -\n    numericStyle(parentStyle, 'borderRightWidth') -\n    numericStyle(parentStyle, 'paddingRight');\n  const precedingSiblings = Array.from(parent.children).slice(\n    0,\n    Array.from(parent.children).indexOf(controls)\n  );\n  const occupiedRight = precedingSiblings.reduce(\n    (right, sibling) => Math.max(right, sibling.getBoundingClientRect().right),\n    contentLeft\n  );\n  const gap = precedingSiblings.length > 0 ? numericStyle(parentStyle, 'columnGap') : 0;\n\n  const measuredAvailableWidth = Math.max(0, contentRight - occupiedRight - gap);\n  const parentWidthIncrease =\n    previousLayout?.parent === parent ? Math.max(0, parentWidth - previousLayout.parentWidth) : 0;\n\n  return {\n    availableWidth:\n      parentWidthIncrease > 0\n        ? Math.max(\n            measuredAvailableWidth,\n            (previousLayout?.availableWidth ?? 0) + parentWidthIncrease\n          )\n        : measuredAvailableWidth,\n    parent,\n    parentWidth,\n  };\n};\n\nexport const Controls = ({\n  children,\n  className,\n  maxVisibleButtons,\n  overflow,\n  overflowAccessibleLabel = 'More actions',\n  variant = 'default',\n  ...props\n}: ControlsProps) => {\n  const childArray = Children.toArray(children);\n  const buttons: React.ReactElement<ButtonProps>[] = [];\n  const nonButtons: React.ReactNode[] = [];\n\n  childArray.forEach((child) => {\n    if (isValidElement<ButtonProps>(child) && child.type === Button) {\n      buttons.push(child);\n    } else {\n      nonButtons.push(child);\n    }\n  });\n\n  const sortedButtons = buttons\n    .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n    .sort((a, b) => a.rank - b.rank || a.index - b.index)\n    .map(({ button, index }) =>\n      cloneElement(button, {\n        key: button.key ?? index,\n      })\n    );\n\n  const adaptive = variant === 'embedded' || (variant === 'fixed' && overflow === 'menu');\n  const normalizedMaxVisibleButtons =\n    typeof maxVisibleButtons === 'number' && Number.isFinite(maxVisibleButtons)\n      ? Math.floor(maxVisibleButtons)\n      : 0;\n  const visibleButtonLimit =\n    variant === 'embedded' && normalizedMaxVisibleButtons > 0\n      ? Math.min(sortedButtons.length, normalizedMaxVisibleButtons)\n      : sortedButtons.length;\n  const controlsRef = useRef<HTMLDivElement>(null);\n  const embeddedLayoutRef = useRef<EmbeddedLayout>(undefined);\n  const measurementRef = useRef<HTMLDivElement>(null);\n  const nonButtonsRef = useRef<HTMLSpanElement>(null);\n  const [visibleButtonCount, setVisibleButtonCount] = useState(visibleButtonLimit);\n\n  const updateOverflow = useCallback(() => {\n    if (!adaptive) {\n      setVisibleButtonCount(visibleButtonLimit);\n      return;\n    }\n\n    const controls = controlsRef.current;\n    const measurement = measurementRef.current;\n    if (!controls || !measurement) return;\n\n    const measurementButtons = Array.from(\n      measurement.querySelectorAll<HTMLElement>('[data-component=\"button\"]')\n    );\n    const trigger = measurementButtons.at(-1);\n    if (!trigger) return;\n\n    const buttonWidths = measurementButtons\n      .slice(0, sortedButtons.length)\n      .map((button) => button.getBoundingClientRect().width);\n    if (buttonWidths.length !== sortedButtons.length) return;\n\n    const style = getComputedStyle(controls);\n    const horizontalChrome =\n      numericStyle(style, 'paddingLeft') +\n      numericStyle(style, 'paddingRight') +\n      numericStyle(style, 'borderLeftWidth') +\n      numericStyle(style, 'borderRightWidth');\n    const configuredMaxWidth = pixelStyle(style.maxWidth);\n    const embeddedLayout =\n      variant === 'embedded'\n        ? availableWidthToRight(controls, embeddedLayoutRef.current)\n        : undefined;\n    if (embeddedLayout) embeddedLayoutRef.current = embeddedLayout;\n    const layoutWidth = embeddedLayout?.availableWidth ?? controls.parentElement?.clientWidth ?? 0;\n    const viewportWidth = window.visualViewport?.width ?? document.documentElement.clientWidth;\n    const outerAvailableWidth = Math.min(\n      ...[configuredMaxWidth, layoutWidth, viewportWidth].filter(\n        (width): width is number => typeof width === 'number' && Number.isFinite(width) && width > 0\n      )\n    );\n    if (!Number.isFinite(outerAvailableWidth)) return;\n\n    const availableWidth = Math.max(0, outerAvailableWidth - horizontalChrome);\n    const prefixWidth = nonButtonsRef.current?.getBoundingClientRect().width ?? 0;\n    const actionWidth = buttonWidths.reduce((total, width) => total + width, 0);\n\n    if (\n      visibleButtonLimit === sortedButtons.length &&\n      prefixWidth + actionWidth <= availableWidth\n    ) {\n      setVisibleButtonCount((current) =>\n        current === visibleButtonLimit ? current : visibleButtonLimit\n      );\n      return;\n    }\n\n    let usedWidth = prefixWidth + trigger.getBoundingClientRect().width;\n    let nextVisibleButtonCount = 0;\n    for (let index = 0; index < visibleButtonLimit; index += 1) {\n      if (usedWidth + buttonWidths[index] > availableWidth) break;\n      usedWidth += buttonWidths[index];\n      nextVisibleButtonCount = index + 1;\n    }\n\n    setVisibleButtonCount((current) =>\n      current === nextVisibleButtonCount ? current : nextVisibleButtonCount\n    );\n  }, [adaptive, sortedButtons.length, variant, visibleButtonLimit]);\n\n  useLayoutEffect(() => {\n    updateOverflow();\n\n    if (!adaptive) return undefined;\n\n    const observer =\n      typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateOverflow);\n    if (controlsRef.current) observer?.observe(controlsRef.current);\n    if (controlsRef.current?.parentElement) observer?.observe(controlsRef.current.parentElement);\n    if (variant === 'embedded' && controlsRef.current?.parentElement) {\n      Array.from(controlsRef.current.parentElement.children).forEach((sibling) => {\n        if (sibling !== controlsRef.current) observer?.observe(sibling);\n      });\n    }\n    if (nonButtonsRef.current) observer?.observe(nonButtonsRef.current);\n\n    window.addEventListener('resize', updateOverflow);\n    window.visualViewport?.addEventListener('resize', updateOverflow);\n    void document.fonts?.ready.then(updateOverflow);\n\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener('resize', updateOverflow);\n      window.visualViewport?.removeEventListener('resize', updateOverflow);\n    };\n  }, [adaptive, children, updateOverflow, variant]);\n\n  if (childArray.length === 0) {\n    return null;\n  }\n\n  const visibleButtons = adaptive ? sortedButtons.slice(0, visibleButtonCount) : sortedButtons;\n  const overflowedButtons = adaptive ? sortedButtons.slice(visibleButtonCount) : [];\n\n  return (\n    <div\n      data-component='controls'\n      data-dynamic-position={variant === 'fixed' ? true : undefined}\n      data-adaptive={adaptive ? true : undefined}\n      className={cx(styles.controls, variants[variant], adaptive && styles.adaptive, className)}\n      ref={controlsRef}\n      {...props}\n    >\n      {adaptive && (\n        <div\n          aria-hidden='true'\n          className={styles.measurement}\n          ref={measurementRef}\n        >\n          {sortedButtons.map((button, index) =>\n            cloneElement(button, {\n              'aria-hidden': true,\n              id: undefined,\n              key: `measure-${String(button.key ?? index)}`,\n              onClick: undefined,\n              ref: undefined,\n              tabIndex: -1,\n            })\n          )}\n          <MenuPopover triggerAccessibleLabel={overflowAccessibleLabel}>{null}</MenuPopover>\n        </div>\n      )}\n      {variant !== 'embedded' && nonButtons.length > 0 && (\n        <span\n          className={styles['non-button-content']}\n          ref={nonButtonsRef}\n        >\n          {nonButtons}\n        </span>\n      )}\n      {visibleButtons}\n      {overflowedButtons.length > 0 && (\n        <span className={styles['overflow-trigger']}>\n          <OverflowMenu\n            buttons={overflowedButtons}\n            menuAccessibleLabel={overflowAccessibleLabel}\n            triggerAccessibleLabel={overflowAccessibleLabel}\n          />\n        </span>\n      )}\n    </div>\n  );\n};\n"],"names":["buttonVariantOrder","primary","danger","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","value","jsx","MenuPopover","close","initialFocus","MenuActionList","numericStyle","style","property","Number","parseFloat","String","isFinite","pixelStyle","trim","endsWith","parsedValue","undefined","availableWidthToRight","controls","previousLayout","parent","parentElement","parentRect","getBoundingClientRect","parentStyle","getComputedStyle","parentWidth","width","clientWidth","contentLeft","left","contentRight","precedingSiblings","Array","from","children","slice","indexOf","occupiedRight","reduce","right","sibling","Math","max","gap","length","measuredAvailableWidth","parentWidthIncrease","availableWidth","Controls","className","maxVisibleButtons","overflow","overflowAccessibleLabel","childArray","Children","toArray","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","index","rank","sort","a","b","cloneElement","key","adaptive","normalizedMaxVisibleButtons","floor","visibleButtonLimit","min","controlsRef","useRef","embeddedLayoutRef","measurementRef","nonButtonsRef","visibleButtonCount","setVisibleButtonCount","useState","updateOverflow","useCallback","current","measurement","measurementButtons","querySelectorAll","trigger","at","buttonWidths","horizontalChrome","configuredMaxWidth","maxWidth","embeddedLayout","layoutWidth","viewportWidth","window","visualViewport","document","documentElement","outerAvailableWidth","filter","prefixWidth","actionWidth","total","usedWidth","nextVisibleButtonCount","useLayoutEffect","observer","ResizeObserver","observe","addEventListener","fonts","ready","then","disconnect","removeEventListener","visibleButtons","overflowedButtons","jsxs","cx","id","onClick","ref","tabIndex"],"mappings":";;;;;;;;;;;;;;;GAgBMA,KAAqB;AAAA,EACzBC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,WAAW;AAAA,EACXC,UAAU;AAAA,EACVC,QAAQ;AACV,GAEMC,KAAW;AAAA,EACfC,SAASC,EAAOD;AAAAA,EAChBE,UAAUD,EAAOC;AAAAA,EACjBC,OAAOF,EAAOE;AAAAA,EACdC,QAAQH,EAAOG;AACjB,GAUMC,KAAgBA,CAACC,MACrBb,GAAmBa,EAAOC,MAAMC,WAAW,WAAW;AAExD,SAASC,GAAa;AAAA,EACpBC,SAAAA;AAAAA,EACAC,qBAAAA;AAAAA,EACAC,wBAAAA;AAKF,GAAG;AACD,QAAMC,IAAyDH,EAAQI,IAAKR,CAAAA,OAAY;AAAA,IACtFA,QAAAA;AAAAA,IACAS,UAAUT,EAAOC,MAAMC,YAAY;AAAA,IACnCQ,OAAOV;AAAAA,EAAAA,EACP;AAEF,SACE,gBAAAW,EAACC,GAAA,EAAY,wBAAAN,GAA+C,kBAAA,gBACzD,UAAA,CAAC;AAAA,IAAEO,OAAAA;AAAAA,IAAOC,cAAAA;AAAAA,EAAAA,MACT,gBAAAH,EAACI,IAAA,EACC,SAAAR,GACA,cAAAO,GACA,qBAAAT,GACA,UAAU,MAAMQ,EAAAA,GAChB,mBAAiB,GAAA,CAAA,EAAA,CAGvB;AAEJ;AAEA,MAAMG,IAAeA,CAACC,GAA4BC,MAAwC;AACxF,QAAMR,IAAQS,OAAOC,WAAWC,OAAOJ,EAAMC,CAAQ,CAAC,CAAC;AACvD,SAAOC,OAAOG,SAASZ,CAAK,IAAIA,IAAQ;AAC1C,GAEMa,KAAaA,CAACb,MAAkB;AACpC,MAAI,CAACA,EAAMc,KAAAA,EAAOC,SAAS,IAAI,EAAG;AAClC,QAAMC,IAAcP,OAAOC,WAAWV,CAAK;AAC3C,SAAOS,OAAOG,SAASI,CAAW,IAAIA,IAAcC;AACtD,GAQMC,KAAwBA,CAC5BC,GACAC,MAC+B;AAC/B,QAAMC,IAASF,EAASG;AACxB,MAAI,CAACD,EAAQ;AAEb,QAAME,IAAaF,EAAOG,sBAAAA,GACpBC,IAAcC,iBAAiBL,CAAM,GACrCM,IAAcJ,EAAWK,SAASP,EAAOQ,aACzCC,IACJP,EAAWQ,OACXzB,EAAamB,GAAa,iBAAiB,IAC3CnB,EAAamB,GAAa,aAAa,GACnCO,IACJT,EAAWQ,OACXJ,IACArB,EAAamB,GAAa,kBAAkB,IAC5CnB,EAAamB,GAAa,cAAc,GACpCQ,IAAoBC,MAAMC,KAAKd,EAAOe,QAAQ,EAAEC,MACpD,GACAH,MAAMC,KAAKd,EAAOe,QAAQ,EAAEE,QAAQnB,CAAQ,CAC9C,GACMoB,IAAgBN,EAAkBO,OACtC,CAACC,GAAOC,MAAYC,KAAKC,IAAIH,GAAOC,EAAQlB,sBAAAA,EAAwBiB,KAAK,GACzEX,CACF,GACMe,IAAMZ,EAAkBa,SAAS,IAAIxC,EAAamB,GAAa,WAAW,IAAI,GAE9EsB,IAAyBJ,KAAKC,IAAI,GAAGZ,IAAeO,IAAgBM,CAAG,GACvEG,KACJ5B,KAAAA,gBAAAA,EAAgBC,YAAWA,IAASsB,KAAKC,IAAI,GAAGjB,IAAcP,EAAeO,WAAW,IAAI;AAE9F,SAAO;AAAA,IACLsB,gBACED,IAAsB,IAClBL,KAAKC,IACHG,KACC3B,KAAAA,gBAAAA,EAAgB6B,mBAAkB,KAAKD,CAC1C,IACAD;AAAAA,IACN1B,QAAAA;AAAAA,IACAM,aAAAA;AAAAA,EAAAA;AAEJ,GAEauB,KAAWA,CAAC;AAAA,EACvBd,UAAAA;AAAAA,EACAe,WAAAA;AAAAA,EACAC,mBAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,yBAAAA,IAA0B;AAAA,EAC1B9D,SAAAA,IAAU;AAAA,EACV,GAAGD;AACU,MAAM;AACnB,QAAMgE,IAAaC,EAASC,QAAQrB,CAAQ,GACtC1C,IAA6C,CAAA,GAC7CgE,IAAgC,CAAA;AAEtCH,EAAAA,EAAWI,QAASC,CAAAA,MAAU;AAC5B,IAAIC,GAA4BD,CAAK,KAAKA,EAAME,SAASC,KACvDrE,EAAQsE,KAAKJ,CAAK,IAElBF,EAAWM,KAAKJ,CAAK;AAAA,EAEzB,CAAC;AAED,QAAMK,IAAgBvE,EACnBI,IAAI,CAACR,GAAQ4E,OAAW;AAAA,IAAE5E,QAAAA;AAAAA,IAAQ4E,OAAAA;AAAAA,IAAOC,MAAM9E,GAAcC,CAAM;AAAA,EAAA,EAAI,EACvE8E,KAAK,CAACC,GAAGC,MAAMD,EAAEF,OAAOG,EAAEH,QAAQE,EAAEH,QAAQI,EAAEJ,KAAK,EACnDpE,IAAI,CAAC;AAAA,IAAER,QAAAA;AAAAA,IAAQ4E,OAAAA;AAAAA,EAAAA,MACdK,EAAajF,GAAQ;AAAA,IACnBkF,KAAKlF,EAAOkF,OAAON;AAAAA,EAAAA,CACpB,CACH,GAEIO,IAAWjF,MAAY,cAAeA,MAAY,WAAW6D,MAAa,QAC1EqB,IACJ,OAAOtB,KAAsB,YAAY3C,OAAOG,SAASwC,CAAiB,IACtET,KAAKgC,MAAMvB,CAAiB,IAC5B,GACAwB,IACJpF,MAAY,cAAckF,IAA8B,IACpD/B,KAAKkC,IAAIZ,EAAcnB,QAAQ4B,CAA2B,IAC1DT,EAAcnB,QACdgC,IAAcC,EAAuB,IAAI,GACzCC,IAAoBD,EAAuB9D,MAAS,GACpDgE,IAAiBF,EAAuB,IAAI,GAC5CG,IAAgBH,EAAwB,IAAI,GAC5C,CAACI,GAAoBC,CAAqB,IAAIC,GAAST,CAAkB,GAEzEU,IAAiBC,GAAY,MAAM;;AACvC,QAAI,CAACd,GAAU;AACbW,MAAAA,EAAsBR,CAAkB;AACxC;AAAA,IACF;AAEA,UAAMzD,IAAW2D,EAAYU,SACvBC,IAAcR,EAAeO;AACnC,QAAI,CAACrE,KAAY,CAACsE,EAAa;AAE/B,UAAMC,IAAqBxD,MAAMC,KAC/BsD,EAAYE,iBAA8B,2BAA2B,CACvE,GACMC,IAAUF,EAAmBG,GAAG,EAAE;AACxC,QAAI,CAACD,EAAS;AAEd,UAAME,IAAeJ,EAClBrD,MAAM,GAAG4B,EAAcnB,MAAM,EAC7BhD,IAAKR,CAAAA,MAAWA,EAAOkC,sBAAAA,EAAwBI,KAAK;AACvD,QAAIkE,EAAahD,WAAWmB,EAAcnB,OAAQ;AAElD,UAAMvC,IAAQmB,iBAAiBP,CAAQ,GACjC4E,IACJzF,EAAaC,GAAO,aAAa,IACjCD,EAAaC,GAAO,cAAc,IAClCD,EAAaC,GAAO,iBAAiB,IACrCD,EAAaC,GAAO,kBAAkB,GAClCyF,IAAqBnF,GAAWN,EAAM0F,QAAQ,GAC9CC,IACJ1G,MAAY,aACR0B,GAAsBC,GAAU6D,EAAkBQ,OAAO,IACzDvE;AACN,IAAIiF,QAAkCV,UAAUU;AAChD,UAAMC,KAAcD,KAAAA,gBAAAA,EAAgBjD,qBAAkB9B,IAAAA,EAASG,kBAATH,gBAAAA,EAAwBU,gBAAe,GACvFuE,MAAgBC,IAAAA,OAAOC,mBAAPD,gBAAAA,EAAuBzE,UAAS2E,SAASC,gBAAgB3E,aACzE4E,IAAsB9D,KAAKkC,IAC/B,GAAG,CAACmB,GAAoBG,GAAaC,CAAa,EAAEM,OAClD,CAAC9E,MAA2B,OAAOA,KAAU,YAAYnB,OAAOG,SAASgB,CAAK,KAAKA,IAAQ,CAC7F,CACF;AACA,QAAI,CAACnB,OAAOG,SAAS6F,CAAmB,EAAG;AAE3C,UAAMxD,IAAiBN,KAAKC,IAAI,GAAG6D,IAAsBV,CAAgB,GACnEY,MAAczB,IAAAA,EAAcM,YAAdN,gBAAAA,EAAuB1D,wBAAwBI,UAAS,GACtEgF,IAAcd,EAAatD,OAAO,CAACqE,GAAOjF,MAAUiF,IAAQjF,GAAO,CAAC;AAE1E,QACEgD,MAAuBX,EAAcnB,UACrC6D,IAAcC,KAAe3D,GAC7B;AACAmC,MAAAA,EAAuBI,CAAAA,MACrBA,MAAYZ,IAAqBY,IAAUZ,CAC7C;AACA;AAAA,IACF;AAEA,QAAIkC,IAAYH,IAAcf,EAAQpE,sBAAAA,EAAwBI,OAC1DmF,IAAyB;AAC7B,aAAS7C,IAAQ,GAAGA,IAAQU,KACtBkC,EAAAA,IAAYhB,EAAa5B,CAAK,IAAIjB,IADQiB,KAAS;AAEvD4C,MAAAA,KAAahB,EAAa5B,CAAK,GAC/B6C,IAAyB7C,IAAQ;AAGnCkB,IAAAA,EAAuBI,CAAAA,MACrBA,MAAYuB,IAAyBvB,IAAUuB,CACjD;AAAA,EACF,GAAG,CAACtC,GAAUR,EAAcnB,QAAQtD,GAASoF,CAAkB,CAAC;AA6BhE,MA3BAoC,GAAgB,MAAM;;AAGpB,QAFA1B,EAAAA,GAEI,CAACb,EAAU;AAEf,UAAMwC,IACJ,OAAOC,iBAAmB,MAAcjG,SAAY,IAAIiG,eAAe5B,CAAc;AACvF,WAAIR,EAAYU,YAASyB,KAAAA,QAAAA,EAAUE,QAAQrC,EAAYU,YACnDV,IAAAA,EAAYU,YAAZV,QAAAA,EAAqBxD,iCAAyB6F,QAAQrC,EAAYU,QAAQlE,iBAC1E9B,MAAY,gBAAcsF,IAAAA,EAAYU,YAAZV,QAAAA,EAAqBxD,kBACjDY,MAAMC,KAAK2C,EAAYU,QAAQlE,cAAcc,QAAQ,EAAEuB,QAASjB,CAAAA,MAAY;AAC1E,MAAIA,MAAYoC,EAAYU,YAASyB,KAAAA,QAAAA,EAAUE,QAAQzE;AAAAA,IACzD,CAAC,GAECwC,EAAcM,YAASyB,KAAAA,QAAAA,EAAUE,QAAQjC,EAAcM,WAE3Da,OAAOe,iBAAiB,UAAU9B,CAAc,IAChDe,IAAAA,OAAOC,mBAAPD,QAAAA,EAAuBe,iBAAiB,UAAU9B,KAC7CiB,IAAAA,SAASc,UAATd,QAAAA,EAAgBe,MAAMC,KAAKjC,IAEzB,MAAM;;AACX2B,MAAAA,KAAAA,QAAAA,EAAUO,cACVnB,OAAOoB,oBAAoB,UAAUnC,CAAc,IACnDe,IAAAA,OAAOC,mBAAPD,QAAAA,EAAuBoB,oBAAoB,UAAUnC;AAAAA,IACvD;AAAA,EACF,GAAG,CAACb,GAAUrC,GAAUkD,GAAgB9F,CAAO,CAAC,GAE5C+D,EAAWT,WAAW;AACxB,WAAO;AAGT,QAAM4E,IAAiBjD,IAAWR,EAAc5B,MAAM,GAAG8C,CAAkB,IAAIlB,GACzE0D,IAAoBlD,IAAWR,EAAc5B,MAAM8C,CAAkB,IAAI,CAAA;AAE/E,SACE,gBAAAyC,EAAC,OAAA,EACC,kBAAe,YACf,yBAAuBpI,MAAY,UAAU,KAAOyB,QACpD,iBAAewD,IAAW,KAAOxD,QACjC,WAAW4G,EAAG5I,EAAOkC,UAAUpC,GAASS,CAAO,GAAGiF,KAAYxF,EAAOwF,UAAUtB,CAAS,GACxF,KAAK2B,GACL,GAAIvF,GAEHkF,UAAAA;AAAAA,IAAAA,KACC,gBAAAmD,EAAC,SACC,eAAY,QACZ,WAAW3I,EAAOwG,aAClB,KAAKR,GAEJhB,UAAAA;AAAAA,MAAAA,EAAcnE,IAAI,CAACR,GAAQ4E,MAC1BK,EAAajF,GAAQ;AAAA,QACnB,eAAe;AAAA,QACfwI,IAAI7G;AAAAA,QACJuD,KAAK,WAAW7D,OAAOrB,EAAOkF,OAAON,CAAK,CAAC;AAAA,QAC3C6D,SAAS9G;AAAAA,QACT+G,KAAK/G;AAAAA,QACLgH,UAAU;AAAA,MAAA,CACX,CACH;AAAA,MACA,gBAAAhI,EAACC,GAAA,EAAY,wBAAwBoD,GAA0B,UAAA,KAAA,CAAK;AAAA,IAAA,GACtE;AAAA,IAED9D,MAAY,cAAckE,EAAWZ,SAAS,KAC7C,gBAAA7C,EAAC,QAAA,EACC,WAAWhB,EAAO,oBAAoB,GACtC,KAAKiG,GAEJxB,UAAAA,GACH;AAAA,IAEDgE;AAAAA,IACAC,EAAkB7E,SAAS,KAC1B,gBAAA7C,EAAC,QAAA,EAAK,WAAWhB,EAAO,kBAAkB,GACxC,UAAA,gBAAAgB,EAACR,MACC,SAASkI,GACT,qBAAqBrE,GACrB,wBAAwBA,GAAwB,EAAA,CAEpD;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/header/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index18.css');const r=require("react/jsx-runtime"),o=require("../../classix-5H4IWnMA.cjs"),u="_header_xu8zs_1",d="_jumbo_xu8zs_96",e={header:u,jumbo:d},n={default:e.default,jumbo:e.jumbo},c=({capitalize:t=!1,children:a,variant:s="default"})=>r.jsx("header",{className:o.t(e.header,n[s],t&&e.capitalize),"data-component":"header",children:a});exports.Header=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index18.css');const t=require("react/jsx-runtime"),u=require("../../classix-5H4IWnMA.cjs"),_="_header_1gh64_1",m="_controls_1gh64_67",j="_cta_1gh64_94",b="_jumbo_1gh64_136",e={header:_,controls:m,cta:j,"header-content":"_header-content_1gh64_106",jumbo:b},g={default:e.default,jumbo:e.jumbo},x=({backButton:o,capitalize:r=!1,children:d,controls:s,cta:a,header:l,subHeader:h,variant:i="default"})=>{const c=t.jsxs("div",{className:e["header-content"],children:[o,l,h]}),n=s?t.jsxs("div",{className:e.controls,children:[c,s]}):c;return t.jsxs("header",{className:u.t(e.header,g[i],r&&e.capitalize),"data-component":"header",children:[a?t.jsxs("div",{className:e.cta,children:[n,a]}):n,d]})};exports.Header=x;
 //# sourceMappingURL=index.cjs.map

package/dist/components/header/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/header/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport styles from './styles.module.css';\n\nconst variants = {\n  default: styles.default,\n  jumbo: styles.jumbo,\n};\n\nexport type HeaderProps = {\n  capitalize?: boolean;\n  children: React.ReactNode;\n  variant?: keyof typeof variants;\n};\n\nexport const Header = ({ capitalize = false, children, variant = 'default' }: HeaderProps) => {\n  return (\n    <header className={cx(styles.header, variants[variant], capitalize && styles.capitalize)}>\n      {children}\n    </header>\n  );\n};\n"],"names":["variants","default","styles","jumbo","Header","capitalize","children","variant","jsx","cx","header"],"mappings":"0NAIMA,EAAW,CACfC,QAASC,EAAOD,QAChBE,MAAOD,EAAOC,KAChB,EAQaC,EAASA,CAAC,CAAEC,WAAAA,EAAa,GAAOC,SAAAA,EAAUC,QAAAA,EAAU,SAAuB,IAEpFC,EAAAA,IAAC,SAAA,CAAO,UAAWC,EAAAA,EAAGP,EAAOQ,OAAQV,EAASO,CAAO,EAAGF,GAAcH,EAAOG,UAAU,EAAE,iBAAA,SACtFC,SAAAA,EACH"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/header/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport styles from './styles.module.css';\n\nconst variants = {\n  default: styles.default,\n  jumbo: styles.jumbo,\n};\n\nexport type HeaderProps = {\n  backButton?: React.ReactNode;\n  capitalize?: boolean;\n  children?: React.ReactNode;\n  controls?: React.ReactNode;\n  cta?: React.ReactNode;\n  header?: React.ReactNode;\n  subHeader?: React.ReactNode;\n  variant?: keyof typeof variants;\n};\n\nexport const Header = ({\n  backButton,\n  capitalize = false,\n  children,\n  controls,\n  cta,\n  header,\n  subHeader,\n  variant = 'default',\n}: HeaderProps) => {\n  const headerElement = (\n    <div className={styles['header-content']}>\n      {backButton}\n      {header}\n      {subHeader}\n    </div>\n  );\n\n  const headerWithControls = controls ? (\n    <div className={styles.controls}>\n      {headerElement}\n      {controls}\n    </div>\n  ) : (\n    headerElement\n  );\n\n  return (\n    <header className={cx(styles.header, variants[variant], capitalize && styles.capitalize)}>\n      {cta ? (\n        <div className={styles.cta}>\n          {headerWithControls}\n          {cta}\n        </div>\n      ) : (\n        headerWithControls\n      )}\n      {children}\n    </header>\n  );\n};\n"],"names":["variants","default","styles","jumbo","Header","backButton","capitalize","children","controls","cta","header","subHeader","variant","headerElement","jsxs","headerWithControls","cx"],"mappings":"kUAIMA,EAAW,CACfC,QAASC,EAAOD,QAChBE,MAAOD,EAAOC,KAChB,EAaaC,EAASA,CAAC,CACrBC,WAAAA,EACAC,WAAAA,EAAa,GACbC,SAAAA,EACAC,SAAAA,EACAC,IAAAA,EACAC,OAAAA,EACAC,UAAAA,EACAC,QAAAA,EAAU,SACC,IAAM,CACjB,MAAMC,EACJC,EAAAA,KAAC,MAAA,CAAI,UAAWZ,EAAO,gBAAgB,EACpCG,SAAAA,CAAAA,EACAK,EACAC,CAAAA,EACH,EAGII,EAAqBP,EACzBM,OAAC,MAAA,CAAI,UAAWZ,EAAOM,SACpBK,SAAAA,CAAAA,EACAL,CAAAA,CAAAA,CACH,EAEAK,EAGF,OACEC,EAAAA,KAAC,SAAA,CAAO,UAAWE,EAAAA,EAAGd,EAAOQ,OAAQV,EAASY,CAAO,EAAGN,GAAcJ,EAAOI,UAAU,EAAE,iBAAA,SACtFG,SAAAA,CAAAA,EACCK,EAAAA,KAAC,MAAA,CAAI,UAAWZ,EAAOO,IACpBM,SAAAA,CAAAA,EACAN,CAAAA,CAAAA,CACH,EAEAM,EAEDR,CAAAA,EACH,CAEJ"}

package/dist/components/header/index.js

@@ -1,17 +1,41 @@
-import { jsx as r } from "react/jsx-runtime";
-import { t as s } from "../../classix-DG18itHa.js";
-import '../../assets/index18.css';const d = "_header_xu8zs_1", m = "_jumbo_xu8zs_96", e = {
-  header: d,
-  jumbo: m
-}, u = {
+import { jsxs as t } from "react/jsx-runtime";
+import { t as _ } from "../../classix-DG18itHa.js";
+import '../../assets/index18.css';const i = "_header_1gh64_1", u = "_controls_1gh64_67", f = "_cta_1gh64_94", j = "_jumbo_1gh64_136", e = {
+  header: i,
+  controls: u,
+  cta: f,
+  "header-content": "_header-content_1gh64_106",
+  jumbo: j
+}, b = {
   default: e.default,
   jumbo: e.jumbo
-}, l = ({
-  capitalize: a = !1,
-  children: t,
-  variant: o = "default"
-}) => /* @__PURE__ */ r("header", { className: s(e.header, u[o], a && e.capitalize), "data-component": "header", children: t });
+}, v = ({
+  backButton: r,
+  capitalize: s = !1,
+  children: d,
+  controls: a,
+  cta: o,
+  header: h,
+  subHeader: l,
+  variant: m = "default"
+}) => {
+  const c = /* @__PURE__ */ t("div", { className: e["header-content"], children: [
+    r,
+    h,
+    l
+  ] }), n = a ? /* @__PURE__ */ t("div", { className: e.controls, children: [
+    c,
+    a
+  ] }) : c;
+  return /* @__PURE__ */ t("header", { className: _(e.header, b[m], s && e.capitalize), "data-component": "header", children: [
+    o ? /* @__PURE__ */ t("div", { className: e.cta, children: [
+      n,
+      o
+    ] }) : n,
+    d
+  ] });
+};
 export {
-  l as Header
+  v as Header
 };
 //# sourceMappingURL=index.js.map

package/dist/components/header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/header/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport styles from './styles.module.css';\n\nconst variants = {\n  default: styles.default,\n  jumbo: styles.jumbo,\n};\n\nexport type HeaderProps = {\n  capitalize?: boolean;\n  children: React.ReactNode;\n  variant?: keyof typeof variants;\n};\n\nexport const Header = ({ capitalize = false, children, variant = 'default' }: HeaderProps) => {\n  return (\n    <header className={cx(styles.header, variants[variant], capitalize && styles.capitalize)}>\n      {children}\n    </header>\n  );\n};\n"],"names":["variants","default","styles","jumbo","Header","capitalize","children","variant","jsx","cx","header"],"mappings":";;;;;GAIMA,IAAW;AAAA,EACfC,SAASC,EAAOD;AAAAA,EAChBE,OAAOD,EAAOC;AAChB,GAQaC,IAASA,CAAC;AAAA,EAAEC,YAAAA,IAAa;AAAA,EAAOC,UAAAA;AAAAA,EAAUC,SAAAA,IAAU;AAAuB,MAEpF,gBAAAC,EAAC,UAAA,EAAO,WAAWC,EAAGP,EAAOQ,QAAQV,EAASO,CAAO,GAAGF,KAAcH,EAAOG,UAAU,GAAE,kBAAA,UACtFC,UAAAA,GACH;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/header/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport styles from './styles.module.css';\n\nconst variants = {\n  default: styles.default,\n  jumbo: styles.jumbo,\n};\n\nexport type HeaderProps = {\n  backButton?: React.ReactNode;\n  capitalize?: boolean;\n  children?: React.ReactNode;\n  controls?: React.ReactNode;\n  cta?: React.ReactNode;\n  header?: React.ReactNode;\n  subHeader?: React.ReactNode;\n  variant?: keyof typeof variants;\n};\n\nexport const Header = ({\n  backButton,\n  capitalize = false,\n  children,\n  controls,\n  cta,\n  header,\n  subHeader,\n  variant = 'default',\n}: HeaderProps) => {\n  const headerElement = (\n    <div className={styles['header-content']}>\n      {backButton}\n      {header}\n      {subHeader}\n    </div>\n  );\n\n  const headerWithControls = controls ? (\n    <div className={styles.controls}>\n      {headerElement}\n      {controls}\n    </div>\n  ) : (\n    headerElement\n  );\n\n  return (\n    <header className={cx(styles.header, variants[variant], capitalize && styles.capitalize)}>\n      {cta ? (\n        <div className={styles.cta}>\n          {headerWithControls}\n          {cta}\n        </div>\n      ) : (\n        headerWithControls\n      )}\n      {children}\n    </header>\n  );\n};\n"],"names":["variants","default","styles","jumbo","Header","backButton","capitalize","children","controls","cta","header","subHeader","variant","headerElement","jsxs","headerWithControls","cx"],"mappings":";;;;;;;;GAIMA,IAAW;AAAA,EACfC,SAASC,EAAOD;AAAAA,EAChBE,OAAOD,EAAOC;AAChB,GAaaC,IAASA,CAAC;AAAA,EACrBC,YAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,UAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,SAAAA,IAAU;AACC,MAAM;AACjB,QAAMC,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAWZ,EAAO,gBAAgB,GACpCG,UAAAA;AAAAA,IAAAA;AAAAA,IACAK;AAAAA,IACAC;AAAAA,EAAAA,GACH,GAGII,IAAqBP,IACzB,gBAAAM,EAAC,OAAA,EAAI,WAAWZ,EAAOM,UACpBK,UAAAA;AAAAA,IAAAA;AAAAA,IACAL;AAAAA,EAAAA,EAAAA,CACH,IAEAK;AAGF,SACE,gBAAAC,EAAC,UAAA,EAAO,WAAWE,EAAGd,EAAOQ,QAAQV,EAASY,CAAO,GAAGN,KAAcJ,EAAOI,UAAU,GAAE,kBAAA,UACtFG,UAAAA;AAAAA,IAAAA,IACC,gBAAAK,EAAC,OAAA,EAAI,WAAWZ,EAAOO,KACpBM,UAAAA;AAAAA,MAAAA;AAAAA,MACAN;AAAAA,IAAAA,EAAAA,CACH,IAEAM;AAAAA,IAEDR;AAAAA,EAAAA,GACH;AAEJ;"}

package/dist/index.d.ts

@@ -329,11 +329,16 @@ declare type GroupProps = React.HTMLAttributes<HTMLDivElement> & {
     children: React.ReactNode;
 };
 
-export declare const Header: ({ capitalize, children, variant }: HeaderProps) => JSX.Element;
+export declare const Header: ({ backButton, capitalize, children, controls, cta, header, subHeader, variant, }: HeaderProps) => JSX.Element;
 
 declare type HeaderProps = {
+    backButton?: React.ReactNode;
     capitalize?: boolean;
-    children: React.ReactNode;
+    children?: React.ReactNode;
+    controls?: React.ReactNode;
+    cta?: React.ReactNode;
+    header?: React.ReactNode;
+    subHeader?: React.ReactNode;
     variant?: keyof typeof variants_7;
 };