@ogcio/design-system-react 1.11.3 → 1.12.0

package/dist/primitives/anchor.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { a } from "../index-ntYL1VRC.js";
+import { a } from "../index-2sRBqKFV.js";
 const f = ({
   external: o = !1,
   asChild: r,

package/dist/progress-bar/progress-bar.js

@@ -1,13 +1,13 @@
 import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import { cn as n } from "../cn.js";
-import { translate as t } from "../i18n/utility.js";
+import { cn as t } from "../cn.js";
+import { translate as g } from "../i18n/utility.js";
 function d({
   value: s = 0,
   max: e = 100,
   isIndeterminate: r,
-  label: i
+  label: o
 }) {
-  const o = s * 100 / e;
+  const i = s * 100 / e;
   return /* @__PURE__ */ l("div", { className: "gi-progress-bar-container", children: [
     /* @__PURE__ */ a(
       "div",
@@ -16,7 +16,7 @@ function d({
         "aria-valuenow": r ? void 0 : s,
         "aria-valuemin": 0,
         "aria-valuemax": e,
-        "aria-label": t("progressBar.progressBar", {
+        "aria-label": g("progressBar.progressBar", {
           defaultValue: "Progress bar"
         }),
         "data-testid": "progress-bar",
@@ -24,15 +24,15 @@ function d({
         children: /* @__PURE__ */ a(
           "div",
           {
-            className: n({
+            className: t({
               "gi-progress-bar-indeterminate": r
             }),
-            style: r ? {} : { width: `${o}%` }
+            style: r ? {} : { width: `${i}%` }
           }
         )
       }
     ),
-    i && /* @__PURE__ */ a("span", { children: i })
+    o && /* @__PURE__ */ a("span", { children: o })
   ] });
 }
 export {

package/dist/progress-stepper/progress-stepper.js

@@ -1,8 +1,8 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { jsxs as v, jsx as r } from "react/jsx-runtime";
 import { Children as P } from "react";
 import { cn as $ } from "../cn.js";
 import { Icon as z } from "../icon/icon.js";
-import { ProgressStepperIndicator as v } from "./types.js";
+import { ProgressStepperIndicator as f } from "./types.js";
 const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
   isNextStep: e,
   orientation: t = "horizontal",
@@ -11,7 +11,7 @@ const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
   verticalGap: l
 }) => {
   const o = t === "vertical" ? { height: j(l) } : void 0;
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ v(
     "div",
     {
       "data-orientation": t,
@@ -28,19 +28,19 @@ const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
     }
   );
 }, x = (e) => ({
-  [v.Hashtag]: {
+  [f.Hashtag]: {
     completed: /* @__PURE__ */ r(z, { icon: "check" }),
     current: () => "#",
     next: () => "#"
   },
-  [v.Number]: {
+  [f.Number]: {
     completed: /* @__PURE__ */ r(z, { icon: "check" }),
     current: (s) => s,
     next: (s) => s
   }
 })[e], V = (e, t, s, a) => {
   const { current: l, completed: o, next: i } = x(
-    e || v.Hashtag
+    e || f.Hashtag
   );
   return s ? o : a ? l(t) : i(t);
 }, B = ({
@@ -58,8 +58,8 @@ const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
   verticalGap: h
 }) => {
   const m = !t && !e, c = l === "vertical" && (e || d || t), p = !!o;
-  return /* @__PURE__ */ f("div", { className: "gi-relative", children: [
-    /* @__PURE__ */ f(
+  return /* @__PURE__ */ v("div", { className: "gi-relative", children: [
+    /* @__PURE__ */ v(
       "div",
       {
         className: "gi-progress-stepper-step-container",
@@ -74,7 +74,7 @@ const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
         "aria-label": p ? void 0 : g,
         children: [
           /* @__PURE__ */ r("div", { className: "gi-progress-stepper-step", "data-indicator": i, children: V(
-            i || v.Hashtag,
+            i || f.Hashtag,
             a,
             t,
             e
@@ -126,7 +126,7 @@ const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
 }) => {
   var g, h;
   const d = (h = (g = e[t]) == null ? void 0 : g.props) == null ? void 0 : h.children, u = s === "horizontal" && d;
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ v(
     "div",
     {
       className: $("gi-w-full", {

package/dist/score-select/score-select.js

@@ -1,21 +1,21 @@
 "use client";
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import f from "react";
-import { ButtonGroup as k, ButtonGroupItem as y } from "../button-group/button-group.js";
-import { FormField as N } from "../forms/form-field.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import k from "react";
+import { ButtonGroup as y, ButtonGroupItem as N } from "../button-group/button-group.js";
+import { FormField as f } from "../forms/form-field/form-field.js";
 const G = ({
   name: p,
   size: $ = "medium",
   value: s,
   label: x,
-  hint: i,
+  hint: v,
   leftLabel: a,
-  rightLabel: u,
-  onChange: c,
+  rightLabel: r,
+  onChange: i,
   type: I
 }) => {
-  var o, n;
-  const t = f.useId(), v = `${t}-label`, b = i ? `${t}-hint` : void 0;
+  var t, m;
+  const o = k.useId(), c = `${o}-label`, b = v ? `${o}-hint` : void 0;
   let l = [];
   switch (I) {
     case "1-5": {
@@ -57,51 +57,51 @@ const G = ({
       break;
     }
   }
-  return /* @__PURE__ */ r(
-    N,
+  return /* @__PURE__ */ u(
+    f,
     {
       className: "gi-w-full",
-      label: { text: x, id: v },
-      hint: i ? { text: i, id: b } : void 0,
+      label: { text: x, id: c },
+      hint: v ? { text: v, id: b } : void 0,
       children: /* @__PURE__ */ d(
         "div",
         {
           className: "gi-score-select-button-group",
           role: "group",
-          "aria-labelledby": v,
+          "aria-labelledby": c,
           "aria-describedby": b,
           children: [
-            a && u && l.length > 2 && /* @__PURE__ */ d("div", { className: "gi-score-select-labels-responsive", "aria-hidden": "true", children: [
+            a && r && l.length > 2 && /* @__PURE__ */ d("div", { className: "gi-score-select-labels-responsive", "aria-hidden": "true", children: [
               /* @__PURE__ */ d("div", { children: [
-                (o = l[0]) == null ? void 0 : o.label,
+                (t = l[0]) == null ? void 0 : t.label,
                 " – ",
                 a
               ] }),
               /* @__PURE__ */ d("div", { children: [
-                (n = l.at(-1)) == null ? void 0 : n.label,
+                (m = l.at(-1)) == null ? void 0 : m.label,
                 " – ",
-                u
+                r
               ] })
             ] }),
-            /* @__PURE__ */ r(
-              k,
+            /* @__PURE__ */ u(
+              y,
               {
                 name: p,
                 size: $,
                 defaultValue: s,
-                onChange: (e) => c == null ? void 0 : c(e),
+                onChange: (e) => i == null ? void 0 : i(e),
                 role: "radiogroup",
-                "aria-labelledby": v,
+                "aria-labelledby": c,
                 "aria-describedby": b,
                 children: l.map((e) => {
-                  var m, h;
-                  return /* @__PURE__ */ r(
-                    y,
+                  var n, h;
+                  return /* @__PURE__ */ u(
+                    N,
                     {
                       value: e.value,
                       role: "radio",
                       "aria-checked": s === e.value,
-                      "aria-label": `${e.label}${a && e.value === ((m = l[0]) == null ? void 0 : m.value) ? ` - ${a}` : ""}${u && e.value === ((h = l.at(-1)) == null ? void 0 : h.value) ? ` - ${u}` : ""}`,
+                      "aria-label": `${e.label}${a && e.value === ((n = l[0]) == null ? void 0 : n.value) ? ` - ${a}` : ""}${r && e.value === ((h = l.at(-1)) == null ? void 0 : h.value) ? ` - ${r}` : ""}`,
                       children: e.label
                     },
                     e.value
@@ -109,9 +109,9 @@ const G = ({
                 })
               }
             ),
-            (a || u) && /* @__PURE__ */ d("div", { className: "gi-score-select-labels", "aria-hidden": "true", children: [
-              /* @__PURE__ */ r("div", { children: a }),
-              /* @__PURE__ */ r("div", { children: u })
+            (a || r) && /* @__PURE__ */ d("div", { className: "gi-score-select-labels", "aria-hidden": "true", children: [
+              /* @__PURE__ */ u("div", { children: a }),
+              /* @__PURE__ */ u("div", { children: r })
             ] })
           ]
         }

package/dist/select/select-menu.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as h, jsx as c } from "react/jsx-runtime";
 import { useState as C, useEffect as K, Children as D, isValidElement as $, cloneElement as w } from "react";
 import { cn as A } from "../cn.js";

package/dist/select/select-next.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as A, jsx as c } from "react/jsx-runtime";
 import { useRef as D, useState as S, Children as y, isValidElement as d, useEffect as K } from "react";
 import { cn as b } from "../cn.js";
@@ -13,7 +14,7 @@ const X = ({
   disabled: r,
   ...x
 }) => {
-  const n = D(null), [a, E] = S(k), [G, m] = S(!1), [N, P] = S(""), f = y.toArray(T).filter(
+  const n = D(null), [s, E] = S(k), [G, m] = S(!1), [N, P] = S(""), f = y.toArray(T).filter(
     (e) => d(e)
   ), g = () => {
     var e;
@@ -33,13 +34,13 @@ const X = ({
     }
   };
   K(() => {
-    var l, s;
+    var l, a;
     let e;
     for (const t of f) {
       const i = (l = t.type) == null ? void 0 : l.componentType;
       if (i === "SelectItemNext") {
         const o = t;
-        if (o.props.value === a) {
+        if (o.props.value === s) {
           e = o;
           break;
         }
@@ -48,7 +49,7 @@ const X = ({
         const o = t, p = y.toArray(o.props.children).find(
           (u) => {
             var h;
-            return ((h = u == null ? void 0 : u.type) == null ? void 0 : h.componentType) === "SelectItemNext" && u.props.value === a;
+            return ((h = u == null ? void 0 : u.type) == null ? void 0 : h.componentType) === "SelectItemNext" && u.props.value === s;
           }
         );
         if (p && d(p)) {
@@ -57,8 +58,8 @@ const X = ({
         }
       }
     }
-    e && P(((s = e.props.children) == null ? void 0 : s.toString()) || "");
-  }, [a, f]);
+    e && P(((a = e.props.children) == null ? void 0 : a.toString()) || "");
+  }, [s, f]);
   const V = (e) => {
     e.key === "Enter" && !r && g();
   };
@@ -109,15 +110,15 @@ const X = ({
               ]
             },
             children: /* @__PURE__ */ c($, { onChange: O, enableSearch: C, children: f.map((e) => {
-              var s;
-              const l = (s = e == null ? void 0 : e.type) == null ? void 0 : s.componentType;
+              var a;
+              const l = (a = e == null ? void 0 : e.type) == null ? void 0 : a.componentType;
               if (l === "SelectItemNext") {
                 const t = e;
                 return /* @__PURE__ */ c(
                   w,
                   {
                     ...t.props,
-                    selected: a.toString() === t.props.value.toString()
+                    selected: s.toString() === t.props.value.toString()
                   },
                   `SelectItemNext-${t.props.value.toString()}`
                 );
@@ -128,7 +129,7 @@ const X = ({
                     w,
                     {
                       ...p,
-                      selected: a.toString() === p.value.toString(),
+                      selected: s.toString() === p.value.toString(),
                       onChange: O
                     },
                     `SelectGroupItemNext-SelectItemNext-${p.value.toString()}`

package/dist/side-nav/side-nav.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsxs as w, Fragment as V, jsx as s } from "react/jsx-runtime";
-import N, { memo as B, useEffect as q, useCallback as v, useState as _ } from "react";
+import f, { memo as B, useEffect as q, useCallback as v, useState as _ } from "react";
 import { Button as A } from "../button/button.js";
-import { cn as f } from "../cn.js";
+import { cn as N } from "../cn.js";
 import { Icon as $ } from "../icon/icon.js";
 import { Link as G } from "../link/link.js";
 import { Paragraph as H } from "../paragraph/paragraph.js";
-const j = N.createContext(
+const j = f.createContext(
   void 0
 ), z = B(
   ({
@@ -22,41 +22,41 @@ const j = N.createContext(
     c && /* @__PURE__ */ s("div", { className: "gi-side-nav-expandable-icon", children: /* @__PURE__ */ s(
       $,
       {
-        className: f(e && "gi-rotate-180"),
+        className: N(e && "gi-rotate-180"),
         icon: "keyboard_arrow_down"
       }
     ) })
   ] })
-), J = N.memo(
+), J = f.memo(
   ({
     children: n,
     primary: i,
     secondary: c,
     expandable: e,
-    label: o,
+    label: a,
     value: t,
     icon: u,
     href: m,
     asChild: g,
     open: r
   }) => {
-    const l = N.useContext(j);
+    const l = f.useContext(j);
     if (!l)
       throw new Error("SideNavItem must be used within a SideNav");
     const {
-      openItemIds: a,
+      openItemIds: o,
       selectedItemId: S,
       setOpenItemIds: p,
       setSelectedItemId: C,
       navId: P
-    } = l, I = a.includes(t), x = S === t;
+    } = l, I = o.includes(t), x = S === t;
     q(() => {
       r && p((d) => d.includes(t) ? d : [...d, t]);
     }, [r, p, t]);
     const h = v(() => {
-      const d = I ? a.filter((R) => R !== t) : [...a, t];
+      const d = I ? o.filter((R) => R !== t) : [...o, t];
       p(d);
-    }, [I, a, p, t]), k = v(() => {
+    }, [I, o, p, t]), k = v(() => {
       C(t);
     }, [C, t]), E = `${P}-${t}`, O = i && e, b = m !== void 0, D = v(() => {
       i && e && h(), k();
@@ -65,11 +65,11 @@ const j = N.createContext(
         d.preventDefault(), i && e ? h() : k();
       },
       [i, e, h, k]
-    ), L = f("gi-side-nav-item", {
+    ), L = N("gi-side-nav-item", {
       "gi-side-nav-item-selected": x,
       "gi-side-nav-item-primary": i,
       "gi-side-nav-item-secondary": c
-    }), M = f("gi-side-nav-item", {
+    }), M = N("gi-side-nav-item", {
       "gi-side-nav-item-selected": x,
       "gi-side-nav-item-primary": i,
       "gi-side-nav-item-secondary": c
@@ -78,7 +78,7 @@ const j = N.createContext(
       "div",
       {
         role: "group",
-        "aria-label": `${o} ${i && e ? "dropdown" : "item"}`,
+        "aria-label": `${a} ${i && e ? "dropdown" : "item"}`,
         children: [
           b ? /* @__PURE__ */ s(
             G,
@@ -97,7 +97,7 @@ const j = N.createContext(
                 z,
                 {
                   icon: u,
-                  label: o,
+                  label: a,
                   showExpandableIcon: O,
                   isOpen: I
                 }
@@ -116,7 +116,7 @@ const j = N.createContext(
                 z,
                 {
                   icon: u,
-                  label: o,
+                  label: a,
                   showExpandableIcon: O,
                   isOpen: I
                 }
@@ -126,7 +126,7 @@ const j = N.createContext(
           e && i && /* @__PURE__ */ s(
             "div",
             {
-              className: f(I ? "gi-side-nav-item-content" : "gi-hidden"),
+              className: N(I ? "gi-side-nav-item-content" : "gi-hidden"),
               children: n
             }
           )
@@ -135,15 +135,15 @@ const j = N.createContext(
     );
   }
 ), K = B(
-  ({ children: n, className: i, dataTestid: c, onChange: e, value: o }) => {
+  ({ children: n, className: i, dataTestid: c, onChange: e, value: a }) => {
     const [t, u] = _([]), [m, g] = _(
-      o
-    ), r = N.useId(), l = v(
+      a
+    ), r = f.useId(), l = v(
       (S) => {
         g(S), e == null || e(S);
       },
       [e]
-    ), a = N.useMemo(
+    ), o = f.useMemo(
       () => ({
         openItemIds: t,
         selectedItemId: m,
@@ -153,10 +153,10 @@ const j = N.createContext(
       }),
       [t, m, l, r]
     );
-    return /* @__PURE__ */ s(j.Provider, { value: a, children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ s(j.Provider, { value: o, children: /* @__PURE__ */ s(
       "div",
       {
-        className: f("gi-side-nav-container", i),
+        className: N("gi-side-nav-container", i),
         "data-testid": c,
         children: n
       }

package/dist/spinner/spinner.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { c as o } from "../index-DNkhmzZp.js";
+import { c as o } from "../index-CB-zPpNk.js";
 import { cn as l } from "../cn.js";
 const c = {
   xl: "gi-w-10 gi-h-10",

package/dist/stack/stack.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as C, jsxs as h } from "react/jsx-runtime";
-import { Children as R, Fragment as y, isValidElement as d, cloneElement as X } from "react";
+import { Children as R, Fragment as y, cloneElement as d, isValidElement as X } from "react";
 import { cn as c } from "../cn.js";
 const p = (l) => typeof l == "string" ? {} : {
   isBaseColumn: l.base === "column",
@@ -168,7 +168,7 @@ const p = (l) => typeof l == "string" ? {} : {
       children: (() => {
         const n = R.toArray(l);
         return n.map((o, i) => /* @__PURE__ */ h(y, { children: [
-          d(o) ? X(
+          X(o) ? d(
             o,
             {
               "data-testid": `govie-stack-item-${i}`