@economic/taco 13.0.0 → 14.0.0-tanstack-virtual-update.0

package/dist/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { useControlled } from '../../hooks/useControlled';\nimport type { GroupProps } from '../Group/Group';\n\nimport type {\n    DrawerInnerContentProps,\n    DrawerFooterProps,\n    DrawerTitleProps,\n    DrawerContentProps,\n    DrawerCloseProps,\n} from './components/Content';\nimport { Actions, Footer, InnerContent, Title, Close, Content } from './components/Content';\nimport type { DrawerTriggerProps } from './components/Trigger';\nimport { Trigger } from './components/Trigger';\nimport type { OnOpenHandle } from './Context';\nimport { DrawerContext } from './Context';\nimport type { DrawerSize, DrawerVariant } from './types';\nimport { useDrawerStack } from './useDrawerStack';\n\nexport type DrawerTexts = {\n    /** Aria-label for back icon button in drawer. */\n    back: string;\n    /** Aria-label for close icon button in drawer. */\n    close: string;\n};\n\nexport type DrawerProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** Size of the drawer. This is the recommended way to set a size for drawer component. */\n    size?: DrawerSize;\n    /** Set whether the drawer is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Handles the back button click and determines its visibility */\n    onClickBack?: () => void;\n    /** Handler called when drawer closes by user interaction */\n    onClose?: () => void;\n    /** Called when the drawer opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the drawer from outside the component  */\n    open?: boolean;\n    /** A trigger to be used for the drawer, should not be set if `children` already contains a trigger */\n    trigger?: React.JSX.Element;\n    /** Triggers when resizing, can be throttled or debounced for better performances */\n    onResize?: (delta: number) => void;\n    /** Rendering variant of the drawer */\n    variant?: DrawerVariant;\n    /** className for children container, needed for embedded version, in cases where we might need to control children height */\n    className?: string;\n    /** When 'true' renders close button in topr right cornenr of drawer content */\n    showCloseButton?: boolean;\n    /** Target specific named outlet allowing you to render a drawer to a specific outlet */\n    outletName?: string;\n};\n\nexport type OutletProps = React.HTMLAttributes<HTMLDivElement> & {\n    name?: string;\n};\n\nconst DEFAULT_OUTLET_NAME = 'default';\n\nconst Outlet = React.forwardRef(function Outlet(props: OutletProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('ml-auto h-full flex-shrink-0 overflow-hidden', props.className);\n    return (\n        <div\n            {...props}\n            className={className}\n            data-taco=\"drawer-outlet\"\n            data-taco-outlet-name={props.name ?? DEFAULT_OUTLET_NAME}\n            ref={ref}\n        />\n    );\n});\n\nexport type ForwardedDrawerWithStatics = React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;\n    InnerContent: React.ForwardRefExoticComponent<DrawerInnerContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;\n    Actions: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;\n    Outlet: React.ForwardRefExoticComponent<OutletProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Drawer = React.forwardRef(function Drawer(props: DrawerProps, ref: React.Ref<HTMLElement>) {\n    const {\n        onChange,\n        variant = 'embedded',\n        className: _1,\n        onResize,\n        onClose,\n        onClickBack,\n        size = 'md',\n        trigger,\n        children,\n        showCloseButton = true,\n        outletName,\n        ...otherProps\n    } = props;\n\n    const [outlet, setOutlet] = React.useState<HTMLElement>();\n    const containerRef = React.useRef<OnOpenHandle>(null);\n\n    const [open, setOpen] = useControlled<boolean>({\n        value: props.open,\n        defaultValue: props.defaultOpen ?? false,\n        onChange,\n    });\n\n    useDrawerStack({\n        open,\n        setOpen,\n        onClose,\n        onOpen: () => {\n            // sets container width for resizing.\n            containerRef.current?.onOpen();\n        },\n    });\n\n    const context = React.useMemo(\n        () => ({\n            containerRef,\n            onClickBack,\n            onClose,\n            onResize,\n            props: otherProps,\n            size,\n            ref,\n            variant,\n            showCloseButton,\n            outlet,\n        }),\n        [containerRef, otherProps, variant, onResize, onClose, size, showCloseButton, outlet, onClickBack]\n    );\n\n    const handleOpenChange = (open: boolean, eventDetails: DrawerPrimitive.Root.ChangeEventDetails) => {\n        if (eventDetails.reason === 'escape-key') {\n            const triggeredFromRadixPortal = (eventDetails.event.target as HTMLElement)?.closest(\n                'div[data-radix-popper-content-wrapper]'\n            );\n\n            if (triggeredFromRadixPortal) {\n                // TODO: This could be removed when all radix overlays are replaced with base UI components, but currently it propagates through and closes the dialog.\n\n                // cancel closing the dialog\n                eventDetails.cancel();\n                // propagate to allow the radix overlay to close\n                eventDetails.allowPropagation();\n                return;\n            } else if (variant === 'embedded') {\n                eventDetails.cancel();\n                return;\n            }\n        }\n\n        setOpen?.(open);\n\n        if (open === false) {\n            onClose?.();\n        }\n    };\n\n    React.useEffect(() => {\n        const outletSelector = `[data-taco=\"drawer-outlet\"][data-taco-outlet-name=\"${outletName ?? DEFAULT_OUTLET_NAME}\"]`;\n        const outletElement = document.querySelector<HTMLElement>(outletSelector) ?? document.body;\n        setOutlet(outletElement);\n    }, [outletName]);\n\n    return (\n        <DrawerContext.Provider value={context}>\n            <DrawerPrimitive.Root\n                disablePointerDismissal={variant === 'embedded'}\n                modal={variant === 'overlay'}\n                open={open}\n                onOpenChange={handleOpenChange}\n                swipeDirection=\"right\">\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DrawerPrimitive.Root>\n        </DrawerContext.Provider>\n    );\n}) as ForwardedDrawerWithStatics;\n\nDrawer.Trigger = Trigger;\nDrawer.Content = Content;\nDrawer.InnerContent = InnerContent;\nDrawer.Title = Title;\nDrawer.Footer = Footer;\nDrawer.Close = Close;\nDrawer.Actions = Actions;\nDrawer.Outlet = Outlet;\n"],"names":["Outlet","Drawer","open","DrawerPrimitive"],"mappings":";;;;;;;;AA6DA,MAAM,sBAAsB;AAE5B,MAAM,SAAS,MAAM,WAAW,SAASA,QAAO,OAAoB,KAAgC;AAChG,QAAM,YAAY,GAAG,gDAAgD,MAAM,SAAS;AACpF,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,aAAU;AAAA,MACV,yBAAuB,MAAM,QAAQ;AAAA,MACrC;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;AAaM,MAAM,SAAS,MAAM,WAAW,SAASC,QAAO,OAAoB,KAA6B;AACpG,QAAM;AAAA,IACF;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAA;AAClC,QAAM,eAAe,MAAM,OAAqB,IAAI;AAEpD,QAAM,CAAC,MAAM,OAAO,IAAI,cAAuB;AAAA,IAC3C,OAAO,MAAM;AAAA,IACb,cAAc,MAAM,eAAe;AAAA,IACnC;AAAA,EAAA,CACH;AAED,iBAAe;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,MAAM;AAEV,mBAAa,SAAS,OAAA;AAAA,IAC1B;AAAA,EAAA,CACH;AAED,QAAM,UAAU,MAAM;AAAA,IAClB,OAAO;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEJ,CAAC,cAAc,YAAY,SAAS,UAAU,SAAS,MAAM,iBAAiB,QAAQ,WAAW;AAAA,EAAA;AAGrG,QAAM,mBAAmB,CAACC,OAAe,iBAA0D;AAC/F,QAAI,aAAa,WAAW,cAAc;AACtC,YAAM,2BAA4B,aAAa,MAAM,QAAwB;AAAA,QACzE;AAAA,MAAA;AAGJ,UAAI,0BAA0B;AAI1B,qBAAa,OAAA;AAEb,qBAAa,iBAAA;AACb;AAAA,MACJ,WAAW,YAAY,YAAY;AAC/B,qBAAa,OAAA;AACb;AAAA,MACJ;AAAA,IACJ;AAEA,cAAUA,KAAI;AAEd,QAAIA,UAAS,OAAO;AAChB,gBAAA;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,UAAU,MAAM;AAClB,UAAM,iBAAiB,sDAAsD,cAAc,mBAAmB;AAC9G,UAAM,gBAAgB,SAAS,cAA2B,cAAc,KAAK,SAAS;AACtF,cAAU,aAAa;AAAA,EAC3B,GAAG,CAAC,UAAU,CAAC;AAEf,SACI,sBAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,WAC3B,sBAAA;AAAA,IAACC,SAAgB;AAAA,IAAhB;AAAA,MACG,yBAAyB,YAAY;AAAA,MACrC,OAAO,YAAY;AAAA,MACnB;AAAA,MACA,cAAc;AAAA,MACd,gBAAe;AAAA,IAAA;AAAA,IACd,WAAW,sBAAA,cAAC,SAAA,MAAS,OAAQ;AAAA,IAC7B;AAAA,EAAA,CAET;AAER,CAAC;AAED,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,eAAe;AACtB,OAAO,QAAQ;AACf,OAAO,SAAS;AAChB,OAAO,QAAQ;AACf,OAAO,UAAU;AACjB,OAAO,SAAS;"}
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { GroupProps } from '@/components';\nimport { useControlled } from '@/hooks/useControlled';\n\nimport type {\n    DrawerInnerContentProps,\n    DrawerFooterProps,\n    DrawerTitleProps,\n    DrawerContentProps,\n    DrawerCloseProps,\n} from './components/Content';\nimport { Actions, Footer, InnerContent, Title, Close, Content } from './components/Content';\nimport type { DrawerTriggerProps } from './components/Trigger';\nimport { Trigger } from './components/Trigger';\nimport type { OnOpenHandle } from './Context';\nimport { DrawerContext } from './Context';\nimport type { DrawerSize, DrawerVariant } from './types';\nimport { useDrawerStack } from './useDrawerStack';\n\nexport type DrawerTexts = {\n    /** Aria-label for back icon button in drawer. */\n    back: string;\n    /** Aria-label for close icon button in drawer. */\n    close: string;\n};\n\nexport type DrawerProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** Size of the drawer. This is the recommended way to set a size for drawer component. */\n    size?: DrawerSize;\n    /** Set whether the drawer is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Handles the back button click and determines its visibility */\n    onClickBack?: () => void;\n    /** Handler called when drawer closes by user interaction */\n    onClose?: () => void;\n    /** Called when the drawer opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the drawer from outside the component  */\n    open?: boolean;\n    /** A trigger to be used for the drawer, should not be set if `children` already contains a trigger */\n    trigger?: React.JSX.Element;\n    /** Triggers when resizing, can be throttled or debounced for better performances */\n    onResize?: (delta: number) => void;\n    /** Rendering variant of the drawer */\n    variant?: DrawerVariant;\n    /** className for children container, needed for embedded version, in cases where we might need to control children height */\n    className?: string;\n    /** When 'true' renders close button in topr right cornenr of drawer content */\n    showCloseButton?: boolean;\n    /** Target specific named outlet allowing you to render a drawer to a specific outlet */\n    outletName?: string;\n};\n\nexport type OutletProps = React.HTMLAttributes<HTMLDivElement> & {\n    name?: string;\n};\n\nconst DEFAULT_OUTLET_NAME = 'default';\n\nconst Outlet = React.forwardRef(function Outlet(props: OutletProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('ml-auto h-full flex-shrink-0 overflow-hidden', props.className);\n    return (\n        <div\n            {...props}\n            className={className}\n            data-taco=\"drawer-outlet\"\n            data-taco-outlet-name={props.name ?? DEFAULT_OUTLET_NAME}\n            ref={ref}\n        />\n    );\n});\n\nexport type ForwardedDrawerWithStatics = React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;\n    InnerContent: React.ForwardRefExoticComponent<DrawerInnerContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;\n    Actions: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;\n    Outlet: React.ForwardRefExoticComponent<OutletProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Drawer = React.forwardRef(function Drawer(props: DrawerProps, ref: React.Ref<HTMLElement>) {\n    const {\n        onChange,\n        variant = 'embedded',\n        className: _1,\n        onResize,\n        onClose,\n        onClickBack,\n        size = 'md',\n        trigger,\n        children,\n        showCloseButton = true,\n        outletName,\n        ...otherProps\n    } = props;\n\n    const [outlet, setOutlet] = React.useState<HTMLElement>();\n    const containerRef = React.useRef<OnOpenHandle>(null);\n\n    const [open, setOpen] = useControlled<boolean>({\n        value: props.open,\n        defaultValue: props.defaultOpen ?? false,\n        onChange,\n    });\n\n    useDrawerStack({\n        open,\n        setOpen,\n        onClose,\n        onOpen: () => {\n            // sets container width for resizing.\n            containerRef.current?.onOpen();\n        },\n    });\n\n    const context = React.useMemo(\n        () => ({\n            containerRef,\n            onClickBack,\n            onClose,\n            onResize,\n            props: otherProps,\n            size,\n            ref,\n            variant,\n            showCloseButton,\n            outlet,\n        }),\n        [containerRef, otherProps, variant, onResize, onClose, size, showCloseButton, outlet, onClickBack]\n    );\n\n    const handleOpenChange = (open: boolean, eventDetails: DrawerPrimitive.Root.ChangeEventDetails) => {\n        if (eventDetails.reason === 'escape-key') {\n            const triggeredFromRadixPortal = (eventDetails.event.target as HTMLElement)?.closest(\n                'div[data-radix-popper-content-wrapper]'\n            );\n\n            if (triggeredFromRadixPortal) {\n                // TODO: This could be removed when all radix overlays are replaced with base UI components, but currently it propagates through and closes the dialog.\n\n                // cancel closing the dialog\n                eventDetails.cancel();\n                // propagate to allow the radix overlay to close\n                eventDetails.allowPropagation();\n                return;\n            } else if (variant === 'embedded') {\n                eventDetails.cancel();\n                return;\n            }\n        }\n\n        setOpen?.(open);\n\n        if (open === false) {\n            onClose?.();\n        }\n    };\n\n    React.useEffect(() => {\n        const outletSelector = `[data-taco=\"drawer-outlet\"][data-taco-outlet-name=\"${outletName ?? DEFAULT_OUTLET_NAME}\"]`;\n        const outletElement = document.querySelector<HTMLElement>(outletSelector) ?? document.body;\n        setOutlet(outletElement);\n    }, [outletName]);\n\n    return (\n        <DrawerContext.Provider value={context}>\n            <DrawerPrimitive.Root\n                disablePointerDismissal={variant === 'embedded'}\n                modal={variant === 'overlay'}\n                open={open}\n                onOpenChange={handleOpenChange}\n                swipeDirection=\"right\">\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DrawerPrimitive.Root>\n        </DrawerContext.Provider>\n    );\n}) as ForwardedDrawerWithStatics;\n\nDrawer.Trigger = Trigger;\nDrawer.Content = Content;\nDrawer.InnerContent = InnerContent;\nDrawer.Title = Title;\nDrawer.Footer = Footer;\nDrawer.Close = Close;\nDrawer.Actions = Actions;\nDrawer.Outlet = Outlet;\n"],"names":["Outlet","Drawer","open","DrawerPrimitive"],"mappings":";;;;;;;;AA6DA,MAAM,sBAAsB;AAE5B,MAAM,SAAS,MAAM,WAAW,SAASA,QAAO,OAAoB,KAAgC;AAChG,QAAM,YAAY,GAAG,gDAAgD,MAAM,SAAS;AACpF,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,aAAU;AAAA,MACV,yBAAuB,MAAM,QAAQ;AAAA,MACrC;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;AAaM,MAAM,SAAS,MAAM,WAAW,SAASC,QAAO,OAAoB,KAA6B;AACpG,QAAM;AAAA,IACF;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAA;AAClC,QAAM,eAAe,MAAM,OAAqB,IAAI;AAEpD,QAAM,CAAC,MAAM,OAAO,IAAI,cAAuB;AAAA,IAC3C,OAAO,MAAM;AAAA,IACb,cAAc,MAAM,eAAe;AAAA,IACnC;AAAA,EAAA,CACH;AAED,iBAAe;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,MAAM;AAEV,mBAAa,SAAS,OAAA;AAAA,IAC1B;AAAA,EAAA,CACH;AAED,QAAM,UAAU,MAAM;AAAA,IAClB,OAAO;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEJ,CAAC,cAAc,YAAY,SAAS,UAAU,SAAS,MAAM,iBAAiB,QAAQ,WAAW;AAAA,EAAA;AAGrG,QAAM,mBAAmB,CAACC,OAAe,iBAA0D;AAC/F,QAAI,aAAa,WAAW,cAAc;AACtC,YAAM,2BAA4B,aAAa,MAAM,QAAwB;AAAA,QACzE;AAAA,MAAA;AAGJ,UAAI,0BAA0B;AAI1B,qBAAa,OAAA;AAEb,qBAAa,iBAAA;AACb;AAAA,MACJ,WAAW,YAAY,YAAY;AAC/B,qBAAa,OAAA;AACb;AAAA,MACJ;AAAA,IACJ;AAEA,cAAUA,KAAI;AAEd,QAAIA,UAAS,OAAO;AAChB,gBAAA;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,UAAU,MAAM;AAClB,UAAM,iBAAiB,sDAAsD,cAAc,mBAAmB;AAC9G,UAAM,gBAAgB,SAAS,cAA2B,cAAc,KAAK,SAAS;AACtF,cAAU,aAAa;AAAA,EAC3B,GAAG,CAAC,UAAU,CAAC;AAEf,SACI,sBAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,WAC3B,sBAAA;AAAA,IAACC,SAAgB;AAAA,IAAhB;AAAA,MACG,yBAAyB,YAAY;AAAA,MACrC,OAAO,YAAY;AAAA,MACnB;AAAA,MACA,cAAc;AAAA,MACd,gBAAe;AAAA,IAAA;AAAA,IACd,WAAW,sBAAA,cAAC,SAAA,MAAS,OAAQ;AAAA,IAC7B;AAAA,EAAA,CAET;AAER,CAAC;AAED,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,eAAe;AACtB,OAAO,QAAQ;AACf,OAAO,SAAS;AAChB,OAAO,QAAQ;AACf,OAAO,UAAU;AACjB,OAAO,SAAS;"}

package/dist/components/Drawer/components/Content.cjs

@@ -3,13 +3,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const drawer = require("@base-ui/react/drawer");
 const cn = require("clsx");
 const React = require("react");
+const Context$1 = require("../../Menu/Context.cjs");
 const useMergedRef = require("../../../hooks/useMergedRef.cjs");
 const useDraggable = require("../../../utils/hooks/useDraggable.cjs");
-const IconButton = require("../../LegacyComponents/IconButton/IconButton.cjs");
-const Context$1 = require("../../Menu/Context.cjs");
-const Localization = require("../../Provider/Localization.cjs");
 const Context = require("../Context.cjs");
 const util = require("../util.cjs");
+const Localization = require("../../Provider/Localization.cjs");
+const IconButton = require("../../LegacyComponents/IconButton/IconButton.cjs");
 const RESIZE_MIN = 360;
 const RESIZE_MAX = 1e3;
 const RenderPropWrapper = React.forwardRef(function RenderPropWrapper2({ children, onClick, renderProps }, ref) {

package/dist/components/Drawer/components/Content.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Content.cjs","sources":["../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport type { GroupProps } from '../../Group/Group';\nimport { LegacyIconButton } from '../../LegacyComponents/IconButton/IconButton';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useLocalization } from '../../Provider/Localization';\nimport { useCurrentDrawer } from '../Context';\nimport { getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from '../util';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport enum DrawerAnimationDefinition {\n    Visible = 'visible',\n    Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, externalRef: React.Ref<HTMLHeadingElement>) {\n    const { className, children, ...otherProps } = props;\n    const ref = useMergedRef<HTMLHeadingElement>(externalRef);\n    const [style, setStyle] = React.useState({});\n    const { texts } = useLocalization();\n    const { onClickBack } = useCurrentDrawer();\n\n    /**\n     * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n     * where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,\n     * so it can be easily overriden in exceptional scenarios.\n     *  */\n    const cName = cn('mb-0 flex grow-0 items-start justify-self-start border-b-[1px] border-gray-200 px-4 py-4', className);\n\n    React.useEffect(() => {\n        const drawer = ref?.current?.closest('[data-taco=\"drawer\"]');\n\n        // This is the margin amount that we need to deduct from the margins to align with the design\n        const marginAdjust = 4;\n\n        const closeButton: HTMLButtonElement | null = drawer?.querySelector(`[aria-label=\"${texts.drawer.close}\"]`) ?? null;\n        const closeButtonWidth = closeButton?.offsetWidth ?? 0;\n        const closeButtonRightMargin = 8;\n\n        const actionsWrapper: HTMLSpanElement | null = drawer?.querySelector('#taco-drawer-actions[data-taco=\"group\"]') ?? null;\n        const actionsWrapperWidth = actionsWrapper?.offsetWidth ?? 0;\n        const actionsWrapperRightMargin = 8;\n\n        const marginRight =\n            closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;\n\n        setStyle({ marginRight });\n    }, [ref, texts.drawer.close]);\n\n    return (\n        <DrawerPrimitive.Title className={cName} {...otherProps} ref={ref}>\n            {onClickBack ? (\n                <LegacyIconButton\n                    appearance=\"discrete\"\n                    aria-label={texts.drawer.back}\n                    className=\"mr-3 text-base\"\n                    icon=\"chevron-left\"\n                    onClick={onClickBack}\n                />\n            ) : null}\n            {\n                // We need to apply the right margin as an inline style instead of using Tailwind CSS.\n                // This is necessary because we are creating styles dynamically at runtime,\n                // and Tailwind doesn't support generating runtime styles.\n            }\n            <span className=\"line-clamp-2 inline-block overflow-y-hidden\" style={style}>\n                {children}\n            </span>\n        </DrawerPrimitive.Title>\n    );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const { className: _1, ...otherProps } = props;\n    /**\n     * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n     */\n    const cName = cn('mt-auto flex grow-0 justify-end border-t-[1px] border-gray-200 p-4', props.className);\n    return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    const cName = cn('absolute right-10 top-0 mr-[2] mt-4 flex gap-2', className);\n    // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n    return <div {...otherProps} className={cName} id=\"taco-drawer-actions\" ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: React.ReactElement;\n};\n\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onClose } = useCurrentDrawer();\n\n    const { children, ...restProps } = props;\n\n    return <DrawerPrimitive.Close {...restProps} onClick={onClose} ref={ref} render={children} />;\n});\n\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement>;\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport const InnerContent = React.forwardRef(function InnerContent(\n    props: DrawerInnerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { className, children, ...otherProps } = props;\n    return (\n        <div {...otherProps} className={cn('flex grow flex-col overflow-y-hidden', className)} ref={ref}>\n            <div className=\"w-full gap-y-0.5 overflow-auto p-4\">{children}</div>\n        </div>\n    );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the side drawer is opened */\n    'aria-label': string;\n    children: React.ReactNode | ((props: { close: () => void }) => React.ReactNode);\n};\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { containerRef, size, onResize, variant, showCloseButton, outlet } = useCurrentDrawer();\n    const { className, children, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n    const contentRef = React.useRef(null);\n\n    // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n    // the menu is still open (and mounted) because it is the trigger for the drawer\n    const menu = useCurrentMenu();\n    let finalFocus: DrawerPrimitive.Popup.Props['finalFocus'];\n\n    if (menu) {\n        finalFocus = () => {\n            menu.close();\n        };\n    }\n\n    const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n    const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n        const contentClassName = getDrawerContentClassNames(size, variant);\n        const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n        return { contentClassName, dragHandlerClassName };\n    }, [size, variant]);\n\n    const [containerWidth, setContainerWidth] = React.useState<number>();\n\n    // resize\n    const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n\n    const {\n        position,\n        dragging,\n        handleProps: dragHandleProps,\n        resetPosition,\n    } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n    const resizedWidth = React.useMemo((): number | undefined => {\n        if (containerWidth) {\n            return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n        }\n        return;\n    }, [containerWidth, position]);\n\n    React.useImperativeHandle(\n        containerRef,\n        () => ({\n            onOpen: () => {\n                requestAnimationFrame(() => {\n                    if (contentRef.current) {\n                        setContainerWidth((contentRef.current as HTMLElement)?.offsetWidth);\n                    }\n                });\n            },\n        }),\n        []\n    );\n\n    React.useEffect(() => {\n        if (onResize) {\n            onResize(position.x);\n        }\n    }, [position]);\n\n    React.useEffect(() => {\n        if (!dragging && resizedWidth) {\n            setContainerWidth(resizedWidth);\n            resetPosition();\n        }\n    }, [dragging]);\n\n    let output;\n\n    if (typeof children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper>{children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = children;\n    }\n\n    const content = (\n        <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n            {output}\n            <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n                {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n            </div>\n            {showCloseButton ? (\n                <Close>\n                    <LegacyIconButton\n                        appearance=\"discrete\"\n                        aria-label={texts.drawer.close}\n                        className=\"absolute right-0 top-0 mr-2 mt-4\"\n                        icon=\"close\"\n                    />\n                </Close>\n            ) : null}\n        </div>\n    );\n\n    if (!outlet) {\n        return null;\n    }\n\n    return (\n        <DrawerPrimitive.Portal container={outlet ?? undefined} className=\"h-full\">\n            {variant === 'overlay' ? (\n                <DrawerPrimitive.Backdrop\n                    className=\"fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    data-taco=\"backdrop\"\n                />\n            ) : null}\n            <DrawerPrimitive.Viewport className=\"h-full\">\n                <DrawerPrimitive.Popup\n                    {...otherProps}\n                    className={contentClassName}\n                    finalFocus={finalFocus}\n                    ref={ref}\n                    style={{ width: resizedWidth }}>\n                    <DrawerPrimitive.Content>{content}</DrawerPrimitive.Content>\n                </DrawerPrimitive.Popup>\n            </DrawerPrimitive.Viewport>\n        </DrawerPrimitive.Portal>\n    );\n});\n"],"names":["RenderPropWrapper","useMergedRef","useLocalization","useCurrentDrawer","drawer","DrawerPrimitive","LegacyIconButton","Actions","InnerContent","Content","useCurrentMenu","getDrawerContainerClassNames","contentClassName","getDrawerContentClassNames","dragHandlerClassName","getDrawerDragHandlerClassNames","useDraggable"],"mappings":"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"}
+{"version":3,"file":"Content.cjs","sources":["../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport type { GroupProps } from '@/components';\nimport { LegacyIconButton, useLocalization } from '@/components';\nimport { useCurrentMenu } from '@/components/Menu/Context';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { useDraggable } from '@/utils/hooks/useDraggable';\n\nimport { useCurrentDrawer } from '../Context';\nimport { getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from '../util';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport enum DrawerAnimationDefinition {\n    Visible = 'visible',\n    Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, externalRef: React.Ref<HTMLHeadingElement>) {\n    const { className, children, ...otherProps } = props;\n    const ref = useMergedRef<HTMLHeadingElement>(externalRef);\n    const [style, setStyle] = React.useState({});\n    const { texts } = useLocalization();\n    const { onClickBack } = useCurrentDrawer();\n\n    /**\n     * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n     * where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,\n     * so it can be easily overriden in exceptional scenarios.\n     *  */\n    const cName = cn('mb-0 flex grow-0 items-start justify-self-start border-b-[1px] border-gray-200 px-4 py-4', className);\n\n    React.useEffect(() => {\n        const drawer = ref?.current?.closest('[data-taco=\"drawer\"]');\n\n        // This is the margin amount that we need to deduct from the margins to align with the design\n        const marginAdjust = 4;\n\n        const closeButton: HTMLButtonElement | null = drawer?.querySelector(`[aria-label=\"${texts.drawer.close}\"]`) ?? null;\n        const closeButtonWidth = closeButton?.offsetWidth ?? 0;\n        const closeButtonRightMargin = 8;\n\n        const actionsWrapper: HTMLSpanElement | null = drawer?.querySelector('#taco-drawer-actions[data-taco=\"group\"]') ?? null;\n        const actionsWrapperWidth = actionsWrapper?.offsetWidth ?? 0;\n        const actionsWrapperRightMargin = 8;\n\n        const marginRight =\n            closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;\n\n        setStyle({ marginRight });\n    }, [ref, texts.drawer.close]);\n\n    return (\n        <DrawerPrimitive.Title className={cName} {...otherProps} ref={ref}>\n            {onClickBack ? (\n                <LegacyIconButton\n                    appearance=\"discrete\"\n                    aria-label={texts.drawer.back}\n                    className=\"mr-3 text-base\"\n                    icon=\"chevron-left\"\n                    onClick={onClickBack}\n                />\n            ) : null}\n            {\n                // We need to apply the right margin as an inline style instead of using Tailwind CSS.\n                // This is necessary because we are creating styles dynamically at runtime,\n                // and Tailwind doesn't support generating runtime styles.\n            }\n            <span className=\"line-clamp-2 inline-block overflow-y-hidden\" style={style}>\n                {children}\n            </span>\n        </DrawerPrimitive.Title>\n    );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const { className: _1, ...otherProps } = props;\n    /**\n     * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n     */\n    const cName = cn('mt-auto flex grow-0 justify-end border-t-[1px] border-gray-200 p-4', props.className);\n    return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    const cName = cn('absolute right-10 top-0 mr-[2] mt-4 flex gap-2', className);\n    // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n    return <div {...otherProps} className={cName} id=\"taco-drawer-actions\" ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: React.ReactElement;\n};\n\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onClose } = useCurrentDrawer();\n\n    const { children, ...restProps } = props;\n\n    return <DrawerPrimitive.Close {...restProps} onClick={onClose} ref={ref} render={children} />;\n});\n\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement>;\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport const InnerContent = React.forwardRef(function InnerContent(\n    props: DrawerInnerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { className, children, ...otherProps } = props;\n    return (\n        <div {...otherProps} className={cn('flex grow flex-col overflow-y-hidden', className)} ref={ref}>\n            <div className=\"w-full gap-y-0.5 overflow-auto p-4\">{children}</div>\n        </div>\n    );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the side drawer is opened */\n    'aria-label': string;\n    children: React.ReactNode | ((props: { close: () => void }) => React.ReactNode);\n};\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { containerRef, size, onResize, variant, showCloseButton, outlet } = useCurrentDrawer();\n    const { className, children, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n    const contentRef = React.useRef(null);\n\n    // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n    // the menu is still open (and mounted) because it is the trigger for the drawer\n    const menu = useCurrentMenu();\n    let finalFocus: DrawerPrimitive.Popup.Props['finalFocus'];\n\n    if (menu) {\n        finalFocus = () => {\n            menu.close();\n        };\n    }\n\n    const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n    const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n        const contentClassName = getDrawerContentClassNames(size, variant);\n        const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n        return { contentClassName, dragHandlerClassName };\n    }, [size, variant]);\n\n    const [containerWidth, setContainerWidth] = React.useState<number>();\n\n    // resize\n    const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n\n    const {\n        position,\n        dragging,\n        handleProps: dragHandleProps,\n        resetPosition,\n    } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n    const resizedWidth = React.useMemo((): number | undefined => {\n        if (containerWidth) {\n            return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n        }\n        return;\n    }, [containerWidth, position]);\n\n    React.useImperativeHandle(\n        containerRef,\n        () => ({\n            onOpen: () => {\n                requestAnimationFrame(() => {\n                    if (contentRef.current) {\n                        setContainerWidth((contentRef.current as HTMLElement)?.offsetWidth);\n                    }\n                });\n            },\n        }),\n        []\n    );\n\n    React.useEffect(() => {\n        if (onResize) {\n            onResize(position.x);\n        }\n    }, [position]);\n\n    React.useEffect(() => {\n        if (!dragging && resizedWidth) {\n            setContainerWidth(resizedWidth);\n            resetPosition();\n        }\n    }, [dragging]);\n\n    let output;\n\n    if (typeof children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper>{children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = children;\n    }\n\n    const content = (\n        <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n            {output}\n            <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n                {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n            </div>\n            {showCloseButton ? (\n                <Close>\n                    <LegacyIconButton\n                        appearance=\"discrete\"\n                        aria-label={texts.drawer.close}\n                        className=\"absolute right-0 top-0 mr-2 mt-4\"\n                        icon=\"close\"\n                    />\n                </Close>\n            ) : null}\n        </div>\n    );\n\n    if (!outlet) {\n        return null;\n    }\n\n    return (\n        <DrawerPrimitive.Portal container={outlet ?? undefined} className=\"h-full\">\n            {variant === 'overlay' ? (\n                <DrawerPrimitive.Backdrop\n                    className=\"fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    data-taco=\"backdrop\"\n                />\n            ) : null}\n            <DrawerPrimitive.Viewport className=\"h-full\">\n                <DrawerPrimitive.Popup\n                    {...otherProps}\n                    className={contentClassName}\n                    finalFocus={finalFocus}\n                    ref={ref}\n                    style={{ width: resizedWidth }}>\n                    <DrawerPrimitive.Content>{content}</DrawerPrimitive.Content>\n                </DrawerPrimitive.Popup>\n            </DrawerPrimitive.Viewport>\n        </DrawerPrimitive.Portal>\n    );\n});\n"],"names":["RenderPropWrapper","useMergedRef","useLocalization","useCurrentDrawer","drawer","DrawerPrimitive","LegacyIconButton","Actions","InnerContent","Content","useCurrentMenu","getDrawerContainerClassNames","contentClassName","getDrawerContentClassNames","dragHandlerClassName","getDrawerDragHandlerClassNames","useDraggable"],"mappings":"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"}

package/dist/components/Drawer/components/Content.js

@@ -1,13 +1,13 @@
 import { Drawer } from "@base-ui/react/drawer";
 import cn from "clsx";
 import React__default from "react";
+import { useCurrentMenu } from "../../Menu/Context.js";
 import { useMergedRef } from "../../../hooks/useMergedRef.js";
 import { useDraggable } from "../../../utils/hooks/useDraggable.js";
-import { LegacyIconButton } from "../../LegacyComponents/IconButton/IconButton.js";
-import { useCurrentMenu } from "../../Menu/Context.js";
-import { useLocalization } from "../../Provider/Localization.js";
 import { useCurrentDrawer } from "../Context.js";
 import { getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from "../util.js";
+import { useLocalization } from "../../Provider/Localization.js";
+import { LegacyIconButton } from "../../LegacyComponents/IconButton/IconButton.js";
 const RESIZE_MIN = 360;
 const RESIZE_MAX = 1e3;
 const RenderPropWrapper = React__default.forwardRef(function RenderPropWrapper2({ children, onClick, renderProps }, ref) {

package/dist/components/Drawer/components/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport type { GroupProps } from '../../Group/Group';\nimport { LegacyIconButton } from '../../LegacyComponents/IconButton/IconButton';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useLocalization } from '../../Provider/Localization';\nimport { useCurrentDrawer } from '../Context';\nimport { getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from '../util';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport enum DrawerAnimationDefinition {\n    Visible = 'visible',\n    Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, externalRef: React.Ref<HTMLHeadingElement>) {\n    const { className, children, ...otherProps } = props;\n    const ref = useMergedRef<HTMLHeadingElement>(externalRef);\n    const [style, setStyle] = React.useState({});\n    const { texts } = useLocalization();\n    const { onClickBack } = useCurrentDrawer();\n\n    /**\n     * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n     * where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,\n     * so it can be easily overriden in exceptional scenarios.\n     *  */\n    const cName = cn('mb-0 flex grow-0 items-start justify-self-start border-b-[1px] border-gray-200 px-4 py-4', className);\n\n    React.useEffect(() => {\n        const drawer = ref?.current?.closest('[data-taco=\"drawer\"]');\n\n        // This is the margin amount that we need to deduct from the margins to align with the design\n        const marginAdjust = 4;\n\n        const closeButton: HTMLButtonElement | null = drawer?.querySelector(`[aria-label=\"${texts.drawer.close}\"]`) ?? null;\n        const closeButtonWidth = closeButton?.offsetWidth ?? 0;\n        const closeButtonRightMargin = 8;\n\n        const actionsWrapper: HTMLSpanElement | null = drawer?.querySelector('#taco-drawer-actions[data-taco=\"group\"]') ?? null;\n        const actionsWrapperWidth = actionsWrapper?.offsetWidth ?? 0;\n        const actionsWrapperRightMargin = 8;\n\n        const marginRight =\n            closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;\n\n        setStyle({ marginRight });\n    }, [ref, texts.drawer.close]);\n\n    return (\n        <DrawerPrimitive.Title className={cName} {...otherProps} ref={ref}>\n            {onClickBack ? (\n                <LegacyIconButton\n                    appearance=\"discrete\"\n                    aria-label={texts.drawer.back}\n                    className=\"mr-3 text-base\"\n                    icon=\"chevron-left\"\n                    onClick={onClickBack}\n                />\n            ) : null}\n            {\n                // We need to apply the right margin as an inline style instead of using Tailwind CSS.\n                // This is necessary because we are creating styles dynamically at runtime,\n                // and Tailwind doesn't support generating runtime styles.\n            }\n            <span className=\"line-clamp-2 inline-block overflow-y-hidden\" style={style}>\n                {children}\n            </span>\n        </DrawerPrimitive.Title>\n    );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const { className: _1, ...otherProps } = props;\n    /**\n     * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n     */\n    const cName = cn('mt-auto flex grow-0 justify-end border-t-[1px] border-gray-200 p-4', props.className);\n    return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    const cName = cn('absolute right-10 top-0 mr-[2] mt-4 flex gap-2', className);\n    // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n    return <div {...otherProps} className={cName} id=\"taco-drawer-actions\" ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: React.ReactElement;\n};\n\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onClose } = useCurrentDrawer();\n\n    const { children, ...restProps } = props;\n\n    return <DrawerPrimitive.Close {...restProps} onClick={onClose} ref={ref} render={children} />;\n});\n\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement>;\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport const InnerContent = React.forwardRef(function InnerContent(\n    props: DrawerInnerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { className, children, ...otherProps } = props;\n    return (\n        <div {...otherProps} className={cn('flex grow flex-col overflow-y-hidden', className)} ref={ref}>\n            <div className=\"w-full gap-y-0.5 overflow-auto p-4\">{children}</div>\n        </div>\n    );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the side drawer is opened */\n    'aria-label': string;\n    children: React.ReactNode | ((props: { close: () => void }) => React.ReactNode);\n};\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { containerRef, size, onResize, variant, showCloseButton, outlet } = useCurrentDrawer();\n    const { className, children, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n    const contentRef = React.useRef(null);\n\n    // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n    // the menu is still open (and mounted) because it is the trigger for the drawer\n    const menu = useCurrentMenu();\n    let finalFocus: DrawerPrimitive.Popup.Props['finalFocus'];\n\n    if (menu) {\n        finalFocus = () => {\n            menu.close();\n        };\n    }\n\n    const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n    const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n        const contentClassName = getDrawerContentClassNames(size, variant);\n        const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n        return { contentClassName, dragHandlerClassName };\n    }, [size, variant]);\n\n    const [containerWidth, setContainerWidth] = React.useState<number>();\n\n    // resize\n    const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n\n    const {\n        position,\n        dragging,\n        handleProps: dragHandleProps,\n        resetPosition,\n    } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n    const resizedWidth = React.useMemo((): number | undefined => {\n        if (containerWidth) {\n            return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n        }\n        return;\n    }, [containerWidth, position]);\n\n    React.useImperativeHandle(\n        containerRef,\n        () => ({\n            onOpen: () => {\n                requestAnimationFrame(() => {\n                    if (contentRef.current) {\n                        setContainerWidth((contentRef.current as HTMLElement)?.offsetWidth);\n                    }\n                });\n            },\n        }),\n        []\n    );\n\n    React.useEffect(() => {\n        if (onResize) {\n            onResize(position.x);\n        }\n    }, [position]);\n\n    React.useEffect(() => {\n        if (!dragging && resizedWidth) {\n            setContainerWidth(resizedWidth);\n            resetPosition();\n        }\n    }, [dragging]);\n\n    let output;\n\n    if (typeof children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper>{children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = children;\n    }\n\n    const content = (\n        <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n            {output}\n            <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n                {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n            </div>\n            {showCloseButton ? (\n                <Close>\n                    <LegacyIconButton\n                        appearance=\"discrete\"\n                        aria-label={texts.drawer.close}\n                        className=\"absolute right-0 top-0 mr-2 mt-4\"\n                        icon=\"close\"\n                    />\n                </Close>\n            ) : null}\n        </div>\n    );\n\n    if (!outlet) {\n        return null;\n    }\n\n    return (\n        <DrawerPrimitive.Portal container={outlet ?? undefined} className=\"h-full\">\n            {variant === 'overlay' ? (\n                <DrawerPrimitive.Backdrop\n                    className=\"fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    data-taco=\"backdrop\"\n                />\n            ) : null}\n            <DrawerPrimitive.Viewport className=\"h-full\">\n                <DrawerPrimitive.Popup\n                    {...otherProps}\n                    className={contentClassName}\n                    finalFocus={finalFocus}\n                    ref={ref}\n                    style={{ width: resizedWidth }}>\n                    <DrawerPrimitive.Content>{content}</DrawerPrimitive.Content>\n                </DrawerPrimitive.Popup>\n            </DrawerPrimitive.Viewport>\n        </DrawerPrimitive.Portal>\n    );\n});\n"],"names":["React","RenderPropWrapper","DrawerPrimitive","Actions","InnerContent","Content","contentClassName","dragHandlerClassName"],"mappings":"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"}
+{"version":3,"file":"Content.js","sources":["../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport type { GroupProps } from '@/components';\nimport { LegacyIconButton, useLocalization } from '@/components';\nimport { useCurrentMenu } from '@/components/Menu/Context';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { useDraggable } from '@/utils/hooks/useDraggable';\n\nimport { useCurrentDrawer } from '../Context';\nimport { getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from '../util';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport enum DrawerAnimationDefinition {\n    Visible = 'visible',\n    Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, externalRef: React.Ref<HTMLHeadingElement>) {\n    const { className, children, ...otherProps } = props;\n    const ref = useMergedRef<HTMLHeadingElement>(externalRef);\n    const [style, setStyle] = React.useState({});\n    const { texts } = useLocalization();\n    const { onClickBack } = useCurrentDrawer();\n\n    /**\n     * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n     * where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,\n     * so it can be easily overriden in exceptional scenarios.\n     *  */\n    const cName = cn('mb-0 flex grow-0 items-start justify-self-start border-b-[1px] border-gray-200 px-4 py-4', className);\n\n    React.useEffect(() => {\n        const drawer = ref?.current?.closest('[data-taco=\"drawer\"]');\n\n        // This is the margin amount that we need to deduct from the margins to align with the design\n        const marginAdjust = 4;\n\n        const closeButton: HTMLButtonElement | null = drawer?.querySelector(`[aria-label=\"${texts.drawer.close}\"]`) ?? null;\n        const closeButtonWidth = closeButton?.offsetWidth ?? 0;\n        const closeButtonRightMargin = 8;\n\n        const actionsWrapper: HTMLSpanElement | null = drawer?.querySelector('#taco-drawer-actions[data-taco=\"group\"]') ?? null;\n        const actionsWrapperWidth = actionsWrapper?.offsetWidth ?? 0;\n        const actionsWrapperRightMargin = 8;\n\n        const marginRight =\n            closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;\n\n        setStyle({ marginRight });\n    }, [ref, texts.drawer.close]);\n\n    return (\n        <DrawerPrimitive.Title className={cName} {...otherProps} ref={ref}>\n            {onClickBack ? (\n                <LegacyIconButton\n                    appearance=\"discrete\"\n                    aria-label={texts.drawer.back}\n                    className=\"mr-3 text-base\"\n                    icon=\"chevron-left\"\n                    onClick={onClickBack}\n                />\n            ) : null}\n            {\n                // We need to apply the right margin as an inline style instead of using Tailwind CSS.\n                // This is necessary because we are creating styles dynamically at runtime,\n                // and Tailwind doesn't support generating runtime styles.\n            }\n            <span className=\"line-clamp-2 inline-block overflow-y-hidden\" style={style}>\n                {children}\n            </span>\n        </DrawerPrimitive.Title>\n    );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const { className: _1, ...otherProps } = props;\n    /**\n     * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n     */\n    const cName = cn('mt-auto flex grow-0 justify-end border-t-[1px] border-gray-200 p-4', props.className);\n    return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    const cName = cn('absolute right-10 top-0 mr-[2] mt-4 flex gap-2', className);\n    // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n    return <div {...otherProps} className={cName} id=\"taco-drawer-actions\" ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: React.ReactElement;\n};\n\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onClose } = useCurrentDrawer();\n\n    const { children, ...restProps } = props;\n\n    return <DrawerPrimitive.Close {...restProps} onClick={onClose} ref={ref} render={children} />;\n});\n\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement>;\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport const InnerContent = React.forwardRef(function InnerContent(\n    props: DrawerInnerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { className, children, ...otherProps } = props;\n    return (\n        <div {...otherProps} className={cn('flex grow flex-col overflow-y-hidden', className)} ref={ref}>\n            <div className=\"w-full gap-y-0.5 overflow-auto p-4\">{children}</div>\n        </div>\n    );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the side drawer is opened */\n    'aria-label': string;\n    children: React.ReactNode | ((props: { close: () => void }) => React.ReactNode);\n};\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { containerRef, size, onResize, variant, showCloseButton, outlet } = useCurrentDrawer();\n    const { className, children, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n    const contentRef = React.useRef(null);\n\n    // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n    // the menu is still open (and mounted) because it is the trigger for the drawer\n    const menu = useCurrentMenu();\n    let finalFocus: DrawerPrimitive.Popup.Props['finalFocus'];\n\n    if (menu) {\n        finalFocus = () => {\n            menu.close();\n        };\n    }\n\n    const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n    const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n        const contentClassName = getDrawerContentClassNames(size, variant);\n        const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n        return { contentClassName, dragHandlerClassName };\n    }, [size, variant]);\n\n    const [containerWidth, setContainerWidth] = React.useState<number>();\n\n    // resize\n    const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n\n    const {\n        position,\n        dragging,\n        handleProps: dragHandleProps,\n        resetPosition,\n    } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n    const resizedWidth = React.useMemo((): number | undefined => {\n        if (containerWidth) {\n            return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n        }\n        return;\n    }, [containerWidth, position]);\n\n    React.useImperativeHandle(\n        containerRef,\n        () => ({\n            onOpen: () => {\n                requestAnimationFrame(() => {\n                    if (contentRef.current) {\n                        setContainerWidth((contentRef.current as HTMLElement)?.offsetWidth);\n                    }\n                });\n            },\n        }),\n        []\n    );\n\n    React.useEffect(() => {\n        if (onResize) {\n            onResize(position.x);\n        }\n    }, [position]);\n\n    React.useEffect(() => {\n        if (!dragging && resizedWidth) {\n            setContainerWidth(resizedWidth);\n            resetPosition();\n        }\n    }, [dragging]);\n\n    let output;\n\n    if (typeof children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper>{children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = children;\n    }\n\n    const content = (\n        <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n            {output}\n            <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n                {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n            </div>\n            {showCloseButton ? (\n                <Close>\n                    <LegacyIconButton\n                        appearance=\"discrete\"\n                        aria-label={texts.drawer.close}\n                        className=\"absolute right-0 top-0 mr-2 mt-4\"\n                        icon=\"close\"\n                    />\n                </Close>\n            ) : null}\n        </div>\n    );\n\n    if (!outlet) {\n        return null;\n    }\n\n    return (\n        <DrawerPrimitive.Portal container={outlet ?? undefined} className=\"h-full\">\n            {variant === 'overlay' ? (\n                <DrawerPrimitive.Backdrop\n                    className=\"fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    data-taco=\"backdrop\"\n                />\n            ) : null}\n            <DrawerPrimitive.Viewport className=\"h-full\">\n                <DrawerPrimitive.Popup\n                    {...otherProps}\n                    className={contentClassName}\n                    finalFocus={finalFocus}\n                    ref={ref}\n                    style={{ width: resizedWidth }}>\n                    <DrawerPrimitive.Content>{content}</DrawerPrimitive.Content>\n                </DrawerPrimitive.Popup>\n            </DrawerPrimitive.Viewport>\n        </DrawerPrimitive.Portal>\n    );\n});\n"],"names":["React","RenderPropWrapper","DrawerPrimitive","Actions","InnerContent","Content","contentClassName","dragHandlerClassName"],"mappings":"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"}

package/dist/components/Field/Field.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const cn = require("clsx");
 const React = require("react");
-const Truncate = require("../Truncate/Truncate.cjs");
 ;/* empty css            */
+const Truncate = require("../Truncate/Truncate.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/components/Field/Field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.cjs","sources":["../../../src/components/Field/Field.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { Truncate } from '../Truncate/Truncate';\n\nimport './Field.css';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /** Whether the input is in an invalid state */\n    invalid?: boolean;\n    /** Whether the input is in a warning state */\n    warning?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const messageRef = React.useRef<HTMLSpanElement>(null);\n\n    const { disabled, children, invalid = false, warning = false, message, ...otherProps } = props;\n    const className = cn(\n        'flex min-h-[theme(spacing.18)] flex-col pb-4 text-xs font-bold leading-loose',\n        {\n            'text-gray-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn('-mb-4 h-4 truncate text-left text-xs font-normal leading-normal', {\n        'text-gray-700': !invalid && !warning,\n        'text-red-700': invalid,\n        'opacity-50': disabled,\n    });\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <Truncate tooltip={message}>\n                    <span\n                        className={messageClassName}\n                        data-taco=\"label-message\"\n                        ref={messageRef}\n                        role={invalid ? 'alert' : undefined}>\n                        {message}\n                    </span>\n                </Truncate>\n            )}\n        </label>\n    );\n});\n"],"names":["React","Field","Truncate"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAM,QAAQA,iBAAM,WAAW,SAASC,OAAM,OAAmB,KAAkC;AACtG,QAAM,aAAaD,iBAAM,OAAwB,IAAI;AAErD,QAAM,EAAE,UAAU,UAAU,UAAU,OAAO,UAAU,OAAO,SAAS,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,iBAAiB;AAAA,IAAA;AAAA,IAErB,MAAM;AAAA,EAAA;AAEV,QAAM,mBAAmB,GAAG,mEAAmE;AAAA,IAC3F,iBAAiB,CAAC,WAAW,CAAC;AAAA,IAC9B,gBAAgB;AAAA,IAChB,cAAc;AAAA,EAAA,CACjB;AAED,SACIA,iCAAA,cAAC,SAAA,EAAO,GAAG,YAAY,WAAsB,aAAU,SAAQ,IAAA,GAC1D,UACA,WACGA,iCAAA,cAACE,SAAAA,UAAA,EAAS,SAAS,WACfF,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,aAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM,UAAU,UAAU;AAAA,IAAA;AAAA,IACzB;AAAA,EAAA,CAET,CAER;AAER,CAAC;;"}
+{"version":3,"file":"Field.cjs","sources":["../../../src/components/Field/Field.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { Truncate } from '@/components';\n\nimport './Field.css';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /** Whether the input is in an invalid state */\n    invalid?: boolean;\n    /** Whether the input is in a warning state */\n    warning?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const messageRef = React.useRef<HTMLSpanElement>(null);\n\n    const { disabled, children, invalid = false, warning = false, message, ...otherProps } = props;\n    const className = cn(\n        'flex min-h-[theme(spacing.18)] flex-col pb-4 text-xs font-bold leading-loose',\n        {\n            'text-gray-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn('-mb-4 h-4 truncate text-left text-xs font-normal leading-normal', {\n        'text-gray-700': !invalid && !warning,\n        'text-red-700': invalid,\n        'opacity-50': disabled,\n    });\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <Truncate tooltip={message}>\n                    <span\n                        className={messageClassName}\n                        data-taco=\"label-message\"\n                        ref={messageRef}\n                        role={invalid ? 'alert' : undefined}>\n                        {message}\n                    </span>\n                </Truncate>\n            )}\n        </label>\n    );\n});\n"],"names":["React","Field","Truncate"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAM,QAAQA,iBAAM,WAAW,SAASC,OAAM,OAAmB,KAAkC;AACtG,QAAM,aAAaD,iBAAM,OAAwB,IAAI;AAErD,QAAM,EAAE,UAAU,UAAU,UAAU,OAAO,UAAU,OAAO,SAAS,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,iBAAiB;AAAA,IAAA;AAAA,IAErB,MAAM;AAAA,EAAA;AAEV,QAAM,mBAAmB,GAAG,mEAAmE;AAAA,IAC3F,iBAAiB,CAAC,WAAW,CAAC;AAAA,IAC9B,gBAAgB;AAAA,IAChB,cAAc;AAAA,EAAA,CACjB;AAED,SACIA,iCAAA,cAAC,SAAA,EAAO,GAAG,YAAY,WAAsB,aAAU,SAAQ,IAAA,GAC1D,UACA,WACGA,iCAAA,cAACE,SAAAA,UAAA,EAAS,SAAS,WACfF,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,aAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM,UAAU,UAAU;AAAA,IAAA;AAAA,IACzB;AAAA,EAAA,CAET,CAER;AAER,CAAC;;"}

package/dist/components/Field/Field.js

@@ -1,7 +1,7 @@
 import cn from "clsx";
 import * as React from "react";
-import { Truncate } from "../Truncate/Truncate.js";
 /* empty css          */
+import { Truncate } from "../Truncate/Truncate.js";
 const Field = React.forwardRef(function Field2(props, ref) {
   const messageRef = React.useRef(null);
   const { disabled, children, invalid = false, warning = false, message, ...otherProps } = props;

package/dist/components/Field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../src/components/Field/Field.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { Truncate } from '../Truncate/Truncate';\n\nimport './Field.css';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /** Whether the input is in an invalid state */\n    invalid?: boolean;\n    /** Whether the input is in a warning state */\n    warning?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const messageRef = React.useRef<HTMLSpanElement>(null);\n\n    const { disabled, children, invalid = false, warning = false, message, ...otherProps } = props;\n    const className = cn(\n        'flex min-h-[theme(spacing.18)] flex-col pb-4 text-xs font-bold leading-loose',\n        {\n            'text-gray-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn('-mb-4 h-4 truncate text-left text-xs font-normal leading-normal', {\n        'text-gray-700': !invalid && !warning,\n        'text-red-700': invalid,\n        'opacity-50': disabled,\n    });\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <Truncate tooltip={message}>\n                    <span\n                        className={messageClassName}\n                        data-taco=\"label-message\"\n                        ref={messageRef}\n                        role={invalid ? 'alert' : undefined}>\n                        {message}\n                    </span>\n                </Truncate>\n            )}\n        </label>\n    );\n});\n"],"names":["Field"],"mappings":";;;;AAuBO,MAAM,QAAQ,MAAM,WAAW,SAASA,OAAM,OAAmB,KAAkC;AACtG,QAAM,aAAa,MAAM,OAAwB,IAAI;AAErD,QAAM,EAAE,UAAU,UAAU,UAAU,OAAO,UAAU,OAAO,SAAS,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,iBAAiB;AAAA,IAAA;AAAA,IAErB,MAAM;AAAA,EAAA;AAEV,QAAM,mBAAmB,GAAG,mEAAmE;AAAA,IAC3F,iBAAiB,CAAC,WAAW,CAAC;AAAA,IAC9B,gBAAgB;AAAA,IAChB,cAAc;AAAA,EAAA,CACjB;AAED,SACI,sBAAA,cAAC,SAAA,EAAO,GAAG,YAAY,WAAsB,aAAU,SAAQ,IAAA,GAC1D,UACA,WACG,sBAAA,cAAC,UAAA,EAAS,SAAS,WACf,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,aAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM,UAAU,UAAU;AAAA,IAAA;AAAA,IACzB;AAAA,EAAA,CAET,CAER;AAER,CAAC;"}
+{"version":3,"file":"Field.js","sources":["../../../src/components/Field/Field.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { Truncate } from '@/components';\n\nimport './Field.css';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /** Whether the input is in an invalid state */\n    invalid?: boolean;\n    /** Whether the input is in a warning state */\n    warning?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const messageRef = React.useRef<HTMLSpanElement>(null);\n\n    const { disabled, children, invalid = false, warning = false, message, ...otherProps } = props;\n    const className = cn(\n        'flex min-h-[theme(spacing.18)] flex-col pb-4 text-xs font-bold leading-loose',\n        {\n            'text-gray-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn('-mb-4 h-4 truncate text-left text-xs font-normal leading-normal', {\n        'text-gray-700': !invalid && !warning,\n        'text-red-700': invalid,\n        'opacity-50': disabled,\n    });\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <Truncate tooltip={message}>\n                    <span\n                        className={messageClassName}\n                        data-taco=\"label-message\"\n                        ref={messageRef}\n                        role={invalid ? 'alert' : undefined}>\n                        {message}\n                    </span>\n                </Truncate>\n            )}\n        </label>\n    );\n});\n"],"names":["Field"],"mappings":";;;;AAuBO,MAAM,QAAQ,MAAM,WAAW,SAASA,OAAM,OAAmB,KAAkC;AACtG,QAAM,aAAa,MAAM,OAAwB,IAAI;AAErD,QAAM,EAAE,UAAU,UAAU,UAAU,OAAO,UAAU,OAAO,SAAS,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,iBAAiB;AAAA,IAAA;AAAA,IAErB,MAAM;AAAA,EAAA;AAEV,QAAM,mBAAmB,GAAG,mEAAmE;AAAA,IAC3F,iBAAiB,CAAC,WAAW,CAAC;AAAA,IAC9B,gBAAgB;AAAA,IAChB,cAAc;AAAA,EAAA,CACjB;AAED,SACI,sBAAA,cAAC,SAAA,EAAO,GAAG,YAAY,WAAsB,aAAU,SAAQ,IAAA,GAC1D,UACA,WACG,sBAAA,cAAC,UAAA,EAAS,SAAS,WACf,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,aAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM,UAAU,UAAU;AAAA,IAAA;AAAA,IACzB;AAAA,EAAA,CAET,CAER;AAER,CAAC;"}

package/dist/components/Form/Form.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Form.cjs","sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport './Form.css';\n\nexport type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {\n    /** Content should be composed of other Taco form elements */\n    children: React.ReactNode;\n    /** Display the form fields in a horizontal layout */\n    horizontal?: boolean;\n};\n\n/**\n * @deprecated\n */\nexport const Form = React.forwardRef(function Form(props: FormProps, ref: React.Ref<HTMLFormElement>) {\n    const { horizontal = false, ...otherProps } = props;\n    const className = cn(\n        'yt-form',\n        {\n            'yt-form--horizontal flex flex-wrap': horizontal,\n        },\n        props.className\n    );\n\n    return <form {...otherProps} className={className} data-taco=\"form\" ref={ref} />;\n});\n"],"names":["React","Form"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,OAAOA,iBAAM,WAAW,SAASC,MAAK,OAAkB,KAAiC;AAClG,QAAM,EAAE,aAAa,OAAO,GAAG,eAAe;AAC9C,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,sCAAsC;AAAA,IAAA;AAAA,IAE1C,MAAM;AAAA,EAAA;AAGV,wDAAQ,QAAA,EAAM,GAAG,YAAY,WAAsB,aAAU,QAAO,KAAU;AAClF,CAAC;;"}
+{"version":3,"file":"Form.cjs","sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport './Form.css';\n\nexport type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {\n    /** Content should be composed of other Taco form elements */\n    children: React.ReactNode;\n    /** Display the form fields in a horizontal layout */\n    horizontal?: boolean;\n};\n\n/**\n * @deprecated Use a combination of `<form>` (HTML) and `<Stack>`/`<Inline>` instead.\n */\nexport const Form = React.forwardRef(function Form(props: FormProps, ref: React.Ref<HTMLFormElement>) {\n    const { horizontal = false, ...otherProps } = props;\n    const className = cn(\n        'yt-form',\n        {\n            'yt-form--horizontal flex flex-wrap': horizontal,\n        },\n        props.className\n    );\n\n    return <form {...otherProps} className={className} data-taco=\"form\" ref={ref} />;\n});\n"],"names":["React","Form"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,OAAOA,iBAAM,WAAW,SAASC,MAAK,OAAkB,KAAiC;AAClG,QAAM,EAAE,aAAa,OAAO,GAAG,eAAe;AAC9C,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,sCAAsC;AAAA,IAAA;AAAA,IAE1C,MAAM;AAAA,EAAA;AAGV,wDAAQ,QAAA,EAAM,GAAG,YAAY,WAAsB,aAAU,QAAO,KAAU;AAClF,CAAC;;"}

package/dist/components/Form/Form.d.ts

@@ -6,7 +6,7 @@ export type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {
     horizontal?: boolean;
 };
 /**
- * @deprecated
+ * @deprecated Use a combination of `<form>` (HTML) and `<Stack>`/`<Inline>` instead.
  */
 export declare const Form: React.ForwardRefExoticComponent<React.FormHTMLAttributes<HTMLFormElement> & {
     /** Content should be composed of other Taco form elements */

package/dist/components/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport './Form.css';\n\nexport type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {\n    /** Content should be composed of other Taco form elements */\n    children: React.ReactNode;\n    /** Display the form fields in a horizontal layout */\n    horizontal?: boolean;\n};\n\n/**\n * @deprecated\n */\nexport const Form = React.forwardRef(function Form(props: FormProps, ref: React.Ref<HTMLFormElement>) {\n    const { horizontal = false, ...otherProps } = props;\n    const className = cn(\n        'yt-form',\n        {\n            'yt-form--horizontal flex flex-wrap': horizontal,\n        },\n        props.className\n    );\n\n    return <form {...otherProps} className={className} data-taco=\"form\" ref={ref} />;\n});\n"],"names":["Form"],"mappings":";;;AAeO,MAAM,OAAO,MAAM,WAAW,SAASA,MAAK,OAAkB,KAAiC;AAClG,QAAM,EAAE,aAAa,OAAO,GAAG,eAAe;AAC9C,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,sCAAsC;AAAA,IAAA;AAAA,IAE1C,MAAM;AAAA,EAAA;AAGV,6CAAQ,QAAA,EAAM,GAAG,YAAY,WAAsB,aAAU,QAAO,KAAU;AAClF,CAAC;"}
+{"version":3,"file":"Form.js","sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport './Form.css';\n\nexport type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {\n    /** Content should be composed of other Taco form elements */\n    children: React.ReactNode;\n    /** Display the form fields in a horizontal layout */\n    horizontal?: boolean;\n};\n\n/**\n * @deprecated Use a combination of `<form>` (HTML) and `<Stack>`/`<Inline>` instead.\n */\nexport const Form = React.forwardRef(function Form(props: FormProps, ref: React.Ref<HTMLFormElement>) {\n    const { horizontal = false, ...otherProps } = props;\n    const className = cn(\n        'yt-form',\n        {\n            'yt-form--horizontal flex flex-wrap': horizontal,\n        },\n        props.className\n    );\n\n    return <form {...otherProps} className={className} data-taco=\"form\" ref={ref} />;\n});\n"],"names":["Form"],"mappings":";;;AAeO,MAAM,OAAO,MAAM,WAAW,SAASA,MAAK,OAAkB,KAAiC;AAClG,QAAM,EAAE,aAAa,OAAO,GAAG,eAAe;AAC9C,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,sCAAsC;AAAA,IAAA;AAAA,IAE1C,MAAM;AAAA,EAAA;AAGV,6CAAQ,QAAA,EAAM,GAAG,YAAY,WAAsB,aAAU,QAAO,KAAU;AAClF,CAAC;"}

package/dist/components/Group/Group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Group.cjs","sources":["../../../src/components/Group/Group.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { Orientation } from '../../types';\n\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\n    /**\n     * Change what html tag element will render.\n     * Default value is `span`\n     */\n    as?: 'div' | 'span' | 'nav';\n    /** Content should be composed of other Taco elements */\n    children: React.ReactNode;\n    /**\n     * Define orientation of grouping.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n};\n\n/**\n * @deprecated\n */\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { as: Tag = 'span', orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        'flex gap-2 [&:has([data-taco=\"tag\"])]:!gap-1',\n        { 'flex-col': orientation === 'vertical' },\n        props.className\n    );\n    return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\n});\n"],"names":["React","Group"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBO,MAAM,QAAQA,iBAAM,WAAW,SAASC,OAAM,OAAmB,KAAgC;AACpG,QAAM,EAAE,IAAI,MAAM,QAAQ,cAAc,cAAc,GAAG,eAAe;AACxE,QAAM,YAAY;AAAA,IACd;AAAA,IACA,EAAE,YAAY,gBAAgB,WAAA;AAAA,IAC9B,MAAM;AAAA,EAAA;AAEV,wDAAQ,KAAA,EAAK,GAAG,YAAY,WAAsB,aAAU,SAAQ,KAAU;AAClF,CAAC;;"}
+{"version":3,"file":"Group.cjs","sources":["../../../src/components/Group/Group.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { Orientation } from '@/types';\n\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\n    /**\n     * Change what html tag element will render.\n     * Default value is `span`\n     */\n    as?: 'div' | 'span' | 'nav';\n    /** Content should be composed of other Taco elements */\n    children: React.ReactNode;\n    /**\n     * Define orientation of grouping.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n};\n\n/**\n * @deprecated Use `<Inline>` instead.\n *\n */\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { as: Tag = 'span', orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        'flex gap-2 [&:has([data-taco=\"tag\"])]:!gap-1',\n        { 'flex-col': orientation === 'vertical' },\n        props.className\n    );\n    return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\n});\n"],"names":["React","Group"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,QAAQA,iBAAM,WAAW,SAASC,OAAM,OAAmB,KAAgC;AACpG,QAAM,EAAE,IAAI,MAAM,QAAQ,cAAc,cAAc,GAAG,eAAe;AACxE,QAAM,YAAY;AAAA,IACd;AAAA,IACA,EAAE,YAAY,gBAAgB,WAAA;AAAA,IAC9B,MAAM;AAAA,EAAA;AAEV,wDAAQ,KAAA,EAAK,GAAG,YAAY,WAAsB,aAAU,SAAQ,KAAU;AAClF,CAAC;;"}

package/dist/components/Group/Group.d.ts

@@ -15,7 +15,8 @@ export type GroupProps = React.HTMLAttributes<HTMLElement> & {
     orientation?: Orientation;
 };
 /**
- * @deprecated
+ * @deprecated Use `<Inline>` instead.
+ *
  */
 export declare const Group: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
     /**

package/dist/components/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sources":["../../../src/components/Group/Group.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { Orientation } from '../../types';\n\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\n    /**\n     * Change what html tag element will render.\n     * Default value is `span`\n     */\n    as?: 'div' | 'span' | 'nav';\n    /** Content should be composed of other Taco elements */\n    children: React.ReactNode;\n    /**\n     * Define orientation of grouping.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n};\n\n/**\n * @deprecated\n */\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { as: Tag = 'span', orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        'flex gap-2 [&:has([data-taco=\"tag\"])]:!gap-1',\n        { 'flex-col': orientation === 'vertical' },\n        props.className\n    );\n    return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\n});\n"],"names":["Group"],"mappings":";;AAuBO,MAAM,QAAQ,MAAM,WAAW,SAASA,OAAM,OAAmB,KAAgC;AACpG,QAAM,EAAE,IAAI,MAAM,QAAQ,cAAc,cAAc,GAAG,eAAe;AACxE,QAAM,YAAY;AAAA,IACd;AAAA,IACA,EAAE,YAAY,gBAAgB,WAAA;AAAA,IAC9B,MAAM;AAAA,EAAA;AAEV,6CAAQ,KAAA,EAAK,GAAG,YAAY,WAAsB,aAAU,SAAQ,KAAU;AAClF,CAAC;"}
+{"version":3,"file":"Group.js","sources":["../../../src/components/Group/Group.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { Orientation } from '@/types';\n\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\n    /**\n     * Change what html tag element will render.\n     * Default value is `span`\n     */\n    as?: 'div' | 'span' | 'nav';\n    /** Content should be composed of other Taco elements */\n    children: React.ReactNode;\n    /**\n     * Define orientation of grouping.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n};\n\n/**\n * @deprecated Use `<Inline>` instead.\n *\n */\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { as: Tag = 'span', orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        'flex gap-2 [&:has([data-taco=\"tag\"])]:!gap-1',\n        { 'flex-col': orientation === 'vertical' },\n        props.className\n    );\n    return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\n});\n"],"names":["Group"],"mappings":";;AAwBO,MAAM,QAAQ,MAAM,WAAW,SAASA,OAAM,OAAmB,KAAgC;AACpG,QAAM,EAAE,IAAI,MAAM,QAAQ,cAAc,cAAc,GAAG,eAAe;AACxE,QAAM,YAAY;AAAA,IACd;AAAA,IACA,EAAE,YAAY,gBAAgB,WAAA;AAAA,IAC9B,MAAM;AAAA,EAAA;AAEV,6CAAQ,KAAA,EAAK,GAAG,YAAY,WAAsB,aAAU,SAAQ,KAAU;AAClF,CAAC;"}

package/dist/components/Hanger/Hanger.cjs

@@ -4,10 +4,10 @@ const popover = require("@base-ui/react/popover");
 const cn = require("clsx");
 const React = require("react");
 const mergeRefs = require("../../utils/mergeRefs.cjs");
-const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
-const Localization = require("../Provider/Localization.cjs");
 const Arrow = require("./Arrow.cjs");
 ;/* empty css             */
+const Localization = require("../Provider/Localization.cjs");
+const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/components/Hanger/Hanger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Hanger.cjs","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { Placement } from '../..';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nimport { UnstyledArrow } from './Arrow';\n\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    anchorRef: React.RefObject<HTMLElement | null>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    anchorRef: { current: null },\n    onClose: undefined,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.PropsWithChildren;\n// `Hanger.Anchor` is a pure pass-through that renders its child untouched. It exists only to keep\n// the composable API (<Hanger.Anchor>…</Hanger.Anchor>) — the Hanger root owns the single DOM\n// wrapper that serves as the positioning anchor, so this adds no DOM and needs no ref.\nconst Anchor: React.FC<HangerAnchorProps> = ({ children }) => <>{children}</>;\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 flex w-full text-base font-bold', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n    hideWhenDetached?: boolean;\n    container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'max-w-sm rounded border border-transparent bg-blue-500 p-3 pr-12 text-white yt-shadow focus:border-transparent print:hidden',\n        props.className\n    );\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Positioner\n                anchor={context.anchorRef}\n                className={hideWhenDetached ? 'data-[anchor-hidden]:hidden' : undefined}\n                side={side}\n                sideOffset={11}>\n                <PopoverPrimitive.Popup {...popoverContentProps} className={className} data-taco=\"hanger\" ref={ref}>\n                    {props.children}\n                    <UnstyledArrow className=\"text-blue-500\" />\n                    <PopoverPrimitive.Close\n                        render={\n                            <LegacyIconButton\n                                appearance=\"primary\"\n                                aria-label={texts.hanger.close}\n                                className=\"absolute right-0 top-0 mx-2 mt-2 text-white\"\n                                icon=\"close\"\n                                onClick={context.onClose}\n                            />\n                        }\n                    />\n                </PopoverPrimitive.Popup>\n            </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: React.JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.FC<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLSpanElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const anchorRef = React.useRef<HTMLElement>(null);\n    const combinedRef = mergeRefs([anchorRef as React.MutableRefObject<HTMLElement | null>, ref]);\n    const context = React.useMemo(() => ({ anchorRef, onClose }), [onClose]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    // Hanger should only close from its close button, matching the previous Radix onInteractOutside behavior.\n    const handleOpenChange = (nextOpen: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {\n        if (!nextOpen && (eventDetails.reason === 'outside-press' || eventDetails.reason === 'focus-out')) {\n            eventDetails.cancel();\n            return;\n        }\n\n        setOpen(nextOpen);\n    };\n\n    // Single inline <span> wrapper: serves as the Floating UI anchor (its rect matches the\n    // in-flow trigger child) and contains the FloatingFocusManager guard spans Base UI injects\n    // when open, so they aren't siblings of the Hanger in parent IntersectionObservers\n    // (e.g. OverflowGroup's) and don't get counted as overflowed children.\n    return (\n        <HangerContext.Provider value={context}>\n            <span {...otherProps} ref={combinedRef as React.Ref<HTMLSpanElement>}>\n                <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n                    {/* Anchor via the `anchor` prop. */}\n                    {anchor}\n                    {/* Composition (<Hanger.Anchor>) and the popup Content (portaled out) come through {children}. */}\n                    {children}\n                </PopoverPrimitive.Root>\n            </span>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["React","useLocalization","PopoverPrimitive","UnstyledArrow","LegacyIconButton","Hanger","mergeRefs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,gBAAgBA,iBAAM,cAAkC;AAAA,EAC1D,WAAW,EAAE,SAAS,KAAA;AAAA,EACtB,SAAS;AACb,CAAC;AAWD,MAAM,SAAsC,CAAC,EAAE,SAAA,sFAAkB,QAAS;AAGnE,MAAM,QAAQA,iBAAM,WAAW,SAAS,YAAY,OAAyB,KAAoC;AACpH,QAAM,YAAY,GAAG,wCAAwC,MAAM,SAAS;AAC5E,SAAOA,iCAAA,cAAC,QAAA,EAAM,GAAG,OAAO,WAAsB,KAAU;AAC5D,CAAC;AASD,MAAM,UAAUA,iBAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AAC/G,QAAM,EAAE,WAAW,MAAM,mBAAmB,OAAO,WAAW,GAAG,wBAAwB;AACzF,QAAM,UAAUA,iBAAM,WAAW,aAAa;AAC9C,QAAM,EAAE,MAAA,IAAUC,6BAAA;AAClB,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,SACID,iCAAA,cAACE,QAAAA,QAAiB,QAAjB,EAAwB,UAAA,GACrBF,iCAAA;AAAA,IAACE,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,QAAQ,QAAQ;AAAA,MAChB,WAAW,mBAAmB,gCAAgC;AAAA,MAC9D;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,mDACXA,QAAAA,QAAiB,OAAjB,EAAwB,GAAG,qBAAqB,WAAsB,aAAU,UAAS,IAAA,GACrF,MAAM,UACPF,iCAAA,cAACG,MAAAA,eAAA,EAAc,WAAU,iBAAgB,GACzCH,iCAAA;AAAA,MAACE,QAAAA,QAAiB;AAAA,MAAjB;AAAA,QACG,QACIF,iCAAA;AAAA,UAACI,WAAAA;AAAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,cAAY,MAAM,OAAO;AAAA,YACzB,WAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACrB;AAAA,IAAA,CAGZ;AAAA,EAAA,CAER;AAER,CAAC;AAoBM,MAAM,SAASJ,iBAAM,WAAyC,SAASK,QAAO,OAAO,KAAK;AAC7F,QAAM,EAAE,QAAQ,UAAU,cAAc,MAAM,SAAS,GAAG,eAAe;AACzE,QAAM,YAAYL,iBAAM,OAAoB,IAAI;AAChD,QAAM,cAAcM,UAAAA,UAAU,CAAC,WAAyD,GAAG,CAAC;AAC5F,QAAM,UAAUN,iBAAM,QAAQ,OAAO,EAAE,WAAW,QAAA,IAAY,CAAC,OAAO,CAAC;AAGvE,QAAM,CAAC,MAAM,OAAO,IAAIA,iBAAM,SAAS,KAAK;AAC5CA,mBAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACb,cAAQ,WAAW;AAAA,IACvB;AAAA,EACJ,GAAG,CAAA,CAAE;AAGL,QAAM,mBAAmB,CAAC,UAAmB,iBAA2D;AACpG,QAAI,CAAC,aAAa,aAAa,WAAW,mBAAmB,aAAa,WAAW,cAAc;AAC/F,mBAAa,OAAA;AACb;AAAA,IACJ;AAEA,YAAQ,QAAQ;AAAA,EACpB;AAMA,SACIA,iCAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,QAAA,GAC3BA,iCAAA,cAAC,QAAA,EAAM,GAAG,YAAY,KAAK,eACvBA,iCAAA,cAACE,QAAAA,QAAiB,MAAjB,EAAsB,MAAY,cAAc,iBAAA,GAE5C,QAEA,QACL,CACJ,CACJ;AAER,CAAC;AACD,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;;;"}
+{"version":3,"file":"Hanger.cjs","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { LegacyIconButton, useLocalization } from '@/components';\nimport type { Placement } from '@/types';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nimport { UnstyledArrow } from './Arrow';\n\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    anchorRef: React.RefObject<HTMLElement | null>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    anchorRef: { current: null },\n    onClose: undefined,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.PropsWithChildren;\n// `Hanger.Anchor` is a pure pass-through that renders its child untouched. It exists only to keep\n// the composable API (<Hanger.Anchor>…</Hanger.Anchor>) — the Hanger root owns the single DOM\n// wrapper that serves as the positioning anchor, so this adds no DOM and needs no ref.\nconst Anchor: React.FC<HangerAnchorProps> = ({ children }) => <>{children}</>;\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 flex w-full text-base font-bold', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n    hideWhenDetached?: boolean;\n    container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'max-w-sm rounded border border-transparent bg-blue-500 p-3 pr-12 text-white yt-shadow focus:border-transparent print:hidden',\n        props.className\n    );\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Positioner\n                anchor={context.anchorRef}\n                className={hideWhenDetached ? 'data-[anchor-hidden]:hidden' : undefined}\n                side={side}\n                sideOffset={11}>\n                <PopoverPrimitive.Popup {...popoverContentProps} className={className} data-taco=\"hanger\" ref={ref}>\n                    {props.children}\n                    <UnstyledArrow className=\"text-blue-500\" />\n                    <PopoverPrimitive.Close\n                        render={\n                            <LegacyIconButton\n                                appearance=\"primary\"\n                                aria-label={texts.hanger.close}\n                                className=\"absolute right-0 top-0 mx-2 mt-2 text-white\"\n                                icon=\"close\"\n                                onClick={context.onClose}\n                            />\n                        }\n                    />\n                </PopoverPrimitive.Popup>\n            </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: React.JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.FC<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLSpanElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const anchorRef = React.useRef<HTMLElement>(null);\n    const combinedRef = mergeRefs([anchorRef as React.MutableRefObject<HTMLElement | null>, ref]);\n    const context = React.useMemo(() => ({ anchorRef, onClose }), [onClose]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    // Hanger should only close from its close button, matching the previous Radix onInteractOutside behavior.\n    const handleOpenChange = (nextOpen: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {\n        if (!nextOpen && (eventDetails.reason === 'outside-press' || eventDetails.reason === 'focus-out')) {\n            eventDetails.cancel();\n            return;\n        }\n\n        setOpen(nextOpen);\n    };\n\n    // Single inline <span> wrapper: serves as the Floating UI anchor (its rect matches the\n    // in-flow trigger child) and contains the FloatingFocusManager guard spans Base UI injects\n    // when open, so they aren't siblings of the Hanger in parent IntersectionObservers\n    // (e.g. OverflowGroup's) and don't get counted as overflowed children.\n    return (\n        <HangerContext.Provider value={context}>\n            <span {...otherProps} ref={combinedRef as React.Ref<HTMLSpanElement>}>\n                <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n                    {/* Anchor via the `anchor` prop. */}\n                    {anchor}\n                    {/* Composition (<Hanger.Anchor>) and the popup Content (portaled out) come through {children}. */}\n                    {children}\n                </PopoverPrimitive.Root>\n            </span>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["React","useLocalization","PopoverPrimitive","UnstyledArrow","LegacyIconButton","Hanger","mergeRefs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,gBAAgBA,iBAAM,cAAkC;AAAA,EAC1D,WAAW,EAAE,SAAS,KAAA;AAAA,EACtB,SAAS;AACb,CAAC;AAWD,MAAM,SAAsC,CAAC,EAAE,SAAA,sFAAkB,QAAS;AAGnE,MAAM,QAAQA,iBAAM,WAAW,SAAS,YAAY,OAAyB,KAAoC;AACpH,QAAM,YAAY,GAAG,wCAAwC,MAAM,SAAS;AAC5E,SAAOA,iCAAA,cAAC,QAAA,EAAM,GAAG,OAAO,WAAsB,KAAU;AAC5D,CAAC;AASD,MAAM,UAAUA,iBAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AAC/G,QAAM,EAAE,WAAW,MAAM,mBAAmB,OAAO,WAAW,GAAG,wBAAwB;AACzF,QAAM,UAAUA,iBAAM,WAAW,aAAa;AAC9C,QAAM,EAAE,MAAA,IAAUC,6BAAA;AAClB,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,SACID,iCAAA,cAACE,QAAAA,QAAiB,QAAjB,EAAwB,UAAA,GACrBF,iCAAA;AAAA,IAACE,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,QAAQ,QAAQ;AAAA,MAChB,WAAW,mBAAmB,gCAAgC;AAAA,MAC9D;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,mDACXA,QAAAA,QAAiB,OAAjB,EAAwB,GAAG,qBAAqB,WAAsB,aAAU,UAAS,IAAA,GACrF,MAAM,UACPF,iCAAA,cAACG,MAAAA,eAAA,EAAc,WAAU,iBAAgB,GACzCH,iCAAA;AAAA,MAACE,QAAAA,QAAiB;AAAA,MAAjB;AAAA,QACG,QACIF,iCAAA;AAAA,UAACI,WAAAA;AAAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,cAAY,MAAM,OAAO;AAAA,YACzB,WAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACrB;AAAA,IAAA,CAGZ;AAAA,EAAA,CAER;AAER,CAAC;AAoBM,MAAM,SAASJ,iBAAM,WAAyC,SAASK,QAAO,OAAO,KAAK;AAC7F,QAAM,EAAE,QAAQ,UAAU,cAAc,MAAM,SAAS,GAAG,eAAe;AACzE,QAAM,YAAYL,iBAAM,OAAoB,IAAI;AAChD,QAAM,cAAcM,UAAAA,UAAU,CAAC,WAAyD,GAAG,CAAC;AAC5F,QAAM,UAAUN,iBAAM,QAAQ,OAAO,EAAE,WAAW,QAAA,IAAY,CAAC,OAAO,CAAC;AAGvE,QAAM,CAAC,MAAM,OAAO,IAAIA,iBAAM,SAAS,KAAK;AAC5CA,mBAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACb,cAAQ,WAAW;AAAA,IACvB;AAAA,EACJ,GAAG,CAAA,CAAE;AAGL,QAAM,mBAAmB,CAAC,UAAmB,iBAA2D;AACpG,QAAI,CAAC,aAAa,aAAa,WAAW,mBAAmB,aAAa,WAAW,cAAc;AAC/F,mBAAa,OAAA;AACb;AAAA,IACJ;AAEA,YAAQ,QAAQ;AAAA,EACpB;AAMA,SACIA,iCAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,QAAA,GAC3BA,iCAAA,cAAC,QAAA,EAAM,GAAG,YAAY,KAAK,eACvBA,iCAAA,cAACE,QAAAA,QAAiB,MAAjB,EAAsB,MAAY,cAAc,iBAAA,GAE5C,QAEA,QACL,CACJ,CACJ;AAER,CAAC;AACD,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;;;"}

package/dist/components/Hanger/Hanger.d.ts

@@ -1,4 +1,4 @@
-import { Placement } from '../..';
+import { Placement } from '../../types';
 import * as React from 'react';
 export type HangerTexts = {
     /** Aria-label for the close icon button of hanger */

package/dist/components/Hanger/Hanger.js

@@ -2,10 +2,10 @@ import { Popover } from "@base-ui/react/popover";
 import cn from "clsx";
 import * as React from "react";
 import { mergeRefs } from "../../utils/mergeRefs.js";
-import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
-import { useLocalization } from "../Provider/Localization.js";
 import { UnstyledArrow } from "./Arrow.js";
 /* empty css           */
+import { useLocalization } from "../Provider/Localization.js";
+import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
 const HangerContext = React.createContext({
   anchorRef: { current: null },
   onClose: void 0

package/dist/components/Hanger/Hanger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hanger.js","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { Placement } from '../..';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nimport { UnstyledArrow } from './Arrow';\n\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    anchorRef: React.RefObject<HTMLElement | null>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    anchorRef: { current: null },\n    onClose: undefined,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.PropsWithChildren;\n// `Hanger.Anchor` is a pure pass-through that renders its child untouched. It exists only to keep\n// the composable API (<Hanger.Anchor>…</Hanger.Anchor>) — the Hanger root owns the single DOM\n// wrapper that serves as the positioning anchor, so this adds no DOM and needs no ref.\nconst Anchor: React.FC<HangerAnchorProps> = ({ children }) => <>{children}</>;\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 flex w-full text-base font-bold', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n    hideWhenDetached?: boolean;\n    container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'max-w-sm rounded border border-transparent bg-blue-500 p-3 pr-12 text-white yt-shadow focus:border-transparent print:hidden',\n        props.className\n    );\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Positioner\n                anchor={context.anchorRef}\n                className={hideWhenDetached ? 'data-[anchor-hidden]:hidden' : undefined}\n                side={side}\n                sideOffset={11}>\n                <PopoverPrimitive.Popup {...popoverContentProps} className={className} data-taco=\"hanger\" ref={ref}>\n                    {props.children}\n                    <UnstyledArrow className=\"text-blue-500\" />\n                    <PopoverPrimitive.Close\n                        render={\n                            <LegacyIconButton\n                                appearance=\"primary\"\n                                aria-label={texts.hanger.close}\n                                className=\"absolute right-0 top-0 mx-2 mt-2 text-white\"\n                                icon=\"close\"\n                                onClick={context.onClose}\n                            />\n                        }\n                    />\n                </PopoverPrimitive.Popup>\n            </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: React.JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.FC<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLSpanElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const anchorRef = React.useRef<HTMLElement>(null);\n    const combinedRef = mergeRefs([anchorRef as React.MutableRefObject<HTMLElement | null>, ref]);\n    const context = React.useMemo(() => ({ anchorRef, onClose }), [onClose]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    // Hanger should only close from its close button, matching the previous Radix onInteractOutside behavior.\n    const handleOpenChange = (nextOpen: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {\n        if (!nextOpen && (eventDetails.reason === 'outside-press' || eventDetails.reason === 'focus-out')) {\n            eventDetails.cancel();\n            return;\n        }\n\n        setOpen(nextOpen);\n    };\n\n    // Single inline <span> wrapper: serves as the Floating UI anchor (its rect matches the\n    // in-flow trigger child) and contains the FloatingFocusManager guard spans Base UI injects\n    // when open, so they aren't siblings of the Hanger in parent IntersectionObservers\n    // (e.g. OverflowGroup's) and don't get counted as overflowed children.\n    return (\n        <HangerContext.Provider value={context}>\n            <span {...otherProps} ref={combinedRef as React.Ref<HTMLSpanElement>}>\n                <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n                    {/* Anchor via the `anchor` prop. */}\n                    {anchor}\n                    {/* Composition (<Hanger.Anchor>) and the popup Content (portaled out) come through {children}. */}\n                    {children}\n                </PopoverPrimitive.Root>\n            </span>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["PopoverPrimitive","Hanger"],"mappings":";;;;;;;;AAkBA,MAAM,gBAAgB,MAAM,cAAkC;AAAA,EAC1D,WAAW,EAAE,SAAS,KAAA;AAAA,EACtB,SAAS;AACb,CAAC;AAWD,MAAM,SAAsC,CAAC,EAAE,SAAA,gEAAkB,QAAS;AAGnE,MAAM,QAAQ,MAAM,WAAW,SAAS,YAAY,OAAyB,KAAoC;AACpH,QAAM,YAAY,GAAG,wCAAwC,MAAM,SAAS;AAC5E,SAAO,sBAAA,cAAC,QAAA,EAAM,GAAG,OAAO,WAAsB,KAAU;AAC5D,CAAC;AASD,MAAM,UAAU,MAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AAC/G,QAAM,EAAE,WAAW,MAAM,mBAAmB,OAAO,WAAW,GAAG,wBAAwB;AACzF,QAAM,UAAU,MAAM,WAAW,aAAa;AAC9C,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,SACI,sBAAA,cAACA,QAAiB,QAAjB,EAAwB,UAAA,GACrB,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG,QAAQ,QAAQ;AAAA,MAChB,WAAW,mBAAmB,gCAAgC;AAAA,MAC9D;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,wCACXA,QAAiB,OAAjB,EAAwB,GAAG,qBAAqB,WAAsB,aAAU,UAAS,IAAA,GACrF,MAAM,UACP,sBAAA,cAAC,eAAA,EAAc,WAAU,iBAAgB,GACzC,sBAAA;AAAA,MAACA,QAAiB;AAAA,MAAjB;AAAA,QACG,QACI,sBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,cAAY,MAAM,OAAO;AAAA,YACzB,WAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACrB;AAAA,IAAA,CAGZ;AAAA,EAAA,CAER;AAER,CAAC;AAoBM,MAAM,SAAS,MAAM,WAAyC,SAASC,QAAO,OAAO,KAAK;AAC7F,QAAM,EAAE,QAAQ,UAAU,cAAc,MAAM,SAAS,GAAG,eAAe;AACzE,QAAM,YAAY,MAAM,OAAoB,IAAI;AAChD,QAAM,cAAc,UAAU,CAAC,WAAyD,GAAG,CAAC;AAC5F,QAAM,UAAU,MAAM,QAAQ,OAAO,EAAE,WAAW,QAAA,IAAY,CAAC,OAAO,CAAC;AAGvE,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACb,cAAQ,WAAW;AAAA,IACvB;AAAA,EACJ,GAAG,CAAA,CAAE;AAGL,QAAM,mBAAmB,CAAC,UAAmB,iBAA2D;AACpG,QAAI,CAAC,aAAa,aAAa,WAAW,mBAAmB,aAAa,WAAW,cAAc;AAC/F,mBAAa,OAAA;AACb;AAAA,IACJ;AAEA,YAAQ,QAAQ;AAAA,EACpB;AAMA,SACI,sBAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,QAAA,GAC3B,sBAAA,cAAC,QAAA,EAAM,GAAG,YAAY,KAAK,eACvB,sBAAA,cAACD,QAAiB,MAAjB,EAAsB,MAAY,cAAc,iBAAA,GAE5C,QAEA,QACL,CACJ,CACJ;AAER,CAAC;AACD,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;"}
+{"version":3,"file":"Hanger.js","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { LegacyIconButton, useLocalization } from '@/components';\nimport type { Placement } from '@/types';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nimport { UnstyledArrow } from './Arrow';\n\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    anchorRef: React.RefObject<HTMLElement | null>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    anchorRef: { current: null },\n    onClose: undefined,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.PropsWithChildren;\n// `Hanger.Anchor` is a pure pass-through that renders its child untouched. It exists only to keep\n// the composable API (<Hanger.Anchor>…</Hanger.Anchor>) — the Hanger root owns the single DOM\n// wrapper that serves as the positioning anchor, so this adds no DOM and needs no ref.\nconst Anchor: React.FC<HangerAnchorProps> = ({ children }) => <>{children}</>;\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 flex w-full text-base font-bold', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n    hideWhenDetached?: boolean;\n    container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'max-w-sm rounded border border-transparent bg-blue-500 p-3 pr-12 text-white yt-shadow focus:border-transparent print:hidden',\n        props.className\n    );\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Positioner\n                anchor={context.anchorRef}\n                className={hideWhenDetached ? 'data-[anchor-hidden]:hidden' : undefined}\n                side={side}\n                sideOffset={11}>\n                <PopoverPrimitive.Popup {...popoverContentProps} className={className} data-taco=\"hanger\" ref={ref}>\n                    {props.children}\n                    <UnstyledArrow className=\"text-blue-500\" />\n                    <PopoverPrimitive.Close\n                        render={\n                            <LegacyIconButton\n                                appearance=\"primary\"\n                                aria-label={texts.hanger.close}\n                                className=\"absolute right-0 top-0 mx-2 mt-2 text-white\"\n                                icon=\"close\"\n                                onClick={context.onClose}\n                            />\n                        }\n                    />\n                </PopoverPrimitive.Popup>\n            </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: React.JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.FC<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLSpanElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const anchorRef = React.useRef<HTMLElement>(null);\n    const combinedRef = mergeRefs([anchorRef as React.MutableRefObject<HTMLElement | null>, ref]);\n    const context = React.useMemo(() => ({ anchorRef, onClose }), [onClose]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    // Hanger should only close from its close button, matching the previous Radix onInteractOutside behavior.\n    const handleOpenChange = (nextOpen: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {\n        if (!nextOpen && (eventDetails.reason === 'outside-press' || eventDetails.reason === 'focus-out')) {\n            eventDetails.cancel();\n            return;\n        }\n\n        setOpen(nextOpen);\n    };\n\n    // Single inline <span> wrapper: serves as the Floating UI anchor (its rect matches the\n    // in-flow trigger child) and contains the FloatingFocusManager guard spans Base UI injects\n    // when open, so they aren't siblings of the Hanger in parent IntersectionObservers\n    // (e.g. OverflowGroup's) and don't get counted as overflowed children.\n    return (\n        <HangerContext.Provider value={context}>\n            <span {...otherProps} ref={combinedRef as React.Ref<HTMLSpanElement>}>\n                <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n                    {/* Anchor via the `anchor` prop. */}\n                    {anchor}\n                    {/* Composition (<Hanger.Anchor>) and the popup Content (portaled out) come through {children}. */}\n                    {children}\n                </PopoverPrimitive.Root>\n            </span>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["PopoverPrimitive","Hanger"],"mappings":";;;;;;;;AAiBA,MAAM,gBAAgB,MAAM,cAAkC;AAAA,EAC1D,WAAW,EAAE,SAAS,KAAA;AAAA,EACtB,SAAS;AACb,CAAC;AAWD,MAAM,SAAsC,CAAC,EAAE,SAAA,gEAAkB,QAAS;AAGnE,MAAM,QAAQ,MAAM,WAAW,SAAS,YAAY,OAAyB,KAAoC;AACpH,QAAM,YAAY,GAAG,wCAAwC,MAAM,SAAS;AAC5E,SAAO,sBAAA,cAAC,QAAA,EAAM,GAAG,OAAO,WAAsB,KAAU;AAC5D,CAAC;AASD,MAAM,UAAU,MAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AAC/G,QAAM,EAAE,WAAW,MAAM,mBAAmB,OAAO,WAAW,GAAG,wBAAwB;AACzF,QAAM,UAAU,MAAM,WAAW,aAAa;AAC9C,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,SACI,sBAAA,cAACA,QAAiB,QAAjB,EAAwB,UAAA,GACrB,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG,QAAQ,QAAQ;AAAA,MAChB,WAAW,mBAAmB,gCAAgC;AAAA,MAC9D;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,wCACXA,QAAiB,OAAjB,EAAwB,GAAG,qBAAqB,WAAsB,aAAU,UAAS,IAAA,GACrF,MAAM,UACP,sBAAA,cAAC,eAAA,EAAc,WAAU,iBAAgB,GACzC,sBAAA;AAAA,MAACA,QAAiB;AAAA,MAAjB;AAAA,QACG,QACI,sBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,cAAY,MAAM,OAAO;AAAA,YACzB,WAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACrB;AAAA,IAAA,CAGZ;AAAA,EAAA,CAER;AAER,CAAC;AAoBM,MAAM,SAAS,MAAM,WAAyC,SAASC,QAAO,OAAO,KAAK;AAC7F,QAAM,EAAE,QAAQ,UAAU,cAAc,MAAM,SAAS,GAAG,eAAe;AACzE,QAAM,YAAY,MAAM,OAAoB,IAAI;AAChD,QAAM,cAAc,UAAU,CAAC,WAAyD,GAAG,CAAC;AAC5F,QAAM,UAAU,MAAM,QAAQ,OAAO,EAAE,WAAW,QAAA,IAAY,CAAC,OAAO,CAAC;AAGvE,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACb,cAAQ,WAAW;AAAA,IACvB;AAAA,EACJ,GAAG,CAAA,CAAE;AAGL,QAAM,mBAAmB,CAAC,UAAmB,iBAA2D;AACpG,QAAI,CAAC,aAAa,aAAa,WAAW,mBAAmB,aAAa,WAAW,cAAc;AAC/F,mBAAa,OAAA;AACb;AAAA,IACJ;AAEA,YAAQ,QAAQ;AAAA,EACpB;AAMA,SACI,sBAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,QAAA,GAC3B,sBAAA,cAAC,QAAA,EAAM,GAAG,YAAY,KAAK,eACvB,sBAAA,cAACD,QAAiB,MAAjB,EAAsB,MAAY,cAAc,iBAAA,GAE5C,QAEA,QACL,CACJ,CACJ;AAER,CAAC;AACD,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;"}

package/dist/components/Header/components/Agreement/Badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.cjs","sources":["../../../../../src/components/Header/components/Agreement/Badge.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Badge } from '../../../Badge/Badge';\n\nimport type { Agreement } from './types';\n\nexport type AgreementBadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\n    agreement: Agreement;\n};\n\nexport const AgreementBadge = ({ agreement, ...props }: AgreementBadgeProps) => {\n    if (agreement.isAdministrator) {\n        return (\n            <Badge {...props} color=\"blue\" small>\n                Admin\n            </Badge>\n        );\n    }\n    if (agreement.isDeveloper) {\n        return (\n            <Badge {...props} color=\"blue\" small>\n                Developer\n            </Badge>\n        );\n    }\n\n    return null;\n};\n"],"names":["Badge"],"mappings":";;;;AAUO,MAAM,iBAAiB,CAAC,EAAE,WAAW,GAAG,YAAiC;AAC5E,MAAI,UAAU,iBAAiB;AAC3B,WACI,sBAAA,cAACA,MAAAA,SAAO,GAAG,OAAO,OAAM,QAAO,OAAK,QAAC,OAErC;AAAA,EAER;AACA,MAAI,UAAU,aAAa;AACvB,WACI,sBAAA,cAACA,MAAAA,SAAO,GAAG,OAAO,OAAM,QAAO,OAAK,QAAC,WAErC;AAAA,EAER;AAEA,SAAO;AACX;;"}
+{"version":3,"file":"Badge.cjs","sources":["../../../../../src/components/Header/components/Agreement/Badge.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Badge } from '@/components';\n\nimport type { Agreement } from './types';\n\nexport type AgreementBadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\n    agreement: Agreement;\n};\n\nexport const AgreementBadge = ({ agreement, ...props }: AgreementBadgeProps) => {\n    if (agreement.isAdministrator) {\n        return (\n            <Badge {...props} color=\"blue\" small>\n                Admin\n            </Badge>\n        );\n    }\n    if (agreement.isDeveloper) {\n        return (\n            <Badge {...props} color=\"blue\" small>\n                Developer\n            </Badge>\n        );\n    }\n\n    return null;\n};\n"],"names":["Badge"],"mappings":";;;;AAUO,MAAM,iBAAiB,CAAC,EAAE,WAAW,GAAG,YAAiC;AAC5E,MAAI,UAAU,iBAAiB;AAC3B,WACI,sBAAA,cAACA,MAAAA,SAAO,GAAG,OAAO,OAAM,QAAO,OAAK,QAAC,OAErC;AAAA,EAER;AACA,MAAI,UAAU,aAAa;AACvB,WACI,sBAAA,cAACA,MAAAA,SAAO,GAAG,OAAO,OAAM,QAAO,OAAK,QAAC,WAErC;AAAA,EAER;AAEA,SAAO;AACX;;"}

package/dist/components/Header/components/Agreement/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../../src/components/Header/components/Agreement/Badge.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Badge } from '../../../Badge/Badge';\n\nimport type { Agreement } from './types';\n\nexport type AgreementBadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\n    agreement: Agreement;\n};\n\nexport const AgreementBadge = ({ agreement, ...props }: AgreementBadgeProps) => {\n    if (agreement.isAdministrator) {\n        return (\n            <Badge {...props} color=\"blue\" small>\n                Admin\n            </Badge>\n        );\n    }\n    if (agreement.isDeveloper) {\n        return (\n            <Badge {...props} color=\"blue\" small>\n                Developer\n            </Badge>\n        );\n    }\n\n    return null;\n};\n"],"names":["React"],"mappings":";;AAUO,MAAM,iBAAiB,CAAC,EAAE,WAAW,GAAG,YAAiC;AAC5E,MAAI,UAAU,iBAAiB;AAC3B,WACIA,+BAAA,cAAC,SAAO,GAAG,OAAO,OAAM,QAAO,OAAK,QAAC,OAErC;AAAA,EAER;AACA,MAAI,UAAU,aAAa;AACvB,WACIA,+BAAA,cAAC,SAAO,GAAG,OAAO,OAAM,QAAO,OAAK,QAAC,WAErC;AAAA,EAER;AAEA,SAAO;AACX;"}
+{"version":3,"file":"Badge.js","sources":["../../../../../src/components/Header/components/Agreement/Badge.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Badge } from '@/components';\n\nimport type { Agreement } from './types';\n\nexport type AgreementBadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\n    agreement: Agreement;\n};\n\nexport const AgreementBadge = ({ agreement, ...props }: AgreementBadgeProps) => {\n    if (agreement.isAdministrator) {\n        return (\n            <Badge {...props} color=\"blue\" small>\n                Admin\n            </Badge>\n        );\n    }\n    if (agreement.isDeveloper) {\n        return (\n            <Badge {...props} color=\"blue\" small>\n                Developer\n            </Badge>\n        );\n    }\n\n    return null;\n};\n"],"names":["React"],"mappings":";;AAUO,MAAM,iBAAiB,CAAC,EAAE,WAAW,GAAG,YAAiC;AAC5E,MAAI,UAAU,iBAAiB;AAC3B,WACIA,+BAAA,cAAC,SAAO,GAAG,OAAO,OAAM,QAAO,OAAK,QAAC,OAErC;AAAA,EAER;AACA,MAAI,UAAU,aAAa;AACvB,WACIA,+BAAA,cAAC,SAAO,GAAG,OAAO,OAAM,QAAO,OAAK,QAAC,WAErC;AAAA,EAER;AAEA,SAAO;AACX;"}

package/dist/components/Header/components/Agreement/Display.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Display.cjs","sources":["../../../../../src/components/Header/components/Agreement/Display.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { useMatchMedia } from '../../../../hooks/useMatchMedia';\n\nimport { AgreementAvatar } from './Avatar';\nimport { AgreementBadge } from './Badge';\nimport { AgreementItem } from './Item';\nimport type { Agreement } from './types';\n\nexport type AgreementDisplayProps = {\n    children?: React.JSX.Element | null;\n    className?: string;\n    currentAgreement: Agreement;\n    fallbackImageSrc: string;\n};\n\nexport const AgreementDisplay = (props: AgreementDisplayProps) => {\n    const { children, currentAgreement, fallbackImageSrc } = props;\n    const isXlScreen = useMatchMedia('(min-width: 1280px)', window.innerWidth > 1280);\n\n    if (isXlScreen) {\n        const className = cn('h-12 flex-grow xl:[button>&]:hover:bg-white/[0.16]', props.className);\n        return (\n            <AgreementItem {...currentAgreement} children={children} className={className} fallbackImageSrc={fallbackImageSrc} />\n        );\n    }\n\n    return (\n        <span className=\"relative flex h-12 flex-grow items-center pr-2\">\n            <AgreementAvatar\n                fallbackSrc={fallbackImageSrc}\n                src={currentAgreement.imageSrc}\n                title={`${currentAgreement.name} - ${currentAgreement.number} ${currentAgreement.userId}`}\n            />\n            <AgreementBadge agreement={currentAgreement} className=\"absolute right-0 top-0 -mr-1 w-8 !justify-start\" />\n        </span>\n    );\n};\n"],"names":["useMatchMedia","AgreementItem","AgreementAvatar","AgreementBadge"],"mappings":";;;;;;;;AAiBO,MAAM,mBAAmB,CAAC,UAAiC;AAC9D,QAAM,EAAE,UAAU,kBAAkB,iBAAA,IAAqB;AACzD,QAAM,aAAaA,cAAAA,cAAc,uBAAuB,OAAO,aAAa,IAAI;AAEhF,MAAI,YAAY;AACZ,UAAM,YAAY,GAAG,sDAAsD,MAAM,SAAS;AAC1F,+CACKC,oBAAA,EAAe,GAAG,kBAAkB,UAAoB,WAAsB,kBAAoC;AAAA,EAE3H;AAEA,SACI,sBAAA,cAAC,QAAA,EAAK,WAAU,iDAAA,GACZ,sBAAA;AAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACG,aAAa;AAAA,MACb,KAAK,iBAAiB;AAAA,MACtB,OAAO,GAAG,iBAAiB,IAAI,MAAM,iBAAiB,MAAM,IAAI,iBAAiB,MAAM;AAAA,IAAA;AAAA,EAAA,GAE3F,sBAAA,cAACC,sBAAA,EAAe,WAAW,kBAAkB,WAAU,mDAAkD,CAC7G;AAER;;"}
+{"version":3,"file":"Display.cjs","sources":["../../../../../src/components/Header/components/Agreement/Display.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { useMatchMedia } from '@/hooks/useMatchMedia';\n\nimport { AgreementAvatar } from './Avatar';\nimport { AgreementBadge } from './Badge';\nimport { AgreementItem } from './Item';\nimport type { Agreement } from './types';\n\nexport type AgreementDisplayProps = {\n    children?: React.JSX.Element | null;\n    className?: string;\n    currentAgreement: Agreement;\n    fallbackImageSrc: string;\n};\n\nexport const AgreementDisplay = (props: AgreementDisplayProps) => {\n    const { children, currentAgreement, fallbackImageSrc } = props;\n    const isXlScreen = useMatchMedia('(min-width: 1280px)', window.innerWidth > 1280);\n\n    if (isXlScreen) {\n        const className = cn('h-12 flex-grow xl:[button>&]:hover:bg-white/[0.16]', props.className);\n        return (\n            <AgreementItem {...currentAgreement} children={children} className={className} fallbackImageSrc={fallbackImageSrc} />\n        );\n    }\n\n    return (\n        <span className=\"relative flex h-12 flex-grow items-center pr-2\">\n            <AgreementAvatar\n                fallbackSrc={fallbackImageSrc}\n                src={currentAgreement.imageSrc}\n                title={`${currentAgreement.name} - ${currentAgreement.number} ${currentAgreement.userId}`}\n            />\n            <AgreementBadge agreement={currentAgreement} className=\"absolute right-0 top-0 -mr-1 w-8 !justify-start\" />\n        </span>\n    );\n};\n"],"names":["useMatchMedia","AgreementItem","AgreementAvatar","AgreementBadge"],"mappings":";;;;;;;;AAiBO,MAAM,mBAAmB,CAAC,UAAiC;AAC9D,QAAM,EAAE,UAAU,kBAAkB,iBAAA,IAAqB;AACzD,QAAM,aAAaA,cAAAA,cAAc,uBAAuB,OAAO,aAAa,IAAI;AAEhF,MAAI,YAAY;AACZ,UAAM,YAAY,GAAG,sDAAsD,MAAM,SAAS;AAC1F,+CACKC,oBAAA,EAAe,GAAG,kBAAkB,UAAoB,WAAsB,kBAAoC;AAAA,EAE3H;AAEA,SACI,sBAAA,cAAC,QAAA,EAAK,WAAU,iDAAA,GACZ,sBAAA;AAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACG,aAAa;AAAA,MACb,KAAK,iBAAiB;AAAA,MACtB,OAAO,GAAG,iBAAiB,IAAI,MAAM,iBAAiB,MAAM,IAAI,iBAAiB,MAAM;AAAA,IAAA;AAAA,EAAA,GAE3F,sBAAA,cAACC,sBAAA,EAAe,WAAW,kBAAkB,WAAU,mDAAkD,CAC7G;AAER;;"}

package/dist/components/Header/components/Agreement/Display.js.map

@@ -1 +1 @@
-{"version":3,"file":"Display.js","sources":["../../../../../src/components/Header/components/Agreement/Display.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { useMatchMedia } from '../../../../hooks/useMatchMedia';\n\nimport { AgreementAvatar } from './Avatar';\nimport { AgreementBadge } from './Badge';\nimport { AgreementItem } from './Item';\nimport type { Agreement } from './types';\n\nexport type AgreementDisplayProps = {\n    children?: React.JSX.Element | null;\n    className?: string;\n    currentAgreement: Agreement;\n    fallbackImageSrc: string;\n};\n\nexport const AgreementDisplay = (props: AgreementDisplayProps) => {\n    const { children, currentAgreement, fallbackImageSrc } = props;\n    const isXlScreen = useMatchMedia('(min-width: 1280px)', window.innerWidth > 1280);\n\n    if (isXlScreen) {\n        const className = cn('h-12 flex-grow xl:[button>&]:hover:bg-white/[0.16]', props.className);\n        return (\n            <AgreementItem {...currentAgreement} children={children} className={className} fallbackImageSrc={fallbackImageSrc} />\n        );\n    }\n\n    return (\n        <span className=\"relative flex h-12 flex-grow items-center pr-2\">\n            <AgreementAvatar\n                fallbackSrc={fallbackImageSrc}\n                src={currentAgreement.imageSrc}\n                title={`${currentAgreement.name} - ${currentAgreement.number} ${currentAgreement.userId}`}\n            />\n            <AgreementBadge agreement={currentAgreement} className=\"absolute right-0 top-0 -mr-1 w-8 !justify-start\" />\n        </span>\n    );\n};\n"],"names":["React"],"mappings":";;;;;;AAiBO,MAAM,mBAAmB,CAAC,UAAiC;AAC9D,QAAM,EAAE,UAAU,kBAAkB,iBAAA,IAAqB;AACzD,QAAM,aAAa,cAAc,uBAAuB,OAAO,aAAa,IAAI;AAEhF,MAAI,YAAY;AACZ,UAAM,YAAY,GAAG,sDAAsD,MAAM,SAAS;AAC1F,wDACK,eAAA,EAAe,GAAG,kBAAkB,UAAoB,WAAsB,kBAAoC;AAAA,EAE3H;AAEA,SACIA,+BAAA,cAAC,QAAA,EAAK,WAAU,iDAAA,GACZA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,aAAa;AAAA,MACb,KAAK,iBAAiB;AAAA,MACtB,OAAO,GAAG,iBAAiB,IAAI,MAAM,iBAAiB,MAAM,IAAI,iBAAiB,MAAM;AAAA,IAAA;AAAA,EAAA,GAE3FA,+BAAA,cAAC,gBAAA,EAAe,WAAW,kBAAkB,WAAU,mDAAkD,CAC7G;AAER;"}
+{"version":3,"file":"Display.js","sources":["../../../../../src/components/Header/components/Agreement/Display.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { useMatchMedia } from '@/hooks/useMatchMedia';\n\nimport { AgreementAvatar } from './Avatar';\nimport { AgreementBadge } from './Badge';\nimport { AgreementItem } from './Item';\nimport type { Agreement } from './types';\n\nexport type AgreementDisplayProps = {\n    children?: React.JSX.Element | null;\n    className?: string;\n    currentAgreement: Agreement;\n    fallbackImageSrc: string;\n};\n\nexport const AgreementDisplay = (props: AgreementDisplayProps) => {\n    const { children, currentAgreement, fallbackImageSrc } = props;\n    const isXlScreen = useMatchMedia('(min-width: 1280px)', window.innerWidth > 1280);\n\n    if (isXlScreen) {\n        const className = cn('h-12 flex-grow xl:[button>&]:hover:bg-white/[0.16]', props.className);\n        return (\n            <AgreementItem {...currentAgreement} children={children} className={className} fallbackImageSrc={fallbackImageSrc} />\n        );\n    }\n\n    return (\n        <span className=\"relative flex h-12 flex-grow items-center pr-2\">\n            <AgreementAvatar\n                fallbackSrc={fallbackImageSrc}\n                src={currentAgreement.imageSrc}\n                title={`${currentAgreement.name} - ${currentAgreement.number} ${currentAgreement.userId}`}\n            />\n            <AgreementBadge agreement={currentAgreement} className=\"absolute right-0 top-0 -mr-1 w-8 !justify-start\" />\n        </span>\n    );\n};\n"],"names":["React"],"mappings":";;;;;;AAiBO,MAAM,mBAAmB,CAAC,UAAiC;AAC9D,QAAM,EAAE,UAAU,kBAAkB,iBAAA,IAAqB;AACzD,QAAM,aAAa,cAAc,uBAAuB,OAAO,aAAa,IAAI;AAEhF,MAAI,YAAY;AACZ,UAAM,YAAY,GAAG,sDAAsD,MAAM,SAAS;AAC1F,wDACK,eAAA,EAAe,GAAG,kBAAkB,UAAoB,WAAsB,kBAAoC;AAAA,EAE3H;AAEA,SACIA,+BAAA,cAAC,QAAA,EAAK,WAAU,iDAAA,GACZA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,aAAa;AAAA,MACb,KAAK,iBAAiB;AAAA,MACtB,OAAO,GAAG,iBAAiB,IAAI,MAAM,iBAAiB,MAAM,IAAI,iBAAiB,MAAM;AAAA,IAAA;AAAA,EAAA,GAE3FA,+BAAA,cAAC,gBAAA,EAAe,WAAW,kBAAkB,WAAU,mDAAkD,CAC7G;AAER;"}

package/dist/components/Header/components/Agreement/Item.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const cn = require("clsx");
 const React = require("react");
-const Icon = require("../../../Icon/Icon.cjs");
 const Avatar = require("./Avatar.cjs");
 const Badge = require("./Badge.cjs");
+const Icon = require("../../../Icon/Icon.cjs");
 const AgreementItem = (props) => {
   const { children, className: customClassName, fallbackImageSrc, ...agreement } = props;
   const className = cn("flex w-full items-center gap-2 overflow-hidden rounded px-2 text-left", customClassName);

package/dist/components/Header/components/Agreement/Item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Item.cjs","sources":["../../../../../src/components/Header/components/Agreement/Item.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { Icon } from '../../../Icon/Icon';\n\nimport { AgreementAvatar } from './Avatar';\nimport { AgreementBadge } from './Badge';\nimport type { Agreement } from './types';\n\nexport type AgreementItemProps = Agreement & {\n    children?: React.JSX.Element | null;\n    className?: string;\n    fallbackImageSrc: string;\n};\n\nexport const AgreementItem = (props: AgreementItemProps) => {\n    const { children, className: customClassName, fallbackImageSrc, ...agreement } = props;\n    const className = cn('flex w-full items-center gap-2 overflow-hidden rounded px-2 text-left', customClassName);\n\n    return (\n        <span className={className}>\n            <AgreementAvatar\n                fallbackSrc={fallbackImageSrc}\n                src={agreement.imageSrc}\n                title={`${agreement.name} - ${agreement.number} ${agreement.userId}`}\n            />\n            <span className=\"flex flex-col overflow-hidden\">\n                <span className=\"flex truncate text-white\" title={agreement.name}>\n                    <span className=\"truncate\">{agreement.name}</span>{' '}\n                    {agreement.secure ? (\n                        <Icon name=\"secure-tick\" className=\"mb-0.5 ml-1 mt-0.5 !h-4 !w-4 flex-shrink-0 flex-grow-0\" />\n                    ) : null}\n                </span>\n                <span className=\"whitespace-nowrap text-xs text-gray-100\">\n                    {agreement.number} {agreement.userId} <AgreementBadge agreement={agreement} />\n                </span>\n            </span>\n            {children}\n        </span>\n    );\n};\n"],"names":["AgreementAvatar","Icon","AgreementBadge"],"mappings":";;;;;;;AAeO,MAAM,gBAAgB,CAAC,UAA8B;AACxD,QAAM,EAAE,UAAU,WAAW,iBAAiB,kBAAkB,GAAG,cAAc;AACjF,QAAM,YAAY,GAAG,yEAAyE,eAAe;AAE7G,SACI,sBAAA,cAAC,UAAK,UAAA,GACF,sBAAA;AAAA,IAACA,OAAAA;AAAAA,IAAA;AAAA,MACG,aAAa;AAAA,MACb,KAAK,UAAU;AAAA,MACf,OAAO,GAAG,UAAU,IAAI,MAAM,UAAU,MAAM,IAAI,UAAU,MAAM;AAAA,IAAA;AAAA,EAAA,uCAErE,QAAA,EAAK,WAAU,mCACZ,sBAAA,cAAC,QAAA,EAAK,WAAU,4BAA2B,OAAO,UAAU,KAAA,GACxD,sBAAA,cAAC,UAAK,WAAU,cAAY,UAAU,IAAK,GAAQ,KAClD,UAAU,SACP,sBAAA,cAACC,KAAAA,QAAK,MAAK,eAAc,WAAU,yDAAA,CAAyD,IAC5F,IACR,GACA,sBAAA,cAAC,QAAA,EAAK,WAAU,0CAAA,GACX,UAAU,QAAO,KAAE,UAAU,QAAO,KAAC,sBAAA,cAACC,MAAAA,kBAAe,UAAA,CAAsB,CAChF,CACJ,GACC,QACL;AAER;;"}
+{"version":3,"file":"Item.cjs","sources":["../../../../../src/components/Header/components/Agreement/Item.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { Icon } from '@/components';\n\nimport { AgreementAvatar } from './Avatar';\nimport { AgreementBadge } from './Badge';\nimport type { Agreement } from './types';\n\nexport type AgreementItemProps = Agreement & {\n    children?: React.JSX.Element | null;\n    className?: string;\n    fallbackImageSrc: string;\n};\n\nexport const AgreementItem = (props: AgreementItemProps) => {\n    const { children, className: customClassName, fallbackImageSrc, ...agreement } = props;\n    const className = cn('flex w-full items-center gap-2 overflow-hidden rounded px-2 text-left', customClassName);\n\n    return (\n        <span className={className}>\n            <AgreementAvatar\n                fallbackSrc={fallbackImageSrc}\n                src={agreement.imageSrc}\n                title={`${agreement.name} - ${agreement.number} ${agreement.userId}`}\n            />\n            <span className=\"flex flex-col overflow-hidden\">\n                <span className=\"flex truncate text-white\" title={agreement.name}>\n                    <span className=\"truncate\">{agreement.name}</span>{' '}\n                    {agreement.secure ? (\n                        <Icon name=\"secure-tick\" className=\"mb-0.5 ml-1 mt-0.5 !h-4 !w-4 flex-shrink-0 flex-grow-0\" />\n                    ) : null}\n                </span>\n                <span className=\"whitespace-nowrap text-xs text-gray-100\">\n                    {agreement.number} {agreement.userId} <AgreementBadge agreement={agreement} />\n                </span>\n            </span>\n            {children}\n        </span>\n    );\n};\n"],"names":["AgreementAvatar","Icon","AgreementBadge"],"mappings":";;;;;;;AAeO,MAAM,gBAAgB,CAAC,UAA8B;AACxD,QAAM,EAAE,UAAU,WAAW,iBAAiB,kBAAkB,GAAG,cAAc;AACjF,QAAM,YAAY,GAAG,yEAAyE,eAAe;AAE7G,SACI,sBAAA,cAAC,UAAK,UAAA,GACF,sBAAA;AAAA,IAACA,OAAAA;AAAAA,IAAA;AAAA,MACG,aAAa;AAAA,MACb,KAAK,UAAU;AAAA,MACf,OAAO,GAAG,UAAU,IAAI,MAAM,UAAU,MAAM,IAAI,UAAU,MAAM;AAAA,IAAA;AAAA,EAAA,uCAErE,QAAA,EAAK,WAAU,mCACZ,sBAAA,cAAC,QAAA,EAAK,WAAU,4BAA2B,OAAO,UAAU,KAAA,GACxD,sBAAA,cAAC,UAAK,WAAU,cAAY,UAAU,IAAK,GAAQ,KAClD,UAAU,SACP,sBAAA,cAACC,KAAAA,QAAK,MAAK,eAAc,WAAU,yDAAA,CAAyD,IAC5F,IACR,GACA,sBAAA,cAAC,QAAA,EAAK,WAAU,0CAAA,GACX,UAAU,QAAO,KAAE,UAAU,QAAO,KAAC,sBAAA,cAACC,MAAAA,kBAAe,UAAA,CAAsB,CAChF,CACJ,GACC,QACL;AAER;;"}