npm - @lutra-ui-system/react - Versions diffs - 0.1.0 - Mend

@lutra-ui-system/react 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (173) hide show

package/LICENSE +21 -0
package/README.md +240 -0
package/dist/components/button/button.d.ts +105 -0
package/dist/components/button/button.d.ts.map +1 -0
package/dist/components/button/button.js +91 -0
package/dist/components/button/button.js.map +1 -0
package/dist/components/button/index.d.ts +3 -0
package/dist/components/button/index.d.ts.map +1 -0
package/dist/components/button/index.js +2 -0
package/dist/components/button/index.js.map +1 -0
package/dist/components/card/card.d.ts +100 -0
package/dist/components/card/card.d.ts.map +1 -0
package/dist/components/card/card.js +51 -0
package/dist/components/card/card.js.map +1 -0
package/dist/components/card/index.d.ts +3 -0
package/dist/components/card/index.d.ts.map +1 -0
package/dist/components/card/index.js +2 -0
package/dist/components/card/index.js.map +1 -0
package/dist/components/checkbox/checkbox.d.ts +67 -0
package/dist/components/checkbox/checkbox.d.ts.map +1 -0
package/dist/components/checkbox/checkbox.js +63 -0
package/dist/components/checkbox/checkbox.js.map +1 -0
package/dist/components/checkbox/index.d.ts +3 -0
package/dist/components/checkbox/index.d.ts.map +1 -0
package/dist/components/checkbox/index.js +2 -0
package/dist/components/checkbox/index.js.map +1 -0
package/dist/components/dialog/dialog.d.ts +88 -0
package/dist/components/dialog/dialog.d.ts.map +1 -0
package/dist/components/dialog/dialog.js +156 -0
package/dist/components/dialog/dialog.js.map +1 -0
package/dist/components/dialog/index.d.ts +3 -0
package/dist/components/dialog/index.d.ts.map +1 -0
package/dist/components/dialog/index.js +2 -0
package/dist/components/dialog/index.js.map +1 -0
package/dist/components/dropdown/dropdown.d.ts +89 -0
package/dist/components/dropdown/dropdown.d.ts.map +1 -0
package/dist/components/dropdown/dropdown.js +173 -0
package/dist/components/dropdown/dropdown.js.map +1 -0
package/dist/components/dropdown/index.d.ts +3 -0
package/dist/components/dropdown/index.d.ts.map +1 -0
package/dist/components/dropdown/index.js +2 -0
package/dist/components/dropdown/index.js.map +1 -0
package/dist/components/error-summary/error-summary.d.ts +81 -0
package/dist/components/error-summary/error-summary.d.ts.map +1 -0
package/dist/components/error-summary/error-summary.js +85 -0
package/dist/components/error-summary/error-summary.js.map +1 -0
package/dist/components/error-summary/index.d.ts +3 -0
package/dist/components/error-summary/index.d.ts.map +1 -0
package/dist/components/error-summary/index.js +2 -0
package/dist/components/error-summary/index.js.map +1 -0
package/dist/components/field/field.d.ts +55 -0
package/dist/components/field/field.d.ts.map +1 -0
package/dist/components/field/field.js +26 -0
package/dist/components/field/field.js.map +1 -0
package/dist/components/field/index.d.ts +3 -0
package/dist/components/field/index.d.ts.map +1 -0
package/dist/components/field/index.js +2 -0
package/dist/components/field/index.js.map +1 -0
package/dist/components/field-group/field-group.d.ts +67 -0
package/dist/components/field-group/field-group.d.ts.map +1 -0
package/dist/components/field-group/field-group.js +38 -0
package/dist/components/field-group/field-group.js.map +1 -0
package/dist/components/field-group/index.d.ts +3 -0
package/dist/components/field-group/index.d.ts.map +1 -0
package/dist/components/field-group/index.js +2 -0
package/dist/components/field-group/index.js.map +1 -0
package/dist/components/input/index.d.ts +3 -0
package/dist/components/input/index.d.ts.map +1 -0
package/dist/components/input/index.js +2 -0
package/dist/components/input/index.js.map +1 -0
package/dist/components/input/input.d.ts +96 -0
package/dist/components/input/input.d.ts.map +1 -0
package/dist/components/input/input.js +26 -0
package/dist/components/input/input.js.map +1 -0
package/dist/components/link/index.d.ts +3 -0
package/dist/components/link/index.d.ts.map +1 -0
package/dist/components/link/index.js +2 -0
package/dist/components/link/index.js.map +1 -0
package/dist/components/link/link.d.ts +44 -0
package/dist/components/link/link.d.ts.map +1 -0
package/dist/components/link/link.js +26 -0
package/dist/components/link/link.js.map +1 -0
package/dist/components/link-card/index.d.ts +3 -0
package/dist/components/link-card/index.d.ts.map +1 -0
package/dist/components/link-card/index.js +2 -0
package/dist/components/link-card/index.js.map +1 -0
package/dist/components/link-card/link-card.d.ts +62 -0
package/dist/components/link-card/link-card.d.ts.map +1 -0
package/dist/components/link-card/link-card.js +43 -0
package/dist/components/link-card/link-card.js.map +1 -0
package/dist/components/mobile-navigation/index.d.ts +3 -0
package/dist/components/mobile-navigation/index.d.ts.map +1 -0
package/dist/components/mobile-navigation/index.js +2 -0
package/dist/components/mobile-navigation/index.js.map +1 -0
package/dist/components/mobile-navigation/mobile-navigation.d.ts +88 -0
package/dist/components/mobile-navigation/mobile-navigation.d.ts.map +1 -0
package/dist/components/mobile-navigation/mobile-navigation.js +153 -0
package/dist/components/mobile-navigation/mobile-navigation.js.map +1 -0
package/dist/components/navigation-item/index.d.ts +3 -0
package/dist/components/navigation-item/index.d.ts.map +1 -0
package/dist/components/navigation-item/index.js +2 -0
package/dist/components/navigation-item/index.js.map +1 -0
package/dist/components/navigation-item/navigation-item.d.ts +38 -0
package/dist/components/navigation-item/navigation-item.d.ts.map +1 -0
package/dist/components/navigation-item/navigation-item.js +22 -0
package/dist/components/navigation-item/navigation-item.js.map +1 -0
package/dist/components/radio/index.d.ts +3 -0
package/dist/components/radio/index.d.ts.map +1 -0
package/dist/components/radio/index.js +2 -0
package/dist/components/radio/index.js.map +1 -0
package/dist/components/radio/radio.d.ts +58 -0
package/dist/components/radio/radio.d.ts.map +1 -0
package/dist/components/radio/radio.js +37 -0
package/dist/components/radio/radio.js.map +1 -0
package/dist/components/select/index.d.ts +3 -0
package/dist/components/select/index.d.ts.map +1 -0
package/dist/components/select/index.js +2 -0
package/dist/components/select/index.js.map +1 -0
package/dist/components/select/select.d.ts +67 -0
package/dist/components/select/select.d.ts.map +1 -0
package/dist/components/select/select.js +25 -0
package/dist/components/select/select.js.map +1 -0
package/dist/components/select-field/index.d.ts +3 -0
package/dist/components/select-field/index.d.ts.map +1 -0
package/dist/components/select-field/index.js +2 -0
package/dist/components/select-field/index.js.map +1 -0
package/dist/components/select-field/select-field.d.ts +43 -0
package/dist/components/select-field/select-field.d.ts.map +1 -0
package/dist/components/select-field/select-field.js +24 -0
package/dist/components/select-field/select-field.js.map +1 -0
package/dist/components/table/index.d.ts +3 -0
package/dist/components/table/index.d.ts.map +1 -0
package/dist/components/table/index.js +2 -0
package/dist/components/table/index.js.map +1 -0
package/dist/components/table/table.d.ts +251 -0
package/dist/components/table/table.d.ts.map +1 -0
package/dist/components/table/table.js +209 -0
package/dist/components/table/table.js.map +1 -0
package/dist/components/toggle/index.d.ts +3 -0
package/dist/components/toggle/index.d.ts.map +1 -0
package/dist/components/toggle/index.js +2 -0
package/dist/components/toggle/index.js.map +1 -0
package/dist/components/toggle/toggle.d.ts +66 -0
package/dist/components/toggle/toggle.d.ts.map +1 -0
package/dist/components/toggle/toggle.js +49 -0
package/dist/components/toggle/toggle.js.map +1 -0
package/dist/components/tooltip/index.d.ts +3 -0
package/dist/components/tooltip/index.d.ts.map +1 -0
package/dist/components/tooltip/index.js +2 -0
package/dist/components/tooltip/index.js.map +1 -0
package/dist/components/tooltip/tooltip.d.ts +74 -0
package/dist/components/tooltip/tooltip.d.ts.map +1 -0
package/dist/components/tooltip/tooltip.js +180 -0
package/dist/components/tooltip/tooltip.js.map +1 -0
package/dist/index.d.ts +57 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +38 -0
package/dist/index.js.map +1 -0
package/dist/internal/development.d.ts +2 -0
package/dist/internal/development.d.ts.map +1 -0
package/dist/internal/development.js +2 -0
package/dist/internal/development.js.map +1 -0
package/dist/internal/field-support.d.ts +68 -0
package/dist/internal/field-support.d.ts.map +1 -0
package/dist/internal/field-support.js +42 -0
package/dist/internal/field-support.js.map +1 -0
package/dist/internal/isomorphic-layout-effect.d.ts +26 -0
package/dist/internal/isomorphic-layout-effect.d.ts.map +1 -0
package/dist/internal/isomorphic-layout-effect.js +26 -0
package/dist/internal/isomorphic-layout-effect.js.map +1 -0
package/dist/styles.css +3474 -0
package/dist/tokens.json +995 -0
package/package.json +76 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 My Duong
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,240 @@
+# @lutra-ui-system/react
+Accessibility-first React components for Lutra UI.
+> **Prepared for public release, not yet published.** The intended first public package is
+> `@lutra-ui-system/react@0.1.0`. Release automation, npm Trusted Publishing, and AWS-backed
+> Storybook deployment are prepared in this repository, but no npm package has been published yet.
+> See [`docs/releasing.md`](../../docs/releasing.md).
+## Usage
+After the first public release is published, consumers will install the package and its peer
+dependencies:
+```bash
+pnpm add @lutra-ui-system/react react react-dom
+```
+Import the stylesheet once, at the root of the application:
+```tsx
+// Next.js App Router: app/layout.tsx — Vite: src/main.tsx
+import '@lutra-ui-system/react/styles.css';
+```
+Then import components by name:
+```tsx
+import { Button } from '@lutra-ui-system/react';
+export function Example() {
+  return <Button onClick={save}>Save</Button>;
+}
+```
+### Fonts are the consumer's responsibility
+The library asks for IBM Plex Sans first and falls back through the system stack. **It does not load
+the font** — it adds no font package and makes no remote request, because how an application loads
+its typefaces is the application's decision. Load IBM Plex Sans yourself, or override
+`--lutra-font-family-sans`. Doing neither is fine: you get the system font.
+## Components
+The current public surface includes:
+- `Button`
+- `Card`, `CardFooter`, `LinkCard`
+- `Checkbox`, `Radio`, `Toggle`
+- `Dialog`, `Dropdown`, `Tooltip`
+- `Field`, `FieldGroup`, `Input`, `Select`, `SelectField`, `ErrorSummary`
+- `Link`, `NavigationItem`, `MobileNavigation`
+- `Table`, `TableRow`, `TableHeaderCell`, `TableCell`, `TableSelectionCell`, `TableRowActions`,
+  `TableEmptyState`
+Component contracts live in their colocated Markdown files under `src/components/<component-name>/`,
+and Storybook is the reviewable runtime reference for states, themes, and representative layouts.
+## Design tokens
+192 design tokens, generated from the Lutra UI Figma library and declared as CSS custom properties by
+the stylesheet you already imported. Components read them; you can override them.
+```css
+--lutra-color-text-primary: #111827;
+--lutra-space-sm: 0.5rem;
+--lutra-radius-md: 0.5rem;
+```
+Full reference — naming, units, the sync process, the editing rule — is in
+[`docs/design-tokens.md`](../../docs/design-tokens.md).
+### Themes
+Light is the default. Dark is one attribute, on any element:
+```html
+<html data-theme="dark"></html>
+```
+The library does **not** read `prefers-color-scheme`. Deciding when an application is dark belongs to
+the application, and plenty have no dark design at all — so set `data-theme` from your own theme
+logic, where a user's explicit choice can still win over the system preference.
+### Overriding a token
+Override on any element below the root and it wins outright, because a declaration on an element
+beats one inherited into it:
+```css
+.my-brand-section {
+  --lutra-color-brand-primary: #005ea2;
+}
+```
+Overriding at `:root` also works, but your stylesheet must load **after** `@lutra-ui-system/react/styles.css`
+— `:root` and `[data-theme]` have equal specificity, so source order decides.
+### Tokens as data
+```ts
+import tokens from '@lutra-ui-system/react/tokens.json' with { type: 'json' };
+```
+Each entry carries its Figma name, whether it is themed, and its value or its light/dark pair. Useful
+for tooling; components should read the CSS custom properties.
+## Public API
+`src/index.ts` is the only supported entry point, and every export in it is listed explicitly. There
+are no deep imports: the `exports` map allows `@lutra-ui-system/react`,
+`@lutra-ui-system/react/styles.css`, and `@lutra-ui-system/react/tokens.json`, and nothing else.
+## Source layout
+Components live one per directory under `src/components/`, in lowercase kebab-case, with the
+implementation filename matching the directory:
+```
+src/
+├── index.ts                    the package's public API
+├── styles.css                  the stylesheet entry point; composes the files below
+├── tokens/                     the design-token layer
+│   ├── source.json             CANONICAL — the only hand-edited token file
+│   ├── generated.css           GENERATED — do not edit
+│   ├── generated.json          GENERATED — do not edit
+│   └── tokens.test.ts          token contract tests
+├── internal/                   shared internals; never exported from the package root
+│   └── development.ts
+└── components/
+    └── button/
+        ├── button.tsx          implementation
+        ├── button.test.tsx     colocated tests
+        ├── button.css          component styles and component tokens
+        ├── button.md           component documentation
+        └── index.ts            local barrel
+```
+Development-only directories sit outside `src/`, where `tsconfig.build.json`'s `rootDir` cannot
+compile them into `dist`:
+```
+.storybook/                     Storybook configuration
+stories/foundations/            Foundations documentation and token verification
+scripts/                        build scripts, including the token generator
+```
+A component is exported from its own `index.ts`; making it public is the separate, deliberate act of
+adding it to `src/index.ts`. See [`docs/engineering-guidelines.md`](../../docs/engineering-guidelines.md)
+sections 2 and 4.
+## How it is built
+The package is compiled with `tsc` — there is no bundler. The build runs four steps:
+```
+node scripts/clean-dist.mjs       remove dist/ so no stale output survives
+node scripts/generate-tokens.mjs  regenerate the token layer from source.json
+tsc -p tsconfig.build.json        emit JavaScript, declarations, and source maps
+node scripts/build-assets.mjs     assemble dist/styles.css and dist/tokens.json, and verify both
+```
+```
+src/index.ts                             ->  dist/index.js + dist/index.d.ts
+src/components/**/*.ts(x)                ->  dist/components/**/*.js + .d.ts
+src/styles.css + tokens + component CSS  ->  dist/styles.css   (one flat file)
+src/tokens/generated.json                ->  dist/tokens.json
+```
+Storybook is not part of this. It has its own command, it is never invoked by `pnpm build`, and
+nothing under `.storybook/` or `stories/` can reach `dist`. The AWS deployment publishes that
+separate Storybook build; it does not publish the npm package.
+- **Every build starts from a clean `dist/`.** `tsc` only overwrites the files it emits, so without
+  the clean step the output of a renamed or deleted source file would survive and keep being
+  published — a stale `.d.ts` in particular would have consumers type-checking against an export
+  that no longer exists. The clean step uses `node:fs/promises` rather than a deletion dependency,
+  and removes only this package's own `dist/`.
+- **ESM only**, one output file per source file, so consumer bundlers can drop unused exports.
+  `sideEffects` is set to `["*.css"]` so the JavaScript is known to be side-effect free.
+- **Declarations and source maps** are emitted alongside the JavaScript.
+- **Relative imports carry explicit `.js` extensions**, so the output resolves correctly under Node
+  ESM as well as under bundlers.
+- **`react` and `react-dom` are peer dependencies.** They appear in `peerDependencies`, and in
+  `devDependencies` only so the package can be tested. Because nothing bundles, every React import
+  survives into the output as a bare specifier and resolves to the consumer's own copy. There is no
+  way for a second React to be included.
+## Styling
+Styles are a plain CSS file, shipped separately and imported by the consumer. The JavaScript never
+imports CSS, so no bundler configuration is required and the stylesheet cannot be dragged into a
+server bundle.
+On the source side the stylesheet is split across the generated token layer and one file per
+component, and composed with plain `@import`. The build inlines those imports, so `dist/styles.css`
+is one flat file with no `@import` left in it — the consumer's bundler is never asked to resolve
+relative CSS imports out of `node_modules`, and the browser never pays for extra render-blocking
+requests. The build fails if an import survives.
+Rules for anything added to the stylesheet:
+- prefix every selector with `lutra-`
+- the only global selectors permitted are the token layer's `:root` and `[data-theme]` blocks, and
+  they declare custom properties and nothing else — a stylesheet must not restyle a page it was
+  merely imported into, and a custom property declaration paints nothing
+- take every value from a design token; no raw colours, sizes, or type
+- size in `rem` with unitless line heights, so the library respects user font size and zoom; border
+  and outline widths stay in `px`
+- never convey state through colour alone
+- let text wrap rather than overflow or clip
+## Server rendering and static export
+The package is safe for Next.js server rendering and static export:
+- no browser global is touched while a module is being evaluated — no `window`, `document`,
+  `navigator`, or `matchMedia` at module scope
+- no CSS is imported from JavaScript
+- components render correctly in a Node process with no DOM present
+Any component that genuinely needs a browser API must reach for it inside an effect or an event
+handler, never during module initialisation or the first render.
+## Development
+From the repository root:
+```bash
+pnpm exec nx run @lutra-ui-system/react:build
+pnpm exec nx run @lutra-ui-system/react:test
+pnpm exec nx run @lutra-ui-system/react:typecheck
+pnpm exec nx run @lutra-ui-system/react:lint
+```
+Tests use Vitest with jsdom and React Testing Library, and query by role and accessible name. See
+[`docs/engineering-guidelines.md`](../../docs/engineering-guidelines.md) for the authoritative
+conventions, [`docs/accessibility.md`](../../docs/accessibility.md) for the rules every component
+must meet, [`docs/package-distribution.md`](../../docs/package-distribution.md) for packed-artifact
+verification, and [`CONTRIBUTING.md`](../../CONTRIBUTING.md) for review expectations.

package/dist/components/button/button.d.ts ADDED Viewed

@@ -0,0 +1,105 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+/** Visual prominence. Maps to the `variant` axis of the Figma component set. */
+export type ButtonVariant = 'primary' | 'secondary' | 'danger';
+/** Drawn size. Maps to the `size` axis of the Figma component set. */
+export type ButtonSize = 'sm' | 'md' | 'lg';
+/**
+ * What the button is made of. `'text'` buttons are named by their visible label;
+ * `'icon-only'` buttons show one icon and must be named explicitly.
+ */
+export type ButtonContentType = 'text' | 'icon-only';
+/**
+ * Native `<button>` attributes, minus `children`, which each content type
+ * redefines. Keeping the rest means `name`, `value`, `form`, `formAction`,
+ * `onClick`, every `aria-*`, and every `data-*` continue to work exactly as they
+ * do on a plain `<button>`.
+ */
+type NativeButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;
+interface ButtonSharedProps extends NativeButtonProps {
+    /** @default 'primary' */
+    variant?: ButtonVariant;
+    /** @default 'md' */
+    size?: ButtonSize;
+    /**
+     * Marks the action as in progress. The button becomes natively disabled and
+     * exposes `aria-busy="true"`, and a decorative spinner replaces the icon slot.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Stretches the button to the width of its container. Layout only — it is not
+     * a variant and changes nothing else about the button.
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+}
+/**
+ * A button labelled by its own visible text, optionally with decorative icons on
+ * either side.
+ */
+export interface ButtonTextProps extends ButtonSharedProps {
+    /** @default 'text' */
+    contentType?: 'text';
+    /** The visible label. It is also the button's accessible name. */
+    children: ReactNode;
+    /** Decorative icon before the label. Never a replacement for the label. */
+    leftIcon?: ReactNode;
+    /** Decorative icon after the label. Never a replacement for the label. */
+    rightIcon?: ReactNode;
+    /**
+     * Replaces the visible label while `loading` is true — "Saving…" in place of
+     * "Save". Omit it to keep the original label. Either way the button keeps the
+     * greater of the two widths, so swapping the text does not shift the layout.
+     */
+    loadingLabel?: string;
+}
+/**
+ * An icon-only button has no visible text, so it cannot name itself. Exactly one
+ * of `aria-label` or `aria-labelledby` is required, and TypeScript enforces it:
+ * an icon-only button with no accessible name is unusable with a screen reader
+ * and is not a state this component allows a consumer to reach by accident.
+ */
+type ButtonAccessibleName = {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} | {
+    'aria-labelledby': string;
+    'aria-label'?: never;
+};
+/** A button whose entire content is one icon. */
+export type ButtonIconOnlyProps = ButtonSharedProps & {
+    contentType: 'icon-only';
+    /** Exactly one icon. Not text — an icon-only button shows no visible label. */
+    children: ReactNode;
+    /** Not available: an icon-only button's single icon is its `children`. */
+    leftIcon?: never;
+    /** Not available: an icon-only button's single icon is its `children`. */
+    rightIcon?: never;
+    /** Not available: an icon-only button has no visible label to replace. */
+    loadingLabel?: never;
+} & ButtonAccessibleName;
+/**
+ * The two shapes a Button can take. A union rather than one wide interface,
+ * because the icon-only contract genuinely differs: it forbids the icon slots,
+ * forbids a loading label, and requires an accessible name.
+ */
+export type ButtonProps = ButtonTextProps | ButtonIconOnlyProps;
+/**
+ * A button that triggers an immediate action.
+ *
+ * Renders a native `<button>`, so keyboard activation with Space and Enter, focus
+ * behaviour, form participation, and disabled semantics come from the platform
+ * rather than from this component. `type` defaults to `"button"` so a button
+ * inside a form cannot submit it by accident.
+ *
+ * Hover, active and focus are browser states expressed in CSS, not props. The
+ * only states Button models are the ones a consumer owns: `disabled` and
+ * `loading`.
+ *
+ * Consumers are responsible for loading IBM Plex Sans; see `button.md`.
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button/button.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,gFAAgF;AAChF,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE/D,sEAAsE;AACtE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,WAAW,CAAC;AAErD;;;;;GAKG;AACH,KAAK,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnF,UAAU,iBAAkB,SAAQ,iBAAiB;IACnD,yBAAyB;IACzB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,sBAAsB;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;GAKG;AACH,KAAK,oBAAoB,GACrB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAExD,iDAAiD;AACjD,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG;IACpD,WAAW,EAAE,WAAW,CAAC;IACzB,+EAA+E;IAC/E,QAAQ,EAAE,SAAS,CAAC;IACpB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB,GAAG,oBAAoB,CAAC;AAEzB;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,mBAAmB,CAAC;AAuEhE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,MAAM,2GAwFjB,CAAC"}

package/dist/components/button/button.js ADDED Viewed

@@ -0,0 +1,91 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, forwardRef } from 'react';
+import { isDevelopment } from '../../internal/development.js';
+/**
+ * Wraps consumer icon content in the stable 16px slot from the Figma
+ * documentation, and hides it from assistive technology.
+ *
+ * The icon is hidden rather than described because Button treats icons as
+ * decoration: a text button is named by its label, and an icon-only button by its
+ * `aria-label`. Announcing the icon as well would only duplicate that name. The
+ * consumer's element is rendered as given — Button never clones it to force ARIA
+ * onto it, which would silently overwrite attributes the consumer set on purpose.
+ */
+function ButtonIcon({ children }) {
+    return (_jsx("span", { className: "lutra-button__icon", "aria-hidden": "true", children: children }));
+}
+/**
+ * The loading indicator: a CSS ring, not an image.
+ *
+ * `aria-hidden` keeps it silent, because `aria-busy` on the button already
+ * announces the state — a screen reader that also read the spinner would be
+ * describing the same thing twice. Its animation is slowed right down under
+ * `prefers-reduced-motion: reduce`; see `button.css`.
+ */
+function ButtonSpinner() {
+    return _jsx("span", { className: "lutra-button__spinner", "aria-hidden": "true" });
+}
+/**
+ * Reports the invalid content combinations that the type union cannot express.
+ *
+ * TypeScript already makes most invalid states unrepresentable. What is left is
+ * everything that depends on the *value* of `children` — how many there are, and
+ * whether they are text — plus the accessible name, which a JavaScript consumer
+ * can still omit. Those are warned about rather than thrown, because a broken
+ * label should not take an application down, and rather than papered over,
+ * because guessing a name from an icon produces a label no user asked for.
+ */
+function warnAboutInvalidIconOnlyContent(children, accessibleName, accessibleNameReference) {
+    if (accessibleName === undefined && accessibleNameReference === undefined) {
+        console.warn('Button: an icon-only button has no accessible name. Pass `aria-label` or ' +
+            '`aria-labelledby` — an icon alone cannot name a control.');
+    }
+    if (typeof children === 'string' || typeof children === 'number') {
+        console.warn('Button: an icon-only button was given text content. Use the default ' +
+            '`contentType="text"` for a button with a visible label.');
+        return;
+    }
+    const iconCount = Children.count(children);
+    if (iconCount !== 1) {
+        console.warn(`Button: an icon-only button expects exactly one icon, but received ${String(iconCount)}.`);
+    }
+}
+/**
+ * A button that triggers an immediate action.
+ *
+ * Renders a native `<button>`, so keyboard activation with Space and Enter, focus
+ * behaviour, form participation, and disabled semantics come from the platform
+ * rather than from this component. `type` defaults to `"button"` so a button
+ * inside a form cannot submit it by accident.
+ *
+ * Hover, active and focus are browser states expressed in CSS, not props. The
+ * only states Button models are the ones a consumer owns: `disabled` and
+ * `loading`.
+ *
+ * Consumers are responsible for loading IBM Plex Sans; see `button.md`.
+ */
+export const Button = forwardRef(function Button({ variant = 'primary', size = 'md', contentType = 'text', loading = false, fullWidth = false, type = 'button', disabled = false, className, children, leftIcon, rightIcon, loadingLabel, ...nativeProps }, ref) {
+    const isIconOnly = contentType === 'icon-only';
+    // Loading is a kind of unavailable, so it disables natively rather than
+    // intercepting clicks. A disabled button fires no click event at all, which is
+    // stronger than a guard in a handler the consumer could route around, and it
+    // also removes the button from the tab order the way the platform intends.
+    const isDisabled = disabled || loading;
+    if (isDevelopment && isIconOnly) {
+        warnAboutInvalidIconOnlyContent(children, nativeProps['aria-label'], nativeProps['aria-labelledby']);
+    }
+    // The visible label is swapped only when there is something to swap it for.
+    // Both strings stay in the DOM so the button keeps the wider of the two widths;
+    // the one that is not current is hidden from sight and from assistive
+    // technology, so the accessible name is always exactly the visible label.
+    const isLabelSwapped = loading && loadingLabel !== undefined;
+    return (_jsx("button", { ...nativeProps, ref: ref, type: type, className: className === undefined ? 'lutra-button' : `lutra-button ${className}`, disabled: isDisabled, "aria-busy": loading || undefined, "data-variant": variant, "data-size": size, "data-content-type": contentType, "data-full-width": fullWidth ? 'true' : undefined, children: isIconOnly ? (
+        // The spinner takes the icon's place rather than joining it, so the
+        // button neither grows nor shows two things at once. Its accessible name
+        // comes from `aria-label`, which loading does not touch.
+        loading ? (_jsx(ButtonSpinner, {})) : (_jsx(ButtonIcon, { children: children }))) : (_jsxs(_Fragment, { children: [loading ? _jsx(ButtonSpinner, {}) : leftIcon ? _jsx(ButtonIcon, { children: leftIcon }) : null, _jsx("span", { className: isLabelSwapped
+                        ? 'lutra-button__label lutra-button__label--swapped'
+                        : 'lutra-button__label', children: isLabelSwapped ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "lutra-button__label-measure", "aria-hidden": "true", children: children }), _jsx("span", { children: loadingLabel })] })) : (children) }), rightIcon ? _jsx(ButtonIcon, { children: rightIcon }) : null] })) }));
+});
+Button.displayName = 'Button';
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/components/button/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { Button } from './button.js';
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonContentType } from './button.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/button/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { Button } from './button.js';
2	+ //# sourceMappingURL=index.js.map

package/dist/components/button/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/card/card.d.ts ADDED Viewed

@@ -0,0 +1,100 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/**
+ * How the card separates itself from what is behind it. Maps to the `elevation` axis of the Figma
+ * component set.
+ *
+ * `'flat'` is the default and is right on a plain background. `'raised'` adds the `Elevation/Small`
+ * shadow and is for a card sitting over busy or scrolling content.
+ *
+ * Both keep the border, and that matters: in dark mode the border does most of the separating, which
+ * is why a flat card still reads as a bounded surface there.
+ */
+export type CardElevation = 'flat' | 'raised';
+/**
+ * The heading level the card's title renders at.
+ *
+ * There is no default, and that is deliberate. The annotation is explicit that the title is a real
+ * heading at the level its surrounding section requires — the next level down from whatever precedes
+ * it — and **never fixed at `h3` because the visual size happens to be 18px**. A default would put
+ * every card in an application at the same level regardless of where it sits, which is exactly the
+ * broken outline the rule exists to prevent. A heading outline built from visual sizes is not an
+ * outline.
+ *
+ * `h1` is absent because a card is never the page title.
+ */
+export type HeadingLevel = 2 | 3 | 4 | 5 | 6;
+/**
+ * Native `<div>` attributes, minus `title`.
+ *
+ * `title` here is the card's own visible heading, which is a `ReactNode`, and it takes the name the
+ * Figma property uses and that Dialog already uses for the same thing. The native `title` attribute
+ * is not forwarded as a result — no loss, since a browser tooltip on a container is unreachable by
+ * keyboard and invisible on touch.
+ */
+type NativeDivProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
+export interface CardProps extends NativeDivProps {
+    /** The visible heading. */
+    title: ReactNode;
+    /** The level the heading renders at. Required — see {@link HeadingLevel}. */
+    headingLevel: HeadingLevel;
+    /**
+     * Metadata directly under the heading, in the same block, reading as one unit with it.
+     *
+     * It is metadata, not a second heading. **It must never be the only place a piece of information
+     * appears.**
+     */
+    supportingText?: ReactNode;
+    /** @default 'flat' */
+    elevation?: CardElevation;
+    /** The action row. A `CardFooter`, holding at most two buttons. */
+    footer?: ReactNode;
+    /** The body. */
+    children?: ReactNode;
+}
+/**
+ * A bounded surface grouping related content and its actions.
+ *
+ * **A card is a container, not a control.** A border and a shadow do not make something interactive:
+ * it has no click behaviour, adds nothing to the tab order, and is not a landmark. The buttons and
+ * links inside it are the tab stops. If the whole surface should be one destination, that is
+ * `LinkCard` — a different component, because it is a different thing.
+ *
+ * It is also not a landmark by default. Pass `role="region"` only when the card genuinely needs to be
+ * reachable as one; when you do, the card names it from its own heading automatically, because an
+ * unnamed region is worse than no region. Your own `aria-labelledby` wins if you pass one.
+ *
+ * That automatic naming is for `role="region"` and nothing else. Any other role passes straight
+ * through — naming it is yours to do, and a name invented here would be one you never asked for.
+ *
+ * Nothing here introduces type, spacing or colour of its own — everything is composed from existing
+ * Lutra UI foundations, so a card never becomes a second place where those decisions are made.
+ */
+export declare function Card({ title, headingLevel, supportingText, elevation, footer, children, className, role, ...nativeProps }: CardProps): import("react").JSX.Element;
+/** Where the actions sit. Maps to the `align` axis of the Figma component set. */
+export type CardFooterAlign = 'start' | 'end';
+export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * `'end'` for a bounded card in a grid, matching the dialog convention of primary last.
+     * `'start'` for a full-width or form-like card, where primary first reads more naturally.
+     *
+     * @default 'end'
+     */
+    align?: CardFooterAlign;
+    /** At most two buttons. A third belongs in a menu. */
+    children: ReactNode;
+}
+/**
+ * The action row at the bottom of a card.
+ *
+ * **`align` moves the row, never the buttons.** It sets `justify-content` and nothing else — there is
+ * no `row-reverse` here, because DOM order has to match visual order so focus order matches reading
+ * order. Which button comes first is therefore something you write, not something this component
+ * rearranges: put the primary action last for `align="end"`, first for `align="start"`.
+ *
+ * The buttons keep Button's own contract and are the only focusable things in the card. A
+ * destructive action still needs its own confirmation step — danger styling communicates a
+ * consequence, it does not prevent one.
+ */
+export declare function CardFooter({ align, children, className, ...nativeProps }: CardFooterProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=card.d.ts.map

package/dist/components/card/card.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;;;;;;;;GASG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE9C;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE7C;;;;;;;GAOG;AACH,KAAK,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;AAEpE,MAAM,WAAW,SAAU,SAAQ,cAAc;IAC/C,2BAA2B;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,6EAA6E;IAC7E,YAAY,EAAE,YAAY,CAAC;IAC3B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,sBAAsB;IACtB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,mEAAmE;IACnE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,YAAY,EACZ,cAAc,EACd,SAAkB,EAClB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,GAAG,WAAW,EACf,EAAE,SAAS,+BAqCX;AAED,kFAAkF;AAClF,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,KAAK,CAAC;AAE9C,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE;;;;;OAKG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAa,EACb,QAAQ,EACR,SAAS,EACT,GAAG,WAAW,EACf,EAAE,eAAe,+BAUjB"}

package/dist/components/card/card.js ADDED Viewed

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+/**
+ * A bounded surface grouping related content and its actions.
+ *
+ * **A card is a container, not a control.** A border and a shadow do not make something interactive:
+ * it has no click behaviour, adds nothing to the tab order, and is not a landmark. The buttons and
+ * links inside it are the tab stops. If the whole surface should be one destination, that is
+ * `LinkCard` — a different component, because it is a different thing.
+ *
+ * It is also not a landmark by default. Pass `role="region"` only when the card genuinely needs to be
+ * reachable as one; when you do, the card names it from its own heading automatically, because an
+ * unnamed region is worse than no region. Your own `aria-labelledby` wins if you pass one.
+ *
+ * That automatic naming is for `role="region"` and nothing else. Any other role passes straight
+ * through — naming it is yours to do, and a name invented here would be one you never asked for.
+ *
+ * Nothing here introduces type, spacing or colour of its own — everything is composed from existing
+ * Lutra UI foundations, so a card never becomes a second place where those decisions are made.
+ */
+export function Card({ title, headingLevel, supportingText, elevation = 'flat', footer, children, className, role, ...nativeProps }) {
+    const titleId = `lutra-card-title-${useId()}`;
+    const Heading = `h${headingLevel}`;
+    const hasSupportingText = supportingText !== undefined && supportingText !== null && supportingText !== false;
+    const hasBody = children !== undefined && children !== null && children !== false;
+    const hasFooter = footer !== undefined && footer !== null && footer !== false;
+    // A region with no name is a worse landmark than none at all, and the heading is the name the
+    // annotation asks for — so `role="region"`, and only that, gets the relationship filled in.
+    //
+    // Deliberately not every role. Another role a consumer reaches for is theirs to name, and quietly
+    // pointing it at the card's own heading would either duplicate a name they meant to supply
+    // elsewhere or invent one they never asked for. A consumer's own `aria-labelledby` always wins.
+    const labelledBy = role === 'region' && nativeProps['aria-labelledby'] === undefined ? titleId : undefined;
+    return (_jsxs("div", { ...nativeProps, ...(role === undefined ? {} : { role }), ...(labelledBy === undefined ? {} : { 'aria-labelledby': labelledBy }), className: className === undefined ? 'lutra-card' : `lutra-card ${className}`, "data-elevation": elevation, children: [_jsxs("div", { className: "lutra-card__header", children: [_jsx(Heading, { className: "lutra-card__title", id: titleId, children: title }), hasSupportingText && _jsx("p", { className: "lutra-card__supporting-text", children: supportingText })] }), hasBody && _jsx("div", { className: "lutra-card__body", children: children }), hasFooter && footer] }));
+}
+/**
+ * The action row at the bottom of a card.
+ *
+ * **`align` moves the row, never the buttons.** It sets `justify-content` and nothing else — there is
+ * no `row-reverse` here, because DOM order has to match visual order so focus order matches reading
+ * order. Which button comes first is therefore something you write, not something this component
+ * rearranges: put the primary action last for `align="end"`, first for `align="start"`.
+ *
+ * The buttons keep Button's own contract and are the only focusable things in the card. A
+ * destructive action still needs its own confirmation step — danger styling communicates a
+ * consequence, it does not prevent one.
+ */
+export function CardFooter({ align = 'end', children, className, ...nativeProps }) {
+    return (_jsx("div", { ...nativeProps, className: className === undefined ? 'lutra-card-footer' : `lutra-card-footer ${className}`, "data-align": align, children: children }));
+}
+//# sourceMappingURL=card.js.map

package/dist/components/card/card.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AA2D9B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,IAAI,CAAC,EACnB,KAAK,EACL,YAAY,EACZ,cAAc,EACd,SAAS,GAAG,MAAM,EAClB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,GAAG,WAAW,EACJ;IACV,MAAM,OAAO,GAAG,oBAAoB,KAAK,EAAE,EAAE,CAAC;IAC9C,MAAM,OAAO,GAAG,IAAI,YAAY,EAAW,CAAC;IAE5C,MAAM,iBAAiB,GACrB,cAAc,KAAK,SAAS,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,KAAK,CAAC;IACtF,MAAM,OAAO,GAAG,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,KAAK,CAAC;IAClF,MAAM,SAAS,GAAG,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,KAAK,CAAC;IAE9E,8FAA8F;IAC9F,4FAA4F;IAC5F,EAAE;IACF,kGAAkG;IAClG,2FAA2F;IAC3F,gGAAgG;IAChG,MAAM,UAAU,GACd,IAAI,KAAK,QAAQ,IAAI,WAAW,CAAC,iBAAiB,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1F,OAAO,CACL,kBACM,WAAW,KACX,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,KACpC,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC,EACvE,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,SAAS,EAAE,oBAC7D,SAAS,aAEzB,eAAK,SAAS,EAAC,oBAAoB,aACjC,KAAC,OAAO,IAAC,SAAS,EAAC,mBAAmB,EAAC,EAAE,EAAE,OAAO,YAC/C,KAAK,GACE,EACT,iBAAiB,IAAI,YAAG,SAAS,EAAC,6BAA6B,YAAE,cAAc,GAAK,IACjF,EAEL,OAAO,IAAI,cAAK,SAAS,EAAC,kBAAkB,YAAE,QAAQ,GAAO,EAC7D,SAAS,IAAI,MAAM,IAChB,CACP,CAAC;AACJ,CAAC;AAiBD;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,SAAS,EACT,GAAG,WAAW,EACE;IAChB,OAAO,CACL,iBACM,WAAW,EACf,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,SAAS,EAAE,gBAC/E,KAAK,YAEhB,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}