@ogcio/design-system-react 1.30.0 → 1.31.0

package/dist/button-group/button-group.js

@@ -1,20 +1,20 @@
 "use client";
-import { jsx as y } from "react/jsx-runtime";
-import { createContext as G, useState as V, useEffect as k, useContext as S } from "react";
-import { Button as w } from "../button/button.js";
-import { cn as E } from "../cn.js";
-import { useDomId as $ } from "../hooks/use-dom-id.js";
-const x = G(
+import { jsx as x } from "react/jsx-runtime";
+import { createContext as G, useState as V, useEffect as k, useContext as w } from "react";
+import { Button as S } from "../button/button.js";
+import { cn as g } from "../cn.js";
+import { useDomId as j } from "../hooks/use-dom-id.js";
+const I = G(
   void 0
-), P = ({
+), D = ({
   value: r,
-  children: d,
-  role: s,
+  children: s,
+  role: d,
   "aria-checked": e,
   "aria-label": a,
   ...t
 }) => {
-  const c = S(x);
+  const c = w(I);
   if (!c)
     throw new Error("ButtonGroupItem must be used within a ButtonGroup");
   const {
@@ -27,26 +27,26 @@ const x = G(
   } = c, i = n === r, b = () => {
     l(r), o == null || o(r);
   }, f = `${m}-${r}`;
-  return /* @__PURE__ */ y(
-    w,
+  return /* @__PURE__ */ x(
+    S,
     {
       variant: i ? "primary" : "secondary",
       size: u,
       appearance: p,
       onClick: b,
       id: f,
-      role: s || "radio",
+      role: d || "radio",
       "aria-checked": e === void 0 ? i : e,
       "aria-label": a,
       type: "button",
       ...t,
-      children: d
+      children: s
     }
   );
-}, q = ({
+}, N = ({
   name: r,
-  size: d = "medium",
-  appearance: s = "dark",
+  size: s = "medium",
+  appearance: d = "dark",
   onChange: e,
   defaultValue: a,
   value: t,
@@ -63,26 +63,29 @@ const x = G(
   k(() => {
     t !== void 0 && i(t);
   }, [t]);
-  const f = (I) => {
-    t === void 0 && i(I), e == null || e(I);
-  }, B = $();
-  return /* @__PURE__ */ y(
-    x.Provider,
+  const f = (y) => {
+    t === void 0 && i(y), e == null || e(y);
+  }, B = j();
+  return /* @__PURE__ */ x(
+    I.Provider,
     {
       value: {
         selectedValue: b,
         setSelectedValue: f,
         name: r,
-        size: d,
+        size: s,
         onChange: e,
         groupId: B,
-        appearance: s,
+        appearance: d,
         ...m
       },
-      children: /* @__PURE__ */ y(
+      children: /* @__PURE__ */ x(
         "div",
         {
-          className: E("gi-btn-group", o),
+          className: g(
+            "gi-flex gi-flex-wrap gi-gap-3 [&_button]:gi-min-w-12 [&_button]:gi-justify-center",
+            o
+          ),
           role: n || "radiogroup",
           "aria-labelledby": l,
           "aria-describedby": u,
@@ -93,6 +96,6 @@ const x = G(
   );
 };
 export {
-  q as ButtonGroup,
-  P as ButtonGroupItem
+  N as ButtonGroup,
+  D as ButtonGroupItem
 };

package/dist/character-count/character-count.js

@@ -4,15 +4,15 @@ import { HintText as n } from "../hint-text/hint-text.js";
 import { translate as i } from "../i18n/utility.js";
 const m = ({
   maxChars: e,
-  value: r
+  value: t
 }) => {
-  const t = Math.max(0, e - ((r == null ? void 0 : r.length) ?? 0));
-  return /* @__PURE__ */ a("div", { className: "gi-textarea-remaining-chars", children: /* @__PURE__ */ a(
+  const r = Math.max(0, e - ((t == null ? void 0 : t.length) ?? 0));
+  return /* @__PURE__ */ a("div", { className: "gi-mt-2", children: /* @__PURE__ */ a(
     n,
     {
       text: i("textarea.remainingChars", {
-        remainingChars: t,
-        defaultValue: `You have ${t} characters remaining`
+        remainingChars: r,
+        defaultValue: `You have ${r} characters remaining`
       })
     }
   ) });

package/dist/chip/chip.js

@@ -1,37 +1,59 @@
 "use client";
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
 import { useId as l } from "react";
-import { cn as p } from "../cn.js";
-import { translate as c } from "../i18n/utility.js";
-import { Icon as s } from "../icon/icon.js";
-const m = ({ label: i, className: t, onClose: n = () => null }) => {
-  const o = `chip-description-${l()}`, a = (e) => {
-    ["Enter", " "].includes(e.key) && (e.preventDefault(), n(e));
+import { c as p } from "../index-CB-zPpNk.js";
+import { cn as g } from "../cn.js";
+import { translate as t } from "../i18n/utility.js";
+import { Icon as u } from "../icon/icon.js";
+const d = ({ label: i, className: c, onClose: r = () => null }) => {
+  const s = `chip-description-${l()}`, n = (e) => {
+    ["Enter", " "].includes(e.key) && (e.preventDefault(), r(e));
   };
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: p(t, "gi-chip"),
-      "aria-label": c("chip.label", { label: i, defaultValue: `chip: ${i}` }),
-      "aria-describedby": o,
+      className: g(c, m()),
+      "aria-label": t("chip.label", { label: i, defaultValue: `chip: ${i}` }),
+      "aria-describedby": s,
       tabIndex: 0,
-      onKeyDown: a,
+      onKeyDown: n,
       children: [
-        /* @__PURE__ */ r("span", { id: o, children: i }),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ o("span", { id: s, children: i }),
+        /* @__PURE__ */ o(
           "div",
           {
             role: "button",
-            "aria-label": c("chip.removeChip", { defaultValue: "remove chip" }),
-            onClick: n,
-            children: /* @__PURE__ */ r(s, { icon: "close", size: "sm" })
+            "aria-label": t("chip.removeChip", { defaultValue: "remove chip" }),
+            onClick: r,
+            children: /* @__PURE__ */ o(u, { icon: "close", size: "sm" })
           }
         )
       ]
     }
   );
 };
-m.displayName = "Chip";
+d.displayName = "Chip";
+const m = p({
+  base: [
+    "gi-flex",
+    "gi-items-center",
+    "gi-gap-1",
+    "gi-pl-1.5",
+    "gi-pr-1",
+    "gi-py-0.5",
+    "gi-bg-gray-100",
+    "gi-w-fit",
+    "gi-rounded-sm",
+    "gi-cursor-default",
+    "gi-text-xs",
+    "hover:gi-bg-gray-200",
+    "focus:gi-bg-gray-200",
+    "focus:gi-outline",
+    "focus:gi-outline-gray-950",
+    "focus:gi-outline-2",
+    "focus:gi-shadow-[inset_0_0_0_1px_white,0_0_0_5px_var(--gieds-color-yellow-400)]"
+  ]
+});
 export {
-  m as Chip
+  d as Chip
 };

package/dist/combo-box/combo-box.js

@@ -1,17 +1,10 @@
-import { jsx as m } from "react/jsx-runtime";
-import { cn as i } from "../cn.js";
-const e = ({
+import { jsx as r } from "react/jsx-runtime";
+import { cn as a } from "../cn.js";
+const x = ({
   children: o,
   className: t,
-  dataTestid: r
-}) => /* @__PURE__ */ m(
-  "div",
-  {
-    className: i("gi-combobox-container", t),
-    "data-testid": r,
-    children: o
-  }
-);
+  dataTestid: m
+}) => /* @__PURE__ */ r("div", { className: a("gi-max-w-[400px]", t), "data-testid": m, children: o });
 export {
-  e as Combobox
+  x as Combobox
 };

package/dist/cookie-banner/cookie-banner.js

@@ -1,31 +1,39 @@
 "use client";
-import { jsx as e, Fragment as s, jsxs as o } from "react/jsx-runtime";
-import { Container as c } from "../container/container.js";
-const m = ({
-  showConsent: a = !0,
-  children: d,
-  accept: i,
-  reject: n,
-  cookieLink: r,
-  dataTestid: t
-}) => /* @__PURE__ */ e(s, { children: a && /* @__PURE__ */ e(
+import { jsx as i, Fragment as s, jsxs as t } from "react/jsx-runtime";
+import { Container as d } from "../container/container.js";
+const b = ({
+  showConsent: o = !0,
+  children: a,
+  accept: e,
+  reject: r,
+  cookieLink: n,
+  dataTestid: l
+}) => /* @__PURE__ */ i(s, { children: o && /* @__PURE__ */ i(
   "div",
   {
-    className: "gi-cookie-banner-container",
+    className: "gi-bg-gray-100",
     role: "dialog",
     "aria-labelledby": "cookie-banner-title",
     "aria-describedby": "cookie-banner-description",
-    "data-testid": t,
-    children: /* @__PURE__ */ e("div", { className: "gi-py-5", children: /* @__PURE__ */ o(c, { children: [
-      /* @__PURE__ */ e("div", { id: "cookie-banner-description", children: d }),
-      /* @__PURE__ */ o("div", { className: "gi-cookie-banner-buttons", children: [
-        i && i,
-        n && n,
-        r && r
-      ] })
+    "data-testid": l,
+    children: /* @__PURE__ */ i("div", { className: "gi-py-5", children: /* @__PURE__ */ t(d, { children: [
+      /* @__PURE__ */ i("div", { id: "cookie-banner-description", children: a }),
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: `
+                  gi-flex gi-gap-4 gi-items-center gi-flex-col xs:gi-flex-row gi-my-4 
+                  [&_button]:gi-w-full [&_button]:gi-justify-center [&_button]:xs:gi-w-auto`,
+          children: [
+            e && e,
+            r && r,
+            n && n
+          ]
+        }
+      )
     ] }) })
   }
 ) });
 export {
-  m as CookieBanner
+  b as CookieBanner
 };

package/dist/details/details.js

@@ -1,55 +1,75 @@
 "use client";
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
-import { useRef as m, useState as u, useEffect as f } from "react";
-import { Icon as g } from "../icon/icon.js";
-const N = ({ label: n, name: d, children: o, ...c }) => {
-  const t = m(null), [e, i] = u(!1);
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { useRef as g, useState as u, useEffect as f } from "react";
+import { c as p } from "../index-CB-zPpNk.js";
+import { Icon as m } from "../icon/icon.js";
+const w = ({ label: n, name: l, children: d, ...c }) => {
+  const s = g(null), [e, a] = u(!1);
   return f(() => {
-    var a, r;
-    ((a = t.current) == null ? void 0 : a.open) !== e && i(((r = t.current) == null ? void 0 : r.open) ?? !1);
-  }, []), /* @__PURE__ */ l(
+    var i, r;
+    ((i = s.current) == null ? void 0 : i.open) !== e && a(((r = s.current) == null ? void 0 : r.open) ?? !1);
+  }, []), /* @__PURE__ */ t(
     "details",
     {
-      ref: t,
+      ref: s,
       onToggle: () => {
-        var a;
-        i(((a = t.current) == null ? void 0 : a.open) ?? !1);
+        var i;
+        a(((i = s.current) == null ? void 0 : i.open) ?? !1);
       },
       "data-testid": "govie-details",
-      className: "gi-details",
+      className: "gi-block gi-text-md gi-text-gray-950",
       "data-module": "gi-details",
-      name: d,
+      name: l,
       "aria-expanded": e ? "true" : "false",
       "aria-details": "details-content",
       ...c,
       children: [
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ t(
           "summary",
           {
-            className: "gi-details-summary",
-            "data-testid": "govie-details-summary",
+            className: _(),
             role: "button",
+            "data-testid": "govie-details-summary",
             "aria-controls": "details-content",
             "aria-expanded": e ? "true" : "false",
             children: [
-              /* @__PURE__ */ s(g, { icon: e ? "keyboard_arrow_up" : "keyboard_arrow_down" }),
-              /* @__PURE__ */ s("span", { className: "gi-details-summary-text", children: n })
+              /* @__PURE__ */ o(m, { icon: e ? "keyboard_arrow_up" : "keyboard_arrow_down" }),
+              /* @__PURE__ */ o("span", { className: "gi-underline gi-underline-offset-[0.1rem]", children: n })
             ]
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ o(
           "div",
           {
             id: "details-content",
-            className: "gi-details-text",
+            className: "gi-py-4 gi-pl-5 gi-border-l-[5px] gi-border-solid gi-border-l-gray-200",
             "aria-hidden": e ? "false" : "true",
-            children: o
+            children: d
           }
         )
       ]
     }
   );
-};
+}, _ = p({
+  base: [
+    "gi-flex",
+    "gi-items-center",
+    "gi-relative",
+    "gi-mb-1",
+    "gi-w-fit",
+    "gi-list-none",
+    "focus:gi-rounded-sm",
+    "focus-visible:gi-rounded-sm",
+    "focus:gi-shadow-[0_0_0_2px_var(--gieds-color-gray-950),0_0_0_5px_var(--gieds-color-yellow-400)]",
+    "focus-visible:gi-shadow-[0_0_0_2px_var(--gieds-color-gray-950),0_0_0_5px_var(--gieds-color-yellow-400)]",
+    "focus-visible:gi-outline-none",
+    "[&:focus>span]:gi-no-underline",
+    "[&:focus>span]:gi-select-none",
+    "[&:hover>span]:gi-underline-offset-[0.1rem]",
+    "[&:hover>span]:[text-decoration-thickness:max(3px)]",
+    "[&:hover>span]:[text-decoration-skip-ink:none]"
+  ]
+});
 export {
-  N as Details
+  w as Details
 };

package/dist/drawer/drawer.js

@@ -1,61 +1,64 @@
 "use client";
-import { jsx as r, jsxs as C, Fragment as D } from "react/jsx-runtime";
-import { useState as O, cloneElement as j } from "react";
+import { jsx as a, jsxs as x, Fragment as C } from "react/jsx-runtime";
+import { useState as D, cloneElement as O } from "react";
 import { cn as l } from "../cn.js";
-import { ModalBody as u, ModalFooter as h, ModalWrapper as k } from "../modal/modal.js";
-const v = ({
+import { ModalBody as u, ModalFooter as j, ModalWrapper as v } from "../modal/modal.js";
+const h = ({
   children: o,
   className: e,
-  ...a
-}) => /* @__PURE__ */ r(
-  k,
+  ...r
+}) => /* @__PURE__ */ a(
+  v,
   {
-    className: l("gi-drawer-container", e),
+    className: l("gi-flex gi-flex-col", e),
     closeButtonSize: "large",
-    ...a,
+    ...r,
     children: o
   }
-), x = ({
+), k = ({
   children: o,
   triggerButton: e,
-  startsOpen: a,
-  closeButtonLabel: d,
-  position: i = "right",
-  className: t
+  startsOpen: r,
+  closeButtonLabel: p,
+  position: t = "right",
+  className: f
 }) => {
-  const [f, n] = O(!!a), m = () => n(!0), w = () => n(!1), b = j(e, {
+  const [d, s] = D(!!r), m = () => s(!0), w = () => s(!1), b = O(e, {
     "data-testid": "drawer-trigger-button-container",
     onClick: (y) => {
-      var c, p;
-      const s = typeof ((c = e == null ? void 0 : e.props) == null ? void 0 : c.onClick) == "function" ? (p = e == null ? void 0 : e.props) == null ? void 0 : p.onClick : void 0;
-      s && s(y), m();
+      var c, i;
+      const n = typeof ((c = e == null ? void 0 : e.props) == null ? void 0 : c.onClick) == "function" ? (i = e == null ? void 0 : e.props) == null ? void 0 : i.onClick : void 0;
+      n && n(y), m();
     }
   });
-  return /* @__PURE__ */ C(D, { children: [
+  return /* @__PURE__ */ x(C, { children: [
     b,
-    /* @__PURE__ */ r(
-      v,
+    /* @__PURE__ */ a(
+      h,
       {
         children: o,
-        closeButtonLabel: d,
-        position: i,
-        className: t,
-        isOpen: f,
+        closeButtonLabel: p,
+        position: t,
+        className: f,
+        isOpen: d,
         onClose: w
       }
     )
   ] });
 };
-Object.defineProperty(x, "componentType", {
+Object.defineProperty(k, "componentType", {
   value: "Drawer",
   writable: !1,
   enumerable: !1
 });
-const F = ({ children: o, className: e }) => /* @__PURE__ */ r(
+const F = ({ children: o, className: e }) => /* @__PURE__ */ a(
   u,
   {
     includeModalClass: !1,
-    className: l("gi-drawer-body", e),
+    className: l(
+      "gi-px-6 gi-pt-1 gi-flex-1 gi-border-t-xs gi-border-gray-100 gi-overflow-y-auto",
+      e
+    ),
     children: o
   }
 );
@@ -67,16 +70,16 @@ Object.defineProperty(F, "componentType", {
 const M = ({
   children: o,
   className: e,
-  stacked: a
-}) => /* @__PURE__ */ r(h, { stacked: a, className: l("gi-drawer-footer", e), children: o });
+  stacked: r
+}) => /* @__PURE__ */ a(j, { stacked: r, className: l("gi-drawer-footer", e), children: o });
 Object.defineProperty(M, "componentType", {
   value: "DrawerFooter",
   writable: !1,
   enumerable: !1
 });
 export {
-  x as Drawer,
+  k as Drawer,
   F as DrawerBody,
   M as DrawerFooter,
-  v as DrawerWrapper
+  h as DrawerWrapper
 };