@lablup/ui-common 0.1.0-alpha.9 → 0.2.0-alpha.16

package/astryx/components/TokenList.doc.mjs

@@ -0,0 +1,58 @@
+/**
+ * `astryx component TokenList` (and `ui-common component TokenList`).
+ *
+ * @type {import('@astryxdesign/cli/authoring').ComponentDoc}
+ */
+export default {
+  type: "component",
+  name: "TokenList",
+  displayName: "TokenList",
+  import: "@lablup/ui-common",
+  category: "Data Display",
+  keywords: ["tokens", "tags", "overflow", "more", "list", "emails"],
+  description:
+    "A bounded list of settled values: the first maxInline items inline, then +N that shows the rest on hover and focus in a HoverCard (a Popover with trigger=click). variant=token draws Tokens and a +N link; variant=text draws plain text and a +N badge for dense table cells.",
+  props: [
+    {
+      name: "items",
+      type: "ReadonlyArray<string | number>",
+      description: "The values.",
+      required: true,
+    },
+    {
+      name: "maxInline",
+      type: "number",
+      description: "How many items show inline before +N.",
+      default: "3",
+    },
+    {
+      name: "emptyText",
+      type: "ReactNode",
+      description: "Rendered instead of the list when items is empty.",
+      default: "'-'",
+    },
+    {
+      name: "variant",
+      type: "'token' | 'text'",
+      description:
+        "token for Tokens and a +N link, text for plain text and a +N badge.",
+      default: "'token'",
+    },
+    {
+      name: "trigger",
+      type: "'hover' | 'click'",
+      description: "How the overflow opens.",
+      default: "'hover'",
+    },
+  ],
+  usage: {
+    description:
+      "A cell or field that holds a list of values of unknown length, such as a user's groups.",
+  },
+  examples: [
+    {
+      label: "In a table cell",
+      code: '<TokenList items={emails} maxInline={2} variant="text" />',
+    },
+  ],
+};

package/astryx/components/TokenList.tsx

@@ -0,0 +1,3 @@
+// The Astryx CLI pairs each component doc with a same-stem source file.
+// ui-common ships no source, so this names the export instead.
+export { TokenList } from "@lablup/ui-common";

package/astryx/components/TokenRow.doc.mjs

@@ -0,0 +1,62 @@
+/**
+ * `astryx component TokenRow` (and `ui-common component TokenRow`).
+ *
+ * @type {import('@astryxdesign/cli/authoring').ComponentDoc}
+ */
+export default {
+  type: "component",
+  name: "TokenRow",
+  displayName: "TokenRow",
+  import: "@lablup/ui-common",
+  category: "Data Display",
+  keywords: ["tokens", "tags", "row", "and more", "overflow", "count"],
+  description:
+    'A row of read-only tokens that stops at maxCount and ends with "and N more". With totalCount, the count reports the whole collection when items is only a fetched page.',
+  props: [
+    {
+      name: "items",
+      type: "ReadonlyArray<{ key?: Key; label: string }>",
+      description: "The tokens, in order.",
+      required: true,
+    },
+    {
+      name: "maxCount",
+      type: "number",
+      description: "How many tokens render before the count.",
+      default: "3",
+    },
+    {
+      name: "totalCount",
+      type: "number",
+      description: "Size of the whole collection when items is a page of it.",
+      default: "items.length",
+    },
+    {
+      name: "color",
+      type: "TokenColor",
+      description: "Colour of every token.",
+    },
+    {
+      name: "emptyText",
+      type: "ReactNode",
+      description: "Rendered instead of the row when there is nothing to show.",
+      default: "'-'",
+    },
+    {
+      name: "moreLabel",
+      type: "(count: number) => string",
+      description: "The count after the tokens, given how many were left out.",
+      default: 'the catalog\'s uic.TokenRow.more ("and {count} more")',
+    },
+  ],
+  usage: {
+    description:
+      "A table cell listing a record's aliases or members, where one long record must not stretch the row. Other div attributes reach the row.",
+  },
+  examples: [
+    {
+      label: "Aliases, two shown",
+      code: "<TokenRow items={aliases.map((a) => ({ key: a, label: a }))} maxCount={2} />",
+    },
+  ],
+};

package/astryx/components/TokenRow.tsx

@@ -0,0 +1,3 @@
+// The Astryx CLI pairs each component doc with a same-stem source file.
+// ui-common ships no source, so this names the export instead.
+export { TokenRow } from "@lablup/ui-common";

package/astryx/components/UncontrolledInput.doc.mjs

@@ -0,0 +1,68 @@
+/**
+ * `astryx component UncontrolledInput` (and `ui-common component UncontrolledInput`).
+ *
+ * @type {import('@astryxdesign/cli/authoring').ComponentDoc}
+ */
+export default {
+  type: "component",
+  name: "UncontrolledInput",
+  displayName: "UncontrolledInput",
+  import: "@lablup/ui-common",
+  category: "Inputs",
+  keywords: ["input", "commit", "on blur", "enter", "uncontrolled", "setting"],
+  description:
+    "A text or number field that reports its value only when the user commits it, by pressing Enter or leaving the field. On Astryx TextInput and NumberInput.",
+  props: [
+    {
+      name: "defaultValue",
+      type: "string",
+      description: "Initial value. A new value drops an uncommitted edit.",
+    },
+    {
+      name: "onCommit",
+      type: "(value: string) => void",
+      description: "Called on Enter and on blur.",
+    },
+    {
+      name: "type",
+      type: '"text" | "number" | "password" | "email"',
+      description: "number renders NumberInput.",
+      default: '"text"',
+    },
+    { name: "placeholder", type: "string", description: "Placeholder text." },
+    { name: "isDisabled", type: "boolean", description: "Disable the field." },
+    {
+      name: "status",
+      type: "TextInputStatus",
+      description: "Validation state, as on TextInput.",
+    },
+    {
+      name: "label",
+      type: "string",
+      description: "Accessible name.",
+      default: 'the catalog\'s uic.UncontrolledInput.label ("Select"), hidden',
+    },
+    {
+      name: "isLabelHidden",
+      type: "boolean",
+      description: "Hide the label.",
+      default: "true without label, else false",
+    },
+  ],
+  usage: {
+    description:
+      "For a value whose change is expensive (persisting a setting, refetching). For a live value, use TextInput.",
+    bestPractices: [
+      {
+        guidance: true,
+        description: "Pass a real label; the catalog fallback is a placeholder name.",
+      },
+    ],
+  },
+  examples: [
+    {
+      label: "A persisted setting",
+      code: '<UncontrolledInput label="Page size" type="number" defaultValue="20" onCommit={setPageSize} />',
+    },
+  ],
+};

package/astryx/components/UncontrolledInput.tsx

@@ -0,0 +1,3 @@
+// The Astryx CLI pairs each component doc with a same-stem source file.
+// ui-common ships no source, so this names the export instead.
+export { UncontrolledInput } from "@lablup/ui-common";

package/astryx/components/UnitGrid.doc.mjs

@@ -0,0 +1,107 @@
+/**
+ * `astryx component UnitGrid` (and `ui-common component UnitGrid`).
+ *
+ * @type {import('@astryxdesign/cli/authoring').ComponentDoc}
+ */
+export default {
+  type: "component",
+  name: "UnitGrid",
+  displayName: "UnitGrid",
+  import: "@lablup/ui-common",
+  category: "Data Display",
+  keywords: [
+    "unit grid",
+    "waffle chart",
+    "allocation",
+    "capacity",
+    "squares",
+    "heatmap",
+  ],
+  description:
+    "Groups of unit squares packed onto one shared lattice, serpentine or word-wrap. Each group is a tinted rounded plate with its initial on one cell; hovering it opens a hover card with the caller's content and, with onHueOverrideChange, a palette picker. Unit colours may be var() or color-mix() strings: the component resolves them to pick the initial's ink by WCAG contrast. The seven default hues and the two inks are --unit-grid-group-1..7 and --unit-grid-ink-dark/-light on the root; --unit-grid-popover-z sets the hover card's z-index.",
+  props: [
+    {
+      name: "groups",
+      type: "Array<{ key: string; label?: string; units: Array<{ color: string; fraction?: number }>; plateVariant?: 'solid' | 'dashed' }>",
+      description:
+        "The groups, in flow order. A unit's fraction (0..1) fills its cell bottom-up; a dashed plate marks a tentative group.",
+      required: true,
+    },
+    {
+      name: "layout",
+      type: "'serpentine' | 'wordwrap'",
+      description: "How groups flow along the lattice.",
+      default: "'serpentine'",
+    },
+    {
+      name: "columns",
+      type: "number",
+      description:
+        "Fixed lattice column count. Without it the count follows the measured width; pass it in fixed layouts and in jsdom.",
+    },
+    {
+      name: "maxUnitsPerGroup",
+      type: "number",
+      description: "Units drawn per group at most.",
+      default: "256",
+    },
+    {
+      name: "groupPalette",
+      type: "string[]",
+      description: "Group hues, cycled in flow order.",
+      default: "the seven --unit-grid-group-N hues",
+    },
+    {
+      name: "hueOverrides",
+      type: "Record<string, number>",
+      description: "Palette-index overrides, keyed by group key.",
+    },
+    {
+      name: "onHueOverrideChange",
+      type: "(key: string, paletteIndex: number) => void",
+      description: "Shows the palette picker in the hover card and reports a pick.",
+    },
+    {
+      name: "legendItems",
+      type: "Array<{ color: string; label: string }>",
+      description: "A legend row above the grid.",
+    },
+    {
+      name: "renderGroupPopover",
+      type: "(group, { hue, closePopover }) => ReactNode",
+      description: "The hover card body for a group.",
+    },
+    {
+      name: "onClickGroup",
+      type: "(key: string) => void",
+      description: "Makes cells clickable and reports the group.",
+    },
+    {
+      name: "emptyFallback",
+      type: "ReactNode",
+      description: "Rendered instead of the grid when no group has a unit.",
+    },
+    {
+      name: "changeGroupColorLabel",
+      type: "string",
+      description: "Name of the button that opens the palette.",
+      default: 'the catalog\'s uic.UnitGrid.changeGroupColor ("Change group color")',
+    },
+    {
+      name: "colorSwatchLabel",
+      type: "(index: number) => string",
+      description: "Name of a palette swatch, given its 1-based position.",
+      default: 'the catalog\'s uic.UnitGrid.useColor ("Use color {index}")',
+    },
+  ],
+  usage: {
+    description:
+      "An N-units-out-of-a-pool picture with many groups, such as allocations on a node. Give the root an aria-label that says what the grid shows (the grid is one image to assistive technology; the group names are listed alongside it). Other div attributes reach the root. UnitGridSkeleton, from the same import, is its Suspense fallback (rows, default 3).",
+  },
+  examples: [
+    {
+      label: "Two groups with a hover card",
+      code: '<UnitGrid aria-label="Allocation" groups={[{ key: "a", label: "Alpha", units: [{ color: "var(--color-icon-blue)" }, { color: "var(--color-icon-blue)", fraction: 0.5 }] }, { key: "b", label: "Beta", units: [{ color: "var(--color-icon-red)" }] }]} renderGroupPopover={(group) => group.label} />',
+    },
+  ],
+};

package/astryx/components/UnitGrid.tsx

@@ -0,0 +1,3 @@
+// The Astryx CLI pairs each component doc with a same-stem source file.
+// ui-common ships no source, so this names the export instead.
+export { UnitGrid } from "@lablup/ui-common";

package/astryx/docs/ui-common.doc.mjs

@@ -0,0 +1,112 @@
+/**
+ * `astryx docs ui-common`: how @lablup/ui-common relates to Astryx.
+ *
+ * @type {import('@astryxdesign/cli/authoring').ReferenceDoc}
+ */
+export const docs = {
+  type: "generic",
+  name: "ui-common",
+  title: "Lablup ui-common",
+  description:
+    "The Lablup layer over Astryx: the mirrored Astryx surface, the Lablup theme, and ui-common's own components.",
+  category: "guide",
+  sections: [
+    {
+      title: "Overview",
+      content: [
+        {
+          type: "prose",
+          text: "@lablup/ui-common re-exports Astryx 1:1 and adds the Lablup brand theme and a few components of its own. Products depend on @lablup/ui-common only. Every Astryx subpath exists under the same name: `@astryxdesign/core/Button` is `@lablup/ui-common/Button`, `@astryxdesign/lab` is `@lablup/ui-common/lab`.",
+        },
+        {
+          type: "list",
+          style: "do",
+          items: [
+            "Import Astryx components from @lablup/ui-common, at the root or at the same subpath Astryx uses.",
+            "Import StyleX tokens from `@lablup/ui-common/theme/tokens.stylex`. The `.stylex` suffix is what the StyleX compiler looks for.",
+            "Wrap the app in `<Theme theme={lablupTheme}>` from `@lablup/ui-common/theme/lablup/built`, which pairs with `theme/lablup/theme.css`.",
+          ],
+        },
+        {
+          type: "list",
+          style: "dont",
+          items: [
+            "Import from @astryxdesign/* directly. ui-common owns the Astryx version.",
+            "Use Dialog. ui-common hides it; use Modal.",
+          ],
+        },
+      ],
+    },
+    {
+      title: "ui-common components",
+      content: [
+        {
+          type: "prose",
+          text: "ui-common's own components are built on Astryx primitives and never share a name with an Astryx export. Each is exported from the package root; Modal, AlertModal and Form also have their own subpaths.",
+        },
+        {
+          type: "prose",
+          text: "The exception is a fixed copy of an Astryx component, carrying an upstream fix Astryx has not shipped yet. It keeps Astryx's name, props and import path, and replaces Astryx's in ui-common's exports: `ComplexSelector` (`@lablup/ui-common/ComplexSelector`) adds `hasClear` and `onClear`; lab's `Drawer` routes Escape through core's layer-dismissal stack, so a popover, selector or modal inside it closes first, and passes `aria-modal` through; lab's `Tour` keeps a step's spotlight under its callout in StrictMode (both at `@lablup/ui-common/lab`).",
+        },
+        {
+          type: "list",
+          style: "unordered",
+          items: [
+            "`Modal` (`@lablup/ui-common/Modal`): the dialog. Takes every Dialog prop; adds nesting, notices above the modal, `title`/`onAction`/`footer` conventions and `unmountOnClose`.",
+            "`PageLayout`, `PageHeader`: a page's width clamp, and its title, actions and error banner.",
+            "`StatCard`: a dashboard metric on Astryx Card.",
+            "`ErrorState`: a full-area error with recovery actions.",
+            "`SkeletonCard`, `SkeletonText`, `SkeletonChart`, `SkeletonRow`: loading placeholders drawn with Astryx Skeleton.",
+            "`SmoothHeight`, `DigitPopIn`: height and number motion.",
+            "`CountBadge`, `DoubleBadge`, `BooleanToken`: a count overlaid on a child, welded Badges, and an on/off Token.",
+            "`IconWithTooltip`: a focusable glyph with a Tooltip. `ImageWithFallback`: an image that falls back to a node.",
+            "`NotificationStack`: floating notices with task progress, Cancel/Retry and an action; the caller owns the list.",
+            "`OverlayScrollbar`: a persistent scroll thumb over a scroll container, in place of its native bar.",
+            "`ConfirmPopover`: a one-click confirmation on Popover, for reversible actions.",
+            "`PagedSelector`: a searchable selector, single or multiple, over options loaded a page at a time; scrolling near the end calls `onEndReached`. Built on ComplexSelector, drawn like Selector.",
+            '`SelectionLabel`: "3 selected" with a button that clears the selection.',
+            "`UncontrolledInput`: a text or number field that reports its value on Enter or blur.",
+            "`AlertModal`: the alert-dialog pattern on Modal, in its level stack. ui-common hides AlertDialog; use this.",
+            "`DeleteConfirmModal`: confirms a deletion on Modal; typed confirmation for irreversible ones.",
+            "`StepNumberInput`: a number field that steps along a list of values (1, 2, 4, 8); `NumberStepper` is its stepper column.",
+            "`BoardItemTitle`: a dashboard panel's sticky title row, with a help tooltip and actions at the end.",
+            "`Statistic`: a metric with a caption, a large value and a notched usage bar. `DividedRow`: a wrapping row with dividers between neighbours on a line.",
+            '`TokenList`: values inline, the rest behind +N on hover. `TokenRow`: tokens cut off with "and N more".',
+            "`NotificationItem`: the title, description, actions and footer of one notice.",
+            "`UnitGrid`: groups of unit squares packed on one lattice, each group a tinted plate with a hover card and an optional palette picker; `UnitGridSkeleton` is its loading stand-in.",
+            "`ColorPicker`: a hex colour field on the platform colour input, reporting the settled colour.",
+            "`Form` (`@lablup/ui-common/Form`): a form engine with antd's form API (Form.Item, Form.List, Form.useForm, Form.useWatch, rules), its messages from the catalog, its item shell on Astryx tokens. `BulkEditFormItem`: a Form.Item that edits one field across many records (keep / edit / clear).",
+            "`DataGrid`: Astryx Table with a page bar, client or server sorting, row selection, resizable and pinnable columns, expandable rows, per-user column settings and a CSV export picker; `DataGridSettingsModal` and `DataGridExportModal` are its dialogs.",
+            "`BulkErrorModal`: the failed items of a bulk operation in a DataGrid, under an optional error banner.",
+            "`ProgressWithLabel`: a bar carrying its label and value label. `TextHighlighter`: marks a search keyword in a string.",
+            "`CountdownBorder`: a border that fills clockwise as a countdown to the next refresh.",
+            "`DoubleToken`: welded Tokens for a settled pair. `ListBanner`: a Banner listing items, scrolling past a height.",
+          ],
+        },
+        {
+          type: "code",
+          lang: "tsx",
+          label: "Modal",
+          code: 'import { Modal } from "@lablup/ui-common/Modal";\n\n<Modal\n  isOpen={isOpen}\n  onOpenChange={setIsOpen}\n  title="Rename folder"\n  actionLabel="Rename"\n  onAction={async () => {\n    await rename();\n    setIsOpen(false);\n  }}\n>\n  <TextInput label="Name" value={name} onChange={setName} />\n</Modal>',
+        },
+        {
+          type: "prose",
+          text: "Moving from `@astryxdesign/core/Dialog`: change the specifier to `@lablup/ui-common/Modal`, `Dialog` to `Modal` and `DialogProps` to `ModalProps`. `DialogHeader`, `DialogPosition`, `DialogPurpose` and `DialogVariant` are re-exported unchanged (also as `ModalHeader`, `ModalPosition`, ...).",
+        },
+      ],
+    },
+    {
+      title: "Stylesheets and layers",
+      content: [
+        {
+          type: "code",
+          lang: "css",
+          label: "App entry stylesheet",
+          code: '@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;\n\n@import "@lablup/ui-common/reset.css";\n@import "@lablup/ui-common/astryx.css";\n@import "@lablup/ui-common/theme/lablup/theme.css";\n@import "@lablup/ui-common/ui-common.css";',
+        },
+      ],
+    },
+  ],
+};
+
+export default docs;

package/astryx.integration.mjs

@@ -0,0 +1,35 @@
+/**
+ * What @lablup/ui-common contributes to the Astryx CLI (FR-4051).
+ *
+ * A consumer that lists @lablup/ui-common as a dependency gets this loaded
+ * implicitly (Astryx CLI 0.6.1+): `astryx docs ui-common` serves the topic
+ * below, `astryx search` finds it, and `astryx init --features agents`
+ * appends the `agentDocs` lines to the managed agent block.
+ *
+ * `components` holds ui-common's component docs (`astryx component Modal`).
+ * The CLI pairs each `{Name}.doc.mjs` with a same-stem `{Name}.tsx`, and
+ * `doctor integration validate` fails a doc without one. The manifest cannot
+ * point that source elsewhere, and the tarball ships no source, so each doc
+ * sits beside a one-line `{Name}.tsx` that re-exports the component from the
+ * package. `astryx swizzle` on one copies that line, not an implementation.
+ *
+ * Identity (name, version) comes from package.json. Each root is shipped in
+ * the tarball (see `files` in package.json). `pnpm run check:integration`
+ * validates the manifest and proves the packed package carries it.
+ *
+ * @type {import('@astryxdesign/cli/authoring').AstryxIntegration}
+ */
+export default {
+  docs: "./astryx/docs",
+  components: "./astryx/components",
+  agentDocs: {
+    append: [
+      "Import Astryx through @lablup/ui-common, never @astryxdesign/*: same subpaths (@lablup/ui-common/Button, /theme/tokens.stylex, /reset.css, /lab).",
+      "Use Modal, not Dialog. ui-common hides Astryx Dialog (exports.exclude.json) so every product has one dialog surface.",
+      "Theme with <Theme theme={lablupTheme}> from @lablup/ui-common/theme/lablup/built (pairs with theme.css). Declare @layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities; first.",
+      "ui-common strings resolve through Astryx InternationalizationProvider: pass uiCommonMessages from @lablup/ui-common/i18n-catalog in its messages.",
+      "ComplexSelector, and lab's Drawer and Tour, come from ui-common: fixed copies of Astryx's, same API and import paths. ComplexSelector adds hasClear/onClear.",
+    ],
+  },
+  issuesUrl: "https://github.com/lablup/ui-common/issues",
+};

package/dist/assets/components/BoardItemTitle/BoardItemTitle.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-board-item-title{z-index:var(--board-item-title-z,50);min-width:0;padding-block:var(--spacing-5);background-color:var(--color-background-surface);flex-shrink:0;position:sticky;top:0}.uic-board-item-title__group{flex-shrink:0;min-width:0;position:relative}.uic-board-item-title__end{margin-inline-start:auto}}

package/dist/assets/components/BulkErrorModal/BulkErrorModal.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-bulk-error-modal__icon{color:var(--color-error)}}

package/dist/assets/components/ColorPicker/ColorPicker.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-color-picker__trigger{box-sizing:border-box;align-items:center;gap:var(--spacing-2);padding-block:var(--spacing-1);padding-inline:var(--spacing-2);border:var(--border-width) solid var(--color-border-emphasized);border-radius:var(--radius-element);background-color:var(--color-background-surface);color:var(--color-text-primary);font-family:var(--font-family-body);font-size:var(--text-label-size);cursor:pointer;transition-property:border-color,box-shadow;transition-duration:var(--duration-fast);transition-timing-function:var(--ease-standard);display:inline-flex}@media (hover:hover){.uic-color-picker__trigger:hover:not(:disabled){box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--color-border-emphasized) 30%, transparent)}}.uic-color-picker__trigger:disabled{cursor:not-allowed;opacity:.5}@media (prefers-reduced-motion:reduce){.uic-color-picker__trigger{transition-duration:0s}}.uic-color-picker__swatch{width:var(--spacing-5);height:var(--spacing-5);border-radius:var(--radius-inner);box-shadow:inset 0 0 0 var(--border-width) var(--color-border-emphasized);background-color:var(--color-background-surface);background-image:linear-gradient(45deg, var(--color-background-muted) 25%, transparent 25%), linear-gradient(-45deg, var(--color-background-muted) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--color-background-muted) 75%), linear-gradient(-45deg, transparent 75%, var(--color-background-muted) 75%);background-size:var(--spacing-2) var(--spacing-2);background-position:0 0, 0 var(--spacing-1), var(--spacing-1) calc(var(--spacing-1) * -1), calc(var(--spacing-1) * -1) 0;flex:none}.uic-color-picker__swatch-fill{border-radius:inherit;width:100%;height:100%;display:block}.uic-color-picker__panel{min-width:200px}.uic-color-picker__area{width:100%;height:var(--spacing-12);border:var(--border-width) solid var(--color-border-emphasized);border-radius:var(--radius-element);cursor:pointer;appearance:none;background:0 0;padding:0;display:block}.uic-color-picker__area::-webkit-color-swatch-wrapper{padding:0}.uic-color-picker__area::-webkit-color-swatch{border-radius:calc(var(--radius-element) - var(--border-width));border:none}.uic-color-picker__area::-moz-color-swatch{border-radius:calc(var(--radius-element) - var(--border-width));border:none}}

package/dist/assets/components/CountBadge/CountBadge.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-count-badge{display:inline-flex;position:relative}.uic-count-badge__overlay{top:0;transform:translate(calc(50% + var(--count-badge-offset-x)), calc(-50% + var(--count-badge-offset-y)));z-index:1;pointer-events:none;align-items:center;display:inline-flex;position:absolute;inset-inline-end:0}.uic-count-badge__overlay--sm .uic-count-badge__pill{font-size:var(--font-size-2xs);padding-block:0;padding-inline:var(--spacing-1);min-height:var(--spacing-4)}.uic-count-badge__dot{width:var(--spacing-2);height:var(--spacing-2);border-radius:var(--radius-full);box-shadow:0 0 0 var(--border-width) var(--color-background-surface);background:var(--color-neutral);display:block}.uic-count-badge__overlay--sm .uic-count-badge__dot{width:var(--spacing-1-5);height:var(--spacing-1-5)}.uic-count-badge__dot[data-variant=info],.uic-count-badge__dot[data-variant=blue]{background:var(--color-icon-blue)}.uic-count-badge__dot[data-variant=success]{background:var(--color-success)}.uic-count-badge__dot[data-variant=warning]{background:var(--color-warning)}.uic-count-badge__dot[data-variant=error]{background:var(--color-error)}.uic-count-badge__dot[data-variant=cyan]{background:var(--color-icon-cyan)}.uic-count-badge__dot[data-variant=green]{background:var(--color-icon-green)}.uic-count-badge__dot[data-variant=orange]{background:var(--color-icon-orange)}.uic-count-badge__dot[data-variant=pink]{background:var(--color-icon-pink)}.uic-count-badge__dot[data-variant=purple]{background:var(--color-icon-purple)}.uic-count-badge__dot[data-variant=red]{background:var(--color-icon-red)}.uic-count-badge__dot[data-variant=teal]{background:var(--color-icon-teal)}.uic-count-badge__dot[data-variant=yellow]{background:var(--color-icon-yellow)}}

package/dist/assets/components/CountdownBorder/CountdownBorder.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{@keyframes uic-countdown-border-fill{0%{stroke-dashoffset:100px}to{stroke-dashoffset:0}}.uic-countdown-border__overlay{z-index:1;pointer-events:none;position:absolute;inset:0;overflow:visible}.uic-countdown-border__fill{animation-name:uic-countdown-border-fill;animation-timing-function:linear;animation-iteration-count:infinite}@media (prefers-reduced-motion:reduce){.uic-countdown-border__fill{animation:none}}}

package/dist/assets/components/DataGrid/DataGrid.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-data-grid{min-width:0;max-width:100%}.uic-data-grid__body{--container-padding-block-start:0px;--container-padding-block-end:0px;transition:opacity var(--duration-fast) var(--ease-standard)}.uic-data-grid__body--loading{opacity:.5;pointer-events:none}.uic-data-grid__body--no-header thead{display:none}.uic-data-grid__clip{text-overflow:ellipsis;white-space:nowrap;min-width:0;display:block;overflow:hidden}.uic-data-grid__body thead th button>span{min-width:0}.uic-data-grid__body thead th{background-color:var(--color-background-card);background-image:linear-gradient(var(--color-background-muted), var(--color-background-muted))}.uic-data-grid__body--header-split table:not(table table)>thead th:has([role=separator]){background-image:linear-gradient(var(--color-border-emphasized), var(--color-border-emphasized)), linear-gradient(var(--color-background-muted), var(--color-background-muted));background-position:100%,0 0;background-repeat:no-repeat;background-size:var(--border-width) 1.6em, 100% 100%}.uic-data-grid__body thead th>div:has(>[role=separator]){position:static}.uic-data-grid__body--scroll-x table:not(table table){table-layout:auto;width:var(--data-grid-scroll-width);min-width:100%!important}.uic-data-grid__body--scroll-y div:has(>table):not(table div){max-height:var(--data-grid-max-height);overflow-y:auto}.uic-data-grid__body--scroll-y table:not(table table)>thead th{z-index:2;background-color:var(--color-background-card);position:sticky;top:0}.uic-data-grid__detail{padding:var(--spacing-3)}.uic-data-grid__footer{margin-top:var(--spacing-3)}.uic-data-grid-dialog{min-width:0}.uic-data-grid-dialog__list{max-height:var(--data-grid-dialog-list-height);overflow-y:auto}.uic-data-grid-dialog__row{align-items:center;gap:var(--spacing-2);padding-block:var(--spacing-1);display:flex}.uic-data-grid-dialog__option{padding-block:var(--spacing-1)}.uic-data-grid-dialog__handle{cursor:grab;color:var(--color-icon-secondary);display:inline-flex}.uic-data-grid-dialog__handle-space{width:var(--spacing-4);flex:none}}

package/dist/assets/components/DeleteConfirmModal/DeleteConfirmModal.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-delete-confirm-modal__title{align-items:center;gap:var(--spacing-1);overflow-wrap:anywhere;word-break:break-word;display:inline-flex}.uic-delete-confirm-modal__title-icon{color:var(--color-warning);flex-shrink:0;display:inline-flex}.uic-delete-confirm-modal__warning{color:var(--color-error)}.uic-delete-confirm-modal__items{background-color:var(--color-background-muted);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-inner);padding-block:var(--spacing-2);padding-inline:var(--spacing-3)}.uic-delete-confirm-modal__items--scroll{overflow-y:auto}}

package/dist/assets/components/DigitPopIn/DigitPopIn.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-digit-pop-in{--digit-pop-in-duration:var(--duration-medium-max);--digit-pop-in-distance:.5rem;--digit-pop-in-stagger:70ms;--digit-pop-in-blur:2px;--digit-pop-in-ease:cubic-bezier(.34, 1.45, .64, 1);display:inline-block;position:relative}.uic-digit-pop-in__digits{align-items:baseline;display:inline-flex}.uic-digit-pop-in__digit{animation:uic-digit-pop-in var(--digit-pop-in-duration) var(--digit-pop-in-ease) both;animation-delay:calc(var(--digit-pop-in-index,0) * var(--digit-pop-in-stagger));display:inline-block}.uic-digit-pop-in__text{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes uic-digit-pop-in{0%{transform:translateY(var(--digit-pop-in-distance));opacity:0;filter:blur(var(--digit-pop-in-blur))}to{opacity:1;filter:blur();transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.uic-digit-pop-in__digit{animation:none}}}

package/dist/assets/components/DividedRow/DividedRow.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-divided-row{align-items:stretch;display:flex}.uic-divided-row__item{align-items:stretch;display:flex;position:relative}.uic-divided-row__divider{right:calc(-.5 * var(--divided-row-column-gap,0px));background:var(--color-border);pointer-events:none;position:absolute}}

package/dist/assets/components/DoubleBadge/DoubleBadge.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-double-badge__item:not(:first-child){border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:calc(var(--border-width) * -1)}.uic-double-badge__item:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}}

package/dist/assets/components/DoubleToken/DoubleToken.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-double-token__item:not(:first-child){border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:calc(var(--border-width) * -1)}.uic-double-token__item:not(:last-of-type){border-start-end-radius:0;border-end-end-radius:0}}

package/dist/assets/components/ErrorState/ErrorState.css

@@ -1 +1,2 @@
-.error-state{padding:var(--token-paddingXL,2rem);text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:200px;display:flex}.error-state__icon{width:64px;height:64px;margin-bottom:var(--token-paddingLG,1.5rem);color:var(--token-colorError,#c82333);transition:transform var(--token-motionDurationMid,.2s);background-color:#ff4d4f1a;border-radius:50%;justify-content:center;align-items:center;display:flex}.error-state__icon svg{width:48px;height:48px}.error-state__title{margin:0 0 var(--token-paddingSM,.5rem);font-size:var(--token-fontSizeXL,1.25rem);color:var(--token-colorText,#141414);font-weight:600;line-height:1.4}.error-state__message{margin:0 0 var(--token-paddingLG,1.5rem);font-size:var(--token-fontSize,.875rem);color:var(--token-colorTextSecondary,#595959);max-width:480px;line-height:1.5}.error-state__actions{gap:var(--token-padding,.75rem);flex-wrap:wrap;justify-content:center;display:flex}.error-state__action-btn{min-width:120px}.error-state--danger .error-state__icon{color:var(--token-colorError,#c82333);background-color:#ff4d4f1a}.error-state--warning .error-state__icon{color:var(--token-colorWarning,#9a5d00);background-color:#faad141a}.error-state--accent .error-state__icon{color:var(--token-colorPrimary,#8b5cf6);background-color:var(--token-colorPrimaryBg,#8b5cf61a)}@media (prefers-reduced-motion:reduce){.error-state__icon{transition:none}}@media (max-width:767px){.error-state{padding:var(--token-paddingLG,1.5rem)}.error-state__icon{width:56px;height:56px;margin-bottom:var(--token-paddingMD,1rem)}.error-state__icon svg{width:40px;height:40px}.error-state__title{font-size:var(--token-fontSizeLG,1rem)}.error-state__message{font-size:var(--token-fontSize,.875rem)}.error-state__actions{flex-direction:column;width:100%}.error-state__action-btn{width:100%;min-width:unset}}
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-error-state{padding:var(--spacing-8);text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:12.5rem;display:flex}.uic-error-state__icon{width:4rem;height:4rem;margin-bottom:var(--spacing-6);color:var(--color-error);background-color:var(--color-error-muted);border-radius:var(--radius-full);justify-content:center;align-items:center;display:flex}.uic-error-state__icon svg{width:3rem;height:3rem}.uic-error-state--warning .uic-error-state__icon{color:var(--color-warning);background-color:var(--color-warning-muted)}.uic-error-state--accent .uic-error-state__icon{color:var(--color-accent);background-color:var(--color-accent-muted)}.uic-error-state__title{margin:0 0 var(--spacing-2)}.uic-error-state__message{margin:0 0 var(--spacing-6);max-width:30rem}.uic-error-state__actions{gap:var(--spacing-3);flex-wrap:wrap;justify-content:center;display:flex}.uic-error-state__action{min-width:7.5rem}@media (max-width:767px){.uic-error-state{padding:var(--spacing-6)}.uic-error-state__icon{width:3.5rem;height:3.5rem;margin-bottom:var(--spacing-4)}.uic-error-state__icon svg{width:2.5rem;height:2.5rem}.uic-error-state__actions{flex-direction:column;width:100%}.uic-error-state__action{width:100%;min-width:unset}}}

package/dist/assets/components/Form/FormItemVisual.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-form[data-layout=inline]{flex-wrap:wrap;display:flex}.uic-form[data-layout=inline]>.uic-form-item,.uic-form[data-layout=inline] .uic-form-item[data-layout=inline]{flex:none;margin-inline-end:var(--spacing-4)}.uic-form-item{box-sizing:border-box;vertical-align:top;margin-bottom:var(--form-item-margin-bottom,var(--spacing-6));font-size:var(--font-size-base);line-height:var(--form-item-line-height,var(--text-body-leading))}.uic-form-item[data-layout=inline]{margin-bottom:0}.uic-form-item[data-hidden]{display:none}.uic-form-item__row{flex-flow:wrap;min-width:0;display:flex}.uic-form-item[data-layout=vertical] .uic-form-item__row{flex-direction:column}.uic-form-item[data-layout=inline] .uic-form-item__row{flex-wrap:nowrap}.uic-form-item__label-col{white-space:nowrap;text-align:end;vertical-align:middle;box-sizing:border-box;flex-grow:0;max-width:100%;overflow:hidden}.uic-form-item__label-col[data-align=left]{text-align:start}.uic-form-item__label-col[data-wrap]{overflow:unset;line-height:var(--form-item-line-height,var(--text-body-leading));white-space:unset}.uic-form-item__label-col[data-wrap]>.uic-form-item__label{vertical-align:middle;text-wrap:balance}.uic-form-item[data-layout=vertical] .uic-form-item__label-col{padding:0 0 var(--form-item-gap,var(--spacing-2));white-space:initial;text-align:start;margin:0}.uic-form-item[data-layout=inline] .uic-form-item__label-col{flex:none}.uic-form-item__label{max-width:100%;height:var(--size-element-md);color:var(--color-text-primary);font-size:var(--font-size-base);line-height:var(--form-item-line-height,var(--text-body-leading));align-items:center;display:inline-flex;position:relative}.uic-form-item[data-layout=vertical] .uic-form-item__label{height:auto;margin:0}.uic-form-item[data-size=small] .uic-form-item__label{height:var(--size-element-sm)}.uic-form-item[data-size=large] .uic-form-item__label{height:var(--size-element-lg)}.uic-form-item__label--required:before{color:var(--color-error);font-size:var(--font-size-base);content:"*";margin-inline-end:var(--spacing-1);font-family:sans-serif;line-height:1;display:inline-block}.uic-form-item__label[data-required-mark]:before{display:none}.uic-form-item__label:after{content:":";margin-block:0;margin-inline-start:var(--spacing-0-5);margin-inline-end:var(--spacing-2);position:relative}.uic-form-item__label[data-no-colon]:after{content:" "}.uic-form-item[data-layout=vertical] .uic-form-item__label:after{visibility:hidden}.uic-form-item__optional{color:var(--color-text-description,var(--color-text-secondary));margin-inline-start:var(--spacing-1);display:inline-block}.uic-form-item__tooltip{color:var(--color-text-description,var(--color-text-secondary));cursor:help;writing-mode:horizontal-tb;align-items:center;margin-inline-start:var(--spacing-1);display:inline-flex}.uic-form-item__control{box-sizing:border-box;flex-direction:column;flex-grow:1;min-width:0;display:flex}.uic-form-item__row>.uic-form-item__control:first-child:not([data-span]){width:100%}.uic-form-item:not([data-layout=vertical]) .uic-form-item__label-col+.uic-form-item__control{flex:1 1 0}.uic-form-item[data-layout=vertical] .uic-form-item__control{width:100%}.uic-form-item__control-input{min-height:var(--size-element-md);align-items:center;display:flex;position:relative}.uic-form-item[data-size=small] .uic-form-item__control-input{min-height:var(--size-element-sm)}.uic-form-item[data-size=large] .uic-form-item__control-input{min-height:var(--size-element-lg)}.uic-form-item__control-input-content{flex:auto;max-width:100%}.uic-form-item__additional{flex-direction:column;display:flex}.uic-form-item__explain,.uic-form-item__extra{clear:both;color:var(--color-text-description,var(--color-text-secondary));font-size:var(--font-size-base);line-height:var(--form-item-line-height,var(--text-body-leading))}.uic-form-item__extra{min-height:var(--size-element-sm)}.uic-form-item__explain-error{color:var(--color-error)}.uic-form-item__explain-warning{color:var(--color-warning)}.uic-form-item__feedback-icon{inset-inline-end:var(--spacing-3);height:calc(var(--font-size-base) * var(--form-item-line-height,var(--text-body-leading)));color:var(--color-accent);font-size:var(--font-size-base);pointer-events:none;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.uic-form-item__feedback-icon[data-status=success]{color:var(--color-success)}.uic-form-item__feedback-icon[data-status=warning]{color:var(--color-warning)}.uic-form-item__feedback-icon[data-status=error]{color:var(--color-error)}.uic-form-item__feedback-glyph[data-status=validating]{animation:1s linear infinite uic-form-item-feedback-spin}@keyframes uic-form-item-feedback-spin{to{transform:rotate(360deg)}}}

package/dist/assets/components/IconWithTooltip/IconWithTooltip.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-icon-with-tooltip{cursor:help;pointer-events:auto;display:inline-flex}.uic-icon-with-tooltip--button{appearance:none;font:inherit;color:inherit;background:0 0;border:0;margin:0;padding:0}.uic-icon-with-tooltip__icon{display:inline-flex}}

package/dist/assets/components/ImageWithFallback/ImageWithFallback.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-image-with-fallback{display:inline-flex}}

package/dist/assets/components/ListBanner/ListBanner.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-list-banner__list{max-height:var(--list-banner-max-height);padding:0;padding-top:var(--spacing-1);scrollbar-color:var(--color-text-disabled) transparent;scrollbar-width:thin;margin:0;overflow-y:auto}.uic-list-banner__list::-webkit-scrollbar{background:0 0}.uic-list-banner__list::-webkit-scrollbar-track{background:0 0}.uic-list-banner__list::-webkit-scrollbar{width:6px}.uic-list-banner__list::-webkit-scrollbar-thumb{background:var(--color-text-disabled);border-radius:var(--radius-full)}}

package/dist/assets/components/Modal/Modal.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-modal{z-index:var(--modal-z,1100);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.uic-modal[popover]{width:auto;max-width:none;height:auto;max-height:none;color:inherit;background:0 0;border:0;margin:0;padding:0;overflow:visible}.uic-modal--closed{display:none}.uic-modal__mask{background-color:var(--color-overlay);position:absolute;inset:0}.uic-modal__wrap{--modal-dir-x:0px;--modal-dir-y:var(--spacing-4);pointer-events:none;animation:uic-modal-enter var(--duration-medium-max) var(--ease-standard) backwards;justify-content:center;display:flex;position:relative}.uic-modal__wrap>*{pointer-events:auto}.uic-modal__wrap--positioned{position:absolute}@keyframes uic-modal-enter{0%{opacity:0;transform:translate(var(--modal-dir-x), var(--modal-dir-y)) scale(.95)}to{opacity:1;transform:translate(0)scale(1)}}@media (prefers-reduced-motion:reduce){.uic-modal__wrap{animation-name:none}}}

package/dist/assets/components/NotificationItem/NotificationItem.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-notification-item__stack,.uic-notification-item__action{flex-shrink:0;min-width:0;position:relative}.uic-notification-item__title{margin-inline-end:22px;margin-bottom:var(--spacing-3);font-weight:500}.uic-notification-item__footer{color:var(--color-text-secondary);align-self:flex-end}}

package/dist/assets/components/NotificationStack/NotificationStack.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-notification-stack{padding:var(--spacing-6);box-sizing:content-box;gap:var(--spacing-3);width:384px;max-width:calc(100vw - var(--spacing-6) * 2);max-height:calc(100dvh - var(--notification-stack-inset-top,0px) - var(--spacing-6) * 2);overscroll-behavior:contain;z-index:var(--notification-stack-z,11000);pointer-events:none;flex-direction:column;display:flex;position:fixed;inset-block-end:0;inset-inline-end:0;overflow:hidden auto}.uic-notification-stack>*{pointer-events:auto}@keyframes uic-notification-stack-enter{0%{opacity:0;transform:translateX(var(--spacing-6))}to{opacity:1;transform:translate(0)}}@keyframes uic-notification-stack-exit{0%{opacity:1;max-height:40vh;transform:translate(0)}to{opacity:0;transform:translateX(var(--spacing-6));max-height:0}}.uic-notification-stack__item{animation-name:uic-notification-stack-enter;animation-duration:var(--duration-fast);animation-timing-function:var(--ease-standard);animation-fill-mode:both}.uic-notification-stack__item[data-exiting=true]{animation-name:uic-notification-stack-exit;overflow:hidden}.uic-notification-stack__body{max-height:var(--notification-stack-body-max-height,30vh);overscroll-behavior:contain;overflow-y:auto}@media (prefers-reduced-motion:reduce){.uic-notification-stack__item,.uic-notification-stack__item[data-exiting=true]{opacity:1;animation-name:none;transform:none}}}

package/dist/assets/components/OverlayScrollbar/OverlayScrollbar.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{[data-uic-overlay-scrollbar=true]{scrollbar-width:none!important}[data-uic-overlay-scrollbar=true]::-webkit-scrollbar{display:none!important}.uic-overlay-scrollbar{width:var(--spacing-2);pointer-events:none;z-index:var(--overlay-scrollbar-z,1);position:absolute;top:0;bottom:0;right:0;overflow:clip}.uic-overlay-scrollbar[data-scrollable=false]{display:none}.uic-overlay-scrollbar__thumb{top:0;right:var(--spacing-0-5);width:var(--spacing-1-5);border-radius:var(--radius-full);background-color:var(--color-border-emphasized);pointer-events:auto;cursor:default;transition:background-color var(--duration-fast) var(--ease-standard);position:absolute}.uic-overlay-scrollbar__thumb:hover,.uic-overlay-scrollbar[data-dragging=true] .uic-overlay-scrollbar__thumb{background-color:var(--color-text-disabled)}}

package/dist/assets/components/PageHeader/PageHeader.css

@@ -1 +1,2 @@
-.page-header{margin-bottom:var(--token-paddingLG,1.5rem)}.page-header__content{justify-content:space-between;align-items:flex-start;gap:var(--token-paddingMD,1rem);flex-wrap:wrap;display:flex}.page-header__text{flex:20rem;min-width:min(100%,12rem)}.page-header__title{margin:0 0 var(--token-paddingSM,.5rem);font-size:var(--token-fontSizeDisplay4,1.75rem);letter-spacing:.02em;color:var(--token-colorText,#141414);font-weight:300}.page-header__description{font-size:var(--token-fontSize,.875rem);color:var(--token-colorTextSecondary,#595959);margin:0}.page-header__actions{justify-content:flex-end;align-items:flex-start;gap:var(--token-paddingSM,.5rem);flex-wrap:wrap;flex:0 auto;min-width:0;margin-left:auto;display:flex}.page-header__actions>*{flex-shrink:0}.page-header__error{justify-content:space-between;align-items:center;gap:var(--token-paddingSM,.5rem);margin-top:var(--token-paddingSM,.5rem);padding:var(--token-paddingSM,.5rem) var(--token-paddingMD,1rem);font-size:var(--token-fontSize,.875rem);color:var(--token-colorError,#c82333);border-radius:var(--token-borderRadiusLG,.5rem);background-color:#ff4d4f14;border:1px solid #ff4d4f4d;display:flex}.page-header__error-text{word-break:break-word;flex:1}.page-header__error-dismiss{font-size:var(--token-fontSizeXL,1.25rem);color:currentColor;cursor:pointer;opacity:.7;width:24px;height:24px;transition:opacity var(--token-motionDurationFast,.1s);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;line-height:1;display:flex}.page-header__error-dismiss:hover{opacity:1}@media (max-width:767px){.page-header__content{flex-direction:column;align-items:stretch}.page-header__text{flex:none;min-width:0}.page-header__actions{justify-content:flex-end}}
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-page-header{margin-bottom:var(--spacing-6)}.uic-page-header__content{justify-content:space-between;align-items:flex-start;gap:var(--spacing-4);flex-wrap:wrap;display:flex}.uic-page-header__text{flex:20rem;min-width:min(100%,12rem)}.uic-page-header__title{margin:0 0 var(--spacing-2)}.uic-page-header__description{margin:0}.uic-page-header__actions{justify-content:flex-end;align-items:flex-start;gap:var(--spacing-2);flex-wrap:wrap;flex:0 auto;min-width:0;margin-inline-start:auto;display:flex}.uic-page-header__actions>*{flex-shrink:0}.uic-page-header__error{justify-content:space-between;align-items:center;gap:var(--spacing-2);margin-top:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);color:var(--color-error);background-color:var(--color-error-muted);border:var(--border-width) solid color-mix(in srgb, var(--color-error) 30%, transparent);border-radius:var(--radius-element);display:flex}.uic-page-header__error-body{gap:var(--spacing-0-5);flex-direction:column;flex:1;min-width:0;display:flex}.uic-page-header__error-text,.uic-page-header__error-detail{overflow-wrap:anywhere}.uic-page-header__error-actions{align-items:center;gap:var(--spacing-2);flex-shrink:0;padding-inline-start:var(--spacing-1);display:flex}@media (max-width:767px){.uic-page-header__content{flex-direction:column;align-items:stretch}.uic-page-header__text{flex:none;min-width:0}}}

package/dist/assets/components/PageLayout/PageLayout.css

@@ -1 +1,2 @@
-.page-layout{flex-direction:column;width:100%;min-height:100%;margin:0 auto;display:flex}.page-layout--standard{max-width:900px}.page-layout--wide{max-width:1400px}.page-layout--full{max-width:none}@media (max-width:767px){.page-layout:not(.page-layout--full){padding:0 var(--token-paddingSM,.5rem)}}
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-page-layout{flex-direction:column;width:100%;min-height:100%;margin:0 auto;display:flex}.uic-page-layout--standard{max-width:900px}.uic-page-layout--wide{max-width:1400px}.uic-page-layout--full{max-width:none}@media (max-width:767px){.uic-page-layout:not(.uic-page-layout--full){padding:0 var(--spacing-2)}}}

package/dist/assets/components/PagedSelector/PagedSelector.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-paged-selector__listbox{box-sizing:border-box;padding-block:var(--spacing-1);padding-inline:calc(var(--spacing-1) + var(--border-width));overflow-y:auto}.uic-paged-selector__empty{padding:var(--spacing-3);text-align:center}.uic-paged-selector__option{box-sizing:border-box;justify-content:space-between;align-items:center;gap:var(--spacing-2);width:100%;padding-block:var(--spacing-1-5);padding-inline:var(--spacing-2);border-radius:var(--radius-element);color:var(--color-text-primary);cursor:pointer;text-align:start;background-color:#0000;display:flex}.uic-paged-selector__option[data-size=sm]{padding-block:var(--spacing-1)}.uic-paged-selector__option[data-highlighted=true]{background-color:var(--color-overlay-hover)}.uic-paged-selector__option[data-selected=true]{font-weight:var(--font-weight-medium)}.uic-paged-selector__option[data-disabled=true]{opacity:.5;cursor:not-allowed}.uic-paged-selector__option-content{align-items:center;gap:var(--spacing-2);flex:1;min-width:0;display:flex}.uic-paged-selector__option-content>*{flex:1;min-width:0}.uic-paged-selector__option-mark{flex-shrink:0;justify-content:center;align-items:center;min-width:1rem;display:inline-flex}.uic-paged-selector__foot{padding-block:var(--spacing-1);padding-inline:calc(var(--spacing-2) + var(--border-width))}}

package/dist/assets/components/ProgressWithLabel/ProgressWithLabel.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-progress-with-label{box-sizing:border-box;min-width:0;min-height:0;padding:var(--border-width);border:var(--border-width) solid var(--color-border-emphasized);border-radius:var(--progress-with-label-radius,var(--radius-inner));background-color:var(--color-background-muted);flex-direction:column;flex-shrink:0;align-items:stretch;display:flex;position:relative}.uic-progress-with-label--grow{flex:1}.uic-progress-with-label__fill{z-index:0;opacity:.7;background-color:var(--color-success);height:100%;position:absolute;top:0;left:0;overflow:hidden}.uic-progress-with-label__labels{flex-shrink:0;justify-content:space-between;align-items:center;min-width:0;display:flex;position:relative}.uic-progress-with-label--sm .uic-progress-with-label__text{font-size:var(--font-size-sm)}.uic-progress-with-label--md .uic-progress-with-label__text{font-size:var(--font-size-base)}.uic-progress-with-label--lg .uic-progress-with-label__text{font-size:var(--font-size-lg)}.uic-progress-with-label__value{min-height:var(--spacing-1)}}