@ogcio/design-system-react 1.32.0 → 1.34.0

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

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

package/dist/button-group/types.d.ts

@@ -1,9 +1,9 @@
 import { PropsWithChildren } from 'react';
-import { ButtonAppearance, ButtonSize } from '../button/types.js';
+import { Props as ButtonProps } from '../atoms/Button';
 export type ButtonGroupProps = PropsWithChildren<{
     name: string;
-    size?: ButtonSize;
-    appearance?: ButtonAppearance;
+    size?: ButtonProps['size'];
+    appearance?: ButtonProps['appearance'];
     onChange?: (value: string) => void;
     defaultValue?: string;
     value?: string;
@@ -22,8 +22,8 @@ export type ButtonGroupContextType = {
     selectedValue?: string;
     setSelectedValue: (value: string) => void;
     name: string;
-    size: ButtonSize;
-    appearance?: ButtonAppearance;
+    size: ButtonProps['size'];
+    appearance?: ButtonProps['appearance'];
     onChange?: (value: string) => void;
     groupId: string;
 };

package/dist/card/card-legacy.js

@@ -1,5 +1,5 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { Button as k } from "../button/button.js";
+import k from "../atoms/Button.js";
 import { translate as c } from "../i18n/utility.js";
 import { Link as u } from "../link/link.js";
 import { CardNext as b, CardMedia as L, CardContainer as T, CardHeader as V, CardTitle as $, CardSubtitle as j, CardTag as A, CardDescription as B, CardAction as H } from "./card-next.js";

package/dist/card/types.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactElement } from 'react';
-import { ButtonProps } from '../button/types.js';
+import { Props as ButtonProps } from '../atoms/Button';
 import { IconProps } from '../icon/icon.js';
 import { LinkProps } from '../link/link.js';
 import { TagProps } from '../tag/tag.js';

package/dist/chip/chip.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as a, jsx as o } from "react/jsx-runtime";
 import { useId as l } from "react";
-import { c as p } from "../index-CB-zPpNk.js";
+import { c as p } from "../index-C7W4ssMN.js";
 import { cn as g } from "../cn.js";
 import { translate as t } from "../i18n/utility.js";
 import { Icon as u } from "../icon/icon.js";

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as n, jsx as a } from "react/jsx-runtime";
 import { useState as u, useId as j, useEffect as q } from "react";
-import { Button as B } from "../button/button.js";
+import B from "../atoms/Button.js";
 import { cn as x } from "../cn.js";
 import { translate as N } from "../i18n/utility.js";
 import { Icon as D } from "../icon/icon.js";

package/dist/cookie-banner/cookie-banner.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ButtonProps } from '../button/types.js';
+import { Props as ButtonProps } from '../atoms/Button';
 import { LinkProps } from '../link/link.js';
 export type CookieBannerProps = {
     showConsent: boolean;

package/dist/data-table/data-table-footer.js

@@ -1,6 +1,6 @@
-import { jsx as o, jsxs as v } from "react/jsx-runtime";
+import { jsxs as v, jsx as o } from "react/jsx-runtime";
 import c from "react";
-import { c as x } from "../index-CB-zPpNk.js";
+import { c as x } from "../index-C7W4ssMN.js";
 import { cn as i } from "../cn.js";
 const b = ({
   children: e,

package/dist/data-table/data-table-header.js

@@ -1,7 +1,7 @@
 import { jsxs as d, jsx as i } from "react/jsx-runtime";
 import { useMemo as A, Children as L, isValidElement as O } from "react";
-import { c as P } from "../index-CB-zPpNk.js";
-import { Button as w } from "../button/button.js";
+import { c as P } from "../index-C7W4ssMN.js";
+import w from "../atoms/Button.js";
 import { Chip as S } from "../chip/chip.js";
 import { cn as n } from "../cn.js";
 import { translate as x } from "../i18n/utility.js";

package/dist/data-table/data-table-selected-rows.js

@@ -1,5 +1,5 @@
 import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { c as o } from "../index-CB-zPpNk.js";
+import { c as o } from "../index-C7W4ssMN.js";
 import { cn as g } from "../cn.js";
 import { translate as m } from "../i18n/utility.js";
 const p = ({ selectedCount: e, actions: s, className: a, ...l }) => /* @__PURE__ */ r("div", { className: g(i.root(), a), ...l, children: [

package/dist/data-table/editable-table-cell.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as o } from "react/jsx-runtime";
-import { l as O } from "../lodash-82PmXrjJ.js";
+import { l as O } from "../lodash-DTZaBYO8.js";
 import { useState as g, useMemo as S, useEffect as k } from "react";
 import { InputCheckboxTableCell as V } from "../input-checkbox/input-checkbox.js";
 import { InputTextTableCell as j } from "../input-text/input-text.js";

package/dist/details/details.js

@@ -1,25 +1,25 @@
 "use client";
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { jsxs as t, jsx as a } 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);
+import { c as m } from "../index-C7W4ssMN.js";
+import { Icon as p } from "../icon/icon.js";
+const w = ({ label: l, name: n, children: d, ...c }) => {
+  const s = g(null), [e, o] = u(!1);
   return f(() => {
     var i, r;
-    ((i = s.current) == null ? void 0 : i.open) !== e && a(((r = s.current) == null ? void 0 : r.open) ?? !1);
+    ((i = s.current) == null ? void 0 : i.open) !== e && o(((r = s.current) == null ? void 0 : r.open) ?? !1);
   }, []), /* @__PURE__ */ t(
     "details",
     {
       ref: s,
       onToggle: () => {
         var i;
-        a(((i = s.current) == null ? void 0 : i.open) ?? !1);
+        o(((i = s.current) == null ? void 0 : i.open) ?? !1);
       },
       "data-testid": "govie-details",
       className: "gi-block gi-text-md gi-text-gray-950",
       "data-module": "gi-details",
-      name: l,
+      name: n,
       "aria-expanded": e ? "true" : "false",
       "aria-details": "details-content",
       ...c,
@@ -33,12 +33,12 @@ const w = ({ label: n, name: l, children: d, ...c }) => {
             "aria-controls": "details-content",
             "aria-expanded": e ? "true" : "false",
             children: [
-              /* @__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__ */ a(p, { icon: e ? "keyboard_arrow_up" : "keyboard_arrow_down" }),
+              /* @__PURE__ */ a("span", { className: "gi-underline", children: l })
             ]
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ a(
           "div",
           {
             id: "details-content",
@@ -50,7 +50,7 @@ const w = ({ label: n, name: l, children: d, ...c }) => {
       ]
     }
   );
-}, _ = p({
+}, _ = m({
   base: [
     "gi-flex",
     "gi-items-center",
@@ -64,10 +64,7 @@ const w = ({ label: n, name: l, children: d, ...c }) => {
     "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]"
+    "[&:focus>span]:gi-select-none"
   ]
 });
 export {

package/dist/drawer/drawer.d.ts

@@ -1,5 +1,5 @@
 import { Fragment, ReactElement } from 'react';
-import { ButtonProps } from '../button/types.js';
+import { Props as ButtonProps } from '../atoms/Button';
 import { ModalProps, ModalWrapperProps } from '../modal/types.js';
 type DrawerChildren = Array<ReactElement<typeof DrawerBody | typeof DrawerBody>> | ReactElement<typeof Fragment>;
 export type DrawerPosition = 'left' | 'right' | 'bottom';

package/dist/drawer/drawer.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsx as a, jsxs as x, Fragment as C } from "react/jsx-runtime";
+import { jsxs as x, Fragment as C, jsx as a } 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 j, ModalWrapper as v } from "../modal/modal.js";
-const h = ({
+const T = ({
   children: o,
   className: e,
   ...r
@@ -15,29 +15,29 @@ const h = ({
     ...r,
     children: o
   }
-), k = ({
+), h = ({
   children: o,
   triggerButton: e,
   startsOpen: r,
-  closeButtonLabel: p,
+  closeButtonLabel: i,
   position: t = "right",
   className: f
 }) => {
   const [d, s] = D(!!r), m = () => s(!0), w = () => s(!1), b = O(e, {
-    "data-testid": "drawer-trigger-button-container",
+    dataTestId: "drawer-trigger-button-container",
     onClick: (y) => {
-      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;
+      var c, p;
+      const n = 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;
       n && n(y), m();
     }
   });
   return /* @__PURE__ */ x(C, { children: [
     b,
     /* @__PURE__ */ a(
-      h,
+      T,
       {
         children: o,
-        closeButtonLabel: p,
+        closeButtonLabel: i,
         position: t,
         className: f,
         isOpen: d,
@@ -46,12 +46,12 @@ const h = ({
     )
   ] });
 };
-Object.defineProperty(k, "componentType", {
+Object.defineProperty(h, "componentType", {
   value: "Drawer",
   writable: !1,
   enumerable: !1
 });
-const F = ({ children: o, className: e }) => /* @__PURE__ */ a(
+const k = ({ children: o, className: e }) => /* @__PURE__ */ a(
   u,
   {
     includeModalClass: !1,
@@ -62,24 +62,24 @@ const F = ({ children: o, className: e }) => /* @__PURE__ */ a(
     children: o
   }
 );
-Object.defineProperty(F, "componentType", {
+Object.defineProperty(k, "componentType", {
   value: "DrawerBody",
   writable: !1,
   enumerable: !1
 });
-const M = ({
+const F = ({
   children: o,
   className: e,
   stacked: r
 }) => /* @__PURE__ */ a(j, { stacked: r, className: l("gi-drawer-footer", e), children: o });
-Object.defineProperty(M, "componentType", {
+Object.defineProperty(F, "componentType", {
   value: "DrawerFooter",
   writable: !1,
   enumerable: !1
 });
 export {
-  k as Drawer,
-  F as DrawerBody,
-  M as DrawerFooter,
-  h as DrawerWrapper
+  h as Drawer,
+  k as DrawerBody,
+  F as DrawerFooter,
+  T as DrawerWrapper
 };

package/dist/error-text/error-text.js

@@ -1,40 +1,41 @@
-import { jsx as a } from "react/jsx-runtime";
-import { c as m } from "../index-CB-zPpNk.js";
-const d = {
+import { jsx as m } from "react/jsx-runtime";
+import { c as s } from "../index-C7W4ssMN.js";
+const l = {
   Small: "sm",
   Medium: "md",
   Large: "lg"
-}, l = m({
-  base: "gi-error-text",
-  variants: {
-    size: {
-      sm: "gi-error-text-sm",
-      md: "gi-error-text-md",
-      lg: "gi-error-text-lg"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-}), x = ({
-  text: r,
+}, d = ({
+  text: t,
   className: e,
-  size: t = d.Medium,
+  size: r = l.Medium,
   dataTestid: i,
-  children: o,
-  ...s
-}) => /* @__PURE__ */ a(
+  children: a,
+  ...o
+}) => /* @__PURE__ */ m(
   "div",
   {
     role: "alert",
-    className: l({ size: t, className: e }),
+    className: n({ size: r, className: e }),
     "data-testid": i,
-    ...s,
-    children: o ?? r
+    ...o,
+    children: a ?? t
   }
 );
-x.displayName = "ErrorText";
+d.displayName = "ErrorText";
+const n = s({
+  base: "gi-font-normal gi-text-color-text-intent-error-default",
+  variants: {
+    size: {
+      sm: "gi-text-sm",
+      md: "gi-text-md",
+      lg: "gi-text-lg"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
 export {
-  d as ErrorSize,
-  x as ErrorText
+  l as ErrorSize,
+  d as ErrorText
 };

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

@@ -1,19 +1,19 @@
 "use client";
-import { jsx as l, jsxs as m, Fragment as x } from "react/jsx-runtime";
+import { jsx as l, jsxs as d, 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 { createContext as v, useContext as N, Children as C } from "react";
+import { cn as s } 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, styles as P } from "../../label/label.js";
 import { getSpecialComponentType as F, isSpecialComponent as w } from "../../utils/utilities.js";
-const f = N(null);
+const f = v(null);
 function b(e) {
-  v(f) || console.error(`[${e}] must be used within a <FormField>.`);
+  N(f) || console.error(`[${e}] must be used within a <FormField>.`);
 }
 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__ */ m(y, { ...e, children: [
+), /* @__PURE__ */ l(f.Provider, { value: !0, children: /* @__PURE__ */ d(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 U = (e) => ["error", "hint", "label"].some((r) => r in e) ? (console.warn(
 }) => {
   const r = C.toArray(e), n = r.find(
     (t) => F(t) === "FormFieldLabel"
-  ), c = r.find(
+  ), m = r.find(
     (t) => F(t) === "FormFieldHint"
   ), a = r.find(
     (t) => F(t) === "FormFieldError"
-  ), s = r.filter(
+  ), c = r.filter(
     (t) => !w(t, [
       "FormFieldLabel",
       "FormFieldHint",
       "FormFieldError"
     ])
   );
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ d(
     "fieldset",
     {
-      className: d({ "gi-error-state": !!a }, i),
+      className: s({ "gi-error-state": !!a }, i),
       ...o,
       children: [
-        /* @__PURE__ */ m("div", { className: "gi-pb-3 gi-flex gi-flex-col gi-gap-1", children: [
-          /* @__PURE__ */ m("div", { children: [
+        /* @__PURE__ */ d("div", { className: "gi-pb-3 gi-flex gi-flex-col gi-gap-1", children: [
+          /* @__PURE__ */ d("div", { children: [
             n,
-            c
+            m
           ] }),
           a
         ] }),
-        /* @__PURE__ */ l(p, { children: s })
+        /* @__PURE__ */ l(p, { children: c })
       ]
     }
   );
@@ -59,32 +59,31 @@ const U = (e) => ["error", "hint", "label"].some((r) => r in e) ? (console.warn(
   size: o,
   htmlFor: r,
   className: n,
-  secondaryLabel: c,
+  secondaryLabel: m,
   ...a
 }) => {
   b("FormFieldLabel");
-  const s = /* @__PURE__ */ m(x, { children: [
+  const c = /* @__PURE__ */ d(x, { children: [
     i ?? e,
-    c ? /* @__PURE__ */ l("span", { className: "gi-secondary-label", children: c }) : null
+    m ? /* @__PURE__ */ l("span", { className: "gi-secondary-label", children: m }) : null
   ] });
   return r ? /* @__PURE__ */ l(
     H,
     {
       size: o,
       htmlFor: r,
-      className: d("gi-font-bold", n),
+      className: s("gi-font-bold", n),
       ...a,
-      children: s
+      children: c
     }
   ) : /* @__PURE__ */ l(
     "legend",
     {
-      className: P({
-        size: o,
-        className: d("gi-font-bold", n)
+      className: P({ size: o }).base({
+        className: s("gi-font-bold", n)
       }),
       ...a,
-      children: s
+      children: c
     }
   );
 };
@@ -94,7 +93,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: d("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: r, children: e }));
 Object.defineProperty(h, "componentType", {
   value: "FormFieldHint",
   writable: !1,
@@ -112,7 +111,7 @@ const g = ({
   {
     text: i,
     size: o,
-    className: d("gi-mb-1", r),
+    className: s("gi-mb-1", r),
     ...n,
     children: e
   }

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

@@ -1,6 +1,6 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import c from "../../Heading.js";
-import { Button as h } from "../../button/button.js";
+import h from "../../atoms/Button.js";
 import { translate as a } from "../../i18n/utility.js";
 import { IconButton as d } from "../../icon-button/icon-button.js";
 import { InputText as m } from "../../input-text/input-text.js";
@@ -35,7 +35,7 @@ function b({
           /* @__PURE__ */ e("div", { className: "gi-ml-1 gi-flex-none gi-hidden md:gi-block", children: /* @__PURE__ */ e(
             h,
             {
-              "aria-label": a("header.submitSearch", {
+              ariaLabel: a("header.submitSearch", {
                 defaultValue: "Submit Search"
               }),
               children: a("header.search", { defaultValue: "Search" })