ionbase-ui 0.1.0

package/dist/components/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACpE,+DAA+D;IAC/D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,wFAAwF;IACxF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0BAA0B;IAC1B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,iFAkBlB,CAAC"}

package/dist/components/Header.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * Header renders Figma's three Device variants through media queries, not a
+ * prop.
+ *
+ * Device is the one variant axis in the system the browser already knows the
+ * answer to. Every other component takes its variant from the caller because
+ * the caller is the only one who knows; a header is Mobile because the viewport
+ * is narrow, and having React duplicate that judgement is how the two drift
+ * apart. Breakpoints match the Breakpoint collection's container widths.
+ *
+ * A `<header>` element with no explicit role: it is a landmark already when it
+ * is a direct child of body, which is where a page header sits.
+ */
+export const Header = forwardRef(({ brand, center, end, className, children, ...rest }, ref) => (_jsxs("header", { ...rest, ref: ref, className: ['ion-header', className].filter(Boolean).join(' '), children: [brand && _jsx("div", { className: "ion-header__brand", children: brand }), _jsx("div", { className: "ion-header__center", children: center }), children, end && _jsx("div", { className: "ion-header__end", children: end })] })));
+Header.displayName = 'Header';
+//# sourceMappingURL=Header.js.map

package/dist/components/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAY1C;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7D,qBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAE7D,KAAK,IAAI,cAAK,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAO,EAM1D,cAAK,SAAS,EAAC,oBAAoB,YAAE,MAAM,GAAO,EACjD,QAAQ,EACR,GAAG,IAAI,cAAK,SAAS,EAAC,iBAAiB,YAAE,GAAG,GAAO,IAC7C,CACV,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/dist/components/Input.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { AriaTextFieldProps } from 'react-aria';
+export type InputSize = 'sm' | 'md' | 'lg';
+export interface InputProps extends AriaTextFieldProps {
+    /** Matches the Figma `Size` variant: Small, Medium, Large. */
+    size?: InputSize;
+    /** Leading icon. Figma's `Show Leading Icon` + `Leading Icon` swap. */
+    leadingIcon?: React.ReactNode;
+    /** Trailing icon. Figma's `Show Trailing Icon` + `Trailing Icon` swap. */
+    trailingIcon?: React.ReactNode;
+    /** Additional CSS class names, applied to the outermost element. */
+    className?: string;
+}
+/**
+ * Input covers both Figma components on the Input page: the field itself
+ * (`Input`, 80:275) and the label/helper stack around it (`Form Field`,
+ * 80:330). They are separate there because a Figma component cannot make a
+ * slot optional without a boolean; here the wrapper simply isn't rendered when
+ * there is nothing to put in it.
+ *
+ * `useTextField` owns the wiring that is tedious and easy to get subtly wrong:
+ * it generates the ids, points `aria-labelledby` at the label and
+ * `aria-describedby` at whichever of the helper or error message is actually
+ * showing, and sets `aria-invalid`. Hand-rolling that is where form fields
+ * usually lose their accessibility.
+ *
+ * Figma's seven states map to three props and three CSS states. Hover and Focus
+ * are interaction; Filled is the placeholder distinction, which CSS already
+ * expresses; Default, Invalid, Disabled and Read-only are props.
+ */
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Input.d.ts.map

package/dist/components/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAErD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD,8DAA8D;IAC9D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uEAAuE;IACvE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,0EAA0E;IAC1E,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK,qFAoGjB,CAAC"}

package/dist/components/Input.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useTextField, useHover, useFocusRing, mergeProps } from 'react-aria';
+/**
+ * Input covers both Figma components on the Input page: the field itself
+ * (`Input`, 80:275) and the label/helper stack around it (`Form Field`,
+ * 80:330). They are separate there because a Figma component cannot make a
+ * slot optional without a boolean; here the wrapper simply isn't rendered when
+ * there is nothing to put in it.
+ *
+ * `useTextField` owns the wiring that is tedious and easy to get subtly wrong:
+ * it generates the ids, points `aria-labelledby` at the label and
+ * `aria-describedby` at whichever of the helper or error message is actually
+ * showing, and sets `aria-invalid`. Hand-rolling that is where form fields
+ * usually lose their accessibility.
+ *
+ * Figma's seven states map to three props and three CSS states. Hover and Focus
+ * are interaction; Filled is the placeholder distinction, which CSS already
+ * expresses; Default, Invalid, Disabled and Read-only are props.
+ */
+export const Input = forwardRef((props, forwardedRef) => {
+    const { size = 'md', leadingIcon, trailingIcon, className: customClassName, label, description, errorMessage, isDisabled, isReadOnly, isInvalid, } = props;
+    const domRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => domRef.current);
+    const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(props, domRef);
+    const { hoverProps, isHovered } = useHover({ isDisabled });
+    const { focusProps, isFocusVisible } = useFocusRing({ isTextInput: true });
+    const boxClassNames = [
+        'ion-input',
+        size !== 'md' ? `ion-input--${size}` : '',
+        isInvalid ? 'ion-input--invalid' : '',
+        isReadOnly ? 'ion-input--readonly' : '',
+        isDisabled ? 'ion-input--disabled' : '',
+        // With no label or helper there is no wrapper, so the consumer's class
+        // belongs on the box instead.
+        !label && !description && !errorMessage ? customClassName || '' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // `undefined` rather than `false` so the attribute is omitted entirely
+    // instead of rendering data-hovered="false", which would still match an
+    // `[data-hovered]` selector.
+    const stateAttributes = {
+        'data-hovered': isHovered || undefined,
+        'data-focused': isFocusVisible || undefined,
+        'data-invalid': isInvalid || undefined,
+        'data-readonly': isReadOnly || undefined,
+        'data-disabled': isDisabled || undefined,
+    };
+    const box = (_jsxs("div", { ...hoverProps, ...stateAttributes, className: boxClassNames, children: [leadingIcon && (_jsx("span", { className: "ion-input__icon-start", "aria-hidden": "true", children: leadingIcon })), _jsx("input", { ...mergeProps(inputProps, focusProps), ref: domRef, className: "ion-input__field" }), trailingIcon && (_jsx("span", { className: "ion-input__icon-end", "aria-hidden": "true", children: trailingIcon }))] }));
+    // Figma's Error variant recolours the helper text, so the error message
+    // takes the helper's slot rather than stacking below it.
+    const helper = isInvalid && errorMessage ? errorMessage : description;
+    const helperProps = isInvalid && errorMessage ? errorMessageProps : descriptionProps;
+    if (!label && !helper)
+        return box;
+    return (_jsxs("div", { className: [
+            'ion-field',
+            isInvalid ? 'ion-field--error' : '',
+            customClassName || '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: [label && (_jsx("label", { ...labelProps, className: "ion-field__label", children: label })), box, helper && (_jsx("span", { ...helperProps, className: "ion-field__helper", children: helper }))] }));
+});
+Input.displayName = 'Input';
+//# sourceMappingURL=Input.js.map

package/dist/components/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"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"}

package/dist/components/Logo.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+export type LogoSize = 'sm' | 'lg';
+export type LogoWordmark = 'vector' | 'text';
+export interface LogoMarkProps extends Omit<React.SVGProps<SVGSVGElement>, 'ref'> {
+    size?: LogoSize;
+    /** Accessible name for the mark used standalone. Omit when it sits beside
+     *  a visible wordmark, which already carries the name. */
+    label?: string;
+}
+/**
+ * The bare icon glyph, no wordmark — what `Header` actually uses.
+ *
+ * Colour comes from the `.ion-logo__mark` class (`icon/default`), not the SVG
+ * itself, so it themes the same way every other icon in the system does.
+ */
+export declare const LogoMark: React.ForwardRefExoticComponent<LogoMarkProps & React.RefAttributes<SVGSVGElement>>;
+export interface LogoProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Matches Figma's `Size` variant: Small (24px mark) or Large (32px). */
+    size?: LogoSize;
+    /**
+     * Matches Figma's `Type` variant. `vector` is the serif logotype Figma
+     * calls "Logo" — what `Header` uses, immune to font substitution and
+     * visually distinct from the sans-serif UI type everywhere else. `text` is
+     * what Figma calls "Icon": a live `Host Grotesk` run, real and selectable,
+     * at `text/tertiary` rather than the mark's `icon/default`.
+     */
+    wordmark?: LogoWordmark;
+}
+/**
+ * The full lockup: mark + wordmark, matching Figma's `Logo-Ionbase`
+ * (52:21369).
+ *
+ * Figma also has a `Property=Name` axis — wordmark only, no mark — but both
+ * of its variants currently render the placeholder text "raza" rather than
+ * "IonBase", in an unbound raw colour. That is leftover debug content, not a
+ * real asset, so it is not implemented here. Reproducing it would ship a
+ * stranger's name into a design system; extending `LogoMark` alone already
+ * covers "no wordmark" for the cases that are real.
+ */
+export declare const Logo: React.ForwardRefExoticComponent<LogoProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Logo.d.ts.map

package/dist/components/Logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../src/components/Logo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;AACnC,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,CAAC;AAsC7C,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAC7B,KAAK,CACN;IACC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;8DAC0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,qFAiBpB,CAAC;AAGF,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACtE,yEAAyE;IACzE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,IAAI,mFAyChB,CAAC"}

package/dist/components/Logo.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * The mark, exported once from Figma `ionbase_logo` (Small variant,
+ * `figma/export-logo.js`, viewBox 0 0 24 24).
+ *
+ * Figma's Large variant is not an independently drawn asset — its glyph
+ * measures ~4/3 of Small's (19x20 -> 25x27, the same ratio as 24 -> 32), so
+ * one path serves both sizes. The SVG viewBox scales it exactly; Figma's own
+ * two copies differ only by its display rounding.
+ */
+const MARK_PATH = 'M16 12C17.1001 11.9998 18.1695 11.6367 19.0423 10.9671C19.9152 10.2974 20.5428 9.3586 20.828 8.29607C21.1132 7.23355 21.0399 6.10663 20.6197 5.08994C20.1994 4.07324 19.4556 3.22354 18.5034 2.67248C17.5512 2.12142 16.4439 1.89978 15.353 2.04189C14.2621 2.18401 13.2485 2.68194 12.4693 3.45855C11.6901 4.23515 11.1887 5.24707 11.043 6.3375C10.8972 7.42793 11.1151 8.53599 11.663 9.49L8.949 11.298C8.39415 10.6925 7.66637 10.2725 6.8645 10.0949C6.06264 9.91742 5.22557 9.99102 4.467 10.3058C3.70842 10.6205 3.06511 11.1611 2.62445 11.8541C2.18379 12.5472 1.96713 13.3591 2.00392 14.1795C2.0407 15 2.32914 15.7892 2.83006 16.4401C3.33097 17.0909 4.02008 17.5718 4.80377 17.8173C5.58747 18.0629 6.42777 18.0613 7.21053 17.8128C7.99329 17.5642 8.68056 17.0807 9.179 16.428L13.066 18.371C12.9125 19.0849 13.0245 19.8302 13.3812 20.4673C13.7379 21.1045 14.3147 21.5896 15.0035 21.8319C15.6924 22.0742 16.4459 22.0569 17.1229 21.7834C17.7999 21.5098 18.3539 20.9987 18.681 20.3459C19.0081 19.6931 19.0859 18.9434 18.8999 18.2373C18.7138 17.5313 18.2766 16.9173 17.6702 16.5105C17.0638 16.1037 16.3299 15.9321 15.606 16.0277C14.8821 16.1233 14.2179 16.4797 13.738 17.03L9.85 15.087C10.0836 14.259 10.0439 13.3777 9.737 12.574L12.6 10.667C13.5236 11.5258 14.7388 12.0022 16 12Z';
+/**
+ * The outlined wordmark, `Type=Logo` in Figma — a serif logotype rendered as
+ * frozen brand artwork rather than live text, exported once via
+ * `figma/export-logo.js`. Confirmed by rendering it, not assumed: this is a
+ * genuinely different typeface from `wordmark="text"`'s Host Grotesk, not the
+ * same word drawn two ways — a distinct brand mark for contexts where the
+ * lockup needs to read as a wordmark rather than a UI label.
+ *
+ * Small and Large are also genuinely different geometry (81x16 as seven
+ * letter paths vs 112x22 as one unioned path), not one scaled from the
+ * other, so both are kept verbatim rather than derived. `fill="currentColor"`
+ * replaces Figma's baked `#1D2735` (light-mode `icon/default`) so it themes.
+ *
+ * Injected as markup rather than converted to JSX path-by-path: this is
+ * Figma-exported artwork, never hand-edited, so treating it as an opaque
+ * exported asset (the same trust boundary as an SVG file import) is more
+ * honest than pretending it is authored React.
+ */
+const WORDMARK_VECTOR_SM = `<path d="M76.0391 16C74.9732 16 74.0269 15.7607 73.2002 15.2821C72.3736 14.7963 71.7246 14.1111 71.2533 13.2264C70.7892 12.3417 70.5572 11.2976 70.5572 10.0939C70.5572 9.04968 70.7856 8.07801 71.2424 7.17886C71.7065 6.27245 72.3591 5.54008 73.2002 4.98173C74.0414 4.42338 75.0203 4.14421 76.137 4.14421C76.9636 4.14421 77.7468 4.31099 78.4864 4.64455C79.2333 4.9781 79.8388 5.53282 80.3028 6.30871C80.7669 7.07734 80.9953 8.12515 80.9881 9.45213L73.5048 9.58265C73.5048 10.9676 73.755 12.0988 74.2553 12.9762C74.7556 13.8536 75.6113 14.2923 76.8223 14.2923C77.3516 14.2923 77.9389 14.1546 78.5843 13.879C79.2369 13.5962 79.7953 13.1575 80.2593 12.5629L81.1077 13.3352C80.6147 14.053 80.0708 14.6041 79.4762 14.9885C78.8889 15.3728 78.2943 15.6374 77.6924 15.7825C77.0978 15.9275 76.5467 16 76.0391 16ZM73.6136 8.23392H78.2471C78.2326 7.64656 78.1456 7.14985 77.9861 6.74378C77.8265 6.33046 77.5981 6.01866 77.3008 5.80837C77.0108 5.59083 76.6518 5.48207 76.224 5.48207C75.4916 5.48207 74.9079 5.72136 74.4728 6.19994C74.0378 6.67852 73.7513 7.35651 73.6136 8.23392Z" fill="currentColor"/><path d="M65.0279 16C64.3463 16 63.7081 15.913 63.1135 15.739C62.5189 15.5649 62.0476 15.351 61.6996 15.0972L61.7539 15.7933H60.3073L60.2094 11.9647H61.4059C61.4639 12.7261 61.8156 13.3642 62.4609 13.879C63.1135 14.3866 63.8967 14.6404 64.8103 14.6404C65.2382 14.6404 65.6515 14.5353 66.0503 14.325C66.4491 14.1074 66.6485 13.7702 66.6485 13.3134C66.6413 12.8203 66.402 12.4505 65.9307 12.204C65.4666 11.9502 64.8393 11.6674 64.049 11.3556C63.4399 11.1163 62.8307 10.8589 62.2216 10.5833C61.6198 10.3078 61.1195 9.94158 60.7206 9.48476C60.3218 9.02068 60.1224 8.39707 60.1224 7.61393C60.1224 7.09184 60.2566 6.56613 60.5249 6.03679C60.7931 5.50019 61.2246 5.05062 61.8192 4.68805C62.4138 4.32549 63.2006 4.14421 64.1795 4.14421C64.5856 4.14421 65.0388 4.20947 65.5391 4.33999C66.0467 4.47052 66.4963 4.6808 66.8878 4.97085L66.8769 4.25298H68.3127V8.19041H67.1054C67.0401 7.67557 66.8769 7.21511 66.6159 6.80904C66.3621 6.39572 66.0249 6.06942 65.6044 5.83013C65.191 5.58358 64.7016 5.46031 64.136 5.46031C63.6501 5.46031 63.2404 5.57633 62.9069 5.80837C62.5806 6.04041 62.4174 6.37397 62.4174 6.80904C62.4174 7.19336 62.5443 7.50516 62.7981 7.74446C63.0519 7.9765 63.3927 8.1759 63.8205 8.34268C64.2556 8.50221 64.7306 8.67624 65.2454 8.86477C65.9343 9.11857 66.5615 9.40499 67.1271 9.72405C67.7 10.0359 68.1568 10.4238 68.4976 10.8879C68.8457 11.352 69.0197 11.9284 69.0197 12.6173C69.0197 13.3787 68.8275 14.0132 68.4432 14.5207C68.0589 15.0211 67.5586 15.3945 66.9422 15.6411C66.3331 15.8804 65.695 16 65.0279 16Z" fill="currentColor"/><path d="M54.8591 15.6411C54.8229 15.4163 54.7975 15.2241 54.783 15.0646C54.7757 14.9051 54.7649 14.7274 54.7504 14.5316C54.2428 15.0392 53.7025 15.409 53.1297 15.6411C52.5641 15.8804 51.9767 16 51.3676 16C50.3597 16 49.5838 15.7281 49.04 15.1842C48.5034 14.6331 48.2351 13.9515 48.2351 13.1394C48.2351 12.436 48.4236 11.8342 48.8007 11.3338C49.185 10.8335 49.6926 10.4238 50.3235 10.1047C50.9543 9.77843 51.6468 9.53551 52.4009 9.37599C53.1551 9.20921 53.902 9.11857 54.6416 9.10407V7.8641C54.6416 7.43628 54.5944 7.04109 54.5002 6.67852C54.4059 6.31596 54.2319 6.02591 53.9781 5.80837C53.7243 5.59083 53.3509 5.48569 52.8578 5.49294C52.5242 5.49294 52.1943 5.56183 51.868 5.6996C51.5417 5.83013 51.2806 6.02954 51.0848 6.29783C51.1936 6.42835 51.2661 6.57338 51.3024 6.73291C51.3386 6.88518 51.3568 7.01933 51.3568 7.13535C51.3568 7.3964 51.2516 7.67194 51.0413 7.96199C50.8383 8.24479 50.4975 8.38257 50.0189 8.37531C49.6201 8.36081 49.3119 8.21941 49.0944 7.95112C48.8841 7.68282 48.7789 7.36739 48.7789 7.00483C48.7789 6.44648 48.982 5.9534 49.388 5.52557C49.8014 5.0905 50.3561 4.75332 51.0522 4.51402C51.7483 4.26748 52.5278 4.14421 53.3907 4.14421C54.6742 4.14421 55.6568 4.48139 56.3384 5.15576C57.02 5.82287 57.3572 6.88881 57.3499 8.35356C57.3499 8.87565 57.3463 9.35061 57.339 9.77843C57.3318 10.199 57.3245 10.6196 57.3173 11.0401C57.3173 11.4607 57.3173 11.9357 57.3173 12.465C57.3173 12.6826 57.31 12.9581 57.2955 13.2917C57.2883 13.6252 57.2665 13.9515 57.2303 14.2706C57.4841 14.2488 57.7487 14.2343 58.0243 14.2271C58.2998 14.2126 58.5355 14.2017 58.7313 14.1944V15.6411H54.8591ZM54.6307 10.4093C54.0289 10.4455 53.4524 10.5543 52.9013 10.7356C52.3502 10.9169 51.9006 11.1779 51.5525 11.5187C51.2045 11.8523 51.0377 12.2801 51.0522 12.8022C51.0667 13.259 51.2154 13.5926 51.4982 13.8029C51.7882 14.0132 52.1145 14.1183 52.4771 14.1183C52.8977 14.1183 53.2856 14.0313 53.6409 13.8573C53.9962 13.6832 54.3262 13.4439 54.6307 13.1394C54.6307 12.9871 54.6271 12.8312 54.6198 12.6717C54.6198 12.5122 54.6198 12.349 54.6198 12.1822C54.6198 11.9792 54.6198 11.7218 54.6198 11.41C54.6271 11.0909 54.6307 10.7574 54.6307 10.4093Z" fill="currentColor"/><path d="M34.2668 15.6411V14.412C34.6802 14.3975 34.9992 14.3286 35.224 14.2053C35.4488 14.0748 35.6047 13.85 35.6917 13.531C35.786 13.2119 35.8331 12.7587 35.8331 12.1713V3.36107C35.8331 2.96225 35.8404 2.59244 35.8549 2.25163C35.8694 1.90357 35.8875 1.63528 35.9093 1.44674C35.67 1.45399 35.3835 1.46487 35.05 1.47937C34.7237 1.49388 34.4626 1.50838 34.2668 1.52288V0.0436255C35.224 0.0291236 36.1812 0.0218727 37.1383 0.0218727C38.1028 0.0146217 39.0744 0.00737034 40.0533 0.000118217C41.8154 -0.00713273 43.204 0.319174 44.2192 0.979038C45.2416 1.63165 45.7274 2.63232 45.6767 3.98106C45.6477 4.64817 45.3576 5.28991 44.8065 5.90626C44.2554 6.52262 43.4252 6.96132 42.3157 7.22236V7.25499C43.8457 7.40727 44.9806 7.85685 45.7202 8.60373C46.4671 9.35061 46.8405 10.2244 46.8405 11.2251C46.8405 12.6463 46.3329 13.7376 45.3177 14.499C44.3026 15.2604 43.0264 15.6411 41.4891 15.6411H34.2668ZM38.5523 14.2923C38.8061 14.2996 39.0672 14.3068 39.3355 14.3141C39.6038 14.3141 39.8648 14.3141 40.1186 14.3141C40.3724 14.3068 40.5899 14.2996 40.7712 14.2923C41.7574 14.2561 42.5079 13.9697 43.0227 13.4331C43.5376 12.8892 43.795 12.1532 43.795 11.2251C43.795 10.4709 43.6391 9.87995 43.3273 9.45212C43.0227 9.01705 42.6275 8.7125 42.1417 8.53847C41.6559 8.35719 41.141 8.26654 40.5972 8.26654C40.1984 8.26654 39.8503 8.27017 39.553 8.27742C39.2557 8.27742 38.9475 8.2883 38.6285 8.31005V12.3998C38.6285 12.7986 38.6212 13.1684 38.6067 13.5092C38.5922 13.8428 38.5741 14.1038 38.5523 14.2923ZM38.6285 6.96132L39.9446 6.92869C40.6407 6.91419 41.1918 6.76191 41.5979 6.47186C42.0112 6.18181 42.3049 5.80474 42.4789 5.34066C42.6529 4.87658 42.7363 4.369 42.7291 3.8179C42.7291 3.15804 42.5913 2.64683 42.3157 2.28426C42.0402 1.9217 41.6958 1.66791 41.2824 1.52288C40.8764 1.37786 40.4667 1.30897 40.0533 1.31622C39.5748 1.31622 39.2158 1.43224 38.9765 1.66428C38.7445 1.89632 38.6285 2.43654 38.6285 3.28493V6.96132Z" fill="currentColor"/><path d="M20.2035 15.6411V14.4555C20.6314 14.4555 20.9359 14.3612 21.1172 14.1727C21.2985 13.9842 21.4109 13.7231 21.4544 13.3896C21.4979 13.056 21.5196 12.6681 21.5196 12.2257L21.5305 8.03813C21.5305 7.77709 21.5341 7.49791 21.5414 7.20061C21.5559 6.90331 21.5813 6.59876 21.6175 6.28695C21.371 6.30146 21.0954 6.31596 20.7909 6.33046C20.4863 6.34496 20.2398 6.35947 20.0513 6.37397V4.92734C20.7256 4.92734 21.2731 4.89471 21.6937 4.82945C22.1215 4.75694 22.4551 4.67355 22.6943 4.57929C22.9336 4.47777 23.104 4.37988 23.2056 4.28561H24.1518C24.1954 4.53215 24.2135 4.71706 24.2062 4.84033C24.199 4.9636 24.2207 5.17389 24.2715 5.47119C24.7211 5.10138 25.2649 4.78957 25.903 4.53578C26.5411 4.27473 27.114 4.14421 27.6216 4.14421C28.9558 4.14421 29.913 4.54303 30.4931 5.34067C31.0804 6.13105 31.3741 7.38189 31.3741 9.09319V12.465C31.3741 12.7043 31.3668 12.9907 31.3523 13.3243C31.3451 13.6506 31.3197 13.966 31.2762 14.2706C31.5227 14.2488 31.7765 14.2343 32.0376 14.2271C32.3059 14.2126 32.5343 14.2053 32.7228 14.2053V15.6411H27.3061V14.4555C27.9515 14.4555 28.3358 14.2488 28.4591 13.8355C28.5824 13.4222 28.644 12.8856 28.644 12.2257L28.6222 9.08231C28.6222 8.00913 28.4627 7.20786 28.1437 6.67852C27.8246 6.14918 27.2989 5.88814 26.5665 5.89539C26.1459 5.89539 25.7254 5.99691 25.3048 6.19994C24.8915 6.39572 24.547 6.63502 24.2715 6.91781C24.2715 7.09909 24.2715 7.28763 24.2715 7.48341C24.2715 7.67194 24.2715 7.8641 24.2715 8.05988V12.465C24.2715 12.7043 24.2642 12.9907 24.2497 13.3243C24.2352 13.6506 24.2099 13.966 24.1736 14.2706C24.4056 14.2488 24.6558 14.2343 24.9241 14.2271C25.1996 14.2126 25.4281 14.2053 25.6093 14.2053V15.6411H20.2035Z" fill="currentColor"/><path d="M12.9404 16C11.8817 16 10.9246 15.768 10.0689 15.3039C9.21327 14.8326 8.53528 14.1727 8.03494 13.3243C7.5346 12.4686 7.28444 11.4716 7.28444 10.3332C7.28444 9.11494 7.5346 8.04176 8.03494 7.1136C8.54253 6.18544 9.22052 5.46031 10.0689 4.93822C10.9246 4.40888 11.8672 4.14421 12.8969 4.14421C13.9483 4.14421 14.8982 4.37988 15.7466 4.85121C16.595 5.32254 17.2658 5.98603 17.7589 6.84168C18.2592 7.69732 18.5094 8.70162 18.5094 9.85457C18.5094 11.0655 18.2701 12.1351 17.7915 13.0632C17.3129 13.9842 16.653 14.7057 15.8119 15.2277C14.978 15.7426 14.0208 16 12.9404 16ZM13.0601 14.6404C13.7127 14.6404 14.2166 14.4337 14.5719 14.0204C14.9345 13.5998 15.1883 13.0705 15.3333 12.4324C15.4783 11.787 15.5509 11.1235 15.5509 10.4419C15.5509 9.65153 15.4638 8.87203 15.2898 8.10339C15.123 7.33476 14.8439 6.70028 14.4523 6.19994C14.0607 5.6996 13.5314 5.45669 12.8643 5.47119C12.2189 5.47844 11.7041 5.69235 11.3198 6.11292C10.9354 6.52625 10.6563 7.05559 10.4822 7.70095C10.3155 8.33906 10.2321 9.00617 10.2321 9.70229C10.2321 10.5144 10.3263 11.3012 10.5149 12.0626C10.7107 12.824 11.0152 13.4476 11.4285 13.9334C11.8418 14.4192 12.3857 14.6549 13.0601 14.6404Z" fill="currentColor"/><path d="M5.9279 1.27272C5.52183 1.29447 5.20278 1.37061 4.97074 1.50113C4.74595 1.62441 4.58642 1.84194 4.49215 2.15375C4.40514 2.4583 4.36163 2.90063 4.36163 3.48073V12.3236C4.36163 12.7224 4.35438 13.0959 4.33988 13.4439C4.32537 13.7848 4.30725 14.0494 4.28549 14.238C4.53203 14.2235 4.81846 14.209 5.14477 14.1944C5.47832 14.1799 5.73937 14.1727 5.9279 14.1727V15.6411H3.8147e-06V14.412C0.413325 14.3975 0.73238 14.3286 0.957169 14.2053C1.18196 14.0748 1.33786 13.8536 1.42487 13.5418C1.51914 13.23 1.56627 12.7877 1.56627 12.2149V3.31757C1.56627 2.94776 1.57352 2.59245 1.58803 2.25164C1.60253 1.91083 1.62066 1.64253 1.64241 1.44675C1.40312 1.454 1.1167 1.46488 0.783139 1.47938C0.456833 1.49388 0.195788 1.50839 3.8147e-06 1.52289V0.0436325H5.9279V1.27272Z" fill="currentColor"/>`;
+/** Same construction as the Small wordmark, exported from Figma's Large
+ *  variant (single unioned path, not seven separate letters). */
+const WORDMARK_VECTOR_LG = `<path fill-rule="evenodd" clip-rule="evenodd" d="M17.7334 5.6984C19.179 5.69843 20.4849 6.02303 21.6514 6.67106C22.8179 7.31914 23.741 8.23087 24.4189 9.40739C25.1068 10.5838 25.4501 11.9648 25.4502 13.55C25.4502 15.215 25.1209 16.6859 24.4629 17.9621C23.8048 19.2283 22.8978 20.2208 21.7412 20.9386C20.5947 21.6465 19.2785 22.0002 17.793 22.0002C16.3373 22.0001 15.0212 21.6812 13.8447 21.0431C12.6683 20.3951 11.7358 19.4879 11.0479 18.3215C10.3599 17.1449 10.0166 15.7735 10.0166 14.2082C10.0166 12.5332 10.3599 11.0576 11.0479 9.78141C11.7458 8.50519 12.6782 7.50808 13.8447 6.7902C15.0212 6.06238 16.3176 5.6984 17.7334 5.6984ZM17.6885 7.5236C16.8011 7.53357 16.0929 7.82715 15.5645 8.40544C15.036 8.97373 14.6524 9.70171 14.4131 10.589C14.1838 11.4664 14.0693 12.3838 14.0693 13.341C14.0693 14.4576 14.1988 15.5393 14.458 16.5861C14.7272 17.6328 15.1457 18.4904 15.7139 19.1584C16.2822 19.8264 17.0308 20.151 17.958 20.131C18.855 20.1309 19.5477 19.8466 20.0361 19.2785C20.5346 18.7002 20.8836 17.9722 21.083 17.0949C21.2824 16.2075 21.3828 15.2948 21.3828 14.3576C21.3828 13.271 21.2627 12.1994 21.0234 11.1427C20.7941 10.086 20.4104 9.21347 19.8721 8.52555C19.3337 7.83761 18.6057 7.50368 17.6885 7.5236Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M73.4121 5.6984C75.1766 5.6984 76.5276 6.16208 77.4648 7.08903C78.4021 8.00631 78.8664 9.47245 78.8564 11.4865C78.8564 12.2043 78.8508 12.8573 78.8408 13.4455C78.8308 14.0238 78.8215 14.6025 78.8115 15.1808V17.1398C78.8115 17.4389 78.8012 17.8179 78.7812 18.2765C78.7713 18.7351 78.7412 19.1836 78.6914 19.6222C79.0403 19.5923 79.4044 19.5726 79.7832 19.5627C80.1621 19.5427 80.4867 19.5277 80.7559 19.5177V21.507H75.4316C75.3818 21.1979 75.3461 20.9334 75.3262 20.714C75.3162 20.4948 75.3022 20.2506 75.2822 19.9816C74.5844 20.6795 73.8413 21.1879 73.0537 21.507C72.2761 21.836 71.4683 22.0001 70.6309 22.0002C69.245 22.0002 68.1775 21.6268 67.4297 20.8791C66.6919 20.1213 66.3232 19.1833 66.3232 18.0666C66.3233 17.0996 66.5822 16.272 67.1006 15.5841C67.6289 14.8963 68.3271 14.3334 69.1943 13.8947C70.0618 13.446 71.0148 13.1121 72.0518 12.8927C73.0885 12.6635 74.1151 12.5387 75.1318 12.5187V10.8136C75.1318 10.2255 75.0671 9.68218 74.9375 9.18376C74.8079 8.68523 74.5687 8.2856 74.2197 7.98649C73.8708 7.68757 73.3574 7.54296 72.6797 7.5529C72.221 7.5529 71.767 7.64764 71.3184 7.83708C70.8697 8.01655 70.5104 8.29142 70.2412 8.66032C70.3907 8.83976 70.4912 9.03866 70.541 9.25797C70.5909 9.46735 70.6152 9.65216 70.6152 9.81169C70.6152 10.1705 70.4707 10.5497 70.1816 10.9484C69.9025 11.337 69.4341 11.5267 68.7764 11.5168C68.228 11.4968 67.804 11.3017 67.5049 10.9328C67.2158 10.5639 67.0713 10.1304 67.0713 9.632C67.0713 8.86432 67.3499 8.18605 67.9082 7.59782C68.4765 6.99959 69.2401 6.53622 70.1973 6.20719C71.1543 5.8683 72.2259 5.69842 73.4121 5.6984ZM75.1172 14.3127C74.2896 14.3625 73.497 14.5126 72.7393 14.7619C71.9815 15.0111 71.3633 15.3704 70.8848 15.839C70.4063 16.2976 70.1773 16.8859 70.1973 17.6037C70.2173 18.2316 70.4209 18.6906 70.8096 18.9797C71.2084 19.2688 71.6577 19.4132 72.1562 19.4132C72.7343 19.4132 73.2674 19.293 73.7559 19.0539C74.2444 18.8146 74.6984 18.4853 75.1172 18.0666C75.1172 17.8574 75.1125 17.6432 75.1025 17.424V15.6886C75.1125 15.2501 75.1172 14.7911 75.1172 14.3127Z" fill="currentColor"/><path d="M88.2471 5.6984C88.8053 5.69843 89.4284 5.7885 90.1162 5.96794C90.8141 6.14739 91.4323 6.43635 91.9707 6.83512L91.9561 5.84782H93.9297V11.2619H92.2695C92.1798 10.5541 91.9556 9.92074 91.5967 9.36247C91.2477 8.79431 90.7842 8.34573 90.2061 8.01676C89.6377 7.67777 88.9642 7.50797 88.1865 7.50797C87.5188 7.50805 86.9556 7.66761 86.4971 7.98649C86.0485 8.30549 85.8243 8.76438 85.8242 9.36247C85.8242 9.89087 85.9987 10.3196 86.3477 10.6486C86.6966 10.9676 87.1648 11.2425 87.7529 11.4718C88.3512 11.6912 89.005 11.9304 89.7129 12.1896C90.6599 12.5385 91.5222 12.9326 92.2998 13.3713C93.0874 13.8 93.716 14.3328 94.1846 14.9709C94.6631 15.6089 94.9023 16.4017 94.9023 17.3488C94.9023 18.3956 94.6377 19.2681 94.1094 19.966C93.581 20.6539 92.8933 21.168 92.0459 21.507C91.2084 21.836 90.3304 22.0002 89.4131 22.0002C88.476 22.0001 87.5987 21.881 86.7812 21.6418C85.9637 21.4025 85.3155 21.1079 84.8369 20.759L84.9121 21.716H82.9229L82.7881 16.4513H84.4336C84.5134 17.4982 84.9964 18.3762 85.8838 19.0841C86.7811 19.782 87.858 20.131 89.1143 20.131C89.7025 20.131 90.271 19.9866 90.8193 19.6974C91.3677 19.3983 91.6416 18.934 91.6416 18.3058C91.6315 17.6281 91.3022 17.1194 90.6543 16.7804C90.0163 16.4315 89.1539 16.043 88.0674 15.6144C87.2299 15.2854 86.3922 14.9308 85.5547 14.5519C84.7274 14.1731 84.0395 13.6701 83.4912 13.0422C82.9429 12.4041 82.668 11.5465 82.668 10.4699C82.668 9.75203 82.8528 9.02878 83.2217 8.30094C83.5905 7.56323 84.1836 6.94494 85.001 6.44645C85.8186 5.94793 86.9011 5.6984 88.2471 5.6984Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M104.688 5.6984C105.825 5.69841 106.902 5.92825 107.919 6.38688C108.946 6.84552 109.778 7.60823 110.416 8.67497C111.054 9.73184 111.368 11.1726 111.358 12.9972L101.069 13.1769C101.069 15.0811 101.414 16.6366 102.102 17.8429C102.79 19.0491 103.966 19.6525 105.631 19.6525C106.359 19.6525 107.166 19.463 108.054 19.0841C108.951 18.6953 109.718 18.092 110.356 17.2746L111.523 18.3361C110.846 19.3231 110.098 20.0811 109.28 20.6095C108.473 21.138 107.655 21.5019 106.827 21.7013C106.01 21.9007 105.252 22.0002 104.554 22.0002C103.088 22.0001 101.787 21.6709 100.65 21.0129C99.5139 20.3449 98.6217 19.4029 97.9736 18.1867C97.3355 16.9703 97.0166 15.5342 97.0166 13.8791C97.0166 12.4435 97.33 11.1075 97.958 9.87126C98.5961 8.62495 99.4938 7.6175 100.65 6.84977C101.807 6.08214 103.153 5.6984 104.688 5.6984ZM104.808 7.53825C103.801 7.53835 102.999 7.8676 102.4 8.52555C101.802 9.1836 101.408 10.116 101.219 11.3224H107.59C107.57 10.5148 107.45 9.83097 107.23 9.27262C107.011 8.70459 106.698 8.27555 106.289 7.98649C105.89 7.68738 105.396 7.53825 104.808 7.53825Z" fill="currentColor"/><path d="M8.15039 1.75016C7.59229 1.7801 7.15392 1.88521 6.83496 2.06462C6.52588 2.23411 6.30637 2.53335 6.17676 2.96208C6.05717 3.38082 5.99707 3.98887 5.99707 4.78629V16.9455C5.99707 17.4937 5.98771 18.0071 5.96777 18.4855C5.94784 18.954 5.92248 19.3181 5.89258 19.5773C6.23156 19.5574 6.62557 19.5377 7.07422 19.5177C7.5325 19.4978 7.89123 19.4875 8.15039 19.4875V21.507H0V19.8166C0.568313 19.7966 1.00732 19.7019 1.31641 19.5324C1.62531 19.3529 1.83938 19.0489 1.95898 18.6203C2.08858 18.1916 2.1533 17.5836 2.15332 16.7961V4.56169C2.15332 4.0533 2.16366 3.56439 2.18359 3.09587C2.20353 2.62747 2.22889 2.25853 2.25879 1.98942C1.92985 1.99939 1.53564 2.01441 1.07715 2.03434C0.628493 2.05428 0.2692 2.07397 0 2.09391V0.0607092H8.15039V1.75016Z" fill="currentColor"/><path d="M37.9795 5.6984C39.8141 5.6984 41.1301 6.24716 41.9277 7.34391C42.7353 8.43064 43.1396 10.1502 43.1396 12.5031V17.1398C43.1396 17.4688 43.1293 17.8628 43.1094 18.3215C43.0994 18.77 43.0647 19.2036 43.0049 19.6222C43.3438 19.5923 43.6929 19.5726 44.0518 19.5627C44.4206 19.5427 44.7349 19.5324 44.9941 19.5324V21.507H37.5459V19.8761C38.433 19.8761 38.9612 19.5926 39.1309 19.0246C39.3004 18.4563 39.3857 17.718 39.3857 16.8107L39.3555 12.4884C39.3555 11.013 39.1359 9.91159 38.6973 9.18376C38.2586 8.45599 37.5361 8.09672 36.5293 8.10661C35.951 8.10661 35.3722 8.24638 34.7939 8.52555C34.2258 8.79471 33.7519 9.12313 33.373 9.51188V17.1398C33.373 17.4688 33.3637 17.8628 33.3438 18.3215C33.3238 18.77 33.2881 19.2036 33.2383 19.6222C33.5573 19.5923 33.9017 19.5726 34.2705 19.5627C34.6494 19.5427 34.9636 19.5324 35.2129 19.5324V21.507H27.7803V19.8761C28.3683 19.8761 28.7869 19.7466 29.0361 19.4875C29.2853 19.2283 29.4402 18.8697 29.5 18.4113C29.5598 17.9527 29.5898 17.4189 29.5898 16.8107L29.6045 11.0529C29.6045 10.6941 29.6092 10.3102 29.6191 9.90153C29.6391 9.49274 29.6738 9.07342 29.7236 8.64469C29.3849 8.66462 29.0063 8.68434 28.5879 8.70426C28.1691 8.72421 27.8295 8.74487 27.5703 8.76481V6.77555C28.4976 6.77555 29.2508 6.73052 29.8291 6.64079C30.4172 6.54109 30.8761 6.42663 31.2051 6.29704C31.5339 6.15751 31.7677 6.0223 31.9072 5.89274H33.209C33.2688 6.23152 33.2931 6.48594 33.2832 6.65544C33.2732 6.82493 33.3033 7.11481 33.373 7.5236C33.9911 7.01521 34.739 6.58639 35.6162 6.23747C36.4935 5.87856 37.2816 5.69843 37.9795 5.6984Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M55.0732 0.000162315C57.4961 -0.00980773 59.4059 0.439529 60.8018 1.34684C62.2072 2.24411 62.8753 3.61971 62.8057 5.47379C62.7658 6.39098 62.367 7.27385 61.6094 8.12126C60.8517 8.96866 59.7098 9.57188 58.1846 9.93083V9.97575C60.288 10.1852 61.8483 10.8034 62.8652 11.8302C63.8922 12.8572 64.4053 14.0588 64.4053 15.4347C64.4053 17.3889 63.7074 18.8898 62.3115 19.9367C60.9158 20.9833 59.1613 21.5069 57.0479 21.507H47.1172V19.8166C47.6852 19.7966 48.1236 19.7018 48.4326 19.5324C48.7417 19.3529 48.9565 19.0442 49.0762 18.6056C49.2058 18.1669 49.2705 17.5431 49.2705 16.7355V4.62223C49.2705 4.07386 49.2808 3.56448 49.3008 3.09587C49.3207 2.61751 49.3451 2.24857 49.375 1.98942C49.046 1.99939 48.6519 2.01441 48.1934 2.03434C47.745 2.05427 47.3863 2.07398 47.1172 2.09391V0.0607092C48.4332 0.0407716 49.7494 0.0304358 51.0654 0.0304358C52.3914 0.0204665 53.7273 0.0101332 55.0732 0.000162315ZM55.8213 11.3664C55.2731 11.3664 54.7945 11.372 54.3857 11.382C53.977 11.382 53.5529 11.397 53.1143 11.4269V17.05C53.1143 17.5983 53.1039 18.1068 53.084 18.5754C53.064 19.034 53.0397 19.3933 53.0098 19.6525C53.3585 19.6625 53.7173 19.6718 54.0859 19.6818H55.1631C55.5121 19.6718 55.8113 19.6625 56.0605 19.6525C57.4165 19.6026 58.4484 19.2086 59.1562 18.4709C59.8642 17.7231 60.2178 16.711 60.2178 15.4347C60.2178 14.398 60.0038 13.5855 59.5752 12.9972C59.1565 12.4219 58.5573 12.0187 57.7773 11.7877C56.9975 11.5479 56.062 11.4288 54.9707 11.4302C54.5872 11.4302 54.207 11.4223 53.8301 11.4065V11.3664H55.8213Z" fill="currentColor"/>`;
+/**
+ * The bare icon glyph, no wordmark — what `Header` actually uses.
+ *
+ * Colour comes from the `.ion-logo__mark` class (`icon/default`), not the SVG
+ * itself, so it themes the same way every other icon in the system does.
+ */
+export const LogoMark = forwardRef(({ size = 'sm', label, className, ...rest }, ref) => (_jsx("svg", { ref: ref, viewBox: "0 0 24 24", width: size === 'lg' ? 32 : 24, height: size === 'lg' ? 32 : 24, fill: "none", className: ['ion-logo__mark', className].filter(Boolean).join(' '), ...(label
+        ? { role: 'img', 'aria-label': label }
+        : { 'aria-hidden': true, focusable: false }), ...rest, children: _jsx("path", { d: MARK_PATH, fill: "currentColor" }) })));
+LogoMark.displayName = 'LogoMark';
+/**
+ * The full lockup: mark + wordmark, matching Figma's `Logo-Ionbase`
+ * (52:21369).
+ *
+ * Figma also has a `Property=Name` axis — wordmark only, no mark — but both
+ * of its variants currently render the placeholder text "raza" rather than
+ * "IonBase", in an unbound raw colour. That is leftover debug content, not a
+ * real asset, so it is not implemented here. Reproducing it would ship a
+ * stranger's name into a design system; extending `LogoMark` alone already
+ * covers "no wordmark" for the cases that are real.
+ */
+export const Logo = forwardRef(({ size = 'sm', wordmark = 'vector', className, ...rest }, ref) => {
+    const isLarge = size === 'lg';
+    const wordmarkVectorSvg = isLarge ? WORDMARK_VECTOR_LG : WORDMARK_VECTOR_SM;
+    // Figma's own measured group size per variant.
+    const wordmarkVectorDims = isLarge
+        ? { width: 112, height: 22 }
+        : { width: 81, height: 16 };
+    return (_jsxs("span", { ...rest, ref: ref, className: ['ion-logo', isLarge ? 'ion-logo--lg' : '', className]
+            .filter(Boolean)
+            .join(' '), ...(wordmark === 'vector'
+            ? { role: 'img', 'aria-label': 'IonBase' }
+            : {}), children: [_jsx(LogoMark, { size: size }), wordmark === 'vector' ? (_jsx("svg", { viewBox: isLarge ? '0 0 112 22' : '0 0 82 16', ...wordmarkVectorDims, fill: "none", "aria-hidden": "true", focusable: false, className: "ion-logo__wordmark ion-logo__wordmark--vector", dangerouslySetInnerHTML: { __html: wordmarkVectorSvg } })) : (_jsx("span", { className: "ion-logo__wordmark ion-logo__wordmark--text", children: "IonBase" }))] }));
+});
+Logo.displayName = 'Logo';
+//# sourceMappingURL=Logo.js.map

package/dist/components/Logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.js","sourceRoot":"","sources":["../../src/components/Logo.tsx"],"names":[],"mappings":"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"}

package/dist/components/Menu.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
+    children?: React.ReactNode;
+}
+/**
+ * Menu is the list surface, not a popover.
+ *
+ * Figma models the list alone — there is no trigger, anchor or open state in
+ * the design — so this renders the surface and nothing else. Positioning it
+ * against a button is the caller's job until Figma has a component that says
+ * how. Building a popover here would be inventing design, and it would be the
+ * hard half to unpick later.
+ *
+ * `role="menu"` is deliberately NOT set. A real ARIA menu owes the user
+ * roving-tabindex arrow navigation, typeahead and focus containment; claiming
+ * the role without them is worse for a screen-reader user than an honest list,
+ * because it promises interactions that are not there. When the popover exists,
+ * the role comes with it.
+ */
+export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;
+export interface MenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /** Figma's `Selected` / `Selected-hover` states. Shows the trailing check. */
+    isSelected?: boolean;
+    /** Figma's `Show Leading Icon` + `Leading Icon` swap. */
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+}
+export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Menu.d.ts.map

package/dist/components/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI,oFAUhB,CAAC;AAIF,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,CACP;IACC,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yDAAyD;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAgBD,eAAO,MAAM,QAAQ,yFA6BpB,CAAC"}

package/dist/components/Menu.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * Menu is the list surface, not a popover.
+ *
+ * Figma models the list alone — there is no trigger, anchor or open state in
+ * the design — so this renders the surface and nothing else. Positioning it
+ * against a button is the caller's job until Figma has a component that says
+ * how. Building a popover here would be inventing design, and it would be the
+ * hard half to unpick later.
+ *
+ * `role="menu"` is deliberately NOT set. A real ARIA menu owes the user
+ * roving-tabindex arrow navigation, typeahead and focus containment; claiming
+ * the role without them is worse for a screen-reader user than an honest list,
+ * because it promises interactions that are not there. When the popover exists,
+ * the role comes with it.
+ */
+export const Menu = forwardRef(({ className, children, ...rest }, ref) => (_jsx("ul", { ...rest, ref: ref, className: ['ion-menu', className].filter(Boolean).join(' '), children: children })));
+Menu.displayName = 'Menu';
+/** Figma's trailing check. Always occupies its slot so rows never reflow as the
+ *  selection moves; only its visibility changes. */
+const Check = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m5 13 4 4L19 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+export const MenuItem = forwardRef(({ isSelected, icon, className, children, disabled, ...rest }, ref) => (_jsx("li", { children: _jsxs("button", { ...rest, ref: ref, type: "button", disabled: disabled, "aria-pressed": isSelected, className: [
+            'ion-menu__item',
+            isSelected ? 'ion-menu__item--selected' : '',
+            className || '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: [icon && (_jsx("span", { className: "ion-menu__icon", "aria-hidden": "true", children: icon })), _jsx("span", { className: "ion-menu__label", children: children }), _jsx("span", { className: "ion-menu__check", "aria-hidden": "true", children: _jsx(Check, {}) })] }) })));
+MenuItem.displayName = 'MenuItem';
+//# sourceMappingURL=Menu.js.map

package/dist/components/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAM1C;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACzC,gBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAE3D,QAAQ,GACN,CACN,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAa1B;oDACoD;AACpD,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,CAClB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YACvE,eACE,CAAC,EAAC,gBAAgB,EAClB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACrE,uBACE,qBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,kBACJ,UAAU,EACxB,SAAS,EAAE;YACT,gBAAgB;YAChB,UAAU,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE;YAC5C,SAAS,IAAI,EAAE;SAChB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,aAEX,IAAI,IAAI,CACP,eAAM,SAAS,EAAC,gBAAgB,iBAAa,MAAM,YAChD,IAAI,GACA,CACR,EACD,eAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EACnD,eAAM,SAAS,EAAC,iBAAiB,iBAAa,MAAM,YAClD,KAAC,KAAK,KAAG,GACJ,IACA,GACN,CACN,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/components/NavItem.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+interface NavItemOwnProps {
+    /** Figma's `Icon` slot — an optional leading icon. */
+    icon?: React.ReactNode;
+    /** Figma's `Show Chevron`. Set on a nav item that opens a menu, not a plain link. */
+    showChevron?: boolean;
+    isDisabled?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+export type NavItemProps = NavItemOwnProps & (({
+    href: string;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof NavItemOwnProps>) | ({
+    href?: undefined;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof NavItemOwnProps | 'type'>));
+/**
+ * Nav Item renders an `<a>` when given `href`, a `<button>` otherwise —
+ * chosen by what the caller is actually building, the same judgment call
+ * Menu and Select make. A primary nav bar is links; a nav item with
+ * `showChevron` that opens a menu (no `href` of its own) is a button.
+ *
+ * Interaction state comes from React Aria rather than CSS pseudo-classes,
+ * matching Button: `useHover` is pointer-aware so a tap does not stay
+ * "hovered" until the next tap elsewhere, and `useFocusRing` shows the ring
+ * only for keyboard navigation. The CSS keeps its own `:hover` /
+ * `:focus-visible` rules so the stylesheet still works without React.
+ */
+export declare const NavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export {};
+//# sourceMappingURL=NavItem.d.ts.map

package/dist/components/NavItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.d.ts","sourceRoot":"","sources":["../../src/components/NavItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAkBvE,UAAU,eAAe;IACvB,sDAAsD;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qFAAqF;IACrF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,YAAY,GAAG,eAAe,GACxC,CACI,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CACtB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,eAAe,CACtB,CAAC,GACF,CAAC;IAAE,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG,IAAI,CAC1B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,eAAe,GAAG,MAAM,CAC/B,CAAC,CACL,CAAC;AAEJ;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,4GAwElB,CAAC"}

package/dist/components/NavItem.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useHover, useFocusRing, mergeProps } from 'react-aria';
+/** Figma's `Chevron` slot — always the same downward caret, shown only when
+ *  `showChevron` is set. Inlined for the same reason Select's is: it is part
+ *  of the control, not a slot a caller fills. */
+const Chevron = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m6 9 6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+/**
+ * Nav Item renders an `<a>` when given `href`, a `<button>` otherwise —
+ * chosen by what the caller is actually building, the same judgment call
+ * Menu and Select make. A primary nav bar is links; a nav item with
+ * `showChevron` that opens a menu (no `href` of its own) is a button.
+ *
+ * Interaction state comes from React Aria rather than CSS pseudo-classes,
+ * matching Button: `useHover` is pointer-aware so a tap does not stay
+ * "hovered" until the next tap elsewhere, and `useFocusRing` shows the ring
+ * only for keyboard navigation. The CSS keeps its own `:hover` /
+ * `:focus-visible` rules so the stylesheet still works without React.
+ */
+export const NavItem = forwardRef((props, forwardedRef) => {
+    const { icon, showChevron, isDisabled, children, className, href, ...rest } = props;
+    const domRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => domRef.current);
+    const { hoverProps, isHovered } = useHover({ isDisabled });
+    const { focusProps, isFocusVisible } = useFocusRing();
+    const classNames = [
+        'ion-nav-item',
+        isDisabled ? 'ion-nav-item--disabled' : '',
+        className || '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const stateAttributes = {
+        'data-hovered': isHovered || undefined,
+        'data-focused': isFocusVisible || undefined,
+        'data-disabled': isDisabled || undefined,
+    };
+    const content = (_jsxs(_Fragment, { children: [icon && (_jsx("span", { className: "ion-nav-item__icon", "aria-hidden": "true", children: icon })), children, showChevron && (_jsx("span", { className: "ion-nav-item__chevron", "aria-hidden": "true", children: _jsx(Chevron, {}) }))] }));
+    if (href !== undefined) {
+        return (_jsx("a", { ...rest, ...mergeProps(hoverProps, focusProps), ...stateAttributes, ref: domRef, href: isDisabled ? undefined : href, "aria-disabled": isDisabled || undefined, className: classNames, children: content }));
+    }
+    return (_jsx("button", { ...rest, ...mergeProps(hoverProps, focusProps), ...stateAttributes, ref: domRef, type: "button", disabled: isDisabled, className: classNames, children: content }));
+});
+NavItem.displayName = 'NavItem';
+//# sourceMappingURL=NavItem.js.map

package/dist/components/NavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.js","sourceRoot":"","sources":["../../src/components/NavItem.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAEhE;;iDAEiD;AACjD,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,CACpB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YACvE,eACE,CAAC,EAAC,cAAc,EAChB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAC;AAwBF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAG/B,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACxB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GACzE,KAA4C,CAAC;IAE/C,MAAM,MAAM,GAAG,MAAM,CAAwC,IAAI,CAAC,CAAC;IACnE,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ,CAAC,CAAC;IAEzD,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;IAC3D,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtD,MAAM,UAAU,GAAG;QACjB,cAAc;QACd,UAAU,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;QAC1C,SAAS,IAAI,EAAE;KAChB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,eAAe,GAAG;QACtB,cAAc,EAAE,SAAS,IAAI,SAAS;QACtC,cAAc,EAAE,cAAc,IAAI,SAAS;QAC3C,eAAe,EAAE,UAAU,IAAI,SAAS;KACzC,CAAC;IAEF,MAAM,OAAO,GAAG,CACd,8BACG,IAAI,IAAI,CACP,eAAM,SAAS,EAAC,oBAAoB,iBAAa,MAAM,YACpD,IAAI,GACA,CACR,EACA,QAAQ,EACR,WAAW,IAAI,CACd,eAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,YACxD,KAAC,OAAO,KAAG,GACN,CACR,IACA,CACJ,CAAC;IAEF,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,CACL,eACO,IAAsD,KACvD,UAAU,CAAC,UAAU,EAAE,UAAU,CAAC,KAClC,eAAe,EACnB,GAAG,EAAE,MAAsC,EAC3C,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,mBACpB,UAAU,IAAI,SAAS,EACtC,SAAS,EAAE,UAAU,YAEpB,OAAO,GACN,CACL,CAAC;IACJ,CAAC;IAED,OAAO,CACL,oBACO,IAAsD,KACvD,UAAU,CAAC,UAAU,EAAE,UAAU,CAAC,KAClC,eAAe,EACnB,GAAG,EAAE,MAAsC,EAC3C,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,UAAU,YAEpB,OAAO,GACD,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/components/Radio.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export type RadioSize = 'sm' | 'md' | 'lg';
+export type RadioIntent = 'brand' | 'neutral' | 'danger';
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value'> {
+    value: string;
+    size?: RadioSize;
+    intent?: RadioIntent;
+    children?: React.ReactNode;
+}
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export interface RadioGroupProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
+    /** Shared input name. Generated when omitted. */
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    label?: React.ReactNode;
+    size?: RadioSize;
+    intent?: RadioIntent;
+    isDisabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * Renders a `<fieldset>` with a `<legend>` rather than a div with
+ * `role="radiogroup"`. Both are announced correctly, but a fieldset also groups
+ * the inputs for form submission and native validation, which the ARIA version
+ * does not.
+ */
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
+//# sourceMappingURL=Radio.d.ts.map

package/dist/components/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAoBzD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,MAAM,GAAG,OAAO,CAC1B;IACC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,KAAK,qFA6DjB,CAAC;AAIF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,UAAU,CACX;IACC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,6FAyCtB,CAAC"}

package/dist/components/Radio.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle, useContext, createContext, useId, } from 'react';
+/**
+ * A radio is meaningless alone — it needs siblings sharing a `name` and one
+ * selected value. The context lets RadioGroup own that without every Radio
+ * repeating the name, and without the caller wiring `checked`/`onChange` per
+ * option.
+ */
+const RadioGroupContext = createContext(null);
+export const Radio = forwardRef((props, forwardedRef) => {
+    const group = useContext(RadioGroupContext);
+    const { value, size = group?.size ?? 'md', intent = group?.intent ?? 'brand', className, children, disabled = group?.isDisabled, name = group?.name, ...rest } = props;
+    const domRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => domRef.current);
+    const classNames = [
+        'ion-radio',
+        size !== 'md' ? `ion-radio--${size}` : '',
+        intent !== 'brand' ? `ion-radio--${intent}` : '',
+        disabled ? 'ion-radio--disabled' : '',
+        className || '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Controlled only when the group is controlled; otherwise the group's
+    // defaultValue seeds the native input and the DOM owns the selection.
+    const controlled = group && group.value !== undefined;
+    return (_jsxs("label", { className: classNames, children: [_jsx("input", { ...rest, ref: domRef, type: "radio", name: name, value: value, disabled: disabled, className: "ion-radio__input", ...(controlled
+                    ? {
+                        checked: group.value === value,
+                        onChange: () => group.onChange?.(value),
+                    }
+                    : {
+                        defaultChecked: group?.defaultValue === value,
+                        onChange: (e) => {
+                            group?.onChange?.(value);
+                            rest.onChange?.(e);
+                        },
+                    }) }), _jsx("span", { className: "ion-radio__indicator", "aria-hidden": "true", children: _jsx("span", { className: "ion-radio__dot" }) }), children && _jsx("span", { className: "ion-radio__label", children: children })] }));
+});
+Radio.displayName = 'Radio';
+/**
+ * Renders a `<fieldset>` with a `<legend>` rather than a div with
+ * `role="radiogroup"`. Both are announced correctly, but a fieldset also groups
+ * the inputs for form submission and native validation, which the ARIA version
+ * does not.
+ */
+export const RadioGroup = forwardRef((props, ref) => {
+    const { name, value, defaultValue, onChange, label, size, intent, isDisabled, className, children, ...rest } = props;
+    const generated = useId();
+    return (_jsx(RadioGroupContext.Provider, { value: {
+            name: name ?? generated,
+            value,
+            defaultValue,
+            onChange,
+            size,
+            intent,
+            isDisabled,
+        }, children: _jsxs("fieldset", { ...rest, ref: ref, className: ['ion-radio-group', className].filter(Boolean).join(' '), children: [label && _jsx("legend", { className: "ion-radio-group__label", children: label }), children] }) }));
+});
+RadioGroup.displayName = 'RadioGroup';
+//# sourceMappingURL=Radio.js.map

package/dist/components/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"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"}

package/dist/components/ScrollProgress.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+export interface ScrollProgressSection {
+    id: string;
+    label: string;
+}
+export interface ScrollProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** 0-100. The caller computes this from whatever it is tracking — a
+     *  window scroll fraction, a custom scroll container, a reading-time
+     *  estimate. This component has no opinion on the source. */
+    progress: number;
+    sections: ScrollProgressSection[];
+    /** The section the rail's heavier tick and the panel's selected row point
+     *  to. Also the caller's to compute — see `progress`. */
+    activeId?: string;
+    /** Fired when a row is chosen. The component does not scroll anywhere
+     *  itself; matching Menu, it reports the choice and lets the caller decide
+     *  what "select this section" means for their page. */
+    onSelect?: (id: string) => void;
+}
+/**
+ * The compact rail is the disclosure trigger. It is a real `<button>`, so a
+ * keyboard user reaches it by Tab and opens it the same way as any button —
+ * Enter or Space — no `:focus-within` trick required; a mouse user can also
+ * just hover it. Built as a WAI-ARIA Disclosure (`aria-expanded` +
+ * `aria-controls`) rather than a menu: see the CSS header for why
+ * `role="menu"` is deliberately not used here.
+ *
+ * Closes on outside pointerdown and on Escape — the minimum a disclosure
+ * needs to not trap the page once opened, not a full popover/focus-trap
+ * implementation.
+ */
+export declare const ScrollProgress: React.ForwardRefExoticComponent<ScrollProgressProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ScrollProgress.d.ts.map

package/dist/components/ScrollProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollProgress.d.ts","sourceRoot":"","sources":["../../src/components/ScrollProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,CACX;IACC;;iEAE6D;IAC7D,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,qBAAqB,EAAE,CAAC;IAClC;6DACyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;2DAEuD;IACvD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,4FAgK1B,CAAC"}