@ogcio/design-system-react 1.29.0 → 1.31.0

package/dist/footer/footer.js

@@ -1,102 +1,110 @@
 "use client";
-import { jsxs as i, jsx as t, Fragment as u } from "react/jsx-runtime";
-import { renderToStaticMarkup as c } from "react-dom/server";
-import { LogoGoldGreen as h } from "../assets/logos/LogoGoldGreen.js";
-import { LogoHarpWhite as g } from "../assets/logos/LogoHarpWhite.js";
-import { cn as v } from "../cn.js";
-import { Container as b } from "../container/container.js";
-import { translate as a } from "../i18n/utility.js";
-import p from "../primitives/anchor.js";
-import { SectionBreak as L } from "../section-break/section-break.js";
-function l({ logo: e }) {
-  const n = `data:image/svg+xml;base64,${btoa(c(/* @__PURE__ */ t(g, {})))}`, s = `data:image/svg+xml;base64,${btoa(
-    c(/* @__PURE__ */ t(h, {}))
+import { jsxs as a, jsx as t, Fragment as u } from "react/jsx-runtime";
+import { renderToStaticMarkup as l } from "react-dom/server";
+import g from "../atoms/icons/logos/LogoGoldGreen.js";
+import h from "../atoms/icons/logos/LogoHarpWhite.js";
+import { cn as p } from "../cn.js";
+import { Container as v } from "../container/container.js";
+import { translate as i } from "../i18n/utility.js";
+import b from "../primitives/anchor.js";
+import { SectionBreak as x } from "../section-break/section-break.js";
+function c({ logo: e }) {
+  const o = `data:image/svg+xml;base64,${btoa(l(/* @__PURE__ */ t(h, {})))}`, n = `data:image/svg+xml;base64,${btoa(
+    l(/* @__PURE__ */ t(g, {}))
   )}`;
-  return /* @__PURE__ */ i("picture", { children: [
-    /* @__PURE__ */ t("source", { srcSet: (e == null ? void 0 : e.imageLarge) || s }),
+  return /* @__PURE__ */ a("picture", { children: [
+    /* @__PURE__ */ t("source", { srcSet: (e == null ? void 0 : e.imageLarge) || n }),
     /* @__PURE__ */ t(
       "img",
       {
         className: "gi-h-16",
-        src: (e == null ? void 0 : e.imageSmall) || n,
-        alt: (e == null ? void 0 : e.alt) || a("logo.govieLogo", { defaultValue: "Gov.ie Logo" })
+        src: (e == null ? void 0 : e.imageSmall) || o,
+        alt: (e == null ? void 0 : e.alt) || i("logo.govieLogo", { defaultValue: "Gov.ie Logo" })
       }
     )
   ] });
 }
-function M({
+function j({
   primarySlot: e,
-  secondarySlot: o,
-  utilitySlot: n,
+  secondarySlot: s,
+  utilitySlot: o,
   logo: r,
-  className: s = "",
-  dataTestid: d,
-  ...m
+  className: n = "",
+  dataTestid: m,
+  ...d
 }) {
-  const f = () => /* @__PURE__ */ i(u, { children: [
+  const f = () => /* @__PURE__ */ a(u, { children: [
     (r == null ? void 0 : r.href) && /* @__PURE__ */ t(
-      p,
+      b,
       {
         href: r.href,
-        "aria-label": a("footer.goToHomePage", {
+        "aria-label": i("footer.goToHomePage", {
           defaultValue: "Go to Home Page"
         }),
         "data-testid": "logo-link",
         external: r.external,
-        children: l({ logo: r })
+        children: c({ logo: r })
       }
     ),
-    !(r != null && r.href) && l({ logo: r })
+    !(r != null && r.href) && c({ logo: r })
   ] });
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ a(
     "footer",
     {
-      className: v("gi-footer", s),
+      className: p("gi-bg-color-surface-system-neutral-layer1", n),
       "data-module": "gieds-footer",
       role: "contentinfo",
-      "aria-label": a("footer.footer", { defaultValue: "Footer" }),
-      "data-testid": d,
-      ...m,
+      "aria-label": i("footer.footer", { defaultValue: "Footer" }),
+      "data-testid": m,
+      ...d,
       children: [
-        /* @__PURE__ */ t("div", { className: "gi-footer-container", children: /* @__PURE__ */ i(b, { children: [
+        /* @__PURE__ */ t("div", { className: "gi-py-10", children: /* @__PURE__ */ a(v, { children: [
           e && /* @__PURE__ */ t(
             "div",
             {
-              "aria-label": a("footer.primarySlot", {
+              "aria-label": i("footer.primarySlot", {
                 defaultValue: "Footer Primary Slot"
               }),
               children: e
             }
           ),
-          e && o && /* @__PURE__ */ t(
-            L,
+          e && s && /* @__PURE__ */ t(
+            x,
             {
               color: "gi-border-color-border-system-neutral-subtle",
               size: "lg"
             }
           ),
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ a(
             "div",
             {
-              className: "gi-footer-secondary-slot",
-              "aria-label": a("footer.secondarySlot", {
+              className: "gi-flex gi-flex-row-reverse gi-flex-wrap-reverse gi-justify-between gi-justify-items-stretch",
+              "aria-label": i("footer.secondarySlot", {
                 defaultValue: "Footer Secondary Slot"
               }),
               children: [
-                /* @__PURE__ */ t("div", { className: "gi-footer-logo", children: f() }),
-                o && /* @__PURE__ */ t("div", { className: "gi-footer-secondary-slot-content", children: o })
+                /* @__PURE__ */ t(
+                  "div",
+                  {
+                    className: `
+                gi-w-fit gi-mt-8 md:gi-mt-0 lg:gi-ml-auto lg:gi-flex-none gi-rounded-sm 
+                gi-focus-state-outline gi-focus-within-state-outline gi-focus-visible-state-outline`,
+                    children: f()
+                  }
+                ),
+                s && /* @__PURE__ */ t("div", { className: "gi-grow md:gi-max-w-[calc(100%_-_var(--gieds-space-80))]", children: s })
               ]
             }
           )
         ] }) }),
-        n && /* @__PURE__ */ t(
+        o && /* @__PURE__ */ t(
           "div",
           {
-            className: "gi-footer-utility",
-            "aria-label": a("footer.utilityLinks", {
+            className: "gi-py-4 gi-px-8 gi-bg-color-surface-system-neutral-layer2",
+            "aria-label": i("footer.utilityLinks", {
               defaultValue: "Footer Utility Links"
             }),
-            children: n
+            children: o
           }
         )
       ]
@@ -104,5 +112,5 @@ function M({
   );
 }
 export {
-  M as Footer
+  j as Footer
 };

package/dist/forms/form-field/form-field.d.ts

@@ -1,9 +1,9 @@
 import { ErrorTextProps } from '../../error-text/types.js';
 import { HintTextProps } from '../../hint-text/types.js';
-import { FormFieldProps, FormFiledLabelProps } from './types.js';
+import { FormFieldLabelProps, FormFieldProps } from './types.js';
 declare const FormField: (props: FormFieldProps) => import("react/jsx-runtime").JSX.Element;
 declare const FormFieldLabel: {
-    ({ children, text, size, htmlFor, className, secondaryLabel, ...props }: FormFiledLabelProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, text, size, htmlFor, className, secondaryLabel, ...props }: FormFieldLabelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const FormFieldHint: {

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

@@ -1,19 +1,19 @@
 "use client";
-import { jsx as l, jsxs as a, Fragment as p } from "react/jsx-runtime";
-import { S as x } from "../../index-D_wwt4P0.js";
-import { createContext as v, useContext as N, Children as C } from "react";
-import { cn as c } from "../../cn.js";
+import { jsx as l, jsxs as m, Fragment as x } from "react/jsx-runtime";
+import { S as p } from "../../index-D_wwt4P0.js";
+import { createContext as N, useContext as v, Children as C } from "react";
+import { cn as d } from "../../cn.js";
 import { ErrorText as L } from "../../error-text/error-text.js";
 import { HintText as E } from "../../hint-text/hint-text.js";
-import { Label as H } from "../../label/label.js";
-import { getSpecialComponentType as F, isSpecialComponent as P } from "../../utils/utilities.js";
-const f = v(null);
+import { Label as H, styles as P } from "../../label/label.js";
+import { getSpecialComponentType as F, isSpecialComponent as w } from "../../utils/utilities.js";
+const f = N(null);
 function b(e) {
-  N(f) || console.error(`[${e}] must be used within a <FormField>.`);
+  v(f) || console.error(`[${e}] must be used within a <FormField>.`);
 }
-const I = (e) => ["error", "hint", "label"].some((r) => r in e) ? (console.warn(
+const U = (e) => ["error", "hint", "label"].some((r) => r in e) ? (console.warn(
   "[FormField] Using legacy props. Please migrate to the new composable API."
-), /* @__PURE__ */ l(f.Provider, { value: !0, children: /* @__PURE__ */ a(y, { ...e, children: [
+), /* @__PURE__ */ l(f.Provider, { value: !0, children: /* @__PURE__ */ m(y, { ...e, children: [
   e.label && /* @__PURE__ */ l(u, { ...e.label }),
   e.hint && /* @__PURE__ */ l(h, { ...e.hint }),
   e.error && /* @__PURE__ */ l(g, { ...e.error }),
@@ -25,31 +25,31 @@ const I = (e) => ["error", "hint", "label"].some((r) => r in e) ? (console.warn(
 }) => {
   const r = C.toArray(e), n = r.find(
     (t) => F(t) === "FormFieldLabel"
-  ), m = r.find(
+  ), c = r.find(
     (t) => F(t) === "FormFieldHint"
-  ), d = r.find(
+  ), a = r.find(
     (t) => F(t) === "FormFieldError"
   ), s = r.filter(
-    (t) => !P(t, [
+    (t) => !w(t, [
       "FormFieldLabel",
       "FormFieldHint",
       "FormFieldError"
     ])
   );
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ m(
     "fieldset",
     {
-      className: c({ "gi-error-state": !!d }, i),
+      className: d({ "gi-error-state": !!a }, i),
       ...o,
       children: [
-        /* @__PURE__ */ a("div", { className: "gi-pb-3 gi-flex gi-flex-col gi-gap-1", children: [
-          /* @__PURE__ */ a("div", { children: [
+        /* @__PURE__ */ m("div", { className: "gi-pb-3 gi-flex gi-flex-col gi-gap-1", children: [
+          /* @__PURE__ */ m("div", { children: [
             n,
-            m
+            c
           ] }),
-          d
+          a
         ] }),
-        /* @__PURE__ */ l(x, { children: s })
+        /* @__PURE__ */ l(p, { children: s })
       ]
     }
   );
@@ -59,21 +59,31 @@ const I = (e) => ["error", "hint", "label"].some((r) => r in e) ? (console.warn(
   size: o,
   htmlFor: r,
   className: n,
-  secondaryLabel: m,
-  ...d
+  secondaryLabel: c,
+  ...a
 }) => {
   b("FormFieldLabel");
-  const s = /* @__PURE__ */ a(p, { children: [
+  const s = /* @__PURE__ */ m(x, { children: [
     i ?? e,
-    m ? /* @__PURE__ */ l("span", { className: "gi-secondary-label", children: m }) : null
+    c ? /* @__PURE__ */ l("span", { className: "gi-secondary-label", children: c }) : null
   ] });
-  return /* @__PURE__ */ l(
+  return r ? /* @__PURE__ */ l(
     H,
     {
       size: o,
       htmlFor: r,
-      className: c("gi-font-bold", n),
-      ...d,
+      className: d("gi-font-bold", n),
+      ...a,
+      children: s
+    }
+  ) : /* @__PURE__ */ l(
+    "legend",
+    {
+      className: P({
+        size: o,
+        className: d("gi-font-bold", n)
+      }),
+      ...a,
       children: s
     }
   );
@@ -84,7 +94,7 @@ Object.defineProperty(u, "componentType", {
   enumerable: !1
 });
 u.displayName = "FormFieldLabel";
-const h = ({ children: e, text: i, size: o, className: r }) => (b("FormFieldHint"), /* @__PURE__ */ l(E, { text: i, size: o, className: c("gi-mb-1", r), children: e }));
+const h = ({ children: e, text: i, size: o, className: r }) => (b("FormFieldHint"), /* @__PURE__ */ l(E, { text: i, size: o, className: d("gi-mb-1", r), children: e }));
 Object.defineProperty(h, "componentType", {
   value: "FormFieldHint",
   writable: !1,
@@ -102,7 +112,7 @@ const g = ({
   {
     text: i,
     size: o,
-    className: c("gi-mb-1", r),
+    className: d("gi-mb-1", r),
     ...n,
     children: e
   }
@@ -114,7 +124,7 @@ Object.defineProperty(g, "componentType", {
 });
 g.displayName = "FormFieldError";
 export {
-  I as FormField,
+  U as FormField,
   g as FormFieldError,
   h as FormFieldHint,
   u as FormFieldLabel

package/dist/forms/form-field/types.d.ts

@@ -1,10 +1,17 @@
-import { FieldsetHTMLAttributes } from 'react';
+import { FieldsetHTMLAttributes, PropsWithChildren } from 'react';
 import { ErrorTextProps } from '../../error-text/types.js';
 import { HintTextProps } from '../../hint-text/types.js';
-import { LabelTextProps } from '../../label/types.js';
-export type FormFiledLabelProps = LabelTextProps & {
+import { LabelSizeType, LabelTextProps } from '../../label/types.js';
+export type LegendProps = PropsWithChildren<React.HTMLAttributes<HTMLLegendElement> & {
+    text?: string | React.ReactElement;
+    size?: LabelSizeType;
+    secondaryLabel?: React.ReactNode;
+    htmlFor?: never;
+}>;
+export type LabelProps = LabelTextProps & {
     secondaryLabel?: React.ReactNode;
 };
+export type FormFieldLabelProps = LabelProps | LegendProps;
 export type FormFieldProps = {
     /** @deprecated Use <FormFieldError> instead */
     error?: ErrorTextProps;

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

@@ -1,16 +1,16 @@
-import { jsx as a, jsxs as s, Fragment as $ } from "react/jsx-runtime";
+import { jsx as t, jsxs as n, Fragment as $ } from "react/jsx-runtime";
 import { useState as f } from "react";
-import { cn as n } from "../../cn.js";
+import { cn as s } from "../../cn.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 C, headerToolItemVariants as p } from "../variants.js";
-const B = ({
+import { headerSlotContainerVariants as C, headerToolItemVariants as u } from "../variants.js";
+const y = ({
   index: e,
   slot: r,
-  appearance: t
-}) => /* @__PURE__ */ a(
+  appearance: a
+}) => /* @__PURE__ */ t(
   "div",
   {
     id: `SlotContainer-${e}`,
@@ -20,24 +20,24 @@ const B = ({
       index: e + 1,
       defaultValue: `Slot Container ${e + 1}`
     }),
-    className: n(C({ appearance: t }), "gi-hidden"),
+    className: s(C({ appearance: a }), "gi-hidden"),
     children: r
   }
 ), A = ({
   index: e,
-  item: { component: r, drawerPosition: t, icon: d, label: l, ariaLabel: m, closeLabel: u },
+  item: { component: r, drawerPosition: a, icon: d, label: l, ariaLabel: m, closeLabel: p },
   appearance: I
 }) => {
   const [o, g] = f(!1);
-  return /* @__PURE__ */ s($, { children: [
-    /* @__PURE__ */ s(
+  return /* @__PURE__ */ n($, { children: [
+    /* @__PURE__ */ n(
       "label",
       {
         htmlFor: `ItemActionDrawerTrigger-${e}`,
-        className: p({ appearance: I }),
+        className: u({ appearance: I }),
         onClick: () => g(!0),
         children: [
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ t(
             h,
             {
               "data-testid": `ItemActionDrawerTrigger-${e}`,
@@ -48,7 +48,7 @@ const B = ({
               type: "checkbox"
             }
           ),
-          l && /* @__PURE__ */ a(
+          l && /* @__PURE__ */ t(
             "span",
             {
               id: `ItemActionDrawerTrigger-${e}-label`,
@@ -57,10 +57,10 @@ const B = ({
               children: l
             }
           ),
-          d && /* @__PURE__ */ a(
+          d && /* @__PURE__ */ t(
             i,
             {
-              className: n({
+              className: s({
                 "gi-hidden": o,
                 "gi-block": !o
               }),
@@ -69,10 +69,10 @@ const B = ({
               ariaHidden: !0
             }
           ),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ t(
             i,
             {
-              className: n({
+              className: s({
                 "gi-hidden": !o,
                 "gi-block": o
               }),
@@ -85,25 +85,25 @@ const B = ({
         ]
       }
     ),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ t(
       T,
       {
         isOpen: o,
         onClose: () => g(!1),
-        position: t || "right",
+        position: a || "right",
         closeButtonLabel: c("header.drawer.close", {
-          defaultValue: u || "Close"
+          defaultValue: p || "Close"
         }),
         closeButtonSize: "large",
-        children: /* @__PURE__ */ a(b, { children: r })
+        children: /* @__PURE__ */ t(b, { children: r })
       }
     )
   ] });
-}, F = ({
+}, B = ({
   item: e,
   index: r,
-  appearance: t
-}) => e.slotAppearance === "drawer" ? /* @__PURE__ */ a(A, { index: r, item: e, appearance: t }) : /* @__PURE__ */ s(
+  appearance: a
+}) => e.slotAppearance === "drawer" ? /* @__PURE__ */ t(A, { index: r, item: e, appearance: a }) : /* @__PURE__ */ n(
   "label",
   {
     htmlFor: `ItemActionTrigger-${r}`,
@@ -111,10 +111,10 @@ const B = ({
       item: e.label || `item ${r + 1}`,
       defaultValue: `Toggle item action for ${e.label || `item ${r + 1}`}`
     }),
-    className: p({ appearance: t }),
+    className: u({ appearance: a }),
     "data-label-index": r,
     children: [
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ t(
         h,
         {
           "data-testid": `ItemActionTrigger-${r}`,
@@ -126,8 +126,8 @@ const B = ({
           type: "button"
         }
       ),
-      e.label && /* @__PURE__ */ a("span", { className: "label", children: e.label }),
-      e.icon && /* @__PURE__ */ a(
+      e.label && /* @__PURE__ */ t("span", { className: "label", children: e.label }),
+      e.icon && /* @__PURE__ */ t(
         i,
         {
           icon: e.icon,
@@ -135,20 +135,21 @@ const B = ({
           id: `ItemIconActionTrigger-${r}`
         }
       ),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ t(
         i,
         {
           className: "gi-hidden close-icon",
           ariaHidden: !0,
           id: `ItemCloseTrigger-${r}`,
           icon: "close",
-          "data-testid": `ItemCloseTrigger-${r}`
+          "data-testid": `ItemCloseTrigger-${r}`,
+          useFontIcon: !0
         }
       )
     ]
   }
 );
 export {
-  B as SlotContainer,
-  F as SlotItemAction
+  y as SlotContainer,
+  B as SlotItemAction
 };

package/dist/header/header-legacy.js

@@ -2,10 +2,10 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { useEffect as $, useMemo as H, createElement as I } from "react";
 import { renderToStaticMarkup as v } from "react-dom/server";
-import { LogoWhite as x } from "../assets/logos/LogoWhite.js";
-import { LogoBlack as D } from "../assets/logos/LogoBlack.js";
-import { LogoHarpBlack as C } from "../assets/logos/LogoHarpBlack.js";
-import { LogoHarpWhite as A } from "../assets/logos/LogoHarpWhite.js";
+import x from "../atoms/icons/logos/LogoBlack.js";
+import D from "../atoms/icons/logos/LogoHarpBlack.js";
+import C from "../atoms/icons/logos/LogoHarpWhite.js";
+import A from "../atoms/icons/logos/LogoWhite.js";
 import { cn as k } from "../cn.js";
 import { Container as y } from "../container/container.js";
 import { translate as h } from "../i18n/utility.js";
@@ -18,12 +18,12 @@ import { headerVariants as O, headerMenuVariants as P, headerLogoVariants as U,
 function S({ logo: r, appearance: n = "default" }) {
   const t = {
     harp: {
-      default: /* @__PURE__ */ e(A, {}),
-      light: /* @__PURE__ */ e(C, {})
+      default: /* @__PURE__ */ e(C, {}),
+      light: /* @__PURE__ */ e(D, {})
     },
     withText: {
-      default: /* @__PURE__ */ e(x, {}),
-      light: /* @__PURE__ */ e(D, {})
+      default: /* @__PURE__ */ e(A, {}),
+      light: /* @__PURE__ */ e(x, {})
     }
   }, s = `data:image/svg+xml;base64,${btoa(v(t.harp[n]))}`, g = `data:image/svg+xml;base64,${btoa(
     v(t.withText[n])