@ogcio/design-system-react 1.29.0 → 1.31.0

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

@@ -1,34 +1,35 @@
 "use client";
-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";
-const u = r(
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as r, useState as a } from "react";
+import { InputText as c } from "../input-text/input-text.js";
+const l = r(
   (o, s) => {
-    const [t, n] = c({
+    const [t, e] = a({
       icon: "visibility",
       type: "password"
-    }), p = () => {
+    }), n = () => {
       const i = t.type === "text";
-      n({
+      e({
         type: i ? "password" : "text",
         icon: i ? "visibility" : "visibility_off"
       });
     };
-    return /* @__PURE__ */ e(
-      l,
+    return /* @__PURE__ */ p(
+      c,
       {
         ...o,
         type: t.type,
         inputActionButton: {
           icon: t.icon,
-          onClick: p
+          onClick: n,
+          ariaLabel: t.type === "text" ? "show" : "hide"
         },
         ref: s
       }
     );
   }
 );
-u.displayName = "InputPassword";
+l.displayName = "InputPassword";
 export {
-  u as InputPassword
+  l as InputPassword
 };

package/dist/input-text/input-text.js

@@ -24,7 +24,9 @@ const H = d(
               __origin: "clear_button"
             };
             a && a(f);
-          }
+          },
+          ariaLabel: "Clear input"
+          // TODO I18N: translation
         }
       }
     );
@@ -35,18 +37,18 @@ const H = d(
     inputActionButton: e,
     inputActionPosition: r = "beforeSuffix",
     suffix: t,
-    halfFluid: l = !1,
+    halfFluid: s = !1,
     className: f,
     type: g = "text",
     iconStart: c,
     iconStartClassName: v,
     onIconStartClick: N,
-    iconEnd: s,
+    iconEnd: l,
     iconEndClassName: T,
     onIconEndClick: C,
     disabled: i,
-    inputClassName: w,
-    iconEndRef: b,
+    inputClassName: b,
+    iconEndRef: w,
     containerProps: k,
     ...o
   }, z) => {
@@ -55,7 +57,7 @@ const H = d(
       {
         className: "gi-input-text-action-before-suffix",
         "data-suffix": !!t,
-        "data-has-icon-end": !!s,
+        "data-has-icon-end": !!l,
         children: /* @__PURE__ */ n(p, { ...e, disabled: i })
       }
     ) : null, [e]);
@@ -70,7 +72,7 @@ const H = d(
             "div",
             {
               className: u("gi-input-text-inner", {
-                "gi-input-half-width": l
+                "gi-input-half-width": s
               }),
               children: [
                 c && /* @__PURE__ */ n(
@@ -94,26 +96,26 @@ const H = d(
                   {
                     type: g,
                     "data-icon-start": !!c,
-                    "data-icon-end": !!s,
+                    "data-icon-end": !!l,
                     "data-end-element": !!e,
                     "data-prefix": !!a,
                     "data-suffix": !!t,
                     "data-testid": o.dataTestId,
-                    className: u("gi-input-text", w),
+                    className: u("gi-input-text", b),
                     ref: z,
                     disabled: i,
                     ...o
                   }
                 ),
-                s && /* @__PURE__ */ n(
+                l && /* @__PURE__ */ n(
                   "div",
                   {
                     className: u("gi-input-text-icon-end", T),
                     "data-end-element": !!e && r === "afterSuffix",
                     "data-suffix": !!t,
                     onClick: C,
-                    ref: b,
-                    children: typeof s == "string" ? /* @__PURE__ */ n(x, { icon: s, size: "md", disabled: i }) : s
+                    ref: w,
+                    children: typeof l == "string" ? /* @__PURE__ */ n(x, { icon: l, size: "md", disabled: i }) : l
                   }
                 ),
                 R
@@ -131,11 +133,11 @@ const H = d(
   ariaLabel: e,
   icon: r,
   dataTestId: t,
-  ...l
+  ...s
 }) => /* @__PURE__ */ n(
   O,
   {
-    ...l,
+    ...s,
     icon: {
       icon: r
     },
@@ -150,7 +152,7 @@ const H = d(
   ({ type: a = "text", clearButtonEnabled: e, ...r }, t) => e || a === "search" ? /* @__PURE__ */ n(H, { ref: t, type: a, ...r }) : /* @__PURE__ */ n(h, { ref: t, type: a, ...r })
 );
 I.displayName = "InputText";
-const F = d(({ type: a = "text", error: e, ...r }, t) => /* @__PURE__ */ n(
+const D = d(({ type: a = "text", error: e, ...r }, t) => /* @__PURE__ */ n(
   I,
   {
     ...r,
@@ -166,5 +168,5 @@ const F = d(({ type: a = "text", error: e, ...r }, t) => /* @__PURE__ */ n(
 export {
   p as InputActionButton,
   I as InputText,
-  F as InputTextTableCell
+  D as InputTextTableCell
 };

package/dist/label/label.d.ts

@@ -3,6 +3,49 @@ export declare const LabelSize: {
     readonly Medium: "md";
     readonly Large: "lg";
 };
+export declare const styles: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "gi-label", import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "gi-label", import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
 export declare const Label: import('react').ForwardRefExoticComponent<import('react').LabelHTMLAttributes<HTMLLabelElement> & {
     text?: string | React.ReactElement;
     size?: import('./types.js').LabelSizeType;

package/dist/label/label.js

@@ -1,4 +1,4 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import { forwardRef as r } from "react";
 import { c as o } from "../index-CB-zPpNk.js";
 const d = {
@@ -17,11 +17,12 @@ const d = {
   defaultVariants: {
     size: "md"
   }
-}), b = r(
-  ({ text: e, size: a = d.Medium, className: l, children: m, ...t }, i) => /* @__PURE__ */ s("label", { className: g({ size: a, className: l }), ref: i, ...t, children: m ?? e })
+}), c = r(
+  ({ text: e, size: a = d.Medium, className: m, children: s, ...t }, l) => /* @__PURE__ */ i("label", { className: g({ size: a, className: m }), ref: l, ...t, children: s ?? e })
 );
-b.displayName = "Label";
+c.displayName = "Label";
 export {
-  b as Label,
-  d as LabelSize
+  c as Label,
+  d as LabelSize,
+  g as styles
 };

package/dist/logos/index.d.ts

@@ -0,0 +1 @@
+export { LogoBlack, LogoGoldGreen, LogoGoldWhite, LogoHarpBlack, LogoWhite, LogoHarpWhite, } from '../atoms/icons/logos';

package/dist/logos/index.js

@@ -0,0 +1,14 @@
+import { default as a } from "../atoms/icons/logos/LogoBlack.js";
+import { default as t } from "../atoms/icons/logos/LogoGoldGreen.js";
+import { default as l } from "../atoms/icons/logos/LogoGoldWhite.js";
+import { default as p } from "../atoms/icons/logos/LogoHarpBlack.js";
+import { default as m } from "../atoms/icons/logos/LogoHarpWhite.js";
+import { default as u } from "../atoms/icons/logos/LogoWhite.js";
+export {
+  a as LogoBlack,
+  t as LogoGoldGreen,
+  l as LogoGoldWhite,
+  p as LogoHarpBlack,
+  m as LogoHarpWhite,
+  u as LogoWhite
+};

package/dist/modal/modal.js

@@ -1,129 +1,130 @@
 "use client";
-import { jsx as i, jsxs as y, Fragment as j } from "react/jsx-runtime";
-import { isValidElement as U, cloneElement as N, useState as A, useRef as W, useMemo as _, Children as z, useId as G, useEffect as C } from "react";
-import { createPortal as J } from "react-dom";
+import { jsx as l, jsxs as y, Fragment as j } from "react/jsx-runtime";
+import { isValidElement as K, cloneElement as T, useState as A, useRef as U, useMemo as W, Children as _, useId as z, useEffect as C } from "react";
+import { createPortal as G } from "react-dom";
 import { Button as E } from "../button/button.js";
 import { cn as u } from "../cn.js";
-import { Heading as Q } from "../heading/heading.js";
-import { useAriaHider as X } from "../hooks/use-aria-hider.js";
-import { useFocusTrap as Y } from "../hooks/use-focus-trap.js";
-import { Icon as Z } from "../icon/icon.js";
-import { IconButton as O } from "../icon-button/icon-button.js";
-import { splitAriaProps as R, isSpecialComponent as tt, getSpecialComponentType as et } from "../utils/utilities.js";
+import { Heading as J } from "../heading/heading.js";
+import { useAriaHider as Q } from "../hooks/use-aria-hider.js";
+import { useFocusTrap as X } from "../hooks/use-focus-trap.js";
+import { Icon as Y } from "../icon/icon.js";
+import { IconButton as Z } from "../icon-button/icon-button.js";
+import { splitAriaProps as O, isSpecialComponent as ee, getSpecialComponentType as te } from "../utils/utilities.js";
 const I = {
   flat: 0,
   secondary: 1,
   primary: 2
-}, ot = ({
+}, oe = ({
   label: e,
-  size: t = "small",
-  ...o
+  size: o = "small",
+  ...t
 }) => {
   let n = "sm";
-  return (t === "large" || t === "medium") && (n = "md"), e ? /* @__PURE__ */ i(
+  return (o === "large" || o === "medium") && (n = "md"), e ? /* @__PURE__ */ l(
     E,
     {
-      onClick: o.onClick,
+      onClick: t.onClick,
       variant: "flat",
-      size: t,
+      size: o,
       appearance: "dark",
       className: "gi-modal-icon",
       "aria-label": e,
-      ...o,
+      ...t,
       children: /* @__PURE__ */ y(j, { children: [
         e,
-        /* @__PURE__ */ i(Z, { icon: "close", size: n })
+        /* @__PURE__ */ l(Y, { icon: "close", size: n })
       ] })
     }
-  ) : /* @__PURE__ */ i(
-    O,
+  ) : /* @__PURE__ */ l(
+    Z,
     {
       className: "gi-modal-icon",
       icon: { icon: "close" },
       "aria-label": "Close modal",
-      onClick: o.onClick,
+      onClick: t.onClick,
       variant: "flat",
-      size: t,
+      size: o,
       appearance: "dark",
-      ...o
+      dataTestid: "modal-close-button",
+      ...t
     }
   );
-}, rt = ({
+}, ae = ({
   closeButtonLabel: e,
-  modalTitle: t,
-  closeOnClick: o,
+  modalTitle: o,
+  closeOnClick: t,
   onClose: n,
-  closeButtonSize: r
+  closeButtonSize: a
 }) => /* @__PURE__ */ y("div", { className: "gi-py-2  xs:gi-py-4", children: [
-  t,
-  o && /* @__PURE__ */ i(
-    ot,
+  o,
+  t && /* @__PURE__ */ l(
+    oe,
     {
       onClick: n,
       label: e,
-      size: r
+      size: a
     }
   )
-] }), at = ({
+] }), re = ({
   position: e = "center",
-  size: t = "lg",
-  closeOnClick: o = !0,
+  size: o = "lg",
+  closeOnClick: t = !0,
   closeOnOverlayClick: n = !0,
-  isOpen: r,
-  onClose: s,
+  isOpen: a,
+  onClose: d,
   closeButtonLabel: h,
-  className: d,
-  children: g,
-  closeButtonSize: a,
-  closeOnEscape: l,
+  className: s,
+  children: f,
+  closeButtonSize: r,
+  closeOnEscape: i,
   dataTestId: c,
   ...v
 }) => {
-  var k;
-  const M = W(null);
-  X(M.current, r);
-  const [D, S] = _(
-    () => R(v),
+  var w;
+  const M = U(null);
+  Q(M, a);
+  const [D, R] = W(
+    () => O(v),
     [v]
-  ), F = z.toArray(g), T = (m) => F.find(
-    (p) => et(p) === m
-  ), f = T("ModalTitle"), b = T("ModalFooter") || T("DrawerFooter"), L = G(), H = ((k = f == null ? void 0 : f.props) == null ? void 0 : k.id) || `gi-modal-title-${L}`, $ = f ? N(f, {
-    as: t === "sm" ? "h5" : "h4",
-    id: H
-  }) : null, V = b ? N(b, {
-    dataModalSize: t
-  }) : null, q = F.filter(
-    (m) => !tt(m, ["ModalTitle", "ModalFooter", "DrawerFooter"])
+  ), F = _.toArray(f), N = (m) => F.find(
+    (p) => te(p) === m
+  ), g = N("ModalTitle"), b = N("ModalFooter") || N("DrawerFooter"), S = z(), L = ((w = g == null ? void 0 : g.props) == null ? void 0 : w.id) || `gi-modal-title-${S}`, H = g ? T(g, {
+    as: o === "sm" ? "h5" : "h4",
+    id: L
+  }) : null, $ = b ? T(b, {
+    dataModalSize: o
+  }) : null, V = F.filter(
+    (m) => !ee(m, ["ModalTitle", "ModalFooter", "DrawerFooter"])
   );
   C(() => {
-    if (!r || !l)
+    if (!a || !i)
       return;
     const m = (p) => {
-      p.key === "Escape" && (p.stopPropagation(), s());
+      p.key === "Escape" && (p.stopPropagation(), d());
     };
     return document.addEventListener("keydown", m), () => {
       document.removeEventListener("keydown", m);
     };
-  }, [r, l, s]), C(() => {
-    if (!r || !o || !n)
+  }, [a, i, d]), C(() => {
+    if (!a || !t || !n)
       return;
     const m = (p) => {
       var B;
-      const w = (B = M.current) == null ? void 0 : B.querySelector(
+      const k = (B = M.current) == null ? void 0 : B.querySelector(
         ".gi-modal-container-control"
       );
-      w && (w.contains(p.target) || s());
+      k && (k.contains(p.target) || d());
     };
     return document.addEventListener("pointerdown", m, !0), () => document.removeEventListener("pointerdown", m, !0);
-  }, [r, o, n, s]);
-  const K = /* @__PURE__ */ i(
+  }, [a, t, n, d]);
+  const q = /* @__PURE__ */ l(
     "div",
     {
-      ...S,
+      ...R,
       ref: M,
       className: u("gi-modal", {
-        "gi-modal-open": r,
-        "gi-modal-close": !r
+        "gi-modal-open": a,
+        "gi-modal-close": !a
       }),
       "data-testid": c || "modal",
       tabIndex: -1,
@@ -135,98 +136,98 @@ const I = {
           "aria-modal": "true",
           "aria-label": "dialog",
           ...D,
-          "data-size": t,
+          "data-size": o,
           "data-position": e,
           className: u(
             "gi-modal-container-control",
             {
-              "gi-modal-container": !d,
+              "gi-modal-container": !s,
               "gi-modal-container-center": e === "center",
               "gi-modal-container-left": e === "left",
               "gi-modal-container-right": e === "right",
               "gi-modal-container-bottom": e === "bottom"
             },
-            d
+            s
           ),
           children: [
-            /* @__PURE__ */ i(
-              rt,
+            /* @__PURE__ */ l(
+              ae,
               {
                 closeButtonLabel: h,
-                modalTitle: $,
-                closeOnClick: o,
-                onClose: s,
-                closeButtonSize: a
+                modalTitle: H,
+                closeOnClick: t,
+                onClose: d,
+                closeButtonSize: r
               }
             ),
             /* @__PURE__ */ y("div", { className: u({ "gi-pb-6": !b }), children: [
-              q,
-              V
+              V,
+              $
             ] })
           ]
         }
       )
     }
   );
-  return /* @__PURE__ */ i(nt, { modalRef: M, isOpen: r, children: K });
-}, P = ({ children: e, as: t = "h4", ...o }) => /* @__PURE__ */ i("div", { className: "gi-flex-1", id: o.id, "aria-label": e == null ? void 0 : e.toString(), children: /* @__PURE__ */ i(Q, { as: t, ...o, children: e }) });
+  return /* @__PURE__ */ l(ne, { modalRef: M, isOpen: a, children: q });
+}, P = ({ children: e, as: o = "h4", ...t }) => /* @__PURE__ */ l("div", { className: "gi-flex-1", id: t.id, "aria-label": e == null ? void 0 : e.toString(), children: /* @__PURE__ */ l(J, { as: o, ...t, children: e }) });
 Object.defineProperty(P, "componentType", {
   value: "ModalTitle",
   writable: !1,
   enumerable: !1
 });
 P.displayName = "ModalTitle";
-const ht = ({
+const he = ({
   children: e,
-  className: t,
-  includeModalClass: o = !0
-}) => /* @__PURE__ */ i(
+  className: o,
+  includeModalClass: t = !0
+}) => /* @__PURE__ */ l(
   "div",
   {
     "aria-label": "Modal content",
     role: "document",
     tabIndex: 0,
-    className: u(o && "gi-modal-body", t),
+    className: u(t && "gi-modal-body", o),
     children: e
   }
 ), x = ({
   className: e,
-  children: t,
-  orientation: o,
+  children: o,
+  orientation: t,
   dataModalSize: n,
-  stacked: r
+  stacked: a
 }) => {
-  const d = (Array.isArray(t) ? t : [t]).filter((a) => {
-    var l, c;
-    return U(a) && (a.type === E || ((l = a.type) == null ? void 0 : l.displayName) === "Button" || ((c = a.props) == null ? void 0 : c["data-button"]));
-  }).sort((a, l) => {
-    const c = a.props.variant ?? "primary", v = l.props.variant ?? "primary";
+  const s = (Array.isArray(o) ? o : [o]).filter((r) => {
+    var i, c;
+    return K(r) && (r.type === E || ((i = r.type) == null ? void 0 : i.displayName) === "Button" || ((c = r.props) == null ? void 0 : c["data-button"]));
+  }).sort((r, i) => {
+    const c = r.props.variant ?? "primary", v = i.props.variant ?? "primary";
     return (I[c] || 0) - (I[v] || 0);
-  }), g = u({
-    "gi-justify-center sm:gi-justify-start": !o && n !== "sm" && !r,
-    "gi-justify-center": o === "vertical" || n === "sm" || r,
-    "gi-justify-start": o === "horizontal"
+  }), f = u({
+    "gi-justify-center sm:gi-justify-start": !t && n !== "sm" && !a,
+    "gi-justify-center": t === "vertical" || n === "sm" || a,
+    "gi-justify-start": t === "horizontal"
   });
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ l(
     "div",
     {
       className: u(e, {
-        "gi-pt-6": d.length === 0,
-        "gi-modal-footer": d.length,
-        "gi-modal-footer-stacked": r
+        "gi-pt-6": s.length === 0,
+        "gi-modal-footer": s.length,
+        "gi-modal-footer-stacked": a
       }),
-      children: d.length > 0 && /* @__PURE__ */ i(
+      children: s.length > 0 && /* @__PURE__ */ l(
         "div",
         {
-          "data-orientation": o || "unset",
+          "data-orientation": t || "unset",
           "data-modal-size": n,
-          children: d.map(
-            (a, l) => {
+          children: s.map(
+            (r, i) => {
               var c;
-              return N(a, {
-                key: a.key || a.props.id || a.props.dataTestid || `modal-footer-button-${l}`,
-                id: a.props.id || `modal-footer-button-${l}`,
-                className: u((c = a == null ? void 0 : a.props) == null ? void 0 : c.className, g)
+              return T(r, {
+                key: r.key || r.props.id || r.props.dataTestid || `modal-footer-button-${i}`,
+                id: r.props.id || `modal-footer-button-${i}`,
+                className: u((c = r == null ? void 0 : r.props) == null ? void 0 : c.className, f)
               });
             }
           ) || null
@@ -241,37 +242,34 @@ Object.defineProperty(x, "componentType", {
   enumerable: !1
 });
 x.displayName = "ModalFooter";
-const nt = ({
+const ne = ({
   children: e,
-  modalRef: t,
-  isOpen: o
+  modalRef: o,
+  isOpen: t
 }) => {
-  const [n, r] = A(!1);
+  const [n, a] = A(!1);
   return C(() => {
-    r(!0);
-  }, []), Y(t == null ? void 0 : t.current, o && n, {
-    initialFocus: (t == null ? void 0 : t.current) ?? !0,
-    fallbackFocus: () => t == null ? void 0 : t.current
-  }), n ? J(e, document.body) : null;
-}, vt = ({
+    a(!0);
+  }, []), X(o, t && n), n ? G(e, document.body) : null;
+}, ve = ({
   children: e,
-  triggerButton: t,
-  startsOpen: o,
+  triggerButton: o,
+  startsOpen: t,
   ...n
 }) => {
-  const [r, s] = A(!!o), h = () => s(!0), d = () => s(!1), g = N(t, {
+  const [a, d] = A(!!t), h = () => d(!0), s = () => d(!1), f = T(o, {
     "data-testid": "modal-trigger-button-container",
     "aria-haspopup": "dialog",
     onClick: h
   });
   return /* @__PURE__ */ y(j, { children: [
-    g,
-    /* @__PURE__ */ i(
-      at,
+    f,
+    /* @__PURE__ */ l(
+      re,
       {
-        onClose: d,
+        onClose: s,
         position: "center",
-        isOpen: r,
+        isOpen: a,
         ...n,
         children: e
       }
@@ -279,9 +277,9 @@ const nt = ({
   ] });
 };
 export {
-  vt as Modal,
-  ht as ModalBody,
+  ve as Modal,
+  he as ModalBody,
   x as ModalFooter,
   P as ModalTitle,
-  at as ModalWrapper
+  re as ModalWrapper
 };