@ogcio/design-system-react 1.29.0 → 1.30.0

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
+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 { cn as x } from "../cn.js";
@@ -11,33 +11,33 @@ import { InputText as O } from "../input-text/input-text.js";
 import { Paragraph as y } from "../paragraph/paragraph.js";
 import { Tag as A, TagTypeEnum as F } from "../tag/tag.js";
 import { slugify as P } from "../utilities.js";
-const oo = ({
+const ee = ({
   children: c,
   noSearch: h,
   options: p,
   value: v,
-  defaultValue: k = [],
+  defaultValue: C = [],
   onChange: g,
   onSearch: l
 }) => {
-  const [m, C] = u(!1), [d, $] = u(""), [I, _] = u(!1), [T, V] = u(k), r = c ? `${P(`${c}-${j()}`)}` : "", w = v !== void 0, t = w ? v : T, z = () => [
+  const [m, k] = u(!1), [d, $] = u(""), [I, _] = u(!1), [T, V] = u(C), r = c ? `${P(`${c}-${j()}`)}` : "", w = v !== void 0, t = w ? v : T, z = () => [
     ...globalThis.window.document.querySelectorAll(
       `div.gi-combobox-checkbox.gi-combobox-key-${r}`
     )
   ];
   q(() => {
-    var a, i;
-    let o = 0;
-    const e = z();
-    for (const b of e) {
-      const f = (a = b.querySelector("label")) == null ? void 0 : a.textContent;
-      (i = f == null ? void 0 : f.toLowerCase()) != null && i.includes(d.toLowerCase()) ? b.style.display = "flex" : (b.style.display = "none", o++);
+    var s, i;
+    let e = 0;
+    const o = z();
+    for (const b of o) {
+      const f = (s = b.querySelector("label")) == null ? void 0 : s.textContent;
+      (i = f == null ? void 0 : f.toLowerCase()) != null && i.includes(d.toLowerCase()) ? b.style.display = "flex" : (b.style.display = "none", e++);
     }
-    _(o === p.length);
+    _(e === p.length);
   }, [d, p.length]);
-  const R = (o, e) => {
-    const a = e ? [...t || [], o] : (t || []).filter((i) => i !== o);
-    w || V(a), g == null || g(a);
+  const R = (e, o) => {
+    const s = o ? [...t || [], e] : (t || []).filter((i) => i !== e);
+    w || V(s), g == null || g(s);
   };
   return /* @__PURE__ */ n(
     "div",
@@ -52,18 +52,18 @@ const oo = ({
             variant: "flat",
             appearance: "dark",
             size: "large",
-            onClick: (o) => {
-              o.preventDefault(), C(!m);
+            onClick: (e) => {
+              e.preventDefault(), k(!m);
             },
             className: x("gi-combobox-toggle", {
               "gi-combobox-toggle-open": m
             }),
             children: [
               /* @__PURE__ */ n("div", { className: "gi-combobox-toggle-content", children: [
-                /* @__PURE__ */ s(y, { size: "md", children: c }),
-                (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ s(A, { type: F.Counter, text: t.length.toString() })
+                /* @__PURE__ */ a(y, { size: "md", children: c }),
+                (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ a(A, { type: F.Counter, text: t.length.toString() })
               ] }),
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ a(
                 D,
                 {
                   className: x({ "gi-rotate-180": m }),
@@ -80,19 +80,19 @@ const oo = ({
             id: `${r}-search`,
             children: [
               !h && /* @__PURE__ */ n("div", { className: "gi-combobox-search", children: [
-                /* @__PURE__ */ s(
+                /* @__PURE__ */ a(
                   O,
                   {
                     placeholder: N("dropdownItem.search", { defaultValue: "Search" }),
                     className: "gi-combobox-search-input",
                     value: d,
-                    onChange: (o) => {
-                      const e = o.target.value;
-                      $(e), l == null || l(e);
+                    onChange: (e) => {
+                      const o = e.target.value;
+                      $(o), l == null || l(o);
                     }
                   }
                 ),
-                d && /* @__PURE__ */ s(
+                d && /* @__PURE__ */ a(
                   E,
                   {
                     variant: "flat",
@@ -102,9 +102,8 @@ const oo = ({
                     onClick: () => {
                       l == null || l(""), $("");
                     },
-                    icon: {
-                      icon: "close"
-                    }
+                    icon: { icon: "close" },
+                    "aria-label": "Clear input"
                   }
                 )
               ] }),
@@ -115,29 +114,29 @@ const oo = ({
                     "gi-h-64": !h
                   }),
                   children: [
-                    I && /* @__PURE__ */ s(y, { className: "gi-combobox-checkbox-paragraph", children: N("dropdownItem.noResultFound", {
+                    I && /* @__PURE__ */ a(y, { className: "gi-combobox-checkbox-paragraph", children: N("dropdownItem.noResultFound", {
                       defaultValue: "No results found."
                     }) }),
-                    p.map((o, e) => {
-                      const a = t == null ? void 0 : t.includes(o.value);
-                      return /* @__PURE__ */ s(
+                    p.map((e, o) => {
+                      const s = t == null ? void 0 : t.includes(e.value);
+                      return /* @__PURE__ */ a(
                         "div",
                         {
                           className: `gi-combobox-checkbox gi-combobox-key-${r}`,
-                          children: /* @__PURE__ */ s(
+                          children: /* @__PURE__ */ a(
                             L,
                             {
-                              onChange: (i) => R(o.value, i.target.checked),
-                              checked: a,
-                              id: `${e}_${r}_${o.value}`,
-                              label: o.label,
-                              name: `${e}_${o.label}_${r}`,
-                              value: o.value,
+                              onChange: (i) => R(e.value, i.target.checked),
+                              checked: s,
+                              id: `${o}_${r}_${e.value}`,
+                              label: e.label,
+                              name: `${o}_${e.label}_${r}`,
+                              value: e.value,
                               size: "sm"
                             }
                           )
                         },
-                        `${e}_${r}_${o.value}`
+                        `${o}_${r}_${e.value}`
                       );
                     })
                   ]
@@ -151,5 +150,5 @@ const oo = ({
   );
 };
 export {
-  oo as DropdownItem
+  ee as DropdownItem
 };

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

@@ -1,66 +1,72 @@
-import { jsx as a, jsxs as E } from "react/jsx-runtime";
-import i from "react";
-import { cn as o } from "../cn.js";
-const r = (e, t) => i.isValidElement(e) && e.type === t, l = (e, t, s) => e ? /* @__PURE__ */ a(
-  "div",
-  {
-    className: o(
-      t,
-      s,
-      e.props.className
-    ),
-    style: e.props.style,
-    children: e.props.children
-  }
-) : null, T = ({
+import { jsx as o, jsxs as v } from "react/jsx-runtime";
+import c from "react";
+import { c as x } from "../index-CB-zPpNk.js";
+import { cn as i } from "../cn.js";
+const b = ({
   children: e,
   ...t
-}) => /* @__PURE__ */ a("div", { ...t, children: e });
-T.displayName = "DataTableFooterStart";
-const h = ({
+}) => /* @__PURE__ */ o("div", { ...t, children: e });
+b.displayName = "DataTableFooterStart";
+const S = ({
   children: e,
   ...t
-}) => /* @__PURE__ */ a("div", { ...t, children: e });
-h.displayName = "DataTableFooterCenter";
-const D = ({
+}) => /* @__PURE__ */ o("div", { ...t, children: e });
+S.displayName = "DataTableFooterCenter";
+const y = ({
   children: e,
   ...t
-}) => /* @__PURE__ */ a("div", { ...t, children: e });
-D.displayName = "DataTableFooterEnd";
-const v = ({
+}) => /* @__PURE__ */ o("div", { ...t, children: e });
+y.displayName = "DataTableFooterEnd";
+const C = ({
   children: e,
   className: t,
-  standalone: s = !1,
-  ...c
+  standalone: F = !1,
+  ...d
 }) => {
-  const S = i.useMemo(() => {
-    let g = null, y = null, F = null;
-    return i.Children.forEach(e, (n) => {
-      r(n, T) ? g = n : r(n, h) ? y = n : r(n, D) && (F = n);
-    }), { start: g, center: y, end: F };
-  }, [e]), { start: d, center: p, end: m } = S, f = !!!d && !!!p && !!m, b = "gi-data-table-footer-base", C = `${b} gi-text-center`, N = o("gi-min-w-0", {
-    "gi-basis-1/2 gi-text-right": !f
-  }), u = /* @__PURE__ */ E(
+  const h = c.useMemo(() => {
+    let n = null, r = null, u = null;
+    return c.Children.forEach(e, (a) => {
+      l(a, b) ? n = a : l(a, S) ? r = a : l(a, y) && (u = a);
+    }), { start: n, center: r, end: u };
+  }, [e]), { start: f, center: g, end: m } = h, D = !!!f && !!!g && !!m, { footer: T, baseSection: w, centerSection: E, endSection: N } = j({
+    onlyEnd: D
+  }), s = (n, r) => n ? /* @__PURE__ */ o(
     "div",
     {
-      className: o(
-        "gi-data-table-footer",
-        f ? "gi-justify-end" : "gi-gap-2",
-        t
-      ),
-      children: [
-        l(d, b),
-        l(p, C),
-        l(m, N)
-      ]
+      className: i(r, n.props.className),
+      style: n.props.style,
+      children: n.props.children
     }
-  );
-  return s ? /* @__PURE__ */ a("div", { ...c, className: o("gi-w-full gi-p-2", t), children: u }) : /* @__PURE__ */ a("tfoot", { ...c, children: /* @__PURE__ */ a("tr", { children: /* @__PURE__ */ a("td", { colSpan: 999, className: "gi-p-2", children: u }) }) });
+  ) : null, p = /* @__PURE__ */ v("div", { className: i(T(), t), children: [
+    s(f, w()),
+    s(g, E()),
+    s(m, N())
+  ] });
+  return F ? /* @__PURE__ */ o("div", { ...d, className: i("gi-w-full gi-p-2", t), children: p }) : /* @__PURE__ */ o("tfoot", { ...d, children: /* @__PURE__ */ o("tr", { children: /* @__PURE__ */ o("td", { colSpan: 999, className: "gi-p-2", children: p }) }) });
 };
-v.displayName = "DataTableFooter";
+C.displayName = "DataTableFooter";
+const j = x({
+  slots: {
+    footer: "gi-flex gi-flex-row gi-w-full gi-items-center",
+    baseSection: "gi-grow gi-basis-0 gi-min-w-0",
+    centerSection: "gi-grow gi-basis-0 gi-min-w-0 gi-text-center",
+    endSection: "gi-min-w-0"
+  },
+  variants: {
+    onlyEnd: {
+      true: {
+        footer: "gi-justify-end"
+      },
+      false: {
+        footer: "gi-gap-2",
+        endSection: "gi-basis-1/2 gi-text-right"
+      }
+    }
+  }
+}), l = (e, t) => c.isValidElement(e) && e.type === t;
 export {
-  v as DataTableFooter,
-  h as DataTableFooterCenter,
-  D as DataTableFooterEnd,
-  T as DataTableFooterStart
+  C as DataTableFooter,
+  S as DataTableFooterCenter,
+  y as DataTableFooterEnd,
+  b as DataTableFooterStart
 };

package/dist/data-table/data-table-header.d.ts

@@ -7,13 +7,6 @@ interface DataTableHeaderProps extends HTMLAttributes<HTMLDivElement> {
     showHeader?: boolean;
     showFilter?: boolean;
 }
-export declare const DataTableHeader: React.FC<DataTableHeaderProps>;
-export declare const DataTableHeaderSearch: React.FC<DataTableHeaderTypeProps>;
-export declare const DataTableHeaderActions: React.FC<DataTableHeaderTypeProps>;
-export declare const DataTableHeaderFilter: React.FC<DataTableHeaderTypeProps>;
-export declare const DataTableHeaderFilterContent: React.FC<DataTableHeaderTypeProps>;
-export declare const DataTableHeaderFilterContentTitle: React.FC<DataTableHeaderTypeProps>;
-export declare const DataTableHeaderFilterActions: React.FC<DataTableHeaderTypeProps>;
 type DataTableHeaderFilterListProps = {
     filters: {
         id: string;
@@ -23,5 +16,12 @@ type DataTableHeaderFilterListProps = {
     onClear?: () => void;
     className?: string;
 };
+export declare const DataTableHeader: React.FC<DataTableHeaderProps>;
+export declare const DataTableHeaderSearch: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderActions: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderFilter: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderFilterContent: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderFilterContentTitle: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderFilterActions: React.FC<DataTableHeaderTypeProps>;
 export declare const DataTableHeaderFilterList: React.FC<DataTableHeaderFilterListProps>;
 export {};

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

@@ -1,137 +1,124 @@
-import { jsxs as o, jsx as l } from "react/jsx-runtime";
-import { useMemo as O, Children as P, isValidElement as C } from "react";
-import { Button as x } from "../button/button.js";
-import { Chip as L } from "../chip/chip.js";
-import { cn as i } from "../cn.js";
-import { translate as g } from "../i18n/utility.js";
-const d = (e, a) => C(e) && e.type === a, h = ({
+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 { Chip as S } from "../chip/chip.js";
+import { cn as n } from "../cn.js";
+import { translate as x } from "../i18n/utility.js";
+const N = ({
   children: e,
-  className: a,
-  showHeader: t = !0,
-  showFilter: s = !0,
-  ...c
+  className: t,
+  showHeader: a = !0,
+  showFilter: c = !0,
+  ...p
 }) => {
-  const { search: n, filter: j, filterList: u, actions: A } = O(() => {
-    let f = null, H = null, y = null, D = null;
-    return P.forEach(e, (r) => {
-      d(r, p) ? f = r : d(r, m) ? H = r : d(r, T) ? y = r : d(r, b) && (D = r);
-    }), { search: f, filter: H, filterList: y, actions: D };
+  const { search: s, filter: j, filterList: T, actions: C } = A(() => {
+    let b = null, y = null, H = null, D = null;
+    return L.forEach(e, (r) => {
+      o(r, f) ? b = r : o(r, g) ? y = r : o(r, u) ? H = r : o(r, m) && (D = r);
+    }), { search: b, filter: y, filterList: H, actions: D };
   }, [e]);
-  return /* @__PURE__ */ o("div", { ...c, className: i("gi-data-table-header", a), children: [
-    t && /* @__PURE__ */ o("div", { className: "gi-flex gi-flex-1 gi-gap-4 gi-items-center", children: [
-      n,
+  return /* @__PURE__ */ d("div", { ...p, className: n(l.root(), t), children: [
+    a && /* @__PURE__ */ d("div", { className: l.headerRow(), children: [
+      s,
       j,
-      A
+      C
     ] }),
-    u && s && /* @__PURE__ */ l("div", { className: "gi-w-full", children: u })
+    T && c && /* @__PURE__ */ i("div", { className: l.filterListWrapper(), children: T })
   ] });
-}, p = ({
+}, f = ({
   children: e,
-  className: a,
-  ...t
-}) => /* @__PURE__ */ l("div", { className: i("gi-data-table-header-search", a), ...t, children: e }), b = ({
+  className: t,
+  ...a
+}) => /* @__PURE__ */ i("div", { className: n(l.search(), t), ...a, children: e }), m = ({
   children: e,
-  className: a,
-  ...t
-}) => /* @__PURE__ */ l("div", { className: i("gi-data-table-header-actions", a), ...t, children: e }), m = ({
+  className: t,
+  ...a
+}) => /* @__PURE__ */ i("div", { className: n(l.actions(), t), ...a, children: e }), g = ({
   children: e,
-  className: a,
-  ...t
-}) => /* @__PURE__ */ l("div", { className: i("gi-data-table-header-filter", a), ...t, children: e }), N = ({ children: e, className: a, ...t }) => /* @__PURE__ */ l(
-  "div",
-  {
-    className: i("gi-data-table-header-filter-content", a),
-    ...t,
-    children: e
-  }
-), F = ({ children: e, className: a, ...t }) => /* @__PURE__ */ l(
-  "div",
-  {
-    className: i("gi-data-table-header-filter-content-title", a),
-    ...t,
-    children: e
-  }
-), v = ({ children: e, className: a, ...t }) => /* @__PURE__ */ l(
-  "div",
-  {
-    className: i("gi-data-table-header-filter-actions", a),
-    ...t,
-    children: e
-  }
-), T = ({ filters: e, onRemove: a, onClear: t, className: s, ...c }) => !e || e.length === 0 ? null : /* @__PURE__ */ o(
-  "div",
-  {
-    className: i("gi-data-table-header-filter-list", s),
-    ...c,
-    children: [
-      /* @__PURE__ */ l("span", { className: "gi-text-sm", children: g("dataTableHeader.filtersApplied", {
-        length: e.length,
-        defaultValue: `Filters applied ${e.length}:`
-      }) }),
-      e.map((n) => /* @__PURE__ */ l(
-        L,
-        {
-          onClose: () => a == null ? void 0 : a(n.id),
-          label: n.label
-        },
-        n.id
-      )),
-      /* @__PURE__ */ l(
-        x,
-        {
-          appearance: "dark",
-          size: "medium",
-          variant: "flat",
-          onClick: () => {
-            t == null || t();
-          },
-          children: g("dataTableHeader.clearAllFilters", {
-            defaultValue: "Clear all filters"
-          })
-        }
-      )
-    ]
-  }
-);
-h.displayName = "DataTableHeader";
-p.displayName = "DataTableHeaderSearch";
-b.displayName = "DataTableHeaderActions";
-m.displayName = "DataTableHeaderFilter";
-T.displayName = "DataTableHeaderFilterList";
-N.displayName = "DataTableHeaderFilterContent";
-F.displayName = "DataTableHeaderFilterContentTitle";
-v.displayName = "DataTableHeaderFilterActions";
-Object.defineProperty(h, "componentType", {
+  className: t,
+  ...a
+}) => /* @__PURE__ */ i("div", { className: n(l.filter(), t), ...a, children: e }), F = ({ children: e, className: t, ...a }) => /* @__PURE__ */ i("div", { className: n(l.filterContent(), t), ...a, children: e }), v = ({ children: e, className: t, ...a }) => /* @__PURE__ */ i("div", { className: n(l.filterContentTitle(), t), ...a, children: e }), h = ({ children: e, className: t, ...a }) => /* @__PURE__ */ i("div", { className: n(l.filterActions(), t), ...a, children: e }), u = ({ filters: e, onRemove: t, onClear: a, className: c, ...p }) => !e || e.length === 0 ? null : /* @__PURE__ */ d("div", { className: n(l.filterList(), c), ...p, children: [
+  /* @__PURE__ */ i("span", { className: "gi-text-sm", children: x("dataTableHeader.filtersApplied", {
+    length: e.length,
+    defaultValue: `Filters applied ${e.length}:`
+  }) }),
+  e.map((s) => /* @__PURE__ */ i(
+    S,
+    {
+      onClose: () => t == null ? void 0 : t(s.id),
+      label: s.label
+    },
+    s.id
+  )),
+  /* @__PURE__ */ i(
+    w,
+    {
+      appearance: "dark",
+      size: "medium",
+      variant: "flat",
+      onClick: () => {
+        a == null || a();
+      },
+      children: x("dataTableHeader.clearAllFilters", {
+        defaultValue: "Clear all filters"
+      })
+    }
+  )
+] });
+N.displayName = "DataTableHeader";
+f.displayName = "DataTableHeaderSearch";
+m.displayName = "DataTableHeaderActions";
+g.displayName = "DataTableHeaderFilter";
+u.displayName = "DataTableHeaderFilterList";
+F.displayName = "DataTableHeaderFilterContent";
+v.displayName = "DataTableHeaderFilterContentTitle";
+h.displayName = "DataTableHeaderFilterActions";
+Object.defineProperty(N, "componentType", {
   value: "DataTableHeader"
 });
-Object.defineProperty(p, "componentType", {
+Object.defineProperty(f, "componentType", {
   value: "DataTableHeaderSearch"
 });
-Object.defineProperty(b, "componentType", {
+Object.defineProperty(m, "componentType", {
   value: "DataTableHeaderActions"
 });
-Object.defineProperty(m, "componentType", {
+Object.defineProperty(g, "componentType", {
   value: "DataTableHeaderFilter"
 });
-Object.defineProperty(T, "componentType", {
+Object.defineProperty(u, "componentType", {
   value: "DataTableHeaderFilterList"
 });
-Object.defineProperty(N, "componentType", {
+Object.defineProperty(F, "componentType", {
   value: "DataTableHeaderFilterContent"
 });
-Object.defineProperty(F, "componentType", {
+Object.defineProperty(v, "componentType", {
   value: "DataTableHeaderFilterContentTitle"
 });
-Object.defineProperty(v, "componentType", {
+Object.defineProperty(h, "componentType", {
   value: "DataTableHeaderFilterActions"
 });
+const l = P({
+  slots: {
+    root: "gi-flex gi-flex-wrap gi-items-center gi-w-full gi-gap-4 gi-mb-2",
+    headerRow: "gi-flex gi-flex-1 gi-gap-4 gi-items-center",
+    search: "gi-flex gi-flex-1",
+    filter: "gi-flex gi-items-center",
+    actions: "gi-flex gi-items-center gi-ml-auto gi-gap-4 gi-flex-shrink",
+    filterListWrapper: "gi-w-full",
+    filterList: "gi-flex gi-items-center gi-gap-2 gi-flex-wrap",
+    filterContentTitle: "gi-py-2 gi-font-medium",
+    filterContent: "gi-flex gi-flex-col gi-gap-2 gi-px-6 gi-py-4 gi-flex-1 gi-overflow-auto",
+    filterActions: "gi-flex gi-justify-end gi-gap-2 gi-p-6"
+  }
+})(), o = (e, t) => O(e) && e.type === t;
 export {
-  h as DataTableHeader,
-  b as DataTableHeaderActions,
-  m as DataTableHeaderFilter,
-  v as DataTableHeaderFilterActions,
-  N as DataTableHeaderFilterContent,
-  F as DataTableHeaderFilterContentTitle,
-  T as DataTableHeaderFilterList,
-  p as DataTableHeaderSearch
+  N as DataTableHeader,
+  m as DataTableHeaderActions,
+  g as DataTableHeaderFilter,
+  h as DataTableHeaderFilterActions,
+  F as DataTableHeaderFilterContent,
+  v as DataTableHeaderFilterContentTitle,
+  u as DataTableHeaderFilterList,
+  f as DataTableHeaderSearch
 };

package/dist/data-table/data-table-selected-rows.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 export type DataTableSelectedRowsBannerProps = {
     selectedCount: number;
     actions?: React.ReactNode;

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

@@ -1,23 +1,19 @@
-import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { c as o } from "../index-CB-zPpNk.js";
 import { cn as g } from "../cn.js";
-import { translate as l } from "../i18n/utility.js";
-const o = ({ selectedCount: e, actions: t, className: a, ...s }) => /* @__PURE__ */ r(
-  "div",
-  {
-    className: g(
-      "gi-w-full gi-flex gi-items-center gi-justify-between gi-px-3 gi-py-2 gi-bg-gray-900 gi-rounded-md",
-      a
-    ),
-    ...s,
-    children: [
-      /* @__PURE__ */ i("span", { className: "gi-text-sm gi-font-medium gi-text-white", children: l("dataTable.selectedRows", {
-        count: e,
-        defaultValue: ` (${e} Row${e === 1 ? "" : "s"} selected)`
-      }) }),
-      /* @__PURE__ */ i("div", { className: "gi-flex gi-gap-4", children: t })
-    ]
+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: [
+  /* @__PURE__ */ t("span", { className: i.label(), children: m("dataTable.selectedRows", {
+    count: e,
+    defaultValue: ` (${e} Row${e === 1 ? "" : "s"} selected)`
+  }) }),
+  /* @__PURE__ */ t("div", { className: "gi-flex gi-gap-4", children: s })
+] }), i = o({
+  slots: {
+    root: "gi-w-full gi-flex gi-items-center gi-justify-between gi-px-3 gi-py-2 gi-bg-gray-900 gi-rounded-md",
+    label: "gi-text-sm gi-font-medium gi-text-white"
   }
-);
+})();
 export {
-  o as DataTableSelectedRowsBanner
+  p as DataTableSelectedRowsBanner
 };

package/dist/forms/form-field/form-field.d.ts

@@ -1,9 +1,9 @@
 import { ErrorTextProps } from '../../error-text/types.js';
 import { HintTextProps } from '../../hint-text/types.js';
-import { FormFieldProps, FormFiledLabelProps } from './types.js';
+import { FormFieldLabelProps, FormFieldProps } from './types.js';
 declare const FormField: (props: FormFieldProps) => import("react/jsx-runtime").JSX.Element;
 declare const FormFieldLabel: {
-    ({ children, text, size, htmlFor, className, secondaryLabel, ...props }: FormFiledLabelProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, text, size, htmlFor, className, secondaryLabel, ...props }: FormFieldLabelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const FormFieldHint: {