@ogcio/design-system-react 1.18.0 → 1.19.0

package/dist/drawer/drawer.js

@@ -1,4 +1,5 @@
 "use client";
+import "@ogcio/design-system-react/browser-check";
 import { jsx as a, jsxs as x, Fragment as y } from "react/jsx-runtime";
 import { useState as D, cloneElement as M } from "react";
 import { cn as r } from "../cn.js";
@@ -7,7 +8,7 @@ const b = ({
   children: o,
   className: e,
   ...s
-}) => /* @__PURE__ */ a(N, { className: r("gi-drawer-container", e), ...s, children: o }), I = ({
+}) => /* @__PURE__ */ a(N, { className: r("gi-drawer-container", e), ...s, children: o }), S = ({
   children: o,
   triggerButton: e,
   startsOpen: s,
@@ -39,21 +40,21 @@ const b = ({
       }
     )
   ] });
-}, S = ({ children: o, className: e }) => /* @__PURE__ */ a(
+}, T = ({ children: o, className: e }) => /* @__PURE__ */ a(
   O,
   {
     includeModalClass: !1,
     className: r("gi-drawer-body", e),
     children: o
   }
-), T = ({
+), q = ({
   children: o,
   className: e,
   stacked: s
 }) => /* @__PURE__ */ a(F, { stacked: s, className: r("gi-drawer-footer", e), children: o });
 export {
-  I as Drawer,
-  S as DrawerBody,
-  T as DrawerFooter,
+  S as Drawer,
+  T as DrawerBody,
+  q as DrawerFooter,
   b as DrawerWrapper
 };

package/dist/footer/footer.js

@@ -1,4 +1,5 @@
 "use client";
+import "@ogcio/design-system-react/browser-check";
 import { jsxs as i, jsx as t, Fragment as u } from "react/jsx-runtime";
 import { renderToStaticMarkup as c } from "react-dom/server";
 import h from "../assets/logos/gov-of-ireland/harp-gold-text-green.js";
@@ -24,7 +25,7 @@ function l({ logo: e }) {
     )
   ] });
 }
-function H({
+function M({
   primarySlot: e,
   secondarySlot: o,
   utilitySlot: n,
@@ -104,5 +105,5 @@ function H({
   );
 }
 export {
-  H as Footer
+  M as Footer
 };

package/dist/forms/form-field/form-field.js

@@ -1,4 +1,5 @@
 "use client";
+import "@ogcio/design-system-react/browser-check";
 import { jsx as t, jsxs as a } from "react/jsx-runtime";
 import { S as g } from "../../index-2sRBqKFV.js";
 import { createContext as x, useContext as v, Children as L, isValidElement as C } from "react";
@@ -19,21 +20,21 @@ function P(e) {
     m(e) ?? ""
   );
 }
-const _ = (e) => ["error", "hint", "label"].some((l) => l in e) ? (console.warn(
+const B = (e) => ["error", "hint", "label"].some((l) => l in e) ? (console.warn(
   "[FormField] Using legacy props. Please migrate to the new composable API."
-), /* @__PURE__ */ t(c.Provider, { value: !0, children: /* @__PURE__ */ a(y, { ...e, children: [
+), /* @__PURE__ */ t(c.Provider, { value: !0, children: /* @__PURE__ */ a(p, { ...e, children: [
   e.label && /* @__PURE__ */ t(F, { ...e.label }),
   e.hint && /* @__PURE__ */ t(u, { ...e.hint }),
   e.error && /* @__PURE__ */ t(f, { ...e.error }),
   e.children
-] }) })) : /* @__PURE__ */ t(c.Provider, { value: !0, children: /* @__PURE__ */ t(y, { ...e, children: e.children }) }), y = ({
+] }) })) : /* @__PURE__ */ t(c.Provider, { value: !0, children: /* @__PURE__ */ t(p, { ...e, children: e.children }) }), p = ({
   children: e,
   className: r,
   ...i
 }) => {
   const l = L.toArray(e), n = l.find(
     (o) => m(o) === "FormFieldLabel"
-  ), p = l.find(
+  ), y = l.find(
     (o) => m(o) === "FormFieldHint"
   ), b = l.find(
     (o) => m(o) === "FormFieldError"
@@ -47,7 +48,7 @@ const _ = (e) => ["error", "hint", "label"].some((l) => l in e) ? (console.warn(
         /* @__PURE__ */ a("div", { className: "gi-pb-3 gi-flex gi-flex-col gi-gap-1", children: [
           /* @__PURE__ */ a("div", { children: [
             n,
-            p
+            y
           ] }),
           b
         ] }),
@@ -107,7 +108,7 @@ Object.defineProperty(f, "componentType", {
 });
 f.displayName = "FormFieldError";
 export {
-  _ as FormField,
+  B as FormField,
   f as FormFieldError,
   u as FormFieldHint,
   F as FormFieldLabel

package/dist/header/components/header-menu.d.ts

@@ -9,5 +9,4 @@ type MenuItemAccordionProps = {
 };
 export declare const MenuItemAccordion: ({ index, item }: MenuItemAccordionProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MobileHeaderMenuItems: ({ items, secondaryLinks, }: MobileHeaderMenuProps) => import("react/jsx-runtime").JSX.Element;
-declare function HeaderMenu({ ...props }: MobileHeaderMenuProps): import("react/jsx-runtime").JSX.Element;
-export default HeaderMenu;
+export {};

package/dist/header/components/header-menu.js

@@ -1,17 +1,17 @@
 "use client";
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
-import { useState as g } from "react";
+import "@ogcio/design-system-react/browser-check";
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { useState as h } from "react";
 import { cn as f } from "../../cn.js";
-import { translate as d } from "../../i18n/utility.js";
-import { Icon as h } from "../../icon/icon.js";
+import { Icon as p } from "../../icon/icon.js";
 import { ListItem as s } from "../../list-item/list-item.js";
-const m = ({ index: l, item: a }) => {
-  const [r, n] = g(!1), e = () => {
-    n((i) => !i);
-  }, c = (i) => {
-    (i.key === "Enter" || i.key === " ") && (i.preventDefault(), e());
+const g = ({ index: l, item: e }) => {
+  const [r, c] = h(!1), o = () => {
+    c((t) => !t);
+  }, a = (t) => {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), o());
   };
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ i(
     "div",
     {
       id: `Accordion-item-${l}`,
@@ -19,25 +19,25 @@ const m = ({ index: l, item: a }) => {
       "data-open": r.toString(),
       role: "presentation",
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ n(
           "div",
           {
-            "aria-label": a.label,
+            "aria-label": e.label,
             id: `Accordion-header-${l}`,
             role: "button",
             "aria-expanded": r,
             "aria-controls": `Accordion-slot-${l}`,
             className: "gi-header-accordion-item-toggle",
             tabIndex: 0,
-            onClick: e,
-            onKeyDown: c,
-            children: /* @__PURE__ */ t("div", { children: [
-              /* @__PURE__ */ o("span", { className: "gi-text-sm gi-font-bold gi-ml-1", children: a.label }),
-              /* @__PURE__ */ o(h, { icon: "chevron_right", className: "gi-accordion-item-icon" })
+            onClick: o,
+            onKeyDown: a,
+            children: /* @__PURE__ */ i("div", { children: [
+              /* @__PURE__ */ n("span", { className: "gi-text-sm gi-font-bold gi-ml-1", children: e.label }),
+              /* @__PURE__ */ n(p, { icon: "chevron_right", className: "gi-accordion-item-icon" })
             ] })
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ n(
           "div",
           {
             id: `Accordion-slot-${l}`,
@@ -45,47 +45,47 @@ const m = ({ index: l, item: a }) => {
             className: f("gi-accordion-item-slot", {
               "gi-hidden": !r
             }),
-            children: a.slot
+            children: e.slot
           }
         )
       ]
     },
     `Accordion-item-${l}`
   );
-}, p = ({
+}, v = ({
   items: l,
-  secondaryLinks: a
-}) => /* @__PURE__ */ t("ul", { children: [
-  l == null ? void 0 : l.map(({ itemType: r, label: n, ...e }, c) => {
-    const [i, u] = [
+  secondaryLinks: e
+}) => /* @__PURE__ */ i("ul", { children: [
+  l == null ? void 0 : l.map(({ itemType: r, label: c, ...o }, a) => {
+    const [t, d] = [
       r === "link" || r === "custom-link",
       r === "slot"
     ];
-    if (!n)
+    if (!c)
       return null;
-    if (i)
-      return /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(
+    if (t)
+      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
         s,
         {
-          href: e == null ? void 0 : e.href,
-          label: n,
-          external: e == null ? void 0 : e.external,
-          slot: e == null ? void 0 : e.component
+          href: o == null ? void 0 : o.href,
+          label: c,
+          external: o == null ? void 0 : o.external,
+          slot: o == null ? void 0 : o.component
         }
-      ) }, `navLink-${n}-${c}`);
-    if (u)
-      return /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(
-        m,
+      ) }, `navLink-${c}-${a}`);
+    if (d)
+      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+        g,
         {
-          index: c,
+          index: a,
           item: {
-            label: n,
-            slot: e == null ? void 0 : e.component
+            label: c,
+            slot: o == null ? void 0 : o.component
           }
         }
-      ) }, `toolItems-${n}-${c}`);
+      ) }, `toolItems-${c}-${a}`);
   }),
-  a == null ? void 0 : a.map((r, n) => /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(
+  e == null ? void 0 : e.map((r, c) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
     s,
     {
       href: r.href,
@@ -93,39 +93,9 @@ const m = ({ index: l, item: a }) => {
       bold: !1,
       slot: r.slot
     }
-  ) }, `secondary-${r.label}-${n}`))
+  ) }, `secondary-${r.label}-${c}`))
 ] });
-function I({ ...l }) {
-  return /* @__PURE__ */ t(
-    "div",
-    {
-      id: "HeaderMenuContainer",
-      className: "gi-header-menu-container lg:gi-hidden",
-      "aria-label": d("header.mobileNavigationMenu", {
-        defaultValue: "Mobile Navigation Menu"
-      }),
-      children: [
-        /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o("div", { className: "gi-flex gi-items-center", children: /* @__PURE__ */ t(
-          "label",
-          {
-            htmlFor: "MobileMenuTrigger",
-            className: "gi-header-menu-mobile-trigger",
-            "aria-label": d("header.closeMobileMenu", {
-              defaultValue: "Close Mobile Menu"
-            }),
-            children: [
-              /* @__PURE__ */ o("span", { children: "Close" }),
-              /* @__PURE__ */ o(h, { icon: "close" })
-            ]
-          }
-        ) }) }),
-        /* @__PURE__ */ o(p, { ...l })
-      ]
-    }
-  );
-}
 export {
-  m as MenuItemAccordion,
-  p as MobileHeaderMenuItems,
-  I as default
+  g as MenuItemAccordion,
+  v as MobileHeaderMenuItems
 };

package/dist/header/components/header-slot.js

@@ -1,12 +1,12 @@
-import { jsx as a, jsxs as s, Fragment as I } from "react/jsx-runtime";
-import { useState as $ } from "react";
+import { jsx as a, jsxs as s, Fragment as $ } from "react/jsx-runtime";
+import { useState as f } from "react";
 import { cn as n } from "../../cn.js";
-import { DrawerWrapper as f, DrawerBody as T } from "../../drawer/drawer.js";
+import { DrawerWrapper as T, DrawerBody as b } from "../../drawer/drawer.js";
 import { translate as c } from "../../i18n/utility.js";
 import { Icon as i } from "../../icon/icon.js";
 import { Input as h } from "../../primitives/input.js";
-import { headerSlotContainerVariants as b, headerToolItemVariants as p } from "../variants.js";
-const y = ({
+import { headerSlotContainerVariants as C, headerToolItemVariants as p } from "../variants.js";
+const B = ({
   index: e,
   slot: r,
   appearance: t
@@ -20,21 +20,21 @@ const y = ({
       index: e + 1,
       defaultValue: `Slot Container ${e + 1}`
     }),
-    className: n(b({ appearance: t }), "gi-hidden"),
+    className: n(C({ appearance: t }), "gi-hidden"),
     children: r
   }
-), C = ({
+), A = ({
   index: e,
-  item: { component: r, drawerPosition: t, icon: d, label: l, ariaLabel: m },
-  appearance: u
+  item: { component: r, drawerPosition: t, icon: d, label: l, ariaLabel: m, closeLabel: u },
+  appearance: I
 }) => {
-  const [o, g] = $(!1);
-  return /* @__PURE__ */ s(I, { children: [
+  const [o, g] = f(!1);
+  return /* @__PURE__ */ s($, { children: [
     /* @__PURE__ */ s(
       "label",
       {
         htmlFor: `ItemActionDrawerTrigger-${e}`,
-        className: p({ appearance: u }),
+        className: p({ appearance: I }),
         onClick: () => g(!0),
         children: [
           /* @__PURE__ */ a(
@@ -86,24 +86,24 @@ const y = ({
       }
     ),
     /* @__PURE__ */ a(
-      f,
+      T,
       {
         isOpen: o,
         onClose: () => g(!1),
         position: t || "right",
         closeButtonLabel: c("header.drawer.close", {
-          defaultValue: "Close"
+          defaultValue: u || "Close"
         }),
         closeButtonSize: "large",
-        children: /* @__PURE__ */ a(T, { children: r })
+        children: /* @__PURE__ */ a(b, { children: r })
       }
     )
   ] });
-}, B = ({
+}, F = ({
   item: e,
   index: r,
   appearance: t
-}) => e.slotAppearance === "drawer" ? /* @__PURE__ */ a(C, { index: r, item: e, appearance: t }) : /* @__PURE__ */ s(
+}) => e.slotAppearance === "drawer" ? /* @__PURE__ */ a(A, { index: r, item: e, appearance: t }) : /* @__PURE__ */ s(
   "label",
   {
     htmlFor: `ItemActionTrigger-${r}`,
@@ -149,6 +149,6 @@ const y = ({
   }
 );
 export {
-  y as SlotContainer,
-  B as SlotItemAction
+  B as SlotContainer,
+  F as SlotItemAction
 };

package/dist/header/header.js

@@ -1,4 +1,5 @@
 "use client";
+import "@ogcio/design-system-react/browser-check";
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { useEffect as H, useMemo as T, createElement as I } from "react";
 import { renderToStaticMarkup as v } from "react-dom/server";
@@ -84,7 +85,7 @@ const K = (r, n, t) => [{
     appearance: n
   }
 )) });
-function ue({
+function fe({
   title: r,
   items: n,
   logo: t,
@@ -216,5 +217,5 @@ function ue({
   );
 }
 export {
-  ue as Header
+  fe as Header
 };

package/dist/header/types.d.ts

@@ -11,6 +11,7 @@ type CommonProps = {
 type ConditionalProps = {
     label?: string;
     ariaLabel?: string;
+    closeLabel?: string;
     icon?: IconId;
     component: React.ReactNode;
     href?: never;
@@ -22,6 +23,7 @@ type ConditionalProps = {
 } | {
     label?: never;
     ariaLabel?: string;
+    closeLabel?: string;
     icon?: never;
     component?: never;
     href?: never;
@@ -33,6 +35,7 @@ type ConditionalProps = {
 } | {
     label?: string;
     ariaLabel?: string;
+    closeLabel?: string;
     icon?: IconId;
     component?: never;
     href?: string;
@@ -44,6 +47,7 @@ type ConditionalProps = {
 } | {
     label?: never;
     ariaLabel?: string;
+    closeLabel?: string;
     icon?: never;
     component: React.ReactNode;
     href?: never;

package/dist/hooks/use-breakpoint.js

@@ -1,24 +1,25 @@
 "use client";
-import { useState as i, useEffect as o } from "react";
+import "@ogcio/design-system-react/browser-check";
+import { useState as i, useEffect as l } from "react";
 const r = {
   ExtraSmall: "xs",
   Small: "sm",
   Medium: "md",
   Large: "lg",
   ExtraLarge: "xl"
-}, u = (e) => e < 480 ? r.ExtraSmall : e < 640 ? r.Small : e < 768 ? r.Medium : e < 1024 ? r.Large : r.ExtraLarge, c = () => {
-  const [e, a] = i(null), [s, l] = i(null);
-  return o(() => {
+}, u = (e) => e < 480 ? r.ExtraSmall : e < 640 ? r.Small : e < 768 ? r.Medium : e < 1024 ? r.Large : r.ExtraLarge, d = () => {
+  const [e, a] = i(null), [o, s] = i(null);
+  return l(() => {
     const t = () => {
       const n = globalThis.window.innerWidth;
-      l(n), a(u(n));
+      s(n), a(u(n));
     };
     return t(), globalThis.window.addEventListener("resize", t), () => {
       globalThis.window.removeEventListener("resize", t);
     };
-  }, []), { breakpoint: e, width: s };
+  }, []), { breakpoint: e, width: o };
 };
 export {
   r as Breakpoint,
-  c as useBreakpoint
+  d as useBreakpoint
 };

package/dist/icon/icon.js

@@ -1,4 +1,5 @@
 "use client";
+import "@ogcio/design-system-react/browser-check";
 import { jsx as e } from "react/jsx-runtime";
 import { cn as i } from "../cn.js";
 import b from "./svgs/bluesky.js";
@@ -10,7 +11,7 @@ import h from "./svgs/threads.js";
 import x from "./svgs/tiktok.js";
 import _ from "./svgs/x.js";
 import n from "./svgs/youtube.js";
-function j({
+function B({
   icon: t,
   size: g = "md",
   filled: c,
@@ -169,5 +170,5 @@ function j({
   );
 }
 export {
-  j as Icon
+  B as Icon
 };

package/dist/icon-button/icon-button.js

@@ -1,10 +1,11 @@
 "use client";
+import "@ogcio/design-system-react/browser-check";
 import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
+import { forwardRef as f } from "react";
 import { isButtonDisabled as B, getButtonIconSizeClass as I, getVariantAppearanceClass as b } from "../button/helpers.js";
 import { cn as d } from "../cn.js";
 import { Icon as g } from "../icon/icon.js";
-const x = p(
+const x = f(
   ({
     icon: i,
     variant: o,
@@ -17,7 +18,7 @@ const x = p(
     dataTestid: a,
     ...u
   }, l) => {
-    const f = r === "small" ? "sm" : "md";
+    const p = r === "small" ? "sm" : "md";
     return /* @__PURE__ */ m(
       "button",
       {
@@ -36,7 +37,7 @@ const x = p(
           B({ disabled: t, variant: o, appearance: n }),
           e
         ),
-        children: /* @__PURE__ */ m(g, { size: f, ...i })
+        children: /* @__PURE__ */ m(g, { size: p, ...i })
       }
     );
   }

package/dist/input-checkbox/input-checkbox.js

@@ -1,6 +1,7 @@
 "use client";
-import { jsxs as n, Fragment as u, jsx as i } from "react/jsx-runtime";
-import { forwardRef as p, useId as b } from "react";
+import "@ogcio/design-system-react/browser-check";
+import { jsxs as n, Fragment as p, jsx as i } from "react/jsx-runtime";
+import { forwardRef as u, useId as b } from "react";
 import { cn as x } from "../cn.js";
 import { HintText as g } from "../hint-text/hint-text.js";
 import { Input as k } from "../primitives/input.js";
@@ -17,7 +18,7 @@ const f = (e) => {
 }, C = (e) => {
   let t = "gi-w-8";
   return e === a.Large && (t = "gi-w-11"), e === a.Small && (t = "gi-w-6"), t;
-}, r = p(
+}, r = u(
   ({
     id: e,
     size: t = a.Medium,
@@ -28,7 +29,7 @@ const f = (e) => {
     ...d
   }, h) => {
     const c = e || b();
-    return /* @__PURE__ */ n(u, { children: [
+    return /* @__PURE__ */ n(p, { children: [
       /* @__PURE__ */ n("div", { className: "gi-input-checkbox-container", ...m, children: [
         /* @__PURE__ */ i(
           k,

package/dist/input-checkbox-group/input-checkbox-group.js

@@ -1,23 +1,24 @@
 "use client";
-import { jsx as r } from "react/jsx-runtime";
-import { useState as g, useEffect as m, Children as v, isValidElement as k, cloneElement as E } from "react";
-const C = ({ size: p, groupId: e, inline: u, onChange: t, children: d, values: n }) => {
-  const [l, s] = g(
+import "@ogcio/design-system-react/browser-check";
+import { jsx as c } from "react/jsx-runtime";
+import { useState as f, useEffect as g, Children as v, isValidElement as k, cloneElement as E } from "react";
+const I = ({ size: p, groupId: e, inline: u, onChange: t, children: d, values: n }) => {
+  const [l, s] = f(
     n || []
   );
-  m(() => {
+  g(() => {
     s(n || []);
   }, [n]);
   const o = n === void 0 ? l : n, a = (i) => {
-    let c = [];
-    c = o.includes(i) ? o.filter((f) => f !== i) : [...o, i], n === void 0 && s(c), t == null || t(c);
+    let r = [];
+    r = o.includes(i) ? o.filter((m) => m !== i) : [...o, i], n === void 0 && s(r), t == null || t(r);
   }, h = v.map(d, (i) => k(i) ? E(i, {
     onChange: () => a(i.props.value),
     checked: o.includes(i.props.value),
     size: p,
     name: e
   }) : i);
-  return /* @__PURE__ */ r("div", { className: "gi-input-group-container", children: /* @__PURE__ */ r("div", { className: "gi-input-group-options-container", children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ c("div", { className: "gi-input-group-container", children: /* @__PURE__ */ c("div", { className: "gi-input-group-options-container", children: /* @__PURE__ */ c(
     "div",
     {
       className: u ? "gi-input-group-options-inline" : "gi-input-group-options-stacked",
@@ -26,5 +27,5 @@ const C = ({ size: p, groupId: e, inline: u, onChange: t, children: d, values: n
   ) }) });
 };
 export {
-  C as InputCheckboxGroup
+  I as InputCheckboxGroup
 };

package/dist/input-password/input-password.js

@@ -1,4 +1,5 @@
 "use client";
+import "@ogcio/design-system-react/browser-check";
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as r, useState as c } from "react";
 import { InputText as l } from "../input-text/input-text.js";

package/dist/input-radio/input-radio.js

@@ -1,4 +1,5 @@
 "use client";
+import "@ogcio/design-system-react/browser-check";
 import { jsx as e, Fragment as c, jsxs as n } from "react/jsx-runtime";
 import { useId as u } from "react";
 import { cn as g } from "../cn.js";
@@ -10,10 +11,10 @@ import { InputRadioSizeEnum as d } from "./types.js";
 const x = (r) => {
   let i = "gi-input-radio-medium";
   return r === d.Large && (i = "gi-input-radio-large"), r === d.Small && (i = "gi-input-radio-small"), i;
-}, j = (r) => {
+}, y = (r) => {
   let i = "gi-w-8";
   return r === d.Large && (i = "gi-w-11"), r === d.Small && (i = "gi-w-6"), i;
-}, y = ({
+}, F = ({
   label: r,
   hint: i,
   id: s,
@@ -63,6 +64,6 @@ const x = (r) => {
   ] }) });
 };
 export {
-  y as InputRadio,
-  j as getRadioWidth
+  F as InputRadio,
+  y as getRadioWidth
 };