@vkzstudio/muza-ui 1.3.0 → 1.4.0

package/dist/components/InputOTP/useWebOtpAutofill.d.ts

@@ -0,0 +1,33 @@
+export interface UseWebOtpAutofillOptions {
+    /**
+     * Enables the WebOTP listener. Keep it `false` until the OTP screen is
+     * actually shown so the browser prompt appears at the right moment.
+     */
+    enabled: boolean;
+    /**
+     * Called with the code parsed from the incoming SMS. Receives the raw string
+     * exactly as the browser extracted it; the caller is responsible for
+     * truncating/validating it against the expected length.
+     */
+    onReceive: (code: string) => void;
+}
+/**
+ * Progressive-enhancement hook for automatic SMS OTP retrieval via the
+ * [WebOTP API](https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API).
+ *
+ * When enabled on a supporting browser (Android Chrome), it asks the browser
+ * to surface the one-time code from an incoming, origin-bound SMS and hands it
+ * to `onReceive`. On unsupported browsers (notably iOS Safari and desktop) it
+ * is a no-op — there the native `autocomplete="one-time-code"` keyboard
+ * suggestion handled by the input element covers autofill instead.
+ *
+ * The listener is aborted automatically on unmount or when `enabled` becomes
+ * `false`, satisfying the API's single-in-flight-request constraint.
+ *
+ * Requirements for the automatic Android flow to trigger:
+ * - Page served over HTTPS (or `localhost`).
+ * - The SMS body ends with an origin-bound line, e.g. `@example.com #123456`.
+ * - Called after a user gesture that reveals the OTP field.
+ */
+export declare const useWebOtpAutofill: ({ enabled, onReceive, }: UseWebOtpAutofillOptions) => void;
+//# sourceMappingURL=useWebOtpAutofill.d.ts.map

package/dist/components/InputOTP/useWebOtpAutofill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWebOtpAutofill.d.ts","sourceRoot":"","sources":["../../../src/components/InputOTP/useWebOtpAutofill.ts"],"names":[],"mappings":"AAeA,MAAM,WAAW,wBAAwB;IACvC;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,iBAAiB,GAAI,yBAG/B,wBAAwB,KAAG,IAkC7B,CAAA"}

package/dist/components/InputOTP/useWebOtpAutofill.js

@@ -0,0 +1,25 @@
+import { useRef as u, useEffect as f } from "react";
+const c = ({
+  enabled: o,
+  onReceive: t
+}) => {
+  const n = u(t);
+  f(() => {
+    n.current = t;
+  }, [t]), f(() => {
+    if (!o || typeof window > "u" || !("OTPCredential" in window)) return;
+    const e = new AbortController();
+    return navigator.credentials.get({
+      // `otp` is not yet part of the standard lib.dom CredentialRequestOptions.
+      otp: { transport: ["sms"] },
+      signal: e.signal
+    }).then((r) => {
+      const s = r == null ? void 0 : r.code;
+      s && n.current(s);
+    }).catch(() => {
+    }), () => e.abort();
+  }, [o]);
+};
+export {
+  c as useWebOtpAutofill
+};

package/dist/components/MarketNav/MarketNav.examples.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+/** A single category link shown in the category bar, dropdowns and mobile menu. */
+export interface CategoryItem {
+    /** Stable identifier used for the active-item comparison. */
+    value: string;
+    /** Visible category label. */
+    label: string;
+    /** Leading icon (rendered at 20px). */
+    icon: ReactNode;
+    /** Disables the category link. */
+    disabled?: boolean;
+}
+/** A single wallet balance — label + pre-formatted amount, optionally interactive. */
+export interface Balance {
+    /** Balance label, e.g. "Benefity". */
+    label: string;
+    /** Pre-formatted balance amount, e.g. "1 200,00 Kč". */
+    value: string;
+    /**
+     * Optional handler — when provided the balance becomes an interactive
+     * "credits" link (Figma `State=Hover`); otherwise it renders as static text.
+     */
+    onSelect?: () => void;
+}
+/** A single account-menu action, shared by the desktop/tablet dropdown and the phone drawer. */
+export interface AccountAction {
+    /** Stable identifier. */
+    key: string;
+    /** Visible label. */
+    label: string;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+    /** Greys out the item and blocks interaction. */
+    disabled?: boolean;
+    /**
+     * Invoked when the action is selected. Defined once here so the desktop /
+     * tablet dropdown and the phone drawer stay in sync — both call this.
+     */
+    onSelect?: () => void;
+}
+/** Props for the MarketNav example composition. */
+export interface MarketNavProps {
+    /** Category links rendered in the secondary bar / mobile menu. */
+    categories: CategoryItem[];
+    /** One or more wallet balances shown next to the user controls. */
+    balances: Balance[];
+    /** Logged-in user's name shown on the account trigger. */
+    userName: string;
+    /** Number shown on the favourites badge / account menu. Hidden when `0`/omitted. */
+    favouritesCount?: number;
+    /** Hide the secondary category bar (e.g. on a checkout page). @default true */
+    showCategories?: boolean;
+    /** Start with the balances masked. @default false */
+    defaultBalancesHidden?: boolean;
+}
+export declare const categories: CategoryItem[];
+export declare const balances: Balance[];
+export declare const userName = "Anna Novotn\u00E1";
+export declare const MarketNav: ({ categories, balances, userName, favouritesCount, showCategories, defaultBalancesHidden, }: MarketNavProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MarketNav.examples.d.ts.map

package/dist/components/MarketNav/MarketNav.examples.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarketNav.examples.d.ts","sourceRoot":"","sources":["../../../src/components/MarketNav/MarketNav.examples.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAA;AAiD3D,mFAAmF;AACnF,MAAM,WAAW,YAAY;IAC3B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,uCAAuC;IACvC,IAAI,EAAE,SAAS,CAAA;IACf,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,sFAAsF;AACtF,MAAM,WAAW,OAAO;IACtB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,gGAAgG;AAChG,MAAM,WAAW,aAAa;IAC5B,yBAAyB;IACzB,GAAG,EAAE,MAAM,CAAA;IACX,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,mDAAmD;AACnD,MAAM,WAAW,cAAc;IAC7B,kEAAkE;IAClE,UAAU,EAAE,YAAY,EAAE,CAAA;IAC1B,mEAAmE;IACnE,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAA;IAChB,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,qDAAqD;IACrD,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAID,eAAO,MAAM,UAAU,EAAE,YAAY,EAcpC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,OAAO,EAAkD,CAAA;AAEhF,eAAO,MAAM,QAAQ,sBAAiB,CAAA;AAwUtC,eAAO,MAAM,SAAS,GAAI,6FAOvB,cAAc,4CA4fhB,CAAA"}

package/dist/components/MarketNav/MarketNav.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { MarketNavProps } from './MarketNav.examples';
+declare const meta: Meta<MarketNavProps>;
+export default meta;
+type Story = StoryObj<MarketNavProps>;
+export declare const Responsive: Story;
+export declare const BenefitsHidden: Story;
+export declare const NoCategories: Story;
+//# sourceMappingURL=MarketNav.stories.d.ts.map

package/dist/components/MarketNav/MarketNav.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarketNav.stories.d.ts","sourceRoot":"","sources":["../../../src/components/MarketNav/MarketNav.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAEL,KAAK,cAAc,EAIpB,MAAM,sBAAsB,CAAA;AAG7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CA6C9B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAA;AAErC,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAc5B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAA"}

package/dist/components/PageContainer/PageContainer.d.ts

@@ -0,0 +1,53 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+/**
+ * Stepped responsive widths for the shared page column, matching
+ * `UniversalFooter`:
+ * - `< lg` (mobile/tablet): gutters to the standard page padding so the column
+ *   never touches the viewport edge.
+ * - `< xl` (small desktop): 936px (`58.5rem`)
+ * - `< 2xl` (desktop): 1200px (`75rem`)
+ * - `≥ 2xl` (wide): 1500px (`93.75rem`)
+ *
+ * `spacingType` decides *how* the column is realised:
+ * - `margin` (default) — a centered, capped column (`max-w-*` + `mx-auto`).
+ *   Nest it inside a separate full-width band whose background/border spans the
+ *   viewport.
+ * - `padding` — the element spans full width itself and insets its content to
+ *   the same column via symmetric horizontal padding. Use it when one element
+ *   must be *both* the full-width band and the column — e.g. a header bar that
+ *   draws its own bottom border — instead of nesting a centered column inside a
+ *   separate wrapper.
+ *
+ * Each variant spells every utility out literally: Tailwind 4's scanner only
+ * emits utilities it sees verbatim in source, so the widths can't be factored
+ * into shared constants — keep the two `spacingType`s' steps in sync by hand.
+ */
+export declare const pageContainerVariants: (props?: ({
+    spacingType?: "padding" | "margin" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for {@link PageContainer} — the shared stepped-width page column.
+ * Extends the native `div` attributes (forwarded to the rendered element) and
+ * the `spacingType` cva variant documented on {@link pageContainerVariants}.
+ */
+export interface PageContainerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof pageContainerVariants> {
+    /**
+     * Element to render. Use a semantic element (`header`, `nav`, `main`) when
+     * the container *is* a page landmark — especially with `spacingType="padding"`,
+     * where the container is the band itself.
+     *
+     * @default 'div'
+     */
+    component?: 'div' | 'main' | 'header' | 'nav' | 'section' | 'footer';
+}
+/**
+ * Aligns content to the shared stepped-width page column so every page band
+ * (header nav, coloured sections, footer) lines up to the same gutters at every
+ * breakpoint. Pick `spacingType` by whether the element is nested inside a
+ * full-width band (`margin`) or *is* the band itself (`padding`). Add layout
+ * utilities (e.g. `flex`, `gap-*`) via `className`.
+ */
+declare const PageContainer: React.ForwardRefExoticComponent<PageContainerProps & React.RefAttributes<HTMLElement>>;
+export { PageContainer };
+//# sourceMappingURL=PageContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageContainer.d.ts","sourceRoot":"","sources":["../../../src/components/PageContainer/PageContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAGjE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,qBAAqB;;8EAuBhC,CAAA;AAEF;;;;GAIG;AACH,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,qBAAqB,CAAC;IAC5C;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,CAAA;CACrE;AAED;;;;;;GAMG;AACH,QAAA,MAAM,aAAa,wFASlB,CAAA;AAGD,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/PageContainer/PageContainer.js

@@ -0,0 +1,49 @@
+import * as a from "react";
+import { cva as o } from "class-variance-authority";
+import { cn as c } from "../../utils/cn.js";
+const p = o("", {
+  variants: {
+    spacingType: {
+      // Centered, capped column — one `max-w` step per breakpoint.
+      margin: [
+        "mx-auto w-full",
+        "max-lg:max-w-[calc(100%-2*var(--spacing-layout-p-standard))]",
+        // < lg: gutter
+        "max-xl:max-w-[58.5rem]",
+        // < xl: 936px
+        "max-w-[75rem]",
+        // < 2xl: 1200px
+        "2xl:max-w-[93.75rem]"
+        // ≥ 2xl: 1500px
+      ],
+      // Full-width band that pads its content to the same column — one
+      // symmetric `px` step per breakpoint, mirroring the `margin` widths.
+      padding: [
+        "w-full overflow-x-hidden",
+        "max-lg:px-layout-p-standard",
+        // < lg: gutter
+        "max-xl:px-[calc((100%-58.5rem)/2)]",
+        // < xl: 936px centered
+        "px-[calc((100%-75rem)/2)]",
+        // < 2xl: 1200px centered
+        "2xl:px-[calc((100%-93.75rem)/2)]"
+        // ≥ 2xl: 1500px centered
+      ]
+    }
+  },
+  defaultVariants: { spacingType: "margin" }
+}), x = a.forwardRef(
+  ({ className: r, spacingType: e, component: m, ...n }, t) => {
+    const l = m ?? "div";
+    return a.createElement(l, {
+      ref: t,
+      className: c(p({ spacingType: e }), r),
+      ...n
+    });
+  }
+);
+x.displayName = "PageContainer";
+export {
+  x as PageContainer,
+  p as pageContainerVariants
+};

package/dist/components/PageContainer/PageContainer.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { PageContainer } from './PageContainer';
+declare const meta: Meta<typeof PageContainer>;
+export default meta;
+type Story = StoryObj<typeof PageContainer>;
+export declare const Aligned: Story;
+/**
+ * Full storefront page — the `MarketNav` and `CarouselSection` examples plus the
+ * library `UniversalFooter`, stacked. All three route their content through the
+ * shared stepped-width column, so the nav logo, the section heading and the
+ * footer content all line up to the same gutters at every breakpoint.
+ */
+export declare const FullPage: Story;
+//# sourceMappingURL=PageContainer.stories.d.ts.map

package/dist/components/PageContainer/PageContainer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageContainer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/PageContainer/PageContainer.stories.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAwC3D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CA6BpC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAA;AAE3C,eAAO,MAAM,OAAO,EAAE,KAarB,CAAA;AAuHD;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KA+BtB,CAAA"}

package/dist/components/PageContainer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PageContainer';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/PageContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageContainer/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/dist/components/ReorderableTable/ReorderableTable.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReorderableTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAc3D,OAAO,EACL,gBAAgB,EAEjB,MAAM,oBAAoB,CAAA;AAE3B,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAA;CAC9B;AAyCD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CA0EvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAA;AAExD,eAAO,MAAM,OAAO,EAAE,KAkHrB,CAAA;AAMD,eAAO,MAAM,YAAY,EAAE,KAuL1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAsG3B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA2G7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA0H1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkG3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA4FtB,CAAA"}
+{"version":3,"file":"ReorderableTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAe3D,OAAO,EACL,gBAAgB,EAEjB,MAAM,oBAAoB,CAAA;AAE3B,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAA;CAC9B;AAyCD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CA0EvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAA;AAExD,eAAO,MAAM,OAAO,EAAE,KAgHrB,CAAA;AAMD,eAAO,MAAM,YAAY,EAAE,KAoL1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAqG3B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA2G7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA0H1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkG3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA4FtB,CAAA"}

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -1,9 +1,9 @@
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
 import "react";
 import * as s from "@radix-ui/react-toggle-group";
-import { cn as a } from "../../utils/cn.js";
+import { cn as n } from "../../utils/cn.js";
 import { Typography as i } from "../Typography/Typography.js";
-const g = ({
+const l = ({
   className: t,
   children: o,
   ...e
@@ -11,7 +11,7 @@ const g = ({
   s.Root,
   {
     "data-slot": "toggle-group",
-    className: a(
+    className: n(
       "group/toggle-group relative flex gap-2xs p-2xs",
       "max-w-comp-segmentedControl-max-width w-fit",
       "rounded-md bg-surface-state-bg-info",
@@ -20,18 +20,18 @@ const g = ({
     ...e,
     children: o
   }
-), l = ({
+), d = ({
   className: t,
   children: o,
   ...e
-}) => /* @__PURE__ */ n(
+}) => /* @__PURE__ */ a(
   s.Item,
   {
     "data-slot": "toggle-group-item",
-    className: a(
+    className: n(
       "max-w-comp-segmentedControl-max-width-item flex items-center justify-center rounded-sm px-xl pt-sm pb-xs",
-      "transition-200 bg-transparent text-text-brand-def transition-colors",
-      "hover:text-comp-button-text-brand-def cursor-pointer hover:bg-surface-base-primary-hover",
+      "transition-200 bg-transparent text-comp-segmented-control-text-def transition-colors",
+      "cursor-pointer hover:bg-surface-base-primary-hover hover:text-comp-segmented-control-text-hover",
       "focus-visible-default focus-visible:ring-offset-0",
       "data-[state=on]:bg-surface-base-secondary",
       "disabled:pointer-events-none disabled:opacity-50",
@@ -55,6 +55,6 @@ const g = ({
   }
 );
 export {
-  g as SegmentedControl,
-  l as SegmentedControlItem
+  l as SegmentedControl,
+  d as SegmentedControlItem
 };

package/dist/components/Tag/Tag.js

@@ -16,7 +16,7 @@ const u = d(
         success: "bg-surface-state-bg-success text-comp-alert-text-success",
         error: "bg-surface-state-bg-error text-comp-alert-text-error",
         info: "bg-surface-state-bg-info text-comp-alert-text-info",
-        invert: "border border-stroke-base-disabled bg-surface-icon-bg-light text-text-invert-def backdrop-blur-[7.5px]"
+        invert: "border border-stroke-base-disabled bg-surface-icon-bg-light text-text-invert-fixed backdrop-blur-[7.5px]"
       },
       size: {
         small: "px-sm py-2xs",

package/dist/components/UniversalFooter/UniversalFooter.d.ts

@@ -4,8 +4,8 @@ import * as React from 'react';
  * Props for the UniversalFooter root component.
  *
  * Renders a `<footer>` landmark with the dark surface background and an
- * inner content container whose width steps with the breakpoint scale
- * (matching the project-wide `Container` pattern). Children compose the
+ * inner [[PageContainer]] whose width steps with the breakpoint scale, so the
+ * footer content aligns with every other page band. Children compose the
  * footer's vertical sections — typically a [[UniversalFooterTop]] row, a
  * [[UniversalFooterSections]] block, a [[UniversalFooterBottom]] row, and
  * a [[UniversalFooterCopyright]] line, each separated by
@@ -152,7 +152,7 @@ declare const UniversalFooterAppBadges: {
 /** Props for the [[UniversalFooterBottom]] row that pairs meta blocks like the language switcher and an employer link. */
 export type UniversalFooterBottomProps = React.ComponentProps<'div'>;
 declare const UniversalFooterBottom: {
-    ({ className, ...props }: UniversalFooterBottomProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, ...props }: UniversalFooterBottomProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 /**
@@ -165,11 +165,12 @@ export interface UniversalFooterBottomGroupProps extends React.ComponentProps<'d
     label?: React.ReactNode;
     /**
      * Horizontal alignment of the group within the bottom row at `md`+.
-     * Below `md` both groups stack and align to the start regardless.
+     * Below `md` the group's items stack to the start — unless it's the only
+     * group in the `UniversalFooterBottom`, in which case they center.
      *
      * @default 'start'
      */
-    align?: 'start' | 'end';
+    align?: 'start' | 'end' | 'center';
     /**
      * Typography size of the label. Defaults to `sm` (14px from `text/xs`)
      * for the language label and should be set to `base` (16px) for the

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

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