@payfit/unity-components 2.47.4 → 2.47.6

package/dist/esm/components/select/parts/SelectButton.js

@@ -1,104 +1,80 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { uyTv as b } from "@payfit/unity-themes";
-import { Button as p } from "react-aria-components/Button";
-import { SelectValue as n } from "react-aria-components/Select";
-import { useIntl as v } from "react-intl";
-import { Icon as u } from "../../icon/Icon.js";
-const h = b({
-  slots: {
-    base: "uy:flex uy:flex-row uy:items-center uy:gap-100 uy:h-5.5 uy:sm:h-500 uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:border-solid uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2 uy:outline-none uy:border",
-    selectValue: [
-      "uy:min-w-0 uy:whitespace-nowrap uy:text-ellipsis uy:typography-body uy:flex-grow uy:text-left uy:overflow-hidden",
-      "uy:data-[placeholder]:text-content-neutral-lowest"
-    ],
-    iconWrapper: "uy:flex uy:shrink-0 uy:gap-50",
-    icon: ""
-  },
-  variants: {
-    isDisabled: {
-      true: {
-        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
-        selectValue: "uy:text-content-form-disabled",
-        icon: "uy:text-content-neutral-lowest-disabled"
-      }
-    },
-    isInvalid: {
-      true: {
-        base: "uy:border-border-form-error uy:bg-surface-form-error"
-      }
-    },
-    isReadOnly: {
-      true: {
-        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
-        selectValue: "uy:text-content-form-readonly",
-        icon: "uy:text-content-neutral-lowest-disabled"
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      isDisabled: !1,
-      isInvalid: !1,
-      isReadOnly: !1,
-      className: {
-        base: "uy:border-border-form-enabled uy:hover:border-border-form-hover uy:bg-surface-form-enabled uy:hover:bg-surface-form-hover uy:active:border-border-form-active",
-        selectValue: "uy:text-content-form-enabled uy:hover:text-content-form-hover",
-        icon: "uy:text-content-neutral-lowest uy:hover:text-content-neutral-lowest-hover"
-      }
-    }
-  ],
-  defaultVariants: {
-    isDisabled: !1,
-    isInvalid: !1,
-    isReadOnly: !1
-  }
-}), x = ({
-  isDisabled: r,
-  isInvalid: t,
-  isReadOnly: i,
-  isOpen: d,
-  renderValue: o
-}) => {
-  const c = v(), { base: y, selectValue: s, iconWrapper: f, icon: m } = h({
-    isDisabled: r,
-    isInvalid: t,
-    isReadOnly: i
-  });
-  return /* @__PURE__ */ l(
-    p,
-    {
-      "data-dd-privacy": "mask",
-      className: y(),
-      isDisabled: r,
-      "data-unity-slot": "select-button",
-      children: [
-        o ? /* @__PURE__ */ e(n, { className: s(), translate: "no", children: ({ state: a }) => a.selectedItems[0] ? o(a.selectedItems[0]) : null }) : /* @__PURE__ */ e(n, { className: s(), translate: "no" }),
-        /* @__PURE__ */ l("div", { className: f(), children: [
-          t && /* @__PURE__ */ e(
-            u,
-            {
-              src: "WarningCircleOutlined",
-              color: "content.form.invalid",
-              alt: c.formatMessage({
-                id: "unity:component:form-field:form-input:error:alt",
-                defaultMessage: "Error"
-              })
-            }
-          ),
-          /* @__PURE__ */ e(
-            u,
-            {
-              className: m(),
-              "aria-hidden": "true",
-              src: d ? "CaretUpOutlined" : "CaretDownOutlined"
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-x.displayName = "SelectButton";
-export {
-  x as SelectButton
+import { Icon as e } from "../../icon/Icon.js";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useIntl as i } from "react-intl";
+import { Button as a } from "react-aria-components/Button";
+import { SelectValue as o } from "react-aria-components/Select";
+//#region src/components/select/parts/SelectButton.tsx
+var s = t({
+	slots: {
+		base: "uy:flex uy:flex-row uy:items-center uy:gap-100 uy:h-5.5 uy:sm:h-500 uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:border-solid uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2 uy:outline-none uy:border",
+		selectValue: ["uy:min-w-0 uy:whitespace-nowrap uy:text-ellipsis uy:typography-body uy:flex-grow uy:text-left uy:overflow-hidden", "uy:data-[placeholder]:text-content-neutral-lowest"],
+		iconWrapper: "uy:flex uy:shrink-0 uy:gap-50",
+		icon: ""
+	},
+	variants: {
+		isDisabled: { true: {
+			base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+			selectValue: "uy:text-content-form-disabled",
+			icon: "uy:text-content-neutral-lowest-disabled"
+		} },
+		isInvalid: { true: { base: "uy:border-border-form-error uy:bg-surface-form-error" } },
+		isReadOnly: { true: {
+			base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+			selectValue: "uy:text-content-form-readonly",
+			icon: "uy:text-content-neutral-lowest-disabled"
+		} }
+	},
+	compoundVariants: [{
+		isDisabled: !1,
+		isInvalid: !1,
+		isReadOnly: !1,
+		className: {
+			base: "uy:border-border-form-enabled uy:hover:border-border-form-hover uy:bg-surface-form-enabled uy:hover:bg-surface-form-hover uy:active:border-border-form-active",
+			selectValue: "uy:text-content-form-enabled uy:hover:text-content-form-hover",
+			icon: "uy:text-content-neutral-lowest uy:hover:text-content-neutral-lowest-hover"
+		}
+	}],
+	defaultVariants: {
+		isDisabled: !1,
+		isInvalid: !1,
+		isReadOnly: !1
+	}
+}), c = ({ isDisabled: t, isInvalid: c, isReadOnly: l, isOpen: u, renderValue: d }) => {
+	let f = i(), { base: p, selectValue: m, iconWrapper: h, icon: g } = s({
+		isDisabled: t,
+		isInvalid: c,
+		isReadOnly: l
+	});
+	return /* @__PURE__ */ r(a, {
+		"data-dd-privacy": "mask",
+		className: p(),
+		isDisabled: t,
+		"data-unity-slot": "select-button",
+		children: [d ? /* @__PURE__ */ n(o, {
+			className: m(),
+			translate: "no",
+			children: ({ state: e }) => e.selectedItems[0] ? d(e.selectedItems[0]) : null
+		}) : /* @__PURE__ */ n(o, {
+			className: m(),
+			translate: "no"
+		}), /* @__PURE__ */ r("div", {
+			className: h(),
+			children: [c && /* @__PURE__ */ n(e, {
+				src: "WarningCircleOutlined",
+				color: "content.form.invalid",
+				alt: f.formatMessage({
+					id: "unity:component:form-field:form-input:error:alt",
+					defaultMessage: "Error"
+				})
+			}), /* @__PURE__ */ n(e, {
+				className: g(),
+				"aria-hidden": "true",
+				src: u ? "CaretUpOutlined" : "CaretDownOutlined"
+			})]
+		})]
+	});
 };
+c.displayName = "SelectButton";
+//#endregion
+export { c as SelectButton };

package/dist/esm/components/select/parts/SelectOption.context.js

@@ -1,24 +1,17 @@
+import { createContext as e, useContext as t } from "react";
 import { jsx as n } from "react/jsx-runtime";
-import { createContext as r, useContext as i } from "react";
-const e = r({
-  isDisabled: void 0
-});
-function u({
-  children: t,
-  isDisabled: o
-}) {
-  return /* @__PURE__ */ n(e.Provider, { value: { isDisabled: o }, children: t });
+//#region src/components/select/parts/SelectOption.context.tsx
+var r = e({ isDisabled: void 0 });
+function i({ children: e, isDisabled: t }) {
+	return /* @__PURE__ */ n(r.Provider, {
+		value: { isDisabled: t },
+		children: e
+	});
 }
-function p() {
-  const t = i(e);
-  if (!t)
-    throw new Error(
-      "useSelectOptionContext must be used within an SelectOptionProvider"
-    );
-  return t;
+function a() {
+	let e = t(r);
+	if (!e) throw Error("useSelectOptionContext must be used within an SelectOptionProvider");
+	return e;
 }
-export {
-  e as SelectOptionContext,
-  u as SelectOptionProvider,
-  p as useSelectOptionContext
-};
+//#endregion
+export { i as SelectOptionProvider, a as useSelectOptionContext };

package/dist/esm/components/select/parts/SelectOption.js

@@ -1,64 +1,53 @@
-import { jsx as e, jsxs as y, Fragment as i } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { uyTv as f } from "@payfit/unity-themes";
-import { ListBoxItem as p } from "react-aria-components/ListBox";
-import { Icon as m } from "../../icon/Icon.js";
-import { SelectOptionProvider as b } from "./SelectOption.context.js";
-const x = f({
-  base: "uy:flex uy:flex-col uy:typography-body uy:rounded-50 uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:outline-none uy:cursor-pointer",
-  variants: {
-    isFocusVisible: {
-      true: "uy:outline-offset-2 uy:outline-2 uy:outline-solid uy:outline-utility-focus-ring"
-    },
-    isHovered: {
-      true: "uy:bg-surface-neutral-hover uy:text-content-neutral"
-    },
-    isPressed: {
-      true: "uy:bg-surface-neutral-pressed uy:text-content-neutral-pressed"
-    },
-    isSelected: {
-      true: "uy:bg-surface-neutral-active uy:text-content-neutral-active"
-    },
-    isDisabled: {
-      true: "uy:text-content-neutral-disabled"
-    }
-  },
-  compoundVariants: [
-    {
-      isFocusVisible: !1,
-      isHovered: !1,
-      isPressed: !1,
-      isSelected: !1,
-      isDisabled: !1,
-      class: "uy:bg-surface-neutral-enabled uy:text-content-neutral-enabled"
-    }
-  ]
-}), v = d(
-  (s, l) => {
-    const { children: u, isDisabled: r, textValue: n } = s;
-    return /* @__PURE__ */ e(
-      p,
-      {
-        ...s,
-        ref: l,
-        "data-dd-privacy": "mask",
-        textValue: n,
-        className: ({ isHovered: t, isPressed: o, isFocusVisible: a, isSelected: c }) => x({
-          isHovered: t,
-          isPressed: o,
-          isFocusVisible: a,
-          isSelected: c,
-          isDisabled: r
-        }),
-        children: ({ isSelected: t }) => /* @__PURE__ */ e(b, { isDisabled: r, children: t ? /* @__PURE__ */ y("div", { className: "uy:flex uy:justify-between", children: [
-          /* @__PURE__ */ e("div", { className: "uy:flex uy:flex-col", children: /* @__PURE__ */ e(i, { children: u }) }),
-          /* @__PURE__ */ e(m, { src: "CheckOutlined" })
-        ] }) : /* @__PURE__ */ e(i, { children: u }) })
-      }
-    );
-  }
-);
-v.displayName = "SelectOption";
-export {
-  v as SelectOption
-};
+import { Icon as e } from "../../icon/Icon.js";
+import { SelectOptionProvider as t } from "./SelectOption.context.js";
+import { forwardRef as n } from "react";
+import { uyTv as r } from "@payfit/unity-themes";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { ListBoxItem as s } from "react-aria-components/ListBox";
+//#region src/components/select/parts/SelectOption.tsx
+var c = r({
+	base: "uy:flex uy:flex-col uy:typography-body uy:rounded-50 uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:outline-none uy:cursor-pointer",
+	variants: {
+		isFocusVisible: { true: "uy:outline-offset-2 uy:outline-2 uy:outline-solid uy:outline-utility-focus-ring" },
+		isHovered: { true: "uy:bg-surface-neutral-hover uy:text-content-neutral" },
+		isPressed: { true: "uy:bg-surface-neutral-pressed uy:text-content-neutral-pressed" },
+		isSelected: { true: "uy:bg-surface-neutral-active uy:text-content-neutral-active" },
+		isDisabled: { true: "uy:text-content-neutral-disabled" }
+	},
+	compoundVariants: [{
+		isFocusVisible: !1,
+		isHovered: !1,
+		isPressed: !1,
+		isSelected: !1,
+		isDisabled: !1,
+		class: "uy:bg-surface-neutral-enabled uy:text-content-neutral-enabled"
+	}]
+}), l = n((n, r) => {
+	let { children: l, isDisabled: u, textValue: d } = n;
+	return /* @__PURE__ */ a(s, {
+		...n,
+		ref: r,
+		"data-dd-privacy": "mask",
+		textValue: d,
+		className: ({ isHovered: e, isPressed: t, isFocusVisible: n, isSelected: r }) => c({
+			isHovered: e,
+			isPressed: t,
+			isFocusVisible: n,
+			isSelected: r,
+			isDisabled: u
+		}),
+		children: ({ isSelected: n }) => /* @__PURE__ */ a(t, {
+			isDisabled: u,
+			children: n ? /* @__PURE__ */ o("div", {
+				className: "uy:flex uy:justify-between",
+				children: [/* @__PURE__ */ a("div", {
+					className: "uy:flex uy:flex-col",
+					children: /* @__PURE__ */ a(i, { children: l })
+				}), /* @__PURE__ */ a(e, { src: "CheckOutlined" })]
+			}) : /* @__PURE__ */ a(i, { children: l })
+		})
+	});
+});
+l.displayName = "SelectOption";
+//#endregion
+export { l as SelectOption };

package/dist/esm/components/select/parts/SelectOptionGroup.js

@@ -1,29 +1,36 @@
-import { jsxs as p, Fragment as n, jsx as r } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { uyTv as m } from "@payfit/unity-themes";
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Header as a } from "react-aria-components/Header";
+import { Separator as o } from "react-aria-components/Separator";
+import { ListBoxSection as s } from "react-aria-components/ListBox";
 import { Collection as c } from "react-aria-components/Collection";
-import { Header as y } from "react-aria-components/Header";
-import { ListBoxSection as d } from "react-aria-components/ListBox";
-import { Separator as f } from "react-aria-components/Separator";
-const h = m({
-  slots: {
-    base: "",
-    header: "uy:text-content-neutral-enabled uy:typography-body-strong uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150",
-    separator: "uy:h-[1px] uy:bg-surface-neutral-lowest uy:w-full uy:mb-100 uy:mt-100 uy:last:hidden"
-  }
-}), b = ({ label: e, children: t, items: o }, a) => {
-  const { base: u, header: s, separator: i } = h();
-  return /* @__PURE__ */ p(n, { children: [
-    /* @__PURE__ */ p(d, { ref: a, className: u(), id: e, items: o, children: [
-      /* @__PURE__ */ r(y, { className: s(), children: e }),
-      o ? /* @__PURE__ */ r(c, { items: o, children: t }) : /* @__PURE__ */ r(n, { children: t })
-    ] }),
-    /* @__PURE__ */ r(f, { orientation: "horizontal", className: i() })
-  ] });
-}, x = l(function(t, o) {
-  return b(t, o);
+//#region src/components/select/parts/SelectOptionGroup.tsx
+var l = t({ slots: {
+	base: "",
+	header: "uy:text-content-neutral-enabled uy:typography-body-strong uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150",
+	separator: "uy:h-[1px] uy:bg-surface-neutral-lowest uy:w-full uy:mb-100 uy:mt-100 uy:last:hidden"
+} }), u = ({ label: e, children: t, items: u }, d) => {
+	let { base: f, header: p, separator: m } = l();
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ i(s, {
+		ref: d,
+		className: f(),
+		id: e,
+		items: u,
+		children: [/* @__PURE__ */ r(a, {
+			className: p(),
+			children: e
+		}), u ? /* @__PURE__ */ r(c, {
+			items: u,
+			children: t
+		}) : /* @__PURE__ */ r(n, { children: t })]
+	}), /* @__PURE__ */ r(o, {
+		orientation: "horizontal",
+		className: m()
+	})] });
+}, d = e(function(e, t) {
+	return u(e, t);
 });
-x.displayName = "SelectOptionGroup";
-export {
-  x as SelectOptionGroup
-};
+d.displayName = "SelectOptionGroup";
+//#endregion
+export { d as SelectOptionGroup };

package/dist/esm/components/select/parts/SelectOptionHelper.js

@@ -1,22 +1,23 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
+import { useSelectOptionContext as e } from "./SelectOption.context.js";
+import { forwardRef as t } from "react";
 import { uyTv as n } from "@payfit/unity-themes";
-import { useSelectOptionContext as l } from "./SelectOption.context.js";
-const p = n({
-  base: "uy:typography-body",
-  variants: {
-    isDisabled: {
-      true: "uy:text-content-neutral-disabled",
-      false: "uy:text-content-neutral-low"
-    }
-  }
-}), i = s(
-  ({ children: t }, e) => {
-    const { isDisabled: o } = l(), r = p({ isDisabled: o });
-    return /* @__PURE__ */ a("span", { className: r, ref: e, "data-dd-privacy": "mask", children: t });
-  }
-);
-i.displayName = "SelectOptionHelper";
-export {
-  i as SelectOptionHelper
-};
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/select/parts/SelectOptionHelper.tsx
+var i = n({
+	base: "uy:typography-body",
+	variants: { isDisabled: {
+		true: "uy:text-content-neutral-disabled",
+		false: "uy:text-content-neutral-low"
+	} }
+}), a = t(({ children: t }, n) => {
+	let { isDisabled: a } = e();
+	return /* @__PURE__ */ r("span", {
+		className: i({ isDisabled: a }),
+		ref: n,
+		"data-dd-privacy": "mask",
+		children: t
+	});
+});
+a.displayName = "SelectOptionHelper";
+//#endregion
+export { a as SelectOptionHelper };

package/dist/esm/components/select-field/SelectField.js

@@ -1,67 +1,45 @@
-import { jsxs as y, jsx as o } from "react/jsx-runtime";
-import { forwardRef as S } from "react";
-import { uyTv as h } from "@payfit/unity-themes";
-import { useFormContext as b } from "react-hook-form";
-import { FormField as j } from "../form-field/FormField.js";
-import { FormControl as C } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as N } from "../form-field/parts/FormFeedbackText.js";
-import { FormHelperText as T } from "../form-field/parts/FormHelperText.js";
-import { FormLabel as g } from "../form-field/parts/FormLabel.js";
-import { Select as k } from "../select/Select.js";
-const v = h({
-  base: "uy:flex uy:flex-col uy:gap-100"
-}), w = ({
-  children: m,
-  feedbackText: e,
-  helperText: r,
-  isRequired: t,
-  label: l,
-  name: i,
-  requiredVariant: c,
-  isDisabled: n,
-  isInvalid: f,
-  isReadOnly: p,
-  placeholder: s,
-  items: d,
-  ...F
-}, a) => {
-  const { control: u } = b(), x = {
-    isRequired: t,
-    isInvalid: f,
-    isDisabled: n,
-    isReadOnly: p
-  };
-  return /* @__PURE__ */ y(
-    j,
-    {
-      control: u,
-      name: i,
-      className: v(),
-      ...x,
-      children: [
-        /* @__PURE__ */ o(g, { requiredVariant: c, children: l }),
-        r && /* @__PURE__ */ o(T, { children: r }),
-        /* @__PURE__ */ o(C, { children: /* @__PURE__ */ o(
-          k,
-          {
-            ref: a,
-            placeholder: s,
-            items: d,
-            ...F,
-            children: m
-          }
-        ) }),
-        /* @__PURE__ */ o(N, { children: e })
-      ]
-    }
-  );
-}, H = S(function(e, r) {
-  return w(
-    e,
-    r
-  );
+import { Select as e } from "../select/Select.js";
+import { FormHelperText as t } from "../form-field/parts/FormHelperText.js";
+import { FormField as n } from "../form-field/FormField.js";
+import { FormControl as r } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as i } from "../form-field/parts/FormFeedbackText.js";
+import { FormLabel as a } from "../form-field/parts/FormLabel.js";
+import { forwardRef as o } from "react";
+import { uyTv as s } from "@payfit/unity-themes";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useFormContext as u } from "react-hook-form";
+//#region src/components/select-field/SelectField.tsx
+var d = s({ base: "uy:flex uy:flex-col uy:gap-100" }), f = ({ children: o, feedbackText: s, helperText: f, isRequired: p, label: m, name: h, requiredVariant: g, isDisabled: _, isInvalid: v, isReadOnly: y, placeholder: b, items: x, ...S }, C) => {
+	let { control: w } = u(), T = {
+		isRequired: p,
+		isInvalid: v,
+		isDisabled: _,
+		isReadOnly: y
+	};
+	return /* @__PURE__ */ l(n, {
+		control: w,
+		name: h,
+		className: d(),
+		...T,
+		children: [
+			/* @__PURE__ */ c(a, {
+				requiredVariant: g,
+				children: m
+			}),
+			f && /* @__PURE__ */ c(t, { children: f }),
+			/* @__PURE__ */ c(r, { children: /* @__PURE__ */ c(e, {
+				ref: C,
+				placeholder: b,
+				items: x,
+				...S,
+				children: o
+			}) }),
+			/* @__PURE__ */ c(i, { children: s })
+		]
+	});
+}, p = o(function(e, t) {
+	return f(e, t);
 });
-H.displayName = "SelectField";
-export {
-  H as SelectField
-};
+p.displayName = "SelectField";
+//#endregion
+export { p as SelectField };