@iress-oss/ids-components 6.0.0-alpha.12 → 6.0.0-alpha.14

package/dist/components/Tag/TagInput/TagInput.styles.js

@@ -1,26 +1,20 @@
 import { s as t } from "../../../sva-B7kca5XO.js";
-const s = t({
+const i = t({
   slots: ["input", "tag"],
   base: {
     input: {
       flexWrap: "wrap",
-      rowGap: "xs",
-      py: "xs",
+      pl: "spacing.1",
       "& > :first-child": {
         display: "contents",
         minHeight: "[0px]"
       },
       "& > input": {
-        width: "auto",
-        minHeight: "[calc({sizes.input.height} - {spacing.xs} * 2.5)]",
-        py: "none"
+        width: "auto"
       }
-    },
-    tag: {
-      marginLeft: "xs"
     }
   }
 });
 export {
-  s as tagInput
+  i as tagInput
 };

package/dist/components/Toaster/components/Toast/Toast.d.ts

@@ -1,11 +1,13 @@
+import { IressButtonProps } from '../../../Button';
 import { ReactNode, MouseEvent } from 'react';
 import { IressStyledProps } from '../../../../types';
 export type ToastStatus = 'success' | 'error' | 'info';
 export interface ToastProps extends Omit<IressStyledProps, 'content'> {
     /**
-     * Buttons and controls for the toast.
-     */
-    actions?: ReactNode;
+     * Actions to display in the alert. These will be rendered as buttons with opinionated styling.
+     * If you want to use custom buttons, use the `footer` prop instead.
+     **/
+    actions?: Omit<IressButtonProps, 'mode' | 'status'>[];
     /**
      * Alternative to children.
      */

package/dist/components/Toaster/components/Toast/Toast.js

@@ -1,86 +1,93 @@
-import { jsx as o, jsxs as a } from "react/jsx-runtime";
-import { propagateTestid as i } from "../../../../helpers/utility/propagateTestid.js";
-import "../../../../Button-ZGbOkyOo.js";
-import { IressCloseButton as h } from "../../../Button/CloseButton/CloseButton.js";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { forwardRef as I, createElement as b } from "react";
+import { propagateTestid as c } from "../../../../helpers/utility/propagateTestid.js";
+import { I as v } from "../../../../Button-BTkololu.js";
+import { IressCloseButton as C } from "../../../Button/CloseButton/CloseButton.js";
 import "../../../Inline/Inline.styles.js";
-import { IressInline as y } from "../../../Inline/Inline.js";
-import { IressText as N } from "../../../Text/Text.js";
-import { forwardRef as b } from "react";
-import { c as g } from "../../../../cx-DN21T1EH.js";
-import { toast as v } from "./Toast.styles.js";
-import { s as C } from "../../../../factory-CsinCTPr.js";
-import { IressIcon as I } from "../../../Icon/Icon.js";
+import { IressInline as m } from "../../../Inline/Inline.js";
+import { IressText as T } from "../../../Text/Text.js";
+import { c as l } from "../../../../cx-DN21T1EH.js";
+import { toast as k } from "./Toast.styles.js";
+import { s as B } from "../../../../factory-CsinCTPr.js";
+import { IressIcon as S } from "../../../Icon/Icon.js";
 import "../../../Icon/Icon.styles.js";
-import { GlobalCSSClass as T } from "../../../../enums.js";
-const S = {
+import { GlobalCSSClass as j } from "../../../../enums.js";
+const w = {
   error: "colour.system.danger.text",
   success: "colour.system.success.text",
   info: "colour.system.info.text"
-}, j = {
+}, A = {
   error: "ban",
   success: "check",
   info: "info-square"
-}, k = b(
+}, W = I(
   ({
-    heading: e,
-    status: t,
-    actions: c,
-    children: m,
-    content: n,
-    dismissible: l = !0,
-    onClose: d,
-    "data-testid": s,
-    className: p,
-    ...f
-  }, x) => {
-    const r = v({ status: t });
-    return /* @__PURE__ */ o(
-      C.div,
+    actions: i,
+    heading: t,
+    status: o,
+    children: p,
+    content: d,
+    dismissible: f = !0,
+    onClose: h,
+    "data-testid": r,
+    className: u,
+    ...x
+  }, y) => {
+    const s = k({ status: o }), g = !!i?.length;
+    return /* @__PURE__ */ e(
+      B.div,
       {
-        ...f,
-        "data-testid": s,
-        className: g(p, r.root, T.Toast),
+        ...x,
+        "data-testid": r,
+        className: l(u, s.root, j.Toast),
         tabIndex: -1,
-        ref: x,
-        children: /* @__PURE__ */ o("div", { className: r.panel, children: /* @__PURE__ */ a(y, { gap: "sm", verticalAlign: "top", noWrap: !0, children: [
-          /* @__PURE__ */ o(
-            I,
+        ref: y,
+        children: /* @__PURE__ */ e("div", { className: s.panel, children: /* @__PURE__ */ n(m, { gap: "sm", verticalAlign: "top", noWrap: !0, children: [
+          /* @__PURE__ */ e(
+            S,
             {
-              name: j[t],
-              screenreaderText: `${t}: `,
-              textStyle: "typography.body.lg",
+              name: A[o],
+              screenreaderText: `${o}: `,
+              textStyle: "typography.heading.2",
               fixedWidth: !0,
-              color: S[t]
+              color: w[o]
             }
           ),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ n(
             "div",
             {
-              className: r.wrapper,
-              "data-testid": i(s, "content"),
+              className: s.wrapper,
+              "data-testid": c(r, "content"),
               children: [
-                e && /* @__PURE__ */ o(
-                  N,
+                t && /* @__PURE__ */ e(
+                  T,
                   {
-                    className: r.heading,
-                    "data-testid": i(s, "heading"),
-                    children: typeof e == "string" ? /* @__PURE__ */ o("h2", { children: e }) : e
+                    className: s.heading,
+                    "data-testid": c(r, "heading"),
+                    children: typeof t == "string" ? /* @__PURE__ */ e("h2", { children: t }) : t
                   }
                 ),
-                l && /* @__PURE__ */ o(
-                  h,
+                f && /* @__PURE__ */ e(
+                  C,
                   {
-                    "data-testid": i(
-                      s,
+                    "data-testid": c(
+                      r,
                       "close-button__button"
                     ),
-                    className: r.closeButton,
-                    onClick: (u) => d?.(u),
+                    className: s.closeButton,
+                    onClick: (a) => h?.(a),
                     screenreaderText: "Dismiss"
                   }
                 ),
-                /* @__PURE__ */ o("div", { className: r.content, children: n ?? m }),
-                c && /* @__PURE__ */ o("div", { className: r.footer, children: c })
+                /* @__PURE__ */ e("div", { className: s.content, children: d ?? p }),
+                g && /* @__PURE__ */ e(m, { gap: "sm", mt: "spacing.1", children: i?.map((a, N) => /* @__PURE__ */ b(
+                  v,
+                  {
+                    ...a,
+                    className: l(a.className, s.action),
+                    key: N
+                  }
+                )) })
               ]
             }
           )
@@ -89,7 +96,7 @@ const S = {
     );
   }
 );
-k.displayName = "Toast";
+W.displayName = "Toast";
 export {
-  k as Toast
+  W as Toast
 };

package/dist/components/Toaster/components/Toast/Toast.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const toast: import('../../../../styled-system/types').SlotRecipeRuntimeFn<"footer" | "content" | "heading" | "icon" | "wrapper" | "root" | "closeButton" | "panel", {
+export declare const toast: import('../../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "heading" | "icon" | "wrapper" | "action" | "root" | "closeButton" | "panel", {
     status: {
         error: {
             panel: {
@@ -9,6 +9,16 @@ export declare const toast: import('../../../../styled-system/types').SlotRecipe
             heading: {
                 color: "colour.system.danger.text";
             };
+            action: {
+                bg: "colour.system.danger.fill";
+                borderColor: "colour.system.danger.fill";
+                color: "colour.system.danger.onFill";
+                _hover: {
+                    bg: "colour.system.danger.fillHover";
+                    borderColor: "colour.system.danger.fillHover";
+                    color: "colour.system.danger.onFill";
+                };
+            };
         };
         success: {
             panel: {
@@ -19,6 +29,16 @@ export declare const toast: import('../../../../styled-system/types').SlotRecipe
             heading: {
                 color: "colour.system.success.text";
             };
+            action: {
+                bg: "colour.system.success.fill";
+                borderColor: "colour.system.success.fill";
+                color: "colour.system.success.onFill";
+                _hover: {
+                    bg: "colour.system.success.fillHover";
+                    borderColor: "colour.system.success.fillHover";
+                    color: "colour.system.success.onFill";
+                };
+            };
         };
         info: {
             panel: {
@@ -29,6 +49,16 @@ export declare const toast: import('../../../../styled-system/types').SlotRecipe
             heading: {
                 color: "colour.system.info.text";
             };
+            action: {
+                bg: "colour.system.info.fill";
+                borderColor: "colour.system.info.fill";
+                color: "colour.system.info.onFill";
+                _hover: {
+                    bg: "colour.system.info.fillHover";
+                    borderColor: "colour.system.info.fillHover";
+                    color: "colour.system.info.onFill";
+                };
+            };
         };
     };
     animation: {

package/dist/components/Toaster/components/Toast/Toast.styles.js

@@ -1,13 +1,13 @@
 import { s as o } from "../../../../sva-B7kca5XO.js";
-const n = o({
+const r = o({
   slots: [
     "root",
+    "action",
     "panel",
     "wrapper",
     "icon",
     "heading",
     "content",
-    "footer",
     "closeButton"
   ],
   base: {
@@ -51,9 +51,6 @@ const n = o({
     content: {
       noGutter: !0
     },
-    footer: {
-      paddingBlockStart: "spacing.2"
-    },
     closeButton: {
       position: "absolute",
       top: "spacing.1",
@@ -70,6 +67,16 @@ const n = o({
         },
         heading: {
           color: "colour.system.danger.text"
+        },
+        action: {
+          bg: "colour.system.danger.fill",
+          borderColor: "colour.system.danger.fill",
+          color: "colour.system.danger.onFill",
+          _hover: {
+            bg: "colour.system.danger.fillHover",
+            borderColor: "colour.system.danger.fillHover",
+            color: "colour.system.danger.onFill"
+          }
         }
       },
       success: {
@@ -80,6 +87,16 @@ const n = o({
         },
         heading: {
           color: "colour.system.success.text"
+        },
+        action: {
+          bg: "colour.system.success.fill",
+          borderColor: "colour.system.success.fill",
+          color: "colour.system.success.onFill",
+          _hover: {
+            bg: "colour.system.success.fillHover",
+            borderColor: "colour.system.success.fillHover",
+            color: "colour.system.success.onFill"
+          }
         }
       },
       info: {
@@ -90,6 +107,16 @@ const n = o({
         },
         heading: {
           color: "colour.system.info.text"
+        },
+        action: {
+          bg: "colour.system.info.fill",
+          borderColor: "colour.system.info.fill",
+          color: "colour.system.info.onFill",
+          _hover: {
+            bg: "colour.system.info.fillHover",
+            borderColor: "colour.system.info.fillHover",
+            color: "colour.system.info.onFill"
+          }
         }
       }
     },
@@ -193,5 +220,5 @@ const n = o({
   }
 });
 export {
-  n as toast
+  r as toast
 };

package/dist/{index-gmMGso0u.js → index-Bm5rQqn5.js}

@@ -1,6 +1,6 @@
 const s = {
   "borders.alert": {
-    value: "0.5px solid currentColor",
+    value: "1px solid currentColor",
     variable: "var(--borders-alert)"
   },
   "borders.divider": {
@@ -323,6 +323,10 @@ const s = {
     value: "var(--iress-radius-000, 0px)",
     variable: "var(--radii-none)"
   },
+  "radii.50%": {
+    value: "50%",
+    variable: "var(--radii-50\\%)"
+  },
   "sizes.container.xs": {
     value: "100%",
     variable: "var(--sizes-container\\.xs)"

package/dist/interfaces.d.ts

@@ -224,6 +224,12 @@ export interface IressCSSProps {
      * The `focusable` prop is used to apply the focus elevation when focused. It can be set to `true` to apply focus styles on focus, or `'within'` to apply focus styles when the element or any of its children are focused.
      */
     focusable?: 'true' | 'within';
+    /**
+     * The `flex` prop is used to set the flex grow property of an element. It allows the element to grow and fill available space in a flex container.
+     *
+     * In the design system, we only allow `1` as a value to ensure consistent behavior across components, ensuring that flex items expand in a predictable way and preventing layout inconsistencies between implementations.
+     */
+    flex?: '1';
     /**
      * Set **`hideFrom`** to hide an element completely using `display: none`. It can be combined with `hideBelow` to create complex responsive visibility rules.
      *
@@ -403,9 +409,8 @@ export interface IressCSSProps {
      *
      * - `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
      * - `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
-     * - `typography.body.lg` - Use for tag lines, subtitles, and other large text content in the product.
      * - `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
-     * - `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md or body.lg.
+     * - `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md.
      * - `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
      * - `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
      * - `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.

package/dist/main.js

@@ -5,7 +5,7 @@ import { autoComplete as I } from "./components/Autocomplete/Autocomplete.styles
 import { useAutocompleteSearch as l } from "./components/Autocomplete/hooks/useAutocompleteSearch.js";
 import { IressBadge as n } from "./components/Badge/Badge.js";
 import { badge as u } from "./components/Badge/Badge.styles.js";
-import { I as c, b as C } from "./Button-ZGbOkyOo.js";
+import { I as c, b as C } from "./Button-BTkololu.js";
 import { IressCloseButton as b } from "./components/Button/CloseButton/CloseButton.js";
 import { IressButtonGroup as k } from "./components/ButtonGroup/ButtonGroup.js";
 import { buttonGroup as L } from "./components/ButtonGroup/ButtonGroup.styles.js";
@@ -63,7 +63,7 @@ import { usePopover as Ro } from "./components/Popover/hooks/usePopover.js";
 import { usePopoverItem as ho } from "./components/Popover/hooks/usePopoverItem.js";
 import { IressProgress as Po } from "./components/Progress/Progress.js";
 import { progress as Fo } from "./components/Progress/Progress.styles.js";
-import { I as Bo } from "./Provider-BPoPUE-B.js";
+import { I as Bo } from "./Provider-B87u_maF.js";
 import { IressRadio as yo } from "./components/Radio/Radio.js";
 import { radio as Oo } from "./components/Radio/Radio.styles.js";
 import { IressRadioGroup as Ho, RadioGroupContext as Vo, getRadioGroupContext as wo } from "./components/RadioGroup/RadioGroup.js";

package/dist/patterns/Loading/components/LongLoading.js

@@ -5,16 +5,16 @@ import { useMemo as h, useId as j } from "react";
 import { IressText as f } from "../../../components/Text/Text.js";
 import { IressPanel as O } from "../../../components/Panel/Panel.js";
 import "../../../components/Panel/Panel.styles.js";
-import { IressProgress as S } from "../../../components/Progress/Progress.js";
+import { IressProgress as L } from "../../../components/Progress/Progress.js";
 import "../../../components/Progress/Progress.styles.js";
-import { propagateTestid as L } from "../../../helpers/utility/propagateTestid.js";
+import { propagateTestid as S } from "../../../helpers/utility/propagateTestid.js";
 import { useShowIndicator as B } from "../hooks/useShowIndicator.js";
 import { useEstimatedProgressValue as P } from "../hooks/useEstimatedProgressValue.js";
 import { s as V } from "../../../factory-CsinCTPr.js";
 import { c as C } from "../../../cx-DN21T1EH.js";
-import { loading as E, loadingList as y } from "../Loading.styles.js";
+import { loading as E, loadingList as x } from "../Loading.styles.js";
 const G = ({ message: a, current: i, finished: n }) => {
-  const o = j(), r = y({ finished: n });
+  const s = j(), r = x({ finished: n });
   return /* @__PURE__ */ d("li", { className: r.item, children: [
     /* @__PURE__ */ e(
       "svg",
@@ -42,9 +42,9 @@ const G = ({ message: a, current: i, finished: n }) => {
         className: r.svg,
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 52 52",
-        "aria-labelledby": o,
+        "aria-labelledby": s,
         children: [
-          /* @__PURE__ */ e("title", { id: o, children: "Finished: " }),
+          /* @__PURE__ */ e("title", { id: s, children: "Finished: " }),
           /* @__PURE__ */ e(
             "circle",
             {
@@ -73,52 +73,52 @@ const G = ({ message: a, current: i, finished: n }) => {
   children: a,
   className: i,
   error: n,
-  estimatedFinishTime: o = 1e4,
+  estimatedFinishTime: s = 1e4,
   loaded: r,
   messageList: c = {},
-  progress: x,
-  renderProgress: N = (m) => /* @__PURE__ */ e(S, { ...m, color: "colour.primary.fill" }),
+  progress: N,
+  renderProgress: w = (m) => /* @__PURE__ */ e(L, { ...m, color: "colour.primary.fill" }),
   timeout: p,
-  ...g
+  ...u
 }) => {
   const m = B(
     r,
     p?.message,
     p?.loaded ?? 1300
-  ), w = Math.max(...Object.keys(c).map(Number)) + 500, s = P(
-    o,
+  ), y = Math.max(...Object.keys(c).map(Number)) + 500, o = P(
+    s,
     r,
-    x,
-    w
-  ), b = E({
+    N,
+    y
+  ), I = E({
     pattern: "long",
     showIndicator: m,
     loaded: r,
     error: !!n
-  }), I = y(), u = h(() => {
+  }), b = x(), g = h(() => {
     const t = Object.keys(c), l = t.findIndex(
-      (k) => Number(k) > s
+      (k) => Number(k) > o
     );
     return r ? "" : t[l] ?? t[t.length - 1];
-  }, [c, r, s]), v = h(() => Object.entries(c).map(([t, l]) => ({
+  }, [c, r, o]), v = h(() => Object.entries(c).map(([t, l]) => ({
     timecode: Number(t),
     message: l,
-    current: t === u,
-    finished: s >= Number(t)
-  })), [c, u, s]);
-  return /* @__PURE__ */ e(V.div, { ...g, className: C(b.root, i), children: /* @__PURE__ */ e(
+    current: t === g,
+    finished: o >= Number(t)
+  })), [c, g, o]);
+  return /* @__PURE__ */ e(V.div, { ...u, className: C(I.root, i), children: /* @__PURE__ */ e(
     O,
     {
-      "data-testid": L(g["data-testid"], "panel"),
+      "data-testid": S(u["data-testid"], "panel"),
       bg: "transparent",
       children: n ?? /* @__PURE__ */ d(M, { gap: "md", children: [
         a,
-        N({
-          max: o,
-          value: Math.min(s, o),
-          sectionTitle: `${Math.min(s, o) / o * 100}% loaded`
+        w({
+          max: s,
+          value: Math.min(o, s),
+          sectionTitle: `${Math.min(o, s) / s * 100}% loaded`
         }),
-        /* @__PURE__ */ e(f, { textStyle: "typography.body.lg", noGutter: !0, children: /* @__PURE__ */ e("ul", { className: I.root, children: v.map(({ timecode: t, ...l }) => /* @__PURE__ */ e(G, { ...l }, t)) }) })
+        /* @__PURE__ */ e(f, { noGutter: !0, children: /* @__PURE__ */ e("ul", { className: b.root, children: v.map(({ timecode: t, ...l }) => /* @__PURE__ */ e(G, { ...l }, t)) }) })
       ] })
     }
   ) });

package/dist/patterns/Loading/components/PageLoading.js

@@ -7,7 +7,7 @@ import "../../../components/Skeleton/Skeleton.styles.js";
 import "../../../components/Container/Container.styles.js";
 import { IressContainer as p } from "../../../components/Container/Container.js";
 import "../../../components/Row/Row.styles.js";
-import { IressRow as a } from "../../../components/Row/Row.js";
+import { IressRow as d } from "../../../components/Row/Row.js";
 import "../../../components/Col/Col.styles.js";
 import { IressCol as c } from "../../../components/Col/Col.js";
 import "../../../components/Inline/Inline.styles.js";
@@ -20,7 +20,7 @@ import { s as x } from "../../../factory-CsinCTPr.js";
 import { loading as F } from "../Loading.styles.js";
 import { c as M } from "../../../cx-DN21T1EH.js";
 import { propagateTestid as S } from "../../../helpers/utility/propagateTestid.js";
-const h = () => /* @__PURE__ */ t(c, { span: "4", children: /* @__PURE__ */ t(
+const l = () => /* @__PURE__ */ t(c, { span: "4", children: /* @__PURE__ */ t(
   E,
   {
     stretch: !0,
@@ -28,26 +28,26 @@ const h = () => /* @__PURE__ */ t(c, { span: "4", children: /* @__PURE__ */ t(
     media: /* @__PURE__ */ t(e, { mode: "rect", height: "300px" }),
     children: /* @__PURE__ */ t(e, { textStyle: "typography.body.md", width: "50%" })
   }
-) }), O = () => /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(a, { gutter: "lg", verticalAlign: "stretch", children: /* @__PURE__ */ t(c, { children: /* @__PURE__ */ r(m, { gap: "md", children: [
+) }), O = () => /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(d, { gutter: "lg", verticalAlign: "stretch", children: /* @__PURE__ */ t(c, { children: /* @__PURE__ */ r(m, { gap: "md", children: [
   /* @__PURE__ */ t(e, { textStyle: "typography.heading.2", width: "75%" }),
   /* @__PURE__ */ t(e, { mode: "rect", height: "200px" })
-] }) }) }) }), P = () => /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(a, { gutter: "lg", verticalAlign: "stretch", children: /* @__PURE__ */ t(c, { children: /* @__PURE__ */ r(m, { gap: "md", children: [
+] }) }) }) }), P = () => /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(d, { gutter: "lg", verticalAlign: "stretch", children: /* @__PURE__ */ t(c, { children: /* @__PURE__ */ r(m, { gap: "md", children: [
   /* @__PURE__ */ t(e, { textStyle: "typography.heading.2", width: "75%" }),
   /* @__PURE__ */ t(e, { mode: "rect", height: "200px" }),
   /* @__PURE__ */ t(e, { textStyle: "typography.body.md", width: "100px" })
 ] }) }) }) }), R = () => /* @__PURE__ */ t(p, { children: /* @__PURE__ */ r(m, { gap: "lg", children: [
-  /* @__PURE__ */ r(a, { horizontalAlign: "between", verticalAlign: "middle", children: [
+  /* @__PURE__ */ r(d, { horizontalAlign: "between", verticalAlign: "middle", children: [
     /* @__PURE__ */ t(e, { textStyle: "typography.heading.1", width: "25%" }),
     /* @__PURE__ */ r(D, { gap: "lg", children: [
-      /* @__PURE__ */ t(e, { textStyle: "typography.body.lg", width: "200px" }),
-      /* @__PURE__ */ t(e, { textStyle: "typography.body.lg", width: "200px" })
+      /* @__PURE__ */ t(e, { textStyle: "typography.heading.4", width: "200px" }),
+      /* @__PURE__ */ t(e, { textStyle: "typography.heading.4", width: "200px" })
     ] })
   ] }),
   /* @__PURE__ */ t(z, {}),
-  /* @__PURE__ */ r(a, { gutter: "lg", children: [
-    /* @__PURE__ */ t(h, {}),
-    /* @__PURE__ */ t(h, {}),
-    /* @__PURE__ */ t(h, {})
+  /* @__PURE__ */ r(d, { gutter: "lg", children: [
+    /* @__PURE__ */ t(l, {}),
+    /* @__PURE__ */ t(l, {}),
+    /* @__PURE__ */ t(l, {})
   ] })
 ] }) }), I = {
   page: O,
@@ -56,56 +56,56 @@ const h = () => /* @__PURE__ */ t(c, { span: "4", children: /* @__PURE__ */ t(
 }, q = ({
   className: T,
   critical: s,
-  error: d,
+  error: a,
   loaded: v,
-  screenReaderText: b = "Loading...",
-  template: o = "page",
+  screenReaderText: C = "Loading...",
+  template: i = "page",
   timeout: g = 500,
   ...n
 }) => {
-  const [C, k] = u(!1), A = v !== !0 && C, [y, L] = u(!1), f = !!s, l = F({
-    error: !!d,
+  const [b, k] = u(!1), A = v !== !0 && b, [y, L] = u(!1), f = !!s, h = F({
+    error: !!a,
     pattern: "page",
     showCritical: y,
     showIndicator: A && !f
   }), N = j(() => {
-    if (typeof o == "string" && o in I) {
-      const i = I[o];
-      return /* @__PURE__ */ t(i, {});
+    if (typeof i == "string" && i in I) {
+      const o = I[i];
+      return /* @__PURE__ */ t(o, {});
     }
-    return o;
-  }, [o]);
+    return i;
+  }, [i]);
   return w(() => {
-    const i = setTimeout(() => k(!0), g);
+    const o = setTimeout(() => k(!0), g);
     return () => {
-      clearTimeout(i);
+      clearTimeout(o);
     };
   }, [g]), w(() => {
     if (!s)
       return;
-    const i = setTimeout(() => L(!0), 200);
+    const o = setTimeout(() => L(!0), 200);
     return () => {
-      clearTimeout(i);
+      clearTimeout(o);
     };
-  }, [s]), /* @__PURE__ */ r(x.div, { className: M(T, l.root), ...n, children: [
-    d,
-    !d && !y && /* @__PURE__ */ t(
+  }, [s]), /* @__PURE__ */ r(x.div, { className: M(T, h.root), ...n, children: [
+    a,
+    !a && !y && /* @__PURE__ */ t(
       "div",
       {
-        className: l.message,
+        className: h.message,
         "data-testid": S(n["data-testid"], "skeleton"),
         children: N
       }
     ),
-    !d && f && /* @__PURE__ */ t(
+    !a && f && /* @__PURE__ */ t(
       "div",
       {
-        className: l.critical,
+        className: h.critical,
         "data-testid": S(n["data-testid"], "critical"),
         children: s
       }
     ),
-    /* @__PURE__ */ t(x.div, { srOnly: !0, children: b })
+    /* @__PURE__ */ t(x.div, { srOnly: !0, children: C })
   ] });
 };
 q.displayName = "PageLoading";