tempest-react-sdk 0.73.0 → 0.75.0

package/dist/components/NotificationCenter/NotificationCenter.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenter.module.js","names":[],"sources":["../../../src/components/NotificationCenter/NotificationCenter.module.css"],"sourcesContent":[".panel {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.title {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    margin: 0;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.headerAction {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-primary);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    cursor: pointer;\n    white-space: nowrap;\n}\n\n.headerAction:hover {\n    text-decoration: underline;\n}\n\n.headerAction:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    overflow-y: auto;\n}\n\n.item {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.item:last-child {\n    border-bottom: none;\n}\n\n/*\n * Unread is marked by a left bar plus a tinted background, never by colour alone\n * — the distinction has to survive a monochrome display and colour blindness.\n * `aria-current` on the row carries the same information non-visually.\n */\n.item.unread {\n    background-color: var(--tempest-surface);\n    box-shadow: inset 3px 0 0 0 var(--tempest-primary);\n}\n\n.icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface-2, var(--tempest-surface));\n    color: var(--tempest-text-muted);\n}\n\n.body {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n}\n\n/*\n * The whole title/body block is one button so the hit target matches what the\n * user perceives as \"the notification\", instead of just its title text.\n */\n.trigger {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    text-align: left;\n    cursor: pointer;\n}\n\n.trigger:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.itemTitle {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n}\n\n.itemBody {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.time {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n\n.dismiss {\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-base);\n    line-height: 1;\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .dismiss:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.dismiss:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n"],"mappings":";"}
+{"version":3,"file":"NotificationCenter.module.js","names":[],"sources":["../../../src/components/NotificationCenter/NotificationCenter.module.css"],"sourcesContent":[".panel {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.title {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    margin: 0;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.headerAction {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-primary);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    cursor: pointer;\n    white-space: nowrap;\n}\n\n.headerAction:hover {\n    text-decoration: underline;\n}\n\n.headerAction:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n    border-radius: var(--tempest-radius-sm);\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    overflow-y: auto;\n}\n\n.item {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.item:last-child {\n    border-bottom: none;\n}\n\n/*\n * Unread is marked by a left bar plus a tinted background, never by colour alone\n * — the distinction has to survive a monochrome display and colour blindness.\n * `aria-current` on the row carries the same information non-visually.\n */\n.item.unread {\n    background-color: var(--tempest-surface);\n    box-shadow: inset 3px 0 0 0 var(--tempest-primary);\n}\n\n.icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface-2, var(--tempest-surface));\n    color: var(--tempest-text-muted);\n}\n\n.body {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n}\n\n/*\n * The whole title/body block is one button so the hit target matches what the\n * user perceives as \"the notification\", instead of just its title text.\n */\n.trigger {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    text-align: left;\n    cursor: pointer;\n}\n\n.trigger:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n    border-radius: var(--tempest-radius-sm);\n}\n\n.itemTitle {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n}\n\n.itemBody {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.time {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n\n.dismiss {\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-base);\n    line-height: 1;\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .dismiss:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.dismiss:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n"],"mappings":";"}

package/dist/components/Page/Page.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("./Page.module.cjs");let n=require("react/jsx-runtime");function r({title:r,eyebrow:i,description:a,actions:o,toolbar:s,footer:c,padded:l=!0,className:u,children:d,...f}){let p=r||i||a||o;return(0,n.jsxs)(`main`,{className:e.cn(t.default.page,l&&t.default.padded,u),...f,children:[p&&(0,n.jsxs)(`header`,{className:t.default.header,children:[(0,n.jsxs)(`div`,{className:t.default.headerText,children:[i&&(0,n.jsx)(`div`,{className:t.default.eyebrow,children:i}),r&&(0,n.jsx)(`h1`,{className:t.default.title,children:r}),a&&(0,n.jsx)(`p`,{className:t.default.description,children:a})]}),o&&(0,n.jsx)(`div`,{className:t.default.actions,children:o})]}),s&&(0,n.jsx)(`div`,{className:t.default.toolbar,children:s}),(0,n.jsx)(`div`,{className:t.default.content,children:d}),c&&(0,n.jsx)(`footer`,{className:t.default.footer,children:c})]})}exports.Page=r;
+const e=require("../../utils/cn.cjs"),t=require("../SectionHeader/SectionHeader.cjs"),n=require("./Page.module.cjs");let r=require("react/jsx-runtime");function i({title:i,eyebrow:a,description:o,actions:s,toolbar:c,footer:l,padded:u=!0,className:d,children:f,...p}){return(0,r.jsxs)(`main`,{className:e.cn(n.default.page,u&&n.default.padded,d),...p,children:[(0,r.jsx)(t.SectionHeader,{level:1,eyebrow:a,title:i,description:o,actions:s}),c&&(0,r.jsx)(`div`,{className:n.default.toolbar,children:c}),(0,r.jsx)(`div`,{className:n.default.content,children:f}),l&&(0,r.jsx)(`footer`,{className:n.default.footer,children:l})]})}exports.Page=i;
 //# sourceMappingURL=Page.cjs.map

package/dist/components/Page/Page.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Page.cjs","names":[],"sources":["../../../src/components/Page/Page.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a page shell is slots: eyebrow, title, description,\n * actions, toolbar, footer and children, with padded as the one behavioural switch.\n * Slots are the component.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Page.module.css\";\n\nexport interface PageProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n    /** Page title rendered as `<h1>`. */\n    title?: ReactNode;\n    /** Optional subtitle / breadcrumbs slot rendered above the title. */\n    eyebrow?: ReactNode;\n    /** Optional description rendered below the title. */\n    description?: ReactNode;\n    /** Right-side actions slot in the header (buttons, menus). */\n    actions?: ReactNode;\n    /** Sticky tab bar / filter row rendered just below the header. */\n    toolbar?: ReactNode;\n    /** Footer slot rendered at the bottom of the content area. */\n    footer?: ReactNode;\n    /** Page-level padding. Default `true`. */\n    padded?: boolean;\n    children?: ReactNode;\n}\n\n/**\n * Page wrapper with header + (optional) toolbar + content + footer. Pairs\n * with `Container` when you want a max-width content well.\n *\n * @example\n * <Page title=\"Pedidos\" description=\"Acompanhe seus pedidos\" actions={<Button>Novo</Button>}>\n *     <Table {...} />\n * </Page>\n */\nexport function Page({\n    title,\n    eyebrow,\n    description,\n    actions,\n    toolbar,\n    footer,\n    padded = true,\n    className,\n    children,\n    ...props\n}: PageProps) {\n    const hasHeader = title || eyebrow || description || actions;\n    return (\n        <main className={cn(styles.page, padded && styles.padded, className)} {...props}>\n            {hasHeader && (\n                <header className={styles.header}>\n                    <div className={styles.headerText}>\n                        {eyebrow && <div className={styles.eyebrow}>{eyebrow}</div>}\n                        {title && <h1 className={styles.title}>{title}</h1>}\n                        {description && <p className={styles.description}>{description}</p>}\n                    </div>\n                    {actions && <div className={styles.actions}>{actions}</div>}\n                </header>\n            )}\n            {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n            <div className={styles.content}>{children}</div>\n            {footer && <footer className={styles.footer}>{footer}</footer>}\n        </main>\n    );\n}\n"],"mappings":"wGAoCA,SAAgB,EAAK,CACjB,QACA,UACA,cACA,UACA,UACA,SACA,SAAS,GACT,YACA,WACA,GAAG,GACO,CACV,IAAM,EAAY,GAAS,GAAW,GAAe,EACrD,OACI,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,GAAU,EAAA,QAAO,OAAQ,CAAS,EAAG,GAAI,EAA1E,SAAA,CACK,IACG,EAAA,EAAA,KAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,OAA1B,SAAA,EACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,WAAvB,SAAA,CACK,IAAW,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,SAAA,CAAa,CAAA,EACzD,IAAS,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAW,EAAA,QAAO,MAAQ,SAAA,CAAU,CAAA,EACjD,IAAe,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAW,EAAA,QAAO,YAAc,SAAA,CAAe,CAAA,CACjE,CACJ,CAAA,EAAA,IAAW,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,SAAA,CAAa,CAAA,CACtD,IAEX,IAAW,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,SAAA,CAAa,CAAA,GAC1D,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,UAAc,CAAA,EAC9C,IAAU,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,OAAS,SAAA,CAAe,CAAA,CAC3D,GAEd"}
+{"version":3,"file":"Page.cjs","names":[],"sources":["../../../src/components/Page/Page.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a page shell is slots: eyebrow, title, description,\n * actions, toolbar, footer and children, with padded as the one behavioural switch.\n * Slots are the component.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { SectionHeader } from \"../SectionHeader\";\nimport styles from \"./Page.module.css\";\n\nexport interface PageProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n    /** Page title rendered as `<h1>`. */\n    title?: ReactNode;\n    /** Optional subtitle / breadcrumbs slot rendered above the title. */\n    eyebrow?: ReactNode;\n    /** Optional description rendered below the title. */\n    description?: ReactNode;\n    /** Right-side actions slot in the header (buttons, menus). */\n    actions?: ReactNode;\n    /** Sticky tab bar / filter row rendered just below the header. */\n    toolbar?: ReactNode;\n    /** Footer slot rendered at the bottom of the content area. */\n    footer?: ReactNode;\n    /** Page-level padding. Default `true`. */\n    padded?: boolean;\n    children?: ReactNode;\n}\n\n/**\n * Page wrapper with header + (optional) toolbar + content + footer. Pairs\n * with `Container` when you want a max-width content well.\n *\n * The header is a `SectionHeader` at `level={1}`, so the page title and the\n * `<h2>` of each section below it share one look; when every header slot is\n * empty no `<header>` is rendered.\n *\n * @example\n * <Page title=\"Pedidos\" description=\"Acompanhe seus pedidos\" actions={<Button>Novo</Button>}>\n *     <Table {...} />\n * </Page>\n */\nexport function Page({\n    title,\n    eyebrow,\n    description,\n    actions,\n    toolbar,\n    footer,\n    padded = true,\n    className,\n    children,\n    ...props\n}: PageProps) {\n    return (\n        <main className={cn(styles.page, padded && styles.padded, className)} {...props}>\n            <SectionHeader\n                level={1}\n                eyebrow={eyebrow}\n                title={title}\n                description={description}\n                actions={actions}\n            />\n            {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n            <div className={styles.content}>{children}</div>\n            {footer && <footer className={styles.footer}>{footer}</footer>}\n        </main>\n    );\n}\n"],"mappings":"wJAyCA,SAAgB,EAAK,CACjB,QACA,UACA,cACA,UACA,UACA,SACA,SAAS,GACT,YACA,WACA,GAAG,GACO,CACV,OACI,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,GAAU,EAAA,QAAO,OAAQ,CAAS,EAAG,GAAI,EAA1E,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,EAAA,cAAD,CACI,MAAO,EACE,UACF,QACM,cACJ,SACZ,CAAA,EACA,IAAW,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,SAAA,CAAa,CAAA,GAC1D,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,UAAc,CAAA,EAC9C,IAAU,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,OAAS,SAAA,CAAe,CAAA,CAC3D,GAEd"}

package/dist/components/Page/Page.js

@@ -1,52 +1,36 @@
 import { cn as e } from "../../utils/cn.js";
-import t from "./Page.module.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { SectionHeader as t } from "../SectionHeader/SectionHeader.js";
+import n from "./Page.module.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/Page/Page.tsx
-function i({ title: i, eyebrow: a, description: o, actions: s, toolbar: c, footer: l, padded: u = !0, className: d, children: f, ...p }) {
-	let m = i || a || o || s;
-	return /* @__PURE__ */ r("main", {
-		className: e(t.page, u && t.padded, d),
-		...p,
+function a({ title: a, eyebrow: o, description: s, actions: c, toolbar: l, footer: u, padded: d = !0, className: f, children: p, ...m }) {
+	return /* @__PURE__ */ i("main", {
+		className: e(n.page, d && n.padded, f),
+		...m,
 		children: [
-			m && /* @__PURE__ */ r("header", {
-				className: t.header,
-				children: [/* @__PURE__ */ r("div", {
-					className: t.headerText,
-					children: [
-						a && /* @__PURE__ */ n("div", {
-							className: t.eyebrow,
-							children: a
-						}),
-						i && /* @__PURE__ */ n("h1", {
-							className: t.title,
-							children: i
-						}),
-						o && /* @__PURE__ */ n("p", {
-							className: t.description,
-							children: o
-						})
-					]
-				}), s && /* @__PURE__ */ n("div", {
-					className: t.actions,
-					children: s
-				})]
+			/* @__PURE__ */ r(t, {
+				level: 1,
+				eyebrow: o,
+				title: a,
+				description: s,
+				actions: c
 			}),
-			c && /* @__PURE__ */ n("div", {
-				className: t.toolbar,
-				children: c
+			l && /* @__PURE__ */ r("div", {
+				className: n.toolbar,
+				children: l
 			}),
-			/* @__PURE__ */ n("div", {
-				className: t.content,
-				children: f
+			/* @__PURE__ */ r("div", {
+				className: n.content,
+				children: p
 			}),
-			l && /* @__PURE__ */ n("footer", {
-				className: t.footer,
-				children: l
+			u && /* @__PURE__ */ r("footer", {
+				className: n.footer,
+				children: u
 			})
 		]
 	});
 }
 //#endregion
-export { i as Page };
+export { a as Page };
 
 //# sourceMappingURL=Page.js.map

package/dist/components/Page/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","names":[],"sources":["../../../src/components/Page/Page.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a page shell is slots: eyebrow, title, description,\n * actions, toolbar, footer and children, with padded as the one behavioural switch.\n * Slots are the component.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Page.module.css\";\n\nexport interface PageProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n    /** Page title rendered as `<h1>`. */\n    title?: ReactNode;\n    /** Optional subtitle / breadcrumbs slot rendered above the title. */\n    eyebrow?: ReactNode;\n    /** Optional description rendered below the title. */\n    description?: ReactNode;\n    /** Right-side actions slot in the header (buttons, menus). */\n    actions?: ReactNode;\n    /** Sticky tab bar / filter row rendered just below the header. */\n    toolbar?: ReactNode;\n    /** Footer slot rendered at the bottom of the content area. */\n    footer?: ReactNode;\n    /** Page-level padding. Default `true`. */\n    padded?: boolean;\n    children?: ReactNode;\n}\n\n/**\n * Page wrapper with header + (optional) toolbar + content + footer. Pairs\n * with `Container` when you want a max-width content well.\n *\n * @example\n * <Page title=\"Pedidos\" description=\"Acompanhe seus pedidos\" actions={<Button>Novo</Button>}>\n *     <Table {...} />\n * </Page>\n */\nexport function Page({\n    title,\n    eyebrow,\n    description,\n    actions,\n    toolbar,\n    footer,\n    padded = true,\n    className,\n    children,\n    ...props\n}: PageProps) {\n    const hasHeader = title || eyebrow || description || actions;\n    return (\n        <main className={cn(styles.page, padded && styles.padded, className)} {...props}>\n            {hasHeader && (\n                <header className={styles.header}>\n                    <div className={styles.headerText}>\n                        {eyebrow && <div className={styles.eyebrow}>{eyebrow}</div>}\n                        {title && <h1 className={styles.title}>{title}</h1>}\n                        {description && <p className={styles.description}>{description}</p>}\n                    </div>\n                    {actions && <div className={styles.actions}>{actions}</div>}\n                </header>\n            )}\n            {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n            <div className={styles.content}>{children}</div>\n            {footer && <footer className={styles.footer}>{footer}</footer>}\n        </main>\n    );\n}\n"],"mappings":";;;;AAoCA,SAAgB,EAAK,EACjB,UACA,YACA,gBACA,YACA,YACA,WACA,YAAS,IACT,cACA,aACA,GAAG,KACO;CACV,IAAM,IAAY,KAAS,KAAW,KAAe;CACrD,OACI,kBAAC,QAAD;EAAM,WAAW,EAAG,EAAO,MAAM,KAAU,EAAO,QAAQ,CAAS;EAAG,GAAI;EAA1E,UAAA;GACK,KACG,kBAAC,UAAD;IAAQ,WAAW,EAAO;IAA1B,UAAA,CACI,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAvB,UAAA;MACK,KAAW,kBAAC,OAAD;OAAK,WAAW,EAAO;OAAU,UAAA;MAAa,CAAA;MACzD,KAAS,kBAAC,MAAD;OAAI,WAAW,EAAO;OAAQ,UAAA;MAAU,CAAA;MACjD,KAAe,kBAAC,KAAD;OAAG,WAAW,EAAO;OAAc,UAAA;MAAe,CAAA;KACjE;IACJ,CAAA,GAAA,KAAW,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAU,UAAA;IAAa,CAAA,CACtD;;GAEX,KAAW,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAU,UAAA;GAAa,CAAA;GAC1D,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAU;GAAc,CAAA;GAC9C,KAAU,kBAAC,UAAD;IAAQ,WAAW,EAAO;IAAS,UAAA;GAAe,CAAA;EAC3D;;AAEd"}
+{"version":3,"file":"Page.js","names":[],"sources":["../../../src/components/Page/Page.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a page shell is slots: eyebrow, title, description,\n * actions, toolbar, footer and children, with padded as the one behavioural switch.\n * Slots are the component.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { SectionHeader } from \"../SectionHeader\";\nimport styles from \"./Page.module.css\";\n\nexport interface PageProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n    /** Page title rendered as `<h1>`. */\n    title?: ReactNode;\n    /** Optional subtitle / breadcrumbs slot rendered above the title. */\n    eyebrow?: ReactNode;\n    /** Optional description rendered below the title. */\n    description?: ReactNode;\n    /** Right-side actions slot in the header (buttons, menus). */\n    actions?: ReactNode;\n    /** Sticky tab bar / filter row rendered just below the header. */\n    toolbar?: ReactNode;\n    /** Footer slot rendered at the bottom of the content area. */\n    footer?: ReactNode;\n    /** Page-level padding. Default `true`. */\n    padded?: boolean;\n    children?: ReactNode;\n}\n\n/**\n * Page wrapper with header + (optional) toolbar + content + footer. Pairs\n * with `Container` when you want a max-width content well.\n *\n * The header is a `SectionHeader` at `level={1}`, so the page title and the\n * `<h2>` of each section below it share one look; when every header slot is\n * empty no `<header>` is rendered.\n *\n * @example\n * <Page title=\"Pedidos\" description=\"Acompanhe seus pedidos\" actions={<Button>Novo</Button>}>\n *     <Table {...} />\n * </Page>\n */\nexport function Page({\n    title,\n    eyebrow,\n    description,\n    actions,\n    toolbar,\n    footer,\n    padded = true,\n    className,\n    children,\n    ...props\n}: PageProps) {\n    return (\n        <main className={cn(styles.page, padded && styles.padded, className)} {...props}>\n            <SectionHeader\n                level={1}\n                eyebrow={eyebrow}\n                title={title}\n                description={description}\n                actions={actions}\n            />\n            {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n            <div className={styles.content}>{children}</div>\n            {footer && <footer className={styles.footer}>{footer}</footer>}\n        </main>\n    );\n}\n"],"mappings":";;;;;AAyCA,SAAgB,EAAK,EACjB,UACA,YACA,gBACA,YACA,YACA,WACA,YAAS,IACT,cACA,aACA,GAAG,KACO;CACV,OACI,kBAAC,QAAD;EAAM,WAAW,EAAG,EAAO,MAAM,KAAU,EAAO,QAAQ,CAAS;EAAG,GAAI;EAA1E,UAAA;GACI,kBAAC,GAAD;IACI,OAAO;IACE;IACF;IACM;IACJ;GACZ,CAAA;GACA,KAAW,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAU,UAAA;GAAa,CAAA;GAC1D,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAU;GAAc,CAAA;GAC9C,KAAU,kBAAC,UAAD;IAAQ,WAAW,EAAO;IAAS,UAAA;GAAe,CAAA;EAC3D;;AAEd"}

package/dist/components/Page/Page.module.cjs

@@ -1,3 +1,3 @@
 require("../../styles/component/Page.css");
-var e=`tempest_page_THNNc`,t=`tempest_padded_bzjoF`,n=`tempest_header_PZEzk`,r=`tempest_headerText_qYXFI`,i=`tempest_eyebrow_651RV`,a=`tempest_title_2oGnT`,o=`tempest_description_YzmWl`,s=`tempest_actions_-rB3U`,c=`tempest_toolbar_sA7sD`,l=`tempest_content_RCB4b`,u=`tempest_footer_540pQ`,d={page:e,padded:t,header:n,headerText:r,eyebrow:i,title:a,description:o,actions:s,toolbar:c,content:l,footer:u};exports.actions=s,exports.content=l,exports.default=d,exports.description=o,exports.eyebrow=i,exports.footer=u,exports.header=n,exports.headerText=r,exports.padded=t,exports.page=e,exports.title=a,exports.toolbar=c;
+var e=`tempest_page_THNNc`,t=`tempest_padded_bzjoF`,n=`tempest_toolbar_sA7sD`,r=`tempest_content_RCB4b`,i=`tempest_footer_540pQ`,a={page:e,padded:t,toolbar:n,content:r,footer:i};exports.content=r,exports.default=a,exports.footer=i,exports.padded=t,exports.page=e,exports.toolbar=n;
 //# sourceMappingURL=Page.module.cjs.map

package/dist/components/Page/Page.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Page.module.cjs","names":[],"sources":["../../../src/components/Page/Page.module.css"],"sourcesContent":[".page {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-height: 100%;\n    font-family: var(--tempest-font-sans);\n    color: var(--tempest-text);\n}\n\n.padded {\n    padding: var(--tempest-space-5) var(--tempest-space-4);\n}\n\n@media (min-width: 768px) {\n    .padded {\n        padding: var(--tempest-space-6) var(--tempest-space-6);\n    }\n}\n\n.header {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-4);\n    margin-bottom: var(--tempest-space-5);\n    flex-wrap: wrap;\n}\n\n.headerText {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.eyebrow {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n    margin-bottom: var(--tempest-space-1);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-2xl);\n    font-weight: var(--tempest-weight-bold);\n    line-height: var(--tempest-leading-tight);\n}\n\n.description {\n    margin: var(--tempest-space-2) 0 0;\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n}\n\n.actions {\n    display: flex;\n    gap: var(--tempest-space-2);\n    flex: 0 0 auto;\n    flex-wrap: wrap;\n}\n\n.toolbar {\n    margin-bottom: var(--tempest-space-4);\n}\n\n.content {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.footer {\n    margin-top: var(--tempest-space-6);\n    padding-top: var(--tempest-space-4);\n    border-top: 1px solid var(--tempest-border);\n}\n"],"mappings":";"}
+{"version":3,"file":"Page.module.cjs","names":[],"sources":["../../../src/components/Page/Page.module.css"],"sourcesContent":[".page {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-height: 100%;\n    font-family: var(--tempest-font-sans);\n    color: var(--tempest-text);\n}\n\n.padded {\n    padding: var(--tempest-space-5) var(--tempest-space-4);\n}\n\n@media (min-width: 768px) {\n    .padded {\n        padding: var(--tempest-space-6) var(--tempest-space-6);\n    }\n}\n\n.toolbar {\n    margin-bottom: var(--tempest-space-4);\n}\n\n.content {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.footer {\n    margin-top: var(--tempest-space-6);\n    padding-top: var(--tempest-space-4);\n    border-top: 1px solid var(--tempest-border);\n}\n"],"mappings":";"}

package/dist/components/Page/Page.module.js

@@ -1,19 +1,13 @@
 import "../../styles/component/Page.css";
 //#region src/components/Page/Page.module.css
-var e = "tempest_page_THNNc", t = "tempest_padded_bzjoF", n = "tempest_header_PZEzk", r = "tempest_headerText_qYXFI", i = "tempest_eyebrow_651RV", a = "tempest_title_2oGnT", o = "tempest_description_YzmWl", s = "tempest_actions_-rB3U", c = "tempest_toolbar_sA7sD", l = "tempest_content_RCB4b", u = "tempest_footer_540pQ", d = {
+var e = "tempest_page_THNNc", t = "tempest_padded_bzjoF", n = "tempest_toolbar_sA7sD", r = "tempest_content_RCB4b", i = "tempest_footer_540pQ", a = {
 	page: e,
 	padded: t,
-	header: n,
-	headerText: r,
-	eyebrow: i,
-	title: a,
-	description: o,
-	actions: s,
-	toolbar: c,
-	content: l,
-	footer: u
+	toolbar: n,
+	content: r,
+	footer: i
 };
 //#endregion
-export { s as actions, l as content, d as default, o as description, i as eyebrow, u as footer, n as header, r as headerText, t as padded, e as page, a as title, c as toolbar };
+export { r as content, a as default, i as footer, t as padded, e as page, n as toolbar };
 
 //# sourceMappingURL=Page.module.js.map

package/dist/components/Page/Page.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.module.js","names":[],"sources":["../../../src/components/Page/Page.module.css"],"sourcesContent":[".page {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-height: 100%;\n    font-family: var(--tempest-font-sans);\n    color: var(--tempest-text);\n}\n\n.padded {\n    padding: var(--tempest-space-5) var(--tempest-space-4);\n}\n\n@media (min-width: 768px) {\n    .padded {\n        padding: var(--tempest-space-6) var(--tempest-space-6);\n    }\n}\n\n.header {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-4);\n    margin-bottom: var(--tempest-space-5);\n    flex-wrap: wrap;\n}\n\n.headerText {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.eyebrow {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n    margin-bottom: var(--tempest-space-1);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-2xl);\n    font-weight: var(--tempest-weight-bold);\n    line-height: var(--tempest-leading-tight);\n}\n\n.description {\n    margin: var(--tempest-space-2) 0 0;\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n}\n\n.actions {\n    display: flex;\n    gap: var(--tempest-space-2);\n    flex: 0 0 auto;\n    flex-wrap: wrap;\n}\n\n.toolbar {\n    margin-bottom: var(--tempest-space-4);\n}\n\n.content {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.footer {\n    margin-top: var(--tempest-space-6);\n    padding-top: var(--tempest-space-4);\n    border-top: 1px solid var(--tempest-border);\n}\n"],"mappings":";"}
+{"version":3,"file":"Page.module.js","names":[],"sources":["../../../src/components/Page/Page.module.css"],"sourcesContent":[".page {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-height: 100%;\n    font-family: var(--tempest-font-sans);\n    color: var(--tempest-text);\n}\n\n.padded {\n    padding: var(--tempest-space-5) var(--tempest-space-4);\n}\n\n@media (min-width: 768px) {\n    .padded {\n        padding: var(--tempest-space-6) var(--tempest-space-6);\n    }\n}\n\n.toolbar {\n    margin-bottom: var(--tempest-space-4);\n}\n\n.content {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.footer {\n    margin-top: var(--tempest-space-6);\n    padding-top: var(--tempest-space-4);\n    border-top: 1px solid var(--tempest-border);\n}\n"],"mappings":";"}

package/dist/components/PasswordInput/PasswordInput.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.module.cjs","names":[],"sources":["../../../src/components/PasswordInput/PasswordInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    width: 100%;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.field {\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.field:focus-within {\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, var(--tempest-primary));\n}\n\n.input {\n    flex: 1 1 auto;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    color: var(--tempest-text);\n    font: inherit;\n    font-family: var(--tempest-font-sans);\n}\n\n.sm .input {\n    padding: 6px 8px;\n    font-size: var(--tempest-text-sm);\n}\n\n.md .input {\n    padding: 8px 12px;\n    font-size: var(--tempest-text-md);\n}\n\n.lg .input {\n    padding: 10px 14px;\n    font-size: var(--tempest-text-lg);\n}\n\n.toggle {\n    flex: 0 0 auto;\n    background: none;\n    border: 0;\n    cursor: pointer;\n    padding: 0 12px;\n    font-size: 16px;\n    color: var(--tempest-text-muted);\n}\n\n.toggle:hover {\n    color: var(--tempest-text);\n}\n\n.error .field {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n\n.strength {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    font-size: var(--tempest-text-xs);\n}\n\n.strengthBar {\n    flex: 1 1 auto;\n    height: 4px;\n    background: var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    overflow: hidden;\n}\n\n.strengthBar > span {\n    display: block;\n    height: 100%;\n    transition: width var(--tempest-duration-base, 200ms);\n}\n\n.strengthLabel {\n    color: var(--tempest-text-muted);\n    flex: 0 0 auto;\n}\n\n.level0 .strengthBar > span,\n.level1 .strengthBar > span {\n    background: var(--tempest-danger-solid, var(--tempest-danger));\n}\n\n.level2 .strengthBar > span {\n    background: var(--tempest-warning-solid, var(--tempest-warning));\n}\n\n.level3 .strengthBar > span,\n.level4 .strengthBar > span {\n    background: var(--tempest-success-solid, var(--tempest-success));\n}\n"],"mappings":";"}
+{"version":3,"file":"PasswordInput.module.cjs","names":[],"sources":["../../../src/components/PasswordInput/PasswordInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    width: 100%;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.field {\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.field:focus-within {\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.input {\n    flex: 1 1 auto;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    color: var(--tempest-text);\n    font: inherit;\n    font-family: var(--tempest-font-sans);\n}\n\n.sm .input {\n    padding: 6px 8px;\n    font-size: var(--tempest-text-sm);\n}\n\n.md .input {\n    padding: 8px 12px;\n    font-size: var(--tempest-text-md);\n}\n\n.lg .input {\n    padding: 10px 14px;\n    font-size: var(--tempest-text-lg);\n}\n\n.toggle {\n    flex: 0 0 auto;\n    background: none;\n    border: 0;\n    cursor: pointer;\n    padding: 0 12px;\n    font-size: 16px;\n    color: var(--tempest-text-muted);\n}\n\n.toggle:hover {\n    color: var(--tempest-text);\n}\n\n.error .field {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n\n.strength {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    font-size: var(--tempest-text-xs);\n}\n\n.strengthBar {\n    flex: 1 1 auto;\n    height: 4px;\n    background: var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    overflow: hidden;\n}\n\n.strengthBar > span {\n    display: block;\n    height: 100%;\n    transition: width var(--tempest-duration-base, 200ms);\n}\n\n.strengthLabel {\n    color: var(--tempest-text-muted);\n    flex: 0 0 auto;\n}\n\n.level0 .strengthBar > span,\n.level1 .strengthBar > span {\n    background: var(--tempest-danger-solid, var(--tempest-danger));\n}\n\n.level2 .strengthBar > span {\n    background: var(--tempest-warning-solid, var(--tempest-warning));\n}\n\n.level3 .strengthBar > span,\n.level4 .strengthBar > span {\n    background: var(--tempest-success-solid, var(--tempest-success));\n}\n"],"mappings":";"}

package/dist/components/PasswordInput/PasswordInput.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.module.js","names":[],"sources":["../../../src/components/PasswordInput/PasswordInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    width: 100%;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.field {\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.field:focus-within {\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, var(--tempest-primary));\n}\n\n.input {\n    flex: 1 1 auto;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    color: var(--tempest-text);\n    font: inherit;\n    font-family: var(--tempest-font-sans);\n}\n\n.sm .input {\n    padding: 6px 8px;\n    font-size: var(--tempest-text-sm);\n}\n\n.md .input {\n    padding: 8px 12px;\n    font-size: var(--tempest-text-md);\n}\n\n.lg .input {\n    padding: 10px 14px;\n    font-size: var(--tempest-text-lg);\n}\n\n.toggle {\n    flex: 0 0 auto;\n    background: none;\n    border: 0;\n    cursor: pointer;\n    padding: 0 12px;\n    font-size: 16px;\n    color: var(--tempest-text-muted);\n}\n\n.toggle:hover {\n    color: var(--tempest-text);\n}\n\n.error .field {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n\n.strength {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    font-size: var(--tempest-text-xs);\n}\n\n.strengthBar {\n    flex: 1 1 auto;\n    height: 4px;\n    background: var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    overflow: hidden;\n}\n\n.strengthBar > span {\n    display: block;\n    height: 100%;\n    transition: width var(--tempest-duration-base, 200ms);\n}\n\n.strengthLabel {\n    color: var(--tempest-text-muted);\n    flex: 0 0 auto;\n}\n\n.level0 .strengthBar > span,\n.level1 .strengthBar > span {\n    background: var(--tempest-danger-solid, var(--tempest-danger));\n}\n\n.level2 .strengthBar > span {\n    background: var(--tempest-warning-solid, var(--tempest-warning));\n}\n\n.level3 .strengthBar > span,\n.level4 .strengthBar > span {\n    background: var(--tempest-success-solid, var(--tempest-success));\n}\n"],"mappings":";"}
+{"version":3,"file":"PasswordInput.module.js","names":[],"sources":["../../../src/components/PasswordInput/PasswordInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    width: 100%;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.field {\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.field:focus-within {\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.input {\n    flex: 1 1 auto;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    color: var(--tempest-text);\n    font: inherit;\n    font-family: var(--tempest-font-sans);\n}\n\n.sm .input {\n    padding: 6px 8px;\n    font-size: var(--tempest-text-sm);\n}\n\n.md .input {\n    padding: 8px 12px;\n    font-size: var(--tempest-text-md);\n}\n\n.lg .input {\n    padding: 10px 14px;\n    font-size: var(--tempest-text-lg);\n}\n\n.toggle {\n    flex: 0 0 auto;\n    background: none;\n    border: 0;\n    cursor: pointer;\n    padding: 0 12px;\n    font-size: 16px;\n    color: var(--tempest-text-muted);\n}\n\n.toggle:hover {\n    color: var(--tempest-text);\n}\n\n.error .field {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n\n.strength {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    font-size: var(--tempest-text-xs);\n}\n\n.strengthBar {\n    flex: 1 1 auto;\n    height: 4px;\n    background: var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    overflow: hidden;\n}\n\n.strengthBar > span {\n    display: block;\n    height: 100%;\n    transition: width var(--tempest-duration-base, 200ms);\n}\n\n.strengthLabel {\n    color: var(--tempest-text-muted);\n    flex: 0 0 auto;\n}\n\n.level0 .strengthBar > span,\n.level1 .strengthBar > span {\n    background: var(--tempest-danger-solid, var(--tempest-danger));\n}\n\n.level2 .strengthBar > span {\n    background: var(--tempest-warning-solid, var(--tempest-warning));\n}\n\n.level3 .strengthBar > span,\n.level4 .strengthBar > span {\n    background: var(--tempest-success-solid, var(--tempest-success));\n}\n"],"mappings":";"}

package/dist/components/PinInput/PinInput.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.module.cjs","names":[],"sources":["../../../src/components/PinInput/PinInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.cells {\n    display: flex;\n    gap: var(--tempest-space-2);\n}\n\n.cell {\n    flex: 0 0 auto;\n    text-align: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-mono, var(--tempest-font-sans));\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.cells.sm .cell {\n    width: 32px;\n    height: 36px;\n    font-size: var(--tempest-text-md);\n}\n\n.cells.md .cell {\n    width: 44px;\n    height: 52px;\n    font-size: var(--tempest-text-lg);\n}\n\n.cells.lg .cell {\n    width: 56px;\n    height: 64px;\n    font-size: var(--tempest-text-xl);\n}\n\n.cell:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, var(--tempest-primary));\n}\n\n.cell:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.error .cell {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n"],"mappings":";"}
+{"version":3,"file":"PinInput.module.cjs","names":[],"sources":["../../../src/components/PinInput/PinInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.cells {\n    display: flex;\n    gap: var(--tempest-space-2);\n}\n\n.cell {\n    flex: 0 0 auto;\n    text-align: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-mono, var(--tempest-font-sans));\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.cells.sm .cell {\n    width: 32px;\n    height: 36px;\n    font-size: var(--tempest-text-md);\n}\n\n.cells.md .cell {\n    width: 44px;\n    height: 52px;\n    font-size: var(--tempest-text-lg);\n}\n\n.cells.lg .cell {\n    width: 56px;\n    height: 64px;\n    font-size: var(--tempest-text-xl);\n}\n\n.cell:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.cell:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.error .cell {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n"],"mappings":";"}

package/dist/components/PinInput/PinInput.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.module.js","names":[],"sources":["../../../src/components/PinInput/PinInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.cells {\n    display: flex;\n    gap: var(--tempest-space-2);\n}\n\n.cell {\n    flex: 0 0 auto;\n    text-align: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-mono, var(--tempest-font-sans));\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.cells.sm .cell {\n    width: 32px;\n    height: 36px;\n    font-size: var(--tempest-text-md);\n}\n\n.cells.md .cell {\n    width: 44px;\n    height: 52px;\n    font-size: var(--tempest-text-lg);\n}\n\n.cells.lg .cell {\n    width: 56px;\n    height: 64px;\n    font-size: var(--tempest-text-xl);\n}\n\n.cell:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, var(--tempest-primary));\n}\n\n.cell:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.error .cell {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n"],"mappings":";"}
+{"version":3,"file":"PinInput.module.js","names":[],"sources":["../../../src/components/PinInput/PinInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.cells {\n    display: flex;\n    gap: var(--tempest-space-2);\n}\n\n.cell {\n    flex: 0 0 auto;\n    text-align: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-mono, var(--tempest-font-sans));\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.cells.sm .cell {\n    width: 32px;\n    height: 36px;\n    font-size: var(--tempest-text-md);\n}\n\n.cells.md .cell {\n    width: 44px;\n    height: 52px;\n    font-size: var(--tempest-text-lg);\n}\n\n.cells.lg .cell {\n    width: 56px;\n    height: 64px;\n    font-size: var(--tempest-text-xl);\n}\n\n.cell:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.cell:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.error .cell {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n"],"mappings":";"}

package/dist/components/Reveal/Reveal.cjs

@@ -0,0 +1,2 @@
+const e=require("../../utils/cn.cjs"),t=require("../../hooks/use-intersection-observer.cjs"),n=require("./reveal-threshold.cjs"),r=require("./Reveal.module.cjs");let i=require("react"),a=require("react/jsx-runtime");var o={current:null};function s(){return()=>void 0}function c(){return typeof IntersectionObserver<`u`}function l(){return!1}function u({as:u=`div`,variant:d=`up`,delay:f,duration:p,once:m=!0,threshold:h=.15,rootMargin:g=`0px`,className:_,style:v,children:y,...b}){let x=(0,i.useRef)(null),S=(0,i.useSyncExternalStore)(s,c,l),[C,w]=(0,i.useState)(!1),[T,E]=(0,i.useState)({requested:h,value:h}),D=T.requested===h?T.value:h,O=t.useIntersectionObserver(S&&!(m&&C)?x:o,{rootMargin:g,threshold:D});(0,i.useEffect)(()=>{if(!O)return;let e=n.effectiveThreshold(h,O);Math.abs(e-D)>.001&&E({requested:h,value:e}),O.isIntersecting&&O.intersectionRatio+.001>=e?w(!0):!m&&!O.isIntersecting&&w(!1)},[O,h,D,m]);let k=S?C?`shown`:`hidden`:`static`,A={};return f!==void 0&&(A[`--tempest-reveal-delay`]=`${f}ms`),p!==void 0&&(A[`--tempest-reveal-duration`]=`${p}ms`),(0,a.jsx)(u,{...b,ref:x,className:e.cn(r.default.reveal,_),style:{...A,...v},"data-state":k,"data-variant":d,children:y})}exports.Reveal=u;
+//# sourceMappingURL=Reveal.cjs.map

package/dist/components/Reveal/Reveal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reveal.cjs","names":[],"sources":["../../../src/components/Reveal/Reveal.tsx"],"sourcesContent":["import type { CSSProperties, ElementType, HTMLAttributes, JSX, RefObject } from \"react\";\nimport { useEffect, useRef, useState, useSyncExternalStore } from \"react\";\nimport { useIntersectionObserver } from \"@/hooks/use-intersection-observer\";\nimport { cn } from \"@/utils/cn\";\nimport { RATIO_EPSILON, effectiveThreshold } from \"./reveal-threshold\";\nimport styles from \"./Reveal.module.css\";\n\n/** Direction the content travels from, or `\"fade\"` / `\"scale\"` for no travel. */\nexport type RevealVariant = \"fade\" | \"up\" | \"down\" | \"left\" | \"right\" | \"scale\";\n\n/** Visual state written to `data-state`. */\nexport type RevealState = \"static\" | \"hidden\" | \"shown\";\n\nexport interface RevealProps extends HTMLAttributes<HTMLElement> {\n    /** Intrinsic element to render, e.g. `\"li\"` inside a list. Defaults to `\"div\"`. */\n    as?: keyof JSX.IntrinsicElements;\n    /** How the content enters. Defaults to `\"up\"`. */\n    variant?: RevealVariant;\n    /** Wait before the entrance starts, in ms. Stagger siblings with `index * step`. */\n    delay?: number;\n    /** Length of the entrance, in ms. Defaults to `--tempest-duration-slower`. */\n    duration?: number;\n    /** Reveal once and stop observing. With `false`, it hides again once fully out of view. Defaults to `true`. */\n    once?: boolean;\n    /**\n     * Fraction of the element — or of the viewport, when the element is taller\n     * than it — that must be visible to reveal. Defaults to `0.15`.\n     */\n    threshold?: number;\n    /** Margin around the root, as in `IntersectionObserver`. Defaults to `\"0px\"`. */\n    rootMargin?: string;\n}\n\n/** A ref that never points at an element, used to switch the observer off. */\nconst DETACHED: RefObject<Element | null> = { current: null };\n\n/**\n * Subscribe function for a snapshot that never changes after mount.\n *\n * @returns A no-op unsubscribe.\n */\nfunction subscribeNever(): () => void {\n    return () => undefined;\n}\n\n/**\n * Whether this environment can observe intersections.\n *\n * @returns `true` when `IntersectionObserver` exists.\n */\nfunction canObserve(): boolean {\n    return typeof IntersectionObserver !== \"undefined\";\n}\n\n/**\n * Server snapshot: never hide content that was rendered without JavaScript.\n *\n * @returns Always `false`.\n */\nfunction cannotObserve(): boolean {\n    return false;\n}\n\n/**\n * Animate content into view the first time it is scrolled to.\n *\n * The three failure modes of a hand-rolled version are handled here, not left to\n * the docs:\n *\n * - **Reduced motion.** Under `prefers-reduced-motion: reduce` the stylesheet\n *   pins the element visible with no transform and no transition, whatever\n *   state it is in — so the setting also wins when it changes mid-session.\n * - **No `IntersectionObserver`** (old engines, some crawlers, tests): the\n *   element stays in the `\"static\"` state, which is plain visible content. It is\n *   never hidden waiting for an observation that cannot come.\n * - **Taller than the viewport.** A box three viewports tall never reaches a\n *   ratio of 0.5, so a raw observer with that threshold never reveals it. The\n *   threshold is rescaled by the highest ratio the element can reach (see\n *   `effectiveThreshold`), read from the first observation.\n *\n * Content is hidden only when the client can observe: the server snapshot of\n * `useSyncExternalStore` is `\"static\"`, so markup rendered without JavaScript —\n * or before hydration — is visible. The transition is declared on the `\"shown\"`\n * state only, so the switch to `\"hidden\"` on mount is instant instead of a\n * fade-out, and with `once={false}` leaving the viewport hides without motion.\n *\n * With `once={false}` the element hides only once it is fully out of view. Hiding\n * on the threshold would oscillate: the hidden state translates the box, which\n * moves it back across the same threshold.\n *\n * @example\n * <ul>\n *   {steps.map((step, index) => (\n *     <Reveal key={step.id} as=\"li\" delay={index * 80}>\n *       {step.title}\n *     </Reveal>\n *   ))}\n * </ul>\n */\nexport function Reveal({\n    as = \"div\",\n    variant = \"up\",\n    delay,\n    duration,\n    once = true,\n    threshold = 0.15,\n    rootMargin = \"0px\",\n    className,\n    style,\n    children,\n    ...props\n}: RevealProps) {\n    const ref = useRef<HTMLElement>(null);\n    const observable = useSyncExternalStore(subscribeNever, canObserve, cannotObserve);\n    const [shown, setShown] = useState<boolean>(false);\n    const [rescaled, setRescaled] = useState<{ requested: number; value: number }>({\n        requested: threshold,\n        value: threshold,\n    });\n    const observeAt = rescaled.requested === threshold ? rescaled.value : threshold;\n    const settled = once && shown;\n\n    const entry = useIntersectionObserver(observable && !settled ? ref : DETACHED, {\n        rootMargin,\n        threshold: observeAt,\n    });\n\n    useEffect(() => {\n        if (!entry) return;\n        const target = effectiveThreshold(threshold, entry);\n        if (Math.abs(target - observeAt) > RATIO_EPSILON) {\n            setRescaled({ requested: threshold, value: target });\n        }\n        if (entry.isIntersecting && entry.intersectionRatio + RATIO_EPSILON >= target) {\n            setShown(true);\n        } else if (!once && !entry.isIntersecting) {\n            setShown(false);\n        }\n    }, [entry, threshold, observeAt, once]);\n\n    const state: RevealState = !observable ? \"static\" : shown ? \"shown\" : \"hidden\";\n    const timing: Record<string, string> = {};\n    if (delay !== undefined) timing[\"--tempest-reveal-delay\"] = `${delay}ms`;\n    if (duration !== undefined) timing[\"--tempest-reveal-duration\"] = `${duration}ms`;\n\n    const Tag = as as ElementType;\n\n    return (\n        <Tag\n            {...props}\n            ref={ref}\n            className={cn(styles.reveal, className)}\n            style={{ ...timing, ...style } as CSSProperties}\n            data-state={state}\n            data-variant={variant}\n        >\n            {children}\n        </Tag>\n    );\n}\n"],"mappings":"wNAkCA,IAAM,EAAsC,CAAE,QAAS,IAAK,EAO5D,SAAS,GAA6B,CAClC,UAAa,IAAA,EACjB,CAOA,SAAS,GAAsB,CAC3B,OAAO,OAAO,qBAAyB,GAC3C,CAOA,SAAS,GAAyB,CAC9B,MAAO,EACX,CAsCA,SAAgB,EAAO,CACnB,KAAK,MACL,UAAU,KACV,QACA,WACA,OAAO,GACP,YAAY,IACZ,aAAa,MACb,YACA,QACA,WACA,GAAG,GACS,CACZ,IAAM,GAAA,EAAM,EAAA,OAAA,CAAoB,IAAI,EAC9B,GAAA,EAAa,EAAA,qBAAA,CAAqB,EAAgB,EAAY,CAAa,EAC3E,CAAC,EAAO,IAAA,EAAY,EAAA,SAAA,CAAkB,EAAK,EAC3C,CAAC,EAAU,IAAA,EAAe,EAAA,SAAA,CAA+C,CAC3E,UAAW,EACX,MAAO,CACX,CAAC,EACK,EAAY,EAAS,YAAc,EAAY,EAAS,MAAQ,EAGhE,EAAQ,EAAA,wBAAwB,GAAc,EAFpC,GAAQ,GAEuC,EAAM,EAAU,CAC3E,aACA,UAAW,CACf,CAAC,GAED,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,CAAC,EAAO,OACZ,IAAM,EAAS,EAAA,mBAAmB,EAAW,CAAK,EAC9C,KAAK,IAAI,EAAS,CAAS,EAAA,MAC3B,EAAY,CAAE,UAAW,EAAW,MAAO,CAAO,CAAC,EAEnD,EAAM,gBAAkB,EAAM,kBAAA,MAAqC,EACnE,EAAS,EAAI,EACN,CAAC,GAAQ,CAAC,EAAM,gBACvB,EAAS,EAAK,CAEtB,EAAG,CAAC,EAAO,EAAW,EAAW,CAAI,CAAC,EAEtC,IAAM,EAAsB,EAAwB,EAAQ,QAAU,SAA7B,SACnC,EAAiC,CAAC,EAMxC,OALI,IAAU,IAAA,KAAW,EAAO,0BAA4B,GAAG,EAAM,KACjE,IAAa,IAAA,KAAW,EAAO,6BAA+B,GAAG,EAAS,MAK1E,EAAA,EAAA,IAAA,CAAC,EAAD,CACI,GAAI,EACC,MACL,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,CAAS,EACtC,MAAO,CAAE,GAAG,EAAQ,GAAG,CAAM,EAC7B,aAAY,EACZ,eAAc,EAEb,UACA,CAAA,CAEb"}

package/dist/components/Reveal/Reveal.js

@@ -0,0 +1,56 @@
+import { cn as e } from "../../utils/cn.js";
+import { useIntersectionObserver as t } from "../../hooks/use-intersection-observer.js";
+import { effectiveThreshold as n } from "./reveal-threshold.js";
+import r from "./Reveal.module.js";
+import { useEffect as i, useRef as a, useState as o, useSyncExternalStore as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/Reveal/Reveal.tsx
+var l = { current: null };
+function u() {
+	return () => void 0;
+}
+function d() {
+	return typeof IntersectionObserver < "u";
+}
+function f() {
+	return !1;
+}
+function p({ as: p = "div", variant: m = "up", delay: h, duration: g, once: _ = !0, threshold: v = .15, rootMargin: y = "0px", className: b, style: x, children: S, ...C }) {
+	let w = a(null), T = s(u, d, f), [E, D] = o(!1), [O, k] = o({
+		requested: v,
+		value: v
+	}), A = O.requested === v ? O.value : v, j = t(T && !(_ && E) ? w : l, {
+		rootMargin: y,
+		threshold: A
+	});
+	i(() => {
+		if (!j) return;
+		let e = n(v, j);
+		Math.abs(e - A) > .001 && k({
+			requested: v,
+			value: e
+		}), j.isIntersecting && j.intersectionRatio + .001 >= e ? D(!0) : !_ && !j.isIntersecting && D(!1);
+	}, [
+		j,
+		v,
+		A,
+		_
+	]);
+	let M = T ? E ? "shown" : "hidden" : "static", N = {};
+	return h !== void 0 && (N["--tempest-reveal-delay"] = `${h}ms`), g !== void 0 && (N["--tempest-reveal-duration"] = `${g}ms`), /* @__PURE__ */ c(p, {
+		...C,
+		ref: w,
+		className: e(r.reveal, b),
+		style: {
+			...N,
+			...x
+		},
+		"data-state": M,
+		"data-variant": m,
+		children: S
+	});
+}
+//#endregion
+export { p as Reveal };
+
+//# sourceMappingURL=Reveal.js.map

package/dist/components/Reveal/Reveal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reveal.js","names":[],"sources":["../../../src/components/Reveal/Reveal.tsx"],"sourcesContent":["import type { CSSProperties, ElementType, HTMLAttributes, JSX, RefObject } from \"react\";\nimport { useEffect, useRef, useState, useSyncExternalStore } from \"react\";\nimport { useIntersectionObserver } from \"@/hooks/use-intersection-observer\";\nimport { cn } from \"@/utils/cn\";\nimport { RATIO_EPSILON, effectiveThreshold } from \"./reveal-threshold\";\nimport styles from \"./Reveal.module.css\";\n\n/** Direction the content travels from, or `\"fade\"` / `\"scale\"` for no travel. */\nexport type RevealVariant = \"fade\" | \"up\" | \"down\" | \"left\" | \"right\" | \"scale\";\n\n/** Visual state written to `data-state`. */\nexport type RevealState = \"static\" | \"hidden\" | \"shown\";\n\nexport interface RevealProps extends HTMLAttributes<HTMLElement> {\n    /** Intrinsic element to render, e.g. `\"li\"` inside a list. Defaults to `\"div\"`. */\n    as?: keyof JSX.IntrinsicElements;\n    /** How the content enters. Defaults to `\"up\"`. */\n    variant?: RevealVariant;\n    /** Wait before the entrance starts, in ms. Stagger siblings with `index * step`. */\n    delay?: number;\n    /** Length of the entrance, in ms. Defaults to `--tempest-duration-slower`. */\n    duration?: number;\n    /** Reveal once and stop observing. With `false`, it hides again once fully out of view. Defaults to `true`. */\n    once?: boolean;\n    /**\n     * Fraction of the element — or of the viewport, when the element is taller\n     * than it — that must be visible to reveal. Defaults to `0.15`.\n     */\n    threshold?: number;\n    /** Margin around the root, as in `IntersectionObserver`. Defaults to `\"0px\"`. */\n    rootMargin?: string;\n}\n\n/** A ref that never points at an element, used to switch the observer off. */\nconst DETACHED: RefObject<Element | null> = { current: null };\n\n/**\n * Subscribe function for a snapshot that never changes after mount.\n *\n * @returns A no-op unsubscribe.\n */\nfunction subscribeNever(): () => void {\n    return () => undefined;\n}\n\n/**\n * Whether this environment can observe intersections.\n *\n * @returns `true` when `IntersectionObserver` exists.\n */\nfunction canObserve(): boolean {\n    return typeof IntersectionObserver !== \"undefined\";\n}\n\n/**\n * Server snapshot: never hide content that was rendered without JavaScript.\n *\n * @returns Always `false`.\n */\nfunction cannotObserve(): boolean {\n    return false;\n}\n\n/**\n * Animate content into view the first time it is scrolled to.\n *\n * The three failure modes of a hand-rolled version are handled here, not left to\n * the docs:\n *\n * - **Reduced motion.** Under `prefers-reduced-motion: reduce` the stylesheet\n *   pins the element visible with no transform and no transition, whatever\n *   state it is in — so the setting also wins when it changes mid-session.\n * - **No `IntersectionObserver`** (old engines, some crawlers, tests): the\n *   element stays in the `\"static\"` state, which is plain visible content. It is\n *   never hidden waiting for an observation that cannot come.\n * - **Taller than the viewport.** A box three viewports tall never reaches a\n *   ratio of 0.5, so a raw observer with that threshold never reveals it. The\n *   threshold is rescaled by the highest ratio the element can reach (see\n *   `effectiveThreshold`), read from the first observation.\n *\n * Content is hidden only when the client can observe: the server snapshot of\n * `useSyncExternalStore` is `\"static\"`, so markup rendered without JavaScript —\n * or before hydration — is visible. The transition is declared on the `\"shown\"`\n * state only, so the switch to `\"hidden\"` on mount is instant instead of a\n * fade-out, and with `once={false}` leaving the viewport hides without motion.\n *\n * With `once={false}` the element hides only once it is fully out of view. Hiding\n * on the threshold would oscillate: the hidden state translates the box, which\n * moves it back across the same threshold.\n *\n * @example\n * <ul>\n *   {steps.map((step, index) => (\n *     <Reveal key={step.id} as=\"li\" delay={index * 80}>\n *       {step.title}\n *     </Reveal>\n *   ))}\n * </ul>\n */\nexport function Reveal({\n    as = \"div\",\n    variant = \"up\",\n    delay,\n    duration,\n    once = true,\n    threshold = 0.15,\n    rootMargin = \"0px\",\n    className,\n    style,\n    children,\n    ...props\n}: RevealProps) {\n    const ref = useRef<HTMLElement>(null);\n    const observable = useSyncExternalStore(subscribeNever, canObserve, cannotObserve);\n    const [shown, setShown] = useState<boolean>(false);\n    const [rescaled, setRescaled] = useState<{ requested: number; value: number }>({\n        requested: threshold,\n        value: threshold,\n    });\n    const observeAt = rescaled.requested === threshold ? rescaled.value : threshold;\n    const settled = once && shown;\n\n    const entry = useIntersectionObserver(observable && !settled ? ref : DETACHED, {\n        rootMargin,\n        threshold: observeAt,\n    });\n\n    useEffect(() => {\n        if (!entry) return;\n        const target = effectiveThreshold(threshold, entry);\n        if (Math.abs(target - observeAt) > RATIO_EPSILON) {\n            setRescaled({ requested: threshold, value: target });\n        }\n        if (entry.isIntersecting && entry.intersectionRatio + RATIO_EPSILON >= target) {\n            setShown(true);\n        } else if (!once && !entry.isIntersecting) {\n            setShown(false);\n        }\n    }, [entry, threshold, observeAt, once]);\n\n    const state: RevealState = !observable ? \"static\" : shown ? \"shown\" : \"hidden\";\n    const timing: Record<string, string> = {};\n    if (delay !== undefined) timing[\"--tempest-reveal-delay\"] = `${delay}ms`;\n    if (duration !== undefined) timing[\"--tempest-reveal-duration\"] = `${duration}ms`;\n\n    const Tag = as as ElementType;\n\n    return (\n        <Tag\n            {...props}\n            ref={ref}\n            className={cn(styles.reveal, className)}\n            style={{ ...timing, ...style } as CSSProperties}\n            data-state={state}\n            data-variant={variant}\n        >\n            {children}\n        </Tag>\n    );\n}\n"],"mappings":";;;;;;;AAkCA,IAAM,IAAsC,EAAE,SAAS,KAAK;AAO5D,SAAS,IAA6B;CAClC,aAAa,KAAA;AACjB;AAOA,SAAS,IAAsB;CAC3B,OAAO,OAAO,uBAAyB;AAC3C;AAOA,SAAS,IAAyB;CAC9B,OAAO;AACX;AAsCA,SAAgB,EAAO,EACnB,QAAK,OACL,aAAU,MACV,UACA,aACA,UAAO,IACP,eAAY,KACZ,gBAAa,OACb,cACA,UACA,aACA,GAAG,KACS;CACZ,IAAM,IAAM,EAAoB,IAAI,GAC9B,IAAa,EAAqB,GAAgB,GAAY,CAAa,GAC3E,CAAC,GAAO,KAAY,EAAkB,EAAK,GAC3C,CAAC,GAAU,KAAe,EAA+C;EAC3E,WAAW;EACX,OAAO;CACX,CAAC,GACK,IAAY,EAAS,cAAc,IAAY,EAAS,QAAQ,GAGhE,IAAQ,EAAwB,KAAc,EAFpC,KAAQ,KAEuC,IAAM,GAAU;EAC3E;EACA,WAAW;CACf,CAAC;CAED,QAAgB;EACZ,IAAI,CAAC,GAAO;EACZ,IAAM,IAAS,EAAmB,GAAW,CAAK;EAIlD,AAHI,KAAK,IAAI,IAAS,CAAS,IAAA,QAC3B,EAAY;GAAE,WAAW;GAAW,OAAO;EAAO,CAAC,GAEnD,EAAM,kBAAkB,EAAM,oBAAA,QAAqC,IACnE,EAAS,EAAI,IACN,CAAC,KAAQ,CAAC,EAAM,kBACvB,EAAS,EAAK;CAEtB,GAAG;EAAC;EAAO;EAAW;EAAW;CAAI,CAAC;CAEtC,IAAM,IAAsB,IAAwB,IAAQ,UAAU,WAA7B,UACnC,IAAiC,CAAC;CAMxC,OALI,MAAU,KAAA,MAAW,EAAO,4BAA4B,GAAG,EAAM,MACjE,MAAa,KAAA,MAAW,EAAO,+BAA+B,GAAG,EAAS,MAK1E,kBAAC,GAAD;EACI,GAAI;EACC;EACL,WAAW,EAAG,EAAO,QAAQ,CAAS;EACtC,OAAO;GAAE,GAAG;GAAQ,GAAG;EAAM;EAC7B,cAAY;EACZ,gBAAc;EAEb;CACA,CAAA;AAEb"}

package/dist/components/Reveal/Reveal.module.cjs

@@ -0,0 +1,3 @@
+require("../../styles/component/Reveal.css");
+var e=`tempest_reveal_jBgJJ`,t={reveal:e};exports.default=t,exports.reveal=e;
+//# sourceMappingURL=Reveal.module.cjs.map

package/dist/components/Reveal/Reveal.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reveal.module.cjs","names":[],"sources":["../../../src/components/Reveal/Reveal.module.css"],"sourcesContent":[".reveal[data-state=\"hidden\"] {\n    opacity: 0;\n}\n\n.reveal[data-state=\"hidden\"][data-variant=\"up\"] {\n    transform: translate3d(0, var(--tempest-reveal-distance, 1.5rem), 0);\n}\n\n.reveal[data-state=\"hidden\"][data-variant=\"down\"] {\n    transform: translate3d(0, calc(-1 * var(--tempest-reveal-distance, 1.5rem)), 0);\n}\n\n.reveal[data-state=\"hidden\"][data-variant=\"left\"] {\n    transform: translate3d(var(--tempest-reveal-distance, 1.5rem), 0, 0);\n}\n\n.reveal[data-state=\"hidden\"][data-variant=\"right\"] {\n    transform: translate3d(calc(-1 * var(--tempest-reveal-distance, 1.5rem)), 0, 0);\n}\n\n.reveal[data-state=\"hidden\"][data-variant=\"scale\"] {\n    transform: scale(var(--tempest-reveal-scale, 0.95));\n}\n\n.reveal[data-state=\"shown\"] {\n    opacity: 1;\n    transform: none;\n    transition:\n        opacity var(--tempest-reveal-duration, var(--tempest-duration-slower))\n            var(--tempest-reveal-easing, var(--tempest-ease-out)),\n        transform var(--tempest-reveal-duration, var(--tempest-duration-slower))\n            var(--tempest-reveal-easing, var(--tempest-ease-emphasized));\n    transition-delay: var(--tempest-reveal-delay, 0ms);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .reveal[data-state][data-variant] {\n        opacity: 1;\n        transform: none;\n        transition: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/Reveal/Reveal.module.js

@@ -0,0 +1,7 @@
+import "../../styles/component/Reveal.css";
+//#region src/components/Reveal/Reveal.module.css
+var e = "tempest_reveal_jBgJJ", t = { reveal: e };
+//#endregion
+export { t as default, e as reveal };
+
+//# sourceMappingURL=Reveal.module.js.map

package/dist/components/Reveal/Reveal.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reveal.module.js","names":[],"sources":["../../../src/components/Reveal/Reveal.module.css"],"sourcesContent":[".reveal[data-state=\"hidden\"] {\n    opacity: 0;\n}\n\n.reveal[data-state=\"hidden\"][data-variant=\"up\"] {\n    transform: translate3d(0, var(--tempest-reveal-distance, 1.5rem), 0);\n}\n\n.reveal[data-state=\"hidden\"][data-variant=\"down\"] {\n    transform: translate3d(0, calc(-1 * var(--tempest-reveal-distance, 1.5rem)), 0);\n}\n\n.reveal[data-state=\"hidden\"][data-variant=\"left\"] {\n    transform: translate3d(var(--tempest-reveal-distance, 1.5rem), 0, 0);\n}\n\n.reveal[data-state=\"hidden\"][data-variant=\"right\"] {\n    transform: translate3d(calc(-1 * var(--tempest-reveal-distance, 1.5rem)), 0, 0);\n}\n\n.reveal[data-state=\"hidden\"][data-variant=\"scale\"] {\n    transform: scale(var(--tempest-reveal-scale, 0.95));\n}\n\n.reveal[data-state=\"shown\"] {\n    opacity: 1;\n    transform: none;\n    transition:\n        opacity var(--tempest-reveal-duration, var(--tempest-duration-slower))\n            var(--tempest-reveal-easing, var(--tempest-ease-out)),\n        transform var(--tempest-reveal-duration, var(--tempest-duration-slower))\n            var(--tempest-reveal-easing, var(--tempest-ease-emphasized));\n    transition-delay: var(--tempest-reveal-delay, 0ms);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .reveal[data-state][data-variant] {\n        opacity: 1;\n        transform: none;\n        transition: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/Reveal/reveal-threshold.cjs

@@ -0,0 +1,2 @@
+var e=.001;function t(e){let t=e.rootBounds,n=e.boundingClientRect;return!t||n.width<=0||n.height<=0?1:Math.min(1,t.height/n.height)*Math.min(1,t.width/n.width)}function n(e,n){return n?e*t(n):e}exports.RATIO_EPSILON=e,exports.effectiveThreshold=n,exports.reachableRatio=t;
+//# sourceMappingURL=reveal-threshold.cjs.map

package/dist/components/Reveal/reveal-threshold.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"reveal-threshold.cjs","names":[],"sources":["../../../src/components/Reveal/reveal-threshold.ts"],"sourcesContent":["/**\n * Tolerance for comparing intersection ratios.\n *\n * Browsers report `intersectionRatio` as the quotient of two rounded areas, so a\n * box sitting exactly on its threshold can come back a hair below it. Without\n * the slack the observer fires (it crossed) and the comparison says it did not.\n */\nexport const RATIO_EPSILON = 0.001;\n\n/**\n * Highest `intersectionRatio` the target can ever reach inside the root.\n *\n * A box taller (or wider) than the root never fits in it: a section three\n * viewports tall tops out at a ratio of about 0.33. Any threshold above that is\n * unreachable, and an observer asked for it never reports the crossing.\n *\n * @param entry - An observation of the target; only its geometry is read.\n * @returns A value in `(0, 1]`, or `1` when the geometry is unknown (no\n *   `rootBounds`, as in a cross-origin iframe, or an empty box).\n */\nexport function reachableRatio(entry: IntersectionObserverEntry): number {\n    const root = entry.rootBounds;\n    const box = entry.boundingClientRect;\n    if (!root || box.width <= 0 || box.height <= 0) return 1;\n    return Math.min(1, root.height / box.height) * Math.min(1, root.width / box.width);\n}\n\n/**\n * The threshold `Reveal` actually observes with, given the one it was asked for.\n *\n * The requested threshold is read as \"this fraction of whichever is smaller,\n * the element or the viewport\". For a box that fits, that is the plain ratio;\n * for a box taller than the viewport it scales the threshold by the reachable\n * ratio, so `threshold={0.5}` on a 3-viewport section reveals once it fills\n * half the viewport instead of never.\n *\n * @param threshold - The requested threshold, in `[0, 1]`.\n * @param entry - The latest observation, or `null` before the first one.\n * @returns The threshold to observe with.\n */\nexport function effectiveThreshold(\n    threshold: number,\n    entry: IntersectionObserverEntry | null,\n): number {\n    if (!entry) return threshold;\n    return threshold * reachableRatio(entry);\n}\n"],"mappings":"AAOA,IAAa,EAAgB,KAa7B,SAAgB,EAAe,EAA0C,CACrE,IAAM,EAAO,EAAM,WACb,EAAM,EAAM,mBAElB,MADI,CAAC,GAAQ,EAAI,OAAS,GAAK,EAAI,QAAU,EAAU,EAChD,KAAK,IAAI,EAAG,EAAK,OAAS,EAAI,MAAM,EAAI,KAAK,IAAI,EAAG,EAAK,MAAQ,EAAI,KAAK,CACrF,CAeA,SAAgB,EACZ,EACA,EACM,CAEN,OADK,EACE,EAAY,EAAe,CAAK,EADpB,CAEvB"}

package/dist/components/Reveal/reveal-threshold.js

@@ -0,0 +1,13 @@
+//#region src/components/Reveal/reveal-threshold.ts
+var e = .001;
+function t(e) {
+	let t = e.rootBounds, n = e.boundingClientRect;
+	return !t || n.width <= 0 || n.height <= 0 ? 1 : Math.min(1, t.height / n.height) * Math.min(1, t.width / n.width);
+}
+function n(e, n) {
+	return n ? e * t(n) : e;
+}
+//#endregion
+export { e as RATIO_EPSILON, n as effectiveThreshold, t as reachableRatio };
+
+//# sourceMappingURL=reveal-threshold.js.map

package/dist/components/Reveal/reveal-threshold.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reveal-threshold.js","names":[],"sources":["../../../src/components/Reveal/reveal-threshold.ts"],"sourcesContent":["/**\n * Tolerance for comparing intersection ratios.\n *\n * Browsers report `intersectionRatio` as the quotient of two rounded areas, so a\n * box sitting exactly on its threshold can come back a hair below it. Without\n * the slack the observer fires (it crossed) and the comparison says it did not.\n */\nexport const RATIO_EPSILON = 0.001;\n\n/**\n * Highest `intersectionRatio` the target can ever reach inside the root.\n *\n * A box taller (or wider) than the root never fits in it: a section three\n * viewports tall tops out at a ratio of about 0.33. Any threshold above that is\n * unreachable, and an observer asked for it never reports the crossing.\n *\n * @param entry - An observation of the target; only its geometry is read.\n * @returns A value in `(0, 1]`, or `1` when the geometry is unknown (no\n *   `rootBounds`, as in a cross-origin iframe, or an empty box).\n */\nexport function reachableRatio(entry: IntersectionObserverEntry): number {\n    const root = entry.rootBounds;\n    const box = entry.boundingClientRect;\n    if (!root || box.width <= 0 || box.height <= 0) return 1;\n    return Math.min(1, root.height / box.height) * Math.min(1, root.width / box.width);\n}\n\n/**\n * The threshold `Reveal` actually observes with, given the one it was asked for.\n *\n * The requested threshold is read as \"this fraction of whichever is smaller,\n * the element or the viewport\". For a box that fits, that is the plain ratio;\n * for a box taller than the viewport it scales the threshold by the reachable\n * ratio, so `threshold={0.5}` on a 3-viewport section reveals once it fills\n * half the viewport instead of never.\n *\n * @param threshold - The requested threshold, in `[0, 1]`.\n * @param entry - The latest observation, or `null` before the first one.\n * @returns The threshold to observe with.\n */\nexport function effectiveThreshold(\n    threshold: number,\n    entry: IntersectionObserverEntry | null,\n): number {\n    if (!entry) return threshold;\n    return threshold * reachableRatio(entry);\n}\n"],"mappings":";AAOA,IAAa,IAAgB;AAa7B,SAAgB,EAAe,GAA0C;CACrE,IAAM,IAAO,EAAM,YACb,IAAM,EAAM;CAElB,OADI,CAAC,KAAQ,EAAI,SAAS,KAAK,EAAI,UAAU,IAAU,IAChD,KAAK,IAAI,GAAG,EAAK,SAAS,EAAI,MAAM,IAAI,KAAK,IAAI,GAAG,EAAK,QAAQ,EAAI,KAAK;AACrF;AAeA,SAAgB,EACZ,GACA,GACM;CAEN,OADK,IACE,IAAY,EAAe,CAAK,IADpB;AAEvB"}

package/dist/components/SectionHeader/SectionHeader.cjs

@@ -0,0 +1,2 @@
+const e=require("../../utils/cn.cjs"),t=require("./SectionHeader.module.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.createContext)(null);function a({title:a,eyebrow:o,description:s,actions:c,level:l=2,align:u=`start`,id:d,className:f,...p}){let m=(0,n.useId)(),h=(0,n.useContext)(i),g=!!a,_=h!==null&&g&&h.claim(m),v=d??(_?h.sectionId:m),y=h?.register;if((0,n.useLayoutEffect)(()=>{if(y&&g)return y(v)},[y,g,v]),!a&&!o&&!s&&!c)return null;let b=`h${l}`;return(0,r.jsxs)(`header`,{className:e.cn(t.default.header,u===`center`&&t.default.center,f),...p,children:[(0,r.jsxs)(`div`,{className:t.default.headerText,children:[o&&(0,r.jsx)(`div`,{className:t.default.eyebrow,children:o}),a&&(0,r.jsx)(b,{id:v,className:t.default.title,children:a}),s&&(0,r.jsx)(`p`,{className:t.default.description,children:s})]}),c&&(0,r.jsx)(`div`,{className:t.default.actions,children:c})]})}function o({children:e,tone:t,...a}){let o=(0,n.useId)(),s=(0,n.useRef)(null),[c,l]=(0,n.useState)(null),u=(0,n.useMemo)(()=>({sectionId:o,claim:e=>(s.current??=e,s.current===e),register:e=>(l(t=>[...t??[],e]),()=>l(t=>(t??[]).filter(t=>t!==e)))}),[o]);(0,n.useLayoutEffect)(()=>{l(e=>e??[])},[]);let d=a[`aria-labelledby`]!==void 0||a[`aria-label`]!==void 0,f=c===null?o:c[0];return(0,r.jsx)(i.Provider,{value:u,children:(0,r.jsx)(`section`,{"aria-labelledby":d?void 0:f,"data-tempest-tone":t,...a,children:e})})}exports.Section=o,exports.SectionHeader=a;
+//# sourceMappingURL=SectionHeader.cjs.map

package/dist/components/SectionHeader/SectionHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.cjs","names":[],"sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a heading block is slots (eyebrow, title, description,\n * actions) plus the three switches that decide its semantics: level, align and the\n * heading id. Splitting them would leave the id away from the heading it names.\n */\nimport {\n    createContext,\n    useContext,\n    useId,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SectionHeader.module.css\";\n\nexport type SectionHeaderLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type SectionHeaderAlign = \"start\" | \"center\";\n\n/**\n * Links the nearest `<Section>` to the heading that names it.\n *\n * Two channels, because they answer at different times:\n *\n * - `sectionId` + `claim` work during render, so the link exists in the very\n *   first HTML (`renderToString`, hydration) where no effect runs. The section\n *   owns `sectionId` (from `useId`, identical on server and client) and writes\n *   it to `aria-labelledby` before any child renders; the first titled\n *   `SectionHeader` to call `claim` in render order becomes its owner and, when\n *   it has no explicit `id`, puts `sectionId` on its heading. `claim` is keyed by\n *   the caller's own `useId`, so asking twice (Strict Mode, a re-render) gives\n *   the same answer and never hands the id to a second heading.\n * - `register` works after mount and is the source of truth from then on: it\n *   returns the matching unregister so a heading that unmounts (or changes id)\n *   releases the section instead of leaving `aria-labelledby` pointing at an\n *   element that no longer exists, and the next registered heading takes over.\n */\ninterface SectionContextValue {\n    sectionId: string;\n    claim: (headerKey: string) => boolean;\n    register: (headingId: string) => () => void;\n}\n\nconst SectionContext = createContext<SectionContextValue | null>(null);\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\" | \"id\"> {\n    /** Heading text, rendered as `<h{level}>`. */\n    title?: ReactNode;\n    /** Short label above the title (category, breadcrumbs). */\n    eyebrow?: ReactNode;\n    /** Supporting text rendered below the title. */\n    description?: ReactNode;\n    /** Trailing slot for buttons or menus. */\n    actions?: ReactNode;\n    /** Heading level — semantics only, the look does not change with it. Default `2`. */\n    level?: SectionHeaderLevel;\n    /** Horizontal alignment of the text block. Default `\"start\"`. */\n    align?: SectionHeaderAlign;\n    /** Id of the heading element. Generated with `useId` when absent. */\n    id?: string;\n}\n\n/**\n * Header of a page or of one section of it: eyebrow, title, description and\n * actions, with the same look `Page` uses for its own header.\n *\n * The heading level is a prop because one page needs one `<h1>` and many\n * `<h2>` that look alike; the visual stays the same at every level so the\n * outline is picked by meaning, not by size. Inside a `<Section>` the first\n * titled header takes the section's own id for its heading (unless `id` is\n * given) and registers it, which is what gives the `region` landmark its\n * accessible name — in the server HTML too.\n *\n * @example\n * <Section>\n *     <SectionHeader eyebrow=\"Soluções\" title=\"O que podemos desenvolver\" align=\"center\" />\n *     <p>Conteúdo da seção.</p>\n * </Section>\n */\nexport function SectionHeader({\n    title,\n    eyebrow,\n    description,\n    actions,\n    level = 2,\n    align = \"start\",\n    id,\n    className,\n    ...props\n}: SectionHeaderProps) {\n    const autoId = useId();\n    const section = useContext(SectionContext);\n    const hasTitle = Boolean(title);\n    const ownsSection = section !== null && hasTitle && section.claim(autoId);\n    const headingId = id ?? (ownsSection ? section.sectionId : autoId);\n    const register = section?.register;\n    useLayoutEffect(() => {\n        if (!register || !hasTitle) return undefined;\n        return register(headingId);\n    }, [register, hasTitle, headingId]);\n    if (!title && !eyebrow && !description && !actions) return null;\n    const Heading = `h${level}` as const;\n    return (\n        <header\n            className={cn(styles.header, align === \"center\" && styles.center, className)}\n            {...props}\n        >\n            <div className={styles.headerText}>\n                {eyebrow && <div className={styles.eyebrow}>{eyebrow}</div>}\n                {title && (\n                    <Heading id={headingId} className={styles.title}>\n                        {title}\n                    </Heading>\n                )}\n                {description && <p className={styles.description}>{description}</p>}\n            </div>\n            {actions && <div className={styles.actions}>{actions}</div>}\n        </header>\n    );\n}\n\n/** Surface tone a {@link Section} can take. */\nexport type SectionTone = \"inverse\" | \"default\";\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement> {\n    /**\n     * `\"inverse\"` paints the section in the brand color and inverts every color\n     * token inside it, by writing `data-tempest-tone=\"inverse\"`. The tokens are\n     * opt-in, because most apps never paint a section in the brand: they come\n     * from `tempest-react-sdk/styles/inverse.css` for the SDK's own blue, or from\n     * `createTheme({ primary, inverse: createInverseSurface })` for yours, each\n     * measured against the fill (text and muted text at 4.5:1 or more, the focus\n     * ring at 3:1 or more). With neither loaded the attribute matches nothing and\n     * the section keeps the page's tokens — legible, not inverted. The prop\n     * exists so the tone is typed: a typo in a hand-written attribute fails\n     * silently, a typo here fails the build.\n     *\n     * `\"default\"` hands a region inside an inverse section back to the page's\n     * tokens — light or dark, whichever the page is on — by writing\n     * `data-tempest-tone=\"default\"`: a white form or price card in a navy hero.\n     * The rules ship with the inverse tokens, so it costs nothing until those are\n     * loaded, and outside an inverse section the tokens it restores are the ones\n     * already there.\n     */\n    tone?: SectionTone;\n}\n\n/**\n * `<section>` that takes its accessible name from the `SectionHeader` inside it.\n *\n * A `<section>` is exposed as a `region` landmark only when it has an\n * accessible name; without one it is an anonymous group and screen-reader\n * landmark navigation skips it. Wiring `aria-labelledby` to the heading id is\n * the same mechanical step on every page, so the section does it: every\n * `SectionHeader` with a `title` below it reaches the section through context\n * (so wrappers in between do not break the link) and the first one names it;\n * when it unmounts, the next one takes over. An explicit `aria-labelledby` or\n * `aria-label` wins over the automatic one, and once mounted with no titled\n * heading the attribute is left off rather than pointing at nothing.\n *\n * The section owns the id (`useId`), so the link is already in the first\n * render — `renderToString` and the HTML a server sends — where no effect runs.\n * The parent's attributes are written before any child renders, so the section\n * cannot know what is below it: it always writes its own id, and the first\n * titled `SectionHeader` in render order puts that id on its heading. Two\n * cases cannot be known on the server, and both are settled on hydration\n * without a mismatch warning: with no titled heading the server attribute is\n * dropped (until then it resolves to nothing, which Chromium 153 exposes as\n * the same anonymous group as no attribute at all), and when that first header\n * has an explicit `id` the attribute moves to it. A consumer that needs the\n * explicit id in the server HTML passes `aria-labelledby` itself.\n *\n * @example\n * <Section>\n *     <SectionHeader title=\"Planos\" />\n *     <PlanGrid />\n * </Section>\n *\n * @example\n * <Section tone=\"inverse\">\n *     <SectionHeader title=\"Comece agora\" />\n *     <Button>Criar conta</Button>\n * </Section>\n */\nexport function Section({ children, tone, ...props }: SectionProps) {\n    const sectionId = useId();\n    const ownerRef = useRef<string | null>(null);\n    const [headingIds, setHeadingIds] = useState<string[] | null>(null);\n    const context = useMemo<SectionContextValue>(\n        () => ({\n            sectionId,\n            claim: (headerKey: string) => {\n                ownerRef.current ??= headerKey;\n                return ownerRef.current === headerKey;\n            },\n            register: (id: string) => {\n                setHeadingIds((current) => [...(current ?? []), id]);\n                return () =>\n                    setHeadingIds((current) => (current ?? []).filter((entry) => entry !== id));\n            },\n        }),\n        [sectionId],\n    );\n    useLayoutEffect(() => {\n        setHeadingIds((current) => current ?? []);\n    }, []);\n    const named = props[\"aria-labelledby\"] !== undefined || props[\"aria-label\"] !== undefined;\n    const labelledBy = headingIds === null ? sectionId : headingIds[0];\n    return (\n        <SectionContext.Provider value={context}>\n            <section\n                aria-labelledby={named ? undefined : labelledBy}\n                data-tempest-tone={tone}\n                {...props}\n            >\n                {children}\n            </section>\n        </SectionContext.Provider>\n    );\n}\n"],"mappings":"oIA6CA,IAAM,GAAA,EAAiB,EAAA,cAAA,CAA0C,IAAI,EAoCrE,SAAgB,EAAc,CAC1B,QACA,UACA,cACA,UACA,QAAQ,EACR,QAAQ,QACR,KACA,YACA,GAAG,GACgB,CACnB,IAAM,GAAA,EAAS,EAAA,MAAA,CAAM,EACf,GAAA,EAAU,EAAA,WAAA,CAAW,CAAc,EACnC,EAAW,EAAQ,EACnB,EAAc,IAAY,MAAQ,GAAY,EAAQ,MAAM,CAAM,EAClE,EAAY,IAAO,EAAc,EAAQ,UAAY,GACrD,EAAW,GAAS,SAK1B,IAJA,EAAA,EAAA,gBAAA,KAAsB,CACd,GAAC,GAAa,EAClB,OAAO,EAAS,CAAS,CAC7B,EAAG,CAAC,EAAU,EAAU,CAAS,CAAC,EAC9B,CAAC,GAAS,CAAC,GAAW,CAAC,GAAe,CAAC,EAAS,OAAO,KAC3D,IAAM,EAAU,IAAI,IACpB,OACI,EAAA,EAAA,KAAA,CAAC,SAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,IAAU,UAAY,EAAA,QAAO,OAAQ,CAAS,EAC3E,GAAI,EAFR,SAAA,EAII,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,WAAvB,SAAA,CACK,IAAW,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,SAAA,CAAa,CAAA,EACzD,IACG,EAAA,EAAA,IAAA,CAAC,EAAD,CAAS,GAAI,EAAW,UAAW,EAAA,QAAO,MACrC,SAAA,CACI,CAAA,EAEZ,IAAe,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAW,EAAA,QAAO,YAAc,SAAA,CAAe,CAAA,CACjE,CACJ,CAAA,EAAA,IAAW,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,SAAA,CAAa,CAAA,CACtD,GAEhB,CAiEA,SAAgB,EAAQ,CAAE,WAAU,OAAM,GAAG,GAAuB,CAChE,IAAM,GAAA,EAAY,EAAA,MAAA,CAAM,EAClB,GAAA,EAAW,EAAA,OAAA,CAAsB,IAAI,EACrC,CAAC,EAAY,IAAA,EAAiB,EAAA,SAAA,CAA0B,IAAI,EAC5D,GAAA,EAAU,EAAA,QAAA,MACL,CACH,YACA,MAAQ,IACJ,EAAS,UAAY,EACd,EAAS,UAAY,GAEhC,SAAW,IACP,EAAe,GAAY,CAAC,GAAI,GAAW,CAAC,EAAI,CAAE,CAAC,MAE/C,EAAe,IAAa,GAAW,CAAC,EAAA,CAAG,OAAQ,GAAU,IAAU,CAAE,CAAC,EAEtF,GACA,CAAC,CAAS,CACd,GACA,EAAA,EAAA,gBAAA,KAAsB,CAClB,EAAe,GAAY,GAAW,CAAC,CAAC,CAC5C,EAAG,CAAC,CAAC,EACL,IAAM,EAAQ,EAAM,qBAAuB,IAAA,IAAa,EAAM,gBAAkB,IAAA,GAC1E,EAAa,IAAe,KAAO,EAAY,EAAW,GAChE,OACI,EAAA,EAAA,IAAA,CAAC,EAAe,SAAhB,CAAyB,MAAO,EAC5B,UAAA,EAAA,EAAA,IAAA,CAAC,UAAD,CACI,kBAAiB,EAAQ,IAAA,GAAY,EACrC,oBAAmB,EACnB,GAAI,EAEH,UACI,CAAA,CACY,CAAA,CAEjC"}

package/dist/components/SectionHeader/SectionHeader.js

@@ -0,0 +1,66 @@
+import { cn as e } from "../../utils/cn.js";
+import t from "./SectionHeader.module.js";
+import { createContext as n, useContext as r, useId as i, useLayoutEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/SectionHeader/SectionHeader.tsx
+var d = n(null);
+function f({ title: n, eyebrow: o, description: s, actions: c, level: f = 2, align: p = "start", id: m, className: h, ...g }) {
+	let _ = i(), v = r(d), y = !!n, b = v !== null && y && v.claim(_), x = m ?? (b ? v.sectionId : _), S = v?.register;
+	if (a(() => {
+		if (S && y) return S(x);
+	}, [
+		S,
+		y,
+		x
+	]), !n && !o && !s && !c) return null;
+	let C = `h${f}`;
+	return /* @__PURE__ */ u("header", {
+		className: e(t.header, p === "center" && t.center, h),
+		...g,
+		children: [/* @__PURE__ */ u("div", {
+			className: t.headerText,
+			children: [
+				o && /* @__PURE__ */ l("div", {
+					className: t.eyebrow,
+					children: o
+				}),
+				n && /* @__PURE__ */ l(C, {
+					id: x,
+					className: t.title,
+					children: n
+				}),
+				s && /* @__PURE__ */ l("p", {
+					className: t.description,
+					children: s
+				})
+			]
+		}), c && /* @__PURE__ */ l("div", {
+			className: t.actions,
+			children: c
+		})]
+	});
+}
+function p({ children: e, tone: t, ...n }) {
+	let r = i(), u = s(null), [f, p] = c(null), m = o(() => ({
+		sectionId: r,
+		claim: (e) => (u.current ??= e, u.current === e),
+		register: (e) => (p((t) => [...t ?? [], e]), () => p((t) => (t ?? []).filter((t) => t !== e)))
+	}), [r]);
+	a(() => {
+		p((e) => e ?? []);
+	}, []);
+	let h = n["aria-labelledby"] !== void 0 || n["aria-label"] !== void 0, g = f === null ? r : f[0];
+	return /* @__PURE__ */ l(d.Provider, {
+		value: m,
+		children: /* @__PURE__ */ l("section", {
+			"aria-labelledby": h ? void 0 : g,
+			"data-tempest-tone": t,
+			...n,
+			children: e
+		})
+	});
+}
+//#endregion
+export { p as Section, f as SectionHeader };
+
+//# sourceMappingURL=SectionHeader.js.map

package/dist/components/SectionHeader/SectionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.js","names":[],"sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a heading block is slots (eyebrow, title, description,\n * actions) plus the three switches that decide its semantics: level, align and the\n * heading id. Splitting them would leave the id away from the heading it names.\n */\nimport {\n    createContext,\n    useContext,\n    useId,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SectionHeader.module.css\";\n\nexport type SectionHeaderLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type SectionHeaderAlign = \"start\" | \"center\";\n\n/**\n * Links the nearest `<Section>` to the heading that names it.\n *\n * Two channels, because they answer at different times:\n *\n * - `sectionId` + `claim` work during render, so the link exists in the very\n *   first HTML (`renderToString`, hydration) where no effect runs. The section\n *   owns `sectionId` (from `useId`, identical on server and client) and writes\n *   it to `aria-labelledby` before any child renders; the first titled\n *   `SectionHeader` to call `claim` in render order becomes its owner and, when\n *   it has no explicit `id`, puts `sectionId` on its heading. `claim` is keyed by\n *   the caller's own `useId`, so asking twice (Strict Mode, a re-render) gives\n *   the same answer and never hands the id to a second heading.\n * - `register` works after mount and is the source of truth from then on: it\n *   returns the matching unregister so a heading that unmounts (or changes id)\n *   releases the section instead of leaving `aria-labelledby` pointing at an\n *   element that no longer exists, and the next registered heading takes over.\n */\ninterface SectionContextValue {\n    sectionId: string;\n    claim: (headerKey: string) => boolean;\n    register: (headingId: string) => () => void;\n}\n\nconst SectionContext = createContext<SectionContextValue | null>(null);\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\" | \"id\"> {\n    /** Heading text, rendered as `<h{level}>`. */\n    title?: ReactNode;\n    /** Short label above the title (category, breadcrumbs). */\n    eyebrow?: ReactNode;\n    /** Supporting text rendered below the title. */\n    description?: ReactNode;\n    /** Trailing slot for buttons or menus. */\n    actions?: ReactNode;\n    /** Heading level — semantics only, the look does not change with it. Default `2`. */\n    level?: SectionHeaderLevel;\n    /** Horizontal alignment of the text block. Default `\"start\"`. */\n    align?: SectionHeaderAlign;\n    /** Id of the heading element. Generated with `useId` when absent. */\n    id?: string;\n}\n\n/**\n * Header of a page or of one section of it: eyebrow, title, description and\n * actions, with the same look `Page` uses for its own header.\n *\n * The heading level is a prop because one page needs one `<h1>` and many\n * `<h2>` that look alike; the visual stays the same at every level so the\n * outline is picked by meaning, not by size. Inside a `<Section>` the first\n * titled header takes the section's own id for its heading (unless `id` is\n * given) and registers it, which is what gives the `region` landmark its\n * accessible name — in the server HTML too.\n *\n * @example\n * <Section>\n *     <SectionHeader eyebrow=\"Soluções\" title=\"O que podemos desenvolver\" align=\"center\" />\n *     <p>Conteúdo da seção.</p>\n * </Section>\n */\nexport function SectionHeader({\n    title,\n    eyebrow,\n    description,\n    actions,\n    level = 2,\n    align = \"start\",\n    id,\n    className,\n    ...props\n}: SectionHeaderProps) {\n    const autoId = useId();\n    const section = useContext(SectionContext);\n    const hasTitle = Boolean(title);\n    const ownsSection = section !== null && hasTitle && section.claim(autoId);\n    const headingId = id ?? (ownsSection ? section.sectionId : autoId);\n    const register = section?.register;\n    useLayoutEffect(() => {\n        if (!register || !hasTitle) return undefined;\n        return register(headingId);\n    }, [register, hasTitle, headingId]);\n    if (!title && !eyebrow && !description && !actions) return null;\n    const Heading = `h${level}` as const;\n    return (\n        <header\n            className={cn(styles.header, align === \"center\" && styles.center, className)}\n            {...props}\n        >\n            <div className={styles.headerText}>\n                {eyebrow && <div className={styles.eyebrow}>{eyebrow}</div>}\n                {title && (\n                    <Heading id={headingId} className={styles.title}>\n                        {title}\n                    </Heading>\n                )}\n                {description && <p className={styles.description}>{description}</p>}\n            </div>\n            {actions && <div className={styles.actions}>{actions}</div>}\n        </header>\n    );\n}\n\n/** Surface tone a {@link Section} can take. */\nexport type SectionTone = \"inverse\" | \"default\";\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement> {\n    /**\n     * `\"inverse\"` paints the section in the brand color and inverts every color\n     * token inside it, by writing `data-tempest-tone=\"inverse\"`. The tokens are\n     * opt-in, because most apps never paint a section in the brand: they come\n     * from `tempest-react-sdk/styles/inverse.css` for the SDK's own blue, or from\n     * `createTheme({ primary, inverse: createInverseSurface })` for yours, each\n     * measured against the fill (text and muted text at 4.5:1 or more, the focus\n     * ring at 3:1 or more). With neither loaded the attribute matches nothing and\n     * the section keeps the page's tokens — legible, not inverted. The prop\n     * exists so the tone is typed: a typo in a hand-written attribute fails\n     * silently, a typo here fails the build.\n     *\n     * `\"default\"` hands a region inside an inverse section back to the page's\n     * tokens — light or dark, whichever the page is on — by writing\n     * `data-tempest-tone=\"default\"`: a white form or price card in a navy hero.\n     * The rules ship with the inverse tokens, so it costs nothing until those are\n     * loaded, and outside an inverse section the tokens it restores are the ones\n     * already there.\n     */\n    tone?: SectionTone;\n}\n\n/**\n * `<section>` that takes its accessible name from the `SectionHeader` inside it.\n *\n * A `<section>` is exposed as a `region` landmark only when it has an\n * accessible name; without one it is an anonymous group and screen-reader\n * landmark navigation skips it. Wiring `aria-labelledby` to the heading id is\n * the same mechanical step on every page, so the section does it: every\n * `SectionHeader` with a `title` below it reaches the section through context\n * (so wrappers in between do not break the link) and the first one names it;\n * when it unmounts, the next one takes over. An explicit `aria-labelledby` or\n * `aria-label` wins over the automatic one, and once mounted with no titled\n * heading the attribute is left off rather than pointing at nothing.\n *\n * The section owns the id (`useId`), so the link is already in the first\n * render — `renderToString` and the HTML a server sends — where no effect runs.\n * The parent's attributes are written before any child renders, so the section\n * cannot know what is below it: it always writes its own id, and the first\n * titled `SectionHeader` in render order puts that id on its heading. Two\n * cases cannot be known on the server, and both are settled on hydration\n * without a mismatch warning: with no titled heading the server attribute is\n * dropped (until then it resolves to nothing, which Chromium 153 exposes as\n * the same anonymous group as no attribute at all), and when that first header\n * has an explicit `id` the attribute moves to it. A consumer that needs the\n * explicit id in the server HTML passes `aria-labelledby` itself.\n *\n * @example\n * <Section>\n *     <SectionHeader title=\"Planos\" />\n *     <PlanGrid />\n * </Section>\n *\n * @example\n * <Section tone=\"inverse\">\n *     <SectionHeader title=\"Comece agora\" />\n *     <Button>Criar conta</Button>\n * </Section>\n */\nexport function Section({ children, tone, ...props }: SectionProps) {\n    const sectionId = useId();\n    const ownerRef = useRef<string | null>(null);\n    const [headingIds, setHeadingIds] = useState<string[] | null>(null);\n    const context = useMemo<SectionContextValue>(\n        () => ({\n            sectionId,\n            claim: (headerKey: string) => {\n                ownerRef.current ??= headerKey;\n                return ownerRef.current === headerKey;\n            },\n            register: (id: string) => {\n                setHeadingIds((current) => [...(current ?? []), id]);\n                return () =>\n                    setHeadingIds((current) => (current ?? []).filter((entry) => entry !== id));\n            },\n        }),\n        [sectionId],\n    );\n    useLayoutEffect(() => {\n        setHeadingIds((current) => current ?? []);\n    }, []);\n    const named = props[\"aria-labelledby\"] !== undefined || props[\"aria-label\"] !== undefined;\n    const labelledBy = headingIds === null ? sectionId : headingIds[0];\n    return (\n        <SectionContext.Provider value={context}>\n            <section\n                aria-labelledby={named ? undefined : labelledBy}\n                data-tempest-tone={tone}\n                {...props}\n            >\n                {children}\n            </section>\n        </SectionContext.Provider>\n    );\n}\n"],"mappings":";;;;;AA6CA,IAAM,IAAiB,EAA0C,IAAI;AAoCrE,SAAgB,EAAc,EAC1B,UACA,YACA,gBACA,YACA,WAAQ,GACR,WAAQ,SACR,OACA,cACA,GAAG,KACgB;CACnB,IAAM,IAAS,EAAM,GACf,IAAU,EAAW,CAAc,GACnC,IAAW,EAAQ,GACnB,IAAc,MAAY,QAAQ,KAAY,EAAQ,MAAM,CAAM,GAClE,IAAY,MAAO,IAAc,EAAQ,YAAY,IACrD,IAAW,GAAS;CAK1B,IAJA,QAAsB;EACd,IAAC,KAAa,GAClB,OAAO,EAAS,CAAS;CAC7B,GAAG;EAAC;EAAU;EAAU;CAAS,CAAC,GAC9B,CAAC,KAAS,CAAC,KAAW,CAAC,KAAe,CAAC,GAAS,OAAO;CAC3D,IAAM,IAAU,IAAI;CACpB,OACI,kBAAC,UAAD;EACI,WAAW,EAAG,EAAO,QAAQ,MAAU,YAAY,EAAO,QAAQ,CAAS;EAC3E,GAAI;EAFR,UAAA,CAII,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAvB,UAAA;IACK,KAAW,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAU,UAAA;IAAa,CAAA;IACzD,KACG,kBAAC,GAAD;KAAS,IAAI;KAAW,WAAW,EAAO;KACrC,UAAA;IACI,CAAA;IAEZ,KAAe,kBAAC,KAAD;KAAG,WAAW,EAAO;KAAc,UAAA;IAAe,CAAA;GACjE;EACJ,CAAA,GAAA,KAAW,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAU,UAAA;EAAa,CAAA,CACtD;;AAEhB;AAiEA,SAAgB,EAAQ,EAAE,aAAU,SAAM,GAAG,KAAuB;CAChE,IAAM,IAAY,EAAM,GAClB,IAAW,EAAsB,IAAI,GACrC,CAAC,GAAY,KAAiB,EAA0B,IAAI,GAC5D,IAAU,SACL;EACH;EACA,QAAQ,OACJ,EAAS,YAAY,GACd,EAAS,YAAY;EAEhC,WAAW,OACP,GAAe,MAAY,CAAC,GAAI,KAAW,CAAC,GAAI,CAAE,CAAC,SAE/C,GAAe,OAAa,KAAW,CAAC,EAAA,CAAG,QAAQ,MAAU,MAAU,CAAE,CAAC;CAEtF,IACA,CAAC,CAAS,CACd;CACA,QAAsB;EAClB,GAAe,MAAY,KAAW,CAAC,CAAC;CAC5C,GAAG,CAAC,CAAC;CACL,IAAM,IAAQ,EAAM,uBAAuB,KAAA,KAAa,EAAM,kBAAkB,KAAA,GAC1E,IAAa,MAAe,OAAO,IAAY,EAAW;CAChE,OACI,kBAAC,EAAe,UAAhB;EAAyB,OAAO;EAC5B,UAAA,kBAAC,WAAD;GACI,mBAAiB,IAAQ,KAAA,IAAY;GACrC,qBAAmB;GACnB,GAAI;GAEH;EACI,CAAA;CACY,CAAA;AAEjC"}

package/dist/components/SectionHeader/SectionHeader.module.cjs

@@ -0,0 +1,3 @@
+require("../../styles/component/SectionHeader.css");
+var e=`tempest_header_38yhB`,t=`tempest_headerText_3YDF-`,n=`tempest_eyebrow_slLcy`,r=`tempest_title_nY6QC`,i=`tempest_description_-Gbs9`,a=`tempest_actions_dzFrP`,o=`tempest_center_lDAVK`,s={header:e,headerText:t,eyebrow:n,title:r,description:i,actions:a,center:o};exports.actions=a,exports.center=o,exports.default=s,exports.description=i,exports.eyebrow=n,exports.header=e,exports.headerText=t,exports.title=r;
+//# sourceMappingURL=SectionHeader.module.cjs.map

package/dist/components/SectionHeader/SectionHeader.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.module.cjs","names":[],"sources":["../../../src/components/SectionHeader/SectionHeader.module.css"],"sourcesContent":[".header {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-4);\n    margin-bottom: var(--tempest-space-5);\n    flex-wrap: wrap;\n}\n\n.headerText {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.eyebrow {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n    margin-bottom: var(--tempest-space-1);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-2xl);\n    font-weight: var(--tempest-weight-bold);\n    line-height: var(--tempest-leading-tight);\n}\n\n.description {\n    margin: var(--tempest-space-2) 0 0;\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n}\n\n.actions {\n    display: flex;\n    gap: var(--tempest-space-2);\n    flex: 0 0 auto;\n    flex-wrap: wrap;\n}\n\n.center {\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n}\n\n.center .actions {\n    justify-content: center;\n}\n"],"mappings":";"}

package/dist/components/SectionHeader/SectionHeader.module.js

@@ -0,0 +1,15 @@
+import "../../styles/component/SectionHeader.css";
+//#region src/components/SectionHeader/SectionHeader.module.css
+var e = "tempest_header_38yhB", t = "tempest_headerText_3YDF-", n = "tempest_eyebrow_slLcy", r = "tempest_title_nY6QC", i = "tempest_description_-Gbs9", a = "tempest_actions_dzFrP", o = "tempest_center_lDAVK", s = {
+	header: e,
+	headerText: t,
+	eyebrow: n,
+	title: r,
+	description: i,
+	actions: a,
+	center: o
+};
+//#endregion
+export { a as actions, o as center, s as default, i as description, n as eyebrow, e as header, t as headerText, r as title };
+
+//# sourceMappingURL=SectionHeader.module.js.map

package/dist/components/SectionHeader/SectionHeader.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.module.js","names":[],"sources":["../../../src/components/SectionHeader/SectionHeader.module.css"],"sourcesContent":[".header {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-4);\n    margin-bottom: var(--tempest-space-5);\n    flex-wrap: wrap;\n}\n\n.headerText {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.eyebrow {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n    margin-bottom: var(--tempest-space-1);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-2xl);\n    font-weight: var(--tempest-weight-bold);\n    line-height: var(--tempest-leading-tight);\n}\n\n.description {\n    margin: var(--tempest-space-2) 0 0;\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n}\n\n.actions {\n    display: flex;\n    gap: var(--tempest-space-2);\n    flex: 0 0 auto;\n    flex-wrap: wrap;\n}\n\n.center {\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n}\n\n.center .actions {\n    justify-content: center;\n}\n"],"mappings":";"}