npm - @economic/taco - Versions diffs - 10.0.1-improve-publish-scripts.0 → 10.0.1-react-19.0 - Mend

@economic/taco 10.0.1-improve-publish-scripts.0 → 10.0.1-react-19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1711) hide show

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

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

package/dist/components/Drawer/components/Trigger.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Trigger.cjs","sources":["../../../../src/components/Drawer/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\n\nexport type DrawerTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n children: React.ReactElement;\n};\n\nexport const Trigger = React.forwardRef(function DrawerTrigger(props: DrawerTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n const { children, ...restProps } = props;\n\n return <DrawerPrimitive.Trigger {...restProps} ref={ref} render={children} />;\n});\n"],"names":["React","DrawerPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,UAAUA,iBAAM,WAAW,SAAS,cAAc,OAA2B,KAAmC;AACzH,QAAM,EAAE,UAAU,GAAG,UAAA,IAAc;~~AAE5B~~,~~SAAAA~~,iCAAA,cAACC,OAAAA,OAAgB,SAAhB,EAAyB,GAAG,WAAW,KAAU,QAAQ,UAAU;AAC/E,CAAC;;"}
1	+ {"version":3,"file":"Trigger.cjs","sources":["../../../../src/components/Drawer/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\n\nexport type DrawerTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n children: React.ReactElement;\n};\n\nexport const Trigger = React.forwardRef(function DrawerTrigger(props: DrawerTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n const { children, ...restProps } = props;\n\n return <DrawerPrimitive.Trigger {...restProps} ref={ref} render={children} />;\n});\n"],"names":["React","DrawerPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,UAAUA,iBAAM,WAAW,SAAS,cAAc,OAA2B,KAAmC;AACzH,QAAM,EAAE,UAAU,GAAG,UAAA,IAAc;AAEnC,SAAOA,iCAAA,cAACC,OAAAA,OAAgB,SAAhB,EAAyB,GAAG,WAAW,KAAU,QAAQ,UAAU;AAC/E,CAAC;;"}

package/dist/components/Drawer/components/Trigger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Trigger.js","sources":["../../../../src/components/Drawer/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\n\nexport type DrawerTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n children: React.ReactElement;\n};\n\nexport const Trigger = React.forwardRef(function DrawerTrigger(props: DrawerTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n const { children, ...restProps } = props;\n\n return <DrawerPrimitive.Trigger {...restProps} ref={ref} render={children} />;\n});\n"],"names":["DrawerPrimitive"],"mappings":";;AAOO,MAAM,UAAU,MAAM,WAAW,SAAS,cAAc,OAA2B,KAAmC;AACzH,QAAM,EAAE,UAAU,GAAG,UAAA,IAAc;~~AAE5B~~,~~SAAA~~,sBAAA,cAACA,OAAgB,SAAhB,EAAyB,GAAG,WAAW,KAAU,QAAQ,UAAU;AAC/E,CAAC;"}
1	+ {"version":3,"file":"Trigger.js","sources":["../../../../src/components/Drawer/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\n\nexport type DrawerTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n children: React.ReactElement;\n};\n\nexport const Trigger = React.forwardRef(function DrawerTrigger(props: DrawerTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n const { children, ...restProps } = props;\n\n return <DrawerPrimitive.Trigger {...restProps} ref={ref} render={children} />;\n});\n"],"names":["DrawerPrimitive"],"mappings":";;AAOO,MAAM,UAAU,MAAM,WAAW,SAAS,cAAc,OAA2B,KAAmC;AACzH,QAAM,EAAE,UAAU,GAAG,UAAA,IAAc;AAEnC,SAAO,sBAAA,cAACA,OAAgB,SAAhB,EAAyB,GAAG,WAAW,KAAU,QAAQ,UAAU;AAC/E,CAAC;"}

package/dist/components/Drawer/useDrawerStack.cjs CHANGED Viewed

@@ -3,20 +3,19 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 let drawerStack;
 const useDrawerStack = ({ open, setOpen, onClose, onOpen }) => {
-  const onCloseRef = React.useRef();
+  const onCloseRef = React.useRef(void 0);
   const close = React.useCallback(() => {
     setOpen(false);
-    onClose == null ? void 0 : onClose();
+    onClose?.();
   }, [setOpen, onClose]);
   React.useLayoutEffect(() => {
     onCloseRef.current = close;
   }, [close]);
   React.useEffect(() => {
-    var _a;
     if (open) {
       onOpen();
       if (drawerStack !== void 0) {
-        (_a = drawerStack.current) == null ? void 0 : _a.call(drawerStack);
+        drawerStack.current?.();
       }
       drawerStack = onCloseRef;
     } else if (drawerStack === onCloseRef) {

package/dist/components/Drawer/useDrawerStack.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDrawerStack.cjs","sources":["../../../src/components/Drawer/useDrawerStack.tsx"],"sourcesContent":["import React from 'react';\n\n// drawerStack getting set by previous drawer instance, to be able to close previous instance, when new instance getting opened.\nlet drawerStack: React.MutableRefObject<(() => void) \| undefined> \| undefined;\n\ntype Props = {\n open: boolean \| undefined;\n setOpen: (open: boolean) => void;\n onClose?: () => void;\n onOpen: () => void;\n};\n// this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.\nexport const useDrawerStack = ({ open, setOpen, onClose, onOpen }: Props) => {\n const onCloseRef = React.useRef<() => void>();\n\n const close = React.useCallback(() => {\n setOpen(false);\n onClose?.();\n }, [setOpen, onClose]);\n\n React.useLayoutEffect(() => {\n onCloseRef.current = close;\n }, [close]);\n\n React.useEffect(() => {\n if (open) {\n onOpen();\n\n if (drawerStack !== undefined) {\n drawerStack.current?.();\n }\n drawerStack = onCloseRef;\n } else if (drawerStack === onCloseRef) {\n // if drawerStack is equal to current close callback,\n // this means that drawer getting closed completely instead of getting closed on re-open\n drawerStack = undefined;\n }\n\n return () => {\n if (drawerStack === onCloseRef) {\n drawerStack = undefined;\n }\n };\n }, [open]);\n};\n"],"names":[],"mappings":";;;AAGA,IAAI;AASG,MAAM,iBAAiB,CAAC,EAAE,MAAM,SAAS,SAAS,aAAoB;~~AACnE~~,~~QAAA~~,aAAa,MAAM,OAAmB;~~AAEtC~~,~~QAAA~~,QAAQ,MAAM,YAAY,MAAM;AAClC,YAAQ,KAAK;~~AACH~~;AAAA,~~EAAA~~,~~GACX~~,CAAC,SAAS,OAAO,CAAC;AAErB,QAAM,gBAAgB,MAAM;AACxB,eAAW,UAAU;AAAA,~~EAAA~~,~~GACtB~~,CAAC,KAAK,CAAC;AAEV,QAAM,UAAU,MAAM;;AAClB,QAAI,MAAM;~~AACC~~,aAAA;~~AAEP~~,UAAI,gBAAgB,QAAW;AAC3B,~~0BAAY~~,~~YAAZ~~;AAAA,~~MAAsB~~;~~AAEZ~~,~~oBAAA~~;AAAA,~~IAAA~~,~~WACP~~,gBAAgB,YAAY;~~AAGrB~~,~~oBAAA~~;AAAA,~~IAAA~~;~~AAGlB~~,WAAO,MAAM;AACT,UAAI,gBAAgB,YAAY;~~AACd~~,~~sBAAA~~;AAAA,~~MAAA~~;AAAA,~~IAEtB~~;AAAA,~~EAAA~~,~~GACD~~,CAAC,IAAI,CAAC;AACb;;"}
1	+ {"version":3,"file":"useDrawerStack.cjs","sources":["../../../src/components/Drawer/useDrawerStack.tsx"],"sourcesContent":["import React from 'react';\n\n// drawerStack getting set by previous drawer instance, to be able to close previous instance, when new instance getting opened.\nlet drawerStack: React.MutableRefObject<(() => void) \| undefined> \| undefined;\n\ntype Props = {\n open: boolean \| undefined;\n setOpen: (open: boolean) => void;\n onClose?: () => void;\n onOpen: () => void;\n};\n// this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.\nexport const useDrawerStack = ({ open, setOpen, onClose, onOpen }: Props) => {\n const onCloseRef = React.useRef<() => void>(undefined);\n\n const close = React.useCallback(() => {\n setOpen(false);\n onClose?.();\n }, [setOpen, onClose]);\n\n React.useLayoutEffect(() => {\n onCloseRef.current = close;\n }, [close]);\n\n React.useEffect(() => {\n if (open) {\n onOpen();\n\n if (drawerStack !== undefined) {\n drawerStack.current?.();\n }\n drawerStack = onCloseRef;\n } else if (drawerStack === onCloseRef) {\n // if drawerStack is equal to current close callback,\n // this means that drawer getting closed completely instead of getting closed on re-open\n drawerStack = undefined;\n }\n\n return () => {\n if (drawerStack === onCloseRef) {\n drawerStack = undefined;\n }\n };\n }, [open]);\n};\n"],"names":[],"mappings":";;;AAGA,IAAI;AASG,MAAM,iBAAiB,CAAC,EAAE,MAAM,SAAS,SAAS,aAAoB;AACzE,QAAM,aAAa,MAAM,OAAmB,MAAS;AAErD,QAAM,QAAQ,MAAM,YAAY,MAAM;AAClC,YAAQ,KAAK;AACb,cAAA;AAAA,EACJ,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,QAAM,gBAAgB,MAAM;AACxB,eAAW,UAAU;AAAA,EACzB,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,UAAU,MAAM;AAClB,QAAI,MAAM;AACN,aAAA;AAEA,UAAI,gBAAgB,QAAW;AAC3B,oBAAY,UAAA;AAAA,MAChB;AACA,oBAAc;AAAA,IAClB,WAAW,gBAAgB,YAAY;AAGnC,oBAAc;AAAA,IAClB;AAEA,WAAO,MAAM;AACT,UAAI,gBAAgB,YAAY;AAC5B,sBAAc;AAAA,MAClB;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,IAAI,CAAC;AACb;;"}

package/dist/components/Drawer/useDrawerStack.js CHANGED Viewed

@@ -1,20 +1,19 @@
 import React__default from "react";
 let drawerStack;
 const useDrawerStack = ({ open, setOpen, onClose, onOpen }) => {
-  const onCloseRef = React__default.useRef();
+  const onCloseRef = React__default.useRef(void 0);
   const close = React__default.useCallback(() => {
     setOpen(false);
-    onClose == null ? void 0 : onClose();
+    onClose?.();
   }, [setOpen, onClose]);
   React__default.useLayoutEffect(() => {
     onCloseRef.current = close;
   }, [close]);
   React__default.useEffect(() => {
-    var _a;
     if (open) {
       onOpen();
       if (drawerStack !== void 0) {
-        (_a = drawerStack.current) == null ? void 0 : _a.call(drawerStack);
+        drawerStack.current?.();
       }
       drawerStack = onCloseRef;
     } else if (drawerStack === onCloseRef) {

package/dist/components/Drawer/useDrawerStack.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDrawerStack.js","sources":["../../../src/components/Drawer/useDrawerStack.tsx"],"sourcesContent":["import React from 'react';\n\n// drawerStack getting set by previous drawer instance, to be able to close previous instance, when new instance getting opened.\nlet drawerStack: React.MutableRefObject<(() => void) \| undefined> \| undefined;\n\ntype Props = {\n open: boolean \| undefined;\n setOpen: (open: boolean) => void;\n onClose?: () => void;\n onOpen: () => void;\n};\n// this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.\nexport const useDrawerStack = ({ open, setOpen, onClose, onOpen }: Props) => {\n const onCloseRef = React.useRef<() => void>();\n\n const close = React.useCallback(() => {\n setOpen(false);\n onClose?.();\n }, [setOpen, onClose]);\n\n React.useLayoutEffect(() => {\n onCloseRef.current = close;\n }, [close]);\n\n React.useEffect(() => {\n if (open) {\n onOpen();\n\n if (drawerStack !== undefined) {\n drawerStack.current?.();\n }\n drawerStack = onCloseRef;\n } else if (drawerStack === onCloseRef) {\n // if drawerStack is equal to current close callback,\n // this means that drawer getting closed completely instead of getting closed on re-open\n drawerStack = undefined;\n }\n\n return () => {\n if (drawerStack === onCloseRef) {\n drawerStack = undefined;\n }\n };\n }, [open]);\n};\n"],"names":["React"],"mappings":";AAGA,IAAI;AASG,MAAM,iBAAiB,CAAC,EAAE,MAAM,SAAS,SAAS,aAAoB;~~AACnE~~,~~QAAA~~,aAAaA,eAAM,OAAmB;~~AAEtC~~,~~QAAA~~,QAAQA,eAAM,YAAY,MAAM;AAClC,YAAQ,KAAK;~~AACH~~;AAAA,~~EAAA~~,~~GACX~~,CAAC,SAAS,OAAO,CAAC;AAErBA,iBAAM,gBAAgB,MAAM;AACxB,eAAW,UAAU;AAAA,~~EAAA~~,~~GACtB~~,CAAC,KAAK,CAAC;AAEVA,iBAAM,UAAU,MAAM;;AAClB,QAAI,MAAM;~~AACC~~,aAAA;~~AAEP~~,UAAI,gBAAgB,QAAW;AAC3B,~~0BAAY~~,~~YAAZ~~;AAAA,~~MAAsB~~;~~AAEZ~~,~~oBAAA~~;AAAA,~~IAAA~~,~~WACP~~,gBAAgB,YAAY;~~AAGrB~~,~~oBAAA~~;AAAA,~~IAAA~~;~~AAGlB~~,WAAO,MAAM;AACT,UAAI,gBAAgB,YAAY;~~AACd~~,~~sBAAA~~;AAAA,~~MAAA~~;AAAA,~~IAEtB~~;AAAA,~~EAAA~~,~~GACD~~,CAAC,IAAI,CAAC;AACb;"}
1	+ {"version":3,"file":"useDrawerStack.js","sources":["../../../src/components/Drawer/useDrawerStack.tsx"],"sourcesContent":["import React from 'react';\n\n// drawerStack getting set by previous drawer instance, to be able to close previous instance, when new instance getting opened.\nlet drawerStack: React.MutableRefObject<(() => void) \| undefined> \| undefined;\n\ntype Props = {\n open: boolean \| undefined;\n setOpen: (open: boolean) => void;\n onClose?: () => void;\n onOpen: () => void;\n};\n// this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.\nexport const useDrawerStack = ({ open, setOpen, onClose, onOpen }: Props) => {\n const onCloseRef = React.useRef<() => void>(undefined);\n\n const close = React.useCallback(() => {\n setOpen(false);\n onClose?.();\n }, [setOpen, onClose]);\n\n React.useLayoutEffect(() => {\n onCloseRef.current = close;\n }, [close]);\n\n React.useEffect(() => {\n if (open) {\n onOpen();\n\n if (drawerStack !== undefined) {\n drawerStack.current?.();\n }\n drawerStack = onCloseRef;\n } else if (drawerStack === onCloseRef) {\n // if drawerStack is equal to current close callback,\n // this means that drawer getting closed completely instead of getting closed on re-open\n drawerStack = undefined;\n }\n\n return () => {\n if (drawerStack === onCloseRef) {\n drawerStack = undefined;\n }\n };\n }, [open]);\n};\n"],"names":["React"],"mappings":";AAGA,IAAI;AASG,MAAM,iBAAiB,CAAC,EAAE,MAAM,SAAS,SAAS,aAAoB;AACzE,QAAM,aAAaA,eAAM,OAAmB,MAAS;AAErD,QAAM,QAAQA,eAAM,YAAY,MAAM;AAClC,YAAQ,KAAK;AACb,cAAA;AAAA,EACJ,GAAG,CAAC,SAAS,OAAO,CAAC;AAErBA,iBAAM,gBAAgB,MAAM;AACxB,eAAW,UAAU;AAAA,EACzB,GAAG,CAAC,KAAK,CAAC;AAEVA,iBAAM,UAAU,MAAM;AAClB,QAAI,MAAM;AACN,aAAA;AAEA,UAAI,gBAAgB,QAAW;AAC3B,oBAAY,UAAA;AAAA,MAChB;AACA,oBAAc;AAAA,IAClB,WAAW,gBAAgB,YAAY;AAGnC,oBAAc;AAAA,IAClB;AAEA,WAAO,MAAM;AACT,UAAI,gBAAgB,YAAY;AAC5B,sBAAc;AAAA,MAClB;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,IAAI,CAAC;AACb;"}

package/dist/components/Drawer/util.cjs CHANGED Viewed

@@ -1,35 +1,31 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const cn = require("clsx");
-const getDrawerSizeClassnames = (size) => {
-  switch (size) {
-    case "lg":
-      return "w-[600px]";
-    default:
-      return "w-[420px]";
-  }
+const DRAWER_SIZE_CLASSNAME = {
+  md: "w-[420px]",
+  lg: "w-[600px]"
 };
 const getDrawerContentClassNames = (size, variant) => {
   return cn(
-    "bg-white h-full bottom-0 top-0 right-0 transition-none",
+    "bottom-0 right-0 top-0 h-full bg-white transition-none",
     {
       fixed: variant === "overlay",
       "relative h-full overflow-hidden": variant === "embedded"
     },
-    getDrawerSizeClassnames(size)
+    DRAWER_SIZE_CLASSNAME[size]
   );
 };
 const getDrawerContainerClassNames = (variant) => {
-  return cn("bg-white mx-auto absolute h-full w-full flex flex-col ", {
+  return cn("absolute mx-auto flex h-full w-full flex-col bg-white", {
     "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-200 h-full": variant === "embedded"
+    "h-full border-l border-gray-200": variant === "embedded"
   });
 };
 const getDrawerDragHandlerClassNames = () => {
-  return cn("border-[2px] absolute border-transparent top-0 w-2 h-full cursor-ew-resize left-0 hover:border-l-blue-500");
+  return cn("absolute left-0 top-0 h-full w-2 cursor-ew-resize border-[2px] border-transparent hover:border-l-blue-500");
 };
+exports.DRAWER_SIZE_CLASSNAME = DRAWER_SIZE_CLASSNAME;
 exports.getDrawerContainerClassNames = getDrawerContainerClassNames;
 exports.getDrawerContentClassNames = getDrawerContentClassNames;
 exports.getDrawerDragHandlerClassNames = getDrawerDragHandlerClassNames;
-exports.getDrawerSizeClassnames = getDrawerSizeClassnames;
 //# sourceMappingURL=util.cjs.map

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

	@@ -1 +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-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;;;;;"}
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 DRAWER_SIZE_CLASSNAME: Record<DrawerSize, string> = {\n md: 'w-[420px]',\n lg: 'w-[600px]',\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 'bottom-0 right-0 top-0 h-full bg-white transition-none',\n {\n fixed: variant === 'overlay',\n 'relative h-full overflow-hidden': variant === 'embedded',\n },\n DRAWER_SIZE_CLASSNAME[size]\n );\n};\n\nexport const getDrawerContainerClassNames = (variant: DrawerVariant): string => {\n return cn('absolute mx-auto flex h-full w-full flex-col bg-white', {\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 'h-full border-l border-gray-200': variant === 'embedded',\n });\n};\n\nexport const getDrawerDragHandlerClassNames = (): string => {\n return cn('absolute left-0 top-0 h-full w-2 cursor-ew-resize border-[2px] border-transparent hover:border-l-blue-500');\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,wBAAoD;AAAA,EAC7D,IAAI;AAAA,EACJ,IAAI;AACR;AAMO,MAAM,6BAA6B,CAAC,MAAkB,YAAmC;AAC5F,SAAO;AAAA,IACH;AAAA,IACA;AAAA,MACI,OAAO,YAAY;AAAA,MACnB,mCAAmC,YAAY;AAAA,IAAA;AAAA,IAEnD,sBAAsB,IAAI;AAAA,EAAA;AAElC;AAEO,MAAM,+BAA+B,CAAC,YAAmC;AAC5E,SAAO,GAAG,yDAAyD;AAAA,IAC/D,wEAAwE,YAAY;AAAA,IACpF,mCAAmC,YAAY;AAAA,EAAA,CAClD;AACL;AAEO,MAAM,iCAAiC,MAAc;AACxD,SAAO,GAAG,2GAA2G;AACzH;;;;;"}

package/dist/components/Drawer/util.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { DrawerSize, DrawerVariant } from './types';
-export declare const getDrawerSizeClassnames: (size: DrawerSize) => string;
+export declare const DRAWER_SIZE_CLASSNAME: Record<DrawerSize, string>;
 export declare const getDrawerPrimitiveContentClassNames: () => string;
 export declare const getDrawerContentClassNames: (size: DrawerSize, variant: DrawerVariant) => string;
 export declare const getDrawerContainerClassNames: (variant: DrawerVariant) => string;

package/dist/components/Drawer/util.js CHANGED Viewed

@@ -1,35 +1,31 @@
 import cn from "clsx";
-const getDrawerSizeClassnames = (size) => {
-  switch (size) {
-    case "lg":
-      return "w-[600px]";
-    default:
-      return "w-[420px]";
-  }
+const DRAWER_SIZE_CLASSNAME = {
+  md: "w-[420px]",
+  lg: "w-[600px]"
 };
 const getDrawerContentClassNames = (size, variant) => {
   return cn(
-    "bg-white h-full bottom-0 top-0 right-0 transition-none",
+    "bottom-0 right-0 top-0 h-full bg-white transition-none",
     {
       fixed: variant === "overlay",
       "relative h-full overflow-hidden": variant === "embedded"
     },
-    getDrawerSizeClassnames(size)
+    DRAWER_SIZE_CLASSNAME[size]
   );
 };
 const getDrawerContainerClassNames = (variant) => {
-  return cn("bg-white mx-auto absolute h-full w-full flex flex-col ", {
+  return cn("absolute mx-auto flex h-full w-full flex-col bg-white", {
     "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-200 h-full": variant === "embedded"
+    "h-full border-l border-gray-200": variant === "embedded"
   });
 };
 const getDrawerDragHandlerClassNames = () => {
-  return cn("border-[2px] absolute border-transparent top-0 w-2 h-full cursor-ew-resize left-0 hover:border-l-blue-500");
+  return cn("absolute left-0 top-0 h-full w-2 cursor-ew-resize border-[2px] border-transparent hover:border-l-blue-500");
 };
 export {
+  DRAWER_SIZE_CLASSNAME,
   getDrawerContainerClassNames,
   getDrawerContentClassNames,
-  getDrawerDragHandlerClassNames,
-  getDrawerSizeClassnames
+  getDrawerDragHandlerClassNames
 };
 //# sourceMappingURL=util.js.map

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

	@@ -1 +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-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;"}
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 DRAWER_SIZE_CLASSNAME: Record<DrawerSize, string> = {\n md: 'w-[420px]',\n lg: 'w-[600px]',\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 'bottom-0 right-0 top-0 h-full bg-white transition-none',\n {\n fixed: variant === 'overlay',\n 'relative h-full overflow-hidden': variant === 'embedded',\n },\n DRAWER_SIZE_CLASSNAME[size]\n );\n};\n\nexport const getDrawerContainerClassNames = (variant: DrawerVariant): string => {\n return cn('absolute mx-auto flex h-full w-full flex-col bg-white', {\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 'h-full border-l border-gray-200': variant === 'embedded',\n });\n};\n\nexport const getDrawerDragHandlerClassNames = (): string => {\n return cn('absolute left-0 top-0 h-full w-2 cursor-ew-resize border-[2px] border-transparent hover:border-l-blue-500');\n};\n"],"names":[],"mappings":";AAGO,MAAM,wBAAoD;AAAA,EAC7D,IAAI;AAAA,EACJ,IAAI;AACR;AAMO,MAAM,6BAA6B,CAAC,MAAkB,YAAmC;AAC5F,SAAO;AAAA,IACH;AAAA,IACA;AAAA,MACI,OAAO,YAAY;AAAA,MACnB,mCAAmC,YAAY;AAAA,IAAA;AAAA,IAEnD,sBAAsB,IAAI;AAAA,EAAA;AAElC;AAEO,MAAM,+BAA+B,CAAC,YAAmC;AAC5E,SAAO,GAAG,yDAAyD;AAAA,IAC/D,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 CHANGED Viewed

@@ -25,13 +25,13 @@ const Field = React__namespace.forwardRef(function Field2(props, ref) {
   const messageRef = React__namespace.useRef(null);
   const { disabled, children, invalid = false, warning = false, message, ...otherProps } = props;
   const className = cn(
-    "flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]",
+    "flex min-h-[theme(spacing.18)] flex-col pb-4 text-xs font-bold leading-loose",
     {
       "text-gray-300": disabled
     },
     props.className
   );
-  const messageClassName = cn("h-4 text-xs text-left leading-normal font-normal truncate -mb-4", {
+  const messageClassName = cn("-mb-4 h-4 truncate text-left text-xs font-normal leading-normal", {
     "text-gray-700": !invalid && !warning,
     "text-red-700": invalid,
     "opacity-50": disabled

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

	@@ -1 +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-700': invalid,\n 'opacity-50': disabled,\n });\n\n return (\n <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n {children}\n {message && (\n <Truncate tooltip={message}>\n <span\n className={messageClassName}\n data-taco=\"label-message\"\n ref={messageRef}\n role={invalid ? 'alert' : undefined}>\n {message}\n </span>\n </Truncate>\n )}\n </label>\n );\n});\n"],"names":["React","Field","Truncate"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;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,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;;"}
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 min-h-[theme(spacing.18)] flex-col pb-4 text-xs font-bold leading-loose',\n {\n 'text-gray-300': disabled,\n },\n props.className\n );\n const messageClassName = cn('-mb-4 h-4 truncate text-left text-xs font-normal leading-normal', {\n 'text-gray-700': !invalid && !warning,\n 'text-red-700': invalid,\n 'opacity-50': disabled,\n });\n\n return (\n <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n {children}\n {message && (\n <Truncate tooltip={message}>\n <span\n className={messageClassName}\n data-taco=\"label-message\"\n ref={messageRef}\n role={invalid ? 'alert' : undefined}>\n {message}\n </span>\n </Truncate>\n )}\n </label>\n );\n});\n"],"names":["React","Field","Truncate"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqBO,MAAM,QAAQA,iBAAM,WAAW,SAASC,OAAM,OAAmB,KAAkC;AACtG,QAAM,aAAaD,iBAAM,OAAwB,IAAI;AAErD,QAAM,EAAE,UAAU,UAAU,UAAU,OAAO,UAAU,OAAO,SAAS,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,iBAAiB;AAAA,IAAA;AAAA,IAErB,MAAM;AAAA,EAAA;AAEV,QAAM,mBAAmB,GAAG,mEAAmE;AAAA,IAC3F,iBAAiB,CAAC,WAAW,CAAC;AAAA,IAC9B,gBAAgB;AAAA,IAChB,cAAc;AAAA,EAAA,CACjB;AAED,SACIA,iCAAA,cAAC,SAAA,EAAO,GAAG,YAAY,WAAsB,aAAU,SAAQ,IAAA,GAC1D,UACA,WACGA,iCAAA,cAACE,SAAAA,UAAA,EAAS,SAAS,WACfF,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,aAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM,UAAU,UAAU;AAAA,IAAA;AAAA,IACzB;AAAA,EAAA,CAET,CAER;AAER,CAAC;;"}

package/dist/components/Field/Field.js CHANGED Viewed

@@ -6,13 +6,13 @@ const Field = React.forwardRef(function Field2(props, ref) {
   const messageRef = React.useRef(null);
   const { disabled, children, invalid = false, warning = false, message, ...otherProps } = props;
   const className = cn(
-    "flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]",
+    "flex min-h-[theme(spacing.18)] flex-col pb-4 text-xs font-bold leading-loose",
     {
       "text-gray-300": disabled
     },
     props.className
   );
-  const messageClassName = cn("h-4 text-xs text-left leading-normal font-normal truncate -mb-4", {
+  const messageClassName = cn("-mb-4 h-4 truncate text-left text-xs font-normal leading-normal", {
     "text-gray-700": !invalid && !warning,
     "text-red-700": invalid,
     "opacity-50": disabled

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

	@@ -1 +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-700': invalid,\n 'opacity-50': disabled,\n });\n\n return (\n <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n {children}\n {message && (\n <Truncate tooltip={message}>\n <span\n className={messageClassName}\n data-taco=\"label-message\"\n ref={messageRef}\n role={invalid ? 'alert' : undefined}>\n {message}\n </span>\n </Truncate>\n )}\n </label>\n );\n});\n"],"names":["Field"],"mappings":";;;;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,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;"}
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 min-h-[theme(spacing.18)] flex-col pb-4 text-xs font-bold leading-loose',\n {\n 'text-gray-300': disabled,\n },\n props.className\n );\n const messageClassName = cn('-mb-4 h-4 truncate text-left text-xs font-normal leading-normal', {\n 'text-gray-700': !invalid && !warning,\n 'text-red-700': invalid,\n 'opacity-50': disabled,\n });\n\n return (\n <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n {children}\n {message && (\n <Truncate tooltip={message}>\n <span\n className={messageClassName}\n data-taco=\"label-message\"\n ref={messageRef}\n role={invalid ? 'alert' : undefined}>\n {message}\n </span>\n </Truncate>\n )}\n </label>\n );\n});\n"],"names":["Field"],"mappings":";;;;AAqBO,MAAM,QAAQ,MAAM,WAAW,SAASA,OAAM,OAAmB,KAAkC;AACtG,QAAM,aAAa,MAAM,OAAwB,IAAI;AAErD,QAAM,EAAE,UAAU,UAAU,UAAU,OAAO,UAAU,OAAO,SAAS,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,iBAAiB;AAAA,IAAA;AAAA,IAErB,MAAM;AAAA,EAAA;AAEV,QAAM,mBAAmB,GAAG,mEAAmE;AAAA,IAC3F,iBAAiB,CAAC,WAAW,CAAC;AAAA,IAC9B,gBAAgB;AAAA,IAChB,cAAc;AAAA,EAAA,CACjB;AAED,SACI,sBAAA,cAAC,SAAA,EAAO,GAAG,YAAY,WAAsB,aAAU,SAAQ,IAAA,GAC1D,UACA,WACG,sBAAA,cAAC,UAAA,EAAS,SAAS,WACf,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,aAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM,UAAU,UAAU;AAAA,IAAA;AAAA,IACzB;AAAA,EAAA,CAET,CAER;AAER,CAAC;"}

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

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

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

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

package/dist/components/Group/Group.cjs CHANGED Viewed

@@ -23,7 +23,7 @@ const Group = React__namespace.forwardRef(function Group2(props, ref) {
   const { as: Tag = "span", orientation = "horizontal", ...otherProps } = props;
   const className = cn(
     'flex gap-2 [&:has([data-taco="tag"])]:!gap-1',
-    { "flex-col ": orientation === "vertical" },
+    { "flex-col": orientation === "vertical" },
     props.className
   );
   return /* @__PURE__ */ React__namespace.createElement(Tag, { ...otherProps, className, "data-taco": "group", ref });

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

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

package/dist/components/Group/Group.js CHANGED Viewed

@@ -4,7 +4,7 @@ const Group = React.forwardRef(function Group2(props, ref) {
   const { as: Tag = "span", orientation = "horizontal", ...otherProps } = props;
   const className = cn(
     'flex gap-2 [&:has([data-taco="tag"])]:!gap-1',
-    { "flex-col ": orientation === "vertical" },
+    { "flex-col": orientation === "vertical" },
     props.className
   );
   return /* @__PURE__ */ React.createElement(Tag, { ...otherProps, className, "data-taco": "group", ref });

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

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

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

	@@ -1 +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-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;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;;"}
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-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;AAC5H,SACIA,iCAAA,cAACC,QAAAA,QAAiB,OAAjB,EAAuB,WAAU,uPAAA,GAC9BD,iCAAA,cAAC,OAAA,EAAK,GAAG,OAAO,KAAU,SAAQ,aAAA,GAC9BA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,GACNA,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.map CHANGED Viewed

	@@ -1 +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-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":["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;"}
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-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":["PopoverPrimitive"],"mappings":";;AAGO,MAAM,gBAAgB,MAAM,WAA2D,SAAS,aAAa,OAAO,KAAK;AAC5H,SACI,sBAAA,cAACA,QAAiB,OAAjB,EAAuB,WAAU,uPAAA,GAC9B,sBAAA,cAAC,OAAA,EAAK,GAAG,OAAO,KAAU,SAAQ,aAAA,GAC9B,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,GACN,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 CHANGED Viewed

@@ -31,7 +31,7 @@ const HangerContext = React__namespace.createContext({
 });
 const Anchor = ({ children }) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, children);
 const Title = React__namespace.forwardRef(function DialogTitle(props, ref) {
-  const className = cn("mb-1 text-base font-bold flex w-full", props.className);
+  const className = cn("mb-1 flex w-full text-base font-bold", props.className);
   return /* @__PURE__ */ React__namespace.createElement("span", { ...props, className, ref });
 });
 const Content = React__namespace.forwardRef(function HangerContent(props, ref) {
@@ -39,7 +39,7 @@ const Content = React__namespace.forwardRef(function HangerContent(props, ref) {
   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",
+    "max-w-sm rounded border border-transparent p-3 pr-12 wcag-blue-500 yt-shadow focus:border-transparent print:hidden",
     props.className
   );
   return /* @__PURE__ */ React__namespace.createElement(popover.Popover.Portal, { container }, /* @__PURE__ */ React__namespace.createElement(

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

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

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

@@ -15,7 +15,7 @@ export type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 export type HangerProps = React.PropsWithChildren<{
     /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */
-    anchor?: JSX.Element;
+    anchor?: React.JSX.Element;
     /**
      * Shows or hides hanger depending on the value
      * @defaultValue true

package/dist/components/Hanger/Hanger.js CHANGED Viewed

@@ -12,7 +12,7 @@ const HangerContext = React.createContext({
 });
 const Anchor = ({ children }) => /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 const Title = React.forwardRef(function DialogTitle(props, ref) {
-  const className = cn("mb-1 text-base font-bold flex w-full", props.className);
+  const className = cn("mb-1 flex w-full text-base font-bold", props.className);
   return /* @__PURE__ */ React.createElement("span", { ...props, className, ref });
 });
 const Content = React.forwardRef(function HangerContent(props, ref) {
@@ -20,7 +20,7 @@ const Content = React.forwardRef(function HangerContent(props, ref) {
   const context = React.useContext(HangerContext);
   const { texts } = 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",
+    "max-w-sm rounded border border-transparent p-3 pr-12 wcag-blue-500 yt-shadow focus:border-transparent print:hidden",
     props.className
   );
   return /* @__PURE__ */ React.createElement(Popover.Portal, { container }, /* @__PURE__ */ React.createElement(