@payfit/unity-components 0.0.0-alpha.8 → 0.0.0-alpha.9

package/dist/cjs/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("./components/actionable/Actionable.js"),b=require("./components/alert/Alert.js"),x=require("./components/alert/parts/AlertActions.js"),m=require("./components/alert/parts/AlertContent.js"),M=require("./components/alert/parts/AlertTitle.js"),g=require("./components/anchor/Anchor.js"),S=require("./components/app-layout/AppLayout.js"),T=require("./components/app-menu/AppMenu.js"),B=require("./components/app-menu/parts/AppMenuHeader.js"),P=require("./components/app-menu/parts/AppMenuFooter.js"),k=require("./components/app-menu/parts/AppMenuNavContent.js"),e=require("./components/app-menu/parts/AppMenu.context.js"),C=require("./components/avatar/Avatar.js"),v=require("./components/avatar/utils.js"),I=require("./components/avatar/parts/AvatarFallback.js"),G=require("./components/avatar/parts/AvatarImage.js"),L=require("./components/avatar/parts/AvatarPair.js"),D=require("./components/badge/Badge.js"),O=require("./components/breadcrumbs/Breadcrumbs.js"),y=require("./components/breadcrumbs/parts/Breadcrumb.js"),h=require("./components/button/Button.js"),t=require("./components/checkbox/Checkbox.js"),N=require("./components/checkbox-field/CheckboxField.js"),r=require("./components/checkbox-group/CheckboxGroup.js"),H=require("./components/checkbox-group-field/CheckboxGroupField.js"),R=require("./components/date-picker/DatePicker.js"),f=require("./components/date-picker-field/DatePickerField.js"),_=require("./components/dialog/Dialog.js"),U=require("./components/dialog/parts/DialogActions.js"),Q=require("./components/dialog/parts/DialogActions/DialogButton.js"),V=require("./components/dialog/parts/DialogContent.js"),j=require("./components/dialog/parts/DialogTitle.js"),o=require("./components/fieldset/Fieldset.js"),w=require("./components/fieldset/parts/FieldGroup.js"),n=require("./components/flex/Flex.js"),i=require("./components/flex/Flex.variants.js"),u=require("./components/flex/FlexItem.js"),z=require("./components/form/Form.js"),E=require("./components/form-field/FormField.js"),J=require("./components/form-field/parts/FormControl.js"),K=require("./components/form-field/parts/FormContextualLink.js"),W=require("./components/form-field/parts/FormFeedbackText.js"),X=require("./components/form-field/parts/FormHelperText.js"),Y=require("./components/form-field/parts/FormLabel.js"),a=require("./components/full-page-loader/FullPageLoader.js"),Z=require("./components/grid/Grid.js"),c=require("./components/grid/Grid.variants.js"),$=require("./components/grid/GridItem.js"),ee=require("./components/icon/Icon.js"),te=require("./components/icon-button/IconButton.js"),re=require("./components/input/Input.js"),oe=require("./components/label/Label.js"),ne=require("./components/link/Link.js"),ie=require("./components/menu/Menu.js"),ue=require("./components/menu/parts/MenuContent.js"),ae=require("./components/menu/parts/MenuHeader.js"),ce=require("./components/menu/parts/MenuItem.js"),le=require("./components/menu/parts/MenuSeparator.js"),se=require("./components/menu/parts/MenuTrigger.js"),pe=require("./components/multi-select/MultiSelect.js"),qe=require("./components/multi-select/parts/MultiSelectOption.js"),de=require("./components/multi-select/parts/MultiSelectOptGroup.js"),Fe=require("./components/multi-select-field/MultiSelectField.js"),Ae=require("./components/nav/Nav.js"),be=require("./components/nav/parts/NavGroup.js"),l=require("./components/nav/parts/NavItem.js"),xe=require("./components/payfit-brand/PayFitBrand.js"),me=require("./components/payfit-brand/PayFitPreprod.js"),Me=require("./components/pill/Pill.js"),ge=require("./components/progress-bar/ProgressBar.js"),Se=require("./components/select/parts/SelectButton.js"),Te=require("./components/select/parts/SelectOption.js"),Be=require("./components/select/parts/SelectOptionGroup.js"),Pe=require("./components/select/parts/SelectOptionHelper.js"),ke=require("./components/select/Select.js"),Ce=require("./components/select-field/SelectField.js"),s=require("./components/selectable-button-group/SelectableButtonGroup.js"),p=require("./components/selectable-button-group/parts/SelectableButton.js"),ve=require("./components/spinner/Spinner.js"),Ie=require("./components/tabs/Tabs.js"),Ge=require("./components/tabs/parts/Tab.js"),Le=require("./components/tabs/parts/TabList.js"),De=require("./components/tabs/parts/TabPanel.js"),Oe=require("./components/text/Text.js"),ye=require("./components/text/Text.variants.js"),q=require("./components/text-area/TextArea.js"),he=require("./components/text-field/TextField.js"),Ne=require("./components/toast/toast.js"),d=require("./components/toast/ToastManager.js"),He=require("./hooks/use-breakpoint-listener.js"),Re=require("./hooks/use-media-query.js"),fe=require("./hooks/use-form.js"),F=require("./providers/router/RouterProvider.js"),_e=require("./providers/router/integrations/UnityReactRouterV5Provider.js"),Ue=require("react-aria-components");exports.Actionable=A.Actionable;exports.Alert=b.Alert;exports.AlertActions=x.AlertActions;exports.AlertContent=m.AlertContent;exports.AlertTitle=M.AlertTitle;exports.Anchor=g.Anchor;exports.AppLayout=S.AppLayout;exports.AppMenu=T.AppMenu;exports.AppMenuHeader=B.AppMenuHeader;exports.AppMenuFooter=P.AppMenuFooter;exports.AppMenuNavContent=k.AppMenuNavContent;exports.AppMenuContext=e.AppMenuContext;exports.AppMenuContextProvider=e.AppMenuContextProvider;exports.useAppMenuContext=e.useAppMenuContext;exports.Avatar=C.Avatar;exports.getInitials=v.getInitials;exports.AvatarFallback=I.AvatarFallback;exports.AvatarImage=G.AvatarImage;exports.AvatarPair=L.AvatarPair;exports.Badge=D.Badge;exports.Breadcrumbs=O.Breadcrumbs;exports.Breadcrumb=y.Breadcrumb;exports.Button=h.Button;exports.Checkbox=t.Checkbox;exports.checkbox=t.checkbox;exports.CheckboxField=N.CheckboxField;exports.CheckboxGroup=r.CheckboxGroup;exports.checkboxGroup=r.checkboxGroup;exports.CheckboxGroupField=H.CheckboxGroupField;exports.DatePicker=R.DatePicker;exports.DatePickerField=f.DatePickerField;exports.Dialog=_.Dialog;exports.DialogActions=U.DialogActions;exports.DialogButton=Q.DialogButton;exports.DialogContent=V.DialogContent;exports.DialogTitle=j.DialogTitle;exports.Fieldset=o.Fieldset;exports.fieldset=o.fieldset;exports.FieldGroup=w.FieldGroup;exports.Flex=n.Flex;exports.Stack=n.Stack;exports.flex=i.flex;exports.flexItem=i.flexItem;exports.FlexItem=u.FlexItem;exports.StackItem=u.StackItem;exports.Form=z.Form;exports.FormField=E.FormField;exports.FormControl=J.FormControl;exports.FormContextualLink=K.FormContextualLink;exports.FormFeedbackText=W.FormFeedbackText;exports.FormHelperText=X.FormHelperText;exports.FormLabel=Y.FormLabel;exports.FullPageLoader=a.FullPageLoader;exports.fullPageLoader=a.fullPageLoader;exports.Grid=Z.Grid;exports.grid=c.grid;exports.gridItem=c.gridItem;exports.GridItem=$.GridItem;exports.Icon=ee.Icon;exports.IconButton=te.IconButton;exports.Input=re.Input;exports.Label=oe.Label;exports.Link=ne.Link;exports.Menu=ie.Menu;exports.MenuContent=ue.MenuContent;exports.MenuHeader=ae.MenuHeader;exports.MenuItem=ce.MenuItem;exports.MenuSeparator=le.MenuSeparator;exports.MenuTrigger=se.MenuTrigger;exports.MultiSelect=pe.MultiSelect;exports.MultiSelectOption=qe.MultiSelectOption;exports.MultiSelectOptGroup=de.MultiSelectOptGroup;exports.MultiSelectField=Fe.MultiSelectField;exports.Nav=Ae.Nav;exports.NavGroup=be.NavGroup;exports.NavItem=l.NavItem;exports.navItemBase=l.navItemBase;exports.PayFitBrand=xe.PayFitBrand;exports.PayFitBrandPreprod=me.PayFitBrandPreprod;exports.Pill=Me.Pill;exports.ProgressBar=ge.ProgressBar;exports.SelectButton=Se.SelectButton;exports.SelectOption=Te.SelectOption;exports.SelectOptionGroup=Be.SelectOptionGroup;exports.SelectOptionHelper=Pe.SelectOptionHelper;exports.Select=ke.Select;exports.SelectField=Ce.SelectField;exports.SelectableButtonGroup=s.SelectableButtonGroup;exports.selectableButtonGroup=s.selectableButtonGroup;exports.SelectableButton=p.SelectableButton;exports.selectableButton=p.selectableButton;exports.Spinner=ve.Spinner;exports.Tabs=Ie.Tabs;exports.Tab=Ge.Tab;exports.TabList=Le.TabList;exports.TabPanel=De.TabPanel;exports.Text=Oe.Text;exports.text=ye.text;exports.TextArea=q.TextArea;exports.textArea=q.textArea;exports.TextField=he.TextField;exports.toast=Ne.toast;exports.TOAST_CONFIG=d.TOAST_CONFIG;exports.ToastManager=d.ToastManager;exports.useBreakpointListener=He.useBreakpointListener;exports.useMediaQuery=Re.useMediaQuery;exports.useUnityForm=fe.useUnityForm;exports.RouterProvider=F.RouterProvider;exports.useRouter=F.useRouter;exports.UnityReactRouterV5Provider=_e.UnityReactRouterV5Provider;Object.defineProperty(exports,"DialogTrigger",{enumerable:!0,get:()=>Ue.DialogTrigger});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("./components/actionable/Actionable.js"),C=require("./components/alert/Alert.js"),k=require("./components/alert/parts/AlertActions.js"),h=require("./components/alert/parts/AlertContent.js"),v=require("./components/alert/parts/AlertTitle.js"),I=require("./components/anchor/Anchor.js"),G=require("./components/app-layout/AppLayout.js"),L=require("./components/app-menu/AppMenu.js"),D=require("./components/app-menu/parts/AppMenuHeader.js"),H=require("./components/app-menu/parts/AppMenuFooter.js"),O=require("./components/app-menu/parts/AppMenuNavContent.js"),e=require("./components/app-menu/parts/AppMenu.context.js"),y=require("./components/avatar/Avatar.js"),N=require("./components/avatar/utils.js"),R=require("./components/avatar/parts/AvatarFallback.js"),f=require("./components/avatar/parts/AvatarImage.js"),_=require("./components/avatar/parts/AvatarPair.js"),U=require("./components/badge/Badge.js"),t=require("./components/bottom-sheet/BottomSheet.js"),r=require("./components/bottom-sheet/parts/BottomSheetHeader.js"),o=require("./components/bottom-sheet/parts/BottomSheetContent.js"),n=require("./components/bottom-sheet/parts/BottomSheetFooter.js"),Q=require("./components/breadcrumbs/Breadcrumbs.js"),V=require("./components/breadcrumbs/parts/Breadcrumb.js"),j=require("./components/button/Button.js"),i=require("./components/checkbox/Checkbox.js"),w=require("./components/checkbox-field/CheckboxField.js"),u=require("./components/checkbox-group/CheckboxGroup.js"),z=require("./components/checkbox-group-field/CheckboxGroupField.js"),E=require("./components/date-picker/DatePicker.js"),J=require("./components/date-picker-field/DatePickerField.js"),a=require("./components/dialog/Dialog.js"),K=require("./components/dialog/parts/DialogActions.js"),W=require("./components/dialog/parts/DialogActions/DialogButton.js"),X=require("./components/dialog/parts/DialogContent.js"),Y=require("./components/dialog/parts/DialogTitle.js"),l=require("./components/fieldset/Fieldset.js"),Z=require("./components/fieldset/parts/FieldGroup.js"),c=require("./components/flex/Flex.js"),s=require("./components/flex/Flex.variants.js"),d=require("./components/flex/FlexItem.js"),$=require("./components/form/Form.js"),ee=require("./components/form-field/FormField.js"),te=require("./components/form-field/parts/FormControl.js"),re=require("./components/form-field/parts/FormContextualLink.js"),oe=require("./components/form-field/parts/FormFeedbackText.js"),ne=require("./components/form-field/parts/FormHelperText.js"),ie=require("./components/form-field/parts/FormLabel.js"),p=require("./components/full-page-loader/FullPageLoader.js"),ue=require("./components/grid/Grid.js"),q=require("./components/grid/Grid.variants.js"),ae=require("./components/grid/GridItem.js"),le=require("./components/icon/Icon.js"),ce=require("./components/icon-button/IconButton.js"),se=require("./components/input/Input.js"),de=require("./components/label/Label.js"),pe=require("./components/link/Link.js"),qe=require("./components/menu/Menu.js"),Fe=require("./components/menu/parts/MenuContent.js"),Se=require("./components/menu/parts/MenuHeader.js"),me=require("./components/menu/parts/MenuItem.js"),be=require("./components/menu/parts/MenuSeparator.js"),Ae=require("./components/menu/parts/MenuTrigger.js"),Pe=require("./components/multi-select/MultiSelect.js"),xe=require("./components/multi-select/parts/MultiSelectOption.js"),Be=require("./components/multi-select/parts/MultiSelectOptGroup.js"),Me=require("./components/multi-select-field/MultiSelectField.js"),ge=require("./components/nav/Nav.js"),Te=require("./components/nav/parts/NavGroup.js"),F=require("./components/nav/parts/NavItem.js"),Ce=require("./components/payfit-brand/PayFitBrand.js"),ke=require("./components/payfit-brand/PayFitPreprod.js"),he=require("./components/pill/Pill.js"),ve=require("./components/progress-bar/ProgressBar.js"),Ie=require("./components/select/parts/SelectButton.js"),Ge=require("./components/select/parts/SelectOption.js"),Le=require("./components/select/parts/SelectOptionGroup.js"),De=require("./components/select/parts/SelectOptionHelper.js"),He=require("./components/select/Select.js"),Oe=require("./components/select-field/SelectField.js"),S=require("./components/selectable-button-group/SelectableButtonGroup.js"),m=require("./components/selectable-button-group/parts/SelectableButton.js"),b=require("./components/side-panel/SidePanel.js"),A=require("./components/side-panel/parts/SidePanelHeader.js"),P=require("./components/side-panel/parts/SidePanelContent.js"),x=require("./components/side-panel/parts/SidePanelFooter.js"),ye=require("./components/spinner/Spinner.js"),Ne=require("./components/tabs/Tabs.js"),Re=require("./components/tabs/parts/Tab.js"),fe=require("./components/tabs/parts/TabList.js"),_e=require("./components/tabs/parts/TabPanel.js"),Ue=require("./components/text/Text.js"),Qe=require("./components/text/Text.variants.js"),B=require("./components/text-area/TextArea.js"),Ve=require("./components/text-field/TextField.js"),je=require("./components/toast/toast.js"),M=require("./components/toast/ToastManager.js"),we=require("./components/tooltip/Tooltip.js"),ze=require("./hooks/use-breakpoint-listener.js"),Ee=require("./hooks/use-media-query.js"),Je=require("./hooks/use-form.js"),g=require("./providers/router/RouterProvider.js"),Ke=require("./providers/router/integrations/UnityReactRouterV5Provider.js"),We=require("react-aria-components");exports.Actionable=T.Actionable;exports.Alert=C.Alert;exports.AlertActions=k.AlertActions;exports.AlertContent=h.AlertContent;exports.AlertTitle=v.AlertTitle;exports.Anchor=I.Anchor;exports.AppLayout=G.AppLayout;exports.AppMenu=L.AppMenu;exports.AppMenuHeader=D.AppMenuHeader;exports.AppMenuFooter=H.AppMenuFooter;exports.AppMenuNavContent=O.AppMenuNavContent;exports.AppMenuContext=e.AppMenuContext;exports.AppMenuContextProvider=e.AppMenuContextProvider;exports.useAppMenuContext=e.useAppMenuContext;exports.Avatar=y.Avatar;exports.getInitials=N.getInitials;exports.AvatarFallback=R.AvatarFallback;exports.AvatarImage=f.AvatarImage;exports.AvatarPair=_.AvatarPair;exports.Badge=U.Badge;exports.BottomSheet=t.BottomSheet;exports.bottomSheet=t.bottomSheet;exports.BottomSheetHeader=r.BottomSheetHeader;exports.bottomSheetHeader=r.bottomSheetHeader;exports.BottomSheetContent=o.BottomSheetContent;exports.bottomSheetContent=o.bottomSheetContent;exports.BottomSheetFooter=n.BottomSheetFooter;exports.bottomSheetFooter=n.bottomSheetFooter;exports.Breadcrumbs=Q.Breadcrumbs;exports.Breadcrumb=V.Breadcrumb;exports.Button=j.Button;exports.Checkbox=i.Checkbox;exports.checkbox=i.checkbox;exports.CheckboxField=w.CheckboxField;exports.CheckboxGroup=u.CheckboxGroup;exports.checkboxGroup=u.checkboxGroup;exports.CheckboxGroupField=z.CheckboxGroupField;exports.DatePicker=E.DatePicker;exports.DatePickerField=J.DatePickerField;exports.Dialog=a.Dialog;exports.dialog=a.dialog;exports.DialogActions=K.DialogActions;exports.DialogButton=W.DialogButton;exports.DialogContent=X.DialogContent;exports.DialogTitle=Y.DialogTitle;exports.Fieldset=l.Fieldset;exports.fieldset=l.fieldset;exports.FieldGroup=Z.FieldGroup;exports.Flex=c.Flex;exports.Stack=c.Stack;exports.flex=s.flex;exports.flexItem=s.flexItem;exports.FlexItem=d.FlexItem;exports.StackItem=d.StackItem;exports.Form=$.Form;exports.FormField=ee.FormField;exports.FormControl=te.FormControl;exports.FormContextualLink=re.FormContextualLink;exports.FormFeedbackText=oe.FormFeedbackText;exports.FormHelperText=ne.FormHelperText;exports.FormLabel=ie.FormLabel;exports.FullPageLoader=p.FullPageLoader;exports.fullPageLoader=p.fullPageLoader;exports.Grid=ue.Grid;exports.grid=q.grid;exports.gridItem=q.gridItem;exports.GridItem=ae.GridItem;exports.Icon=le.Icon;exports.IconButton=ce.IconButton;exports.Input=se.Input;exports.Label=de.Label;exports.Link=pe.Link;exports.Menu=qe.Menu;exports.MenuContent=Fe.MenuContent;exports.MenuHeader=Se.MenuHeader;exports.MenuItem=me.MenuItem;exports.MenuSeparator=be.MenuSeparator;exports.MenuTrigger=Ae.MenuTrigger;exports.MultiSelect=Pe.MultiSelect;exports.MultiSelectOption=xe.MultiSelectOption;exports.MultiSelectOptGroup=Be.MultiSelectOptGroup;exports.MultiSelectField=Me.MultiSelectField;exports.Nav=ge.Nav;exports.NavGroup=Te.NavGroup;exports.NavItem=F.NavItem;exports.navItemBase=F.navItemBase;exports.PayFitBrand=Ce.PayFitBrand;exports.PayFitBrandPreprod=ke.PayFitBrandPreprod;exports.Pill=he.Pill;exports.ProgressBar=ve.ProgressBar;exports.SelectButton=Ie.SelectButton;exports.SelectOption=Ge.SelectOption;exports.SelectOptionGroup=Le.SelectOptionGroup;exports.SelectOptionHelper=De.SelectOptionHelper;exports.Select=He.Select;exports.SelectField=Oe.SelectField;exports.SelectableButtonGroup=S.SelectableButtonGroup;exports.selectableButtonGroup=S.selectableButtonGroup;exports.SelectableButton=m.SelectableButton;exports.selectableButton=m.selectableButton;exports.SidePanel=b.SidePanel;exports.sidePanel=b.sidePanel;exports.SidePanelHeader=A.SidePanelHeader;exports.sidePanelHeader=A.sidePanelHeader;exports.SidePanelContent=P.SidePanelContent;exports.sidePanelContent=P.sidePanelContent;exports.SidePanelFooter=x.SidePanelFooter;exports.sidePanelFooter=x.sidePanelFooter;exports.Spinner=ye.Spinner;exports.Tabs=Ne.Tabs;exports.Tab=Re.Tab;exports.TabList=fe.TabList;exports.TabPanel=_e.TabPanel;exports.Text=Ue.Text;exports.text=Qe.text;exports.TextArea=B.TextArea;exports.textArea=B.textArea;exports.TextField=Ve.TextField;exports.toast=je.toast;exports.TOAST_CONFIG=M.TOAST_CONFIG;exports.ToastManager=M.ToastManager;exports.Tooltip=we.Tooltip;exports.useBreakpointListener=ze.useBreakpointListener;exports.useMediaQuery=Ee.useMediaQuery;exports.useUnityForm=Je.useUnityForm;exports.RouterProvider=g.RouterProvider;exports.useRouter=g.useRouter;exports.UnityReactRouterV5Provider=Ke.UnityReactRouterV5Provider;Object.defineProperty(exports,"DialogTrigger",{enumerable:!0,get:()=>We.DialogTrigger});

package/dist/esm/components/actionable/Actionable.d.mts

@@ -1,11 +1,12 @@
 import { ButtonProps as AriaButtonProps } from 'react-aria-components';
-/**
- * The Actionable primitive is a component that helps you build interactive surfaces of any kind.
- */
-declare const Actionable: import('react').ForwardRefExoticComponent<Omit<AriaButtonProps, "style" | "slot"> & {
+interface ActionableProps extends AriaButtonProps {
     /** Additional class names to apply to the actionable */
     className?: string;
     /** set to true to remove the Actionable's base styles */
     isUnstyled?: boolean;
-} & import('react').RefAttributes<HTMLButtonElement>>;
+}
+/**
+ * The Actionable primitive is a component that helps you build interactive surfaces of any kind.
+ */
+declare const Actionable: import('react').ForwardRefExoticComponent<ActionableProps & import('react').RefAttributes<HTMLButtonElement>>;
 export { Actionable };

package/dist/esm/components/alert/Alert.mjs

@@ -1,4 +1,4 @@
-import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
 import { forwardRef as b } from "react";
 import { tv as g } from "tailwind-variants";
 import { CircularIconButton as m } from "../icon-button/CircularIconButton.mjs";
@@ -28,41 +28,51 @@ const w = g({
   defaultVariants: {
     variant: "info"
   }
-}), x = {
+}), v = {
   info: { src: "InfoFilled", color: "content.info" },
   warning: { src: "WarningFilled", color: "content.warning" },
   success: { src: "CheckCircleFilled", color: "content.success" },
   danger: { src: "WarningCircleFilled", color: "content.danger" }
-}, v = b(
+}, x = b(
   ({
     children: o,
     variant: e,
     isDismissable: s,
     onDismiss: n,
-    dismissButtonLabel: t,
-    ...a
+    dismissButtonLabel: a,
+    ...t
   }, c) => {
-    const { base: l, content: i, icon: u } = w({ variant: e }), d = x[e], f = {
+    const { base: i, content: l, icon: u } = w({ variant: e }), d = v[e], y = {
       role: e === "danger" ? "alert" : "status",
       "aria-live": e === "danger" ? "assertive" : "polite",
       "aria-atomic": !0,
       "aria-relevant": "additions removals"
     };
-    return /* @__PURE__ */ y("div", { ref: c, className: l(), ...f, ...a, children: [
-      /* @__PURE__ */ r("div", { className: u(), children: /* @__PURE__ */ r(p, { size: 24, ...d, alt: `${e} alert` }) }),
-      /* @__PURE__ */ r("section", { className: i(), children: o }),
-      s && /* @__PURE__ */ r(
-        m,
-        {
-          title: t,
-          icon: "CloseOutlined",
-          onPress: n
-        }
-      )
-    ] });
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        "data-dd-privacy": "mask",
+        ref: c,
+        className: i(),
+        ...y,
+        ...t,
+        children: [
+          /* @__PURE__ */ r("div", { className: u(), children: /* @__PURE__ */ r(p, { size: 24, ...d, alt: `${e} alert` }) }),
+          /* @__PURE__ */ r("section", { className: l(), children: o }),
+          s && /* @__PURE__ */ r(
+            m,
+            {
+              title: a,
+              icon: "CloseOutlined",
+              onPress: n
+            }
+          )
+        ]
+      }
+    );
   }
 );
-v.displayName = "Alert";
+x.displayName = "Alert";
 export {
-  v as Alert
+  x as Alert
 };

package/dist/esm/components/app-menu/parts/AppMenuFooter.mjs

@@ -125,10 +125,18 @@ const v = (i) => /* @__PURE__ */ u(
       {
         id: "profile-button-label",
         className: "uy-typography-body-strong uy-text-content-neutral uy-text-wrap",
+        "data-dd-privacy": "mask",
         children: o
       }
     ),
-    /* @__PURE__ */ e("span", { className: "uy-typography-body-small uy-text-content-neutral-low", children: c }),
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: "uy-typography-body-small uy-text-content-neutral-low",
+        "data-dd-privacy": "allow",
+        children: c
+      }
+    ),
     !i && /* @__PURE__ */ e("span", { id: "profile-button-description", className: "uy-sr-only", children: n || /* @__PURE__ */ e(
       p,
       {
@@ -146,7 +154,7 @@ const v = (i) => /* @__PURE__ */ u(
       color: "inherit"
     }
   ) })
-] }), T = ({
+] }), k = ({
   avatar: i,
   avatarPair: r,
   badgeLabel: a,
@@ -220,5 +228,5 @@ const v = (i) => /* @__PURE__ */ u(
   );
 };
 export {
-  T as AppMenuFooter
+  k as AppMenuFooter
 };

package/dist/esm/components/avatar/Avatar.mjs

@@ -1,32 +1,33 @@
 import { jsx as t } from "react/jsx-runtime";
-import * as l from "react";
+import * as c from "react";
 import * as o from "@radix-ui/react-avatar";
-import { twMerge as f } from "tailwind-merge";
-import { tv as n } from "tailwind-variants";
-import { AvatarProvider as p } from "./Avatar.context.mjs";
-import { avatarBase as v } from "./Avatar.variants.mjs";
-const d = n({
-  extend: v,
+import { twMerge as d } from "tailwind-merge";
+import { tv as f } from "tailwind-variants";
+import { AvatarProvider as n } from "./Avatar.context.mjs";
+import { avatarBase as p } from "./Avatar.variants.mjs";
+const v = f({
+  extend: p,
   base: "uy-inline-block uy-relative uy-shrink-0",
   defaultVariants: {
     size: "md",
     variant: "circle"
   }
-}), u = l.forwardRef(
-  ({ size: r = "md", variant: a = "circle", className: e, ...i }, m) => {
-    const s = d({ variant: a, size: r }), c = f(s, e);
-    return /* @__PURE__ */ t(p, { variant: a, size: r, hasPair: !1, children: /* @__PURE__ */ t(
+}), y = c.forwardRef(
+  ({ size: a = "md", variant: r = "circle", className: e, ...i }, m) => {
+    const s = v({ variant: r, size: a }), l = d(s, e);
+    return /* @__PURE__ */ t(n, { variant: r, size: a, hasPair: !1, children: /* @__PURE__ */ t(
       o.Root,
       {
         ref: m,
         role: "img",
-        className: c,
+        className: l,
+        "data-dd-privacy": "allow",
         ...i
       }
     ) });
   }
 );
-u.displayName = o.Root.displayName;
+y.displayName = o.Root.displayName;
 export {
-  u as Avatar
+  y as Avatar
 };

package/dist/esm/components/badge/Badge.mjs

@@ -1,9 +1,9 @@
 import { jsx as l } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
 import { Slot as y } from "@radix-ui/react-slot";
-import { twMerge as g } from "tailwind-merge";
+import { twMerge as d } from "tailwind-merge";
 import { tv as i } from "tailwind-variants";
-const d = i(
+const g = i(
   {
     base: "uy-inline-block uy-rounded-75 uy-px-75 uy-py-25 uy-font-sans uy-typography-body uy-whitespace-nowrap uy-text-center",
     variants: {
@@ -32,7 +32,7 @@ const d = i(
   attention: "alert",
   contextual: "status",
   numeric: "status"
-}, f = c(
+}, p = c(
   ({
     className: e,
     variant: t = "neutral",
@@ -45,8 +45,9 @@ const d = i(
     return /* @__PURE__ */ l(
       a ? y : "span",
       {
+        "data-dd-privacy": "allow",
         ref: o,
-        className: g(d({ variant: t }), e),
+        className: d(g({ variant: t }), e),
         role: s,
         ...u,
         children: n
@@ -54,7 +55,7 @@ const d = i(
     );
   }
 );
-f.displayName = "Badge";
+p.displayName = "Badge";
 export {
-  f as Badge
+  p as Badge
 };

package/dist/esm/components/bottom-sheet/BottomSheet.d.mts

@@ -0,0 +1,153 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const bottomSheet: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export interface BottomSheetProps extends PropsWithChildren<VariantProps<typeof bottomSheet>> {
+    /**
+     * Controls whether the sheet can be dismissed by clicking outside or using escape key.
+     * @default true
+     */
+    isDismissable?: boolean;
+    /**
+     * When true, pressing the Escape key will not close the sheet.
+     * This is useful when you need to prevent accidental dismissal.
+     * @default false
+     */
+    isKeyboardDismissDisabled?: boolean;
+    /**
+     * Controls the open state of the sheet in controlled mode.
+     * Must be used together with `onOpenChange`.
+     */
+    isOpen?: boolean;
+    /**
+     * Sets the initial open state in uncontrolled mode.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback fired when the open state changes.
+     * Required when using controlled mode with `isOpen`.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * The BottomSheet component provides a mobile-optimized interface for displaying content
+ * that slides up from the bottom of the screen. It's ideal for secondary tasks and supplementary
+ * information without leaving the current context.
+ *
+ * This component is specifically designed as a bottom-anchored variant, unlike the SidePanel
+ * which adapts to different viewports.
+ *
+ * Control the sheet using either uncontrolled mode with `defaultOpen` or controlled mode with
+ * `isOpen`/`onOpenChange` props. Customize dismissal behavior with `isDismissable` and
+ * `isKeyboardDismissDisabled` props.
+ * @param {BottomSheetProps} props - The props for the BottomSheet component
+ * @see {@link BottomSheetProps} for all available props
+ * @example
+ * ```tsx
+ * import {
+ *   BottomSheet,
+ *   BottomSheetHeader,
+ *   BottomSheetContent,
+ *   BottomSheetFooter,
+ *   Button,
+ *   DialogTrigger
+ * } from '@payfit/unity-components'
+ *
+ * // Uncontrolled example
+ * function BasicExample() {
+ *   return (
+ *     <DialogTrigger>
+ *       <Button>Open bottom sheet</Button>
+ *       <BottomSheet>
+ *         <BottomSheetHeader>Sheet title</BottomSheetHeader>
+ *         <BottomSheetContent>Your content here</BottomSheetContent>
+ *         <BottomSheetFooter>
+ *           <Button variant="secondary">Cancel</Button>
+ *           <Button variant="primary">Save</Button>
+ *         </BottomSheetFooter>
+ *       </BottomSheet>
+ *     </DialogTrigger>
+ *   )
+ * }
+ *
+ * // Controlled example
+ * function ControlledExample() {
+ *   const [isOpen, setIsOpen] = useState(false)
+ *
+ *   return (
+ *     <>
+ *       <Button onPress={() => setIsOpen(true)}>Open bottom sheet</Button>
+ *
+ *       <BottomSheet isOpen={isOpen} onOpenChange={setIsOpen}>
+ *         <BottomSheetHeader>Sheet title</BottomSheetHeader>
+ *         <BottomSheetContent>Your content here</BottomSheetContent>
+ *         <BottomSheetFooter>
+ *           <Button
+ *             variant="primary"
+ *             onPress={() => setIsOpen(false)}
+ *           >
+ *             Close
+ *           </Button>
+ *         </BottomSheetFooter>
+ *       </BottomSheet>
+ *     </>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-bottomsheet--docs)
+ */
+declare const BottomSheet: import('react').ForwardRefExoticComponent<BottomSheetProps & import('react').RefAttributes<HTMLDivElement>>;
+export { BottomSheet };

package/dist/esm/components/bottom-sheet/BottomSheet.mjs

@@ -0,0 +1,68 @@
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { ModalOverlay as c, Modal as h, Dialog as p } from "react-aria-components";
+import { tv as x } from "tailwind-variants";
+import { BottomSheetDragIndicator as w } from "./parts/BottomSheetDragIndicator.mjs";
+const g = x({
+  slots: {
+    overlay: [
+      "uy-fixed uy-inset-0 uy-z-10 uy-overflow-y-auto",
+      "uy-backdrop-blur-sm uy-bg-utility-backdrop/65",
+      "data-[entering]:uy-animate-fade-in data-[exiting]:uy-animate-fade-out"
+    ],
+    wrapper: [
+      "uy-w-full md:uy-max-w-[50svw]",
+      "uy-fixed uy-bottom-0 uy-left-0 uy-right-0 md:uy-left-0 md:uy-right-0 md:uy-mx-auto uy-z-[100]",
+      "uy-bg-surface-neutral uy-rounded-t-200",
+      "uy-shadow-flying",
+      "uy-flex uy-flex-col uy-max-h-[95svh]",
+      "uy-overflow-hidden",
+      "data-[entering]:uy-animate-slide-up-fade-in data-[exiting]:uy-animate-slide-down-fade-out"
+    ],
+    content: [
+      "uy-flex uy-flex-col uy-h-full uy-min-h-[40svh] uy-overflow-hidden uy-outline-none"
+    ]
+  }
+}), v = s(
+  ({
+    children: e,
+    isOpen: o,
+    onOpenChange: a,
+    defaultOpen: u,
+    isDismissable: r = !0,
+    isKeyboardDismissDisabled: y = !1,
+    ...i
+  }, l) => {
+    const { overlay: d, wrapper: n, content: m } = g();
+    return /* @__PURE__ */ t(
+      c,
+      {
+        className: d(),
+        isOpen: o,
+        onOpenChange: a,
+        defaultOpen: u,
+        isDismissable: r,
+        isKeyboardDismissDisabled: y,
+        children: /* @__PURE__ */ f(
+          h,
+          {
+            "data-dd-privacy": "allow",
+            ...i,
+            ref: l,
+            className: n(),
+            "data-unity-bottom-sheet": !0,
+            children: [
+              /* @__PURE__ */ t(w, {}),
+              /* @__PURE__ */ t(p, { className: m(), children: e })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+v.displayName = "BottomSheet";
+export {
+  v as BottomSheet,
+  g as bottomSheet
+};

package/dist/esm/components/bottom-sheet/parts/BottomSheetContent.d.mts

@@ -0,0 +1,70 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const bottomSheetContent: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    scroller: string[];
+}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    scroller: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    scroller: string[];
+}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export interface BottomSheetContentProps extends PropsWithChildren<VariantProps<typeof bottomSheetContent>> {
+    className?: string;
+}
+/**
+ * The `BottomSheetContent` component renders the main content area of a bottom sheet.
+ * It takes up the majority of the space between the header and footer components
+ * The content is scrollable when it exceeds the available space.
+ * @component
+ * @param {BottomSheetContentProps} props - The props for the `BottomSheetContent` component
+ * @example
+ * ```tsx
+ * import { BottomSheetContent } from '@payfit/unity-components'
+ *
+ * <BottomSheetContent>
+ *   Your panel content here
+ * </BottomSheetContent>
+ * ```
+ * @see {@link BottomSheetContentProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-bottomsheet--docs)
+ */
+declare const BottomSheetContent: import('react').ForwardRefExoticComponent<BottomSheetContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export { BottomSheetContent };

package/dist/esm/components/bottom-sheet/parts/BottomSheetContent.mjs

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { tv as y } from "tailwind-variants";
+const s = y({
+  slots: {
+    base: [
+      "uy-bg-surface-neutral uy-typography-body uy-text-content-neutral",
+      "uy-flex uy-flex-col uy-flex-1 uy-min-h-0 uy-overflow-hidden",
+      "uy-w-full"
+    ],
+    scroller: [
+      "uy-flex-1 uy-overflow-y-auto uy-overflow-x-hidden uy-p-300",
+      "uy-h-full uy-min-h-0"
+    ]
+  }
+}), f = n(
+  ({ children: o, ...t }, l) => {
+    const { base: r, scroller: u } = s();
+    return /* @__PURE__ */ e("section", { ref: l, className: r(), ...t, children: /* @__PURE__ */ e("div", { className: u(), children: o }) });
+  }
+);
+f.displayName = "BottomSheetContent";
+export {
+  f as BottomSheetContent,
+  s as bottomSheetContent
+};

package/dist/esm/components/bottom-sheet/parts/BottomSheetDragIndicator.d.mts

@@ -0,0 +1,54 @@
+export declare const bottomSheetDragIndicator: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    indicator: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    indicator: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    indicator: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+/**
+ * A drag indicator component that connects to the overlay state context and
+ * provides swipe-to-dismiss functionality for the SidePanel.
+ * @internal
+ */
+export declare function BottomSheetDragIndicator(): import("react/jsx-runtime").JSX.Element;
+export declare namespace BottomSheetDragIndicator {
+    var displayName: string;
+}