@tempoxyz/ds 0.0.5 → 0.0.7

package/dist/platform/components/DenseTable.d.ts

@@ -21,7 +21,10 @@ export declare namespace DenseTable {
     }
     function Td(props: Td.Props): import("react").JSX.Element;
     namespace Td {
-        type Props = ComponentPropsWithRef<'td'>;
+        type Props = ComponentPropsWithRef<'td'> & {
+            /** Right-aligns the cell with tabular figures and no wrapping. */
+            numeric?: boolean | undefined;
+        };
     }
     function Tfoot(props: Tfoot.Props): import("react").JSX.Element;
     namespace Tfoot {
@@ -29,7 +32,10 @@ export declare namespace DenseTable {
     }
     function Th(props: Th.Props): import("react").JSX.Element;
     namespace Th {
-        type Props = ComponentPropsWithRef<'th'>;
+        type Props = ComponentPropsWithRef<'th'> & {
+            /** Right-aligns the header with tabular figures and no wrapping. */
+            numeric?: boolean | undefined;
+        };
     }
     function Thead(props: Thead.Props): import("react").JSX.Element;
     namespace Thead {
@@ -43,7 +49,79 @@ export declare namespace DenseTable {
 declare namespace styles {
     const caption: zyzz.style.ReturnType<"react">;
     const scroll: zyzz.style.ReturnType<"react">;
-    const table: zyzz.style.ReturnType<"react">;
+    const table: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly borderCollapse: "collapse";
+            readonly color: "content.primary";
+            readonly tableLayout: "fixed";
+            readonly typography: "body.b2";
+            readonly width: "100% !custom";
+            readonly selectors: {
+                readonly '& th': {
+                    readonly paddingTop: "none";
+                    readonly paddingBottom: "16";
+                    readonly paddingRight: "16";
+                    readonly textAlign: "left";
+                    readonly typography: "body.b2Strong";
+                };
+                readonly '& td': {
+                    readonly paddingBlock: "16";
+                    readonly paddingRight: "16";
+                    readonly position: "relative";
+                };
+                readonly '& td::before': {
+                    readonly backgroundColor: "line.secondary";
+                    readonly content: "\"\" !custom";
+                    readonly height: "1px !custom";
+                    readonly left: "0px !custom";
+                    readonly position: "absolute";
+                    readonly right: "0px !custom";
+                    readonly top: "-1px !custom";
+                };
+                readonly '& td, & th': {
+                    readonly overflowWrap: "anywhere";
+                    readonly paddingLeft: "none";
+                    readonly verticalAlign: "middle";
+                };
+                readonly '& td:last-child, & th:last-child': {
+                    readonly paddingRight: "none";
+                };
+                readonly '& tbody tr:last-child td': {
+                    readonly paddingBottom: "none";
+                };
+                readonly '& td[data-numeric], & th[data-numeric]': {
+                    readonly fontVariantNumeric: "tabular-nums";
+                    readonly textAlign: "right";
+                    readonly whiteSpace: "nowrap";
+                };
+            };
+        };
+        readonly defaultVariants: {
+            readonly compact: false;
+        };
+        readonly variants: {
+            readonly compact: {
+                readonly false: {};
+                readonly true: {
+                    readonly tableLayout: "auto";
+                    readonly selectors: {
+                        readonly '& th': {
+                            readonly paddingBottom: "8";
+                            readonly paddingRight: "12";
+                        };
+                        readonly '& td': {
+                            readonly paddingBlock: "8";
+                            readonly paddingRight: "12";
+                        };
+                        readonly '& td, & th': {
+                            readonly overflowWrap: "normal";
+                            readonly whiteSpace: "nowrap";
+                        };
+                    };
+                };
+            };
+        };
+    }, "react">;
 }
 export {};
 //# sourceMappingURL=DenseTable.d.ts.map

package/dist/platform/components/DenseTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DenseTable.d.ts","sourceRoot":"","sources":["../../../src/platform/components/DenseTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAGjC,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK,+BAQjD;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,KAAK,GAAG,qBAAqB,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAA;IAE7F,SAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,+BAI3C;IAED,UAAiB,OAAO,CAAC;QACvB,KAAY,KAAK,GAAG,qBAAqB,CAAC,SAAS,CAAC,GAClD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAA;KAC7C;IAED,SAAgB,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,+BAEnC;IAED,UAAiB,GAAG,CAAC;QACnB,KAAY,KAAK,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAA;KACjD;IAED,SAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,+BAE7C;IAED,UAAiB,QAAQ,CAAC;QACxB,KAAY,KAAK,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAA;KACtD;IAED,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAEvC;IAED,UAAiB,KAAK,CAAC;QACrB,KAAY,KAAK,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAA;KACnD;IAED,SAAgB,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,+BAEjC;IAED,UAAiB,EAAE,CAAC;QAClB,KAAY,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAA;KAChD;IAED,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAEvC;IAED,UAAiB,KAAK,CAAC;QACrB,KAAY,KAAK,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAA;KACnD;IAED,SAAgB,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,+BAEjC;IAED,UAAiB,EAAE,CAAC;QAClB,KAAY,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAA;KAChD;IAED,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAEvC;IAED,UAAiB,KAAK,CAAC;QACrB,KAAY,KAAK,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAA;KACnD;IAED,SAAgB,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,+BAEjC;IAED,UAAiB,EAAE,CAAC;QAClB,KAAY,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAA;KAChD;CACF;AAED,kBAAU,MAAM,CAAC;IACR,MAAM,OAAO,gCAGnB,CAAA;IAEM,MAAM,MAAM,gCAGlB,CAAA;IAEM,MAAM,KAAK,gCAmCjB,CAAA;CACF"}
+{"version":3,"file":"DenseTable.d.ts","sourceRoot":"","sources":["../../../src/platform/components/DenseTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAGjC,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK,+BAQjD;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,KAAK,GAAG,qBAAqB,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAA;IAE7F,SAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,+BAI3C;IAED,UAAiB,OAAO,CAAC;QACvB,KAAY,KAAK,GAAG,qBAAqB,CAAC,SAAS,CAAC,GAClD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAA;KAC7C;IAED,SAAgB,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,+BAEnC;IAED,UAAiB,GAAG,CAAC;QACnB,KAAY,KAAK,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAA;KACjD;IAED,SAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,+BAE7C;IAED,UAAiB,QAAQ,CAAC;QACxB,KAAY,KAAK,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAA;KACtD;IAED,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAEvC;IAED,UAAiB,KAAK,CAAC;QACrB,KAAY,KAAK,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAA;KACnD;IAED,SAAgB,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,+BAIjC;IAED,UAAiB,EAAE,CAAC;QAClB,KAAY,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,GAAG;YAChD,kEAAkE;YAClE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;SAC9B,CAAA;KACF;IAED,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAEvC;IAED,UAAiB,KAAK,CAAC;QACrB,KAAY,KAAK,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAA;KACnD;IAED,SAAgB,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,+BAIjC;IAED,UAAiB,EAAE,CAAC;QAClB,KAAY,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,GAAG;YAChD,oEAAoE;YACpE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;SAC9B,CAAA;KACF;IAED,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAEvC;IAED,UAAiB,KAAK,CAAC;QACrB,KAAY,KAAK,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAA;KACnD;IAED,SAAgB,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,+BAEjC;IAED,UAAiB,EAAE,CAAC;QAClB,KAAY,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAA;KAChD;CACF;AAED,kBAAU,MAAM,CAAC;IACR,MAAM,OAAO,gCAGnB,CAAA;IAEM,MAAM,MAAM,gCAGlB,CAAA;IAEM,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAyDjB,CAAA;CACF"}

package/dist/platform/components/DenseTable.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { style } from '../zyzz.config.js';
+import { style, variants } from '../zyzz.config.js';
 export function DenseTable(props) {
-    const { className, vars, ...attributes } = props;
-    return (_jsx("div", { ...styles.scroll(), children: _jsx("table", { ...attributes, ...styles.table({ className, style: props.style, vars }) }) }));
+    const { className, compact, vars, ...attributes } = props;
+    return (_jsx("div", { ...styles.scroll(), children: _jsx("table", { ...attributes, ...styles.table({ className, compact, style: props.style, vars }) }) }));
 }
 (function (DenseTable) {
     function Caption(props) {
@@ -23,7 +23,8 @@ export function DenseTable(props) {
     }
     DenseTable.Tbody = Tbody;
     function Td(props) {
-        return _jsx("td", { ...props });
+        const { numeric, ...attributes } = props;
+        return _jsx("td", { ...attributes, "data-numeric": numeric ? '' : undefined });
     }
     DenseTable.Td = Td;
     function Tfoot(props) {
@@ -31,7 +32,8 @@ export function DenseTable(props) {
     }
     DenseTable.Tfoot = Tfoot;
     function Th(props) {
-        return _jsx("th", { ...props });
+        const { numeric, ...attributes } = props;
+        return _jsx("th", { ...attributes, "data-numeric": numeric ? '' : undefined });
     }
     DenseTable.Th = Th;
     function Thead(props) {
@@ -47,37 +49,59 @@ var styles;
 (function (styles) {
     styles.caption = style({ paddingBottom: '16', textAlign: 'left', typography: 'body.b2Strong' }, { id: 'tds/platform/dense-table/caption' });
     styles.scroll = style({ maxWidth: '100% !custom', overflowX: 'auto' }, { id: 'tds/platform/dense-table/scroll' });
-    styles.table = style({
-        borderCollapse: 'collapse',
-        color: 'content.primary',
-        tableLayout: 'fixed',
-        typography: 'body.b2',
-        width: '100% !custom',
-        selectors: {
-            '& th': {
-                paddingTop: 'none',
-                paddingBottom: '16',
-                paddingRight: '16',
-                textAlign: 'left',
-                typography: 'body.b2Strong',
+    styles.table = variants({
+        base: {
+            borderCollapse: 'collapse',
+            color: 'content.primary',
+            tableLayout: 'fixed',
+            typography: 'body.b2',
+            width: '100% !custom',
+            selectors: {
+                '& th': {
+                    paddingTop: 'none',
+                    paddingBottom: '16',
+                    paddingRight: '16',
+                    textAlign: 'left',
+                    typography: 'body.b2Strong',
+                },
+                '& td': {
+                    paddingBlock: '16',
+                    paddingRight: '16',
+                    position: 'relative',
+                },
+                '& td::before': {
+                    backgroundColor: 'line.secondary',
+                    content: '"" !custom',
+                    height: '1px !custom',
+                    left: '0px !custom',
+                    position: 'absolute',
+                    right: '0px !custom',
+                    top: '-1px !custom',
+                },
+                '& td, & th': { overflowWrap: 'anywhere', paddingLeft: 'none', verticalAlign: 'middle' },
+                '& td:last-child, & th:last-child': { paddingRight: 'none' },
+                '& tbody tr:last-child td': { paddingBottom: 'none' },
+                '& td[data-numeric], & th[data-numeric]': {
+                    fontVariantNumeric: 'tabular-nums',
+                    textAlign: 'right',
+                    whiteSpace: 'nowrap',
+                },
             },
-            '& td': {
-                paddingBlock: '16',
-                paddingRight: '16',
-                position: 'relative',
-            },
-            '& td::before': {
-                backgroundColor: 'line.secondary',
-                content: '"" !custom',
-                height: '1px !custom',
-                left: '0px !custom',
-                position: 'absolute',
-                right: '0px !custom',
-                top: '-1px !custom',
+        },
+        defaultVariants: { compact: false },
+        variants: {
+            // Figma defines only the regular density. Compact columns size to unwrapped content.
+            compact: {
+                false: {},
+                true: {
+                    tableLayout: 'auto',
+                    selectors: {
+                        '& th': { paddingBottom: '8', paddingRight: '12' },
+                        '& td': { paddingBlock: '8', paddingRight: '12' },
+                        '& td, & th': { overflowWrap: 'normal', whiteSpace: 'nowrap' },
+                    },
+                },
             },
-            '& td, & th': { overflowWrap: 'anywhere', paddingLeft: 'none', verticalAlign: 'middle' },
-            '& td:last-child, & th:last-child': { paddingRight: 'none' },
-            '& tbody tr:last-child td': { paddingBottom: 'none' },
         },
     }, { id: 'tds/platform/dense-table' });
 })(styles || (styles = {}));

package/dist/platform/components/DenseTable.js.map

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

package/dist/platform/components/NativeSelect.d.ts

@@ -8,8 +8,94 @@ export declare namespace NativeSelect {
 }
 declare namespace styles {
     const chevron: zyzz.style.ReturnType<"react">;
-    const root: zyzz.style.ReturnType<"react">;
-    const select: zyzz.style.ReturnType<"react">;
+    const root: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly alignItems: "center";
+            readonly backgroundColor: "background.secondary";
+            readonly borderColor: "line.secondary";
+            readonly borderRadius: "xs";
+            readonly borderStyle: "solid";
+            readonly borderWidth: "thin";
+            readonly boxSizing: "border-box";
+            readonly columnGap: "8";
+            readonly display: "flex";
+            readonly maxWidth: "100% !custom";
+            readonly paddingInline: "16";
+            readonly position: "relative";
+            readonly width: "320px !custom";
+            readonly selectors: {
+                readonly '&:has(select:disabled)': {
+                    readonly backgroundColor: "container.subtle";
+                };
+                readonly '&:has(select:disabled) > svg': {
+                    readonly opacity: "0.4 !custom";
+                };
+                readonly '&:has(select[aria-invalid="true"])': {
+                    readonly backgroundColor: "container.negative";
+                    readonly borderColor: "border.negative";
+                    readonly borderWidth: "regular";
+                };
+                readonly '&:has(select:focus-visible)': {
+                    readonly outline: "2px solid currentColor !custom";
+                    readonly outlineOffset: "2px !custom";
+                };
+            };
+        };
+        readonly defaultVariants: {
+            readonly scale: "large";
+        };
+        readonly variants: {
+            readonly scale: {
+                readonly large: {
+                    readonly height: "48";
+                };
+                readonly medium: {
+                    readonly borderRadius: "2xs";
+                    readonly height: "40";
+                };
+                readonly small: {
+                    readonly borderRadius: "2xs";
+                    readonly height: "32";
+                };
+            };
+        };
+    }, "react">;
+    const select: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly appearance: "none";
+            readonly backgroundColor: "transparent !custom";
+            readonly border: "none !custom";
+            readonly boxSizing: "border-box";
+            readonly color: "content.primary";
+            readonly height: "100% !custom";
+            readonly paddingBlock: "none";
+            readonly paddingLeft: "none";
+            readonly paddingRight: "24";
+            readonly outline: "none !custom";
+            readonly width: "100% !custom";
+            readonly selectors: {
+                readonly '&:disabled': {
+                    readonly color: "content.tertiary";
+                };
+            };
+        };
+        readonly defaultVariants: {
+            readonly scale: "large";
+        };
+        readonly variants: {
+            readonly scale: {
+                readonly large: {
+                    readonly typography: "body.b2";
+                };
+                readonly medium: {
+                    readonly typography: "body.b2";
+                };
+                readonly small: {
+                    readonly typography: "body.b3";
+                };
+            };
+        };
+    }, "react">;
 }
 export {};
 //# sourceMappingURL=NativeSelect.d.ts.map

package/dist/platform/components/NativeSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect.d.ts","sourceRoot":"","sources":["../../../src/platform/components/NativeSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAIjC,wBAAgB,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,KAAK,+BAerD;AAED,yBAAiB,YAAY,CAAC;IAC5B,KAAY,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAC5E,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG;QAAE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;KAAE,CAAA;CAC9E;AAED,kBAAU,MAAM,CAAC;IACR,MAAM,OAAO,gCAWnB,CAAA;IAEM,MAAM,IAAI,gCA+BhB,CAAA;IAEM,MAAM,MAAM,gCAmBlB,CAAA;CACF"}
+{"version":3,"file":"NativeSelect.d.ts","sourceRoot":"","sources":["../../../src/platform/components/NativeSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAIjC,wBAAgB,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,KAAK,+BAerD;AAED,yBAAiB,YAAY,CAAC;IAC5B,KAAY,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAC5E,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG;QAAE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;KAAE,CAAA;CAC9E;AAED,kBAAU,MAAM,CAAC;IACR,MAAM,OAAO,gCAYnB,CAAA;IAEM,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAyChB,CAAA;IAEM,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA4BlB,CAAA;CACF"}

package/dist/platform/components/NativeSelect.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown } from '../icons/index.js';
-import { style } from '../zyzz.config.js';
+import { style, variants } from '../zyzz.config.js';
 export function NativeSelect(props) {
-    const { children, className, invalid = false, vars, ...attributes } = props;
-    return (_jsxs("div", { ...styles.root({ className, style: props.style, vars }), children: [_jsx("select", { ...attributes, "aria-invalid": invalid || attributes['aria-invalid'], ...styles.select(), children: children }), _jsx(ChevronDown, { "aria-hidden": true, ...styles.chevron() })] }));
+    const { children, className, invalid = false, scale, vars, ...attributes } = props;
+    return (_jsxs("div", { ...styles.root({ className, scale, style: props.style, vars }), children: [_jsx("select", { ...attributes, "aria-invalid": invalid || attributes['aria-invalid'], ...styles.select({ scale }), children: children }), _jsx(ChevronDown, { "aria-hidden": true, ...styles.chevron() })] }));
 }
 var styles;
 (function (styles) {
@@ -13,53 +13,73 @@ var styles;
         pointerEvents: 'none',
         position: 'absolute',
         right: '16',
-        top: '16',
+        top: '50% !custom',
+        transform: 'translateY(-50%) !custom',
         width: '16',
     }, { id: 'tds/platform/native-select/chevron' });
-    styles.root = style({
-        alignItems: 'center',
-        backgroundColor: 'background.secondary',
-        borderColor: 'line.secondary',
-        borderRadius: 'xs',
-        borderStyle: 'solid',
-        borderWidth: 'thin',
-        boxSizing: 'border-box',
-        columnGap: '8',
-        display: 'flex',
-        height: '48',
-        maxWidth: '100% !custom',
-        paddingInline: '16',
-        position: 'relative',
-        width: '320px !custom',
-        selectors: {
-            '&:has(select:disabled)': { backgroundColor: 'container.subtle' },
-            '&:has(select:disabled) > svg': { opacity: '0.4 !custom' },
-            '&:has(select[aria-invalid="true"])': {
-                backgroundColor: 'container.negative',
-                borderColor: 'border.negative',
-                borderWidth: 'regular',
+    styles.root = variants({
+        base: {
+            alignItems: 'center',
+            backgroundColor: 'background.secondary',
+            borderColor: 'line.secondary',
+            borderRadius: 'xs',
+            borderStyle: 'solid',
+            borderWidth: 'thin',
+            boxSizing: 'border-box',
+            columnGap: '8',
+            display: 'flex',
+            maxWidth: '100% !custom',
+            paddingInline: '16',
+            position: 'relative',
+            width: '320px !custom',
+            selectors: {
+                '&:has(select:disabled)': { backgroundColor: 'container.subtle' },
+                '&:has(select:disabled) > svg': { opacity: '0.4 !custom' },
+                '&:has(select[aria-invalid="true"])': {
+                    backgroundColor: 'container.negative',
+                    borderColor: 'border.negative',
+                    borderWidth: 'regular',
+                },
+                '&:has(select:focus-visible)': {
+                    outline: '2px solid currentColor !custom',
+                    outlineOffset: '2px !custom',
+                },
             },
-            '&:has(select:focus-visible)': {
-                outline: '2px solid currentColor !custom',
-                outlineOffset: '2px !custom',
+        },
+        defaultVariants: { scale: 'large' },
+        variants: {
+            // Scales follow Button heights. Figma defines only the 48px large scale.
+            scale: {
+                large: { height: '48' },
+                medium: { borderRadius: '2xs', height: '40' },
+                small: { borderRadius: '2xs', height: '32' },
             },
         },
     }, { id: 'tds/platform/native-select' });
-    styles.select = style({
-        appearance: 'none',
-        backgroundColor: 'transparent !custom',
-        border: 'none !custom',
-        boxSizing: 'border-box',
-        color: 'content.primary',
-        height: '100% !custom',
-        paddingBlock: 'none',
-        paddingLeft: 'none',
-        paddingRight: '24',
-        outline: 'none !custom',
-        typography: 'body.b2',
-        width: '100% !custom',
-        selectors: {
-            '&:disabled': { color: 'content.tertiary' },
+    styles.select = variants({
+        base: {
+            appearance: 'none',
+            backgroundColor: 'transparent !custom',
+            border: 'none !custom',
+            boxSizing: 'border-box',
+            color: 'content.primary',
+            height: '100% !custom',
+            paddingBlock: 'none',
+            paddingLeft: 'none',
+            paddingRight: '24',
+            outline: 'none !custom',
+            width: '100% !custom',
+            selectors: {
+                '&:disabled': { color: 'content.tertiary' },
+            },
+        },
+        defaultVariants: { scale: 'large' },
+        variants: {
+            scale: {
+                large: { typography: 'body.b2' },
+                medium: { typography: 'body.b2' },
+                small: { typography: 'body.b3' },
+            },
         },
     }, { id: 'tds/platform/native-select/select' });
 })(styles || (styles = {}));

package/dist/platform/components/NativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect.js","sourceRoot":"","sources":["../../../src/platform/components/NativeSelect.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzC,MAAM,UAAU,YAAY,CAAC,KAAyB;IACpD,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,GAAG,KAAK,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IAE3E,OAAO,CACL,kBAAS,MAAM,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,aAC3D,oBACM,UAAU,kBACA,OAAO,IAAI,UAAU,CAAC,cAAc,CAAC,KAC/C,MAAM,CAAC,MAAM,EAAE,YAElB,QAAQ,GACF,EACT,KAAC,WAAW,4BAAiB,MAAM,CAAC,OAAO,EAAE,GAAI,IAC7C,CACP,CAAA;AACH,CAAC;AAOD,IAAU,MAAM,CAmEf;AAnED,WAAU,MAAM;IACD,cAAO,GAAG,KAAK,CAC1B;QACE,KAAK,EAAE,iBAAiB;QACxB,MAAM,EAAE,IAAI;QACZ,aAAa,EAAE,MAAM;QACrB,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,IAAI;QACX,GAAG,EAAE,IAAI;QACT,KAAK,EAAE,IAAI;KACZ,EACD,EAAE,EAAE,EAAE,oCAAoC,EAAE,CAC7C,CAAA;IAEY,WAAI,GAAG,KAAK,CACvB;QACE,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,sBAAsB;QACvC,WAAW,EAAE,gBAAgB;QAC7B,YAAY,EAAE,IAAI;QAClB,WAAW,EAAE,OAAO;QACpB,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,YAAY;QACvB,SAAS,EAAE,GAAG;QACd,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,cAAc;QACxB,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE;YACT,wBAAwB,EAAE,EAAE,eAAe,EAAE,kBAAkB,EAAE;YACjE,8BAA8B,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE;YAC1D,oCAAoC,EAAE;gBACpC,eAAe,EAAE,oBAAoB;gBACrC,WAAW,EAAE,iBAAiB;gBAC9B,WAAW,EAAE,SAAS;aACvB;YACD,6BAA6B,EAAE;gBAC7B,OAAO,EAAE,gCAAgC;gBACzC,aAAa,EAAE,aAAa;aAC7B;SACF;KACF,EACD,EAAE,EAAE,EAAE,4BAA4B,EAAE,CACrC,CAAA;IAEY,aAAM,GAAG,KAAK,CACzB;QACE,UAAU,EAAE,MAAM;QAClB,eAAe,EAAE,qBAAqB;QACtC,MAAM,EAAE,cAAc;QACtB,SAAS,EAAE,YAAY;QACvB,KAAK,EAAE,iBAAiB;QACxB,MAAM,EAAE,cAAc;QACtB,YAAY,EAAE,MAAM;QACpB,WAAW,EAAE,MAAM;QACnB,YAAY,EAAE,IAAI;QAClB,OAAO,EAAE,cAAc;QACvB,UAAU,EAAE,SAAS;QACrB,KAAK,EAAE,cAAc;QACrB,SAAS,EAAE;YACT,YAAY,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE;SAC5C;KACF,EACD,EAAE,EAAE,EAAE,mCAAmC,EAAE,CAC5C,CAAA;AACH,CAAC,EAnES,MAAM,KAAN,MAAM,QAmEf"}
+{"version":3,"file":"NativeSelect.js","sourceRoot":"","sources":["../../../src/platform/components/NativeSelect.tsx"],"names":[],"mappings":"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"}

package/dist/platform/components/SegmentedControl.d.ts

@@ -3,22 +3,15 @@ import type { ComponentPropsWithRef, ReactNode } from 'react';
 import type * as zyzz from 'zyzz';
 export declare function SegmentedControl<const value extends string>(props: SegmentedControl.Props<value>): import("react").JSX.Element;
 export declare namespace SegmentedControl {
-    type Props<value extends string = string> = Omit<ComponentPropsWithRef<'div'>, 'children' | 'defaultValue'> & zyzz.Props.Variants<typeof styles.control> & Pick<BaseUiGroup.RadioGroup.Props<NoInfer<value>>, 'defaultValue' | 'disabled' | 'form' | 'name' | 'onValueChange' | 'readOnly' | 'required' | 'value'> & {
-        items: readonly [
-            {
-                label: ReactNode;
-                value: value;
-            },
-            {
-                label: ReactNode;
-                value: value;
-            },
-            {
-                label: ReactNode;
-                value: value;
-            }
-        ];
+    type Item<value extends string> = {
+        label: ReactNode;
+        value: value;
     };
+    export type Props<value extends string = string> = Omit<ComponentPropsWithRef<'div'>, 'children' | 'defaultValue'> & zyzz.Props.Variants<typeof styles.control> & Pick<BaseUiGroup.RadioGroup.Props<NoInfer<value>>, 'defaultValue' | 'disabled' | 'form' | 'name' | 'onValueChange' | 'readOnly' | 'required' | 'value'> & {
+        /** Two to four segments. Figma defines three, and the 354px control fits four at 80px each. */
+        items: readonly [Item<value>, Item<value>] | readonly [Item<value>, Item<value>, Item<value>] | readonly [Item<value>, Item<value>, Item<value>, Item<value>];
+    };
+    export {};
 }
 declare namespace styles {
     const control: zyzz.style.ReturnType<"react">;

package/dist/platform/components/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/platform/components/SegmentedControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,WAAW,MAAM,4BAA4B,CAAA;AACzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAGjC,wBAAgB,gBAAgB,CAAC,KAAK,CAAC,KAAK,SAAS,MAAM,EAAE,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,+BAqBhG;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,KAAK,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CACrD,qBAAqB,CAAC,KAAK,CAAC,EAC5B,UAAU,GAAG,cAAc,CAC5B,GACC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,GAC1C,IAAI,CACF,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAC1C,cAAc,GACd,UAAU,GACV,MAAM,GACN,MAAM,GACN,eAAe,GACf,UAAU,GACV,UAAU,GACV,OAAO,CACV,GAAG;QACF,KAAK,EAAE,SAAS;YACd;gBAAE,KAAK,EAAE,SAAS,CAAC;gBAAC,KAAK,EAAE,KAAK,CAAA;aAAE;YAClC;gBAAE,KAAK,EAAE,SAAS,CAAC;gBAAC,KAAK,EAAE,KAAK,CAAA;aAAE;YAClC;gBAAE,KAAK,EAAE,SAAS,CAAC;gBAAC,KAAK,EAAE,KAAK,CAAA;aAAE;SACnC,CAAA;KACF,CAAA;CACJ;AAED,kBAAU,MAAM,CAAC;IACR,MAAM,OAAO,gCAYnB,CAAA;IAEM,MAAM,IAAI,gCA4BhB,CAAA;CACF"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/platform/components/SegmentedControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,WAAW,MAAM,4BAA4B,CAAA;AACzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAGjC,wBAAgB,gBAAgB,CAAC,KAAK,CAAC,KAAK,SAAS,MAAM,EAAE,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,+BAqBhG;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAK,IAAI,CAAC,KAAK,SAAS,MAAM,IAAI;QAAE,KAAK,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE,CAAA;IAEpE,MAAM,MAAM,KAAK,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CACrD,qBAAqB,CAAC,KAAK,CAAC,EAC5B,UAAU,GAAG,cAAc,CAC5B,GACC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,GAC1C,IAAI,CACF,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAC1C,cAAc,GACd,UAAU,GACV,MAAM,GACN,MAAM,GACN,eAAe,GACf,UAAU,GACV,UAAU,GACV,OAAO,CACV,GAAG;QACF,+FAA+F;QAC/F,KAAK,EACD,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GACnC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAChD,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;KAClE,CAAA;;CACJ;AAED,kBAAU,MAAM,CAAC;IACR,MAAM,OAAO,gCAYnB,CAAA;IAEM,MAAM,IAAI,gCA4BhB,CAAA;CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../../src/platform/components/SegmentedControl.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,MAAM,sBAAsB,CAAA;AAC9C,OAAO,KAAK,WAAW,MAAM,4BAA4B,CAAA;AAGzD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzC,MAAM,UAAU,gBAAgB,CAA6B,KAAoC;IAC/F,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IAEvD,OAAO,CACL,KAAC,WAAW,CAAC,UAAU,OACjB,UAAU,KACV,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,YAE1D,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,MAAM,CAAC,KAAK,CAAC,IAAI,IAEhB,YAAY,QACZ,MAAM,EAAE,iBAAQ,IAAI,EAAC,QAAQ,GAAG,EAChC,KAAK,EAAE,IAAI,CAAC,KAAK,KACb,MAAM,CAAC,IAAI,EAAE,YAEjB,yBAAO,IAAI,CAAC,KAAK,GAAQ,IANpB,IAAI,CAAC,KAAK,CAOG,CACrB,CAAC,GACqB,CAC1B,CAAA;AACH,CAAC;AA2BD,IAAU,MAAM,CA4Cf;AA5CD,WAAU,MAAM;IACD,cAAO,GAAG,KAAK,CAC1B;QACE,eAAe,EAAE,mBAAmB;QACpC,YAAY,EAAE,IAAI;QAClB,SAAS,EAAE,YAAY;QACvB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,cAAc;QACxB,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,GAAG;QACZ,KAAK,EAAE,eAAe;KACvB,EACD,EAAE,EAAE,EAAE,gCAAgC,EAAE,CACzC,CAAA;IAEY,WAAI,GAAG,KAAK,CACvB;QACE,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,qBAAqB;QACtC,MAAM,EAAE,cAAc;QACtB,YAAY,EAAE,KAAK;QACnB,SAAS,EAAE,YAAY;QACvB,KAAK,EAAE,iBAAiB;QACxB,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,MAAM;QACf,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,IAAI;QACZ,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,cAAc;QACxB,YAAY,EAAE,GAAG;QACjB,aAAa,EAAE,IAAI;QACnB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE;YACT,iBAAiB,EAAE,EAAE,eAAe,EAAE,sBAAsB,EAAE;YAC9D,iBAAiB,EAAE;gBACjB,OAAO,EAAE,gCAAgC;gBACzC,aAAa,EAAE,cAAc;aAC9B;YACD,YAAY,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;SACpC;KACF,EACD,EAAE,EAAE,EAAE,qCAAqC,EAAE,CAC9C,CAAA;AACH,CAAC,EA5CS,MAAM,KAAN,MAAM,QA4Cf"}
+{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../../src/platform/components/SegmentedControl.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,MAAM,sBAAsB,CAAA;AAC9C,OAAO,KAAK,WAAW,MAAM,4BAA4B,CAAA;AAGzD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzC,MAAM,UAAU,gBAAgB,CAA6B,KAAoC;IAC/F,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IAEvD,OAAO,CACL,KAAC,WAAW,CAAC,UAAU,OACjB,UAAU,KACV,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,YAE1D,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,MAAM,CAAC,KAAK,CAAC,IAAI,IAEhB,YAAY,QACZ,MAAM,EAAE,iBAAQ,IAAI,EAAC,QAAQ,GAAG,EAChC,KAAK,EAAE,IAAI,CAAC,KAAK,KACb,MAAM,CAAC,IAAI,EAAE,YAEjB,yBAAO,IAAI,CAAC,KAAK,GAAQ,IANpB,IAAI,CAAC,KAAK,CAOG,CACrB,CAAC,GACqB,CAC1B,CAAA;AACH,CAAC;AA6BD,IAAU,MAAM,CA4Cf;AA5CD,WAAU,MAAM;IACD,cAAO,GAAG,KAAK,CAC1B;QACE,eAAe,EAAE,mBAAmB;QACpC,YAAY,EAAE,IAAI;QAClB,SAAS,EAAE,YAAY;QACvB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,cAAc;QACxB,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,GAAG;QACZ,KAAK,EAAE,eAAe;KACvB,EACD,EAAE,EAAE,EAAE,gCAAgC,EAAE,CACzC,CAAA;IAEY,WAAI,GAAG,KAAK,CACvB;QACE,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,qBAAqB;QACtC,MAAM,EAAE,cAAc;QACtB,YAAY,EAAE,KAAK;QACnB,SAAS,EAAE,YAAY;QACvB,KAAK,EAAE,iBAAiB;QACxB,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,MAAM;QACf,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,IAAI;QACZ,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,cAAc;QACxB,YAAY,EAAE,GAAG;QACjB,aAAa,EAAE,IAAI;QACnB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE;YACT,iBAAiB,EAAE,EAAE,eAAe,EAAE,sBAAsB,EAAE;YAC9D,iBAAiB,EAAE;gBACjB,OAAO,EAAE,gCAAgC;gBACzC,aAAa,EAAE,cAAc;aAC9B;YACD,YAAY,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;SACpC;KACF,EACD,EAAE,EAAE,EAAE,qCAAqC,EAAE,CAC9C,CAAA;AACH,CAAC,EA5CS,MAAM,KAAN,MAAM,QA4Cf"}

package/dist/platform/components/Spinner.d.ts

@@ -12,6 +12,7 @@ declare namespace styles {
             readonly backgroundColor: "transparent !custom";
             readonly border: "none !custom";
             readonly boxSizing: "border-box";
+            readonly color: "content.primary";
             readonly display: "inline-flex";
             readonly height: "16";
             readonly justifyContent: "center";

package/dist/platform/components/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/platform/components/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAIjC,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,+BAoB3C;AAED,yBAAiB,OAAO,CAAC;IACvB,KAAY,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAChE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAA;CAC7C;AAOD,kBAAU,MAAM,CAAC;IACR,MAAM,KAAK,gCAUjB,CAAA;IAEM,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA8BnB,CAAA;CACF"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/platform/components/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAIjC,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,+BAoB3C;AAED,yBAAiB,OAAO,CAAC;IACvB,KAAY,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAChE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAA;CAC7C;AAOD,kBAAU,MAAM,CAAC;IACR,MAAM,KAAK,gCASjB,CAAA;IAEM,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA+BnB,CAAA;CACF"}

package/dist/platform/components/Spinner.js

@@ -11,7 +11,6 @@ var styles;
 (function (styles) {
     styles.glyph = style({
         animation: `${rotation} 1s linear infinite !custom`,
-        color: '#000000 !custom',
         flexShrink: '0 !custom',
         height: '16',
         width: '16',
@@ -23,6 +22,7 @@ var styles;
             backgroundColor: 'transparent !custom',
             border: 'none !custom',
             boxSizing: 'border-box',
+            color: 'content.primary',
             display: 'inline-flex',
             height: '16',
             justifyContent: 'center',

package/dist/platform/components/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/platform/components/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,MAAM,yBAAyB,CAAA;AAGjD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AACpC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEnD,MAAM,UAAU,OAAO,CAAC,KAAoB;IAC1C,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IAE1D,OAAO,CACL,KAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,kBACR,SAAS,KAChB,UAAU,KACV,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,EACrE,KAAK,EAAE,IAAI,YAEX,8BAAiB,MAAM,KAAK,MAAM,CAAC,KAAK,EAAE,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,aACzE,iBAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,MAAM,GAAG,EACzE,eACE,CAAC,EAAC,+UAA+U,EACjV,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,GACrB,IACE,GACe,CACxB,CAAA;AACH,CAAC;AAOD,MAAM,QAAQ,GAAG,SAAS,CACxB,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAE,EAC5E,EAAE,EAAE,EAAE,+BAA+B,EAAE,CACxC,CAAA;AAED,IAAU,MAAM,CA4Cf;AA5CD,WAAU,MAAM;IACD,YAAK,GAAG,KAAK,CACxB;QACE,SAAS,EAAE,GAAG,QAAQ,6BAA6B;QACnD,KAAK,EAAE,iBAAiB;QACxB,UAAU,EAAE,WAAW;QACvB,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,IAAI;QACX,yCAAyC,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE;KACzE,EACD,EAAE,EAAE,EAAE,4BAA4B,EAAE,CACrC,CAAA;IAEY,cAAO,GAAG,QAAQ,CAC7B;QACE,IAAI,EAAE;YACJ,UAAU,EAAE,QAAQ;YACpB,eAAe,EAAE,qBAAqB;YACtC,MAAM,EAAE,cAAc;YACtB,SAAS,EAAE,YAAY;YACvB,OAAO,EAAE,aAAa;YACtB,MAAM,EAAE,IAAI;YACZ,cAAc,EAAE,QAAQ;YACxB,OAAO,EAAE,MAAM;YACf,KAAK,EAAE,IAAI;SACZ;QACD,eAAe,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;QACpC,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,KAAK,EAAE,EAAE;gBACT,IAAI,EAAE;oBACJ,eAAe,EAAE,sBAAsB;oBACvC,YAAY,EAAE,IAAI;oBAClB,SAAS,EACP,+GAA+G;oBACjH,MAAM,EAAE,cAAc;oBACtB,OAAO,EAAE,GAAG;oBACZ,KAAK,EAAE,cAAc;iBACtB;aACF;SACF;KACF,EACD,EAAE,EAAE,EAAE,sBAAsB,EAAE,CAC/B,CAAA;AACH,CAAC,EA5CS,MAAM,KAAN,MAAM,QA4Cf"}
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/platform/components/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,MAAM,yBAAyB,CAAA;AAGjD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AACpC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEnD,MAAM,UAAU,OAAO,CAAC,KAAoB;IAC1C,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IAE1D,OAAO,CACL,KAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,kBACR,SAAS,KAChB,UAAU,KACV,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,EACrE,KAAK,EAAE,IAAI,YAEX,8BAAiB,MAAM,KAAK,MAAM,CAAC,KAAK,EAAE,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,aACzE,iBAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,MAAM,GAAG,EACzE,eACE,CAAC,EAAC,+UAA+U,EACjV,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,GACrB,IACE,GACe,CACxB,CAAA;AACH,CAAC;AAOD,MAAM,QAAQ,GAAG,SAAS,CACxB,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAE,EAC5E,EAAE,EAAE,EAAE,+BAA+B,EAAE,CACxC,CAAA;AAED,IAAU,MAAM,CA4Cf;AA5CD,WAAU,MAAM;IACD,YAAK,GAAG,KAAK,CACxB;QACE,SAAS,EAAE,GAAG,QAAQ,6BAA6B;QACnD,UAAU,EAAE,WAAW;QACvB,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,IAAI;QACX,yCAAyC,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE;KACzE,EACD,EAAE,EAAE,EAAE,4BAA4B,EAAE,CACrC,CAAA;IAEY,cAAO,GAAG,QAAQ,CAC7B;QACE,IAAI,EAAE;YACJ,UAAU,EAAE,QAAQ;YACpB,eAAe,EAAE,qBAAqB;YACtC,MAAM,EAAE,cAAc;YACtB,SAAS,EAAE,YAAY;YACvB,KAAK,EAAE,iBAAiB;YACxB,OAAO,EAAE,aAAa;YACtB,MAAM,EAAE,IAAI;YACZ,cAAc,EAAE,QAAQ;YACxB,OAAO,EAAE,MAAM;YACf,KAAK,EAAE,IAAI;SACZ;QACD,eAAe,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;QACpC,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,KAAK,EAAE,EAAE;gBACT,IAAI,EAAE;oBACJ,eAAe,EAAE,sBAAsB;oBACvC,YAAY,EAAE,IAAI;oBAClB,SAAS,EACP,+GAA+G;oBACjH,MAAM,EAAE,cAAc;oBACtB,OAAO,EAAE,GAAG;oBACZ,KAAK,EAAE,cAAc;iBACtB;aACF;SACF;KACF,EACD,EAAE,EAAE,EAAE,sBAAsB,EAAE,CAC/B,CAAA;AACH,CAAC,EA5CS,MAAM,KAAN,MAAM,QA4Cf"}

package/dist/platform/components/TextInput.d.ts

@@ -58,7 +58,25 @@ declare namespace styles {
     const label: zyzz.style.ReturnType<"react">;
     const labels: zyzz.style.ReturnType<"react">;
     const secondaryLabel: zyzz.style.ReturnType<"react">;
-    const textInput: zyzz.style.ReturnType<"react">;
+    const textInput: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly display: "flex";
+            readonly flexDirection: "column";
+            readonly maxWidth: "100% !custom";
+            readonly width: "320px !custom";
+        };
+        readonly defaultVariants: {
+            readonly stretch: false;
+        };
+        readonly variants: {
+            readonly stretch: {
+                readonly false: {};
+                readonly true: {
+                    readonly width: "100% !custom";
+                };
+            };
+        };
+    }, "react">;
 }
 export {};
 //# sourceMappingURL=TextInput.d.ts.map