@ogcio/design-system-react 1.32.0 → 1.34.0

package/dist/accordion/accordion-item.js

@@ -1,61 +1,46 @@
 "use client";
-import { jsxs as r, Fragment as u, jsx as a } from "react/jsx-runtime";
-import { c as t } from "../clsx-OuTLNxxd.js";
-import { useState as y, useRef as b } from "react";
-import { c as h } from "../index-CB-zPpNk.js";
-import { Icon as w } from "../icon/icon.js";
-const I = h({
-  variants: {
-    variant: {
-      default: "gi-px-2 gi-py-4 gi-text-md gi-font-bold",
-      small: "gi-py-2 gi-px-2 gi-text-sm gi-font-bold"
-    }
-  }
-}), j = ({
-  defaultExpanded: s,
+import { jsxs as n, Fragment as y, jsx as a } from "react/jsx-runtime";
+import { c as s } from "../clsx-OuTLNxxd.js";
+import { useState as w, useRef as I } from "react";
+import { c as k } from "../index-C7W4ssMN.js";
+import { Icon as v } from "../icon/icon.js";
+const $ = ({
+  defaultExpanded: d,
   children: c,
-  label: i,
-  disabled: n,
+  label: o,
+  disabled: t,
   className: l,
-  variant: e = "default",
-  ...m
+  variant: i = "default",
+  ...g
 }) => {
-  const [o, d] = y(s), g = b(null), p = `${i}-button`, f = `${i}-panel`;
-  return /* @__PURE__ */ r(u, { children: [
+  const [e, r] = w(d), m = I(null), p = `${o}-button`, f = `${o}-panel`, u = (h) => {
+    h.key === "Enter" && !t && r(!e);
+  }, { base: x, header: b } = N({ variant: i, disabled: !!t });
+  return /* @__PURE__ */ n(y, { children: [
     /* @__PURE__ */ a(
       "div",
       {
-        ...m,
-        ref: g,
-        "data-disabled": !!n,
-        onClick: () => !n && d(!o),
-        onKeyDown: (x) => {
-          x.key === "Enter" && !n && d(!o);
-        },
+        ...g,
+        ref: m,
+        "data-testid": "accordion-item",
+        "data-disabled": !!t,
+        onClick: () => !t && r(!e),
+        onKeyDown: u,
         tabIndex: 0,
-        className: t("gi-accordion", l),
-        children: /* @__PURE__ */ r(
-          "div",
-          {
-            className: t(
-              "gi-accordion-header",
-              I({ variant: e })
-            ),
-            children: [
-              i,
-              /* @__PURE__ */ a(
-                w,
-                {
-                  icon: o ? "keyboard_arrow_up" : "keyboard_arrow_down",
-                  size: "md",
-                  className: t({
-                    "gi-pt-[1.5px]": e === "default"
-                  })
-                }
-              )
-            ]
-          }
-        )
+        className: s(x(), l),
+        children: /* @__PURE__ */ n("div", { "data-testid": "accordion-header", className: b(), children: [
+          o,
+          /* @__PURE__ */ a(
+            v,
+            {
+              icon: e ? "keyboard_arrow_up" : "keyboard_arrow_down",
+              size: "md",
+              className: s({
+                "gi-pt-[1.5px]": i === "default"
+              })
+            }
+          )
+        ] })
       }
     ),
     /* @__PURE__ */ a(
@@ -64,17 +49,37 @@ const I = h({
         id: f,
         role: "region",
         "aria-labelledby": p,
-        className: t("gi-px-2 gi-pb-4 gi-pt-2 gi-font-normal", {
-          "gi-block": o,
-          "gi-hidden": !o,
-          "gi-text-md": e === "default",
-          "gi-text-sm": e === "small"
+        className: s("gi-px-2 gi-pb-4 gi-pt-2 gi-font-normal", {
+          "gi-block": e,
+          "gi-hidden": !e,
+          "gi-text-md": i === "default",
+          "gi-text-sm": i === "small"
         }),
         children: c
       }
     )
   ] });
-};
+}, N = k({
+  slots: {
+    base: "gi-focus-visible-state-outline-inner-shadow-sm",
+    header: " gi-flex gi-items-start gi-justify-between"
+  },
+  variants: {
+    variant: {
+      default: { header: "gi-px-2 gi-py-4 gi-text-md gi-font-bold" },
+      small: { header: "gi-py-2 gi-px-2 gi-text-sm gi-font-bold" }
+    },
+    disabled: {
+      false: {
+        base: "hover:gi-bg-gray-200 gi-focus-state-outline-inner-shadow-sm",
+        header: "gi-cursor-pointer"
+      },
+      true: {
+        header: "gi-cursor-not-allowed gi-text-gray-600"
+      }
+    }
+  }
+});
 export {
-  j as AccordionItem
+  $ as AccordionItem
 };

package/dist/alert/alert.js

@@ -1,69 +1,67 @@
 "use client";
-import { jsx as i, jsxs as t } from "react/jsx-runtime";
-import { useState as k } from "react";
-import v from "../atoms/icons/Info.js";
-import D from "../atoms/icons/Error.js";
-import V from "../atoms/icons/Warning.js";
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import { useState as I } from "react";
+import k from "../atoms/icons/Info.js";
+import v from "../atoms/icons/Error.js";
+import b from "../atoms/icons/Warning.js";
 import x from "../atoms/icons/CheckCircle.js";
-import { cn as n } from "../cn.js";
-import { translate as j } from "../i18n/utility.js";
-import { IconButton as E } from "../icon-button/icon-button.js";
-import { alertVariants as R } from "./variants.js";
-const S = {
-  warning: (r) => /* @__PURE__ */ i(V, { ...r }),
+import { cn as t } from "../cn.js";
+import { translate as D } from "../i18n/utility.js";
+import { IconButton as V } from "../icon-button/icon-button.js";
+import { alertVariants as j } from "./variants.js";
+const E = {
+  warning: (r) => /* @__PURE__ */ i(b, { ...r }),
   success: (r) => /* @__PURE__ */ i(x, { ...r }),
-  danger: (r) => /* @__PURE__ */ i(D, { ...r }),
-  info: (r) => /* @__PURE__ */ i(v, { ...r })
+  danger: (r) => /* @__PURE__ */ i(v, { ...r }),
+  info: (r) => /* @__PURE__ */ i(k, { ...r })
 };
-function C({
+function q({
   title: r,
-  children: o,
+  children: n,
   variant: a = "info",
-  showIcon: m = !0,
-  dismissible: e,
+  showIcon: o = !0,
+  dismissible: m,
   onClose: s,
-  className: c,
-  ...l
+  className: l,
+  ...c
 }) {
-  const [f, p] = k(!1), { base: u, heading: d, container: g, dismiss: N, baseDismissible: h } = R({
-    variant: a
-  }), A = e ? h : u;
+  const [f, d] = I(!1), { base: p, heading: u, container: g, dismiss: h } = j({ variant: a });
   if (f)
     return null;
-  const I = S[a ?? "info"];
-  return /* @__PURE__ */ t(
+  const N = E[a ?? "info"];
+  return /* @__PURE__ */ e(
     "div",
     {
-      className: n(A(), c, "gi-not-prose"),
+      className: t(p(), l, "gi-not-prose"),
       role: "alert",
       "aria-live": "assertive",
-      ...l,
+      ...c,
       children: [
-        m ? /* @__PURE__ */ i(I, { className: "gi-shrink-0 gi-block" }) : null,
-        /* @__PURE__ */ t(
+        o ? /* @__PURE__ */ i(N, { className: "gi-shrink-0 gi-block" }) : null,
+        /* @__PURE__ */ e(
           "div",
           {
-            className: n(g(), {
+            className: t(g(), {
               "gi-gap-1": r
             }),
             children: [
-              r && /* @__PURE__ */ i("p", { className: d(), children: r }),
-              o
+              r && /* @__PURE__ */ i("p", { className: u(), "data-testid": "alert-heading", children: r }),
+              n
             ]
           }
         ),
-        e && /* @__PURE__ */ i(
-          E,
+        m && /* @__PURE__ */ i(
+          V,
           {
-            onClick: (b) => {
-              p(!0), s == null || s(b);
+            onClick: (A) => {
+              d(!0), s == null || s(A);
             },
-            className: N(),
+            className: h(),
             size: "small",
             appearance: "dark",
             variant: "flat",
             icon: { icon: "close" },
-            "aria-label": j("alert.dismissAlert", {
+            "aria-label": D("alert.dismissAlert", {
               defaultValue: "Dismiss alert"
             })
           }
@@ -73,6 +71,6 @@ function C({
   );
 }
 export {
-  S as ALERT_VARIANT_ICONS,
-  C as Alert
+  E as ALERT_VARIANT_ICONS,
+  q as Alert
 };

package/dist/alert/variants.d.ts

@@ -2,24 +2,23 @@ export declare const alertVariants: import('tailwind-variants').TVReturnType<{
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }, {
     base: string;
-    baseDismissible: string;
     container: string;
     heading: string;
     dismiss: string;
@@ -27,62 +26,61 @@ export declare const alertVariants: import('tailwind-variants').TVReturnType<{
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }, {
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }>, {
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }, {
     base: string;
-    baseDismissible: string;
     container: string;
     heading: string;
     dismiss: string;
@@ -90,24 +88,23 @@ export declare const alertVariants: import('tailwind-variants').TVReturnType<{
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }, {
     base: string;
-    baseDismissible: string;
     container: string;
     heading: string;
     dismiss: string;
@@ -115,38 +112,38 @@ export declare const alertVariants: import('tailwind-variants').TVReturnType<{
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }, {
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }>, unknown, unknown, undefined>>;

package/dist/alert/variants.js

@@ -1,29 +1,28 @@
-import { c as i } from "../index-CB-zPpNk.js";
-const a = i({
+import { c as t } from "../index-C7W4ssMN.js";
+const i = t({
   slots: {
-    base: "gi-alert-base",
-    baseDismissible: "gi-alert-base-dismissible",
-    container: "gi-alert-container",
-    heading: "gi-alert-title",
-    dismiss: "gi-alert-dismiss"
+    base: "gi-relative gi-flex gi-flex-row gi-p-3 gi-border-xs gi-rounded-sm gi-gap-2 gi-max-w-[640px] [width:inherit]",
+    container: "gi-flex gi-flex-col gi-items-start gi-grow gi-pr-2",
+    heading: "gi-text-2md gi-font-bold",
+    dismiss: "gi-absolute gi-top-2 gi-right-2"
   },
   variants: {
     variant: {
       info: {
-        base: "gi-alert-info",
-        baseDismissible: "gi-alert-info"
-      },
-      danger: {
-        base: "gi-alert-danger",
-        baseDismissible: "gi-alert-danger"
+        base: "gi-bg-color-surface-intent-info-default gi-border-color-border-intent-info-subtle gi-text-color-text-intent-info-default",
+        icon: "gi-text-color-icon-intent-info-default"
       },
       success: {
-        base: "gi-alert-success",
-        baseDismissible: "gi-alert-success"
+        base: "gi-bg-color-surface-intent-success-default gi-border-color-border-intent-success-subtle gi-text-color-text-intent-success-default",
+        icon: "gi-text-color-icon-intent-success-default"
       },
       warning: {
-        base: "gi-alert-warning",
-        baseDismissible: "gi-alert-warning"
+        base: "gi-bg-color-surface-intent-warning-default gi-border-color-border-intent-warning-subtle gi-text-color-text-intent-warning-default",
+        icon: "gi-text-color-icon-intent-warning-default"
+      },
+      danger: {
+        base: "gi-bg-color-surface-intent-error-default gi-border-color-border-intent-error-subtle gi-text-color-text-intent-error-default",
+        icon: "gi-text-color-icon-intent-error-default"
       }
     }
   },
@@ -32,5 +31,5 @@ const a = i({
   }
 });
 export {
-  a as alertVariants
+  i as alertVariants
 };

package/dist/atoms/Button.d.ts

@@ -4,7 +4,7 @@
  * The file source is in `packages/core/atoms/Button.lite.tsx`
  */
 import * as React from 'react';
-type Props = {
+export type Props = {
     id?: string;
     variant?: (typeof Variant)[keyof typeof Variant];
     appearance?: (typeof Appearance)[keyof typeof Appearance];
@@ -20,6 +20,7 @@ type Props = {
     ariaLabel?: string;
     ariaLabelledBy?: string;
     ariaDescribedBy?: string;
+    ariaChecked?: boolean;
     ariaPressed?: boolean | 'mixed';
     ariaExpanded?: boolean;
     ariaControls?: string;
@@ -31,7 +32,6 @@ type Props = {
     value?: string;
     tabIndex?: number;
     dataTestId?: string;
-    dataTestid?: string;
     ref?: any;
 };
 export declare const Variant: {

package/dist/atoms/Button.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as d } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { c as s } from "../index-CB-zPpNk.js";
+import { c as s } from "../index-C7W4ssMN.js";
 const r = {
   PRIMARY: "primary",
   SECONDARY: "secondary",
@@ -291,6 +291,7 @@ const r = {
       "aria-label": e.ariaLabel,
       "aria-labelledby": e.ariaLabelledBy,
       "aria-describedby": e.ariaDescribedBy,
+      "aria-checked": e.ariaChecked,
       "aria-pressed": e.ariaPressed,
       "aria-expanded": e.ariaExpanded,
       "aria-controls": e.ariaControls,
@@ -301,7 +302,7 @@ const r = {
       form: e.form,
       value: e.value,
       tabIndex: e.tabIndex,
-      "data-testid": e.dataTestId ?? e.dataTestid,
+      "data-testid": e.dataTestId,
       children: e.children
     }
   );

package/dist/atoms/heading/styles.js

@@ -1,4 +1,4 @@
-import { c as t } from "../../index-CB-zPpNk.js";
+import { c as t } from "../../index-C7W4ssMN.js";
 const l = t({
   base: "gi-font-bold gi-font-primary",
   variants: {

package/dist/atoms/storybook/Heading.meta.d.ts

@@ -1,4 +1,4 @@
-import { StoryContext, Renderer } from '@storybook/types';
+import { StoryContext, Renderer } from 'storybook/internal/types';
 export declare const headingMeta: {
     tags: string[];
     title: string;

package/dist/atoms/storybook/Heading.meta.js

@@ -1,4 +1,4 @@
-import { K as i, n as t } from "../../index-Bh2cTIps.js";
+import { w as n, e as t } from "../../index-DqBV2TCd.js";
 import { Size as s } from "../heading/types.js";
 const o = {
   tags: ["autodocs"],
@@ -55,10 +55,10 @@ const o = {
 }, l = {
   play: async ({
     canvasElement: a,
-    step: n
+    step: i
   }) => {
-    const e = i(a);
-    await n("renders h1 to h6 with the correct semantic tags", async () => {
+    const e = n(a);
+    await i("renders h1 to h6 with the correct semantic tags", async () => {
       t(e.getByTestId("heading-1").tagName).toBe("H1"), t(e.getByTestId("heading-2").tagName).toBe("H2"), t(e.getByTestId("heading-3").tagName).toBe("H3"), t(e.getByTestId("heading-4").tagName).toBe("H4"), t(e.getByTestId("heading-5").tagName).toBe("H5"), t(e.getByTestId("heading-6").tagName).toBe("H6");
     });
   }

package/dist/atoms/storybook/Icons.meta.d.ts

@@ -1,4 +1,4 @@
-import { StoryContext, Renderer } from '@storybook/types';
+import { StoryContext, Renderer } from 'storybook/internal/types';
 import { default as ArrowLeft } from '../icons/ArrowLeft';
 export declare const iconList: {
     Component: typeof ArrowLeft;

package/dist/atoms/storybook/Icons.meta.js

@@ -1,4 +1,4 @@
-import { K as n, n as i } from "../../index-Bh2cTIps.js";
+import { w as n, e as i } from "../../index-DqBV2TCd.js";
 import a from "../icons/ArrowLeft.js";
 import s from "../icons/ArrowRight.js";
 import c from "../icons/CheckCircle.js";
@@ -10,8 +10,8 @@ import d from "../icons/KeyboardArrowDown.js";
 import y from "../icons/KeyboardArrowLeft.js";
 import b from "../icons/KeyboardArrowRight.js";
 import g from "../icons/KeyboardArrowUp.js";
-import C from "../icons/LastPage.js";
-import w from "../icons/Visibility.js";
+import w from "../icons/LastPage.js";
+import C from "../icons/Visibility.js";
 import h from "../icons/VisibilityOff.js";
 import A from "../icons/Warning.js";
 const u = [{
@@ -59,11 +59,11 @@ const u = [{
   name: "KeyboardArrowUp",
   selector: "keyboard-arrow-up"
 }, {
-  Component: C,
+  Component: w,
   name: "LastPage",
   selector: "last-page"
 }, {
-  Component: w,
+  Component: C,
   name: "Visibility",
   selector: "visibility"
 }, {
@@ -108,7 +108,7 @@ const u = [{
       }
     }
   }
-}, E = {
+}, N = {
   args: K.args,
   play: async ({
     canvasElement: e,
@@ -124,7 +124,7 @@ const u = [{
   }
 };
 export {
-  E as Default,
+  N as Default,
   u as iconList,
   K as iconsMeta
 };

package/dist/atoms/storybook/InsetText.meta.d.ts

@@ -1,4 +1,4 @@
-import { StoryContext, Renderer } from '@storybook/types';
+import { StoryContext, Renderer } from 'storybook/internal/types';
 export declare const insetTextMeta: {
     tags: string[];
     title: string;

package/dist/atoms/storybook/InsetText.meta.js

@@ -1,4 +1,4 @@
-import { K as r, n as t } from "../../index-Bh2cTIps.js";
+import { w as r, e as t } from "../../index-DqBV2TCd.js";
 const s = {
   tags: ["autodocs"],
   title: "Typography/InsetText",

package/dist/atoms/storybook/Logos.meta.d.ts

@@ -1,4 +1,4 @@
-import { StoryContext, Renderer } from '@storybook/types';
+import { StoryContext, Renderer } from 'storybook/internal/types';
 export declare const logosMeta: {
     tags: string[];
     title: string;