enefit-design-system 0.2.15 → 0.4.0

package/dist/Accordion/Accordion.js

@@ -1,60 +1,66 @@
 "use client";
-import { j as i } from "../external/react/jsx-runtime.js";
+import { j as e } from "../external/react/jsx-runtime.js";
 import { useContext as z, useRef as _, useState as g, useEffect as d } from "react";
 import p from "../external/classnames/index.js";
-import "../output/variables/variables.css.js";
-import "../output/variables/animations.css.js";
-import "../output/variables/focus.css.js";
-import "../output/variables/shadows.css.js";
-import "../output/variables/transitions.css.js";
-import "../output/variables/typography.css.js";
-import "../output/variables/forms.css.js";
+/* empty css                                */
+/* empty css                                 */
+/* empty css                            */
+/* empty css                              */
+/* empty css                                  */
+/* empty css                                 */
+/* empty css                            */
 import T from "../output/icons/IconChevronDownAltSm.js";
-import "../Table/Table.css.js";
+/* empty css                 */
 import { AccordionContext as k } from "../AccordionGroup/AccordionGroup.js";
-import "./Accordion.css.js";
-import "../Select/SelectListOption.css.js";
-import "../Select/SelectList.css.js";
-import "../Autocomplete/Autocomplete.css.js";
+/* empty css              */
+/* empty css                             */
+/* empty css                       */
+/* empty css                               */
 import "../Button/Button.js";
 import "../Calendar/Calendar.js";
 import "../Checkbox/Checkbox.js";
 import "../CheckboxGroup/CheckboxGroup.js";
 import "../Choice/Choice.js";
 import "../ChoiceCard/ChoiceCard.js";
-import "../Color/Color.js";
 import "../DatePicker/DatePicker.js";
 import "../Dialog/Dialog.js";
 import y from "../Heading/Heading.js";
 import "../InfoHint/InfoHint.js";
-import "../Modal/Modal.css.js";
+/* empty css                 */
 import "react-dom";
 import { useFocusRing as B } from "../external/@react-aria/focus/dist/useFocusRing.js";
-import "../Tooltip/Tooltip.css.js";
-import "../Notification/Notification.css.js";
+/* empty css                     */
+/* empty css                               */
 import "../Phone/PhoneSelect.js";
-import "../Phone/Phone.css.js";
-import "../Popover/Popover.js";
+/* empty css                 */
+/* empty css                     */
 import "../Radio/Radio.js";
 import "../RadioGroup/RadioGroup.js";
 import "../Searchfield/Searchfield.js";
+import "../SegmentedControls/SegmentedControls.js";
+/* empty css                                       */
 import "../Select/Select.js";
-import "../Slider/SliderThumb.css.js";
-import "../Slider/Slider.css.js";
-import "../Stack/Stack.css.js";
+/* empty css                        */
+/* empty css                   */
+/* empty css                 */
 import "../Switch/Switch.js";
 import "../SwitchGroup/SwitchGroup.js";
 import "../Tabs/Tabs.js";
-import "../Tab/Tab.css.js";
+/* empty css             */
 import "../Textarea/Textarea.js";
 import "../Textfield/Textfield.js";
 import "../Toast/Toast.js";
-import "../Toast/ToastRegion.css.js";
+/* empty css                       */
 import "../Chart/Chart.js";
+/* empty css                 */
+/* empty css                   */
+/* empty css                                     */
+import "../ActionList/ActionList.js";
+import "../ActionListItem/ActionListItem.js";
 import { useId as $ } from "../external/@react-aria/utils/dist/useId.js";
 import { mergeProps as G } from "../external/@react-aria/utils/dist/mergeProps.js";
 import { usePress as J } from "../external/@react-aria/interactions/dist/usePress.js";
-const Uo = (j) => {
+const or = (j) => {
   const n = z(k), { mode: f, selectedKeys: o, setSelectedKeys: c } = n ?? {}, {
     id: t = "",
     title: N,
@@ -64,7 +70,7 @@ const Uo = (j) => {
     "aria-label": H,
     "aria-labelledby": L,
     "aria-describedby": P
-  } = j, l = _(null), m = _(null), { isFocusVisible: R, focusProps: A } = B(), [e, s] = g(v), [S, u] = g(0), b = $(), h = $();
+  } = j, m = _(null), l = _(null), { isFocusVisible: R, focusProps: A } = B(), [i, s] = g(v), [S, u] = g(0), b = $(), h = $();
   d(() => {
     n && (o != null && o.includes(t) && s(!0), !(o != null && o.includes(t)) && s(!1));
   }, [n]);
@@ -76,13 +82,13 @@ const Uo = (j) => {
     onPress: w
   });
   d(() => {
-    l.current && l.current.querySelectorAll(
+    m.current && m.current.querySelectorAll(
       'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
     ).forEach((a) => {
-      a.setAttribute("tabindex", e ? "0" : "-1");
+      a.setAttribute("tabindex", i ? "0" : "-1");
     });
-  }, [e]), d(() => {
-    const r = m.current;
+  }, [i]), d(() => {
+    const r = l.current;
     if (!r)
       return;
     u(r.scrollHeight);
@@ -92,49 +98,49 @@ const Uo = (j) => {
     return x.observe(r), () => {
       x.unobserve(r);
     };
-  }, [m]);
+  }, [l]);
   const O = p("eds-accordion", E), D = p("eds-accordion__button", {
-    "eds-accordion__button--open": e,
+    "eds-accordion__button--open": i,
     "eds-accordion__button--focused": R,
-    "eds-accordion__button--closed": !e
+    "eds-accordion__button--closed": !i
   }), F = p("eds-accordion__icon", {
-    "eds-accordion__icon--rotate": e
+    "eds-accordion__icon--rotate": i
   }), V = p("eds-accordion__panel", {
-    "eds-accordion__panel--closed": !e
+    "eds-accordion__panel--closed": !i
   });
-  return /* @__PURE__ */ i.jsxs("div", { className: O, children: [
-    /* @__PURE__ */ i.jsx(y, { variant: "h5", as: "h3", className: "eds-accordion__header", children: /* @__PURE__ */ i.jsxs(
+  return /* @__PURE__ */ e.jsxs("div", { className: O, children: [
+    /* @__PURE__ */ e.jsx(y, { variant: "h5", as: "h3", className: "eds-accordion__header", children: /* @__PURE__ */ e.jsxs(
       "button",
       {
         ...G(A, I),
         id: b,
         className: D,
-        "aria-expanded": e,
+        "aria-expanded": i,
         "aria-controls": h,
         "aria-label": H,
         "aria-labelledby": L,
         "aria-describedby": P,
         children: [
-          /* @__PURE__ */ i.jsx("span", { className: "eds-accordion__title", children: N }),
-          /* @__PURE__ */ i.jsx("span", { className: F, children: /* @__PURE__ */ i.jsx(T, { "aria-hidden": !0 }) })
+          /* @__PURE__ */ e.jsx("span", { className: "eds-accordion__title", children: N }),
+          /* @__PURE__ */ e.jsx("span", { className: F, children: /* @__PURE__ */ e.jsx(T, { "aria-hidden": !0 }) })
         ]
       }
     ) }),
-    /* @__PURE__ */ i.jsx(
+    /* @__PURE__ */ e.jsx(
       "div",
       {
         role: "region",
         id: h,
         className: V,
-        ref: l,
-        style: e ? { height: S } : { height: 0 },
+        ref: m,
+        style: i ? { height: S } : { height: 0 },
         "aria-labelledby": b,
-        "aria-hidden": !e,
-        children: /* @__PURE__ */ i.jsx("div", { className: "eds-accordion__panel-wrapper", ref: m, children: C })
+        "aria-hidden": !i,
+        children: /* @__PURE__ */ e.jsx("div", { className: "eds-accordion__panel-wrapper", ref: l, children: C })
       }
     )
   ] });
 };
 export {
-  Uo as default
+  or as default
 };

package/dist/AccordionGroup/AccordionGroup.js

@@ -2,7 +2,7 @@
 import { j as o } from "../external/react/jsx-runtime.js";
 import { createContext as d, useState as m, useEffect as u } from "react";
 import p from "../external/classnames/index.js";
-import "./AccordionGroup.css.js";
+/* empty css                   */
 const f = d(null), v = (c) => {
   const { mode: s = "single", selectedKeys: e = [], children: r, className: n } = c, [l, t] = m(e), i = {
     mode: s,

package/dist/ActionList/ActionList.js

@@ -0,0 +1,20 @@
+"use client";
+import { j as s } from "../external/react/jsx-runtime.js";
+import { createContext as c, useContext as r } from "react";
+/* empty css               */
+import a from "../external/classnames/index.js";
+const e = c("default"), x = () => r(e);
+function f({
+  children: o,
+  className: i,
+  variant: t = "default"
+}) {
+  const n = a("eds-action-list", i, {
+    [`eds-action-list-${t}`]: t
+  });
+  return /* @__PURE__ */ s.jsx(e.Provider, { value: t, children: /* @__PURE__ */ s.jsx("div", { className: n, children: o }) });
+}
+export {
+  f as default,
+  x as useActionListVariant
+};

package/dist/ActionListGroup/ActionListGroup.js

@@ -0,0 +1,8 @@
+import { j as o } from "../external/react/jsx-runtime.js";
+/* empty css                    */
+function r({ children: t }) {
+  return /* @__PURE__ */ o.jsx("div", { className: "eds-action-list-group", children: t });
+}
+export {
+  r as default
+};

package/dist/ActionListItem/ActionListItem.js

@@ -0,0 +1,80 @@
+"use client";
+import { j as e } from "../external/react/jsx-runtime.js";
+import { forwardRef as A, useRef as P } from "react";
+/* empty css                   */
+import n from "../external/classnames/index.js";
+import { useActionListVariant as C } from "../ActionList/ActionList.js";
+import { useFocusRing as F } from "../external/@react-aria/focus/dist/useFocusRing.js";
+import { useObjectRef as w } from "../external/@react-aria/utils/dist/useObjectRef.js";
+import { mergeProps as y } from "../external/@react-aria/utils/dist/mergeProps.js";
+import { useButton as B } from "../external/@react-aria/button/dist/useButton.js";
+const I = A((o, _) => {
+  const {
+    label: h,
+    labelWeight: c = "bold",
+    description: l,
+    iconLeft: r,
+    iconRight: m,
+    className: d,
+    element: t = "div"
+  } = o, f = C(), p = t === "button", u = t === "a", b = t === "label", { isFocusVisible: j, focusProps: $ } = F(), i = n("eds-action-list-item", d, {
+    [`eds-action-list-item-${f}`]: f,
+    "eds-action-list-item__focus": j,
+    "eds-action-list-item__interactive": p || u || b
+  }), N = n(
+    "eds-action-list-item__label",
+    d,
+    {
+      "eds-label-default-600": c === "bold",
+      "eds-label-default-400": c === "regular"
+    }
+  ), g = n(
+    "eds-action-list-item__description",
+    "eds-text-line-small-400"
+  ), a = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    r && /* @__PURE__ */ e.jsx("span", { className: "eds-action-list-item__leading", children: r }),
+    /* @__PURE__ */ e.jsxs("span", { className: "eds-action-list-item__text-section", children: [
+      /* @__PURE__ */ e.jsx("span", { className: N, children: h }),
+      l && /* @__PURE__ */ e.jsx("span", { className: g, children: l })
+    ] }),
+    m && /* @__PURE__ */ e.jsx("span", { className: "eds-action-list-item__trailing", children: m })
+  ] }), R = w(_), L = P(null), s = R || L, { buttonProps: v } = B(
+    { elementType: t, ...o },
+    s
+  ), x = y(v, $);
+  return p ? /* @__PURE__ */ e.jsx(
+    "button",
+    {
+      ...x,
+      ref: s,
+      className: i,
+      children: a
+    }
+  ) : u ? /* @__PURE__ */ e.jsx(
+    "a",
+    {
+      ...x,
+      ref: s,
+      className: i,
+      children: a
+    }
+  ) : b ? /* @__PURE__ */ e.jsx(
+    "label",
+    {
+      ref: s,
+      className: i,
+      children: a
+    }
+  ) : /* @__PURE__ */ e.jsx(
+    "div",
+    {
+      ref: s,
+      className: i,
+      children: a
+    }
+  );
+});
+I.displayName = "ActionListItem";
+export {
+  I as default
+};

package/dist/Autocomplete/Autocomplete.js

@@ -2,55 +2,61 @@
 import { j as e } from "../external/react/jsx-runtime.js";
 import { useRef as s, useEffect as Q } from "react";
 import r from "../external/classnames/index.js";
-import "../output/variables/variables.css.js";
-import "../output/variables/animations.css.js";
-import "../output/variables/focus.css.js";
-import "../output/variables/shadows.css.js";
-import "../output/variables/transitions.css.js";
-import "../output/variables/typography.css.js";
-import "../output/variables/forms.css.js";
+/* empty css                                */
+/* empty css                                 */
+/* empty css                            */
+/* empty css                              */
+/* empty css                                  */
+/* empty css                                 */
+/* empty css                            */
 import U from "../output/icons/IconCrossSm.js";
-import "../Table/Table.css.js";
+/* empty css                 */
 import "../AccordionGroup/AccordionGroup.js";
-import "../Accordion/Accordion.css.js";
+/* empty css                         */
 import W from "../Select/SelectList.js";
-import "./Autocomplete.css.js";
+/* empty css                 */
 import "../Button/Button.js";
 import "../Calendar/Calendar.js";
 import "../Checkbox/Checkbox.js";
 import "../CheckboxGroup/CheckboxGroup.js";
 import "../Choice/Choice.js";
 import "../ChoiceCard/ChoiceCard.js";
-import "../Color/Color.js";
 import "../DatePicker/DatePicker.js";
 import "../Dialog/Dialog.js";
 import "../InfoHint/InfoHint.js";
 import X from "../Label/Label.js";
-import "../Modal/Modal.css.js";
+/* empty css                 */
 import "react-dom";
 import { useFocusRing as v } from "../external/@react-aria/focus/dist/useFocusRing.js";
-import "../Tooltip/Tooltip.css.js";
-import "../Notification/Notification.css.js";
+/* empty css                     */
+/* empty css                               */
 import "../Phone/PhoneSelect.js";
-import "../Phone/Phone.css.js";
+/* empty css                 */
 import Y from "../Popover/Popover.js";
 import "../Radio/Radio.js";
 import "../RadioGroup/RadioGroup.js";
 import "../Searchfield/Searchfield.js";
+import "../SegmentedControls/SegmentedControls.js";
+/* empty css                                       */
 import "../Select/Select.js";
-import "../Slider/SliderThumb.css.js";
-import "../Slider/Slider.css.js";
+/* empty css                        */
+/* empty css                   */
 import N from "../Stack/Stack.js";
 import "../Switch/Switch.js";
 import "../SwitchGroup/SwitchGroup.js";
 import "../Tabs/Tabs.js";
-import "../Tab/Tab.css.js";
-import c from "../Text/Text.js";
+/* empty css             */
+import m from "../Text/Text.js";
 import "../Textarea/Textarea.js";
 import "../Textfield/Textfield.js";
 import "../Toast/Toast.js";
-import "../Toast/ToastRegion.css.js";
+/* empty css                       */
 import "../Chart/Chart.js";
+/* empty css                 */
+/* empty css                   */
+/* empty css                                     */
+import "../ActionList/ActionList.js";
+import "../ActionListItem/ActionListItem.js";
 import { useFilter as Z } from "../external/@react-aria/i18n/dist/useFilter.js";
 import { useComboBoxState as ee } from "../external/@react-stately/combobox/dist/useComboBoxState.js";
 import { useComboBox as te } from "../external/@react-aria/combobox/dist/useComboBox.js";
@@ -58,8 +64,8 @@ import { useSearchFieldState as oe } from "../external/@react-stately/searchfiel
 import { useSearchField as se } from "../external/@react-aria/searchfield/dist/useSearchField.js";
 import { useButton as re } from "../external/@react-aria/button/dist/useButton.js";
 import { mergeProps as P } from "../external/@react-aria/utils/dist/mergeProps.js";
-const pt = (o) => {
-  const { contains: B } = Z({ sensitivity: "base" }), t = ee({ ...o, defaultFilter: B }), i = s(null), m = s(null), p = s(null), n = s(null), u = s(null), d = s(null), { isOpen: F = !1, isNonModal: R = !1, isDisabled: S = !1 } = o, {
+const xt = (o) => {
+  const { contains: B } = Z({ sensitivity: "base" }), t = ee({ ...o, defaultFilter: B }), i = s(null), p = s(null), c = s(null), n = s(null), u = s(null), d = s(null), { isOpen: F = !1, isNonModal: R = !1, isDisabled: S = !1 } = o, {
     descriptionProps: f,
     inputProps: C,
     listBoxProps: I,
@@ -71,8 +77,8 @@ const pt = (o) => {
     {
       ...o,
       inputRef: i,
-      listBoxRef: m,
-      popoverRef: p
+      listBoxRef: p,
+      popoverRef: c
     },
     t
   );
@@ -127,7 +133,7 @@ const pt = (o) => {
               j && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
                 /* @__PURE__ */ e.jsx("span", { className: "eds-autocomplete__label-suffix-separator" }),
                 /* @__PURE__ */ e.jsx(
-                  c,
+                  m,
                   {
                     variant: "line",
                     italic: !0,
@@ -178,14 +184,14 @@ const pt = (o) => {
           "div",
           {
             ...M,
-            children: /* @__PURE__ */ e.jsx(c, { variant: "line", size: "small", className: "eds-autocomplete__messages-error", children: l })
+            children: /* @__PURE__ */ e.jsx(m, { variant: "line", size: "small", className: "eds-autocomplete__messages-error", children: l })
           }
         ),
         a && /* @__PURE__ */ e.jsx(
           "div",
           {
             ...f,
-            children: /* @__PURE__ */ e.jsx(c, { variant: "line", size: "small", className: G, children: a })
+            children: /* @__PURE__ */ e.jsx(m, { variant: "line", size: "small", className: G, children: a })
           }
         )
       ] })
@@ -193,7 +199,7 @@ const pt = (o) => {
     t.isOpen && /* @__PURE__ */ e.jsx(
       Y,
       {
-        popoverRef: p,
+        popoverRef: c,
         triggerRef: n,
         portalContainer: d.current,
         state: t,
@@ -205,7 +211,7 @@ const pt = (o) => {
           W,
           {
             ...I,
-            listBoxRef: m,
+            listBoxRef: p,
             state: t
           }
         )
@@ -214,5 +220,5 @@ const pt = (o) => {
   ] });
 };
 export {
-  pt as default
+  xt as default
 };

package/dist/Avatar/Avatar.js

@@ -0,0 +1,30 @@
+import { j as s } from "../external/react/jsx-runtime.js";
+import t from "../external/classnames/index.js";
+/* empty css           */
+import o from "../output/icons/IconUserSm.js";
+function u({
+  label: l,
+  className: r = "",
+  variant: e = "a",
+  size: a = "default"
+}) {
+  const n = t(
+    "eds-avatar",
+    {
+      [`eds-avatar-${a}`]: a,
+      [`eds-avatar-${e}`]: e,
+      "eds-avatar__icon-only": !l
+    },
+    r
+  ), d = t("eds-avatar__label", {
+    [`eds-avatar__label-${a}`]: a,
+    "eds-label-minimum-600": a === "icon-sm",
+    "eds-label-tiny-600": a === "small",
+    "eds-label-default-600": a === "default" || "icon-lg",
+    "eds-label-large-600": a === "icon-xl"
+  });
+  return /* @__PURE__ */ s.jsx("span", { className: n, children: l ? /* @__PURE__ */ s.jsx("span", { className: d, children: l }) : /* @__PURE__ */ s.jsx("span", { className: "eds-avatar__icon", children: /* @__PURE__ */ s.jsx(o, { "aria-hidden": "true" }) }) });
+}
+export {
+  u as default
+};

package/dist/Badge/Badge.js

@@ -0,0 +1,92 @@
+"use client";
+import { j as r } from "../external/react/jsx-runtime.js";
+import m from "../external/classnames/index.js";
+/* empty css          */
+/* empty css                                */
+/* empty css                                 */
+/* empty css                            */
+/* empty css                              */
+/* empty css                                  */
+/* empty css                                 */
+/* empty css                            */
+import p from "../output/icons/IconAlertTriangleXs.js";
+import n from "../output/icons/IconCircleCheckXs.js";
+import c from "../output/icons/IconClockHourXs.js";
+/* empty css                 */
+import "react";
+import "../AccordionGroup/AccordionGroup.js";
+/* empty css                         */
+/* empty css                             */
+/* empty css                       */
+/* empty css                               */
+import "../Button/Button.js";
+import "../Calendar/Calendar.js";
+import "../Checkbox/Checkbox.js";
+import "../CheckboxGroup/CheckboxGroup.js";
+import "../Choice/Choice.js";
+import "../ChoiceCard/ChoiceCard.js";
+import "../DatePicker/DatePicker.js";
+import "../Dialog/Dialog.js";
+import "../InfoHint/InfoHint.js";
+/* empty css                 */
+import "react-dom";
+/* empty css                     */
+/* empty css                               */
+import "../Phone/PhoneSelect.js";
+/* empty css                 */
+/* empty css                     */
+import "../Radio/Radio.js";
+import "../RadioGroup/RadioGroup.js";
+import "../Searchfield/Searchfield.js";
+import "../SegmentedControls/SegmentedControls.js";
+/* empty css                                       */
+import "../Select/Select.js";
+/* empty css                        */
+/* empty css                   */
+/* empty css                 */
+import "../Switch/Switch.js";
+import "../SwitchGroup/SwitchGroup.js";
+import "../Tabs/Tabs.js";
+/* empty css             */
+import "../Textarea/Textarea.js";
+import "../Textfield/Textfield.js";
+import "../Toast/Toast.js";
+/* empty css                       */
+import "../Chart/Chart.js";
+/* empty css                   */
+/* empty css                                     */
+import "../ActionList/ActionList.js";
+import "../ActionListItem/ActionListItem.js";
+const s = {
+  success: /* @__PURE__ */ r.jsx(n, { "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ r.jsx(p, { "aria-hidden": "true" }),
+  alert: /* @__PURE__ */ r.jsx(p, { "aria-hidden": "true" }),
+  info: /* @__PURE__ */ r.jsx(c, { "aria-hidden": "true" })
+};
+function gr({
+  label: e,
+  iconLeft: i,
+  className: a = "",
+  variant: o = "neutral",
+  size: t = "default"
+}) {
+  const l = m(
+    "eds-badge",
+    {
+      [`eds-badge-${t}`]: t,
+      [`eds-badge-${o}`]: o
+    },
+    a
+  ), d = m("eds-badge__label", {
+    [`eds-badge__label-${t}`]: t,
+    "eds-label-small-400": t === "default",
+    "eds-label-tiny-400": t === "small"
+  });
+  return /* @__PURE__ */ r.jsxs("span", { className: l, children: [
+    i !== !1 && (i ?? s[o]) && /* @__PURE__ */ r.jsx("span", { className: "eds-badge__icon", children: i ?? s[o] }),
+    /* @__PURE__ */ r.jsx("span", { className: d, children: e })
+  ] });
+}
+export {
+  gr as default
+};

package/dist/Button/Button.js

@@ -5,7 +5,7 @@ import { mergeProps as b } from "../external/@react-aria/utils/dist/mergeProps.j
 import { useObjectRef as E } from "../external/@react-aria/utils/dist/useObjectRef.js";
 import x from "../external/classnames/index.js";
 import z from "../Tooltip/Tooltip.js";
-import "./Button.css.js";
+/* empty css           */
 import { useButton as D } from "../external/@react-aria/button/dist/useButton.js";
 import { useFocusRing as O } from "../external/@react-aria/focus/dist/useFocusRing.js";
 const U = I((d, $) => {