@ogcio/design-system-react 1.12.0 → 1.12.2

package/dist/primitives/anchor.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { a } from "../index-2sRBqKFV.js";
+import { a } from "../index-ntYL1VRC.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 t } from "../cn.js";
-import { translate as g } from "../i18n/utility.js";
+import { cn as n } from "../cn.js";
+import { translate as t } from "../i18n/utility.js";
 function d({
   value: s = 0,
   max: e = 100,
   isIndeterminate: r,
-  label: o
+  label: i
 }) {
-  const i = s * 100 / e;
+  const o = 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": g("progressBar.progressBar", {
+        "aria-label": t("progressBar.progressBar", {
           defaultValue: "Progress bar"
         }),
         "data-testid": "progress-bar",
@@ -24,15 +24,15 @@ function d({
         children: /* @__PURE__ */ a(
           "div",
           {
-            className: t({
+            className: n({
               "gi-progress-bar-indeterminate": r
             }),
-            style: r ? {} : { width: `${i}%` }
+            style: r ? {} : { width: `${o}%` }
           }
         )
       }
     ),
-    o && /* @__PURE__ */ a("span", { children: o })
+    i && /* @__PURE__ */ a("span", { children: i })
   ] });
 }
 export {

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

@@ -1,8 +1,8 @@
-import { jsxs as v, jsx as r } from "react/jsx-runtime";
+import { jsxs as f, 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 f } from "./types.js";
+import { ProgressStepperIndicator as v } 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__ */ v(
+  return /* @__PURE__ */ f(
     "div",
     {
       "data-orientation": t,
@@ -28,19 +28,19 @@ const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
     }
   );
 }, x = (e) => ({
-  [f.Hashtag]: {
+  [v.Hashtag]: {
     completed: /* @__PURE__ */ r(z, { icon: "check" }),
     current: () => "#",
     next: () => "#"
   },
-  [f.Number]: {
+  [v.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 || f.Hashtag
+    e || v.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__ */ v("div", { className: "gi-relative", children: [
-    /* @__PURE__ */ v(
+  return /* @__PURE__ */ f("div", { className: "gi-relative", children: [
+    /* @__PURE__ */ f(
       "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 || f.Hashtag,
+            i || v.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__ */ v(
+  return /* @__PURE__ */ f(
     "div",
     {
       className: $("gi-w-full", {

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

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

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

package/dist/table/table.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import { c as l } from "../index-CB-zPpNk.js";
+import { c as l } from "../index-DNkhmzZp.js";
 import { cn as r } from "../cn.js";
 const b = l({
   base: "gi-table",

package/dist/textarea/textarea.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as d, Fragment as k, jsx as n } from "react/jsx-runtime";
 import { forwardRef as R, useRef as j, useState as m, useImperativeHandle as p, useEffect as y } from "react";
-import { cn as g } from "../cn.js";
+import { cn as u } from "../cn.js";
 import { HintText as z } from "../hint-text/hint-text.js";
 import { translate as A } from "../i18n/utility.js";
 import { Icon as H } from "../icon/icon.js";
@@ -9,8 +9,8 @@ import { IconButton as O } from "../icon-button/icon-button.js";
 const E = R(
   ({
     value: i,
-    rows: u = 4,
-    cols: f = 100,
+    rows: f = 4,
+    cols: g = 100,
     autoComplete: h = "on",
     maxChars: t,
     halfFluid: x = !1,
@@ -44,7 +44,7 @@ const E = R(
       /* @__PURE__ */ n("div", { className: "gi-textarea-container", children: /* @__PURE__ */ d(
         "div",
         {
-          className: g("gi-textarea-inner", {
+          className: u("gi-textarea-inner", {
             "gi-input-half-width": x
           }),
           children: [
@@ -52,10 +52,10 @@ const E = R(
             /* @__PURE__ */ n(
               "textarea",
               {
-                rows: u,
-                cols: f,
+                rows: f,
+                cols: g,
                 autoComplete: h,
-                className: g(v, "gi-textarea"),
+                className: u(v, "gi-textarea"),
                 ref: e,
                 "data-icon-start": !!c,
                 "data-clear-enabled": l,

package/dist/toast/ds-toast.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs as n, jsx as i } from "react/jsx-runtime";
-import { c as u } from "../index-CB-zPpNk.js";
+import { c as u } from "../index-DNkhmzZp.js";
 import { Icon as p } from "../icon/icon.js";
 import { IconButton as v } from "../icon-button/icon-button.js";
 import { Link as w } from "../link/link.js";

package/dist/tooltip/tooltip.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as b, jsx as g } from "react/jsx-runtime";
 import { useState as c, useId as h, useCallback as d, useEffect as v } from "react";
-import { c as y } from "../index-CB-zPpNk.js";
+import { c as y } from "../index-DNkhmzZp.js";
 const T = ["top", "bottom", "left", "right"], E = y({
   base: "gi-tooltip",
   variants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ogcio/design-system-react",
-  "version": "1.12.0",
+  "version": "1.12.2",
   "description": "The GOV IE design system React components.",
   "type": "module",
   "main": "dist/index.js",
@@ -31,8 +31,7 @@
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-slot": "^1.1.2",
     "clsx": "^2.1.1",
-    "rollup-preserve-directives": "^1.1.2",
-    "@ogcio/design-system-tokens": "1.5.3"
+    "rollup-preserve-directives": "^1.1.2"
   },
   "devDependencies": {
     "@percy/cli": "^1.30.7",
@@ -51,11 +50,11 @@
     "postcss-import": "^16.1.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "@ogcio/design-system-eslint-config": "1.2.5",
-    "@ogcio/design-system-prettier-config": "1.0.5",
     "@ogcio/design-system-tailwind": "1.11.0",
     "@ogcio/theme-doete": "1.0.0",
-    "@ogcio/theme-govie": "1.5.3"
+    "@ogcio/theme-govie": "1.5.3",
+    "@ogcio/design-system-prettier-config": "1.0.5",
+    "@ogcio/design-system-eslint-config": "1.2.5"
   },
   "scripts": {
     "format": "prettier 'src/**/*.{ts,tsx}' --write",

package/dist/index-2sRBqKFV.js

@@ -1,78 +0,0 @@
-import * as i from "react";
-import { jsx as f, Fragment as S } from "react/jsx-runtime";
-function d(t, e) {
-  if (typeof t == "function")
-    return t(e);
-  t != null && (t.current = e);
-}
-function g(...t) {
-  return (e) => {
-    let r = !1;
-    const o = t.map((n) => {
-      const l = d(n, e);
-      return !r && typeof l == "function" && (r = !0), l;
-    });
-    if (r)
-      return () => {
-        for (let n = 0; n < o.length; n++) {
-          const l = o[n];
-          typeof l == "function" ? l() : d(t[n], null);
-        }
-      };
-  };
-}
-// @__NO_SIDE_EFFECTS__
-function b(t) {
-  const e = /* @__PURE__ */ C(t), r = i.forwardRef((o, n) => {
-    const { children: l, ...a } = o, s = i.Children.toArray(l), c = s.find(h);
-    if (c) {
-      const u = c.props.children, m = s.map((p) => p === c ? i.Children.count(u) > 1 ? i.Children.only(null) : i.isValidElement(u) ? u.props.children : null : p);
-      return /* @__PURE__ */ f(e, { ...a, ref: n, children: i.isValidElement(u) ? i.cloneElement(u, void 0, m) : null });
-    }
-    return /* @__PURE__ */ f(e, { ...a, ref: n, children: l });
-  });
-  return r.displayName = `${t}.Slot`, r;
-}
-var I = /* @__PURE__ */ b("Slot");
-// @__NO_SIDE_EFFECTS__
-function C(t) {
-  const e = i.forwardRef((r, o) => {
-    const { children: n, ...l } = r;
-    if (i.isValidElement(n)) {
-      const a = _(n), s = R(l, n.props);
-      return n.type !== i.Fragment && (s.ref = o ? g(o, a) : a), i.cloneElement(n, s);
-    }
-    return i.Children.count(n) > 1 ? i.Children.only(null) : null;
-  });
-  return e.displayName = `${t}.SlotClone`, e;
-}
-var y = Symbol("radix.slottable");
-// @__NO_SIDE_EFFECTS__
-function E(t) {
-  const e = ({ children: r }) => /* @__PURE__ */ f(S, { children: r });
-  return e.displayName = `${t}.Slottable`, e.__radixId = y, e;
-}
-var V = /* @__PURE__ */ E("Slottable");
-function h(t) {
-  return i.isValidElement(t) && typeof t.type == "function" && "__radixId" in t.type && t.type.__radixId === y;
-}
-function R(t, e) {
-  const r = { ...e };
-  for (const o in e) {
-    const n = t[o], l = e[o];
-    /^on[A-Z]/.test(o) ? n && l ? r[o] = (...s) => {
-      const c = l(...s);
-      return n(...s), c;
-    } : n && (r[o] = n) : o === "style" ? r[o] = { ...n, ...l } : o === "className" && (r[o] = [n, l].filter(Boolean).join(" "));
-  }
-  return { ...t, ...r };
-}
-function _(t) {
-  var o, n;
-  let e = (o = Object.getOwnPropertyDescriptor(t.props, "ref")) == null ? void 0 : o.get, r = e && "isReactWarning" in e && e.isReactWarning;
-  return r ? t.ref : (e = (n = Object.getOwnPropertyDescriptor(t, "ref")) == null ? void 0 : n.get, r = e && "isReactWarning" in e && e.isReactWarning, r ? t.props.ref : t.props.ref || t.ref);
-}
-export {
-  V as S,
-  I as a
-};