@economic/taco 8.1.2-hanger-base-ui.3 → 8.1.2

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

@@ -25,7 +25,7 @@ const Title = React.forwardRef(function DrawerTitle(props, externalRef) {
   const [style, setStyle] = React.useState({});
   const { texts } = Localization.useLocalization();
   const { onClickBack } = Context.useCurrentDrawer();
-  const cName = cn("grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-gray-300 flex items-start", className);
+  const cName = cn("grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-gray-200 flex items-start", className);
   React.useEffect(() => {
     var _a;
     const drawer2 = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.closest('[data-taco="drawer"]');
@@ -52,7 +52,7 @@ const Title = React.forwardRef(function DrawerTitle(props, externalRef) {
 });
 const Footer = React.forwardRef(function DrawerFooter(props, ref) {
   const { className: _1, ...otherProps } = props;
-  const cName = cn("mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-gray-300", props.className);
+  const cName = cn("mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-gray-200", props.className);
   return /* @__PURE__ */ React.createElement("div", { ...otherProps, className: cName, ref });
 });
 const Actions = React.forwardRef(function Actions2(props, ref) {
@@ -148,7 +148,7 @@ const Content = React.forwardRef(function Content2(props, externalRef) {
   return /* @__PURE__ */ React.createElement(drawer.Drawer.Portal, { container: outlet ?? void 0, className: "h-full" }, variant === "overlay" ? /* @__PURE__ */ React.createElement(
     drawer.Drawer.Backdrop,
     {
-      className: "fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] print:absolute print:overflow-visible",
+      className: "bg-brand-midnight/[0.3] fixed inset-0 cursor-default overflow-y-auto print:absolute print:overflow-visible",
       "data-taco": "backdrop"
     }
   ) : null, /* @__PURE__ */ React.createElement(drawer.Drawer.Viewport, { className: "h-full" }, /* @__PURE__ */ React.createElement(

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

@@ -1 +1 @@
-{"version":3,"file":"Content.cjs","sources":["../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport cn from 'clsx';\n\nimport { Group, GroupProps } from '../../Group/Group';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDrawer } from '../Context';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\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('grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-gray-300 flex items-start', 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                <IconButton\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 justify-end grow-0 p-4 border-t-[1px] border-gray-300', 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 top-0 right-10 mr-[8px] mt-4', className);\n    // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n    return <Group {...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                    <IconButton\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-blue-900/[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","IconButton","Actions","Group","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 React from 'react';\nimport { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport cn from 'clsx';\n\nimport { Group, GroupProps } from '../../Group/Group';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDrawer } from '../Context';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\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('grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-gray-200 flex items-start', 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                <IconButton\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 justify-end grow-0 p-4 border-t-[1px] border-gray-200', 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 top-0 right-10 mr-[8px] mt-4', className);\n    // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n    return <Group {...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                    <IconButton\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=\"bg-brand-midnight/[0.3] fixed inset-0 cursor-default overflow-y-auto 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","IconButton","Actions","Group","InnerContent","Content","useCurrentMenu","getDrawerContainerClassNames","contentClassName","getDrawerContentClassNames","dragHandlerClassName","getDrawerDragHandlerClassNames","useDraggable"],"mappings":"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"}

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

@@ -23,7 +23,7 @@ const Title = React__default.forwardRef(function DrawerTitle(props, externalRef)
   const [style, setStyle] = React__default.useState({});
   const { texts } = useLocalization();
   const { onClickBack } = useCurrentDrawer();
-  const cName = cn("grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-gray-300 flex items-start", className);
+  const cName = cn("grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-gray-200 flex items-start", className);
   React__default.useEffect(() => {
     var _a;
     const drawer = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.closest('[data-taco="drawer"]');
@@ -50,7 +50,7 @@ const Title = React__default.forwardRef(function DrawerTitle(props, externalRef)
 });
 const Footer = React__default.forwardRef(function DrawerFooter(props, ref) {
   const { className: _1, ...otherProps } = props;
-  const cName = cn("mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-gray-300", props.className);
+  const cName = cn("mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-gray-200", props.className);
   return /* @__PURE__ */ React__default.createElement("div", { ...otherProps, className: cName, ref });
 });
 const Actions = React__default.forwardRef(function Actions2(props, ref) {
@@ -146,7 +146,7 @@ const Content = React__default.forwardRef(function Content2(props, externalRef)
   return /* @__PURE__ */ React__default.createElement(Drawer.Portal, { container: outlet ?? void 0, className: "h-full" }, variant === "overlay" ? /* @__PURE__ */ React__default.createElement(
     Drawer.Backdrop,
     {
-      className: "fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] print:absolute print:overflow-visible",
+      className: "bg-brand-midnight/[0.3] fixed inset-0 cursor-default overflow-y-auto print:absolute print:overflow-visible",
       "data-taco": "backdrop"
     }
   ) : null, /* @__PURE__ */ React__default.createElement(Drawer.Viewport, { className: "h-full" }, /* @__PURE__ */ React__default.createElement(

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

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport cn from 'clsx';\n\nimport { Group, GroupProps } from '../../Group/Group';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDrawer } from '../Context';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\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('grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-gray-300 flex items-start', 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                <IconButton\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 justify-end grow-0 p-4 border-t-[1px] border-gray-300', 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 top-0 right-10 mr-[8px] mt-4', className);\n    // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n    return <Group {...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                    <IconButton\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-blue-900/[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 React from 'react';\nimport { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport cn from 'clsx';\n\nimport { Group, GroupProps } from '../../Group/Group';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDrawer } from '../Context';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\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('grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-gray-200 flex items-start', 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                <IconButton\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 justify-end grow-0 p-4 border-t-[1px] border-gray-200', 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 top-0 right-10 mr-[8px] mt-4', className);\n    // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n    return <Group {...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                    <IconButton\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=\"bg-brand-midnight/[0.3] fixed inset-0 cursor-default overflow-y-auto 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/Drawer/util.cjs

@@ -22,7 +22,7 @@ const getDrawerContentClassNames = (size, variant) => {
 const getDrawerContainerClassNames = (variant) => {
   return cn("bg-white mx-auto absolute h-full w-full flex flex-col ", {
     "shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]": variant === "overlay",
-    "border-l border-gray-300 h-full": variant === "embedded"
+    "border-l border-gray-200 h-full": variant === "embedded"
   });
 };
 const getDrawerDragHandlerClassNames = () => {

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

@@ -1 +1 @@
-{"version":3,"file":"util.cjs","sources":["../../../src/components/Drawer/util.ts"],"sourcesContent":["import { DrawerSize, DrawerVariant } from './types';\nimport cn from 'clsx';\n\nexport const getDrawerSizeClassnames = (size: DrawerSize): string => {\n    switch (size) {\n        case 'lg':\n            return 'w-[600px]';\n        default:\n            return 'w-[420px]';\n    }\n};\n\nexport const getDrawerPrimitiveContentClassNames = (): string => {\n    return 'fixed bottom-0 top-0 right-0';\n};\n\nexport const getDrawerContentClassNames = (size: DrawerSize, variant: DrawerVariant): string => {\n    return cn(\n        'bg-white h-full bottom-0 top-0 right-0 transition-none',\n        {\n            fixed: variant === 'overlay',\n            'relative h-full overflow-hidden': variant === 'embedded',\n        },\n        getDrawerSizeClassnames(size)\n    );\n};\n\nexport const getDrawerContainerClassNames = (variant: DrawerVariant): string => {\n    return cn('bg-white mx-auto absolute h-full w-full flex flex-col ', {\n        'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]': variant === 'overlay',\n        'border-l border-gray-300 h-full': variant === 'embedded',\n    });\n};\n\nexport const getDrawerDragHandlerClassNames = (): string => {\n    return cn('border-[2px] absolute border-transparent top-0 w-2 h-full cursor-ew-resize left-0 hover:border-l-blue-500');\n};\n"],"names":[],"mappings":";;;AAGa,MAAA,0BAA0B,CAAC,SAA6B;AACjE,UAAQ,MAAM;AAAA,IACV,KAAK;AACM,aAAA;AAAA,IACX;AACW,aAAA;AAAA,EAAA;AAEnB;AAMa,MAAA,6BAA6B,CAAC,MAAkB,YAAmC;AACrF,SAAA;AAAA,IACH;AAAA,IACA;AAAA,MACI,OAAO,YAAY;AAAA,MACnB,mCAAmC,YAAY;AAAA,IACnD;AAAA,IACA,wBAAwB,IAAI;AAAA,EAChC;AACJ;AAEa,MAAA,+BAA+B,CAAC,YAAmC;AAC5E,SAAO,GAAG,0DAA0D;AAAA,IAChE,wEAAwE,YAAY;AAAA,IACpF,mCAAmC,YAAY;AAAA,EAAA,CAClD;AACL;AAEO,MAAM,iCAAiC,MAAc;AACxD,SAAO,GAAG,2GAA2G;AACzH;;;;;"}
+{"version":3,"file":"util.cjs","sources":["../../../src/components/Drawer/util.ts"],"sourcesContent":["import { DrawerSize, DrawerVariant } from './types';\nimport cn from 'clsx';\n\nexport const getDrawerSizeClassnames = (size: DrawerSize): string => {\n    switch (size) {\n        case 'lg':\n            return 'w-[600px]';\n        default:\n            return 'w-[420px]';\n    }\n};\n\nexport const getDrawerPrimitiveContentClassNames = (): string => {\n    return 'fixed bottom-0 top-0 right-0';\n};\n\nexport const getDrawerContentClassNames = (size: DrawerSize, variant: DrawerVariant): string => {\n    return cn(\n        'bg-white h-full bottom-0 top-0 right-0 transition-none',\n        {\n            fixed: variant === 'overlay',\n            'relative h-full overflow-hidden': variant === 'embedded',\n        },\n        getDrawerSizeClassnames(size)\n    );\n};\n\nexport const getDrawerContainerClassNames = (variant: DrawerVariant): string => {\n    return cn('bg-white mx-auto absolute h-full w-full flex flex-col ', {\n        'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]': variant === 'overlay',\n        'border-l border-gray-200 h-full': variant === 'embedded',\n    });\n};\n\nexport const getDrawerDragHandlerClassNames = (): string => {\n    return cn('border-[2px] absolute border-transparent top-0 w-2 h-full cursor-ew-resize left-0 hover:border-l-blue-500');\n};\n"],"names":[],"mappings":";;;AAGa,MAAA,0BAA0B,CAAC,SAA6B;AACjE,UAAQ,MAAM;AAAA,IACV,KAAK;AACM,aAAA;AAAA,IACX;AACW,aAAA;AAAA,EAAA;AAEnB;AAMa,MAAA,6BAA6B,CAAC,MAAkB,YAAmC;AACrF,SAAA;AAAA,IACH;AAAA,IACA;AAAA,MACI,OAAO,YAAY;AAAA,MACnB,mCAAmC,YAAY;AAAA,IACnD;AAAA,IACA,wBAAwB,IAAI;AAAA,EAChC;AACJ;AAEa,MAAA,+BAA+B,CAAC,YAAmC;AAC5E,SAAO,GAAG,0DAA0D;AAAA,IAChE,wEAAwE,YAAY;AAAA,IACpF,mCAAmC,YAAY;AAAA,EAAA,CAClD;AACL;AAEO,MAAM,iCAAiC,MAAc;AACxD,SAAO,GAAG,2GAA2G;AACzH;;;;;"}

package/dist/components/Drawer/util.js

@@ -20,7 +20,7 @@ const getDrawerContentClassNames = (size, variant) => {
 const getDrawerContainerClassNames = (variant) => {
   return cn("bg-white mx-auto absolute h-full w-full flex flex-col ", {
     "shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]": variant === "overlay",
-    "border-l border-gray-300 h-full": variant === "embedded"
+    "border-l border-gray-200 h-full": variant === "embedded"
   });
 };
 const getDrawerDragHandlerClassNames = () => {

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

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../src/components/Drawer/util.ts"],"sourcesContent":["import { DrawerSize, DrawerVariant } from './types';\nimport cn from 'clsx';\n\nexport const getDrawerSizeClassnames = (size: DrawerSize): string => {\n    switch (size) {\n        case 'lg':\n            return 'w-[600px]';\n        default:\n            return 'w-[420px]';\n    }\n};\n\nexport const getDrawerPrimitiveContentClassNames = (): string => {\n    return 'fixed bottom-0 top-0 right-0';\n};\n\nexport const getDrawerContentClassNames = (size: DrawerSize, variant: DrawerVariant): string => {\n    return cn(\n        'bg-white h-full bottom-0 top-0 right-0 transition-none',\n        {\n            fixed: variant === 'overlay',\n            'relative h-full overflow-hidden': variant === 'embedded',\n        },\n        getDrawerSizeClassnames(size)\n    );\n};\n\nexport const getDrawerContainerClassNames = (variant: DrawerVariant): string => {\n    return cn('bg-white mx-auto absolute h-full w-full flex flex-col ', {\n        'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]': variant === 'overlay',\n        'border-l border-gray-300 h-full': variant === 'embedded',\n    });\n};\n\nexport const getDrawerDragHandlerClassNames = (): string => {\n    return cn('border-[2px] absolute border-transparent top-0 w-2 h-full cursor-ew-resize left-0 hover:border-l-blue-500');\n};\n"],"names":[],"mappings":";AAGa,MAAA,0BAA0B,CAAC,SAA6B;AACjE,UAAQ,MAAM;AAAA,IACV,KAAK;AACM,aAAA;AAAA,IACX;AACW,aAAA;AAAA,EAAA;AAEnB;AAMa,MAAA,6BAA6B,CAAC,MAAkB,YAAmC;AACrF,SAAA;AAAA,IACH;AAAA,IACA;AAAA,MACI,OAAO,YAAY;AAAA,MACnB,mCAAmC,YAAY;AAAA,IACnD;AAAA,IACA,wBAAwB,IAAI;AAAA,EAChC;AACJ;AAEa,MAAA,+BAA+B,CAAC,YAAmC;AAC5E,SAAO,GAAG,0DAA0D;AAAA,IAChE,wEAAwE,YAAY;AAAA,IACpF,mCAAmC,YAAY;AAAA,EAAA,CAClD;AACL;AAEO,MAAM,iCAAiC,MAAc;AACxD,SAAO,GAAG,2GAA2G;AACzH;"}
+{"version":3,"file":"util.js","sources":["../../../src/components/Drawer/util.ts"],"sourcesContent":["import { DrawerSize, DrawerVariant } from './types';\nimport cn from 'clsx';\n\nexport const getDrawerSizeClassnames = (size: DrawerSize): string => {\n    switch (size) {\n        case 'lg':\n            return 'w-[600px]';\n        default:\n            return 'w-[420px]';\n    }\n};\n\nexport const getDrawerPrimitiveContentClassNames = (): string => {\n    return 'fixed bottom-0 top-0 right-0';\n};\n\nexport const getDrawerContentClassNames = (size: DrawerSize, variant: DrawerVariant): string => {\n    return cn(\n        'bg-white h-full bottom-0 top-0 right-0 transition-none',\n        {\n            fixed: variant === 'overlay',\n            'relative h-full overflow-hidden': variant === 'embedded',\n        },\n        getDrawerSizeClassnames(size)\n    );\n};\n\nexport const getDrawerContainerClassNames = (variant: DrawerVariant): string => {\n    return cn('bg-white mx-auto absolute h-full w-full flex flex-col ', {\n        'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]': variant === 'overlay',\n        'border-l border-gray-200 h-full': variant === 'embedded',\n    });\n};\n\nexport const getDrawerDragHandlerClassNames = (): string => {\n    return cn('border-[2px] absolute border-transparent top-0 w-2 h-full cursor-ew-resize left-0 hover:border-l-blue-500');\n};\n"],"names":[],"mappings":";AAGa,MAAA,0BAA0B,CAAC,SAA6B;AACjE,UAAQ,MAAM;AAAA,IACV,KAAK;AACM,aAAA;AAAA,IACX;AACW,aAAA;AAAA,EAAA;AAEnB;AAMa,MAAA,6BAA6B,CAAC,MAAkB,YAAmC;AACrF,SAAA;AAAA,IACH;AAAA,IACA;AAAA,MACI,OAAO,YAAY;AAAA,MACnB,mCAAmC,YAAY;AAAA,IACnD;AAAA,IACA,wBAAwB,IAAI;AAAA,EAChC;AACJ;AAEa,MAAA,+BAA+B,CAAC,YAAmC;AAC5E,SAAO,GAAG,0DAA0D;AAAA,IAChE,wEAAwE,YAAY;AAAA,IACpF,mCAAmC,YAAY;AAAA,EAAA,CAClD;AACL;AAEO,MAAM,iCAAiC,MAAc;AACxD,SAAO,GAAG,2GAA2G;AACzH;"}

package/dist/components/Field/Field.cjs

@@ -34,7 +34,7 @@ const Field = React__namespace.forwardRef(function Field2(props, ref) {
   const messageClassName = cn("h-4 text-xs text-left leading-normal font-normal truncate -mb-4", {
     "text-gray-700": !invalid && !warning,
     "text-red-500": invalid,
-    "text-yellow-700": warning && !invalid,
+    "text-yellow-500": warning && !invalid,
     "opacity-50": disabled
   });
   return /* @__PURE__ */ React__namespace.createElement("label", { ...otherProps, className, "data-taco": "label", ref }, children, message && /* @__PURE__ */ React__namespace.createElement(Truncate.Truncate, { tooltip: message }, /* @__PURE__ */ React__namespace.createElement(

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

@@ -1 +1 @@
-{"version":3,"file":"Field.cjs","sources":["../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport './Field.css';\nimport { Truncate } from '../Truncate/Truncate';\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 flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-gray-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {\n        'text-gray-700': !invalid && !warning,\n        'text-red-500': invalid,\n        'text-yellow-700': warning && !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":";;;;;;;;;;;;;;;;;;;;;;;AAqBO,MAAM,QAAQA,iBAAM,WAAW,SAASC,OAAM,OAAmB,KAAkC;AAChG,QAAA,aAAaD,iBAAM,OAAwB,IAAI;AAE/C,QAAA,EAAE,UAAU,UAAU,UAAU,OAAO,UAAU,OAAO,SAAS,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,iBAAiB;AAAA,IACrB;AAAA,IACA,MAAM;AAAA,EACV;AACM,QAAA,mBAAmB,GAAG,mEAAmE;AAAA,IAC3F,iBAAiB,CAAC,WAAW,CAAC;AAAA,IAC9B,gBAAgB;AAAA,IAChB,mBAAmB,WAAW,CAAC;AAAA,IAC/B,cAAc;AAAA,EAAA,CACjB;AAED,SACKA,iCAAA,cAAA,SAAA,EAAO,GAAG,YAAY,WAAsB,aAAU,SAAQ,IAAA,GAC1D,UACA,WACIA,iCAAA,cAAAE,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 * as React from 'react';\nimport cn from 'clsx';\nimport './Field.css';\nimport { Truncate } from '../Truncate/Truncate';\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 flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-gray-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {\n        'text-gray-700': !invalid && !warning,\n        'text-red-500': invalid,\n        'text-yellow-500': warning && !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":";;;;;;;;;;;;;;;;;;;;;;;AAqBO,MAAM,QAAQA,iBAAM,WAAW,SAASC,OAAM,OAAmB,KAAkC;AAChG,QAAA,aAAaD,iBAAM,OAAwB,IAAI;AAE/C,QAAA,EAAE,UAAU,UAAU,UAAU,OAAO,UAAU,OAAO,SAAS,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,iBAAiB;AAAA,IACrB;AAAA,IACA,MAAM;AAAA,EACV;AACM,QAAA,mBAAmB,GAAG,mEAAmE;AAAA,IAC3F,iBAAiB,CAAC,WAAW,CAAC;AAAA,IAC9B,gBAAgB;AAAA,IAChB,mBAAmB,WAAW,CAAC;AAAA,IAC/B,cAAc;AAAA,EAAA,CACjB;AAED,SACKA,iCAAA,cAAA,SAAA,EAAO,GAAG,YAAY,WAAsB,aAAU,SAAQ,IAAA,GAC1D,UACA,WACIA,iCAAA,cAAAE,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

@@ -15,7 +15,7 @@ const Field = React.forwardRef(function Field2(props, ref) {
   const messageClassName = cn("h-4 text-xs text-left leading-normal font-normal truncate -mb-4", {
     "text-gray-700": !invalid && !warning,
     "text-red-500": invalid,
-    "text-yellow-700": warning && !invalid,
+    "text-yellow-500": warning && !invalid,
     "opacity-50": disabled
   });
   return /* @__PURE__ */ React.createElement("label", { ...otherProps, className, "data-taco": "label", ref }, children, message && /* @__PURE__ */ React.createElement(Truncate, { tooltip: message }, /* @__PURE__ */ React.createElement(

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

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport './Field.css';\nimport { Truncate } from '../Truncate/Truncate';\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 flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-gray-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {\n        'text-gray-700': !invalid && !warning,\n        'text-red-500': invalid,\n        'text-yellow-700': warning && !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":";;;;AAqBO,MAAM,QAAQ,MAAM,WAAW,SAASA,OAAM,OAAmB,KAAkC;AAChG,QAAA,aAAa,MAAM,OAAwB,IAAI;AAE/C,QAAA,EAAE,UAAU,UAAU,UAAU,OAAO,UAAU,OAAO,SAAS,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,iBAAiB;AAAA,IACrB;AAAA,IACA,MAAM;AAAA,EACV;AACM,QAAA,mBAAmB,GAAG,mEAAmE;AAAA,IAC3F,iBAAiB,CAAC,WAAW,CAAC;AAAA,IAC9B,gBAAgB;AAAA,IAChB,mBAAmB,WAAW,CAAC;AAAA,IAC/B,cAAc;AAAA,EAAA,CACjB;AAED,SACK,sBAAA,cAAA,SAAA,EAAO,GAAG,YAAY,WAAsB,aAAU,SAAQ,IAAA,GAC1D,UACA,WACI,sBAAA,cAAA,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 * as React from 'react';\nimport cn from 'clsx';\nimport './Field.css';\nimport { Truncate } from '../Truncate/Truncate';\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 flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-gray-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {\n        'text-gray-700': !invalid && !warning,\n        'text-red-500': invalid,\n        'text-yellow-500': warning && !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":";;;;AAqBO,MAAM,QAAQ,MAAM,WAAW,SAASA,OAAM,OAAmB,KAAkC;AAChG,QAAA,aAAa,MAAM,OAAwB,IAAI;AAE/C,QAAA,EAAE,UAAU,UAAU,UAAU,OAAO,UAAU,OAAO,SAAS,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,iBAAiB;AAAA,IACrB;AAAA,IACA,MAAM;AAAA,EACV;AACM,QAAA,mBAAmB,GAAG,mEAAmE;AAAA,IAC3F,iBAAiB,CAAC,WAAW,CAAC;AAAA,IAC9B,gBAAgB;AAAA,IAChB,mBAAmB,WAAW,CAAC;AAAA,IAC/B,cAAc;AAAA,EAAA,CACjB;AAED,SACK,sBAAA,cAAA,SAAA,EAAO,GAAG,YAAY,WAAsB,aAAU,SAAQ,IAAA,GAC1D,UACA,WACI,sBAAA,cAAA,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/Hanger/Arrow.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const popover = require("@base-ui/react/popover");
+const PopoverPrimitive = require("@radix-ui/react-popover");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -19,11 +19,12 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const PopoverPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(PopoverPrimitive);
 const UnstyledArrow = React__namespace.forwardRef(function PopoverArrow(props, ref) {
-  return /* @__PURE__ */ React__namespace.createElement(popover.Popover.Arrow, { className: "pointer-events-none h-[11px] w-[30px] data-[side=bottom]:top-[-10px] data-[side=left]:right-[-20px] data-[side=right]:left-[-20px] data-[side=top]:bottom-[-10px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180" }, /* @__PURE__ */ React__namespace.createElement("svg", { ...props, ref, viewBox: "0 19 30 11" }, /* @__PURE__ */ React__namespace.createElement(
+  return /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Arrow, { className: "pointer-events-none -mt-px", asChild: true, offset: 2, width: 30, height: 11 }, /* @__PURE__ */ React__namespace.createElement("svg", { ...props, ref, viewBox: "0 19 30 11", style: { transform: "rotateZ(180deg)" } }, /* @__PURE__ */ React__namespace.createElement(
     "path",
     {
-      className: "fill-current text-gray-300",
+      className: "fill-current text-blue-500",
       d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
     }
   ), /* @__PURE__ */ React__namespace.createElement(

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

@@ -1 +1 @@
-{"version":3,"file":"Arrow.cjs","sources":["../../../src/components/Hanger/Arrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nexport const UnstyledArrow = React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGElement>>(function PopoverArrow(props, ref) {\n    return (\n        <PopoverPrimitive.Arrow className=\"pointer-events-none h-[11px] w-[30px] data-[side=bottom]:top-[-10px] data-[side=left]:right-[-20px] data-[side=right]:left-[-20px] data-[side=top]:bottom-[-10px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n            <svg {...props} ref={ref} viewBox=\"0 19 30 11\">\n                <path\n                    className=\"fill-current text-gray-300\"\n                    d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z\"></path>\n                <path\n                    className=\"fill-current\"\n                    d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"></path>\n            </svg>\n        </PopoverPrimitive.Arrow>\n    );\n});\n"],"names":["React","PopoverPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,gBAAgBA,iBAAM,WAA2D,SAAS,aAAa,OAAO,KAAK;AAC5H,SACKA,iCAAA,cAAAC,QAAA,QAAiB,OAAjB,EAAuB,WAAU,uPAAA,GAC7BD,iCAAA,cAAA,OAAA,EAAK,GAAG,OAAO,KAAU,SAAQ,aAC9B,GAAAA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EACN,GAAAA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,CACV,CACJ;AAER,CAAC;;"}
+{"version":3,"file":"Arrow.cjs","sources":["../../../src/components/Hanger/Arrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\n\nexport const UnstyledArrow = React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGElement>>(function PopoverArrow(props, ref) {\n    return (\n        <PopoverPrimitive.Arrow className=\"pointer-events-none -mt-px\" asChild offset={2} width={30} height={11}>\n            <svg {...props} ref={ref} viewBox=\"0 19 30 11\" style={{ transform: 'rotateZ(180deg)' }}>\n                <path\n                    className=\"fill-current text-blue-500\"\n                    d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z\"></path>\n                <path\n                    className=\"fill-current\"\n                    d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"></path>\n            </svg>\n        </PopoverPrimitive.Arrow>\n    );\n});\n"],"names":["React","PopoverPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,gBAAgBA,iBAAM,WAA2D,SAAS,aAAa,OAAO,KAAK;AAExH,SAAAA,iCAAA,cAACC,4BAAiB,OAAjB,EAAuB,WAAU,8BAA6B,SAAO,MAAC,QAAQ,GAAG,OAAO,IAAI,QAAQ,MACjGD,iCAAA,cAAC,OAAK,EAAA,GAAG,OAAO,KAAU,SAAQ,cAAa,OAAO,EAAE,WAAW,kBAAA,EAC/D,GAAAA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EACN,GAAAA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,CACV,CACJ;AAER,CAAC;;"}

package/dist/components/Hanger/Arrow.js

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { Popover } from "@base-ui/react/popover";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 const UnstyledArrow = React.forwardRef(function PopoverArrow(props, ref) {
-  return /* @__PURE__ */ React.createElement(Popover.Arrow, { className: "pointer-events-none h-[11px] w-[30px] data-[side=bottom]:top-[-10px] data-[side=left]:right-[-20px] data-[side=right]:left-[-20px] data-[side=top]:bottom-[-10px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180" }, /* @__PURE__ */ React.createElement("svg", { ...props, ref, viewBox: "0 19 30 11" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(PopoverPrimitive.Arrow, { className: "pointer-events-none -mt-px", asChild: true, offset: 2, width: 30, height: 11 }, /* @__PURE__ */ React.createElement("svg", { ...props, ref, viewBox: "0 19 30 11", style: { transform: "rotateZ(180deg)" } }, /* @__PURE__ */ React.createElement(
     "path",
     {
-      className: "fill-current text-gray-300",
+      className: "fill-current text-blue-500",
       d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
     }
   ), /* @__PURE__ */ React.createElement(

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

@@ -1 +1 @@
-{"version":3,"file":"Arrow.js","sources":["../../../src/components/Hanger/Arrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nexport const UnstyledArrow = React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGElement>>(function PopoverArrow(props, ref) {\n    return (\n        <PopoverPrimitive.Arrow className=\"pointer-events-none h-[11px] w-[30px] data-[side=bottom]:top-[-10px] data-[side=left]:right-[-20px] data-[side=right]:left-[-20px] data-[side=top]:bottom-[-10px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n            <svg {...props} ref={ref} viewBox=\"0 19 30 11\">\n                <path\n                    className=\"fill-current text-gray-300\"\n                    d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z\"></path>\n                <path\n                    className=\"fill-current\"\n                    d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"></path>\n            </svg>\n        </PopoverPrimitive.Arrow>\n    );\n});\n"],"names":["PopoverPrimitive"],"mappings":";;AAGO,MAAM,gBAAgB,MAAM,WAA2D,SAAS,aAAa,OAAO,KAAK;AAC5H,SACK,sBAAA,cAAAA,QAAiB,OAAjB,EAAuB,WAAU,uPAAA,GAC7B,sBAAA,cAAA,OAAA,EAAK,GAAG,OAAO,KAAU,SAAQ,aAC9B,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EACN,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,CACV,CACJ;AAER,CAAC;"}
+{"version":3,"file":"Arrow.js","sources":["../../../src/components/Hanger/Arrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\n\nexport const UnstyledArrow = React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGElement>>(function PopoverArrow(props, ref) {\n    return (\n        <PopoverPrimitive.Arrow className=\"pointer-events-none -mt-px\" asChild offset={2} width={30} height={11}>\n            <svg {...props} ref={ref} viewBox=\"0 19 30 11\" style={{ transform: 'rotateZ(180deg)' }}>\n                <path\n                    className=\"fill-current text-blue-500\"\n                    d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z\"></path>\n                <path\n                    className=\"fill-current\"\n                    d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"></path>\n            </svg>\n        </PopoverPrimitive.Arrow>\n    );\n});\n"],"names":[],"mappings":";;AAGO,MAAM,gBAAgB,MAAM,WAA2D,SAAS,aAAa,OAAO,KAAK;AAExH,SAAA,sBAAA,cAAC,iBAAiB,OAAjB,EAAuB,WAAU,8BAA6B,SAAO,MAAC,QAAQ,GAAG,OAAO,IAAI,QAAQ,MACjG,sBAAA,cAAC,OAAK,EAAA,GAAG,OAAO,KAAU,SAAQ,cAAa,OAAO,EAAE,WAAW,kBAAA,EAC/D,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EACN,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,CACV,CACJ;AAER,CAAC;"}

package/dist/components/Hanger/Hanger.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const cn = require("clsx");
-const popover = require("@base-ui/react/popover");
+const PopoverPrimitive = require("@radix-ui/react-popover");
 const IconButton = require("../IconButton/IconButton.cjs");
 const Arrow = require("./Arrow.cjs");
 const Localization = require("../Provider/Localization.cjs");
@@ -25,72 +25,75 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const PopoverPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(PopoverPrimitive);
 const HangerContext = React__namespace.createContext({
-  anchorRef: { current: null },
   onClose: void 0,
   props: {},
   ref: null
 });
 const Anchor = React__namespace.forwardRef(function HangerAnchor(props, externalRef) {
-  const { anchorRef, ref: parentRef } = React__namespace.useContext(HangerContext);
-  const refCallback = mergeRefs.mergeRefs([anchorRef, parentRef, externalRef]);
-  return /* @__PURE__ */ React__namespace.createElement("span", { ...props, ref: refCallback });
+  var _a;
+  const { ref: parentRef, props: parentProps } = React__namespace.useContext(HangerContext);
+  const refCallback = mergeRefs.mergeRefs([parentRef, externalRef]);
+  let children = props.children;
+  if (React__namespace.isValidElement(props.children) && typeof ((_a = props.children) == null ? void 0 : _a.type) === "function") {
+    console.warn(
+      `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`
+    );
+    children = /* @__PURE__ */ React__namespace.createElement("span", null, props.children);
+  }
+  return /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Anchor, { ...parentProps, ...props, ref: refCallback, asChild: true }, children);
 });
 const Title = React__namespace.forwardRef(function DialogTitle(props, ref) {
   const className = cn("mb-1 text-base font-bold flex w-full", props.className);
   return /* @__PURE__ */ React__namespace.createElement("span", { ...props, className, ref });
 });
 const Content = React__namespace.forwardRef(function HangerContent(props, ref) {
-  const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;
+  const { placement: side, hideWhenDetached = false, container } = props;
   const context = React__namespace.useContext(HangerContext);
   const { texts } = Localization.useLocalization();
   const className = cn(
     "wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden",
     props.className
   );
-  return /* @__PURE__ */ React__namespace.createElement(popover.Popover.Portal, { container }, /* @__PURE__ */ React__namespace.createElement(
-    popover.Popover.Positioner,
+  const handleInteractOutside = (event) => {
+    event.preventDefault();
+  };
+  return /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Portal, { container }, /* @__PURE__ */ React__namespace.createElement(
+    PopoverPrimitive__namespace.Content,
     {
-      anchor: context.anchorRef,
-      className: hideWhenDetached ? "data-[anchor-hidden]:hidden" : void 0,
+      className,
+      "data-taco": "hanger",
+      onInteractOutside: handleInteractOutside,
       side,
-      sideOffset: 11
+      sideOffset: 1,
+      ref,
+      hideWhenDetached
     },
-    /* @__PURE__ */ React__namespace.createElement(popover.Popover.Popup, { ...popoverContentProps, className, "data-taco": "hanger", ref }, props.children, /* @__PURE__ */ React__namespace.createElement(Arrow.UnstyledArrow, { className: "text-blue-500" }), /* @__PURE__ */ React__namespace.createElement(
-      popover.Popover.Close,
+    props.children,
+    /* @__PURE__ */ React__namespace.createElement(Arrow.UnstyledArrow, { className: "text-blue-500" }),
+    /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Close, { asChild: true }, /* @__PURE__ */ React__namespace.createElement(
+      IconButton.IconButton,
       {
-        render: /* @__PURE__ */ React__namespace.createElement(
-          IconButton.IconButton,
-          {
-            appearance: "primary",
-            "aria-label": texts.hanger.close,
-            className: "absolute right-0 top-0 ml-2 mr-2 mt-2 text-white",
-            icon: "close",
-            onClick: context.onClose
-          }
-        )
+        appearance: "primary",
+        "aria-label": texts.hanger.close,
+        className: "absolute right-0 top-0 ml-2 mr-2 mt-2 text-white",
+        icon: "close",
+        onClick: context.onClose
       }
     ))
   ));
 });
 const Hanger = React__namespace.forwardRef(function Hanger2(props, ref) {
   const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;
-  const anchorRef = React__namespace.useRef(null);
-  const context = React__namespace.useMemo(() => ({ anchorRef, onClose, props: otherProps, ref }), [onClose, otherProps, ref]);
+  const context = React__namespace.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);
   const [open, setOpen] = React__namespace.useState(false);
   React__namespace.useEffect(() => {
     if (defaultOpen) {
       setOpen(defaultOpen);
     }
   }, []);
-  const handleOpenChange = (nextOpen, eventDetails) => {
-    if (!nextOpen && (eventDetails.reason === "outside-press" || eventDetails.reason === "focus-out")) {
-      eventDetails.cancel();
-      return;
-    }
-    setOpen(nextOpen);
-  };
-  return /* @__PURE__ */ React__namespace.createElement(HangerContext.Provider, { value: context }, /* @__PURE__ */ React__namespace.createElement("span", { ...otherProps }, /* @__PURE__ */ React__namespace.createElement(popover.Popover.Root, { open, onOpenChange: handleOpenChange }, anchor && /* @__PURE__ */ React__namespace.createElement(Anchor, null, anchor), children)));
+  return /* @__PURE__ */ React__namespace.createElement(HangerContext.Provider, { value: context }, /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Root, { key: String(open), defaultOpen: open }, anchor && /* @__PURE__ */ React__namespace.createElement(Anchor, null, anchor), children));
 });
 Hanger.Anchor = Anchor;
 Hanger.Content = Content;

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

@@ -1 +1 @@
-{"version":3,"file":"Hanger.cjs","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from './Arrow';\nimport { useLocalization } from '../Provider/Localization';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    props: Record<string, unknown>;\n    ref: React.Ref<HTMLElement>;\n    anchorRef: React.RefObject<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    anchorRef: { current: null },\n    onClose: undefined,\n    props: {},\n    ref: null,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLElement>;\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, externalRef: React.Ref<HTMLSpanElement>) {\n    const { anchorRef, ref: parentRef } = React.useContext(HangerContext);\n    const refCallback = mergeRefs([anchorRef, parentRef, externalRef]);\n\n    // Inline <span> wrapper that always exists in the DOM so `anchorRef` points at a measurable\n    // node regardless of the child. Wrapper-level props (e.g. OverflowGroup's `className` /\n    // `order`) are applied at the Hanger root instead — see the comment there.\n    return <span {...props} ref={refCallback} />;\n});\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 text-base font-bold flex w-full', 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        'wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm 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                            <IconButton\n                                appearance=\"primary\"\n                                aria-label={texts.hanger.close}\n                                className=\"absolute right-0 top-0 ml-2 mr-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?: 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.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const anchorRef = React.useRef<HTMLElement>(null);\n    const context = React.useMemo(() => ({ anchorRef, onClose, props: otherProps, ref }), [onClose, otherProps, ref]);\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    // Base UI's Popover.Root injects FloatingFocusManager guard spans as siblings of the anchor\n    // when the popover is open. If Hanger is a direct child of a flex container that observes its\n    // children (e.g. OverflowGroup's IntersectionObserver), those phantom siblings get counted as\n    // overflowed children and push real items into the \"More\" menu. Wrapping the whole Popover.Root\n    // in a single inline span keeps those guards inside the wrapper, so OverflowGroup only sees\n    // one DOM child per Hanger, and wrapper-level layout props (className/style/order) land here.\n    return (\n        <HangerContext.Provider value={context}>\n            <span {...otherProps}>\n                <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n                    {anchor && <Anchor>{anchor}</Anchor>}\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","mergeRefs","useLocalization","PopoverPrimitive","UnstyledArrow","IconButton","Hanger"],"mappings":"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"}
+{"version":3,"file":"Hanger.cjs","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\n\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from './Arrow';\nimport { useLocalization } from '../Provider/Localization';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    props: Record<string, any>;\n    ref: React.Ref<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    onClose: undefined,\n    props: {},\n    ref: null,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { ref: parentRef, props: parentProps } = React.useContext(HangerContext);\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    let children = props.children;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        // oxlint-disable-next-line no-console\n        console.warn(\n            `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n        );\n        children = <span>{props.children}</span>;\n    }\n\n    return (\n        <PopoverPrimitive.Anchor {...parentProps} {...props} ref={refCallback} asChild>\n            {children}\n        </PopoverPrimitive.Anchor>\n    );\n});\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 text-base font-bold flex w-full', 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 } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden',\n        props.className\n    );\n    const handleInteractOutside = (event: CustomEvent): void => {\n        event.preventDefault();\n    };\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Content\n                className={className}\n                data-taco=\"hanger\"\n                onInteractOutside={handleInteractOutside}\n                side={side}\n                sideOffset={1}\n                ref={ref}\n                hideWhenDetached={hideWhenDetached}>\n                {props.children}\n                <UnstyledArrow className=\"text-blue-500\" />\n                <PopoverPrimitive.Close asChild>\n                    <IconButton\n                        appearance=\"primary\"\n                        aria-label={texts.hanger.close}\n                        className=\"absolute right-0 top-0 ml-2 mr-2 mt-2 text-white\"\n                        icon=\"close\"\n                        onClick={context.onClose}\n                    />\n                </PopoverPrimitive.Close>\n            </PopoverPrimitive.Content>\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?: 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.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const context = React.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);\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    return (\n        <HangerContext.Provider value={context}>\n            <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\n                {anchor && <Anchor>{anchor}</Anchor>}\n                {children}\n            </PopoverPrimitive.Root>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["React","mergeRefs","PopoverPrimitive","useLocalization","UnstyledArrow","IconButton","Hanger"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ export type HangerTexts = {
     /** Aria-label for the close icon button of hanger */
     close: string;
 };
-export type HangerAnchorProps = React.HTMLAttributes<HTMLElement>;
+export type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;
 export type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
 export declare const Title: React.ForwardRefExoticComponent<HangerTitleProps & React.RefAttributes<HTMLHeadingElement>>;
 export type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {