@altinn/altinn-components 0.7.1 → 0.7.2

package/dist/components/Menu/MenuItem.stories.js

@@ -1,26 +1,28 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { LayoutBase as i } from "../Layout/LayoutBase.js";
+import { jsx as n, jsxs as s } from "react/jsx-runtime";
+import { fn as i } from "@storybook/test";
+import { LayoutBase as l } from "../Layout/LayoutBase.js";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
-import { MetaItem as l } from "../Meta/MetaItem.js";
+import { MetaItem as p } from "../Meta/MetaItem.js";
 import { MenuItem as o } from "./MenuItem.js";
-import { MenuBase as p } from "./MenuBase.js";
-const h = {
+import { MenuBase as m } from "./MenuBase.js";
+const v = {
   title: "Menu/MenuItem",
   component: o,
   tags: ["autodocs"],
   parameters: {},
   args: {
-    id: "inbox"
+    id: "inbox",
+    onClick: i()
   }
-}, B = {
+}, I = {
   args: {
     icon: "inbox",
     title: "Innboks"
   }
-}, v = {
+}, A = {
   args: {
     icon: "inbox",
     title: "Innboks",
@@ -28,14 +30,14 @@ const h = {
       label: "4"
     }
   }
-}, I = {
+}, C = {
   args: {
     size: "lg",
     icon: "inbox",
     title: "Innboks",
     color: "strong"
   }
-}, A = {
+}, G = {
   args: {
     size: "lg",
     icon: "inbox",
@@ -46,7 +48,7 @@ const h = {
       label: "4"
     }
   }
-}, m = {
+}, c = {
   args: {
     avatar: {
       type: "person",
@@ -54,7 +56,7 @@ const h = {
     },
     title: "Eirik Horneland"
   }
-}, G = {
+}, M = {
   args: {
     avatarGroup: {
       items: [
@@ -74,7 +76,7 @@ const h = {
     },
     title: "3 personer"
   }
-}, c = {
+}, g = {
   args: {
     avatar: {
       type: "company",
@@ -82,7 +84,7 @@ const h = {
     },
     title: "Sportsklubben Brann"
   }
-}, M = {
+}, z = {
   args: {
     avatarGroup: {
       defaultType: "company",
@@ -100,36 +102,36 @@ const h = {
     },
     title: "3 virksomheter"
   }
-}, z = {
+}, H = {
   args: {
-    ...m.args,
+    ...c.args,
     size: "lg",
     description: "Født: XX.XX.XXXX"
   }
-}, C = {
+}, S = {
   args: {
-    ...c.args,
+    ...g.args,
     size: "lg",
     description: "Org nr.: XX.XX.XXXX"
   }
-}, H = () => {
+}, E = () => {
   const t = ["global", "neutral", "company", "person", "global-dark"], a = ["neutral", "subtle", "strong", "company", "person"];
-  return /* @__PURE__ */ e("div", { style: { display: "flex", width: "100%" }, children: t.map((n) => /* @__PURE__ */ e("div", { style: { flexGrow: 1 }, children: /* @__PURE__ */ e(i, { theme: n, children: /* @__PURE__ */ e(p, { children: a.map((r) => /* @__PURE__ */ s("div", { children: [
-    /* @__PURE__ */ e(o, { icon: "inbox", title: "Title", color: r, id: "inbox" }),
-    /* @__PURE__ */ e(l, { children: n + "/" + r })
-  ] }, r)) }) }) }, n)) });
+  return /* @__PURE__ */ n("div", { style: { display: "flex", width: "100%" }, children: t.map((e) => /* @__PURE__ */ n("div", { style: { flexGrow: 1 }, children: /* @__PURE__ */ n(l, { theme: e, children: /* @__PURE__ */ n(m, { children: a.map((r) => /* @__PURE__ */ s("div", { children: [
+    /* @__PURE__ */ n(o, { icon: "inbox", title: "Title", color: r, id: "inbox" }),
+    /* @__PURE__ */ n(p, { children: e + "/" + r })
+  ] }, r)) }) }) }, e)) });
 };
 export {
-  A as AlertBadge,
-  c as Company,
-  C as CompanyAccount,
-  M as CompanyGroup,
-  B as Default,
-  v as DefaultBadge,
-  I as Large,
-  m as Person,
-  z as PersonAccount,
-  G as PersonGroup,
-  H as ThemesAndColors,
-  h as default
+  G as AlertBadge,
+  g as Company,
+  S as CompanyAccount,
+  z as CompanyGroup,
+  I as Default,
+  A as DefaultBadge,
+  C as Large,
+  c as Person,
+  H as PersonAccount,
+  M as PersonGroup,
+  E as ThemesAndColors,
+  v as default
 };

package/dist/components/Menu/MenuItemBase.d.ts

@@ -1,23 +1,25 @@
-import { ElementType, MouseEventHandler, ReactNode } from 'react';
+import { ElementType, KeyboardEventHandler, ReactNode } from 'react';
 import { BadgeProps } from '../Badge';
 import { IconName } from '../Icon';
-export type MenuItemColor = 'neutral' | 'subtle' | 'strong' | 'company' | 'person';
 export type MenuItemSize = 'sm' | 'md' | 'lg';
+export type MenuItemColor = 'neutral' | 'subtle' | 'strong' | 'company' | 'person';
 export interface MenuItemBaseProps {
     as?: ElementType;
-    onClick?: MouseEventHandler;
+    size?: MenuItemSize;
     color?: MenuItemColor;
-    children?: ReactNode;
+    className?: string;
+    href?: string;
+    onClick?: () => void;
+    onKeyPress?: KeyboardEventHandler;
     tabIndex?: number;
-    size?: MenuItemSize;
-    linkIcon?: IconName;
-    linkText?: string;
-    badge?: BadgeProps;
-    collapsible?: boolean;
+    hidden?: boolean;
+    disabled?: boolean;
     active?: boolean;
-    expanded?: boolean;
     selected?: boolean;
-    disabled?: boolean;
-    className?: string;
+    expanded?: boolean;
+    children?: ReactNode;
+    badge?: BadgeProps;
+    linkIcon?: IconName;
+    linkText?: string;
 }
-export declare const MenuItemBase: ({ as, onClick, size, color, linkIcon, linkText, badge, tabIndex, active, collapsible, expanded, selected, disabled, className, children, ...rest }: MenuItemBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItemBase: ({ as, size, color, className, href, onClick, onKeyPress, tabIndex, hidden, disabled, active, selected, expanded, linkIcon, linkText, badge, children, }: MenuItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuItemBase.js

@@ -1,61 +1,63 @@
-import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { c as v } from "../../index-L8X2o7IH.js";
-import { Badge as N } from "../Badge/Badge.js";
-import { Icon as T } from "../Icon/Icon.js";
+import { jsxs as i, jsx as c } from "react/jsx-runtime";
+import { c as N } from "../../index-L8X2o7IH.js";
+import { Badge as u } from "../Badge/Badge.js";
+import { Icon as v } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
-import '../../assets/MenuItemBase.css';const B = "_item_16huj_1", g = "_content_16huj_36", w = "_action_16huj_44", y = "_linkText_16huj_51", z = "_linkIcon_16huj_56", C = "_media_16huj_76", n = {
-  item: B,
-  content: g,
-  action: w,
-  linkText: y,
+import '../../assets/MenuItemBase.css';const T = "_item_y1gbn_1", j = "_content_y1gbn_37", B = "_action_y1gbn_45", k = "_linkText_y1gbn_52", z = "_linkIcon_y1gbn_57", E = "_media_y1gbn_77", t = {
+  item: T,
+  content: j,
+  action: B,
+  linkText: k,
   linkIcon: z,
-  media: C
-}, E = ({
-  as: l,
-  onClick: _,
-  size: d,
-  color: h,
-  linkIcon: o,
-  linkText: c,
-  badge: i,
-  tabIndex: p = 0,
-  active: u = !1,
-  collapsible: s = !1,
-  expanded: m = !1,
-  selected: f = !1,
-  disabled: r = !1,
-  className: j,
-  children: x,
-  ...I
-}) => {
-  const k = l || "a", e = s && m ? "chevron-up" : s ? "chevron-down" : o && "chevron-right";
-  return /* @__PURE__ */ t(
-    k,
-    {
-      role: "menuitem",
-      tabIndex: r ? "-1" : p ?? 0,
-      "data-size": d,
-      "data-color": h,
-      "data-active": u,
-      "aria-expanded": m,
-      "aria-disabled": r,
-      "aria-selected": f,
-      onClick: _,
-      className: v(n.item, j),
-      ...I,
-      children: [
-        /* @__PURE__ */ t("div", { className: n.content, children: [
-          x,
-          i && /* @__PURE__ */ a(N, { ...i })
-        ] }),
-        e && /* @__PURE__ */ t("div", { className: n.action, children: [
-          c && /* @__PURE__ */ a("span", { className: n.linkText, children: c }),
-          e && /* @__PURE__ */ a(T, { name: e, className: n.linkIcon })
-        ] })
-      ]
-    }
-  );
-};
+  media: E
+}, G = ({
+  as: d,
+  size: _,
+  color: l,
+  className: p,
+  href: x,
+  onClick: n,
+  onKeyPress: a,
+  tabIndex: f = 0,
+  hidden: b,
+  disabled: o = !1,
+  active: g = !1,
+  selected: h = !1,
+  expanded: y = !1,
+  linkIcon: e,
+  linkText: m,
+  badge: s,
+  children: I
+}) => /* @__PURE__ */ i(
+  d || "a",
+  {
+    role: "menuitem",
+    tabIndex: o ? "-1" : f ?? 0,
+    className: N(t.item, p),
+    "data-size": _,
+    "data-color": l,
+    "data-active": g,
+    "aria-hidden": b,
+    "aria-expanded": y,
+    "aria-disabled": o,
+    "aria-selected": h,
+    href: x,
+    onKeyPress: (r) => {
+      r.key === "Enter" && (n == null || n()), a == null || a(r);
+    },
+    onClick: n,
+    children: [
+      /* @__PURE__ */ i("div", { className: t.content, children: [
+        I,
+        s && /* @__PURE__ */ c(u, { ...s })
+      ] }),
+      e && /* @__PURE__ */ i("div", { className: t.action, children: [
+        m && /* @__PURE__ */ c("span", { className: t.linkText, children: m }),
+        e && /* @__PURE__ */ c(v, { name: e, className: t.linkIcon })
+      ] })
+    ]
+  }
+);
 export {
-  E as MenuItemBase
+  G as MenuItemBase
 };

package/dist/components/Menu/MenuSearch.d.ts

@@ -4,5 +4,6 @@ export interface MenuSearchProps {
     name: string;
     value: string;
     onChange: ChangeEventHandler;
+    onClear?: () => void;
 }
-export declare const MenuSearch: ({ value, name, placeholder, onChange }: MenuSearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuSearch: ({ value, name, placeholder, onChange, onClear }: MenuSearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuSearch.js

@@ -1,21 +1,41 @@
-import { jsx as t } from "react/jsx-runtime";
-import '../../assets/MenuSearch.css';const i = "_input_73dww_1", _ = "_button_73dww_13", u = "_close_73dww_18", l = "_icon_73dww_22", o = {
-  input: i,
-  button: _,
-  close: u,
-  icon: l
-}, r = ({ value: n, name: c, placeholder: s = "Søk", onChange: e }) => /* @__PURE__ */ t("div", { className: o.field, children: /* @__PURE__ */ t(
-  "input",
-  {
-    type: "search",
-    value: n,
-    name: c,
-    placeholder: s,
-    className: o.input,
-    onChange: e,
-    autoComplete: "off"
-  }
-) });
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { Icon as r } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import "../../index-L8X2o7IH.js";
+import "react";
+import { IconButton as a } from "../Button/IconButton.js";
+import "../RootProvider/RootProvider.js";
+import '../../assets/MenuSearch.css';const l = "_field_mo7y9_1", p = "_icon_mo7y9_5", _ = "_input_mo7y9_14", f = "_clear_mo7y9_31", o = {
+  field: l,
+  icon: p,
+  input: _,
+  clear: f
+}, k = ({ value: t, name: n, placeholder: s = "Søk", onChange: e, onClear: c }) => /* @__PURE__ */ m("div", { className: o.field, children: [
+  /* @__PURE__ */ i(
+    "input",
+    {
+      type: "search",
+      value: t,
+      name: n,
+      placeholder: s,
+      className: o.input,
+      onChange: e,
+      autoComplete: "off"
+    }
+  ),
+  /* @__PURE__ */ i(r, { name: "magnifying-glass", className: o.icon }),
+  c && /* @__PURE__ */ i(
+    a,
+    {
+      icon: "x-mark",
+      color: "secondary",
+      variant: "solid",
+      size: "custom",
+      className: o.clear,
+      onClick: c
+    }
+  )
+] });
 export {
-  r as MenuSearch
+  k as MenuSearch
 };

package/dist/components/Menu/MenuSearch.stories.js

@@ -1,14 +1,17 @@
-import { MenuSearch as e } from "./MenuSearch.js";
-const a = {
+import { fn as e } from "@storybook/test";
+import { MenuSearch as t } from "./MenuSearch.js";
+const r = {
   title: "Menu/MenuSearch",
-  component: e,
+  component: t,
   tags: ["autodocs"],
   parameters: {},
   args: {}
-}, o = {
-  args: {}
+}, n = {
+  args: {
+    onClear: e()
+  }
 };
 export {
-  o as Default,
-  a as default
+  n as Default,
+  r as default
 };

package/dist/components/Meta/MetaItem.d.ts

@@ -2,6 +2,7 @@ import { ElementType, ReactNode } from 'react';
 import { IconName } from '../Icon';
 import { MetaItemSize, MetaItemVariant } from './MetaItemBase';
 export interface MetaItemProps {
+    loading?: boolean;
     /**  Render as element */
     as?: ElementType;
     /** Meta size */
@@ -15,4 +16,4 @@ export interface MetaItemProps {
     /** classname */
     className?: string;
 }
-export declare const MetaItem: ({ size, variant, icon, children, ...rest }: MetaItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetaItem: ({ loading, size, variant, icon, children, ...rest }: MetaItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Meta/MetaItem.js

@@ -1,11 +1,12 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { MetaItemBase as x } from "./MetaItemBase.js";
-import { MetaItemLabel as M } from "./MetaItemLabel.js";
-import { MetaItemMedia as f } from "./MetaItemMedia.js";
-const j = ({ size: t = "xs", variant: e = "text", icon: m, children: o, ...a }) => /* @__PURE__ */ p(x, { variant: e, size: t, ...a, children: [
-  m && /* @__PURE__ */ r(f, { icon: m, size: t }),
-  /* @__PURE__ */ r(M, { variant: e, size: t, children: o })
-] });
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import { Skeleton as M } from "../Skeleton/Skeleton.js";
+import { MetaItemBase as a } from "./MetaItemBase.js";
+import { MetaItemLabel as s } from "./MetaItemLabel.js";
+import { MetaItemMedia as I } from "./MetaItemMedia.js";
+const j = ({ loading: m, size: t = "xs", variant: r = "text", icon: o, children: p, ...f }) => /* @__PURE__ */ e(a, { variant: r, size: t, ...f, children: /* @__PURE__ */ x(M, { loading: m, children: [
+  !m && o && /* @__PURE__ */ e(I, { size: t, icon: o }),
+  /* @__PURE__ */ e(s, { variant: r, size: t, children: p })
+] }) });
 export {
   j as MetaItem
 };

package/dist/components/Meta/MetaTimestamp.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { IconName } from '../Icon';
 import { MetaItemSize, MetaItemVariant } from './MetaItemBase';
 export interface MetaTimestampProps {
+    loading?: boolean;
     /** Meta size */
     size?: MetaItemSize;
     /** Variant */
@@ -13,4 +14,4 @@ export interface MetaTimestampProps {
     /** Label */
     children?: ReactNode;
 }
-export declare const MetaTimestamp: ({ size, variant, datetime, icon, children }: MetaTimestampProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetaTimestamp: ({ loading, size, variant, datetime, icon, children, }: MetaTimestampProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Meta/MetaTimestamp.js

@@ -1,11 +1,19 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { MetaItemBase as s } from "./MetaItemBase.js";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { Skeleton as f } from "../Skeleton/Skeleton.js";
+import { MetaItemBase as i } from "./MetaItemBase.js";
 import { MetaItemLabel as x } from "./MetaItemLabel.js";
 import { MetaItemMedia as M } from "./MetaItemMedia.js";
-const j = ({ size: t = "xs", variant: e = "text", datetime: o, icon: m, children: a }) => /* @__PURE__ */ p(s, { as: "time", variant: e, datetime: o, size: t, children: [
-  m && /* @__PURE__ */ r(M, { size: t, icon: m }),
-  /* @__PURE__ */ r(x, { variant: e, size: t, children: a })
-] });
+const j = ({
+  loading: m,
+  size: t = "xs",
+  variant: r = "text",
+  datetime: p,
+  icon: o,
+  children: a
+}) => /* @__PURE__ */ e(i, { as: "time", variant: r, datetime: p, size: t, children: /* @__PURE__ */ s(f, { loading: m, children: [
+  !m && o && /* @__PURE__ */ e(M, { size: t, icon: o }),
+  /* @__PURE__ */ e(x, { variant: r, size: t, children: a })
+] }) });
 export {
   j as MetaTimestamp
 };

package/dist/components/Searchbar/AutocompleteItem.js

@@ -1,26 +1,26 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
 import { DialogListItem as r } from "../Dialog/DialogListItem.js";
-import { ListItem as i } from "../List/ListItem.js";
-import { BookmarksListItem as s } from "../Bookmarks/BookmarksListItem.js";
+import { ListItem as n } from "../List/ListItem.js";
+import { BookmarksListItem as i } from "../Bookmarks/BookmarksListItem.js";
 import { ScopeListItem as e } from "./ScopeListItem.js";
-const I = ({ type: m, ...o }) => {
+const h = ({ type: m, ...t }) => {
   switch (m) {
     case "scope":
-      return /* @__PURE__ */ t(e, { ...o, shadow: "none" });
+      return /* @__PURE__ */ o(e, { ...t, shadow: "none", tabIndex: -1 });
     case "information":
-      return /* @__PURE__ */ t(e, { ...o, shadow: "none" });
+      return /* @__PURE__ */ o(e, { ...t, shadow: "none", tabIndex: -1 });
     case "bookmark":
-      return /* @__PURE__ */ t(s, { ...o, shadow: "none", size: "sm" });
+      return /* @__PURE__ */ o(i, { ...t, shadow: "none", size: "sm", tabIndex: -1 });
     case "dialog":
-      return /* @__PURE__ */ t(r, { ...o, shadow: "none", size: "sm" });
+      return /* @__PURE__ */ o(r, { ...t, shadow: "none", size: "sm", tabIndex: -1 });
     default:
-      return /* @__PURE__ */ t(i, { ...o, shadow: "none", size: "sm" });
+      return /* @__PURE__ */ o(n, { ...t, shadow: "none", size: "sm", tabIndex: -1 });
   }
 };
 export {
-  I as AutocompleteItem
+  h as AutocompleteItem
 };

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export type SkeletonVariant = 'circle' | 'text';
+interface SkeletonProps {
+    loading?: boolean;
+    variant?: SkeletonVariant;
+    size?: string;
+    children?: ReactNode;
+    className?: string;
+}
+export declare const Skeleton: ({ loading, size, variant, className, children }: SkeletonProps) => string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,9 @@
+import { jsx as n } from "react/jsx-runtime";
+import { c as r } from "../../index-L8X2o7IH.js";
+import '../../assets/Skeleton.css';const f = "_skelaton_10sb8_1", l = "_fade_10sb8_1", c = {
+  skelaton: f,
+  fade: l
+}, k = ({ loading: t = !1, size: s, variant: e = "text", className: o, children: a }) => t ? /* @__PURE__ */ n("span", { className: r(c.skelaton, o), "data-size": s, "data-loading": t, "data-variant": e, children: a }) : a;
+export {
+  k as Skeleton
+};

package/dist/components/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from './Skeleton';

package/dist/components/Skeleton/index.js

@@ -0,0 +1,4 @@
+import { Skeleton as r } from "./Skeleton.js";
+export {
+  r as Skeleton
+};

package/dist/components/Toolbar/Toolbar.js

@@ -48,6 +48,7 @@ const Y = ({
   };
   return /* @__PURE__ */ V(z, { open: i === "toolbar", onClose: M, children: [
     F && /* @__PURE__ */ c(G, { onToggle: () => t("menu", ""), expanded: (e == null ? void 0 : e.type) === "menu", ...F }),
+    T && /* @__PURE__ */ c(H, { ...T }),
     L.map((o) => /* @__PURE__ */ c(
       D,
       {
@@ -84,7 +85,6 @@ const Y = ({
         }))
       }
     ),
-    T && /* @__PURE__ */ c(H, { ...T }),
     N
   ] });
 };

package/dist/components/Toolbar/ToolbarSearch.d.ts

@@ -4,5 +4,6 @@ export interface ToolbarSearchProps {
     name: string;
     value: string;
     onChange: ChangeEventHandler;
+    onClear?: () => void;
 }
-export declare const ToolbarSearch: ({ value, name, placeholder, onChange }: ToolbarSearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolbarSearch: ({ value, name, placeholder, onChange, onClear }: ToolbarSearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Toolbar/ToolbarSearch.js

@@ -1,20 +1,40 @@
-import { jsx as t } from "react/jsx-runtime";
-import '../../assets/ToolbarSearch.css';const i = "_input_cwjz7_1", _ = "_button_cwjz7_11", l = "_close_cwjz7_16", r = "_icon_cwjz7_20", c = {
-  input: i,
-  button: _,
-  close: l,
-  icon: r
-}, p = ({ value: o, name: n, placeholder: s = "Søk", onChange: e }) => /* @__PURE__ */ t("div", { className: c.field, children: /* @__PURE__ */ t(
-  "input",
-  {
-    type: "search",
-    value: o,
-    name: n,
-    placeholder: s,
-    className: c.input,
-    onChange: e
-  }
-) });
+import { jsxs as r, jsx as c } from "react/jsx-runtime";
+import { Icon as a } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import "../../index-L8X2o7IH.js";
+import "react";
+import { IconButton as l } from "../Button/IconButton.js";
+import "../RootProvider/RootProvider.js";
+import '../../assets/ToolbarSearch.css';const m = "_field_dvezx_1", p = "_icon_dvezx_5", d = "_input_dvezx_14", _ = "_clear_dvezx_30", o = {
+  field: m,
+  icon: p,
+  input: d,
+  clear: _
+}, N = ({ value: e, name: n, placeholder: s = "Search", onChange: t, onClear: i }) => /* @__PURE__ */ r("div", { className: o.field, children: [
+  /* @__PURE__ */ c(
+    "input",
+    {
+      type: "search",
+      value: e,
+      name: n,
+      placeholder: s,
+      className: o.input,
+      onChange: t
+    }
+  ),
+  /* @__PURE__ */ c(a, { name: "magnifying-glass", className: o.icon }),
+  i && /* @__PURE__ */ c(
+    l,
+    {
+      icon: "x-mark",
+      color: "secondary",
+      variant: "solid",
+      size: "custom",
+      className: o.clear,
+      onClick: i
+    }
+  )
+] });
 export {
-  p as ToolbarSearch
+  N as ToolbarSearch
 };