tempest-react-sdk 0.77.0 → 0.79.0

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

@@ -1 +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"}
+{"version":3,"file":"SectionHeader.cjs","names":["createContext","useId","useContext","cn","styles","useRef","useState","useMemo","require_cn","require_SectionHeader_module","react","react_jsx_runtime","SectionContext","SectionHeader","props","autoId","section","hasTitle","title","ownsSection","headingId","id","register","eyebrow","description","actions","Heading","level","align","className","Section","sectionId","ownerRef","headingIds","setHeadingIds","context","headerKey","current","entry","named","labelledBy","tone"],"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":"A,oIA6CA,IAAMY,GAAA,EAAiBZ,EAAAA,cAAAA,CAA0C,IAAI,EAoCrE,SAAgBa,EAAc,CAC1B,QACA,UACA,cACA,UACA,QAAQ,EACR,QAAQ,QACR,KACA,YACA,GAAGC,GACgB,CACnB,IAAMC,GAAA,EAASd,EAAAA,MAAAA,CAAM,EACfe,GAAA,EAAUd,EAAAA,WAAAA,CAAWU,CAAc,EACnCK,EAAW,EAAQC,EACnBC,EAAcH,IAAY,MAAQC,GAAYD,EAAQ,MAAMD,CAAM,EAClEK,EAAYC,IAAOF,EAAcH,EAAQ,UAAYD,GACrDO,EAAWN,GAAS,SAK1B,IAJA,EAAAN,EAAA,gBAAA,KAAsB,CAClB,GAAKY,GAAaL,EAClB,OAAOK,EAASF,CAAS,CAC7B,EAAG,CAACE,EAAUL,EAAUG,CAAS,CAAC,EAC9B,CAACF,GAAS,CAACK,GAAW,CAACC,GAAe,CAACC,EAAS,OAAO,KAC3D,IAAMC,EAAU,IAAIC,IACpB,OACI,EAAAhB,EAAA,KAAA,CAAC,SAAD,CACI,UAAWR,EAAAA,GAAGC,EAAAA,QAAO,OAAQwB,IAAU,UAAYxB,EAAAA,QAAO,OAAQyB,CAAS,EAC3E,GAAIf,EAFR,SAAA,EAII,EAAAH,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWP,EAAAA,QAAO,WAAvB,SAAA,CACKmB,IAAW,EAAAZ,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWP,EAAAA,QAAO,QAAU,SAAAmB,CAAa,CAAA,EACzDL,IACG,EAAAP,EAAA,IAAA,CAACe,EAAD,CAAS,GAAIN,EAAW,UAAWhB,EAAAA,QAAO,MACrC,SAAAc,CACI,CAAA,EAEZM,IAAe,EAAAb,EAAA,IAAA,CAAC,IAAD,CAAG,UAAWP,EAAAA,QAAO,YAAc,SAAAoB,CAAe,CAAA,CACjE,CACJ,CAAA,EAAAC,IAAW,EAAAd,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWP,EAAAA,QAAO,QAAU,SAAAqB,CAAa,CAAA,CACtD,C,EAEhB,CAiEA,SAAgBK,EAAQ,CAAE,WAAU,OAAM,GAAGhB,GAAuB,CAChE,IAAMiB,GAAA,EAAY9B,EAAAA,MAAAA,CAAM,EAClB+B,GAAA,EAAW3B,EAAAA,OAAAA,CAAsB,IAAI,EACrC,CAAC4B,EAAYC,IAAA,EAAiB5B,EAAAA,SAAAA,CAA0B,IAAI,EAC5D6B,GAAA,EAAU5B,EAAAA,QAAAA,MACL,CACH,YACA,MAAQ,IACJ,EAAS,UAAY6B,EACdJ,EAAS,UAAYI,GAEhC,SAAW,IACPF,EAAe,GAAY,CAAC,GAAIG,GAAW,CAAC,EAAIhB,CAAE,CAAC,MAE/Ca,EAAe,IAAaG,GAAW,CAAC,EAAA,CAAG,OAAQ,GAAUC,IAAUjB,CAAE,CAAC,EAEtF,GACA,CAACU,CAAS,CACd,GACA,EAAArB,EAAA,gBAAA,KAAsB,CAClBwB,EAAe,GAAYG,GAAW,CAAC,CAAC,CAC5C,EAAG,CAAC,CAAC,EACL,IAAME,EAAQzB,EAAM,qBAAuB,IAAA,IAAaA,EAAM,gBAAkB,IAAA,GAC1E0B,EAAaP,IAAe,KAAOF,EAAYE,EAAW,GAChE,OACI,EAAAtB,EAAA,IAAA,CAACC,EAAe,SAAhB,CAAyB,MAAOuB,EAC5B,UAAA,EAAAxB,EAAA,IAAA,CAAC,UAAD,CACI,kBAAiB4B,EAAQ,IAAA,GAAYC,EACrC,oBAAmBC,EACnB,GAAI3B,EAEH,UACI,CAAA,CACY,CAAA,CAEjC,C"}

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

@@ -1 +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"}
+{"version":3,"file":"SectionHeader.js","names":["styles","SectionHeader_module_default","SectionContext","createContext","SectionHeader","props","autoId","useId","section","useContext","hasTitle","title","ownsSection","headingId","id","register","useLayoutEffect","eyebrow","description","actions","Heading","level","cn","align","className","Section","sectionId","ownerRef","useRef","headingIds","setHeadingIds","useState","context","useMemo","headerKey","current","entry","named","labelledBy","tone"],"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,IAAME,IAAiBC,EAA0C,IAAI;AAoCrE,SAAgBC,EAAc,EAC1B,UACA,YACA,gBACA,YACA,WAAQ,GACR,WAAQ,SACR,OACA,cACA,GAAGC,KACgB;CACnB,IAAMC,IAASC,EAAM,GACfC,IAAUC,EAAWP,CAAc,GACnCQ,IAAW,EAAQC,GACnBC,IAAcJ,MAAY,QAAQE,KAAYF,EAAQ,MAAMF,CAAM,GAClEO,IAAYC,MAAOF,IAAcJ,EAAQ,YAAYF,IACrDS,IAAWP,GAAS;CAK1B,IAJAQ,QAAsB;EAClB,IAAKD,KAAaL,GAClB,OAAOK,EAASF,CAAS;CAC7B,GAAG;EAACE;EAAUL;EAAUG;CAAS,CAAC,GAC9B,CAACF,KAAS,CAACM,KAAW,CAACC,KAAe,CAACC,GAAS,OAAO;CAC3D,IAAMC,IAAU,IAAIC;CACpB,OACI,kBAAC,UAAD;EACI,WAAWC,EAAGtB,EAAO,QAAQuB,MAAU,YAAYvB,EAAO,QAAQwB,CAAS;EAC3E,GAAInB;EAFR,UAAA,CAII,kBAAC,OAAD;GAAK,WAAWL,EAAO;GAAvB,UAAA;IACKiB,KAAW,kBAAC,OAAD;KAAK,WAAWjB,EAAO;KAAU,UAAAiB;IAAa,CAAA;IACzDN,KACG,kBAACS,GAAD;KAAS,IAAIP;KAAW,WAAWb,EAAO;KACrC,UAAAW;IACI,CAAA;IAEZO,KAAe,kBAAC,KAAD;KAAG,WAAWlB,EAAO;KAAc,UAAAkB;IAAe,CAAA;GACjE;EACJ,CAAA,GAAAC,KAAW,kBAAC,OAAD;GAAK,WAAWnB,EAAO;GAAU,UAAAmB;EAAa,CAAA,CACtD;;AAEhB;AAiEA,SAAgBM,EAAQ,EAAE,aAAU,SAAM,GAAGpB,KAAuB;CAChE,IAAMqB,IAAYnB,EAAM,GAClBoB,IAAWC,EAAsB,IAAI,GACrC,CAACC,GAAYC,KAAiBC,EAA0B,IAAI,GAC5DC,IAAUC,SACL;EACH;EACA,QAAQ,OACJ,EAAS,YAAYC,GACdP,EAAS,YAAYO;EAEhC,WAAW,OACPJ,GAAe,MAAY,CAAC,GAAIK,KAAW,CAAC,GAAIrB,CAAE,CAAC,SAE/CgB,GAAe,OAAaK,KAAW,CAAC,EAAA,CAAG,QAAQ,MAAUC,MAAUtB,CAAE,CAAC;CAEtF,IACA,CAACY,CAAS,CACd;CACA,QAAsB;EAClB,GAAe,MAAYS,KAAW,CAAC,CAAC;CAC5C,GAAG,CAAC,CAAC;CACL,IAAME,IAAQhC,EAAM,uBAAuB,KAAA,KAAaA,EAAM,kBAAkB,KAAA,GAC1EiC,IAAaT,MAAe,OAAOH,IAAYG,EAAW;CAChE,OACI,kBAAC3B,EAAe,UAAhB;EAAyB,OAAO8B;EAC5B,UAAA,kBAAC,WAAD;GACI,mBAAiBK,IAAQ,KAAA,IAAYC;GACrC,qBAAmBC;GACnB,GAAIlC;GAEH;EACI,CAAA;CACY,CAAA;AAEjC"}

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

@@ -1 +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":";"}
+{"version":3,"file":"SectionHeader.module.cjs","names":["header","headerText","eyebrow","title","description","actions","center","SectionHeader_module_default"],"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.map

@@ -1 +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":";"}
+{"version":3,"file":"SectionHeader.module.js","names":["header","headerText","eyebrow","title","description","actions","center","SectionHeader_module_default"],"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/SegmentedControl/SegmentedControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.cjs","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SegmentedControl.module.css\";\n\nexport interface SegmentedControlOption<TValue extends string = string> {\n    value: TValue;\n    label: ReactNode;\n    icon?: ReactNode;\n    disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<TValue extends string = string> extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    \"onChange\"\n> {\n    /** Available segments. */\n    options: SegmentedControlOption<TValue>[];\n    /** Selected value. */\n    value: TValue;\n    /** Fires with the new value when a segment is selected. */\n    onChange: (value: TValue) => void;\n    /** Visual size. Default `\"md\"`. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Stretch to full width of container. Default `false`. */\n    fullWidth?: boolean;\n    /** Group label for screen readers. */\n    \"aria-label\"?: string;\n}\n\n/**\n * iOS-style segmented control. Two-to-five mutually-exclusive options\n * rendered as a single connected pill bar.\n *\n * @example\n * <SegmentedControl\n *     value={view}\n *     onChange={setView}\n *     options={[\n *         { value: \"list\", label: \"Lista\" },\n *         { value: \"grid\", label: \"Grade\" },\n *     ]}\n * />\n */\nexport function SegmentedControl<TValue extends string = string>({\n    options,\n    value,\n    onChange,\n    size = \"md\",\n    fullWidth = false,\n    className,\n    \"aria-label\": ariaLabel,\n    ...props\n}: SegmentedControlProps<TValue>) {\n    return (\n        <div\n            role=\"radiogroup\"\n            aria-label={ariaLabel}\n            className={cn(styles.group, styles[size], fullWidth && styles.fullWidth, className)}\n            {...props}\n        >\n            {options.map((option) => {\n                const selected = option.value === value;\n                return (\n                    <button\n                        key={option.value}\n                        type=\"button\"\n                        role=\"radio\"\n                        aria-checked={selected}\n                        disabled={option.disabled}\n                        className={cn(styles.segment, selected && styles.active)}\n                        onClick={() => onChange(option.value)}\n                    >\n                        {option.icon && <span className={styles.icon}>{option.icon}</span>}\n                        <span className={styles.label}>{option.label}</span>\n                    </button>\n                );\n            })}\n        </div>\n    );\n}\n"],"mappings":"oHA2CA,SAAgB,EAAiD,CAC7D,UACA,QACA,WACA,OAAO,KACP,YAAY,GACZ,YACA,aAAc,EACd,GAAG,GAC2B,CAC9B,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,KAAK,aACL,aAAY,EACZ,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,EAAA,QAAO,GAAO,GAAa,EAAA,QAAO,UAAW,CAAS,EAClF,GAAI,EAEH,SAAA,EAAQ,IAAK,GAAW,CACrB,IAAM,EAAW,EAAO,QAAU,EAClC,OACI,EAAA,EAAA,KAAA,CAAC,SAAD,CAEI,KAAK,SACL,KAAK,QACL,eAAc,EACd,SAAU,EAAO,SACjB,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,GAAY,EAAA,QAAO,MAAM,EACvD,YAAe,EAAS,EAAO,KAAK,EAPxC,SAAA,CASK,EAAO,OAAQ,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAO,SAAA,EAAO,IAAW,CAAA,GACjE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAQ,SAAA,EAAO,KAAY,CAAA,CAC/C,CAVC,EAAA,EAAO,KAUR,CAEhB,CAAC,CACA,CAAA,CAEb"}
+{"version":3,"file":"SegmentedControl.cjs","names":["cn","styles","require_cn","require_SegmentedControl_module","react_jsx_runtime","SegmentedControl","ariaLabel","props","size","fullWidth","className","options","selected","option","value","onChange"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SegmentedControl.module.css\";\n\nexport interface SegmentedControlOption<TValue extends string = string> {\n    value: TValue;\n    label: ReactNode;\n    icon?: ReactNode;\n    disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<TValue extends string = string> extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    \"onChange\"\n> {\n    /** Available segments. */\n    options: SegmentedControlOption<TValue>[];\n    /** Selected value. */\n    value: TValue;\n    /** Fires with the new value when a segment is selected. */\n    onChange: (value: TValue) => void;\n    /** Visual size. Default `\"md\"`. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Stretch to full width of container. Default `false`. */\n    fullWidth?: boolean;\n    /** Group label for screen readers. */\n    \"aria-label\"?: string;\n}\n\n/**\n * iOS-style segmented control. Two-to-five mutually-exclusive options\n * rendered as a single connected pill bar.\n *\n * @example\n * <SegmentedControl\n *     value={view}\n *     onChange={setView}\n *     options={[\n *         { value: \"list\", label: \"Lista\" },\n *         { value: \"grid\", label: \"Grade\" },\n *     ]}\n * />\n */\nexport function SegmentedControl<TValue extends string = string>({\n    options,\n    value,\n    onChange,\n    size = \"md\",\n    fullWidth = false,\n    className,\n    \"aria-label\": ariaLabel,\n    ...props\n}: SegmentedControlProps<TValue>) {\n    return (\n        <div\n            role=\"radiogroup\"\n            aria-label={ariaLabel}\n            className={cn(styles.group, styles[size], fullWidth && styles.fullWidth, className)}\n            {...props}\n        >\n            {options.map((option) => {\n                const selected = option.value === value;\n                return (\n                    <button\n                        key={option.value}\n                        type=\"button\"\n                        role=\"radio\"\n                        aria-checked={selected}\n                        disabled={option.disabled}\n                        className={cn(styles.segment, selected && styles.active)}\n                        onClick={() => onChange(option.value)}\n                    >\n                        {option.icon && <span className={styles.icon}>{option.icon}</span>}\n                        <span className={styles.label}>{option.label}</span>\n                    </button>\n                );\n            })}\n        </div>\n    );\n}\n"],"mappings":"A,oHA2CA,SAAgBK,EAAiD,CAC7D,UACA,QACA,WACA,OAAO,KACP,YAAY,GACZ,YACA,aAAcC,EACd,GAAGC,GAC2B,CAC9B,OACI,EAAAH,EAAA,IAAA,CAAC,MAAD,CACI,KAAK,aACL,aAAYE,EACZ,UAAWN,EAAAA,GAAGC,EAAAA,QAAO,MAAOA,EAAAA,QAAOO,GAAOC,GAAaR,EAAAA,QAAO,UAAWS,CAAS,EAClF,GAAIH,EAEH,SAAAI,EAAQ,IAAK,GAAW,CACrB,IAAMC,EAAWC,EAAO,QAAUC,EAClC,OACI,EAAAV,EAAA,KAAA,CAAC,SAAD,CAEI,KAAK,SACL,KAAK,QACL,eAAcQ,EACd,SAAUC,EAAO,SACjB,UAAWb,EAAAA,GAAGC,EAAAA,QAAO,QAASW,GAAYX,EAAAA,QAAO,MAAM,EACvD,YAAec,EAASF,EAAO,KAAK,EAPxC,SAAA,CASKA,EAAO,OAAQ,EAAAT,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWH,EAAAA,QAAO,KAAO,SAAAY,EAAO,IAAW,CAAA,GACjE,EAAAT,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWH,EAAAA,QAAO,MAAQ,SAAAY,EAAO,KAAY,CAAA,CAC/C,CAVC,EAAAA,EAAO,KAUR,CAEhB,CAAC,CACA,CAAA,CAEb,C"}

package/dist/components/SegmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SegmentedControl.module.css\";\n\nexport interface SegmentedControlOption<TValue extends string = string> {\n    value: TValue;\n    label: ReactNode;\n    icon?: ReactNode;\n    disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<TValue extends string = string> extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    \"onChange\"\n> {\n    /** Available segments. */\n    options: SegmentedControlOption<TValue>[];\n    /** Selected value. */\n    value: TValue;\n    /** Fires with the new value when a segment is selected. */\n    onChange: (value: TValue) => void;\n    /** Visual size. Default `\"md\"`. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Stretch to full width of container. Default `false`. */\n    fullWidth?: boolean;\n    /** Group label for screen readers. */\n    \"aria-label\"?: string;\n}\n\n/**\n * iOS-style segmented control. Two-to-five mutually-exclusive options\n * rendered as a single connected pill bar.\n *\n * @example\n * <SegmentedControl\n *     value={view}\n *     onChange={setView}\n *     options={[\n *         { value: \"list\", label: \"Lista\" },\n *         { value: \"grid\", label: \"Grade\" },\n *     ]}\n * />\n */\nexport function SegmentedControl<TValue extends string = string>({\n    options,\n    value,\n    onChange,\n    size = \"md\",\n    fullWidth = false,\n    className,\n    \"aria-label\": ariaLabel,\n    ...props\n}: SegmentedControlProps<TValue>) {\n    return (\n        <div\n            role=\"radiogroup\"\n            aria-label={ariaLabel}\n            className={cn(styles.group, styles[size], fullWidth && styles.fullWidth, className)}\n            {...props}\n        >\n            {options.map((option) => {\n                const selected = option.value === value;\n                return (\n                    <button\n                        key={option.value}\n                        type=\"button\"\n                        role=\"radio\"\n                        aria-checked={selected}\n                        disabled={option.disabled}\n                        className={cn(styles.segment, selected && styles.active)}\n                        onClick={() => onChange(option.value)}\n                    >\n                        {option.icon && <span className={styles.icon}>{option.icon}</span>}\n                        <span className={styles.label}>{option.label}</span>\n                    </button>\n                );\n            })}\n        </div>\n    );\n}\n"],"mappings":";;;;AA2CA,SAAgB,EAAiD,EAC7D,YACA,UACA,aACA,UAAO,MACP,eAAY,IACZ,cACA,cAAc,GACd,GAAG,KAC2B;CAC9B,OACI,kBAAC,OAAD;EACI,MAAK;EACL,cAAY;EACZ,WAAW,EAAG,EAAO,OAAO,EAAO,IAAO,KAAa,EAAO,WAAW,CAAS;EAClF,GAAI;EAEH,UAAA,EAAQ,KAAK,MAAW;GACrB,IAAM,IAAW,EAAO,UAAU;GAClC,OACI,kBAAC,UAAD;IAEI,MAAK;IACL,MAAK;IACL,gBAAc;IACd,UAAU,EAAO;IACjB,WAAW,EAAG,EAAO,SAAS,KAAY,EAAO,MAAM;IACvD,eAAe,EAAS,EAAO,KAAK;IAPxC,UAAA,CASK,EAAO,QAAQ,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAO,UAAA,EAAO;IAAW,CAAA,GACjE,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAQ,UAAA,EAAO;IAAY,CAAA,CAC/C;GAVC,GAAA,EAAO,KAUR;EAEhB,CAAC;CACA,CAAA;AAEb"}
+{"version":3,"file":"SegmentedControl.js","names":["styles","SegmentedControl_module_default","SegmentedControl","ariaLabel","props","cn","size","fullWidth","className","options","selected","option","value","onChange"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SegmentedControl.module.css\";\n\nexport interface SegmentedControlOption<TValue extends string = string> {\n    value: TValue;\n    label: ReactNode;\n    icon?: ReactNode;\n    disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<TValue extends string = string> extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    \"onChange\"\n> {\n    /** Available segments. */\n    options: SegmentedControlOption<TValue>[];\n    /** Selected value. */\n    value: TValue;\n    /** Fires with the new value when a segment is selected. */\n    onChange: (value: TValue) => void;\n    /** Visual size. Default `\"md\"`. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Stretch to full width of container. Default `false`. */\n    fullWidth?: boolean;\n    /** Group label for screen readers. */\n    \"aria-label\"?: string;\n}\n\n/**\n * iOS-style segmented control. Two-to-five mutually-exclusive options\n * rendered as a single connected pill bar.\n *\n * @example\n * <SegmentedControl\n *     value={view}\n *     onChange={setView}\n *     options={[\n *         { value: \"list\", label: \"Lista\" },\n *         { value: \"grid\", label: \"Grade\" },\n *     ]}\n * />\n */\nexport function SegmentedControl<TValue extends string = string>({\n    options,\n    value,\n    onChange,\n    size = \"md\",\n    fullWidth = false,\n    className,\n    \"aria-label\": ariaLabel,\n    ...props\n}: SegmentedControlProps<TValue>) {\n    return (\n        <div\n            role=\"radiogroup\"\n            aria-label={ariaLabel}\n            className={cn(styles.group, styles[size], fullWidth && styles.fullWidth, className)}\n            {...props}\n        >\n            {options.map((option) => {\n                const selected = option.value === value;\n                return (\n                    <button\n                        key={option.value}\n                        type=\"button\"\n                        role=\"radio\"\n                        aria-checked={selected}\n                        disabled={option.disabled}\n                        className={cn(styles.segment, selected && styles.active)}\n                        onClick={() => onChange(option.value)}\n                    >\n                        {option.icon && <span className={styles.icon}>{option.icon}</span>}\n                        <span className={styles.label}>{option.label}</span>\n                    </button>\n                );\n            })}\n        </div>\n    );\n}\n"],"mappings":";;;;AA2CA,SAAgBE,EAAiD,EAC7D,YACA,UACA,aACA,UAAO,MACP,eAAY,IACZ,cACA,cAAcC,GACd,GAAGC,KAC2B;CAC9B,OACI,kBAAC,OAAD;EACI,MAAK;EACL,cAAYD;EACZ,WAAWE,EAAGL,EAAO,OAAOA,EAAOM,IAAOC,KAAaP,EAAO,WAAWQ,CAAS;EAClF,GAAIJ;EAEH,UAAAK,EAAQ,KAAK,MAAW;GACrB,IAAMC,IAAWC,EAAO,UAAUC;GAClC,OACI,kBAAC,UAAD;IAEI,MAAK;IACL,MAAK;IACL,gBAAcF;IACd,UAAUC,EAAO;IACjB,WAAWN,EAAGL,EAAO,SAASU,KAAYV,EAAO,MAAM;IACvD,eAAea,EAASF,EAAO,KAAK;IAPxC,UAAA,CASKA,EAAO,QAAQ,kBAAC,QAAD;KAAM,WAAWX,EAAO;KAAO,UAAAW,EAAO;IAAW,CAAA,GACjE,kBAAC,QAAD;KAAM,WAAWX,EAAO;KAAQ,UAAAW,EAAO;IAAY,CAAA,CAC/C;GAVC,GAAAA,EAAO,KAUR;EAEhB,CAAC;CACA,CAAA;AAEb"}

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.module.cjs","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".group {\n    display: inline-flex;\n    background: var(--tempest-surface-2);\n    border-radius: var(--tempest-radius-md);\n    padding: 2px;\n    font-family: var(--tempest-font-sans);\n    gap: 0;\n}\n\n.group.fullWidth {\n    display: flex;\n    width: 100%;\n}\n\n.segment {\n    flex: 1 1 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-1);\n    padding: 6px 12px;\n    border: 0;\n    background: transparent;\n    color: var(--tempest-text-muted);\n    cursor: pointer;\n    border-radius: calc(var(--tempest-radius-md) - 2px);\n    font-weight: var(--tempest-weight-medium);\n    transition:\n        background var(--tempest-duration-fast, 120ms),\n        color var(--tempest-duration-fast, 120ms);\n    white-space: nowrap;\n}\n\n.group.sm .segment {\n    padding: 4px 10px;\n    font-size: var(--tempest-text-xs);\n    min-height: 24px;\n}\n\n.group.md .segment {\n    padding: 6px 12px;\n    font-size: var(--tempest-text-sm);\n    min-height: 32px;\n}\n\n.group.lg .segment {\n    padding: 8px 14px;\n    font-size: var(--tempest-text-md);\n    min-height: 40px;\n}\n\n.segment:hover {\n    color: var(--tempest-text);\n}\n\n.segment.active {\n    background: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    box-shadow:\n        inset 0 0 0 2px var(--tempest-selected-indicator),\n        var(--tempest-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.08));\n}\n\n.segment:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n}\n\n.label {\n    line-height: 1;\n}\n"],"mappings":";"}
+{"version":3,"file":"SegmentedControl.module.cjs","names":["group","fullWidth","segment","sm","md","lg","active","icon","label","SegmentedControl_module_default"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".group {\n    display: inline-flex;\n    background: var(--tempest-surface-2);\n    border-radius: var(--tempest-radius-md);\n    padding: 2px;\n    font-family: var(--tempest-font-sans);\n    gap: 0;\n}\n\n.group.fullWidth {\n    display: flex;\n    width: 100%;\n}\n\n.segment {\n    flex: 1 1 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-1);\n    padding: 6px 12px;\n    border: 0;\n    background: transparent;\n    color: var(--tempest-text-muted);\n    cursor: pointer;\n    border-radius: calc(var(--tempest-radius-md) - 2px);\n    font-weight: var(--tempest-weight-medium);\n    transition:\n        background var(--tempest-duration-fast, 120ms),\n        color var(--tempest-duration-fast, 120ms);\n    white-space: nowrap;\n}\n\n.group.sm .segment {\n    padding: 4px 10px;\n    font-size: var(--tempest-text-xs);\n    min-height: 24px;\n}\n\n.group.md .segment {\n    padding: 6px 12px;\n    font-size: var(--tempest-text-sm);\n    min-height: 32px;\n}\n\n.group.lg .segment {\n    padding: 8px 14px;\n    font-size: var(--tempest-text-md);\n    min-height: 40px;\n}\n\n.segment:hover {\n    color: var(--tempest-text);\n}\n\n.segment.active {\n    background: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    box-shadow:\n        inset 0 0 0 2px var(--tempest-selected-indicator),\n        var(--tempest-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.08));\n}\n\n.segment:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n}\n\n.label {\n    line-height: 1;\n}\n"],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.module.js","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".group {\n    display: inline-flex;\n    background: var(--tempest-surface-2);\n    border-radius: var(--tempest-radius-md);\n    padding: 2px;\n    font-family: var(--tempest-font-sans);\n    gap: 0;\n}\n\n.group.fullWidth {\n    display: flex;\n    width: 100%;\n}\n\n.segment {\n    flex: 1 1 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-1);\n    padding: 6px 12px;\n    border: 0;\n    background: transparent;\n    color: var(--tempest-text-muted);\n    cursor: pointer;\n    border-radius: calc(var(--tempest-radius-md) - 2px);\n    font-weight: var(--tempest-weight-medium);\n    transition:\n        background var(--tempest-duration-fast, 120ms),\n        color var(--tempest-duration-fast, 120ms);\n    white-space: nowrap;\n}\n\n.group.sm .segment {\n    padding: 4px 10px;\n    font-size: var(--tempest-text-xs);\n    min-height: 24px;\n}\n\n.group.md .segment {\n    padding: 6px 12px;\n    font-size: var(--tempest-text-sm);\n    min-height: 32px;\n}\n\n.group.lg .segment {\n    padding: 8px 14px;\n    font-size: var(--tempest-text-md);\n    min-height: 40px;\n}\n\n.segment:hover {\n    color: var(--tempest-text);\n}\n\n.segment.active {\n    background: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    box-shadow:\n        inset 0 0 0 2px var(--tempest-selected-indicator),\n        var(--tempest-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.08));\n}\n\n.segment:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n}\n\n.label {\n    line-height: 1;\n}\n"],"mappings":";"}
+{"version":3,"file":"SegmentedControl.module.js","names":["group","fullWidth","segment","sm","md","lg","active","icon","label","SegmentedControl_module_default"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".group {\n    display: inline-flex;\n    background: var(--tempest-surface-2);\n    border-radius: var(--tempest-radius-md);\n    padding: 2px;\n    font-family: var(--tempest-font-sans);\n    gap: 0;\n}\n\n.group.fullWidth {\n    display: flex;\n    width: 100%;\n}\n\n.segment {\n    flex: 1 1 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-1);\n    padding: 6px 12px;\n    border: 0;\n    background: transparent;\n    color: var(--tempest-text-muted);\n    cursor: pointer;\n    border-radius: calc(var(--tempest-radius-md) - 2px);\n    font-weight: var(--tempest-weight-medium);\n    transition:\n        background var(--tempest-duration-fast, 120ms),\n        color var(--tempest-duration-fast, 120ms);\n    white-space: nowrap;\n}\n\n.group.sm .segment {\n    padding: 4px 10px;\n    font-size: var(--tempest-text-xs);\n    min-height: 24px;\n}\n\n.group.md .segment {\n    padding: 6px 12px;\n    font-size: var(--tempest-text-sm);\n    min-height: 32px;\n}\n\n.group.lg .segment {\n    padding: 8px 14px;\n    font-size: var(--tempest-text-md);\n    min-height: 40px;\n}\n\n.segment:hover {\n    color: var(--tempest-text);\n}\n\n.segment.active {\n    background: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    box-shadow:\n        inset 0 0 0 2px var(--tempest-selected-indicator),\n        var(--tempest-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.08));\n}\n\n.segment:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n}\n\n.label {\n    line-height: 1;\n}\n"],"mappings":";"}

package/dist/components/Select/CaretIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CaretIcon.cjs","names":[],"sources":["../../../src/components/Select/CaretIcon.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\n/**\n * The chevron `Select` and `Combobox` draw on the right of the control.\n *\n * Internal to the SDK: the public way to change it is `Select`'s `caretIcon`\n * prop. Its size comes from the `--tempest-control-caret-size` token through the\n * caret slot's stylesheet, so the `width`/`height` attributes here are only the\n * fallback for a page that loaded no SDK CSS.\n *\n * @returns The chevron as an inline SVG drawn in `currentColor`.\n */\nexport function CaretIcon(): ReactElement {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 9l6 6 6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":"mCAYA,SAAgB,GAA0B,CACtC,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACjD,UAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,EAAE,eACF,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,OAClB,CAAA,CACA,CAAA,CAEb"}
+{"version":3,"file":"CaretIcon.cjs","names":["react_jsx_runtime","CaretIcon"],"sources":["../../../src/components/Select/CaretIcon.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\n/**\n * The chevron `Select` and `Combobox` draw on the right of the control.\n *\n * Internal to the SDK: the public way to change it is `Select`'s `caretIcon`\n * prop. Its size comes from the `--tempest-control-caret-size` token through the\n * caret slot's stylesheet, so the `width`/`height` attributes here are only the\n * fallback for a page that loaded no SDK CSS.\n *\n * @returns The chevron as an inline SVG drawn in `currentColor`.\n */\nexport function CaretIcon(): ReactElement {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 9l6 6 6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":"A,mCAYA,SAAgBC,GAA0B,CACtC,OACI,EAAAD,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACjD,UAAA,EAAAA,EAAA,IAAA,CAAC,OAAD,CACI,EAAE,eACF,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,OAClB,CAAA,CACA,CAAA,CAEb,C"}

package/dist/components/Select/CaretIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaretIcon.js","names":[],"sources":["../../../src/components/Select/CaretIcon.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\n/**\n * The chevron `Select` and `Combobox` draw on the right of the control.\n *\n * Internal to the SDK: the public way to change it is `Select`'s `caretIcon`\n * prop. Its size comes from the `--tempest-control-caret-size` token through the\n * caret slot's stylesheet, so the `width`/`height` attributes here are only the\n * fallback for a page that loaded no SDK CSS.\n *\n * @returns The chevron as an inline SVG drawn in `currentColor`.\n */\nexport function CaretIcon(): ReactElement {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 9l6 6 6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":";;AAYA,SAAgB,IAA0B;CACtC,OACI,kBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EACjD,UAAA,kBAAC,QAAD;GACI,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;EAClB,CAAA;CACA,CAAA;AAEb"}
+{"version":3,"file":"CaretIcon.js","names":["CaretIcon"],"sources":["../../../src/components/Select/CaretIcon.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\n/**\n * The chevron `Select` and `Combobox` draw on the right of the control.\n *\n * Internal to the SDK: the public way to change it is `Select`'s `caretIcon`\n * prop. Its size comes from the `--tempest-control-caret-size` token through the\n * caret slot's stylesheet, so the `width`/`height` attributes here are only the\n * fallback for a page that loaded no SDK CSS.\n *\n * @returns The chevron as an inline SVG drawn in `currentColor`.\n */\nexport function CaretIcon(): ReactElement {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 9l6 6 6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":";;AAYA,SAAgBA,IAA0B;CACtC,OACI,kBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EACjD,UAAA,kBAAC,QAAD;GACI,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;EAClB,CAAA;CACA,CAAA;AAEb"}

package/dist/components/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","names":[],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ReactNode, SelectHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CaretIcon } from \"./CaretIcon\";\nimport styles from \"./Select.module.css\";\n\nexport interface SelectOption {\n    value: string | number;\n    label: string;\n    disabled?: boolean;\n}\n\n/** What every variant of {@link Select} accepts. */\nexport interface SelectBaseProps extends SelectHTMLAttributes<HTMLSelectElement> {\n    options?: SelectOption[];\n    placeholder?: string;\n    /**\n     * Class for the outermost element. On `\"bare\"` that element is the shell\n     * holding the `<select>` and the caret, which is where the app's own look goes.\n     */\n    wrapperClassName?: string;\n    /**\n     * Replaces the built-in chevron, following the `icon?: ReactNode` convention\n     * the rest of the SDK uses.\n     *\n     * The icon is drawn in the caret slot, which is positioned by\n     * `--tempest-control-caret-offset` and sized by `--tempest-control-caret-size`;\n     * an `<svg>` passed here is stretched to that size, so the token — not the\n     * icon's own `width`/`height` — decides how big the caret is in every density.\n     */\n    caretIcon?: ReactNode;\n}\n\n/** The full form field: label, control, helper text and error slot. */\nexport interface SelectFieldProps extends SelectBaseProps {\n    variant?: \"field\";\n    label?: string;\n    helperText?: string;\n    error?: string;\n}\n\n/**\n * The bare control, sized to its content.\n *\n * `aria-label` is required rather than optional, because the variant removes the\n * only visible label the component had. A settings row names the control in the\n * row's own text, which the `<select>` has no relationship to — so without this\n * the screen reader announces a combobox with no name at all.\n */\nexport interface SelectChipProps extends SelectBaseProps {\n    variant: \"chip\";\n    \"aria-label\": string;\n}\n\n/**\n * The mechanism without the look: `appearance: none`, the caret and the focus\n * ring, and no border, background, radius, shadow or height.\n *\n * The `<select>` inherits `background-color` and `color` from the shell (the\n * element `wrapperClassName` lands on). The background is not cosmetic: the\n * native popup paints each `<option>` from the `<select>`'s background, so a\n * transparent control would hand the menu back to the system white.\n *\n * Like `\"chip\"`, the variant has no visible label, so an accessible name is\n * required — through `aria-label` or `aria-labelledby`.\n */\nexport type SelectBareProps = SelectBaseProps & { variant: \"bare\" } & (\n        { \"aria-label\": string } | { \"aria-labelledby\": string }\n    );\n\nexport type SelectProps = SelectFieldProps | SelectChipProps | SelectBareProps;\n\n/**\n * Native `<select>` wrapper. Either provide `options` for a quick render, or\n * pass `<option>` children directly.\n *\n * Three variants:\n *\n * - `\"field\"` (default) — label, control, helper text and error slot, for a form.\n * - `\"chip\"` — the control alone, sized to its content, for a settings row where\n *   the icon and the label are already on the left and the control belongs on the\n *   right. Rendering the full field there stacks two labelled fields inside one\n *   list item, which is why every app ended up hand-rolling a native `<select>`\n *   with `appearance: none` — and hand-rolling it loses the focus ring, the\n *   disabled styling and the caret this component already solves.\n * - `\"bare\"` — the same mechanism with none of the look, for an app with its own\n *   visual identity: the shell renders `wrapper > select + caret`, and the app\n *   dresses the wrapper through `wrapperClassName`. See {@link SelectBareProps}.\n *\n * @example\n * <Select label=\"Estado\" options={states} placeholder=\"Selecione\" />\n *\n * @example\n * <ListTile title=\"Idioma\" trailing={<Select variant=\"chip\" aria-label=\"Idioma\" options={langs} />} />\n *\n * @example\n * <Select variant=\"bare\" wrapperClassName={styles.filtro} aria-label=\"Status\" options={status} />\n */\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(props, ref) {\n    const {\n        options,\n        placeholder,\n        wrapperClassName,\n        className,\n        children,\n        id,\n        required,\n        variant = \"field\",\n        label,\n        helperText,\n        error,\n        caretIcon,\n        ...rest\n    } = props as SelectBaseProps & {\n        variant?: SelectProps[\"variant\"];\n        label?: string;\n        helperText?: string;\n        error?: string;\n    };\n    const isChip = variant === \"chip\";\n    const isBare = variant === \"bare\";\n    const generatedId = useId();\n    const selectId = id ?? generatedId;\n\n    const control = (\n        <div\n            className={cn(\n                styles.field,\n                isChip && styles.chip,\n                isBare && styles.bare,\n                isBare && wrapperClassName,\n            )}\n        >\n            <select\n                ref={ref}\n                id={selectId}\n                aria-invalid={!!error}\n                required={required}\n                className={cn(styles.select, className)}\n                {...rest}\n            >\n                {placeholder && (\n                    <option value=\"\" disabled hidden>\n                        {placeholder}\n                    </option>\n                )}\n                {options?.map((opt) => (\n                    <option key={opt.value} value={opt.value} disabled={opt.disabled}>\n                        {opt.label}\n                    </option>\n                ))}\n                {children}\n            </select>\n            <span className={styles.caret} aria-hidden>\n                {caretIcon ?? <CaretIcon />}\n            </span>\n        </div>\n    );\n\n    if (isBare) {\n        return control;\n    }\n\n    if (isChip) {\n        return <div className={cn(styles.chipWrapper, wrapperClassName)}>{control}</div>;\n    }\n\n    return (\n        <div className={cn(styles.wrapper, error && styles.error, wrapperClassName)}>\n            {label && (\n                <label htmlFor={selectId} className={styles.label}>\n                    {label}\n                    {required && <span className={styles.required}>*</span>}\n                </label>\n            )}\n            {control}\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":"0JAkGA,IAAa,GAAA,EAAS,EAAA,WAAA,CAA2C,SAAgB,EAAO,EAAK,CACzF,GAAM,CACF,UACA,cACA,mBACA,YACA,WACA,KACA,WACA,UAAU,QACV,QACA,aACA,QACA,YACA,GAAG,GACH,EAME,EAAS,IAAY,OACrB,EAAS,IAAY,OACrB,GAAA,EAAc,EAAA,MAAA,CAAM,EACpB,EAAW,GAAM,EAEjB,GACF,EAAA,EAAA,KAAA,CAAC,MAAD,CACI,UAAW,EAAA,GACP,EAAA,QAAO,MACP,GAAU,EAAA,QAAO,KACjB,GAAU,EAAA,QAAO,KACjB,GAAU,CACd,EANJ,SAAA,EAQI,EAAA,EAAA,KAAA,CAAC,SAAD,CACS,MACL,GAAI,EACJ,eAAc,CAAC,CAAC,EACN,WACV,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,CAAS,EACtC,GAAI,EANR,SAAA,CAQK,IACG,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,MAAM,GAAG,SAAA,GAAS,OAAA,GACrB,SAAA,CACG,CAAA,EAEX,GAAS,IAAK,IACX,EAAA,EAAA,IAAA,CAAC,SAAD,CAAwB,MAAO,EAAI,MAAO,SAAU,EAAI,SACnD,SAAA,EAAI,KACD,EAFK,EAAI,KAET,CACX,EACA,CACG,CACR,CAAA,GAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAO,cAAA,GAC1B,SAAA,IAAa,EAAA,EAAA,IAAA,CAAC,EAAA,UAAD,CAAY,CAAA,CACxB,CAAA,CACL,IAWT,OARI,EACO,EAGP,GACO,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,YAAa,CAAgB,EAAI,SAAA,CAAa,CAAA,GAI/E,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,GAAS,EAAA,QAAO,MAAO,CAAgB,EAA1E,SAAA,CACK,IACG,EAAA,EAAA,KAAA,CAAC,QAAD,CAAO,QAAS,EAAU,UAAW,EAAA,QAAO,MAA5C,SAAA,CACK,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,SAAU,SAAA,GAAO,CAAA,CACnD,IAEV,EACA,GACG,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,UAAY,SAAA,CAAY,CAAA,EAChD,GACA,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,OAAS,SAAA,CAAiB,CAAA,EAClD,IACH,GAEb,CAAC"}
+{"version":3,"file":"Select.cjs","names":["forwardRef","useId","cn","styles","CaretIcon","require_cn","require_CaretIcon","require_Select_module","react","react_jsx_runtime","Select","rest","props","isChip","variant","isBare","generatedId","selectId","id","control","wrapperClassName","error","className","placeholder","options","opt","children","caretIcon","label","required","helperText"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ReactNode, SelectHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CaretIcon } from \"./CaretIcon\";\nimport styles from \"./Select.module.css\";\n\nexport interface SelectOption {\n    value: string | number;\n    label: string;\n    disabled?: boolean;\n}\n\n/** What every variant of {@link Select} accepts. */\nexport interface SelectBaseProps extends SelectHTMLAttributes<HTMLSelectElement> {\n    options?: SelectOption[];\n    placeholder?: string;\n    /**\n     * Class for the outermost element. On `\"bare\"` that element is the shell\n     * holding the `<select>` and the caret, which is where the app's own look goes.\n     */\n    wrapperClassName?: string;\n    /**\n     * Replaces the built-in chevron, following the `icon?: ReactNode` convention\n     * the rest of the SDK uses.\n     *\n     * The icon is drawn in the caret slot, which is positioned by\n     * `--tempest-control-caret-offset` and sized by `--tempest-control-caret-size`;\n     * an `<svg>` passed here is stretched to that size, so the token — not the\n     * icon's own `width`/`height` — decides how big the caret is in every density.\n     */\n    caretIcon?: ReactNode;\n}\n\n/** The full form field: label, control, helper text and error slot. */\nexport interface SelectFieldProps extends SelectBaseProps {\n    variant?: \"field\";\n    label?: string;\n    helperText?: string;\n    error?: string;\n}\n\n/**\n * The bare control, sized to its content.\n *\n * `aria-label` is required rather than optional, because the variant removes the\n * only visible label the component had. A settings row names the control in the\n * row's own text, which the `<select>` has no relationship to — so without this\n * the screen reader announces a combobox with no name at all.\n */\nexport interface SelectChipProps extends SelectBaseProps {\n    variant: \"chip\";\n    \"aria-label\": string;\n}\n\n/**\n * The mechanism without the look: `appearance: none`, the caret and the focus\n * ring, and no border, background, radius, shadow or height.\n *\n * The `<select>` inherits `background-color` and `color` from the shell (the\n * element `wrapperClassName` lands on). The background is not cosmetic: the\n * native popup paints each `<option>` from the `<select>`'s background, so a\n * transparent control would hand the menu back to the system white.\n *\n * Like `\"chip\"`, the variant has no visible label, so an accessible name is\n * required — through `aria-label` or `aria-labelledby`.\n */\nexport type SelectBareProps = SelectBaseProps & { variant: \"bare\" } & (\n        { \"aria-label\": string } | { \"aria-labelledby\": string }\n    );\n\nexport type SelectProps = SelectFieldProps | SelectChipProps | SelectBareProps;\n\n/**\n * Native `<select>` wrapper. Either provide `options` for a quick render, or\n * pass `<option>` children directly.\n *\n * Three variants:\n *\n * - `\"field\"` (default) — label, control, helper text and error slot, for a form.\n * - `\"chip\"` — the control alone, sized to its content, for a settings row where\n *   the icon and the label are already on the left and the control belongs on the\n *   right. Rendering the full field there stacks two labelled fields inside one\n *   list item, which is why every app ended up hand-rolling a native `<select>`\n *   with `appearance: none` — and hand-rolling it loses the focus ring, the\n *   disabled styling and the caret this component already solves.\n * - `\"bare\"` — the same mechanism with none of the look, for an app with its own\n *   visual identity: the shell renders `wrapper > select + caret`, and the app\n *   dresses the wrapper through `wrapperClassName`. See {@link SelectBareProps}.\n *\n * @example\n * <Select label=\"Estado\" options={states} placeholder=\"Selecione\" />\n *\n * @example\n * <ListTile title=\"Idioma\" trailing={<Select variant=\"chip\" aria-label=\"Idioma\" options={langs} />} />\n *\n * @example\n * <Select variant=\"bare\" wrapperClassName={styles.filtro} aria-label=\"Status\" options={status} />\n */\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(props, ref) {\n    const {\n        options,\n        placeholder,\n        wrapperClassName,\n        className,\n        children,\n        id,\n        required,\n        variant = \"field\",\n        label,\n        helperText,\n        error,\n        caretIcon,\n        ...rest\n    } = props as SelectBaseProps & {\n        variant?: SelectProps[\"variant\"];\n        label?: string;\n        helperText?: string;\n        error?: string;\n    };\n    const isChip = variant === \"chip\";\n    const isBare = variant === \"bare\";\n    const generatedId = useId();\n    const selectId = id ?? generatedId;\n\n    const control = (\n        <div\n            className={cn(\n                styles.field,\n                isChip && styles.chip,\n                isBare && styles.bare,\n                isBare && wrapperClassName,\n            )}\n        >\n            <select\n                ref={ref}\n                id={selectId}\n                aria-invalid={!!error}\n                required={required}\n                className={cn(styles.select, className)}\n                {...rest}\n            >\n                {placeholder && (\n                    <option value=\"\" disabled hidden>\n                        {placeholder}\n                    </option>\n                )}\n                {options?.map((opt) => (\n                    <option key={opt.value} value={opt.value} disabled={opt.disabled}>\n                        {opt.label}\n                    </option>\n                ))}\n                {children}\n            </select>\n            <span className={styles.caret} aria-hidden>\n                {caretIcon ?? <CaretIcon />}\n            </span>\n        </div>\n    );\n\n    if (isBare) {\n        return control;\n    }\n\n    if (isChip) {\n        return <div className={cn(styles.chipWrapper, wrapperClassName)}>{control}</div>;\n    }\n\n    return (\n        <div className={cn(styles.wrapper, error && styles.error, wrapperClassName)}>\n            {label && (\n                <label htmlFor={selectId} className={styles.label}>\n                    {label}\n                    {required && <span className={styles.required}>*</span>}\n                </label>\n            )}\n            {control}\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":"A,0JAkGA,IAAaU,GAAA,EAASV,EAAAA,WAAAA,CAA2C,SAAgB,EAAO,EAAK,CACzF,GAAM,CACF,UACA,cACA,mBACA,YACA,WACA,KACA,WACA,UAAU,QACV,QACA,aACA,QACA,YACA,GAAGW,GACHC,EAMEC,EAASC,IAAY,OACrBC,EAASD,IAAY,OACrBE,GAAA,EAAcf,EAAAA,MAAAA,CAAM,EACpBgB,EAAWC,GAAMF,EAEjBG,GACF,EAAAV,EAAA,KAAA,CAAC,MAAD,CACI,UAAWP,EAAAA,GACPC,EAAAA,QAAO,MACPU,GAAUV,EAAAA,QAAO,KACjBY,GAAUZ,EAAAA,QAAO,KACjBY,GAAUK,CACd,EANJ,SAAA,EAQI,EAAAX,EAAA,KAAA,CAAC,SAAD,CACS,MACL,GAAIQ,EACJ,eAAc,CAAC,CAACI,EACN,WACV,UAAWnB,EAAAA,GAAGC,EAAAA,QAAO,OAAQmB,CAAS,EACtC,GAAIX,EANR,SAAA,CAQKY,IACG,EAAAd,EAAA,IAAA,CAAC,SAAD,CAAQ,MAAM,GAAG,SAAA,GAAS,OAAA,GACrB,SAAAc,CACG,CAAA,EAEXC,GAAS,IAAK,IACX,EAAAf,EAAA,IAAA,CAAC,SAAD,CAAwB,MAAOgB,EAAI,MAAO,SAAUA,EAAI,SACnD,SAAAA,EAAI,KACD,EAFKA,EAAI,KAET,CACX,EACAC,CACG,CACR,CAAA,GAAA,EAAAjB,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWN,EAAAA,QAAO,MAAO,cAAA,GAC1B,SAAAwB,IAAa,EAAAlB,EAAA,IAAA,CAACL,EAAAA,UAAD,CAAY,CAAA,CACxB,CAAA,CACL,C,GAWT,OARIW,EACOI,EAGPN,GACO,EAAAJ,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWP,EAAAA,GAAGC,EAAAA,QAAO,YAAaiB,CAAgB,EAAI,SAAAD,CAAa,CAAA,GAI/E,EAAAV,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWP,EAAAA,GAAGC,EAAAA,QAAO,QAASkB,GAASlB,EAAAA,QAAO,MAAOiB,CAAgB,EAA1E,SAAA,CACKQ,IACG,EAAAnB,EAAA,KAAA,CAAC,QAAD,CAAO,QAASQ,EAAU,UAAWd,EAAAA,QAAO,MAA5C,SAAA,CACKyB,EACAC,IAAY,EAAApB,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWN,EAAAA,QAAO,SAAU,SAAA,GAAO,CAAA,CACnD,C,GAEVgB,EACAE,GACG,EAAAZ,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWN,EAAAA,QAAO,UAAY,SAAAkB,CAAY,CAAA,EAChDS,GACA,EAAArB,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWN,EAAAA,QAAO,OAAS,SAAA2B,CAAiB,CAAA,EAClD,IACH,C,EAEb,CAAC,E"}

package/dist/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ReactNode, SelectHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CaretIcon } from \"./CaretIcon\";\nimport styles from \"./Select.module.css\";\n\nexport interface SelectOption {\n    value: string | number;\n    label: string;\n    disabled?: boolean;\n}\n\n/** What every variant of {@link Select} accepts. */\nexport interface SelectBaseProps extends SelectHTMLAttributes<HTMLSelectElement> {\n    options?: SelectOption[];\n    placeholder?: string;\n    /**\n     * Class for the outermost element. On `\"bare\"` that element is the shell\n     * holding the `<select>` and the caret, which is where the app's own look goes.\n     */\n    wrapperClassName?: string;\n    /**\n     * Replaces the built-in chevron, following the `icon?: ReactNode` convention\n     * the rest of the SDK uses.\n     *\n     * The icon is drawn in the caret slot, which is positioned by\n     * `--tempest-control-caret-offset` and sized by `--tempest-control-caret-size`;\n     * an `<svg>` passed here is stretched to that size, so the token — not the\n     * icon's own `width`/`height` — decides how big the caret is in every density.\n     */\n    caretIcon?: ReactNode;\n}\n\n/** The full form field: label, control, helper text and error slot. */\nexport interface SelectFieldProps extends SelectBaseProps {\n    variant?: \"field\";\n    label?: string;\n    helperText?: string;\n    error?: string;\n}\n\n/**\n * The bare control, sized to its content.\n *\n * `aria-label` is required rather than optional, because the variant removes the\n * only visible label the component had. A settings row names the control in the\n * row's own text, which the `<select>` has no relationship to — so without this\n * the screen reader announces a combobox with no name at all.\n */\nexport interface SelectChipProps extends SelectBaseProps {\n    variant: \"chip\";\n    \"aria-label\": string;\n}\n\n/**\n * The mechanism without the look: `appearance: none`, the caret and the focus\n * ring, and no border, background, radius, shadow or height.\n *\n * The `<select>` inherits `background-color` and `color` from the shell (the\n * element `wrapperClassName` lands on). The background is not cosmetic: the\n * native popup paints each `<option>` from the `<select>`'s background, so a\n * transparent control would hand the menu back to the system white.\n *\n * Like `\"chip\"`, the variant has no visible label, so an accessible name is\n * required — through `aria-label` or `aria-labelledby`.\n */\nexport type SelectBareProps = SelectBaseProps & { variant: \"bare\" } & (\n        { \"aria-label\": string } | { \"aria-labelledby\": string }\n    );\n\nexport type SelectProps = SelectFieldProps | SelectChipProps | SelectBareProps;\n\n/**\n * Native `<select>` wrapper. Either provide `options` for a quick render, or\n * pass `<option>` children directly.\n *\n * Three variants:\n *\n * - `\"field\"` (default) — label, control, helper text and error slot, for a form.\n * - `\"chip\"` — the control alone, sized to its content, for a settings row where\n *   the icon and the label are already on the left and the control belongs on the\n *   right. Rendering the full field there stacks two labelled fields inside one\n *   list item, which is why every app ended up hand-rolling a native `<select>`\n *   with `appearance: none` — and hand-rolling it loses the focus ring, the\n *   disabled styling and the caret this component already solves.\n * - `\"bare\"` — the same mechanism with none of the look, for an app with its own\n *   visual identity: the shell renders `wrapper > select + caret`, and the app\n *   dresses the wrapper through `wrapperClassName`. See {@link SelectBareProps}.\n *\n * @example\n * <Select label=\"Estado\" options={states} placeholder=\"Selecione\" />\n *\n * @example\n * <ListTile title=\"Idioma\" trailing={<Select variant=\"chip\" aria-label=\"Idioma\" options={langs} />} />\n *\n * @example\n * <Select variant=\"bare\" wrapperClassName={styles.filtro} aria-label=\"Status\" options={status} />\n */\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(props, ref) {\n    const {\n        options,\n        placeholder,\n        wrapperClassName,\n        className,\n        children,\n        id,\n        required,\n        variant = \"field\",\n        label,\n        helperText,\n        error,\n        caretIcon,\n        ...rest\n    } = props as SelectBaseProps & {\n        variant?: SelectProps[\"variant\"];\n        label?: string;\n        helperText?: string;\n        error?: string;\n    };\n    const isChip = variant === \"chip\";\n    const isBare = variant === \"bare\";\n    const generatedId = useId();\n    const selectId = id ?? generatedId;\n\n    const control = (\n        <div\n            className={cn(\n                styles.field,\n                isChip && styles.chip,\n                isBare && styles.bare,\n                isBare && wrapperClassName,\n            )}\n        >\n            <select\n                ref={ref}\n                id={selectId}\n                aria-invalid={!!error}\n                required={required}\n                className={cn(styles.select, className)}\n                {...rest}\n            >\n                {placeholder && (\n                    <option value=\"\" disabled hidden>\n                        {placeholder}\n                    </option>\n                )}\n                {options?.map((opt) => (\n                    <option key={opt.value} value={opt.value} disabled={opt.disabled}>\n                        {opt.label}\n                    </option>\n                ))}\n                {children}\n            </select>\n            <span className={styles.caret} aria-hidden>\n                {caretIcon ?? <CaretIcon />}\n            </span>\n        </div>\n    );\n\n    if (isBare) {\n        return control;\n    }\n\n    if (isChip) {\n        return <div className={cn(styles.chipWrapper, wrapperClassName)}>{control}</div>;\n    }\n\n    return (\n        <div className={cn(styles.wrapper, error && styles.error, wrapperClassName)}>\n            {label && (\n                <label htmlFor={selectId} className={styles.label}>\n                    {label}\n                    {required && <span className={styles.required}>*</span>}\n                </label>\n            )}\n            {control}\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":";;;;;;AAkGA,IAAa,IAAS,EAA2C,SAAgB,GAAO,GAAK;CACzF,IAAM,EACF,YACA,gBACA,qBACA,cACA,aACA,OACA,aACA,aAAU,SACV,UACA,eACA,UACA,cACA,GAAG,MACH,GAME,IAAS,MAAY,QACrB,IAAS,MAAY,QACrB,IAAc,EAAM,GACpB,IAAW,KAAM,GAEjB,IACF,kBAAC,OAAD;EACI,WAAW,EACP,EAAO,OACP,KAAU,EAAO,MACjB,KAAU,EAAO,MACjB,KAAU,CACd;EANJ,UAAA,CAQI,kBAAC,UAAD;GACS;GACL,IAAI;GACJ,gBAAc,CAAC,CAAC;GACN;GACV,WAAW,EAAG,EAAO,QAAQ,CAAS;GACtC,GAAI;GANR,UAAA;IAQK,KACG,kBAAC,UAAD;KAAQ,OAAM;KAAG,UAAA;KAAS,QAAA;KACrB,UAAA;IACG,CAAA;IAEX,GAAS,KAAK,MACX,kBAAC,UAAD;KAAwB,OAAO,EAAI;KAAO,UAAU,EAAI;KACnD,UAAA,EAAI;IACD,GAFK,EAAI,KAET,CACX;IACA;GACG;EACR,CAAA,GAAA,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAO,eAAA;GAC1B,UAAA,KAAa,kBAAC,GAAD,CAAY,CAAA;EACxB,CAAA,CACL;;CAWT,OARI,IACO,IAGP,IACO,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,aAAa,CAAgB;EAAI,UAAA;CAAa,CAAA,IAI/E,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,SAAS,KAAS,EAAO,OAAO,CAAgB;EAA1E,UAAA;GACK,KACG,kBAAC,SAAD;IAAO,SAAS;IAAU,WAAW,EAAO;IAA5C,UAAA,CACK,GACA,KAAY,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAU,UAAA;IAAO,CAAA,CACnD;;GAEV;GACA,IACG,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAY,UAAA;GAAY,CAAA,IAChD,IACA,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAS,UAAA;GAAiB,CAAA,IAClD;EACH;;AAEb,CAAC"}
+{"version":3,"file":"Select.js","names":["styles","Select_module_default","Select","forwardRef","rest","props","isChip","variant","isBare","generatedId","useId","selectId","id","control","cn","wrapperClassName","error","className","placeholder","options","opt","children","caretIcon","CaretIcon","label","required","helperText"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ReactNode, SelectHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CaretIcon } from \"./CaretIcon\";\nimport styles from \"./Select.module.css\";\n\nexport interface SelectOption {\n    value: string | number;\n    label: string;\n    disabled?: boolean;\n}\n\n/** What every variant of {@link Select} accepts. */\nexport interface SelectBaseProps extends SelectHTMLAttributes<HTMLSelectElement> {\n    options?: SelectOption[];\n    placeholder?: string;\n    /**\n     * Class for the outermost element. On `\"bare\"` that element is the shell\n     * holding the `<select>` and the caret, which is where the app's own look goes.\n     */\n    wrapperClassName?: string;\n    /**\n     * Replaces the built-in chevron, following the `icon?: ReactNode` convention\n     * the rest of the SDK uses.\n     *\n     * The icon is drawn in the caret slot, which is positioned by\n     * `--tempest-control-caret-offset` and sized by `--tempest-control-caret-size`;\n     * an `<svg>` passed here is stretched to that size, so the token — not the\n     * icon's own `width`/`height` — decides how big the caret is in every density.\n     */\n    caretIcon?: ReactNode;\n}\n\n/** The full form field: label, control, helper text and error slot. */\nexport interface SelectFieldProps extends SelectBaseProps {\n    variant?: \"field\";\n    label?: string;\n    helperText?: string;\n    error?: string;\n}\n\n/**\n * The bare control, sized to its content.\n *\n * `aria-label` is required rather than optional, because the variant removes the\n * only visible label the component had. A settings row names the control in the\n * row's own text, which the `<select>` has no relationship to — so without this\n * the screen reader announces a combobox with no name at all.\n */\nexport interface SelectChipProps extends SelectBaseProps {\n    variant: \"chip\";\n    \"aria-label\": string;\n}\n\n/**\n * The mechanism without the look: `appearance: none`, the caret and the focus\n * ring, and no border, background, radius, shadow or height.\n *\n * The `<select>` inherits `background-color` and `color` from the shell (the\n * element `wrapperClassName` lands on). The background is not cosmetic: the\n * native popup paints each `<option>` from the `<select>`'s background, so a\n * transparent control would hand the menu back to the system white.\n *\n * Like `\"chip\"`, the variant has no visible label, so an accessible name is\n * required — through `aria-label` or `aria-labelledby`.\n */\nexport type SelectBareProps = SelectBaseProps & { variant: \"bare\" } & (\n        { \"aria-label\": string } | { \"aria-labelledby\": string }\n    );\n\nexport type SelectProps = SelectFieldProps | SelectChipProps | SelectBareProps;\n\n/**\n * Native `<select>` wrapper. Either provide `options` for a quick render, or\n * pass `<option>` children directly.\n *\n * Three variants:\n *\n * - `\"field\"` (default) — label, control, helper text and error slot, for a form.\n * - `\"chip\"` — the control alone, sized to its content, for a settings row where\n *   the icon and the label are already on the left and the control belongs on the\n *   right. Rendering the full field there stacks two labelled fields inside one\n *   list item, which is why every app ended up hand-rolling a native `<select>`\n *   with `appearance: none` — and hand-rolling it loses the focus ring, the\n *   disabled styling and the caret this component already solves.\n * - `\"bare\"` — the same mechanism with none of the look, for an app with its own\n *   visual identity: the shell renders `wrapper > select + caret`, and the app\n *   dresses the wrapper through `wrapperClassName`. See {@link SelectBareProps}.\n *\n * @example\n * <Select label=\"Estado\" options={states} placeholder=\"Selecione\" />\n *\n * @example\n * <ListTile title=\"Idioma\" trailing={<Select variant=\"chip\" aria-label=\"Idioma\" options={langs} />} />\n *\n * @example\n * <Select variant=\"bare\" wrapperClassName={styles.filtro} aria-label=\"Status\" options={status} />\n */\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(props, ref) {\n    const {\n        options,\n        placeholder,\n        wrapperClassName,\n        className,\n        children,\n        id,\n        required,\n        variant = \"field\",\n        label,\n        helperText,\n        error,\n        caretIcon,\n        ...rest\n    } = props as SelectBaseProps & {\n        variant?: SelectProps[\"variant\"];\n        label?: string;\n        helperText?: string;\n        error?: string;\n    };\n    const isChip = variant === \"chip\";\n    const isBare = variant === \"bare\";\n    const generatedId = useId();\n    const selectId = id ?? generatedId;\n\n    const control = (\n        <div\n            className={cn(\n                styles.field,\n                isChip && styles.chip,\n                isBare && styles.bare,\n                isBare && wrapperClassName,\n            )}\n        >\n            <select\n                ref={ref}\n                id={selectId}\n                aria-invalid={!!error}\n                required={required}\n                className={cn(styles.select, className)}\n                {...rest}\n            >\n                {placeholder && (\n                    <option value=\"\" disabled hidden>\n                        {placeholder}\n                    </option>\n                )}\n                {options?.map((opt) => (\n                    <option key={opt.value} value={opt.value} disabled={opt.disabled}>\n                        {opt.label}\n                    </option>\n                ))}\n                {children}\n            </select>\n            <span className={styles.caret} aria-hidden>\n                {caretIcon ?? <CaretIcon />}\n            </span>\n        </div>\n    );\n\n    if (isBare) {\n        return control;\n    }\n\n    if (isChip) {\n        return <div className={cn(styles.chipWrapper, wrapperClassName)}>{control}</div>;\n    }\n\n    return (\n        <div className={cn(styles.wrapper, error && styles.error, wrapperClassName)}>\n            {label && (\n                <label htmlFor={selectId} className={styles.label}>\n                    {label}\n                    {required && <span className={styles.required}>*</span>}\n                </label>\n            )}\n            {control}\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":";;;;;;AAkGA,IAAaE,IAASC,EAA2C,SAAgB,GAAO,GAAK;CACzF,IAAM,EACF,YACA,gBACA,qBACA,cACA,aACA,OACA,aACA,aAAU,SACV,UACA,eACA,UACA,cACA,GAAGC,MACHC,GAMEC,IAASC,MAAY,QACrBC,IAASD,MAAY,QACrBE,IAAcC,EAAM,GACpBC,IAAWC,KAAMH,GAEjBI,IACF,kBAAC,OAAD;EACI,WAAWC,EACPd,EAAO,OACPM,KAAUN,EAAO,MACjBQ,KAAUR,EAAO,MACjBQ,KAAUO,CACd;EANJ,UAAA,CAQI,kBAAC,UAAD;GACS;GACL,IAAIJ;GACJ,gBAAc,CAAC,CAACK;GACN;GACV,WAAWF,EAAGd,EAAO,QAAQiB,CAAS;GACtC,GAAIb;GANR,UAAA;IAQKc,KACG,kBAAC,UAAD;KAAQ,OAAM;KAAG,UAAA;KAAS,QAAA;KACrB,UAAAA;IACG,CAAA;IAEXC,GAAS,KAAK,MACX,kBAAC,UAAD;KAAwB,OAAOC,EAAI;KAAO,UAAUA,EAAI;KACnD,UAAAA,EAAI;IACD,GAFKA,EAAI,KAET,CACX;IACAC;GACG;EACR,CAAA,GAAA,kBAAC,QAAD;GAAM,WAAWrB,EAAO;GAAO,eAAA;GAC1B,UAAAsB,KAAa,kBAACC,GAAD,CAAY,CAAA;EACxB,CAAA,CACL;;CAWT,OARIf,IACOK,IAGPP,IACO,kBAAC,OAAD;EAAK,WAAWQ,EAAGd,EAAO,aAAae,CAAgB;EAAI,UAAAF;CAAa,CAAA,IAI/E,kBAAC,OAAD;EAAK,WAAWC,EAAGd,EAAO,SAASgB,KAAShB,EAAO,OAAOe,CAAgB;EAA1E,UAAA;GACKS,KACG,kBAAC,SAAD;IAAO,SAASb;IAAU,WAAWX,EAAO;IAA5C,UAAA,CACKwB,GACAC,KAAY,kBAAC,QAAD;KAAM,WAAWzB,EAAO;KAAU,UAAA;IAAO,CAAA,CACnD;;GAEVa;GACAG,IACG,kBAAC,QAAD;IAAM,WAAWhB,EAAO;IAAY,UAAAgB;GAAY,CAAA,IAChDU,IACA,kBAAC,QAAD;IAAM,WAAW1B,EAAO;IAAS,UAAA0B;GAAiB,CAAA,IAClD;EACH;;AAEb,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Select.module.cjs","names":[],"sources":["../../../src/components/Select/Select.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    width: 100%;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    color: var(--tempest-text);\n    line-height: var(--tempest-leading-snug);\n}\n\n.required {\n    color: var(--tempest-danger);\n    margin-left: 2px;\n}\n\n.field {\n    --_tempest-caret-offset: var(--tempest-control-caret-offset, 12px);\n    --_tempest-caret-size: var(--tempest-control-caret-size, 14px);\n    --_tempest-caret-gap: 10px;\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.select {\n    width: 100%;\n    height: var(--tempest-control-height-md);\n    padding: 0\n        calc(var(--_tempest-caret-offset) + var(--_tempest-caret-size) + var(--_tempest-caret-gap))\n        0 var(--tempest-control-padding-md);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-control-radius);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-control-font-md);\n    line-height: var(--tempest-leading-snug);\n    appearance: none;\n    cursor: pointer;\n    box-shadow: var(--tempest-shadow-xs);\n    transition: var(--tempest-transition-color), var(--tempest-transition-shadow);\n}\n\n.select:hover:not(:disabled):not(:focus) {\n    border-color: var(--tempest-border-strong);\n}\n\n.select:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.select:disabled {\n    background-color: var(--tempest-surface);\n    cursor: not-allowed;\n    color: var(--tempest-text-muted);\n    box-shadow: none;\n}\n\n.caret {\n    position: absolute;\n    right: var(--_tempest-caret-offset);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_tempest-caret-size);\n    height: var(--_tempest-caret-size);\n    pointer-events: none;\n    color: var(--tempest-text-muted);\n}\n\n.field > .caret > svg {\n    display: block;\n    flex: none;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n}\n\n.error .select {\n    border-color: var(--tempest-danger);\n}\n\n.error .select:focus {\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width)\n        color-mix(in srgb, var(--tempest-danger) 25%, transparent);\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n    line-height: var(--tempest-leading-snug);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger);\n    line-height: var(--tempest-leading-snug);\n}\n\n.chipWrapper {\n    display: inline-flex;\n}\n\n.chip {\n    --_tempest-caret-offset: calc(var(--tempest-control-caret-offset, 12px) - 2px);\n    --_tempest-caret-gap: 6px;\n    width: auto;\n}\n\n.chip .select {\n    width: auto;\n    height: var(--tempest-control-height-sm);\n    padding: 0\n        calc(var(--_tempest-caret-offset) + var(--_tempest-caret-size) + var(--_tempest-caret-gap))\n        0 var(--tempest-space-3);\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface);\n    font-size: var(--tempest-text-sm);\n    box-shadow: none;\n}\n\n.bare {\n    display: inline-flex;\n}\n\n.bare .select {\n    flex: 1 1 auto;\n    align-self: stretch;\n    min-width: 0;\n    height: auto;\n    margin: 0;\n    padding-block: 0;\n    padding-inline-start: 0;\n    border: 0;\n    border-radius: inherit;\n    background-color: inherit;\n    color: inherit;\n    font: inherit;\n    letter-spacing: inherit;\n    box-shadow: none;\n}\n\n.bare .select:focus {\n    box-shadow: none;\n}\n\n.bare:focus-within {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n\n.bare .select:disabled {\n    background-color: inherit;\n    color: inherit;\n}\n\n.bare:has(> .select:disabled) {\n    opacity: 0.6;\n}\n\n.bare .caret {\n    color: inherit;\n}\n"],"mappings":";"}
+{"version":3,"file":"Select.module.cjs","names":["wrapper","label","required","field","select","caret","error","helper","errorText","chipWrapper","chip","bare","Select_module_default"],"sources":["../../../src/components/Select/Select.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    width: 100%;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    color: var(--tempest-text);\n    line-height: var(--tempest-leading-snug);\n}\n\n.required {\n    color: var(--tempest-danger);\n    margin-left: 2px;\n}\n\n.field {\n    --_tempest-caret-offset: var(--tempest-control-caret-offset, 12px);\n    --_tempest-caret-size: var(--tempest-control-caret-size, 14px);\n    --_tempest-caret-gap: 10px;\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.select {\n    width: 100%;\n    height: var(--tempest-control-height-md);\n    padding: 0\n        calc(var(--_tempest-caret-offset) + var(--_tempest-caret-size) + var(--_tempest-caret-gap))\n        0 var(--tempest-control-padding-md);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-control-radius);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-control-font-md);\n    line-height: var(--tempest-leading-snug);\n    appearance: none;\n    cursor: pointer;\n    box-shadow: var(--tempest-shadow-xs);\n    transition: var(--tempest-transition-color), var(--tempest-transition-shadow);\n}\n\n.select:hover:not(:disabled):not(:focus) {\n    border-color: var(--tempest-border-strong);\n}\n\n.select:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.select:disabled {\n    background-color: var(--tempest-surface);\n    cursor: not-allowed;\n    color: var(--tempest-text-muted);\n    box-shadow: none;\n}\n\n.caret {\n    position: absolute;\n    right: var(--_tempest-caret-offset);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_tempest-caret-size);\n    height: var(--_tempest-caret-size);\n    pointer-events: none;\n    color: var(--tempest-text-muted);\n}\n\n.field > .caret > svg {\n    display: block;\n    flex: none;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n}\n\n.error .select {\n    border-color: var(--tempest-danger);\n}\n\n.error .select:focus {\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width)\n        color-mix(in srgb, var(--tempest-danger) 25%, transparent);\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n    line-height: var(--tempest-leading-snug);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger);\n    line-height: var(--tempest-leading-snug);\n}\n\n.chipWrapper {\n    display: inline-flex;\n}\n\n.chip {\n    --_tempest-caret-offset: calc(var(--tempest-control-caret-offset, 12px) - 2px);\n    --_tempest-caret-gap: 6px;\n    width: auto;\n}\n\n.chip .select {\n    width: auto;\n    height: var(--tempest-control-height-sm);\n    padding: 0\n        calc(var(--_tempest-caret-offset) + var(--_tempest-caret-size) + var(--_tempest-caret-gap))\n        0 var(--tempest-space-3);\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface);\n    font-size: var(--tempest-text-sm);\n    box-shadow: none;\n}\n\n.bare {\n    display: inline-flex;\n}\n\n.bare .select {\n    flex: 1 1 auto;\n    align-self: stretch;\n    min-width: 0;\n    height: auto;\n    margin: 0;\n    padding-block: 0;\n    padding-inline-start: 0;\n    border: 0;\n    border-radius: inherit;\n    background-color: inherit;\n    color: inherit;\n    font: inherit;\n    letter-spacing: inherit;\n    box-shadow: none;\n}\n\n.bare .select:focus {\n    box-shadow: none;\n}\n\n.bare:focus-within {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n\n.bare .select:disabled {\n    background-color: inherit;\n    color: inherit;\n}\n\n.bare:has(> .select:disabled) {\n    opacity: 0.6;\n}\n\n.bare .caret {\n    color: inherit;\n}\n"],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"Select.module.js","names":[],"sources":["../../../src/components/Select/Select.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    width: 100%;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    color: var(--tempest-text);\n    line-height: var(--tempest-leading-snug);\n}\n\n.required {\n    color: var(--tempest-danger);\n    margin-left: 2px;\n}\n\n.field {\n    --_tempest-caret-offset: var(--tempest-control-caret-offset, 12px);\n    --_tempest-caret-size: var(--tempest-control-caret-size, 14px);\n    --_tempest-caret-gap: 10px;\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.select {\n    width: 100%;\n    height: var(--tempest-control-height-md);\n    padding: 0\n        calc(var(--_tempest-caret-offset) + var(--_tempest-caret-size) + var(--_tempest-caret-gap))\n        0 var(--tempest-control-padding-md);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-control-radius);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-control-font-md);\n    line-height: var(--tempest-leading-snug);\n    appearance: none;\n    cursor: pointer;\n    box-shadow: var(--tempest-shadow-xs);\n    transition: var(--tempest-transition-color), var(--tempest-transition-shadow);\n}\n\n.select:hover:not(:disabled):not(:focus) {\n    border-color: var(--tempest-border-strong);\n}\n\n.select:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.select:disabled {\n    background-color: var(--tempest-surface);\n    cursor: not-allowed;\n    color: var(--tempest-text-muted);\n    box-shadow: none;\n}\n\n.caret {\n    position: absolute;\n    right: var(--_tempest-caret-offset);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_tempest-caret-size);\n    height: var(--_tempest-caret-size);\n    pointer-events: none;\n    color: var(--tempest-text-muted);\n}\n\n.field > .caret > svg {\n    display: block;\n    flex: none;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n}\n\n.error .select {\n    border-color: var(--tempest-danger);\n}\n\n.error .select:focus {\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width)\n        color-mix(in srgb, var(--tempest-danger) 25%, transparent);\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n    line-height: var(--tempest-leading-snug);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger);\n    line-height: var(--tempest-leading-snug);\n}\n\n.chipWrapper {\n    display: inline-flex;\n}\n\n.chip {\n    --_tempest-caret-offset: calc(var(--tempest-control-caret-offset, 12px) - 2px);\n    --_tempest-caret-gap: 6px;\n    width: auto;\n}\n\n.chip .select {\n    width: auto;\n    height: var(--tempest-control-height-sm);\n    padding: 0\n        calc(var(--_tempest-caret-offset) + var(--_tempest-caret-size) + var(--_tempest-caret-gap))\n        0 var(--tempest-space-3);\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface);\n    font-size: var(--tempest-text-sm);\n    box-shadow: none;\n}\n\n.bare {\n    display: inline-flex;\n}\n\n.bare .select {\n    flex: 1 1 auto;\n    align-self: stretch;\n    min-width: 0;\n    height: auto;\n    margin: 0;\n    padding-block: 0;\n    padding-inline-start: 0;\n    border: 0;\n    border-radius: inherit;\n    background-color: inherit;\n    color: inherit;\n    font: inherit;\n    letter-spacing: inherit;\n    box-shadow: none;\n}\n\n.bare .select:focus {\n    box-shadow: none;\n}\n\n.bare:focus-within {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n\n.bare .select:disabled {\n    background-color: inherit;\n    color: inherit;\n}\n\n.bare:has(> .select:disabled) {\n    opacity: 0.6;\n}\n\n.bare .caret {\n    color: inherit;\n}\n"],"mappings":";"}
+{"version":3,"file":"Select.module.js","names":["wrapper","label","required","field","select","caret","error","helper","errorText","chipWrapper","chip","bare","Select_module_default"],"sources":["../../../src/components/Select/Select.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    width: 100%;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    color: var(--tempest-text);\n    line-height: var(--tempest-leading-snug);\n}\n\n.required {\n    color: var(--tempest-danger);\n    margin-left: 2px;\n}\n\n.field {\n    --_tempest-caret-offset: var(--tempest-control-caret-offset, 12px);\n    --_tempest-caret-size: var(--tempest-control-caret-size, 14px);\n    --_tempest-caret-gap: 10px;\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.select {\n    width: 100%;\n    height: var(--tempest-control-height-md);\n    padding: 0\n        calc(var(--_tempest-caret-offset) + var(--_tempest-caret-size) + var(--_tempest-caret-gap))\n        0 var(--tempest-control-padding-md);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-control-radius);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-control-font-md);\n    line-height: var(--tempest-leading-snug);\n    appearance: none;\n    cursor: pointer;\n    box-shadow: var(--tempest-shadow-xs);\n    transition: var(--tempest-transition-color), var(--tempest-transition-shadow);\n}\n\n.select:hover:not(:disabled):not(:focus) {\n    border-color: var(--tempest-border-strong);\n}\n\n.select:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.select:disabled {\n    background-color: var(--tempest-surface);\n    cursor: not-allowed;\n    color: var(--tempest-text-muted);\n    box-shadow: none;\n}\n\n.caret {\n    position: absolute;\n    right: var(--_tempest-caret-offset);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_tempest-caret-size);\n    height: var(--_tempest-caret-size);\n    pointer-events: none;\n    color: var(--tempest-text-muted);\n}\n\n.field > .caret > svg {\n    display: block;\n    flex: none;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n}\n\n.error .select {\n    border-color: var(--tempest-danger);\n}\n\n.error .select:focus {\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width)\n        color-mix(in srgb, var(--tempest-danger) 25%, transparent);\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n    line-height: var(--tempest-leading-snug);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger);\n    line-height: var(--tempest-leading-snug);\n}\n\n.chipWrapper {\n    display: inline-flex;\n}\n\n.chip {\n    --_tempest-caret-offset: calc(var(--tempest-control-caret-offset, 12px) - 2px);\n    --_tempest-caret-gap: 6px;\n    width: auto;\n}\n\n.chip .select {\n    width: auto;\n    height: var(--tempest-control-height-sm);\n    padding: 0\n        calc(var(--_tempest-caret-offset) + var(--_tempest-caret-size) + var(--_tempest-caret-gap))\n        0 var(--tempest-space-3);\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface);\n    font-size: var(--tempest-text-sm);\n    box-shadow: none;\n}\n\n.bare {\n    display: inline-flex;\n}\n\n.bare .select {\n    flex: 1 1 auto;\n    align-self: stretch;\n    min-width: 0;\n    height: auto;\n    margin: 0;\n    padding-block: 0;\n    padding-inline-start: 0;\n    border: 0;\n    border-radius: inherit;\n    background-color: inherit;\n    color: inherit;\n    font: inherit;\n    letter-spacing: inherit;\n    box-shadow: none;\n}\n\n.bare .select:focus {\n    box-shadow: none;\n}\n\n.bare:focus-within {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n\n.bare .select:disabled {\n    background-color: inherit;\n    color: inherit;\n}\n\n.bare:has(> .select:disabled) {\n    opacity: 0.6;\n}\n\n.bare .caret {\n    color: inherit;\n}\n"],"mappings":";"}

package/dist/components/Select/options.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"options.cjs","names":[],"sources":["../../../src/components/Select/options.ts"],"sourcesContent":["/**\n * The shape every option list in the SDK shares: `Select`, `MultiSelect` and\n * `Combobox` all accept an array of it.\n *\n * `value` is always a `string` here, because that is what a `<select>` hands\n * back in `event.target.value` whatever the option was built from: an option\n * built with the number `0` comes back as the string `\"0\"`, so a list that kept\n * numbers could never be compared with `===` against what the control emits.\n */\nexport interface OptionEntry {\n    value: string;\n    label: string;\n}\n\n/**\n * The value {@link withAllOption} gives its entry, exported so the filter code\n * compares against a name instead of a magic string.\n *\n * @example\n * const where = status === ALL_OPTION_VALUE ? {} : { status };\n */\nexport const ALL_OPTION_VALUE = \"all\";\n\nconst DEFAULT_ALL_OPTION_LABEL = \"Todos\";\n\nconst DEFAULT_EMPTY_OPTION_LABEL = \"— Não definido —\";\n\n/** The minimum an option needs for the helpers to prepend to its list. */\ntype OptionLike = { value: string | number; label: string };\n\n/**\n * Turn a `value → label` map into the option list `Select`, `MultiSelect` and\n * `Combobox` take.\n *\n * Every key becomes a string `value` (see {@link OptionEntry} for why), so the\n * result is assignable to `SelectOption[]`, `MultiSelectOption[]` and\n * `ComboboxOption[]` alike.\n *\n * **Order.** A `Map` keeps the order it was written in, always. A plain object\n * does too — **except for integer-like keys**, which JavaScript enumerates first\n * and in ascending order whatever order they were written in\n * (`OrdinaryOwnPropertyKeys`, ECMA-262 §10.1.11.1). Measured in Node 24:\n * `Object.keys({ 5: \"Ótimo\", 3: \"Ok\", 1: \"Ruim\" })` is `[\"1\", \"3\", \"5\"]`, and\n * `{ baixa, 10, 2, alta }` enumerates as `[\"2\", \"10\", \"baixa\", \"alta\"]`. When\n * the business order of a numeric scale is not ascending, pass a `Map`.\n *\n * @param source - A record or a `Map` from value to label.\n * @returns A new array, one entry per key, in the order described above.\n *\n * @example\n * const STATUS = { active: \"Ativo\", paused: \"Pausado\" };\n * <Select aria-label=\"Status\" variant=\"chip\" options={toOptions(STATUS)} />\n *\n * @example\n * const HUMOR = new Map([[5, \"Ótimo\"], [3, \"Ok\"], [1, \"Ruim\"]]);\n * toOptions(HUMOR); // 5, 3, 1 — the order written\n */\nexport function toOptions(\n    source: Readonly<Record<string, string>> | ReadonlyMap<string | number, string>,\n): OptionEntry[] {\n    const entries: Iterable<readonly [string | number, string]> =\n        source instanceof Map ? source.entries() : Object.entries(source);\n    return Array.from(entries, ([value, label]) => ({ value: String(value), label }));\n}\n\n/**\n * Prepend the \"no filter\" entry to an option list.\n *\n * A filter needs this as a real option, not as the select's placeholder: a\n * placeholder reads as \"nothing chosen yet\", so the screen cannot tell whether\n * the column is filtered. The entry uses {@link ALL_OPTION_VALUE}.\n *\n * @param options - The list to extend. It is not mutated.\n * @param label - The entry's label. Defaults to `\"Todos\"`.\n * @returns A new array with the entry first.\n */\nexport function withAllOption<T extends OptionLike>(\n    options: readonly T[],\n    label: string = DEFAULT_ALL_OPTION_LABEL,\n): (T | OptionEntry)[] {\n    return [{ value: ALL_OPTION_VALUE, label }, ...options];\n}\n\n/**\n * Prepend the empty entry a nullable field needs.\n *\n * Without it a `<select>` has no way to show \"unset\": a controlled\n * `value=\"\"` with no matching option reads back as the **first option** (measured\n * in jsdom: `select.value === \"a\"`), so opening an edit form and saving it\n * writes a value nobody chose. `Select`'s `placeholder` does not cover this — its\n * entry is `disabled hidden`, so once something is picked the field can never be\n * cleared again. The entry's value is `\"\"`, which is what an unanswered nullable field\n * submits.\n *\n * @param options - The list to extend. It is not mutated.\n * @param label - The entry's label. Defaults to `\"— Não definido —\"`.\n * @returns A new array with the entry first.\n */\nexport function withEmptyOption<T extends OptionLike>(\n    options: readonly T[],\n    label: string = DEFAULT_EMPTY_OPTION_LABEL,\n): (T | OptionEntry)[] {\n    return [{ value: \"\", label }, ...options];\n}\n"],"mappings":"AAqBA,IAAa,EAAmB,MAoChC,SAAgB,EACZ,EACa,CACb,IAAM,EACF,aAAkB,IAAM,EAAO,QAAQ,EAAI,OAAO,QAAQ,CAAM,EACpE,OAAO,MAAM,KAAK,GAAU,CAAC,EAAO,MAAY,CAAE,MAAO,OAAO,CAAK,EAAG,OAAM,EAAE,CACpF,CAaA,SAAgB,EACZ,EACA,EAAgB,QACG,CACnB,MAAO,CAAC,CAAE,MAAA,MAAyB,OAAM,EAAG,GAAG,CAAO,CAC1D,CAiBA,SAAgB,EACZ,EACA,EAAgB,mBACG,CACnB,MAAO,CAAC,CAAE,MAAO,GAAI,OAAM,EAAG,GAAG,CAAO,CAC5C"}
+{"version":3,"file":"options.cjs","names":["ALL_OPTION_VALUE","toOptions","entries","source","value","label","withAllOption","options","withEmptyOption"],"sources":["../../../src/components/Select/options.ts"],"sourcesContent":["/**\n * The shape every option list in the SDK shares: `Select`, `MultiSelect` and\n * `Combobox` all accept an array of it.\n *\n * `value` is always a `string` here, because that is what a `<select>` hands\n * back in `event.target.value` whatever the option was built from: an option\n * built with the number `0` comes back as the string `\"0\"`, so a list that kept\n * numbers could never be compared with `===` against what the control emits.\n */\nexport interface OptionEntry {\n    value: string;\n    label: string;\n}\n\n/**\n * The value {@link withAllOption} gives its entry, exported so the filter code\n * compares against a name instead of a magic string.\n *\n * @example\n * const where = status === ALL_OPTION_VALUE ? {} : { status };\n */\nexport const ALL_OPTION_VALUE = \"all\";\n\nconst DEFAULT_ALL_OPTION_LABEL = \"Todos\";\n\nconst DEFAULT_EMPTY_OPTION_LABEL = \"— Não definido —\";\n\n/** The minimum an option needs for the helpers to prepend to its list. */\ntype OptionLike = { value: string | number; label: string };\n\n/**\n * Turn a `value → label` map into the option list `Select`, `MultiSelect` and\n * `Combobox` take.\n *\n * Every key becomes a string `value` (see {@link OptionEntry} for why), so the\n * result is assignable to `SelectOption[]`, `MultiSelectOption[]` and\n * `ComboboxOption[]` alike.\n *\n * **Order.** A `Map` keeps the order it was written in, always. A plain object\n * does too — **except for integer-like keys**, which JavaScript enumerates first\n * and in ascending order whatever order they were written in\n * (`OrdinaryOwnPropertyKeys`, ECMA-262 §10.1.11.1). Measured in Node 24:\n * `Object.keys({ 5: \"Ótimo\", 3: \"Ok\", 1: \"Ruim\" })` is `[\"1\", \"3\", \"5\"]`, and\n * `{ baixa, 10, 2, alta }` enumerates as `[\"2\", \"10\", \"baixa\", \"alta\"]`. When\n * the business order of a numeric scale is not ascending, pass a `Map`.\n *\n * @param source - A record or a `Map` from value to label.\n * @returns A new array, one entry per key, in the order described above.\n *\n * @example\n * const STATUS = { active: \"Ativo\", paused: \"Pausado\" };\n * <Select aria-label=\"Status\" variant=\"chip\" options={toOptions(STATUS)} />\n *\n * @example\n * const HUMOR = new Map([[5, \"Ótimo\"], [3, \"Ok\"], [1, \"Ruim\"]]);\n * toOptions(HUMOR); // 5, 3, 1 — the order written\n */\nexport function toOptions(\n    source: Readonly<Record<string, string>> | ReadonlyMap<string | number, string>,\n): OptionEntry[] {\n    const entries: Iterable<readonly [string | number, string]> =\n        source instanceof Map ? source.entries() : Object.entries(source);\n    return Array.from(entries, ([value, label]) => ({ value: String(value), label }));\n}\n\n/**\n * Prepend the \"no filter\" entry to an option list.\n *\n * A filter needs this as a real option, not as the select's placeholder: a\n * placeholder reads as \"nothing chosen yet\", so the screen cannot tell whether\n * the column is filtered. The entry uses {@link ALL_OPTION_VALUE}.\n *\n * @param options - The list to extend. It is not mutated.\n * @param label - The entry's label. Defaults to `\"Todos\"`.\n * @returns A new array with the entry first.\n */\nexport function withAllOption<T extends OptionLike>(\n    options: readonly T[],\n    label: string = DEFAULT_ALL_OPTION_LABEL,\n): (T | OptionEntry)[] {\n    return [{ value: ALL_OPTION_VALUE, label }, ...options];\n}\n\n/**\n * Prepend the empty entry a nullable field needs.\n *\n * Without it a `<select>` has no way to show \"unset\": a controlled\n * `value=\"\"` with no matching option reads back as the **first option** (measured\n * in jsdom: `select.value === \"a\"`), so opening an edit form and saving it\n * writes a value nobody chose. `Select`'s `placeholder` does not cover this — its\n * entry is `disabled hidden`, so once something is picked the field can never be\n * cleared again. The entry's value is `\"\"`, which is what an unanswered nullable field\n * submits.\n *\n * @param options - The list to extend. It is not mutated.\n * @param label - The entry's label. Defaults to `\"— Não definido —\"`.\n * @returns A new array with the entry first.\n */\nexport function withEmptyOption<T extends OptionLike>(\n    options: readonly T[],\n    label: string = DEFAULT_EMPTY_OPTION_LABEL,\n): (T | OptionEntry)[] {\n    return [{ value: \"\", label }, ...options];\n}\n"],"mappings":"AAqBA,IAAaA,EAAmB,MAoChC,SAAgBC,EACZ,EACa,CACb,IAAMC,EACFC,aAAkB,IAAMA,EAAO,QAAQ,EAAI,OAAO,QAAQA,CAAM,EACpE,OAAO,MAAM,KAAKD,GAAU,CAACE,EAAOC,MAAY,CAAE,MAAO,OAAOD,CAAK,EAAG,OAAM,EAAE,CACpF,CAaA,SAAgBE,EACZ,EACA,EAAgB,QACG,CACnB,MAAO,CAAC,CAAE,MAAA,MAAyB,OAAM,EAAG,GAAGC,CAAO,CAC1D,CAiBA,SAAgBC,EACZ,EACA,EAAgB,mBACG,CACnB,MAAO,CAAC,CAAE,MAAO,GAAI,OAAM,EAAG,GAAGD,CAAO,CAC5C,C"}

package/dist/components/Select/options.js.map

@@ -1 +1 @@
-{"version":3,"file":"options.js","names":[],"sources":["../../../src/components/Select/options.ts"],"sourcesContent":["/**\n * The shape every option list in the SDK shares: `Select`, `MultiSelect` and\n * `Combobox` all accept an array of it.\n *\n * `value` is always a `string` here, because that is what a `<select>` hands\n * back in `event.target.value` whatever the option was built from: an option\n * built with the number `0` comes back as the string `\"0\"`, so a list that kept\n * numbers could never be compared with `===` against what the control emits.\n */\nexport interface OptionEntry {\n    value: string;\n    label: string;\n}\n\n/**\n * The value {@link withAllOption} gives its entry, exported so the filter code\n * compares against a name instead of a magic string.\n *\n * @example\n * const where = status === ALL_OPTION_VALUE ? {} : { status };\n */\nexport const ALL_OPTION_VALUE = \"all\";\n\nconst DEFAULT_ALL_OPTION_LABEL = \"Todos\";\n\nconst DEFAULT_EMPTY_OPTION_LABEL = \"— Não definido —\";\n\n/** The minimum an option needs for the helpers to prepend to its list. */\ntype OptionLike = { value: string | number; label: string };\n\n/**\n * Turn a `value → label` map into the option list `Select`, `MultiSelect` and\n * `Combobox` take.\n *\n * Every key becomes a string `value` (see {@link OptionEntry} for why), so the\n * result is assignable to `SelectOption[]`, `MultiSelectOption[]` and\n * `ComboboxOption[]` alike.\n *\n * **Order.** A `Map` keeps the order it was written in, always. A plain object\n * does too — **except for integer-like keys**, which JavaScript enumerates first\n * and in ascending order whatever order they were written in\n * (`OrdinaryOwnPropertyKeys`, ECMA-262 §10.1.11.1). Measured in Node 24:\n * `Object.keys({ 5: \"Ótimo\", 3: \"Ok\", 1: \"Ruim\" })` is `[\"1\", \"3\", \"5\"]`, and\n * `{ baixa, 10, 2, alta }` enumerates as `[\"2\", \"10\", \"baixa\", \"alta\"]`. When\n * the business order of a numeric scale is not ascending, pass a `Map`.\n *\n * @param source - A record or a `Map` from value to label.\n * @returns A new array, one entry per key, in the order described above.\n *\n * @example\n * const STATUS = { active: \"Ativo\", paused: \"Pausado\" };\n * <Select aria-label=\"Status\" variant=\"chip\" options={toOptions(STATUS)} />\n *\n * @example\n * const HUMOR = new Map([[5, \"Ótimo\"], [3, \"Ok\"], [1, \"Ruim\"]]);\n * toOptions(HUMOR); // 5, 3, 1 — the order written\n */\nexport function toOptions(\n    source: Readonly<Record<string, string>> | ReadonlyMap<string | number, string>,\n): OptionEntry[] {\n    const entries: Iterable<readonly [string | number, string]> =\n        source instanceof Map ? source.entries() : Object.entries(source);\n    return Array.from(entries, ([value, label]) => ({ value: String(value), label }));\n}\n\n/**\n * Prepend the \"no filter\" entry to an option list.\n *\n * A filter needs this as a real option, not as the select's placeholder: a\n * placeholder reads as \"nothing chosen yet\", so the screen cannot tell whether\n * the column is filtered. The entry uses {@link ALL_OPTION_VALUE}.\n *\n * @param options - The list to extend. It is not mutated.\n * @param label - The entry's label. Defaults to `\"Todos\"`.\n * @returns A new array with the entry first.\n */\nexport function withAllOption<T extends OptionLike>(\n    options: readonly T[],\n    label: string = DEFAULT_ALL_OPTION_LABEL,\n): (T | OptionEntry)[] {\n    return [{ value: ALL_OPTION_VALUE, label }, ...options];\n}\n\n/**\n * Prepend the empty entry a nullable field needs.\n *\n * Without it a `<select>` has no way to show \"unset\": a controlled\n * `value=\"\"` with no matching option reads back as the **first option** (measured\n * in jsdom: `select.value === \"a\"`), so opening an edit form and saving it\n * writes a value nobody chose. `Select`'s `placeholder` does not cover this — its\n * entry is `disabled hidden`, so once something is picked the field can never be\n * cleared again. The entry's value is `\"\"`, which is what an unanswered nullable field\n * submits.\n *\n * @param options - The list to extend. It is not mutated.\n * @param label - The entry's label. Defaults to `\"— Não definido —\"`.\n * @returns A new array with the entry first.\n */\nexport function withEmptyOption<T extends OptionLike>(\n    options: readonly T[],\n    label: string = DEFAULT_EMPTY_OPTION_LABEL,\n): (T | OptionEntry)[] {\n    return [{ value: \"\", label }, ...options];\n}\n"],"mappings":";AAqBA,IAAa,IAAmB;AAoChC,SAAgB,EACZ,GACa;CACb,IAAM,IACF,aAAkB,MAAM,EAAO,QAAQ,IAAI,OAAO,QAAQ,CAAM;CACpE,OAAO,MAAM,KAAK,IAAU,CAAC,GAAO,QAAY;EAAE,OAAO,OAAO,CAAK;EAAG;CAAM,EAAE;AACpF;AAaA,SAAgB,EACZ,GACA,IAAgB,SACG;CACnB,OAAO,CAAC;EAAE,OAAA;EAAyB;CAAM,GAAG,GAAG,CAAO;AAC1D;AAiBA,SAAgB,EACZ,GACA,IAAgB,oBACG;CACnB,OAAO,CAAC;EAAE,OAAO;EAAI;CAAM,GAAG,GAAG,CAAO;AAC5C"}
+{"version":3,"file":"options.js","names":["ALL_OPTION_VALUE","toOptions","entries","source","value","label","withAllOption","options","withEmptyOption"],"sources":["../../../src/components/Select/options.ts"],"sourcesContent":["/**\n * The shape every option list in the SDK shares: `Select`, `MultiSelect` and\n * `Combobox` all accept an array of it.\n *\n * `value` is always a `string` here, because that is what a `<select>` hands\n * back in `event.target.value` whatever the option was built from: an option\n * built with the number `0` comes back as the string `\"0\"`, so a list that kept\n * numbers could never be compared with `===` against what the control emits.\n */\nexport interface OptionEntry {\n    value: string;\n    label: string;\n}\n\n/**\n * The value {@link withAllOption} gives its entry, exported so the filter code\n * compares against a name instead of a magic string.\n *\n * @example\n * const where = status === ALL_OPTION_VALUE ? {} : { status };\n */\nexport const ALL_OPTION_VALUE = \"all\";\n\nconst DEFAULT_ALL_OPTION_LABEL = \"Todos\";\n\nconst DEFAULT_EMPTY_OPTION_LABEL = \"— Não definido —\";\n\n/** The minimum an option needs for the helpers to prepend to its list. */\ntype OptionLike = { value: string | number; label: string };\n\n/**\n * Turn a `value → label` map into the option list `Select`, `MultiSelect` and\n * `Combobox` take.\n *\n * Every key becomes a string `value` (see {@link OptionEntry} for why), so the\n * result is assignable to `SelectOption[]`, `MultiSelectOption[]` and\n * `ComboboxOption[]` alike.\n *\n * **Order.** A `Map` keeps the order it was written in, always. A plain object\n * does too — **except for integer-like keys**, which JavaScript enumerates first\n * and in ascending order whatever order they were written in\n * (`OrdinaryOwnPropertyKeys`, ECMA-262 §10.1.11.1). Measured in Node 24:\n * `Object.keys({ 5: \"Ótimo\", 3: \"Ok\", 1: \"Ruim\" })` is `[\"1\", \"3\", \"5\"]`, and\n * `{ baixa, 10, 2, alta }` enumerates as `[\"2\", \"10\", \"baixa\", \"alta\"]`. When\n * the business order of a numeric scale is not ascending, pass a `Map`.\n *\n * @param source - A record or a `Map` from value to label.\n * @returns A new array, one entry per key, in the order described above.\n *\n * @example\n * const STATUS = { active: \"Ativo\", paused: \"Pausado\" };\n * <Select aria-label=\"Status\" variant=\"chip\" options={toOptions(STATUS)} />\n *\n * @example\n * const HUMOR = new Map([[5, \"Ótimo\"], [3, \"Ok\"], [1, \"Ruim\"]]);\n * toOptions(HUMOR); // 5, 3, 1 — the order written\n */\nexport function toOptions(\n    source: Readonly<Record<string, string>> | ReadonlyMap<string | number, string>,\n): OptionEntry[] {\n    const entries: Iterable<readonly [string | number, string]> =\n        source instanceof Map ? source.entries() : Object.entries(source);\n    return Array.from(entries, ([value, label]) => ({ value: String(value), label }));\n}\n\n/**\n * Prepend the \"no filter\" entry to an option list.\n *\n * A filter needs this as a real option, not as the select's placeholder: a\n * placeholder reads as \"nothing chosen yet\", so the screen cannot tell whether\n * the column is filtered. The entry uses {@link ALL_OPTION_VALUE}.\n *\n * @param options - The list to extend. It is not mutated.\n * @param label - The entry's label. Defaults to `\"Todos\"`.\n * @returns A new array with the entry first.\n */\nexport function withAllOption<T extends OptionLike>(\n    options: readonly T[],\n    label: string = DEFAULT_ALL_OPTION_LABEL,\n): (T | OptionEntry)[] {\n    return [{ value: ALL_OPTION_VALUE, label }, ...options];\n}\n\n/**\n * Prepend the empty entry a nullable field needs.\n *\n * Without it a `<select>` has no way to show \"unset\": a controlled\n * `value=\"\"` with no matching option reads back as the **first option** (measured\n * in jsdom: `select.value === \"a\"`), so opening an edit form and saving it\n * writes a value nobody chose. `Select`'s `placeholder` does not cover this — its\n * entry is `disabled hidden`, so once something is picked the field can never be\n * cleared again. The entry's value is `\"\"`, which is what an unanswered nullable field\n * submits.\n *\n * @param options - The list to extend. It is not mutated.\n * @param label - The entry's label. Defaults to `\"— Não definido —\"`.\n * @returns A new array with the entry first.\n */\nexport function withEmptyOption<T extends OptionLike>(\n    options: readonly T[],\n    label: string = DEFAULT_EMPTY_OPTION_LABEL,\n): (T | OptionEntry)[] {\n    return [{ value: \"\", label }, ...options];\n}\n"],"mappings":";AAqBA,IAAaA,IAAmB;AAoChC,SAAgBC,EACZ,GACa;CACb,IAAMC,IACFC,aAAkB,MAAMA,EAAO,QAAQ,IAAI,OAAO,QAAQA,CAAM;CACpE,OAAO,MAAM,KAAKD,IAAU,CAACE,GAAOC,QAAY;EAAE,OAAO,OAAOD,CAAK;EAAG;CAAM,EAAE;AACpF;AAaA,SAAgBE,EACZ,GACA,IAAgB,SACG;CACnB,OAAO,CAAC;EAAE,OAAA;EAAyB;CAAM,GAAG,GAAGC,CAAO;AAC1D;AAiBA,SAAgBC,EACZ,GACA,IAAgB,oBACG;CACnB,OAAO,CAAC;EAAE,OAAO;EAAI;CAAM,GAAG,GAAGD,CAAO;AAC5C"}

package/dist/components/Sidebar/Sidebar.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("./active-nav-key.cjs"),n=require("./Sidebar.module.cjs"),r=require("./SidebarEntry.cjs");let i=require("react"),a=require("react/jsx-runtime");function o(e){let t=[],n;for(let r of e){if(r.type===`separator`){t.push({kind:`separator`,key:r.key}),n=void 0;continue}if(r.type===`section`){n={kind:`items`,key:r.key,section:r,items:[]},t.push(n);continue}n||(n={kind:`items`,key:`loose-${r.key}`,items:[]},t.push(n)),n.items.push(r)}return t}function s(e,n,r){if(r===`key`||n===void 0)return n;let i=e.filter(e=>e.type!==`section`&&e.type!==`separator`);return i[t.activeNavIndex(n,i.map(e=>e.href??e.key))]?.key}function c({header:t,items:c,value:l,onChange:u,match:d=`key`,footer:f,collapsed:p=!1,width:m=240,collapsedWidth:h=64,className:g,style:_,...v}){let y=(0,i.useId)(),b=o(c),x=s(c,l,d),S=typeof(p?h:m)==`number`?`${p?h:m}px`:p?h:m;return(0,a.jsxs)(`aside`,{className:e.cn(n.default.sidebar,p&&n.default.collapsed,g),style:{width:S,..._},...v,children:[t&&(0,a.jsx)(`div`,{className:n.default.header,children:t}),(0,a.jsx)(`nav`,{className:n.default.nav,"aria-label":`Navegação lateral`,children:b.map(t=>{if(t.kind===`separator`)return(0,a.jsx)(`hr`,{className:n.default.separator},t.key);if(!t.section)return(0,a.jsx)(`div`,{className:n.default.group,children:t.items.map(e=>(0,a.jsx)(r.SidebarEntry,{item:e,active:e.key===x,collapsed:p,onSelect:u},e.key))},t.key);let i=`${y}-${t.key}`;return(0,a.jsxs)(`div`,{role:`group`,"aria-labelledby":i,className:n.default.group,children:[(0,a.jsx)(`div`,{id:i,role:`presentation`,className:e.cn(n.default.section,p&&n.default.sectionCollapsed),children:t.section.label}),t.items.map(e=>(0,a.jsx)(r.SidebarEntry,{item:e,active:e.key===x,collapsed:p,onSelect:u},e.key))]},t.key)})}),f&&(0,a.jsx)(`div`,{className:n.default.footer,children:f})]})}exports.Sidebar=c;
+const e=require("../../utils/cn.cjs"),t=require("./active-nav-key.cjs"),n=require("./Sidebar.module.cjs"),r=require("./SidebarEntry.cjs");let i=require("react"),a=require("react/jsx-runtime");function o(e){let t=[],n;for(let r of e)r.type===`separator`?(t.push({kind:`separator`,key:r.key}),n=void 0):r.type===`section`?(n={kind:`items`,key:r.key,section:r,items:[]},t.push(n)):(n||(n={kind:`items`,key:`loose-${r.key}`,items:[]},t.push(n)),n.items.push(r));return t}function s(e,n,r){if(r===`key`||n===void 0)return n;let i=e.filter(e=>e.type!==`section`&&e.type!==`separator`);return i[t.activeNavIndex(n,i.map(e=>e.href??e.key))]?.key}function c({header:t,items:c,value:l,onChange:u,match:d=`key`,footer:f,collapsed:p=!1,width:m=240,collapsedWidth:h=64,className:g,style:_,...v}){let y=(0,i.useId)(),b=o(c),x=s(c,l,d),S=typeof(p?h:m)==`number`?`${p?h:m}px`:p?h:m;return(0,a.jsxs)(`aside`,{className:e.cn(n.default.sidebar,p&&n.default.collapsed,g),style:{width:S,..._},...v,children:[t&&(0,a.jsx)(`div`,{className:n.default.header,children:t}),(0,a.jsx)(`nav`,{className:n.default.nav,"aria-label":`Navegação lateral`,children:b.map(t=>{if(t.kind===`separator`)return(0,a.jsx)(`hr`,{className:n.default.separator},t.key);if(!t.section)return(0,a.jsx)(`div`,{className:n.default.group,children:t.items.map(e=>(0,a.jsx)(r.SidebarEntry,{item:e,active:e.key===x,collapsed:p,onSelect:u},e.key))},t.key);let i=`${y}-${t.key}`;return(0,a.jsxs)(`div`,{role:`group`,"aria-labelledby":i,className:n.default.group,children:[(0,a.jsx)(`div`,{id:i,role:`presentation`,className:e.cn(n.default.section,p&&n.default.sectionCollapsed),children:t.section.label}),t.items.map(e=>(0,a.jsx)(r.SidebarEntry,{item:e,active:e.key===x,collapsed:p,onSelect:u},e.key))]},t.key)})}),f&&(0,a.jsx)(`div`,{className:n.default.footer,children:f})]})}exports.Sidebar=c;
 //# sourceMappingURL=Sidebar.cjs.map

package/dist/components/Sidebar/Sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.cjs","names":[],"sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — header, items, footer are the three regions,\n * value/onChange/match the selection, and collapsed/width/collapsedWidth the two\n * layout modes it switches between.\n */\nimport { useId, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { activeNavIndex } from \"./active-nav-key\";\nimport styles from \"./Sidebar.module.css\";\nimport { SidebarEntry } from \"./SidebarEntry\";\n\nexport interface SidebarItem {\n    key: string;\n    label: ReactNode;\n    icon?: ReactNode;\n    badge?: ReactNode;\n    disabled?: boolean;\n    /**\n     * Renders the entry as a link to this URL instead of a button.\n     *\n     * `onChange` still fires on click, so an app that tracks the active key keeps\n     * working — the difference is that the entry now behaves like navigation:\n     * middle-click, ctrl-click and \"copy link address\" do what the user expects,\n     * and a screen reader announces a link rather than a button.\n     *\n     * A `disabled` entry ignores this and stays a `<button disabled>`: there is no\n     * disabled state for an anchor, and dropping the `href` to fake one leaves a\n     * link that announces itself as actionable and is not.\n     */\n    href?: string;\n}\n\n/**\n * A section heading. Every item after it belongs to the section, until the next\n * section or separator.\n */\nexport interface SidebarSection {\n    type: \"section\";\n    key: string;\n    label: ReactNode;\n}\n\n/** A plain divider, for splitting the list without naming the parts. */\nexport interface SidebarSeparator {\n    type: \"separator\";\n    key: string;\n}\n\n/**\n * One entry of the navigation list.\n *\n * An entry with no `type` is an item, which is what keeps a plain\n * `SidebarItem[]` a valid `SidebarEntry[]`: adding sections to this component\n * needed no change at any existing call site.\n */\nexport type SidebarEntry = ({ type?: \"item\" } & SidebarItem) | SidebarSection | SidebarSeparator;\n\nexport interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, \"onChange\"> {\n    /** Top slot — typically the logo + brand. */\n    header?: ReactNode;\n    /** Navigation entries. An entry with no `type` is an item. */\n    items: SidebarEntry[];\n    /**\n     * The active item: its `key` by default, or the current route with\n     * `match=\"route\"`.\n     */\n    value?: string;\n    /**\n     * How `value` picks the active item.\n     *\n     * - `\"key\"` (default): the item whose `key` equals `value`.\n     * - `\"route\"`: `value` is the current pathname, and the active item is the one\n     *   whose `href` (or `key`, when it has no `href`) is the longest path covering\n     *   it on a segment boundary — see `activeNavKey`. `/dashboard/tips/42` lights\n     *   `/dashboard/tips`, not `/dashboard`, and `/users-admin` never lights\n     *   `/users`. Sections and separators take no part.\n     *\n     * `\"route\"` is what lets the app pass `useLocation().pathname` and stop\n     * computing a key: the component already holds the entries the resolution runs\n     * against, so asking the app to repeat them is how the two drift apart. It\n     * reads no router itself — the value comes in as a string — so the component\n     * keeps working with no router mounted.\n     */\n    match?: \"key\" | \"route\";\n    /** Fires when an item is clicked. Receives the item's `key`. */\n    onChange?: (key: string) => void;\n    /** Bottom slot — typically settings/profile/logout. */\n    footer?: ReactNode;\n    /** Collapsed mode — only icons visible. Default `false`. */\n    collapsed?: boolean;\n    /** Width when expanded, in pixels or any CSS length. Default `240px`. */\n    width?: number | string;\n    /** Width when collapsed, in pixels or any CSS length. Default `64px`. */\n    collapsedWidth?: number | string;\n}\n\n/** A run of items, optionally under a section heading. */\ninterface ItemBlock {\n    kind: \"items\";\n    key: string;\n    section?: SidebarSection;\n    items: SidebarItem[];\n}\n\n/** A standalone divider between blocks. */\ninterface SeparatorBlock {\n    kind: \"separator\";\n    key: string;\n}\n\ntype Block = ItemBlock | SeparatorBlock;\n\n/**\n * Fold the flat entry list into the blocks that get rendered.\n *\n * A section opens a block that swallows every following item; a separator closes\n * whatever is open, so items after it are loose again. Items before the first\n * section are loose too — which is the whole existing behaviour, and why a list\n * with no sections comes out of here as one unnamed block.\n *\n * @param entries - The `items` prop, as given.\n * @returns Blocks in render order.\n */\nfunction toBlocks(entries: readonly SidebarEntry[]): Block[] {\n    const blocks: Block[] = [];\n    let open: ItemBlock | undefined;\n\n    for (const entry of entries) {\n        if (entry.type === \"separator\") {\n            blocks.push({ kind: \"separator\", key: entry.key });\n            open = undefined;\n            continue;\n        }\n        if (entry.type === \"section\") {\n            open = { kind: \"items\", key: entry.key, section: entry, items: [] };\n            blocks.push(open);\n            continue;\n        }\n        if (!open) {\n            open = { kind: \"items\", key: `loose-${entry.key}`, items: [] };\n            blocks.push(open);\n        }\n        open.items.push(entry);\n    }\n    return blocks;\n}\n\n/**\n * The key of the item `value` selects, under the given `match` mode.\n *\n * @param entries - The `items` prop, as given.\n * @param value - The `value` prop.\n * @param match - The `match` prop.\n * @returns The active item's key, or `undefined` when no item is active.\n */\nfunction resolveActiveKey(\n    entries: readonly SidebarEntry[],\n    value: string | undefined,\n    match: \"key\" | \"route\",\n): string | undefined {\n    if (match === \"key\" || value === undefined) {\n        return value;\n    }\n    const items = entries.filter(\n        (entry): entry is { type?: \"item\" } & SidebarItem =>\n            entry.type !== \"section\" && entry.type !== \"separator\",\n    );\n    return items[\n        activeNavIndex(\n            value,\n            items.map((item) => item.href ?? item.key),\n        )\n    ]?.key;\n}\n\n/**\n * Desktop sidebar navigation. Pair with `<Show above=\"md\">` and a `Drawer`\n * for mobile.\n *\n * Sixteen screens in one flat list is a wall, so `items` also takes section\n * headings and separators. A section renders as a labelled `role=\"group\"`, which\n * is what tells a screen reader \"Monitoring, group, 3 items\" — the reason it is\n * not a styled `disabled` item, which would announce an unavailable button and\n * stay in the navigation order.\n *\n * @example\n * const [tab, setTab] = useState(\"home\");\n * <Show above=\"md\">\n *     <Sidebar\n *         header={<Brand />}\n *         items={[{ key: \"home\", label: \"Home\", icon: <Home /> }]}\n *         value={tab}\n *         onChange={setTab}\n *     />\n * </Show>\n *\n * @example\n * const { pathname } = useLocation();\n * <Sidebar\n *     match=\"route\"\n *     value={pathname}\n *     items={[\n *         { key: \"overview\", label: \"Overview\", href: \"/dashboard\" },\n *         { key: \"tips\", label: \"Tips\", href: \"/dashboard/tips\" },\n *     ]}\n * />\n *\n * @example\n * <Sidebar\n *     items={[\n *         { type: \"section\", key: \"monitoring\", label: \"Monitoring\" },\n *         { key: \"overview\", label: \"Overview\", href: \"/overview\" },\n *         { key: \"activity\", label: \"Activity\", href: \"/activity\" },\n *         { type: \"section\", key: \"admin\", label: \"Administration\" },\n *         { key: \"settings\", label: \"Settings\", href: \"/settings\" },\n *     ]}\n *     value={tab}\n *     onChange={setTab}\n * />\n */\nexport function Sidebar({\n    header,\n    items,\n    value,\n    onChange,\n    match = \"key\",\n    footer,\n    collapsed = false,\n    width = 240,\n    collapsedWidth = 64,\n    className,\n    style,\n    ...props\n}: SidebarProps) {\n    const baseId = useId();\n    const blocks = toBlocks(items);\n    const activeKey = resolveActiveKey(items, value, match);\n    const finalWidth =\n        typeof (collapsed ? collapsedWidth : width) === \"number\"\n            ? `${collapsed ? collapsedWidth : width}px`\n            : collapsed\n              ? collapsedWidth\n              : width;\n\n    return (\n        <aside\n            className={cn(styles.sidebar, collapsed && styles.collapsed, className)}\n            style={{ width: finalWidth, ...style }}\n            {...props}\n        >\n            {header && <div className={styles.header}>{header}</div>}\n            <nav className={styles.nav} aria-label=\"Navegação lateral\">\n                {blocks.map((block) => {\n                    if (block.kind === \"separator\") {\n                        return <hr key={block.key} className={styles.separator} />;\n                    }\n                    if (!block.section) {\n                        return (\n                            <div key={block.key} className={styles.group}>\n                                {block.items.map((item) => (\n                                    <SidebarEntry\n                                        key={item.key}\n                                        item={item}\n                                        active={item.key === activeKey}\n                                        collapsed={collapsed}\n                                        onSelect={onChange}\n                                    />\n                                ))}\n                            </div>\n                        );\n                    }\n                    const labelId = `${baseId}-${block.key}`;\n                    return (\n                        <div\n                            key={block.key}\n                            role=\"group\"\n                            aria-labelledby={labelId}\n                            className={styles.group}\n                        >\n                            <div\n                                id={labelId}\n                                role=\"presentation\"\n                                className={cn(styles.section, collapsed && styles.sectionCollapsed)}\n                            >\n                                {block.section.label}\n                            </div>\n                            {block.items.map((item) => (\n                                <SidebarEntry\n                                    key={item.key}\n                                    item={item}\n                                    active={item.key === activeKey}\n                                    collapsed={collapsed}\n                                    onSelect={onChange}\n                                />\n                            ))}\n                        </div>\n                    );\n                })}\n            </nav>\n            {footer && <div className={styles.footer}>{footer}</div>}\n        </aside>\n    );\n}\n"],"mappings":"gMA2HA,SAAS,EAAS,EAA2C,CACzD,IAAM,EAAkB,CAAC,EACrB,EAEJ,IAAK,IAAM,KAAS,EAAS,CACzB,GAAI,EAAM,OAAS,YAAa,CAC5B,EAAO,KAAK,CAAE,KAAM,YAAa,IAAK,EAAM,GAAI,CAAC,EACjD,EAAO,IAAA,GACP,QACJ,CACA,GAAI,EAAM,OAAS,UAAW,CAC1B,EAAO,CAAE,KAAM,QAAS,IAAK,EAAM,IAAK,QAAS,EAAO,MAAO,CAAC,CAAE,EAClE,EAAO,KAAK,CAAI,EAChB,QACJ,CACK,IACD,EAAO,CAAE,KAAM,QAAS,IAAK,SAAS,EAAM,MAAO,MAAO,CAAC,CAAE,EAC7D,EAAO,KAAK,CAAI,GAEpB,EAAK,MAAM,KAAK,CAAK,CACzB,CACA,OAAO,CACX,CAUA,SAAS,EACL,EACA,EACA,EACkB,CAClB,GAAI,IAAU,OAAS,IAAU,IAAA,GAC7B,OAAO,EAEX,IAAM,EAAQ,EAAQ,OACjB,GACG,EAAM,OAAS,WAAa,EAAM,OAAS,WACnD,EACA,OAAO,EACH,EAAA,eACI,EACA,EAAM,IAAK,GAAS,EAAK,MAAQ,EAAK,GAAG,CAC7C,EACH,EAAE,GACP,CA+CA,SAAgB,EAAQ,CACpB,SACA,QACA,QACA,WACA,QAAQ,MACR,SACA,YAAY,GACZ,QAAQ,IACR,iBAAiB,GACjB,YACA,QACA,GAAG,GACU,CACb,IAAM,GAAA,EAAS,EAAA,MAAA,CAAM,EACf,EAAS,EAAS,CAAK,EACvB,EAAY,EAAiB,EAAO,EAAO,CAAK,EAChD,EACF,OAAQ,EAAY,EAAiB,IAAW,SAC1C,GAAG,EAAY,EAAiB,EAAM,IACtC,EACE,EACA,EAEZ,OACI,EAAA,EAAA,KAAA,CAAC,QAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,GAAa,EAAA,QAAO,UAAW,CAAS,EACtE,MAAO,CAAE,MAAO,EAAY,GAAG,CAAM,EACrC,GAAI,EAHR,SAAA,CAKK,IAAU,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAS,SAAA,CAAY,CAAA,GACvD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,IAAK,aAAW,oBAClC,SAAA,EAAO,IAAK,GAAU,CACnB,GAAI,EAAM,OAAS,YACf,OAAO,EAAA,EAAA,IAAA,CAAC,KAAD,CAAoB,UAAW,EAAA,QAAO,SAAY,EAAzC,EAAM,GAAmC,EAE7D,GAAI,CAAC,EAAM,QACP,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAqB,UAAW,EAAA,QAAO,MAClC,SAAA,EAAM,MAAM,IAAK,IACd,EAAA,EAAA,IAAA,CAAC,EAAA,aAAD,CAEU,OACN,OAAQ,EAAK,MAAQ,EACV,YACX,SAAU,CACb,EALQ,EAAK,GAKb,CACJ,CACA,EAVK,EAAM,GAUX,EAGb,IAAM,EAAU,GAAG,EAAO,GAAG,EAAM,MACnC,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAEI,KAAK,QACL,kBAAiB,EACjB,UAAW,EAAA,QAAO,MAJtB,SAAA,EAMI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,GAAI,EACJ,KAAK,eACL,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,GAAa,EAAA,QAAO,gBAAgB,EAEjE,SAAA,EAAM,QAAQ,KACd,CAAA,EACJ,EAAM,MAAM,IAAK,IACd,EAAA,EAAA,IAAA,CAAC,EAAA,aAAD,CAEU,OACN,OAAQ,EAAK,MAAQ,EACV,YACX,SAAU,CACb,EALQ,EAAK,GAKb,CACJ,CACA,CArBI,EAAA,EAAM,GAqBV,CAEb,CAAC,CACA,CAAA,EACJ,IAAU,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAS,SAAA,CAAY,CAAA,CACpD,GAEf"}
+{"version":3,"file":"Sidebar.cjs","names":["activeNavIndex","useId","cn","styles","SidebarEntry","require_cn","require_active_nav_key","require_Sidebar_module","require_SidebarEntry","react","react_jsx_runtime","toBlocks","blocks","open","entry","entries","resolveActiveKey","match","value","items","item","Sidebar","props","baseId","activeKey","finalWidth","collapsed","collapsedWidth","width","className","style","header","block","onChange","labelId","footer"],"sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — header, items, footer are the three regions,\n * value/onChange/match the selection, and collapsed/width/collapsedWidth the two\n * layout modes it switches between.\n */\nimport { useId, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { activeNavIndex } from \"./active-nav-key\";\nimport styles from \"./Sidebar.module.css\";\nimport { SidebarEntry } from \"./SidebarEntry\";\n\nexport interface SidebarItem {\n    key: string;\n    label: ReactNode;\n    icon?: ReactNode;\n    badge?: ReactNode;\n    disabled?: boolean;\n    /**\n     * Renders the entry as a link to this URL instead of a button.\n     *\n     * `onChange` still fires on click, so an app that tracks the active key keeps\n     * working — the difference is that the entry now behaves like navigation:\n     * middle-click, ctrl-click and \"copy link address\" do what the user expects,\n     * and a screen reader announces a link rather than a button.\n     *\n     * A `disabled` entry ignores this and stays a `<button disabled>`: there is no\n     * disabled state for an anchor, and dropping the `href` to fake one leaves a\n     * link that announces itself as actionable and is not.\n     */\n    href?: string;\n}\n\n/**\n * A section heading. Every item after it belongs to the section, until the next\n * section or separator.\n */\nexport interface SidebarSection {\n    type: \"section\";\n    key: string;\n    label: ReactNode;\n}\n\n/** A plain divider, for splitting the list without naming the parts. */\nexport interface SidebarSeparator {\n    type: \"separator\";\n    key: string;\n}\n\n/**\n * One entry of the navigation list.\n *\n * An entry with no `type` is an item, which is what keeps a plain\n * `SidebarItem[]` a valid `SidebarEntry[]`: adding sections to this component\n * needed no change at any existing call site.\n */\nexport type SidebarEntry = ({ type?: \"item\" } & SidebarItem) | SidebarSection | SidebarSeparator;\n\nexport interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, \"onChange\"> {\n    /** Top slot — typically the logo + brand. */\n    header?: ReactNode;\n    /** Navigation entries. An entry with no `type` is an item. */\n    items: SidebarEntry[];\n    /**\n     * The active item: its `key` by default, or the current route with\n     * `match=\"route\"`.\n     */\n    value?: string;\n    /**\n     * How `value` picks the active item.\n     *\n     * - `\"key\"` (default): the item whose `key` equals `value`.\n     * - `\"route\"`: `value` is the current pathname, and the active item is the one\n     *   whose `href` (or `key`, when it has no `href`) is the longest path covering\n     *   it on a segment boundary — see `activeNavKey`. `/dashboard/tips/42` lights\n     *   `/dashboard/tips`, not `/dashboard`, and `/users-admin` never lights\n     *   `/users`. Sections and separators take no part.\n     *\n     * `\"route\"` is what lets the app pass `useLocation().pathname` and stop\n     * computing a key: the component already holds the entries the resolution runs\n     * against, so asking the app to repeat them is how the two drift apart. It\n     * reads no router itself — the value comes in as a string — so the component\n     * keeps working with no router mounted.\n     */\n    match?: \"key\" | \"route\";\n    /** Fires when an item is clicked. Receives the item's `key`. */\n    onChange?: (key: string) => void;\n    /** Bottom slot — typically settings/profile/logout. */\n    footer?: ReactNode;\n    /** Collapsed mode — only icons visible. Default `false`. */\n    collapsed?: boolean;\n    /** Width when expanded, in pixels or any CSS length. Default `240px`. */\n    width?: number | string;\n    /** Width when collapsed, in pixels or any CSS length. Default `64px`. */\n    collapsedWidth?: number | string;\n}\n\n/** A run of items, optionally under a section heading. */\ninterface ItemBlock {\n    kind: \"items\";\n    key: string;\n    section?: SidebarSection;\n    items: SidebarItem[];\n}\n\n/** A standalone divider between blocks. */\ninterface SeparatorBlock {\n    kind: \"separator\";\n    key: string;\n}\n\ntype Block = ItemBlock | SeparatorBlock;\n\n/**\n * Fold the flat entry list into the blocks that get rendered.\n *\n * A section opens a block that swallows every following item; a separator closes\n * whatever is open, so items after it are loose again. Items before the first\n * section are loose too — which is the whole existing behaviour, and why a list\n * with no sections comes out of here as one unnamed block.\n *\n * @param entries - The `items` prop, as given.\n * @returns Blocks in render order.\n */\nfunction toBlocks(entries: readonly SidebarEntry[]): Block[] {\n    const blocks: Block[] = [];\n    let open: ItemBlock | undefined;\n\n    for (const entry of entries) {\n        if (entry.type === \"separator\") {\n            blocks.push({ kind: \"separator\", key: entry.key });\n            open = undefined;\n            continue;\n        }\n        if (entry.type === \"section\") {\n            open = { kind: \"items\", key: entry.key, section: entry, items: [] };\n            blocks.push(open);\n            continue;\n        }\n        if (!open) {\n            open = { kind: \"items\", key: `loose-${entry.key}`, items: [] };\n            blocks.push(open);\n        }\n        open.items.push(entry);\n    }\n    return blocks;\n}\n\n/**\n * The key of the item `value` selects, under the given `match` mode.\n *\n * @param entries - The `items` prop, as given.\n * @param value - The `value` prop.\n * @param match - The `match` prop.\n * @returns The active item's key, or `undefined` when no item is active.\n */\nfunction resolveActiveKey(\n    entries: readonly SidebarEntry[],\n    value: string | undefined,\n    match: \"key\" | \"route\",\n): string | undefined {\n    if (match === \"key\" || value === undefined) {\n        return value;\n    }\n    const items = entries.filter(\n        (entry): entry is { type?: \"item\" } & SidebarItem =>\n            entry.type !== \"section\" && entry.type !== \"separator\",\n    );\n    return items[\n        activeNavIndex(\n            value,\n            items.map((item) => item.href ?? item.key),\n        )\n    ]?.key;\n}\n\n/**\n * Desktop sidebar navigation. Pair with `<Show above=\"md\">` and a `Drawer`\n * for mobile.\n *\n * Sixteen screens in one flat list is a wall, so `items` also takes section\n * headings and separators. A section renders as a labelled `role=\"group\"`, which\n * is what tells a screen reader \"Monitoring, group, 3 items\" — the reason it is\n * not a styled `disabled` item, which would announce an unavailable button and\n * stay in the navigation order.\n *\n * @example\n * const [tab, setTab] = useState(\"home\");\n * <Show above=\"md\">\n *     <Sidebar\n *         header={<Brand />}\n *         items={[{ key: \"home\", label: \"Home\", icon: <Home /> }]}\n *         value={tab}\n *         onChange={setTab}\n *     />\n * </Show>\n *\n * @example\n * const { pathname } = useLocation();\n * <Sidebar\n *     match=\"route\"\n *     value={pathname}\n *     items={[\n *         { key: \"overview\", label: \"Overview\", href: \"/dashboard\" },\n *         { key: \"tips\", label: \"Tips\", href: \"/dashboard/tips\" },\n *     ]}\n * />\n *\n * @example\n * <Sidebar\n *     items={[\n *         { type: \"section\", key: \"monitoring\", label: \"Monitoring\" },\n *         { key: \"overview\", label: \"Overview\", href: \"/overview\" },\n *         { key: \"activity\", label: \"Activity\", href: \"/activity\" },\n *         { type: \"section\", key: \"admin\", label: \"Administration\" },\n *         { key: \"settings\", label: \"Settings\", href: \"/settings\" },\n *     ]}\n *     value={tab}\n *     onChange={setTab}\n * />\n */\nexport function Sidebar({\n    header,\n    items,\n    value,\n    onChange,\n    match = \"key\",\n    footer,\n    collapsed = false,\n    width = 240,\n    collapsedWidth = 64,\n    className,\n    style,\n    ...props\n}: SidebarProps) {\n    const baseId = useId();\n    const blocks = toBlocks(items);\n    const activeKey = resolveActiveKey(items, value, match);\n    const finalWidth =\n        typeof (collapsed ? collapsedWidth : width) === \"number\"\n            ? `${collapsed ? collapsedWidth : width}px`\n            : collapsed\n              ? collapsedWidth\n              : width;\n\n    return (\n        <aside\n            className={cn(styles.sidebar, collapsed && styles.collapsed, className)}\n            style={{ width: finalWidth, ...style }}\n            {...props}\n        >\n            {header && <div className={styles.header}>{header}</div>}\n            <nav className={styles.nav} aria-label=\"Navegação lateral\">\n                {blocks.map((block) => {\n                    if (block.kind === \"separator\") {\n                        return <hr key={block.key} className={styles.separator} />;\n                    }\n                    if (!block.section) {\n                        return (\n                            <div key={block.key} className={styles.group}>\n                                {block.items.map((item) => (\n                                    <SidebarEntry\n                                        key={item.key}\n                                        item={item}\n                                        active={item.key === activeKey}\n                                        collapsed={collapsed}\n                                        onSelect={onChange}\n                                    />\n                                ))}\n                            </div>\n                        );\n                    }\n                    const labelId = `${baseId}-${block.key}`;\n                    return (\n                        <div\n                            key={block.key}\n                            role=\"group\"\n                            aria-labelledby={labelId}\n                            className={styles.group}\n                        >\n                            <div\n                                id={labelId}\n                                role=\"presentation\"\n                                className={cn(styles.section, collapsed && styles.sectionCollapsed)}\n                            >\n                                {block.section.label}\n                            </div>\n                            {block.items.map((item) => (\n                                <SidebarEntry\n                                    key={item.key}\n                                    item={item}\n                                    active={item.key === activeKey}\n                                    collapsed={collapsed}\n                                    onSelect={onChange}\n                                />\n                            ))}\n                        </div>\n                    );\n                })}\n            </nav>\n            {footer && <div className={styles.footer}>{footer}</div>}\n        </aside>\n    );\n}\n"],"mappings":"A,gMA2HA,SAASW,EAAS,EAA2C,CACzD,IAAMC,EAAkB,CAAC,EACrBC,EAEJ,IAAK,IAAMC,KAASC,EACZD,EAAM,OAAS,aACfF,EAAO,KAAK,CAAE,KAAM,YAAa,IAAKE,EAAM,GAAI,CAAC,EACjD,EAAO,IAAA,IAGPA,EAAM,OAAS,WACf,EAAO,CAAE,KAAM,QAAS,IAAKA,EAAM,IAAK,QAASA,EAAO,MAAO,CAAC,CAAE,EAClEF,EAAO,KAAKC,CAAI,IAGfA,IACD,EAAO,CAAE,KAAM,QAAS,IAAK,SAASC,EAAM,MAAO,MAAO,CAAC,CAAE,EAC7DF,EAAO,KAAKC,CAAI,GAEpBA,EAAK,MAAM,KAAKC,CAAK,GAEzB,OAAOF,CACX,CAUA,SAASI,EACL,EACA,EACA,EACkB,CAClB,GAAIC,IAAU,OAASC,IAAU,IAAA,GAC7B,OAAOA,EAEX,IAAMC,EAAQJ,EAAQ,OACjB,GACGD,EAAM,OAAS,WAAaA,EAAM,OAAS,WACnD,EACA,OAAOK,EACHnB,EAAAA,eACIkB,EACAC,EAAM,IAAK,GAASC,EAAK,MAAQA,EAAK,GAAG,CAC7C,EACH,EAAE,GACP,CA+CA,SAAgBC,EAAQ,CACpB,SACA,QACA,QACA,WACA,QAAQ,MACR,SACA,YAAY,GACZ,QAAQ,IACR,iBAAiB,GACjB,YACA,QACA,GAAGC,GACU,CACb,IAAMC,GAAA,EAAStB,EAAAA,MAAAA,CAAM,EACfW,EAASD,EAASQ,CAAK,EACvBK,EAAYR,EAAiBG,EAAOD,EAAOD,CAAK,EAChDQ,EACF,OAAQC,EAAYC,EAAiBC,IAAW,SAC1C,GAAGF,EAAYC,EAAiBC,EAAM,IACtCF,EACEC,EACAC,EAEZ,OACI,EAAAlB,EAAA,KAAA,CAAC,QAAD,CACI,UAAWR,EAAAA,GAAGC,EAAAA,QAAO,QAASuB,GAAavB,EAAAA,QAAO,UAAW0B,CAAS,EACtE,MAAO,CAAE,MAAOJ,EAAY,GAAGK,CAAM,EACrC,GAAIR,EAHR,SAAA,CAKKS,IAAU,EAAArB,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWP,EAAAA,QAAO,OAAS,SAAA4B,CAAY,CAAA,GACvD,EAAArB,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWP,EAAAA,QAAO,IAAK,aAAW,oBAClC,SAAAS,EAAO,IAAK,GAAU,CACnB,GAAIoB,EAAM,OAAS,YACf,OAAO,EAAAtB,EAAA,IAAA,CAAC,KAAD,CAAoB,UAAWP,EAAAA,QAAO,SAAY,EAAzC6B,EAAM,GAAmC,EAE7D,GAAI,CAACA,EAAM,QACP,OACI,EAAAtB,EAAA,IAAA,CAAC,MAAD,CAAqB,UAAWP,EAAAA,QAAO,MAClC,SAAA6B,EAAM,MAAM,IAAK,IACd,EAAAtB,EAAA,IAAA,CAACN,EAAAA,aAAD,CAEU,OACN,OAAQgB,EAAK,MAAQI,EACV,YACX,SAAUS,CACb,EALQb,EAAK,GAKb,CACJ,CACA,EAVKY,EAAM,GAUX,EAGb,IAAME,EAAU,GAAGX,EAAO,GAAGS,EAAM,MACnC,OACI,EAAAtB,EAAA,KAAA,CAAC,MAAD,CAEI,KAAK,QACL,kBAAiBwB,EACjB,UAAW/B,EAAAA,QAAO,MAJtB,SAAA,EAMI,EAAAO,EAAA,IAAA,CAAC,MAAD,CACI,GAAIwB,EACJ,KAAK,eACL,UAAWhC,EAAAA,GAAGC,EAAAA,QAAO,QAASuB,GAAavB,EAAAA,QAAO,gBAAgB,EAEjE,SAAA6B,EAAM,QAAQ,KACd,CAAA,EACJA,EAAM,MAAM,IAAK,IACd,EAAAtB,EAAA,IAAA,CAACN,EAAAA,aAAD,CAEU,OACN,OAAQgB,EAAK,MAAQI,EACV,YACX,SAAUS,CACb,EALQb,EAAK,GAKb,CACJ,CACA,CArBI,EAAAY,EAAM,GAqBV,CAEb,CAAC,CACA,CAAA,EACJG,IAAU,EAAAzB,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWP,EAAAA,QAAO,OAAS,SAAAgC,CAAY,CAAA,CACpD,C,EAEf,C"}

package/dist/components/Sidebar/Sidebar.js

@@ -7,29 +7,19 @@ import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/Sidebar/Sidebar.tsx
 function s(e) {
 	let t = [], n;
-	for (let r of e) {
-		if (r.type === "separator") {
-			t.push({
-				kind: "separator",
-				key: r.key
-			}), n = void 0;
-			continue;
-		}
-		if (r.type === "section") {
-			n = {
-				kind: "items",
-				key: r.key,
-				section: r,
-				items: []
-			}, t.push(n);
-			continue;
-		}
-		n || (n = {
-			kind: "items",
-			key: `loose-${r.key}`,
-			items: []
-		}, t.push(n)), n.items.push(r);
-	}
+	for (let r of e) r.type === "separator" ? (t.push({
+		kind: "separator",
+		key: r.key
+	}), n = void 0) : r.type === "section" ? (n = {
+		kind: "items",
+		key: r.key,
+		section: r,
+		items: []
+	}, t.push(n)) : (n || (n = {
+		kind: "items",
+		key: `loose-${r.key}`,
+		items: []
+	}, t.push(n)), n.items.push(r));
 	return t;
 }
 function c(e, n, r) {