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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),l=require("tailwind-variants"),a=require("./SelectOption.context.js"),c=l.tv({base:"uy-typography-body",variants:{isDisabled:{true:"uy-text-content-neutral-disabled",false:"uy-text-content-neutral-low"}}}),e=i.forwardRef(({children:t},n)=>{const{isDisabled:s}=a.useSelectOptionContext(),o=c({isDisabled:s});return r.jsx("span",{className:o,ref:n,children:t})});e.displayName="SelectOptionHelper";exports.SelectOptionHelper=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react"),i=require("tailwind-variants"),l=require("./SelectOption.context.js"),c=i.tv({base:"uy-typography-body",variants:{isDisabled:{true:"uy-text-content-neutral-disabled",false:"uy-text-content-neutral-low"}}}),e=o.forwardRef(({children:t},n)=>{const{isDisabled:s}=l.useSelectOptionContext(),r=c({isDisabled:s});return a.jsx("span",{className:r,ref:n,"data-dd-privacy":"mask",children:t})});e.displayName="SelectOptionHelper";exports.SelectOptionHelper=e;

package/dist/cjs/components/selectable-button-group/SelectableButtonGroup.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),o=require("react"),l=require("react-aria"),S=require("react-stately"),b=require("tailwind-variants"),y=require("./SelectableButtonGroup.context.js"),a=b.tv({base:"uy-flex uy-gap-100"}),c=o.forwardRef((e,s)=>{const t=o.useRef(null),r=S.useToggleGroupState({...e,selectedKeys:e.value,defaultSelectedKeys:e.defaultValue,onSelectionChange:g=>{var n;(n=e.onChange)==null||n.call(e,Array.from(g))}}),{groupProps:i}=l.useToggleButtonGroup(e,r,t),d=a(),{ref:f}=l.mergeProps({ref:t},{ref:s});return u.jsx("div",{...i,className:d,ref:f,children:u.jsx(y.SelectableButtonGroupContext.Provider,{value:r,children:e.children})})});c.displayName="SelectableButtonGroup";exports.SelectableButtonGroup=c;exports.selectableButtonGroup=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),l=require("react"),o=require("react-aria"),S=require("react-stately"),b=require("tailwind-variants"),y=require("./SelectableButtonGroup.context.js"),a=b.tv({base:"uy-flex uy-gap-100"}),c=l.forwardRef((e,s)=>{const t=l.useRef(null),r=S.useToggleGroupState({...e,selectedKeys:e.value,defaultSelectedKeys:e.defaultValue,onSelectionChange:g=>{var n;(n=e.onChange)==null||n.call(e,Array.from(g))}}),{groupProps:i}=o.useToggleButtonGroup(e,r,t),d=a(),{ref:f}=o.mergeProps({ref:t},{ref:s});return u.jsx("div",{...i,className:d,ref:f,"data-dd-privacy":"allow",children:u.jsx(y.SelectableButtonGroupContext.Provider,{value:r,children:e.children})})});c.displayName="SelectableButtonGroup";exports.SelectableButtonGroup=c;exports.selectableButtonGroup=a;

package/dist/cjs/components/selectable-button-group/parts/SelectableButton.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),i=require("react-aria"),h=require("tailwind-variants"),S=require("../../icon/Icon.js"),B=require("../../spinner/Spinner.js"),j=require("../SelectableButtonGroup.context.js"),c=h.tv({slots:{base:["uy-group uy-border uy-border-solid uy-rounded-75 uy-py-100 uy-flex uy-gap-50 uy-items-center","uy-border-border-form-enabled uy-bg-surface-form-enabled","hover:uy-bg-surface-form-hover hover:uy-border-border-form-hover","active:uy-bg-surface-form-pressed active:uy-border-border-form-pressed","focus-visible:uy-bg-surface-form-focus focus-visible:uy-border-border-form-focus","focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring","data-[pressed=true]:uy-bg-surface-form-pressed data-[pressed=true]:uy-border-border-form-pressed data-[pressed=true]:uy-text-content-form-pressed","data-[selected=true]:uy-bg-surface-form-selected data-[selected=true]:uy-border-border-form-selected data-[selected=true]:uy-text-content-form-selected","disabled:uy-bg-surface-form-disabled disabled:uy-border-border-form-disabled disabled:uy-text-content-form-disabled disabled:uy-cursor-not-allowed","data-[loading=true]:uy-bg-surface-form-disabled data-[loading=true]:uy-border-border-form-disabled data-[loading=true]:uy-text-content-form-disabled data-[loading=true]:uy-cursor-wait"],icon:["uy-p-25","data-[loading=true]:uy-hidden"],label:["uy-typography-action"]},variants:{hasIcon:{true:{base:"uy-pl-100 uy-pr-200"},false:{base:"uy-px-200"}}},defaultVariants:{hasIcon:!1}}),b=o.forwardRef((s,f)=>{const a=o.useRef(null),u=o.useContext(j.SelectableButtonGroupContext);if(!u)throw new Error("SelectableButton must be used within a ToggleButtonGroup component");const{buttonProps:d,isPressed:y,isSelected:l}=i.useToggleButtonGroupItem({id:s.value,...s},u,a),{ref:m}=i.mergeProps({ref:a},{ref:f}),{isDisabled:p=!1,isLoading:r=!1,prefixIcon:t,children:n}=s,{base:g,icon:v,label:x}=c({hasIcon:!!t&&!r});return e.jsxs("button",{...d,ref:m,className:g(),disabled:d.disabled||p||r,"data-loading":r?!0:void 0,"data-pressed":y,"data-selected":l,"aria-busy":r,children:[t&&!r&&e.jsx(S.Icon,{src:l?`${t}Filled`:`${t}Outlined`,role:"presentation",className:v(),size:20}),r?e.jsxs(e.Fragment,{children:[e.jsx(B.Spinner,{label:"Loading",size:"small",color:"inherit"}),e.jsx("span",{className:"uy-sr-only",children:n})]}):e.jsx("span",{className:x(),children:n})]})});b.displayName="SelectableButton";exports.SelectableButton=b;exports.selectableButton=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),i=require("react-aria"),h=require("tailwind-variants"),S=require("../../icon/Icon.js"),B=require("../../spinner/Spinner.js"),j=require("../SelectableButtonGroup.context.js"),c=h.tv({slots:{base:["uy-group uy-border uy-border-solid uy-rounded-75 uy-py-100 uy-flex uy-gap-50 uy-items-center","uy-border-border-form-enabled uy-bg-surface-form-enabled","hover:uy-bg-surface-form-hover hover:uy-border-border-form-hover","active:uy-bg-surface-form-pressed active:uy-border-border-form-pressed","focus-visible:uy-bg-surface-form-focus focus-visible:uy-border-border-form-focus","focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring","data-[pressed=true]:uy-bg-surface-form-pressed data-[pressed=true]:uy-border-border-form-pressed data-[pressed=true]:uy-text-content-form-pressed","data-[selected=true]:uy-bg-surface-form-selected data-[selected=true]:uy-border-border-form-selected data-[selected=true]:uy-text-content-form-selected","disabled:uy-bg-surface-form-disabled disabled:uy-border-border-form-disabled disabled:uy-text-content-form-disabled disabled:uy-cursor-not-allowed","data-[loading=true]:uy-bg-surface-form-disabled data-[loading=true]:uy-border-border-form-disabled data-[loading=true]:uy-text-content-form-disabled data-[loading=true]:uy-cursor-wait"],icon:["uy-p-25","data-[loading=true]:uy-hidden"],label:["uy-typography-action"]},variants:{hasIcon:{true:{base:"uy-pl-100 uy-pr-200"},false:{base:"uy-px-200"}}},defaultVariants:{hasIcon:!1}}),b=o.forwardRef((s,f)=>{const a=o.useRef(null),u=o.useContext(j.SelectableButtonGroupContext);if(!u)throw new Error("SelectableButton must be used within a ToggleButtonGroup component");const{buttonProps:d,isPressed:y,isSelected:l}=i.useToggleButtonGroupItem({id:s.value,...s},u,a),{ref:m}=i.mergeProps({ref:a},{ref:f}),{isDisabled:p=!1,isLoading:r=!1,prefixIcon:t,children:n}=s,{base:g,icon:v,label:x}=c({hasIcon:!!t&&!r});return e.jsxs("button",{"data-dd-privacy":"allow",...d,ref:m,className:g(),disabled:d.disabled||p||r,"data-loading":r?!0:void 0,"data-pressed":y,"data-selected":l,"aria-busy":r,children:[t&&!r&&e.jsx(S.Icon,{src:l?`${t}Filled`:`${t}Outlined`,role:"presentation",className:v(),size:20}),r?e.jsxs(e.Fragment,{children:[e.jsx(B.Spinner,{label:"Loading",size:"small",color:"inherit"}),e.jsx("span",{className:"uy-sr-only",children:n})]}):e.jsx("span",{className:x(),children:n})]})});b.displayName="SelectableButton";exports.SelectableButton=b;exports.selectableButton=c;

package/dist/cjs/components/side-panel/SidePanel.d.ts

@@ -0,0 +1,152 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const sidePanel: 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 SidePanelProps extends PropsWithChildren<VariantProps<typeof sidePanel>> {
+    /**
+     * Controls whether the panel can be dismissed by clicking outside or using escape key.
+     * @default true
+     */
+    isDismissable?: boolean;
+    /**
+     * When true, pressing the Escape key will not close the panel.
+     * This is useful when you need to prevent accidental dismissal.
+     * @default false
+     */
+    isKeyboardDismissDisabled?: boolean;
+    /**
+     * Controls the open state of the panel 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 SidePanel component provides contextual space for supplementary content without fully
+ * interrupting the user's workflow. It slides in from the right on desktop and from the bottom on mobile.
+ *
+ * You can use SidePanel to display detailed information, forms, or secondary actions while keeping
+ * the main interface visible and accessible. It's ideal for multi-step processes, editing items in a list,
+ * or displaying contextual details.
+ *
+ * Control the panel using either uncontrolled mode with `defaultOpen` or controlled mode with
+ * `isOpen`/`onOpenChange` props. Customize dismissal behavior with `isDismissable` and
+ * `isKeyboardDismissDisabled` props.
+ * @param {SidePanelProps} props - The props for the SidePanel component
+ * @see {@link SidePanelProps} for all available props
+ * @example
+ * ```tsx
+ * import {
+ *   SidePanel,
+ *   SidePanelHeader,
+ *   SidePanelContent,
+ *   SidePanelFooter,
+ *   Button
+ * } from '@payfit/unity-components'
+ *
+ * // Uncontrolled example
+ * function BasicExample() {
+ *   return (
+ *     <DialogTrigger>
+ *       <Button>Open panel</Button>
+ *       <SidePanel>
+ *         <SidePanelHeader>Panel title</SidePanelHeader>
+ *         <SidePanelContent>Your content here</SidePanelContent>
+ *         <SidePanelFooter>
+ *           <Button variant="secondary">Cancel</Button>
+ *           <Button variant="primary">Save</Button>
+ *         </SidePanelFooter>
+ *       </SidePanel>
+ *     </DialogTrigger>
+ *   )
+ * }
+ *
+ * // Controlled example
+ * function ControlledExample() {
+ *   const [isOpen, setIsOpen] = useState(false)
+ *
+ *   return (
+ *     <>
+ *       <Button onPress={() => setIsOpen(true)}>Open panel</Button>
+ *
+ *       <SidePanel isOpen={isOpen} onOpenChange={setIsOpen}>
+ *         <SidePanelHeader>Panel title</SidePanelHeader>
+ *         <SidePanelContent>Your content here</SidePanelContent>
+ *         <SidePanelFooter>
+ *           <Button
+ *             variant="primary"
+ *             onPress={() => setIsOpen(false)}
+ *           >
+ *             Close
+ *           </Button>
+ *         </SidePanelFooter>
+ *       </SidePanel>
+ *     </>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const SidePanel: import('react').ForwardRefExoticComponent<SidePanelProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SidePanel };

package/dist/cjs/components/side-panel/SidePanel.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),a=require("react-aria-components"),x=require("tailwind-variants"),h=require("./parts/SidePanelDragIndicator.js"),t=x.tv({slots:{overlay:["md:uy-bg-gradient-to-r md:uy-from-grayscale-L12/0 md:uy-to-grayscale-L12/10 md:uy-from-70% md:uy-via-100%","uy-fixed uy-inset-0 uy-isolate","data-[entering]:uy-animate-fade-in data-[exiting]:uy-animate-fade-out"],wrapper:["uy-w-full md:uy-w-[400px]","uy-fixed uy-bottom-0 md:uy-inset-y-200 md:uy-right-200 uy-z-[100]","uy-bg-surface-neutral uy-rounded-t-200 md:uy-rounded-200 uy-shadow-flying","uy-flex uy-flex-col uy-h-[95svh] md:uy-max-h-[calc(100vh-2rem)]","uy-overflow-hidden","data-[entering]:uy-animate-slide-up-fade-in data-[exiting]:uy-animate-slide-down-fade-out md:data-[entering]:uy-animate-slide-right-fade-in md:data-[exiting]:uy-animate-slide-right-fade-out"],content:["uy-flex uy-flex-col uy-h-full uy-overflow-hidden uy-outline-none"]}}),i=g.forwardRef(({children:d,isOpen:n,onOpenChange:u,defaultOpen:r,isDismissable:l=!0,isKeyboardDismissDisabled:o=!1,...y},s)=>{const{overlay:m,wrapper:c,content:f}=t();return e.jsx(a.ModalOverlay,{className:m(),isOpen:n,onOpenChange:u,defaultOpen:r,isDismissable:l,isKeyboardDismissDisabled:o,children:e.jsxs(a.Modal,{"data-dd-privacy":"allow",...y,ref:s,className:c(),"data-unity-side-panel":!0,children:[e.jsx(h.SidePanelDragIndicator,{}),e.jsx(a.Dialog,{className:f(),children:d})]})})});i.displayName="SidePanel";exports.SidePanel=i;exports.sidePanel=t;

package/dist/cjs/components/side-panel/parts/SidePanelContent.d.ts

@@ -0,0 +1,71 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const sidePanelContent: 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 SidePanelContentProps extends PropsWithChildren<VariantProps<typeof sidePanelContent>> {
+    className?: string;
+}
+/**
+ * The `SidePanelContent` component renders the main content area of a side panel.
+ * It takes up the majority of the space between the header and footer components
+ * and adjusts for both mobile (bottom sheet) and desktop (side panel) views.
+ * The content is scrollable when it exceeds the available space.
+ * @component
+ * @param {SidePanelContentProps} props - The props for the `SidePanelContent` component
+ * @example
+ * ```tsx
+ * import { SidePanelContent } from '@payfit/unity-components'
+ *
+ * <SidePanelContent>
+ *   Your panel content here
+ * </SidePanelContent>
+ * ```
+ * @see {@link SidePanelContentProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const SidePanelContent: import('react').ForwardRefExoticComponent<SidePanelContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SidePanelContent };

package/dist/cjs/components/side-panel/parts/SidePanelContent.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),i=require("tailwind-variants"),n=i.tv({slots:{base:["uy-bg-surface-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"]}}),t=a.forwardRef(({children:l,...o},s)=>{const{base:u,scroller:r}=n();return e.jsx("section",{ref:s,className:u(),...o,children:e.jsx("div",{className:r(),children:l})})});t.displayName="SidePanelContent";exports.SidePanelContent=t;exports.sidePanelContent=n;

package/dist/cjs/components/side-panel/parts/SidePanelDragIndicator.d.ts

@@ -0,0 +1,54 @@
+export declare const sidePanelDragIndicator: 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 SidePanelDragIndicator(): import("react/jsx-runtime").JSX.Element;
+export declare namespace SidePanelDragIndicator {
+    var displayName: string;
+}

package/dist/cjs/components/side-panel/parts/SidePanelDragIndicator.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("react"),v=require("@use-gesture/react"),P=require("react-aria-components"),S=require("tailwind-variants"),h=require("../../../hooks/use-breakpoint-listener.js"),c=S.tv({slots:{base:["md:uy-hidden uy-mx-auto uy-pt-300 uy-w-500","uy-cursor-grab uy-touch-action-none"],indicator:"uy-h-50 uy-rounded-pill uy-bg-content-neutral-lowest"}}),q=100;function l(){const n=o.useRef(null),r=o.useContext(P.OverlayTriggerStateContext),s=h.useBreakpointListener(),{base:u,indicator:d}=c(),y=s==="xs"||s==="sm",m=v.useDrag(f=>{var a;const{movement:[I,t],direction:[R,g],intentional:p,cancel:x,last:D,event:b}=f;if(!y){x();return}b.preventDefault();const e=(a=n.current)==null?void 0:a.closest("[data-unity-side-panel]");if(e){if(t<0){e.style.transform="translate3d(0, 0, 0)";return}e.style.transform=`translate3d(0, ${t}px, 0)`,e.style.transition="none",D&&p&&(t>q||g>0?r&&setTimeout(()=>{r.close()},50):(e.style.transform="translate3d(0, 0, 0)",e.style.transition="transform 0.3s ease"))}},{axis:"y",filterTaps:!0,threshold:5});return i.jsx("div",{className:u(),"aria-hidden":"true",ref:n,...m(),children:i.jsx("div",{className:d()})})}l.displayName="SidePanelDragIndicator";exports.SidePanelDragIndicator=l;exports.sidePanelDragIndicator=c;

package/dist/cjs/components/side-panel/parts/SidePanelFooter.d.ts

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const sidePanelFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export interface SidePanelFooterProps extends PropsWithChildren<VariantProps<typeof sidePanelFooter>> {
+    className?: string;
+}
+/**
+ * The `SidePanelFooter` component renders the footer section of a side panel.
+ * It provides a space for action buttons and stays fixed at the bottom of the panel.
+ * On mobile devices, it respects the safe area to avoid being obscured by device UI elements.
+ * @component
+ * @param {SidePanelFooterProps} props - The props for the `SidePanelFooter` component
+ * @example
+ * ```tsx
+ * import { SidePanelFooter, Button } from '@payfit/unity-components'
+ *
+ * <SidePanelFooter>
+ *   <Button variant="secondary">Cancel</Button>
+ *   <Button>Save</Button>
+ * </SidePanelFooter>
+ * ```
+ * @see {@link SidePanelFooterProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const SidePanelFooter: import('react').ForwardRefExoticComponent<SidePanelFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SidePanelFooter };

package/dist/cjs/components/side-panel/parts/SidePanelFooter.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),y=require("react"),n=require("tailwind-variants"),e=n.tv({base:["uy-py-200 uy-px-300 uy-w-full","uy-flex uy-items-center uy-justify-end uy-gap-100 uy-shrink-0","uy-bg-surface-neutral uy-rounded-bl-200 uy-rounded-br-200 uy-border-t uy-border-solid uy-border-t-solid uy-border-border-neutral","uy-sticky uy-bottom-0 uy-z-10","uy-mt-auto","uy-pb-[max(env(safe-area-inset-bottom),var(--uy-spacing-200))] md:uy-pb-200"]}),r=y.forwardRef(({children:t,...u},o)=>a.jsx("footer",{ref:o,className:e(),...u,children:t}));r.displayName="SidePanelFooter";exports.SidePanelFooter=r;exports.sidePanelFooter=e;

package/dist/cjs/components/side-panel/parts/SidePanelHeader.d.ts

@@ -0,0 +1,75 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const sidePanelHeader: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    content: string[];
+    heading: string[];
+}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    content: string[];
+    heading: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    content: string[];
+    heading: string[];
+}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export interface SidePanelHeaderProps extends PropsWithChildren<VariantProps<typeof sidePanelHeader>> {
+    className?: string;
+}
+/**
+ * The `SidePanelHeader` component renders the header section of a side panel.
+ * It includes a title and close button, and on mobile it displays a drag handle for bottom sheet interaction.
+ * @component
+ * @param {SidePanelHeaderProps} props - The props for the `SidePanelHeader` component
+ * @example
+ * ```tsx
+ * import { SidePanelHeader } from '@payfit/unity-components'
+ *
+ * <SidePanelHeader>Title of the panel</SidePanelHeader>
+ * ```
+ * @see {@link SidePanelHeaderProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const SidePanelHeader: import('react').ForwardRefExoticComponent<SidePanelHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { SidePanelHeader };

package/dist/cjs/components/side-panel/parts/SidePanelHeader.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),c=require("react-aria-components"),y=require("tailwind-variants"),d=require("../../icon-button/CircularIconButton.js"),t=y.tv({slots:{base:["uy-py-200 uy-px-300 uy-w-full","uy-flex uy-flex-col uy-shrink-0","uy-bg-surface-neutral uy-rounded-tl-200 uy-rounded-tr-200 uy-shadow-raising","uy-sticky uy-top-0 uy-z-10"],content:["uy-flex uy-items-center uy-justify-between uy-w-full"],heading:["uy-typography-h2 md:uy-typography-h3 uy-text-content-neutral uy-truncate"]}}),n=i.forwardRef(({children:r,...u},a)=>{const{base:s,content:l,heading:o}=t();return e.jsx("header",{ref:a,className:s(),...u,children:e.jsxs("div",{className:l(),children:[e.jsx(c.Heading,{slot:"title",className:o(),children:r}),e.jsx(d.CircularIconButton,{asElement:"button",slot:"close",icon:"CloseOutlined",title:"Close",size:"large",color:"content.neutral.low"})]})})});n.displayName="SidePanelHeader";exports.SidePanelHeader=n;exports.sidePanelHeader=t;

package/dist/cjs/components/spinner/Spinner.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),p=require("tailwind-variants"),m=require("../../hooks/use-id.js"),x=p.tv({slots:{base:"uy-flex uy-flex-col uy-items-center uy-gap-200",indicator:"",label:"uy-typography-body uy-text-left uy-truncate"},variants:{size:{small:{indicator:"uy-w-200 uy-h-200",label:"uy-hidden"},medium:{indicator:"uy-w-300 uy-h-300"}},color:{primary:{indicator:"uy-text-content-primary"},inverted:{indicator:"uy-text-content-inverted",label:"uy-text-content-inverted"},inherit:{indicator:""}}},defaultVariants:{size:"small",color:"primary"}});function r({label:a,color:s,size:i,role:t="status",...l},c){const n=`uy-spinner-label-${m()}`,{base:o,indicator:d,label:u}=x({size:i,color:s});return e.jsxs("div",{...l,ref:c,role:t,className:o(),"aria-labelledby":t==="status"?n:void 0,"aria-live":"polite",children:[e.jsxs("svg",{viewBox:"0 0 100 100","aria-hidden":"true",className:d(),children:[e.jsx("title",{children:"Loading"}),e.jsx("circle",{cx:"50",cy:"50",r:"45",fill:"none",stroke:"currentColor",style:{"--r":"45px","--1deg":"calc(2 * pi * var(--r) / 360)",strokeWidth:"9.6px",shapeRendering:"geometricPrecision",strokeDasharray:"calc(40 * var(--1deg)) calc(80 * var(--1deg))",transformOrigin:"50% 50%",animation:"arc-shrink 1.4s ease-in-out infinite, spin 2s linear infinite"}})]}),e.jsx("span",{id:n,className:u(),"aria-hidden":i!=="small",children:a})]})}r.displayName="Spinner";const h=y.forwardRef(r);exports.Spinner=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),p=require("tailwind-variants"),m=require("../../hooks/use-id.js"),x=p.tv({slots:{base:"uy-flex uy-flex-col uy-items-center uy-gap-200",indicator:"",label:"uy-typography-body uy-text-left uy-truncate"},variants:{size:{small:{indicator:"uy-w-200 uy-h-200",label:"uy-hidden"},medium:{indicator:"uy-w-300 uy-h-300"}},color:{primary:{indicator:"uy-text-content-primary"},inverted:{indicator:"uy-text-content-inverted",label:"uy-text-content-inverted"},inherit:{indicator:""}}},defaultVariants:{size:"small",color:"primary"}});function n({label:a,color:s,size:i,role:t="status",...l},c){const r=`uy-spinner-label-${m()}`,{base:o,indicator:d,label:u}=x({size:i,color:s});return e.jsxs("div",{...l,ref:c,role:t,className:o(),"aria-labelledby":t==="status"?r:void 0,"aria-live":"polite","data-dd-privacy":"allow",children:[e.jsxs("svg",{viewBox:"0 0 100 100","aria-hidden":"true",className:d(),children:[e.jsx("title",{children:"Loading"}),e.jsx("circle",{cx:"50",cy:"50",r:"45",fill:"none",stroke:"currentColor",style:{"--r":"45px","--1deg":"calc(2 * pi * var(--r) / 360)",strokeWidth:"9.6px",shapeRendering:"geometricPrecision",strokeDasharray:"calc(40 * var(--1deg)) calc(80 * var(--1deg))",transformOrigin:"50% 50%",animation:"arc-shrink 1.4s ease-in-out infinite, spin 2s linear infinite"}})]}),e.jsx("span",{id:r,className:u(),"aria-hidden":i!=="small",children:a})]})}n.displayName="Spinner";const h=y.forwardRef(n);exports.Spinner=h;

package/dist/cjs/components/tabs/Tabs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),b=require("react-aria-components"),u=require("./Tabs.context.js"),T=require("./Tabs.variant.js"),t=c.forwardRef(({children:a,variant:e,scrollable:s=!1,...n},o)=>{const{base:i}=T.tabsVariant({variant:e,scrollable:s});return r.jsx(u.TabsProvider,{variant:e,scrollable:s,children:r.jsx(b.Tabs,{ref:o,className:i(),...n,children:a})})});t.displayName="Tabs";exports.Tabs=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("react"),b=require("react-aria-components"),u=require("./Tabs.context.js"),d=require("./Tabs.variant.js"),r=c.forwardRef(({children:t,variant:e,scrollable:a=!1,...n},o)=>{const{base:i}=d.tabsVariant({variant:e,scrollable:a});return s.jsx(u.TabsProvider,{variant:e,scrollable:a,children:s.jsx(b.Tabs,{"data-dd-privacy":"allow",ref:o,className:i(),...n,children:t})})});r.displayName="Tabs";exports.Tabs=r;

package/dist/cjs/components/tabs/Tabs.variant.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("tailwind-variants"),t=e.tv({slots:{base:"uy-w-full",tabList:"uy-flex",tab:["uy-flex uy-relative uy-shrink-0 uy-gap-100 uy-whitespace-nowrap uy-min-w-[3ch] uy-text-center uy-text-content-form-enabled uy-text-action uy-pt-150 uy-pb-150 uy-pl-200 uy-pr-200 uy-rounded-25 uy-cursor-pointer",'data-[selected]:after:uy-content:" " data-[selected]:after:uy-w-full data-[selected]:after:uy-h-[4px] data-[selected]:after:uy-absolute data-[selected]:after:uy-bottom-[-1px] data-[selected]:after:uy-left-0 data-[selected]:after:uy-right-0',"hover:uy-cursor-pointer focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-[4px]"]},variants:{variant:{primary:{tab:"data-[selected]:after:uy-bg-border-form-active"},neutral:{tab:"data-[selected]:after:uy-bg-content-neutral"}},scrollable:{true:{tabList:""},false:{base:"",tabList:"uy-border-b-[1.25px] uy-border-b-border-form-enabled"}}},defaultVariants:{variant:"primary",scrollable:!1}});exports.tabsVariant=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("tailwind-variants"),t=e.tv({slots:{base:"uy-w-full",tabList:"uy-flex",tab:["uy-flex uy-relative uy-shrink-0 uy-gap-100 uy-whitespace-nowrap uy-min-w-[3ch] uy-text-center uy-text-content-form-enabled uy-text-action uy-pt-150 uy-pb-150 uy-pl-200 uy-pr-200 uy-rounded-25 uy-cursor-pointer",'data-[selected]:after:uy-content:" " data-[selected]:after:uy-w-full data-[selected]:after:uy-h-[4px] data-[selected]:after:uy-absolute data-[selected]:after:uy-bottom-[-1px] data-[selected]:after:uy-left-0 data-[selected]:after:uy-right-0',"hover:uy-cursor-pointer focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-[4px]"]},variants:{variant:{primary:{tab:"data-[selected]:after:uy-bg-border-form-active"},neutral:{tab:"data-[selected]:after:uy-bg-content-neutral"}},scrollable:{true:{tabList:""},false:{base:"",tabList:"uy-border-b-[1.25px] uy-border-solid uy-border-b-border-form-enabled"}}},defaultVariants:{variant:"primary",scrollable:!1}});exports.tabsVariant=t;

package/dist/cjs/components/tabs/parts/TabList.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),l=require("react"),g=require("react-aria-components"),N=require("../Tabs.context.js"),W=require("../Tabs.variant.js"),L=require("./NavigationButton.js"),v=l.forwardRef(({children:f},b)=>{const e=l.useRef(null),[y,m]=l.useState(!1),[S,x]=l.useState(!0),{variant:R,scrollable:d}=N.useTabsContext(),{tabList:h}=W.tabsVariant({variant:R,scrollable:d}),T=t=>{const{scrollLeft:o,scrollWidth:s,clientWidth:r}=t.currentTarget;m(o>0),x(o+r<s)},j=()=>{var r;const t=(r=e.current)==null?void 0:r.querySelectorAll("div[role=tab]");if(!e.current||!t)return 0;const{scrollLeft:o}=e.current,s=Array.from(t);for(let a=s.length-1;a>=0;a--){const c=s[a];if(c.offsetLeft<o)return-c.offsetWidth}return 0},q=()=>{var c;const t=(c=e.current)==null?void 0:c.querySelectorAll("div[role=tab]");if(!e.current||!t)return 0;const{scrollLeft:o,clientWidth:s}=e.current,r=Array.from(t),a=o+s;for(let i=0;i<r.length-1;i++){const u=r[i];if(u.offsetLeft+u.offsetWidth>a)return u.offsetWidth}return 0};return d?n.jsxs("div",{className:"uy-relative",children:[y&&n.jsx(L.NavigationButton,{direction:"left",onPress:()=>{var t;(t=e.current)==null||t.scrollBy({behavior:"smooth",left:j()})}}),n.jsx("div",{ref:e,"data-testid":"scrollable-tab-list",className:"uy-overflow-x-auto uy-overflow-y-hidden uy-border-b-[1.25px] uy-border-b-border-form-enabled",onScroll:T,children:n.jsx(g.TabList,{ref:b,className:h(),children:f})}),S&&n.jsx(L.NavigationButton,{direction:"right",onPress:()=>{var t;(t=e.current)==null||t.scrollBy({behavior:"smooth",left:q()})}})]}):n.jsx(g.TabList,{ref:b,className:h(),children:f})});v.displayName="TabList";exports.TabList=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),l=require("react"),g=require("react-aria-components"),N=require("../Tabs.context.js"),W=require("../Tabs.variant.js"),L=require("./NavigationButton.js"),y=l.forwardRef(({children:f},b)=>{const e=l.useRef(null),[v,m]=l.useState(!1),[S,x]=l.useState(!0),{variant:R,scrollable:d}=N.useTabsContext(),{tabList:h}=W.tabsVariant({variant:R,scrollable:d}),T=t=>{const{scrollLeft:o,scrollWidth:s,clientWidth:r}=t.currentTarget;m(o>0),x(o+r<s)},j=()=>{var r;const t=(r=e.current)==null?void 0:r.querySelectorAll("div[role=tab]");if(!e.current||!t)return 0;const{scrollLeft:o}=e.current,s=Array.from(t);for(let a=s.length-1;a>=0;a--){const c=s[a];if(c.offsetLeft<o)return-c.offsetWidth}return 0},q=()=>{var c;const t=(c=e.current)==null?void 0:c.querySelectorAll("div[role=tab]");if(!e.current||!t)return 0;const{scrollLeft:o,clientWidth:s}=e.current,r=Array.from(t),a=o+s;for(let i=0;i<r.length-1;i++){const u=r[i];if(u.offsetLeft+u.offsetWidth>a)return u.offsetWidth}return 0};return d?n.jsxs("div",{className:"uy-relative",children:[v&&n.jsx(L.NavigationButton,{direction:"left",onPress:()=>{var t;(t=e.current)==null||t.scrollBy({behavior:"smooth",left:j()})}}),n.jsx("div",{ref:e,"data-testid":"scrollable-tab-list",className:"uy-overflow-x-auto uy-overflow-y-hidden uy-border-b-[1.25px] uy-border-solid uy-border-b-border-form-enabled",onScroll:T,children:n.jsx(g.TabList,{ref:b,className:h(),children:f})}),S&&n.jsx(L.NavigationButton,{direction:"right",onPress:()=>{var t;(t=e.current)==null||t.scrollBy({behavior:"smooth",left:q()})}})]}):n.jsx(g.TabList,{ref:b,className:h(),children:f})});y.displayName="TabList";exports.TabList=y;

package/dist/cjs/components/text/Text.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),g=require("react"),u=require("./Text.variants.js"),b={inherit:"span",h1:"h1",h2:"h2",h3:"h3",h4:"h4",overline:"h6",subtitle:"h5",displayTitle:"h1",displayBody:"p",body:"p",bodyStrong:"strong",bodySmall:"small",bodySmallStrong:"strong",bodyLarge:"p",bodyLargeStrong:"strong",action:"span",actionLarge:"span",actionSmall:"span"},s=g.forwardRef(({children:o,variant:e,color:n,isTruncated:a,lineClamp:t,asElement:r,className:l,...i},c)=>{const d=t!==void 0,m=u.text({variant:e,color:n,isTruncated:a,isLineClamped:d,className:l}),y=b[e??"inherit"],h=r??y;return p.jsx(h,{...i,ref:c,className:m,style:{"--uy-text-line-clamp":t},children:o})});s.displayName="Text";exports.Text=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),g=require("react"),u=require("./Text.variants.js"),b={inherit:"span",h1:"h1",h2:"h2",h3:"h3",h4:"h4",overline:"h6",subtitle:"h5",displayTitle:"h1",displayBody:"p",body:"p",bodyStrong:"strong",bodySmall:"small",bodySmallStrong:"strong",bodyLarge:"p",bodyLargeStrong:"strong",action:"span",actionLarge:"span",actionSmall:"span"},s=g.forwardRef(({children:o,variant:e,color:a,isTruncated:n,lineClamp:t,asElement:r,className:l,...i},c)=>{const d=t!==void 0,m=u.text({variant:e,color:a,isTruncated:n,isLineClamped:d,className:l}),y=b[e??"inherit"],p=r??y;return h.jsx(p,{"data-dd-privacy":"mask",...i,ref:c,className:m,style:{"--uy-text-line-clamp":t},children:o})});s.displayName="Text";exports.Text=s;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),w=require("react"),j=require("react-aria-components"),M=require("react-intl"),q=require("tailwind-variants"),z=require("../../hooks/use-resizable.js"),L=require("../icon/Icon.js"),R=require("../spinner/Spinner.js"),f=q.tv({slots:{base:"uy-flex uy-border uy-border-solid uy-rounded-100 focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2 active:uy-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",input:"uy-flex-grow uy-flex-shrink uy-outline-none uy-typography-body placeholder:uy-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"},variants:{isInvalid:{true:{base:"uy-border-border-form-error uy-bg-surface-form-error",inputWrapper:"uy-bg-surface-form-error",input:"uy-bg-surface-form-error",state:"uy-text-content-form-error"}},isReadOnly:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",inputWrapper:"uy-border-border-form-disabled uy-bg-surface-form-disabled",input:"uy-bg-surface-form-disabled uy-text-content-form-readonly"}},isDisabled:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",inputWrapper:"uy-bg-surface-form-disabled uy-text-content-form-disabled",input:"uy-bg-surface-form-disabled uy-text-content-form-disabled"}}},compoundVariants:[{isInvalid:!1,isDisabled:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled uy-bg-surface-form-enabled",inputWrapper:"uy-border-border-form-enabled uy-bg-surface-form-enabled",input:"uy-text-content-form-enabled uy-bg-surface-form-enabled",state:"uy-text-content-neutral-disabled"}}],defaultVariants:{isInvalid:!1,isDisabled:!1,isReadOnly:!1}}),y=w.forwardRef(({isInvalid:o,isLoading:n,isDisabled:r,isReadOnly:t,isResizable:u=!1,...c},b)=>{const a=M.useIntl(),{containerRef:i,handleResizeStart:m}=z.useResizable({isDisabled:!u||r||t}),{base:p,inputWrapper:x,input:g,state:h,resizeHandle:v}=f({isInvalid:o,isDisabled:r,isReadOnly:t});return e.jsxs("div",{ref:i,className:p(),children:[e.jsxs("div",{className:x(),children:[e.jsx(j.TextArea,{...c,ref:b,className:g(),"aria-busy":n}),e.jsxs("div",{className:h(),children:[n&&e.jsx(R.Spinner,{color:"inherit",size:"small",label:a.formatMessage({id:"unity:component:form-field:form-input:spinner:label",defaultMessage:"Loading"})}),o&&e.jsx(L.Icon,{src:"WarningCircleOutlined",color:"content.form.invalid",alt:a.formatMessage({id:"unity:component:form-field:form-input:error:alt",defaultMessage:"Error"})})]})]}),u&&!r&&!t&&e.jsx("div",{className:v(),onMouseDown:m,role:"button",tabIndex:0,"aria-label":a.formatMessage({id:"unity:component:form-field:textarea:resize-handle:label",defaultMessage:"Resize textarea"}),onKeyDown:s=>{var l,d;(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),(d=(l=i.current)==null?void 0:l.querySelector("textarea"))==null||d.focus())},children:e.jsxs("svg",{role:"presentation",width:"8",height:"8",viewBox:"0 0 8 8",fill:"none",children:[e.jsx("path",{d:"M0.72774 8L0 7.28745L7.27226 0L8 0.712547L0.72774 8Z",fill:"#8B8D98"}),e.jsx("path",{d:"M4.73172 8L4 7.27073L7.26828 4L8 4.72927L4.73172 8Z",fill:"#8B8D98"})]})})]})});y.displayName="TextArea";exports.TextArea=y;exports.textArea=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),w=require("react"),j=require("react-aria-components"),M=require("react-intl"),q=require("tailwind-variants"),z=require("../../hooks/use-resizable.js"),L=require("../icon/Icon.js"),R=require("../spinner/Spinner.js"),f=q.tv({slots:{base:"uy-flex uy-border uy-border-solid uy-rounded-100 focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2 active:uy-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",input:"uy-flex-grow uy-flex-shrink uy-outline-none uy-typography-body placeholder:uy-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"},variants:{isInvalid:{true:{base:"uy-border-border-form-error uy-bg-surface-form-error",inputWrapper:"uy-bg-surface-form-error",input:"uy-bg-surface-form-error",state:"uy-text-content-form-error"}},isReadOnly:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",inputWrapper:"uy-border-border-form-disabled uy-bg-surface-form-disabled",input:"uy-bg-surface-form-disabled uy-text-content-form-readonly"}},isDisabled:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",inputWrapper:"uy-bg-surface-form-disabled uy-text-content-form-disabled",input:"uy-bg-surface-form-disabled uy-text-content-form-disabled"}}},compoundVariants:[{isInvalid:!1,isDisabled:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled uy-bg-surface-form-enabled",inputWrapper:"uy-border-border-form-enabled uy-bg-surface-form-enabled",input:"uy-text-content-form-enabled uy-bg-surface-form-enabled",state:"uy-text-content-neutral-disabled"}}],defaultVariants:{isInvalid:!1,isDisabled:!1,isReadOnly:!1}}),y=w.forwardRef(({isInvalid:o,isLoading:n,isDisabled:r,isReadOnly:t,isResizable:u=!1,...c},b)=>{const a=M.useIntl(),{containerRef:i,handleResizeStart:m}=z.useResizable({isDisabled:!u||r||t}),{base:p,inputWrapper:x,input:g,state:h,resizeHandle:v}=f({isInvalid:o,isDisabled:r,isReadOnly:t});return e.jsxs("div",{ref:i,className:p(),children:[e.jsxs("div",{className:x(),children:[e.jsx(j.TextArea,{"data-dd-privacy":"mask",...c,ref:b,className:g(),"aria-busy":n}),e.jsxs("div",{className:h(),children:[n&&e.jsx(R.Spinner,{color:"inherit",size:"small",label:a.formatMessage({id:"unity:component:form-field:form-input:spinner:label",defaultMessage:"Loading"})}),o&&e.jsx(L.Icon,{src:"WarningCircleOutlined",color:"content.form.invalid",alt:a.formatMessage({id:"unity:component:form-field:form-input:error:alt",defaultMessage:"Error"})})]})]}),u&&!r&&!t&&e.jsx("div",{className:v(),onMouseDown:m,role:"button",tabIndex:0,"aria-label":a.formatMessage({id:"unity:component:form-field:textarea:resize-handle:label",defaultMessage:"Resize textarea"}),onKeyDown:s=>{var l,d;(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),(d=(l=i.current)==null?void 0:l.querySelector("textarea"))==null||d.focus())},children:e.jsxs("svg",{role:"presentation",width:"8",height:"8",viewBox:"0 0 8 8",fill:"none",children:[e.jsx("path",{d:"M0.72774 8L0 7.28745L7.27226 0L8 0.712547L0.72774 8Z",fill:"#8B8D98"}),e.jsx("path",{d:"M4.73172 8L4 7.27073L7.26828 4L8 4.72927L4.73172 8Z",fill:"#8B8D98"})]})})]})});y.displayName="TextArea";exports.TextArea=y;exports.textArea=f;

package/dist/cjs/components/toast/UnityToast.d.ts

@@ -49,7 +49,7 @@ export interface UnityToastProps extends Required<Pick<VariantProps<typeof unity
  * - `ToastAction`(optional): The action on the toast
  */
 declare const UnityToast: {
-    ({ children, onClose, variant, inline, }: PropsWithChildren<UnityToastProps>): import("react/jsx-runtime").JSX.Element;
+    ({ children, onClose, variant, inline, ...rest }: PropsWithChildren<UnityToastProps>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { UnityToast };

package/dist/cjs/components/toast/UnityToast.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("react"),i=require("react-intl"),c=require("tailwind-variants"),y=require("../icon-button/IconButton.js"),d=require("../icon/Icon.js"),m=require("./parts/ToastTitle.js"),x=require("./Toast.context.js"),b=c.tv({base:"sm:uy-w-[416px] uy-border uy-border-solid uy-rounded-75 uy-text-content-neutral uy-bg-surface-neutral uy-shadow-floating uy-p-100 uy-flex uy-gap-125",variants:{variant:{success:"uy-border-border-success",error:"uy-border-border-danger"}}}),f=e=>{const n=o.isValidElement(e)&&e.type===o.Fragment?e.props.children:e;if(o.Children.toArray(n).filter(r=>o.isValidElement(r)&&r.type===m.ToastTitle).length!==1)throw new Error("UnityToast must have one ToastTitle component")},l=({children:e,onClose:n,variant:s,inline:r=!0})=>{const a=i.useIntl();f(e);const u=b({variant:s});return t.jsx(x.ToastProvider,{inline:r,children:t.jsxs("div",{tabIndex:-1,role:s==="error"?"alert":"status","aria-atomic":"true","aria-live":s==="error"?"assertive":"polite",className:u,children:[t.jsxs("div",{className:"uy-flex uy-flex-row uy-grow",children:[t.jsx(d.Icon,{src:s==="success"?"CheckCircleFilled":"WarningCircleFilled",color:s==="success"?"content.success":"content.danger",className:"uy-mt-100",alt:a.formatMessage({id:"unity:component:toast:icon:status",defaultMessage:"Status"})}),t.jsx("div",{className:`${r?"uy-flex-col":"uy-flex-row uy-justify-between"} uy-flex uy-grow uy-ml-125`,children:e})]}),t.jsx("div",{role:"presentation",className:"uy-border-l-[1px] uy-border-border-neutral uy-self-stretch"}),t.jsx(y.IconButton,{icon:"CloseOutlined",iconRole:"presentation",label:a.formatMessage({id:"unity:component:toast:close:label",defaultMessage:"Close"}),variant:"ghost",color:"neutral",onClick:n})]})})};l.displayName="UnityToast";exports.UnityToast=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("react"),c=require("react-intl"),y=require("tailwind-variants"),d=require("../icon-button/IconButton.js"),m=require("../icon/Icon.js"),x=require("./parts/ToastTitle.js"),b=require("./Toast.context.js"),f=y.tv({base:"sm:uy-w-[416px] uy-border uy-border-solid uy-rounded-75 uy-text-content-neutral uy-bg-surface-neutral uy-shadow-floating uy-p-100 uy-flex uy-gap-125",variants:{variant:{success:"uy-border-border-success",error:"uy-border-border-danger"}}}),g=e=>{const a=o.isValidElement(e)&&e.type===o.Fragment?e.props.children:e;if(o.Children.toArray(a).filter(r=>o.isValidElement(r)&&r.type===x.ToastTitle).length!==1)throw new Error("UnityToast must have one ToastTitle component")},l=({children:e,onClose:a,variant:s,inline:r=!0,...u})=>{const n=c.useIntl();g(e);const i=f({variant:s});return t.jsx(b.ToastProvider,{inline:r,children:t.jsxs("div",{"data-dd-privacy":"mask",...u,tabIndex:-1,role:s==="error"?"alert":"status","aria-atomic":"true","aria-live":s==="error"?"assertive":"polite",className:i,children:[t.jsxs("div",{className:"uy-flex uy-flex-row uy-grow",children:[t.jsx(m.Icon,{src:s==="success"?"CheckCircleFilled":"WarningCircleFilled",color:s==="success"?"content.success":"content.danger",className:"uy-mt-100",alt:n.formatMessage({id:"unity:component:toast:icon:status",defaultMessage:"Status"})}),t.jsx("div",{className:`${r?"uy-flex-col":"uy-flex-row uy-justify-between"} uy-flex uy-grow uy-ml-125`,children:e})]}),t.jsx("div",{role:"presentation",className:"uy-border-l-[1px] uy-border-solid uy-border-border-neutral uy-self-stretch"}),t.jsx(d.IconButton,{icon:"CloseOutlined",iconRole:"presentation",label:n.formatMessage({id:"unity:component:toast:close:label",defaultMessage:"Close"}),variant:"ghost",color:"neutral",onClick:a})]})})};l.displayName="UnityToast";exports.UnityToast=l;

package/dist/cjs/components/toast/toast.d.ts

@@ -4,6 +4,7 @@ import { UnityToastProps } from './UnityToast.js';
 interface Base {
     title: ReactNode;
     content?: ReactNode;
+    datadogPrivacy?: 'allow' | 'mask' | 'hidden';
 }
 interface WithAction {
     action: ReactNode;
@@ -39,5 +40,5 @@ interface ErrorParamsWithAction extends Base, WithAction {
  * @param prop.actionOnPress (optional) the function to trigger when click on the action
  * @param prop.duration (optional) to override the toast duration
  */
-declare function toast({ title, content, variant, action, actionOnPress, duration, }: SuccessParams | ErrorParams | SuccessParamsWithAction | ErrorParamsWithAction): string;
+declare function toast({ title, content, variant, action, actionOnPress, duration, datadogPrivacy, }: SuccessParams | ErrorParams | SuccessParamsWithAction | ErrorParamsWithAction): string;
 export { toast };

package/dist/cjs/components/toast/toast.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("react-hot-toast"),c=require("./parts/ToastAction.js"),T=require("./parts/ToastContent.js"),d=require("./parts/ToastTitle.js"),f=require("./ToastManager.js"),j=require("./UnityToast.js"),q=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},i=q(l);function h({title:t,content:e,variant:s,action:n,actionOnPress:r,duration:u}){return i.default.custom(a=>o.jsxs(j.UnityToast,{onClose:()=>{i.default.dismiss(a.id)},variant:s,inline:!!e,children:[o.jsx(d.ToastTitle,{children:t}),e?o.jsx(T.ToastContent,{children:e}):null,n?o.jsx(c.ToastAction,{onPress:r,children:n}):null]}),{duration:u??f.TOAST_CONFIG[s].duration})}exports.toast=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),c=require("react-hot-toast"),d=require("./parts/ToastAction.js"),T=require("./parts/ToastContent.js"),f=require("./parts/ToastTitle.js"),j=require("./ToastManager.js"),q=require("./UnityToast.js"),h=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},i=h(c);function m({title:t,content:e,variant:s,action:n,actionOnPress:r,duration:a,datadogPrivacy:u="mask"}){return i.default.custom(l=>o.jsxs(q.UnityToast,{onClose:()=>{i.default.dismiss(l.id)},variant:s,inline:!!e,"data-dd-privacy":u,children:[o.jsx(f.ToastTitle,{children:t}),e?o.jsx(T.ToastContent,{children:e}):null,n?o.jsx(d.ToastAction,{onPress:r,children:n}):null]}),{duration:a??j.TOAST_CONFIG[s].duration})}exports.toast=m;

package/dist/cjs/components/tooltip/Tooltip.d.ts

@@ -4,4 +4,4 @@ interface TooltipProps {
     children: ReactElement;
 }
 declare function Tooltip({ title, children }: TooltipProps): import("react/jsx-runtime").JSX.Element;
-export default Tooltip;
+export { Tooltip };

package/dist/cjs/components/tooltip/Tooltip.js

@@ -1 +1 @@
-"use strict";const t=require("react/jsx-runtime"),u=require("react-aria-components"),s=require("../button/Button.js"),o=e=>e.type===s.Button||e.type===u.Button;function n({title:e,children:r}){return t.jsxs(u.TooltipTrigger,{delay:500,closeDelay:1500,children:[r,t.jsx(u.Tooltip,{offset:o(r)?4:8,className:"uy-inline-flex uy-rounded-50 uy-pl-100 uy-pr-100 uy-pt-50 uy-pb-50 uy-bg-grayscale-L12 uy-max-w-[300px]",children:t.jsx("p",{className:"uy-typography-body-small uy-text-content-inverted uy-overflow-hidden uy-text-ellipsis uy-line-clamp-3",children:e})})]})}module.exports=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("react-aria-components"),l=require("../button/Button.js"),r=e=>e.type===l.Button||e.type===o.Button;function i({title:e,children:u}){return t.jsxs(o.TooltipTrigger,{delay:500,closeDelay:1500,children:[u,t.jsx(o.Tooltip,{"data-dd-privacy":"allow",offset:r(u)?4:8,className:"uy-inline-flex uy-rounded-50 uy-pl-100 uy-pr-100 uy-pt-50 uy-pb-50 uy-bg-grayscale-L12 uy-max-w-[300px]",children:t.jsx("p",{className:"uy-typography-body-small uy-text-content-inverted uy-overflow-hidden uy-text-ellipsis uy-line-clamp-3",children:e})})]})}exports.Tooltip=i;

package/dist/cjs/index.d.ts

@@ -16,6 +16,10 @@ export * from './components/avatar/parts/AvatarFallback.js';
 export * from './components/avatar/parts/AvatarImage.js';
 export * from './components/avatar/parts/AvatarPair.js';
 export * from './components/badge/Badge.js';
+export * from './components/bottom-sheet/BottomSheet.js';
+export * from './components/bottom-sheet/parts/BottomSheetHeader.js';
+export * from './components/bottom-sheet/parts/BottomSheetContent.js';
+export * from './components/bottom-sheet/parts/BottomSheetFooter.js';
 export * from './components/breadcrumbs/Breadcrumbs.js';
 export * from './components/breadcrumbs/parts/Breadcrumb.js';
 export * from './components/button/Button.js';
@@ -76,6 +80,10 @@ export * from './components/select/Select.js';
 export * from './components/select-field/SelectField.js';
 export * from './components/selectable-button-group/SelectableButtonGroup.js';
 export * from './components/selectable-button-group/parts/SelectableButton.js';
+export * from './components/side-panel/SidePanel.js';
+export * from './components/side-panel/parts/SidePanelHeader.js';
+export * from './components/side-panel/parts/SidePanelContent.js';
+export * from './components/side-panel/parts/SidePanelFooter.js';
 export * from './components/spinner/Spinner.js';
 export * from './components/tabs/Tabs.js';
 export * from './components/tabs/parts/Tab.js';