@payfit/unity-components 1.1.0 → 1.2.0

package/dist/esm/components/text-area/TextArea.js

@@ -1,15 +1,15 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
-import { uyTv as w } from "@payfit/unity-themes";
-import { TextArea as M } from "react-aria-components";
-import { useIntl as z } from "react-intl";
-import { useResizable as L } from "../../hooks/use-resizable.js";
-import { Icon as D } from "../icon/Icon.js";
-import { Spinner as N } from "../spinner/Spinner.js";
-const W = w({
+import { forwardRef as x } from "react";
+import { uyTv as h } from "@payfit/unity-themes";
+import { TextArea as v } from "react-aria-components";
+import { useIntl as w } from "react-intl";
+import { useResizable as M } from "../../hooks/use-resizable.js";
+import { Icon as z } from "../icon/Icon.js";
+import { Spinner as L } from "../spinner/Spinner.js";
+const D = h({
   slots: {
-    base: "uy:flex uy:border uy:border-solid uy:rounded-100 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active uy:overflow-hidden uy:relative",
-    inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-100",
+    base: "uy:flex uy:border uy:border-solid uy:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active uy:overflow-hidden uy:relative",
+    inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75",
     input: "uy:flex-grow uy:flex-shrink uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:resize-none",
     state: "uy:flex uy:gap-50 uy:flex-shrink-0 uy:basis-250",
     resizeHandle: "uy:absolute uy:bottom-25 uy:right-25 uy:w-100 uy:h-100 uy:cursor-se-resize uy:flex uy:items-center uy:justify-center"
@@ -56,38 +56,38 @@ const W = w({
     isDisabled: !1,
     isReadOnly: !1
   }
-}), k = v(
+}), N = x(
   ({
     isInvalid: n,
     isLoading: s,
     isDisabled: a,
     isReadOnly: r,
     isResizable: i = !1,
-    ...y
-  }, b) => {
-    const o = z(), { containerRef: l, handleResizeStart: m } = L({
+    ...d
+  }, f) => {
+    const o = w(), { containerRef: l, handleResizeStart: y } = M({
       isDisabled: !i || a || r
-    }), { base: c, inputWrapper: p, input: g, state: x, resizeHandle: h } = W({
+    }), { base: b, inputWrapper: m, input: c, state: p, resizeHandle: g } = D({
       isInvalid: n,
       isDisabled: a,
       isReadOnly: r
     });
-    return /* @__PURE__ */ t("div", { ref: l, className: c(), children: [
-      /* @__PURE__ */ t("div", { className: p(), children: [
+    return /* @__PURE__ */ t("div", { ref: l, className: b(), children: [
+      /* @__PURE__ */ t("div", { className: m(), children: [
         /* @__PURE__ */ e(
-          M,
+          v,
           {
             "data-dd-privacy": "mask",
-            ...y,
-            ref: b,
-            className: g(),
+            ...d,
+            ref: f,
+            className: c(),
             "aria-busy": s,
             readOnly: r
           }
         ),
-        /* @__PURE__ */ t("div", { className: x(), children: [
+        /* @__PURE__ */ t("div", { className: p(), children: [
           s && /* @__PURE__ */ e(
-            N,
+            L,
             {
               color: "inherit",
               size: "small",
@@ -98,7 +98,7 @@ const W = w({
             }
           ),
           n && /* @__PURE__ */ e(
-            D,
+            z,
             {
               src: "WarningCircleOutlined",
               color: "content.form.invalid",
@@ -113,8 +113,8 @@ const W = w({
       i && !a && !r && /* @__PURE__ */ e(
         "div",
         {
-          className: h(),
-          onMouseDown: m,
+          className: g(),
+          onMouseDown: y,
           role: "button",
           tabIndex: 0,
           "aria-label": o.formatMessage({
@@ -122,8 +122,7 @@ const W = w({
             defaultMessage: "Resize textarea"
           }),
           onKeyDown: (u) => {
-            var d, f;
-            (u.key === "Enter" || u.key === " ") && (u.preventDefault(), (f = (d = l.current) == null ? void 0 : d.querySelector("textarea")) == null || f.focus());
+            (u.key === "Enter" || u.key === " ") && (u.preventDefault(), l.current?.querySelector("textarea")?.focus());
           },
           children: /* @__PURE__ */ t(
             "svg",
@@ -156,8 +155,8 @@ const W = w({
     ] });
   }
 );
-k.displayName = "TextArea";
+N.displayName = "TextArea";
 export {
-  k as TextArea,
-  W as textArea
+  N as TextArea,
+  D as textArea
 };

package/dist/esm/components/text-field/TextField.d.ts

@@ -1,6 +1,6 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
 import { ForwardedRef, HTMLAttributes, JSX, ReactNode } from 'react';
 import { FieldPath, FieldValues } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod';
 import { Schema } from '../../hooks/use-form.types.js';
 import { InputProps } from '../input/Input.js';
 import { LabelProps } from '../label/Label.js';
@@ -30,7 +30,7 @@ interface TextFieldWithTextAreaProps<TFieldValues extends FieldValues = FieldVal
     type?: never;
 }
 export type TextFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = TextFieldWithInputProps<TFieldValues, TName> | TextFieldWithTextAreaProps<TFieldValues, TName>;
-type TextFieldComponent = (<TSchema extends Schema>(props: TextFieldProps<ZodInfer<TSchema>> & {
+type TextFieldComponent = (<TSchema extends Schema>(props: TextFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
     ref?: ForwardedRef<HTMLInputElement | HTMLTextAreaElement>;
 }) => JSX.Element) & {
     displayName?: string;

package/dist/esm/components/toggle-switch-field/ToggleSwitchField.d.ts

@@ -1,6 +1,6 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
 import { ForwardedRef, JSX } from 'react';
 import { FieldPath, FieldValues } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod';
 import { Schema } from '../../hooks/use-form.types.js';
 interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
     /** The name of the field, which should match the form schema. */
@@ -23,7 +23,7 @@ interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName exten
     isLabelSrOnly?: boolean;
 }
 export type ToggleSwitchFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName>;
-type ToggleSwitchFieldComponent = (<TSchema extends Schema>(props: ToggleSwitchFieldProps<ZodInfer<TSchema>> & {
+type ToggleSwitchFieldComponent = (<TSchema extends Schema>(props: ToggleSwitchFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
     ref?: ForwardedRef<HTMLLabelElement>;
 }) => JSX.Element) & {
     displayName?: string;

package/dist/esm/components/toggle-switch-field/ToggleSwitchField.js

@@ -49,7 +49,10 @@ function y({
   );
 }
 const j = u(function(r, e) {
-  return y(r, e);
+  return y(
+    r,
+    e
+  );
 });
 j.displayName = "ToggleSwitchField";
 export {

package/dist/esm/components/toggle-switch-group/ToggleSwitchGroup.js

@@ -1,99 +1,99 @@
-import { jsxs as A, jsx as d } from "react/jsx-runtime";
-import { forwardRef as B, useState as H, useId as J, useRef as K, useCallback as Q, isValidElement as V, cloneElement as N, Children as U } from "react";
-import { uyTv as W } from "@payfit/unity-themes";
-import { Label as X } from "../label/Label.js";
-import { Text as R } from "../text/Text.js";
-const Y = W({
+import { jsxs as k, jsx as t } from "react/jsx-runtime";
+import { forwardRef as q, useState as z, useId as A, useRef as H, useCallback as J, isValidElement as B, cloneElement as w, Children as K } from "react";
+import { uyTv as Q } from "@payfit/unity-themes";
+import { Label as U } from "../label/Label.js";
+import { Text as j } from "../text/Text.js";
+const W = Q({
   base: "uy:flex uy:flex-col uy:gap-50"
 });
-function Z(n) {
-  if (!V(n)) return !1;
-  const r = n.props;
-  return typeof r == "object" && r !== null && "value" in r && typeof r.value == "string";
+function X(i) {
+  if (!B(i)) return !1;
+  const o = i.props;
+  return typeof o == "object" && o !== null && "value" in o && typeof o.value == "string";
 }
-const _ = B(
+const Y = q(
   ({
-    label: n,
-    helperText: r,
-    feedbackText: l,
-    isDisabled: b,
-    isReadOnly: G,
-    isInvalid: c,
-    isRequired: S,
-    children: I,
-    requiredVariant: h,
-    value: g,
-    defaultValue: M,
-    onChange: a,
-    onFocus: u,
-    onBlur: p,
-    onFocusChange: t,
-    ...O
-  }, $) => {
-    const f = g !== void 0, [x, D] = H(
-      M ?? []
-    ), s = f ? g : x, w = J(), j = r ? `${w}-helper` : void 0, y = c && l ? `${w}-feedback` : void 0, L = [j, y].filter(Boolean).join(" ") || void 0, E = K(!1), P = (e) => {
-      E.current = !0, u == null || u(e), t == null || t(!0);
-    }, k = (e) => {
-      E.current = !1, p == null || p(e), t == null || t(!1);
-    }, q = Q(
+    label: i,
+    helperText: o,
+    feedbackText: r,
+    isDisabled: f,
+    isReadOnly: E,
+    isInvalid: a,
+    isRequired: y,
+    children: N,
+    requiredVariant: R,
+    value: m,
+    defaultValue: V,
+    onChange: g,
+    onFocus: C,
+    onBlur: G,
+    onFocusChange: h,
+    ...I
+  }, F) => {
+    const c = m !== void 0, [M, O] = z(
+      V ?? []
+    ), n = c ? m : M, v = A(), b = o ? `${v}-helper` : void 0, d = a && r ? `${v}-feedback` : void 0, $ = [b, d].filter(Boolean).join(" ") || void 0, S = H(!1), x = (e) => {
+      S.current = !0, C?.(e), h?.(!0);
+    }, D = (e) => {
+      S.current = !1, G?.(e), h?.(!1);
+    }, L = J(
       (e) => {
-        let i;
-        s.includes(e) ? i = s.filter((o) => o !== e) : i = [...s, e], f || D(i), a == null || a(i);
+        let l;
+        n.includes(e) ? l = n.filter((s) => s !== e) : l = [...n, e], c || O(l), g?.(l);
       },
-      [s, f, a]
-    ), z = () => U.map(I, (e, i) => {
-      if (!Z(e)) return e;
-      const o = e, m = o.props, v = m.value;
-      return N(o, {
-        key: o.key ?? i,
-        isSelected: s.includes(v),
-        isDisabled: b ?? m.isDisabled,
-        isReadOnly: G ?? m.isReadOnly,
-        value: v,
+      [n, c, g]
+    ), P = () => K.map(N, (e, l) => {
+      if (!X(e)) return e;
+      const s = e, u = s.props, p = u.value;
+      return w(s, {
+        key: s.key ?? l,
+        isSelected: n.includes(p),
+        isDisabled: f ?? u.isDisabled,
+        isReadOnly: E ?? u.isReadOnly,
+        value: p,
         onChange: () => {
-          q(v);
+          L(p);
         }
       });
     });
-    return /* @__PURE__ */ A(
+    return /* @__PURE__ */ k(
       "fieldset",
       {
-        ...O,
-        ref: $,
-        className: Y(),
-        "aria-describedby": L,
-        "aria-invalid": c || void 0,
-        "aria-required": S || void 0,
-        disabled: b,
-        onFocus: P,
-        onBlur: k,
+        ...I,
+        ref: F,
+        className: W(),
+        "aria-describedby": $,
+        "aria-invalid": a || void 0,
+        "aria-required": y || void 0,
+        disabled: f,
+        onFocus: x,
+        onBlur: D,
         children: [
-          /* @__PURE__ */ d("legend", { className: "uy:mb-50", children: /* @__PURE__ */ d(X, { isRequired: S, requiredVariant: h, children: n }) }),
-          r && /* @__PURE__ */ d(
-            R,
+          /* @__PURE__ */ t("legend", { className: "uy:mb-50", children: /* @__PURE__ */ t(U, { isRequired: y, requiredVariant: R, children: i }) }),
+          o && /* @__PURE__ */ t(
+            j,
             {
-              id: j,
+              id: b,
               variant: "bodySmall",
               color: "content.neutral.low",
               slot: "description",
-              children: r
+              children: o
             }
           ),
-          /* @__PURE__ */ d("div", { className: "uy:mt-100 uy:flex uy:flex-col uy:gap-150 uy:py-25", children: z() }),
-          c && l && (typeof l == "string" ? /* @__PURE__ */ d(
-            R,
+          /* @__PURE__ */ t("div", { className: "uy:mt-100 uy:flex uy:flex-col uy:gap-150 uy:py-25", children: P() }),
+          a && r && (typeof r == "string" ? /* @__PURE__ */ t(
+            j,
             {
-              id: y,
+              id: d,
               variant: "bodySmallStrong",
               color: "content.form.invalid",
               slot: "errorMessage",
-              children: l
+              children: r
             }
-          ) : V(l) && N(
-            l,
+          ) : B(r) && w(
+            r,
             {
-              id: y,
+              id: d,
               slot: "errorMessage"
             }
           ))
@@ -102,8 +102,8 @@ const _ = B(
     );
   }
 );
-_.displayName = "ToggleSwitchGroup";
+Y.displayName = "ToggleSwitchGroup";
 export {
-  _ as ToggleSwitchGroup,
-  Y as toggleSwitchGroup
+  Y as ToggleSwitchGroup,
+  W as toggleSwitchGroup
 };

package/dist/esm/components/toggle-switch-group-field/ToggleSwitchGroupField.d.ts

@@ -1,6 +1,6 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
 import { ForwardedRef, JSX, PropsWithChildren, ReactNode } from 'react';
 import { FieldPath, FieldValues } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod';
 import { Schema } from '../../hooks/use-form.types.js';
 import { LabelProps } from '../label/Label.js';
 import { ToggleSwitchGroupProps } from '../toggle-switch-group/ToggleSwitchGroup.js';
@@ -33,7 +33,7 @@ interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName exten
     onFocusChange?: (isFocused: boolean) => void;
 }
 export type ToggleSwitchGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName>;
-type ToggleSwitchGroupFieldComponent = (<TSchema extends Schema>(props: ToggleSwitchGroupFieldProps<ZodInfer<TSchema>> & {
+type ToggleSwitchGroupFieldComponent = (<TSchema extends Schema>(props: ToggleSwitchGroupFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
     ref?: ForwardedRef<HTMLFieldSetElement>;
 }) => JSX.Element) & {
     displayName?: string;

package/dist/esm/components/toggle-switch-group-field/ToggleSwitchGroupField.js

@@ -1,59 +1,63 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as T, jsx as i } from "react/jsx-runtime";
 import { forwardRef as x, useMemo as G } from "react";
 import { useFormContext as R } from "react-hook-form";
-import { FormField as q } from "../form-field/FormField.js";
-import { FormControl as y } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as P } from "../form-field/parts/FormFeedbackText.js";
-import { isFieldRequired as j } from "../form-field/utils/isFieldRequired.js";
-import { useUnityFormProvider as v } from "../form/Form.context.js";
-import { ToggleSwitchGroup as C } from "../toggle-switch-group/ToggleSwitchGroup.js";
-function U({
+import { createSchemaAdapter as q } from "../../utils/createSchemaAdapter.js";
+import { FormField as y } from "../form-field/FormField.js";
+import { FormControl as P } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as j } from "../form-field/parts/FormFeedbackText.js";
+import { isFieldRequired as v } from "../form-field/utils/isFieldRequired.js";
+import { useUnityFormProvider as C } from "../form/Form.context.js";
+import { ToggleSwitchGroup as U } from "../toggle-switch-group/ToggleSwitchGroup.js";
+function b({
   name: o,
   label: r,
-  defaultValue: i,
+  defaultValue: e,
   helperText: m,
   contextualLink: c,
-  isRequired: s,
-  isInvalid: p,
+  isRequired: p,
+  isInvalid: s,
   isLoading: l,
   isDisabled: n,
-  isReadOnly: u,
-  requiredVariant: d,
+  isReadOnly: d,
+  requiredVariant: u,
   children: f,
   ...F
-}, g) {
-  const { control: h, watch: w } = R(), { schema: t } = v(), S = G(
-    () => j(t, o),
+}, h) {
+  const { control: g, watch: a } = R(), { schema: t } = C(), w = G(
+    () => v(q(t), o),
     [t, o]
-  ), T = w(o);
-  return /* @__PURE__ */ a(q, { control: h, name: o, ...{
-    isInvalid: p,
+  ), S = a(o);
+  return /* @__PURE__ */ T(y, { control: g, name: o, ...{
+    isInvalid: s,
     isLoading: l,
     isDisabled: n,
-    isReadOnly: u
+    isReadOnly: d
   }, children: [
-    /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(
-      C,
+    /* @__PURE__ */ i(P, { children: /* @__PURE__ */ i(
+      U,
       {
-        ref: g,
+        ref: h,
         label: r,
-        defaultValue: i,
-        value: T,
+        defaultValue: e,
+        value: S,
         helperText: m,
-        requiredVariant: d,
+        requiredVariant: u,
         ...F,
-        isRequired: S ?? s,
+        isRequired: w ?? p,
         children: f
       }
     ) }),
-    /* @__PURE__ */ e(P, {}),
+    /* @__PURE__ */ i(j, {}),
     c
   ] });
 }
-const b = x(function(r, i) {
-  return U(r, i);
+const k = x(function(r, e) {
+  return b(
+    r,
+    e
+  );
 });
-b.displayName = "ToggleSwitchGroupField";
+k.displayName = "ToggleSwitchGroupField";
 export {
-  b as ToggleSwitchGroupField
+  k as ToggleSwitchGroupField
 };

package/dist/esm/hooks/use-form.d.ts

@@ -1,13 +1,13 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
 import { JSX, PropsWithChildren } from 'react';
 import { UseFormProps as UseHookFormProps, UseFormReturn as UseHookFormReturn } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod';
 import { FormFieldProps } from '../components/form-field/FormField.js';
 import { FormProps } from '../components/form/Form.js';
 import { Schema } from './use-form.types.js';
 export type UseUnityFormReturn<TSchema extends Schema> = {
-    methods: UseHookFormReturn<ZodInfer<TSchema>>;
-    Form: (props: Omit<FormProps<TSchema>, 'form' | 'schema'>) => JSX.Element;
-    FormField: (props: PropsWithChildren<Omit<FormFieldProps<ZodInfer<TSchema>>, 'control'>>) => JSX.Element;
+    methods: UseHookFormReturn<StandardSchemaV1.InferInput<TSchema>, any, StandardSchemaV1.InferOutput<TSchema>>;
+    Form: (props: Omit<FormProps<TSchema, StandardSchemaV1.InferInput<TSchema>, StandardSchemaV1.InferOutput<TSchema>>, 'form' | 'schema'>) => JSX.Element;
+    FormField: (props: PropsWithChildren<Omit<FormFieldProps<StandardSchemaV1.InferOutput<TSchema>>, 'control'>>) => JSX.Element;
 };
 /**
  * A hook to create `Form` and `FormField` components that are bound to a specific schema definition and form controller. The resulting components will have full type-safety based on the provided schema type.
@@ -45,4 +45,4 @@ export type UseUnityFormReturn<TSchema extends Schema> = {
  * @remarks
  * [API]() • [Demo]()
  */
-export declare function useUnityForm<TSchema extends Schema>(schema: TSchema, options?: Omit<UseHookFormProps<ZodInfer<TSchema>>, 'resolver'>): UseUnityFormReturn<TSchema>;
+export declare function useUnityForm<TSchema extends Schema>(schema: TSchema, options?: Omit<UseHookFormProps<StandardSchemaV1.InferInput<TSchema>, any, StandardSchemaV1.InferOutput<TSchema>>, 'resolver'>): UseUnityFormReturn<TSchema>;

package/dist/esm/hooks/use-form.types.d.ts

@@ -1,3 +1,3 @@
-import { ZodType, ZodTypeDef } from 'zod';
+import { StandardSchemaV1 } from '@standard-schema/spec';
 export type TFormValues = Record<string, unknown>;
-export type Schema = ZodType<TFormValues, ZodTypeDef, TFormValues>;
+export type Schema = StandardSchemaV1<TFormValues>;

package/dist/esm/hooks/use-resizable.js

@@ -10,35 +10,34 @@ function x({
     startY: 0,
     startWidth: 0,
     startHeight: 0
-  }), l = (r) => {
-    var s;
+  }), l = (s) => {
     if (c) return;
-    r.preventDefault();
-    const n = (s = e.current) == null ? void 0 : s.querySelector("textarea");
-    !e.current || !n || o({
+    s.preventDefault();
+    const r = e.current?.querySelector("textarea");
+    !e.current || !r || o({
       isResizing: !0,
-      startX: r.clientX,
-      startY: r.clientY,
+      startX: s.clientX,
+      startY: s.clientY,
       startWidth: e.current.offsetWidth,
-      startHeight: n.offsetHeight
+      startHeight: r.offsetHeight
     });
   };
   return g(() => {
     if (!t.isResizing) return;
-    const r = (s) => {
+    const s = (n) => {
       if (!e.current) return;
       const u = e.current.querySelector("textarea");
       if (!u) return;
-      const d = s.clientX - t.startX, f = s.clientY - t.startY, h = Math.max(t.startWidth + d, i ?? 0), m = Math.max(
+      const d = n.clientX - t.startX, f = n.clientY - t.startY, h = Math.max(t.startWidth + d, i ?? 0), m = Math.max(
         t.startHeight + f,
         a ?? 0
       );
       e.current.style.width = `${h}px`, u.style.height = `${m}px`;
-    }, n = () => {
-      o((s) => ({ ...s, isResizing: !1 }));
+    }, r = () => {
+      o((n) => ({ ...n, isResizing: !1 }));
     };
-    return document.addEventListener("mousemove", r), document.addEventListener("mouseup", n), () => {
-      document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", n);
+    return document.addEventListener("mousemove", s), document.addEventListener("mouseup", r), () => {
+      document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", r);
     };
   }, [t, i, a]), {
     containerRef: e,

package/dist/esm/index.d.ts

@@ -164,3 +164,4 @@ export * from './providers/router/RouterProvider.js';
 export * from './components/action-bar/ActionBar.js';
 export * from './components/action-bar/parts/ActionBarAction.js';
 export * from './components/action-bar/parts/ActionBarRoot.js';
+export * from './components/error-state/ErrorState.js';