@economic/taco 1.12.1 → 1.12.2

package/dist/components/Button/Button.stories.d.ts

@@ -7,7 +7,7 @@ declare const _default: {
         href?: string | undefined;
         target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
     } & {
-        appearance?: "default" | "primary" | "danger" | "ghost" | "discrete" | undefined;
+        appearance?: "primary" | "default" | "danger" | "ghost" | "discrete" | undefined;
         dialog?: ((props: Partial<import("../..").DialogProps>) => JSX.Element) | undefined;
         fluid?: boolean | undefined;
         hanger?: ((props: Partial<React.PropsWithChildren<{
@@ -54,11 +54,11 @@ export declare const WithHanger: {
     (args: ButtonProps): JSX.Element;
     storyName: string;
 };
-export declare const WithDialog: {
+export declare const WithAlertDialog: {
     (args: ButtonProps): JSX.Element;
     storyName: string;
 };
-export declare const WithAlertDialog: {
+export declare const WithDialog: {
     (args: ButtonProps): JSX.Element;
     storyName: string;
 };

package/dist/components/Button/util.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 import { Appearance } from '../../types';
 export declare const getButtonClasses: () => string;
 export declare const getAppearanceClasses: (value: Appearance | undefined, icon?: boolean) => string;
-export declare const createButton: (props: any, className: string, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => JSX.Element;
+export declare const createButtonWithTooltip: (props: any, className: string, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => JSX.Element;
+export declare const createButtonWithOverlays: (props: any, buttonBase: JSX.Element) => JSX.Element;

package/dist/components/IconButton/IconButton.d.ts

@@ -32,6 +32,35 @@ export declare type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'childre
     /** A tooltip to show when hovering over the button */
     tooltip?: string;
 };
+export declare const Base: React.ForwardRefExoticComponent<Pick<ButtonPrimitive.ButtonProps, "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "href" | "target"> & {
+    /** Appearance will change the style of the button */
+    appearance?: "default" | "primary" | "danger" | "ghost" | "discrete" | undefined;
+    /**
+     * Dialog component associated with the button, clicking the button will open the dialog.
+     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
+     * the button should be only to open the associated dialog when clicked.
+     */
+    dialog?: ((props: Partial<DialogProps>) => JSX.Element) | undefined;
+    /** Hanger component associated with the button. */
+    hanger?: ((props: Partial<HangerProps>) => JSX.Element) | undefined;
+    /** Set which icon should be rendered within button */
+    icon: IconName;
+    /** Menu component associated with the button. */
+    menu?: ((props: Partial<MenuProps>) => JSX.Element) | undefined;
+    /**
+     * Popover component associated with the button, clicking the button will open the popover.
+     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
+     * the button should be only to open the associated popover when clicked.
+     */
+    popover?: ((props: Partial<PopoverProps>) => JSX.Element) | undefined;
+    /**
+     * Set whether the button is rounded.
+     * Default value is `false`
+     */
+    rounded?: boolean | undefined;
+    /** A tooltip to show when hovering over the button */
+    tooltip?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export declare const IconButton: React.ForwardRefExoticComponent<Pick<ButtonPrimitive.ButtonProps, "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "href" | "target"> & {
     /** Appearance will change the style of the button */
     appearance?: "default" | "primary" | "danger" | "ghost" | "discrete" | undefined;
@@ -60,4 +89,4 @@ export declare const IconButton: React.ForwardRefExoticComponent<Pick<ButtonPrim
     rounded?: boolean | undefined;
     /** A tooltip to show when hovering over the button */
     tooltip?: string | undefined;
-} & React.RefAttributes<HTMLButtonElement>>;
+} & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/components/IconButton/IconButton.stories.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<Pick<import("../../primitives/Button").ButtonProps, "draggable" | "name" | "form" | "className" | "color" | "id" | "lang" | "style" | "target" | "type" | "role" | "tabIndex" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value"> & {
-        appearance?: "default" | "primary" | "danger" | "ghost" | "discrete" | undefined;
+        appearance?: "primary" | "default" | "danger" | "ghost" | "discrete" | undefined;
         dialog?: ((props: Partial<import("../..").DialogProps>) => JSX.Element) | undefined;
         hanger?: ((props: Partial<React.PropsWithChildren<{
             anchor?: JSX.Element | undefined;
@@ -16,7 +16,7 @@ declare const _default: {
         }>>) => JSX.Element) | undefined;
         rounded?: boolean | undefined;
         tooltip?: string | undefined;
-    } & React.RefAttributes<HTMLButtonElement>>;
+    } & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 };
 export default _default;
 export declare const Default: () => JSX.Element;

package/dist/components/Popover/Popover.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Placement } from '../..';
-export declare type PopoverTriggerProps = React.HTMLAttributes<HTMLButtonElement>;
+export declare type PopoverTriggerProps = React.HTMLAttributes<HTMLElement>;
 export declare type PopoverContentRenderProps = {
     close: () => void;
 };

package/dist/esm/components/AlertDialog/AlertDialog.js

@@ -17,9 +17,9 @@ const AlertDialog = /*#__PURE__*/forwardRef(function AlertDialog(props, ref) {
     ...otherProps
   } = props;
   const context = useMemo(() => ({
-    ref,
     draggable,
     props: otherProps,
+    ref,
     size,
     trigger
   }), [draggable, open, otherProps]);

package/dist/esm/components/AlertDialog/AlertDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.js","sources":["../../../../src/components/AlertDialog/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';\nimport { AlertDialogContext } from './Context';\nimport { Trigger, AlertDialogTriggerProps } from './components/Trigger';\nimport {\n    Cancel,\n    Action,\n    Footer,\n    AlertDialogCancelProps,\n    AlertDialogActionProps,\n    AlertDialogFooterProps,\n} from './components/Footer';\nimport { Title, Content, AlertDialogContentProps, AlertDialogTitleProps } from './components/Content';\nimport { DialogSize } from '../Dialog/types';\n\nexport type AlertDialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** Set whether the alert dialog is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Allows dragging the alert dialog around the screen (window constrained) */\n    draggable?: boolean;\n    /** Called when the alert dialog opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the dialog from outside the component  */\n    open?: boolean;\n    /** Size of the alert dialog. This is the recommended way to set a size for alert dialog component. */\n    size?: DialogSize;\n    /** A trigger to be used for the alert dialog, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n};\n\nexport type ForwardedAlertDialogWithStatics = React.ForwardRefExoticComponent<\n    AlertDialogProps & React.RefAttributes<HTMLElement>\n> & {\n    Trigger: React.ForwardRefExoticComponent<AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<AlertDialogFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Action: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;\n    Cancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;\n};\n\nexport const AlertDialog = React.forwardRef(function AlertDialog(props: AlertDialogProps, ref: React.Ref<HTMLElement>) {\n    const {\n        children: initialChildren,\n        defaultOpen,\n        draggable = false,\n        size = 'dialog',\n        onChange,\n        open,\n        trigger,\n        ...otherProps\n    } = props;\n\n    const context = React.useMemo(\n        () => ({\n            ref,\n            draggable,\n            props: otherProps,\n            size,\n            trigger,\n        }),\n        [draggable, open, otherProps]\n    );\n\n    return (\n        <AlertDialogContext.Provider value={context}>\n            <AlertDialogPrimitive.Root {...props} defaultOpen={defaultOpen} open={open} onOpenChange={onChange}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {props.children}\n            </AlertDialogPrimitive.Root>\n        </AlertDialogContext.Provider>\n    );\n}) as ForwardedAlertDialogWithStatics;\n\nAlertDialog.Trigger = Trigger;\nAlertDialog.Content = Content;\nAlertDialog.Title = Title;\nAlertDialog.Cancel = Cancel;\nAlertDialog.Action = Action;\nAlertDialog.Footer = Footer;\n"],"names":["AlertDialog","React","props","ref","children","initialChildren","defaultOpen","draggable","size","onChange","open","trigger","otherProps","context","AlertDialogContext","Provider","value","AlertDialogPrimitive","onOpenChange","Trigger","Content","Title","Cancel","Action","Footer"],"mappings":";;;;;;;MA0CaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,CAAqBE,KAArB,EAA8CC,GAA9C;EACxC,MAAM;IACFC,QAAQ,EAAEC,eADR;IAEFC,WAFE;IAGFC,SAAS,GAAG,KAHV;IAIFC,IAAI,GAAG,QAJL;IAKFC,QALE;IAMFC,IANE;IAOFC,OAPE;IAQF,GAAGC;MACHV,KATJ;EAWA,MAAMW,OAAO,GAAGZ,OAAA,CACZ,OAAO;IACHE,GADG;IAEHI,SAFG;IAGHL,KAAK,EAAEU,UAHJ;IAIHJ,IAJG;IAKHG;GALJ,CADY,EAQZ,CAACJ,SAAD,EAAYG,IAAZ,EAAkBE,UAAlB,CARY,CAAhB;EAWA,oBACIX,aAAA,CAACa,kBAAkB,CAACC,QAApB;IAA6BC,KAAK,EAAEH;GAApC,eACIZ,aAAA,CAACgB,IAAD,oBAA+Bf;IAAOI,WAAW,EAAEA;IAAaI,IAAI,EAAEA;IAAMQ,YAAY,EAAET;IAA1F,EACKE,OAAO,iBAAIV,aAAA,CAACkB,OAAD,MAAA,EAAUR,OAAV,CADhB,EAEKT,KAAK,CAACE,QAFX,CADJ,CADJ;AAQH,CA/B0B;AAiC3BJ,WAAW,CAACmB,OAAZ,GAAsBA,OAAtB;AACAnB,WAAW,CAACoB,OAAZ,GAAsBA,OAAtB;AACApB,WAAW,CAACqB,KAAZ,GAAoBA,KAApB;AACArB,WAAW,CAACsB,MAAZ,GAAqBA,MAArB;AACAtB,WAAW,CAACuB,MAAZ,GAAqBA,MAArB;AACAvB,WAAW,CAACwB,MAAZ,GAAqBA,MAArB;;;;"}
+{"version":3,"file":"AlertDialog.js","sources":["../../../../src/components/AlertDialog/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';\nimport { AlertDialogContext } from './Context';\nimport { Trigger, AlertDialogTriggerProps } from './components/Trigger';\nimport {\n    Cancel,\n    Action,\n    Footer,\n    AlertDialogCancelProps,\n    AlertDialogActionProps,\n    AlertDialogFooterProps,\n} from './components/Footer';\nimport { Title, Content, AlertDialogContentProps, AlertDialogTitleProps } from './components/Content';\nimport { DialogSize } from '../Dialog/types';\n\nexport type AlertDialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** Set whether the alert dialog is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Allows dragging the alert dialog around the screen (window constrained) */\n    draggable?: boolean;\n    /** Called when the alert dialog opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the dialog from outside the component  */\n    open?: boolean;\n    /** Size of the alert dialog. This is the recommended way to set a size for alert dialog component. */\n    size?: DialogSize;\n    /** A trigger to be used for the alert dialog, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n};\n\nexport type ForwardedAlertDialogWithStatics = React.ForwardRefExoticComponent<\n    AlertDialogProps & React.RefAttributes<HTMLElement>\n> & {\n    Trigger: React.ForwardRefExoticComponent<AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<AlertDialogFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Action: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;\n    Cancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;\n};\n\nexport const AlertDialog = React.forwardRef(function AlertDialog(props: AlertDialogProps, ref: React.Ref<HTMLElement>) {\n    const {\n        children: initialChildren,\n        defaultOpen,\n        draggable = false,\n        size = 'dialog',\n        onChange,\n        open,\n        trigger,\n        ...otherProps\n    } = props;\n\n    const context = React.useMemo(\n        () => ({\n            draggable,\n            props: otherProps,\n            ref,\n            size,\n            trigger,\n        }),\n        [draggable, open, otherProps]\n    );\n\n    return (\n        <AlertDialogContext.Provider value={context}>\n            <AlertDialogPrimitive.Root {...props} defaultOpen={defaultOpen} open={open} onOpenChange={onChange}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {props.children}\n            </AlertDialogPrimitive.Root>\n        </AlertDialogContext.Provider>\n    );\n}) as ForwardedAlertDialogWithStatics;\n\nAlertDialog.Trigger = Trigger;\nAlertDialog.Content = Content;\nAlertDialog.Title = Title;\nAlertDialog.Cancel = Cancel;\nAlertDialog.Action = Action;\nAlertDialog.Footer = Footer;\n"],"names":["AlertDialog","React","props","ref","children","initialChildren","defaultOpen","draggable","size","onChange","open","trigger","otherProps","context","AlertDialogContext","Provider","value","AlertDialogPrimitive","onOpenChange","Trigger","Content","Title","Cancel","Action","Footer"],"mappings":";;;;;;;MA0CaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,CAAqBE,KAArB,EAA8CC,GAA9C;EACxC,MAAM;IACFC,QAAQ,EAAEC,eADR;IAEFC,WAFE;IAGFC,SAAS,GAAG,KAHV;IAIFC,IAAI,GAAG,QAJL;IAKFC,QALE;IAMFC,IANE;IAOFC,OAPE;IAQF,GAAGC;MACHV,KATJ;EAWA,MAAMW,OAAO,GAAGZ,OAAA,CACZ,OAAO;IACHM,SADG;IAEHL,KAAK,EAAEU,UAFJ;IAGHT,GAHG;IAIHK,IAJG;IAKHG;GALJ,CADY,EAQZ,CAACJ,SAAD,EAAYG,IAAZ,EAAkBE,UAAlB,CARY,CAAhB;EAWA,oBACIX,aAAA,CAACa,kBAAkB,CAACC,QAApB;IAA6BC,KAAK,EAAEH;GAApC,eACIZ,aAAA,CAACgB,IAAD,oBAA+Bf;IAAOI,WAAW,EAAEA;IAAaI,IAAI,EAAEA;IAAMQ,YAAY,EAAET;IAA1F,EACKE,OAAO,iBAAIV,aAAA,CAACkB,OAAD,MAAA,EAAUR,OAAV,CADhB,EAEKT,KAAK,CAACE,QAFX,CADJ,CADJ;AAQH,CA/B0B;AAiC3BJ,WAAW,CAACmB,OAAZ,GAAsBA,OAAtB;AACAnB,WAAW,CAACoB,OAAZ,GAAsBA,OAAtB;AACApB,WAAW,CAACqB,KAAZ,GAAoBA,KAApB;AACArB,WAAW,CAACsB,MAAZ,GAAqBA,MAArB;AACAtB,WAAW,CAACuB,MAAZ,GAAqBA,MAArB;AACAvB,WAAW,CAACwB,MAAZ,GAAqBA,MAArB;;;;"}

package/dist/esm/components/AlertDialog/components/Trigger.js

@@ -3,10 +3,14 @@ import { Trigger as Trigger$1 } from '@radix-ui/react-alert-dialog';
 import { useCurrentAlertDialog } from '../Context.js';
 import { mergeRefs } from '../../../utils/mergeRefs.js';
 
-const Trigger = /*#__PURE__*/forwardRef(function AlertDialogTrigger(props, ref) {
-  const dialog = useCurrentAlertDialog();
-  return /*#__PURE__*/createElement(Trigger$1, Object.assign({}, props, {
-    ref: mergeRefs([dialog.ref, ref]),
+const Trigger = /*#__PURE__*/forwardRef(function AlertDialogTrigger(props, externalRef) {
+  const {
+    ref: parentRef,
+    props: parentProps
+  } = useCurrentAlertDialog();
+  const refCallback = mergeRefs([parentRef, externalRef]);
+  return /*#__PURE__*/createElement(Trigger$1, Object.assign({}, parentProps, props, {
+    ref: refCallback,
     asChild: true
   }));
 });

package/dist/esm/components/AlertDialog/components/Trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Trigger.js","sources":["../../../../../src/components/AlertDialog/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';\nimport { useCurrentAlertDialog } from '../Context';\nimport { mergeRefs } from '../../../utils/mergeRefs';\n\nexport type AlertDialogTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\nexport const Trigger = React.forwardRef(function AlertDialogTrigger(\n    props: AlertDialogTriggerProps,\n    ref: React.Ref<HTMLButtonElement>\n) {\n    const dialog = useCurrentAlertDialog();\n    return <AlertDialogPrimitive.Trigger {...props} ref={mergeRefs([dialog.ref, ref])} asChild />;\n});\n"],"names":["Trigger","React","AlertDialogTrigger","props","ref","dialog","useCurrentAlertDialog","AlertDialogPrimitive","mergeRefs","asChild"],"mappings":";;;;;MAMaA,OAAO,gBAAGC,UAAA,CAAiB,SAASC,kBAAT,CACpCC,KADoC,EAEpCC,GAFoC;EAIpC,MAAMC,MAAM,GAAGC,qBAAqB,EAApC;EACA,oBAAOL,aAAA,CAACM,SAAD,oBAAkCJ;IAAOC,GAAG,EAAEI,SAAS,CAAC,CAACH,MAAM,CAACD,GAAR,EAAaA,GAAb,CAAD;IAAqBK,OAAO;IAAnF,CAAP;AACH,CANsB;;;;"}
+{"version":3,"file":"Trigger.js","sources":["../../../../../src/components/AlertDialog/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';\nimport { useCurrentAlertDialog } from '../Context';\nimport { mergeRefs } from '../../../utils/mergeRefs';\n\nexport type AlertDialogTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Trigger = React.forwardRef(function AlertDialogTrigger(\n    props: AlertDialogTriggerProps,\n    externalRef: React.Ref<HTMLButtonElement>\n) {\n    const { ref: parentRef, props: parentProps } = useCurrentAlertDialog();\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    return <AlertDialogPrimitive.Trigger {...parentProps} {...props} ref={refCallback} asChild />;\n});\n"],"names":["Trigger","React","AlertDialogTrigger","props","externalRef","ref","parentRef","parentProps","useCurrentAlertDialog","refCallback","mergeRefs","AlertDialogPrimitive","asChild"],"mappings":";;;;;MAOaA,OAAO,gBAAGC,UAAA,CAAiB,SAASC,kBAAT,CACpCC,KADoC,EAEpCC,WAFoC;EAIpC,MAAM;IAAEC,GAAG,EAAEC,SAAP;IAAkBH,KAAK,EAAEI;MAAgBC,qBAAqB,EAApE;EACA,MAAMC,WAAW,GAAGC,SAAS,CAAC,CAACJ,SAAD,EAAYF,WAAZ,CAAD,CAA7B;EAEA,oBAAOH,aAAA,CAACU,SAAD,oBAAkCJ,aAAiBJ;IAAOE,GAAG,EAAEI;IAAaG,OAAO;IAAnF,CAAP;AACH,CARsB;;;;"}

package/dist/esm/components/Button/Button.js

@@ -1,9 +1,9 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
-import { getButtonClasses, getAppearanceClasses, createButton } from './util.js';
+import { createButtonWithOverlays, getButtonClasses, getAppearanceClasses, createButtonWithTooltip } from './util.js';
 
-const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
+const Base = /*#__PURE__*/forwardRef(function ButtonBase(props, ref) {
   const {
     fluid,
     ...otherProps
@@ -13,9 +13,21 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
     'focus:yt-focus active:focus:yt-focus': !props.disabled,
     'w-full': fluid
   }, props.className);
-  let children = otherProps.children; // add a chevron icon to menu buttons
+  return createButtonWithTooltip({ ...otherProps,
+    'data-taco': 'button'
+  }, className, ref);
+});
+const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
+  const {
+    dialog,
+    hanger,
+    menu,
+    popover,
+    ...buttonProps
+  } = props;
+  let children = buttonProps.children; // add a chevron icon to menu buttons
 
-  if (typeof otherProps.menu === 'function') {
+  if (typeof menu === 'function') {
     children = Array.isArray(children) ? [...children, /*#__PURE__*/createElement(Icon, {
       key: "chevron-down",
       name: "chevron-down"
@@ -25,10 +37,16 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
     })];
   }
 
-  return createButton({ ...otherProps,
-    children,
-    'data-taco': 'button'
-  }, className, ref);
+  const button = /*#__PURE__*/createElement(Base, Object.assign({}, buttonProps, {
+    children: children,
+    ref: ref
+  }));
+  return createButtonWithOverlays({
+    dialog,
+    hanger,
+    menu,
+    popover
+  }, button);
 });
 
 export { Button };

package/dist/esm/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButton } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { MenuProps } from '../Menu/Menu';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../Icon/Icon';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string;\n};\n\nexport const Button = React.forwardRef(function Button(\n    props: ButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        getAppearanceClasses(otherProps.appearance),\n        'rounded px-3',\n        {\n            'cursor-not-allowed opacity-50': props.disabled,\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    let children = otherProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof otherProps.menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    return createButton({ ...otherProps, children, 'data-taco': 'button' }, className, ref);\n});\n"],"names":["Button","React","props","ref","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","children","menu","Array","isArray","Icon","key","name","createButton"],"mappings":";;;;;MAqCaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CACnCE,KADmC,EAEnCC,GAFmC;EAInC,MAAM;IAAEC,KAAF;IAAS,GAAGC;MAAeH,KAAjC;EACA,MAAMI,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,CAFJ,EAGhB,cAHgB,EAIhB;IACI,iCAAiCR,KAAK,CAACS,QAD3C;IAEI,wCAAwC,CAACT,KAAK,CAACS,QAFnD;IAGI,UAAUP;GAPE,EAShBF,KAAK,CAACI,SATU,CAApB;EAYA,IAAIM,QAAQ,GAAGP,UAAU,CAACO,QAA1B;;EAGA,IAAI,OAAOP,UAAU,CAACQ,IAAlB,KAA2B,UAA/B,EAA2C;IACvCD,QAAQ,GAAGE,KAAK,CAACC,OAAN,CAAcH,QAAd,IACL,CAAC,GAAGA,QAAJ,eAAcX,aAAA,CAACe,IAAD;MAAMC,GAAG,EAAC;MAAeC,IAAI,EAAC;KAA9B,CAAd,CADK,GAEL,CAACN,QAAD,eAAWX,aAAA,CAACe,IAAD;MAAMC,GAAG,EAAC;MAAeC,IAAI,EAAC;KAA9B,CAAX,CAFN;;;EAKJ,OAAOC,YAAY,CAAC,EAAE,GAAGd,UAAL;IAAiBO,QAAjB;IAA2B,aAAa;GAAzC,EAAqDN,SAArD,EAAgEH,GAAhE,CAAnB;AACH,CA3BqB;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { MenuProps } from '../Menu/Menu';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../Icon/Icon';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string;\n};\n\nconst Base = React.forwardRef(function ButtonBase(props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) {\n    const { fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        getAppearanceClasses(otherProps.appearance),\n        'rounded px-3',\n        {\n            'cursor-not-allowed opacity-50': props.disabled,\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButtonWithTooltip({ ...otherProps, 'data-taco': 'button' }, className, ref);\n});\n\nexport const Button = React.forwardRef(function Button(\n    props: ButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n\n    let children = buttonProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    const button = <Base {...buttonProps} children={children} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["Base","React","ButtonBase","props","ref","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","createButtonWithTooltip","Button","dialog","hanger","menu","popover","buttonProps","children","Array","isArray","Icon","key","name","button","createButtonWithOverlays"],"mappings":";;;;;AAqCA,MAAMA,IAAI,gBAAGC,UAAA,CAAiB,SAASC,UAAT,CAAoBC,KAApB,EAAwCC,GAAxC;EAC1B,MAAM;IAAEC,KAAF;IAAS,GAAGC;MAAeH,KAAjC;EACA,MAAMI,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,CAFJ,EAGhB,cAHgB,EAIhB;IACI,iCAAiCR,KAAK,CAACS,QAD3C;IAEI,wCAAwC,CAACT,KAAK,CAACS,QAFnD;IAGI,UAAUP;GAPE,EAShBF,KAAK,CAACI,SATU,CAApB;EAYA,OAAOM,uBAAuB,CAAC,EAAE,GAAGP,UAAL;IAAiB,aAAa;GAA/B,EAA2CC,SAA3C,EAAsDH,GAAtD,CAA9B;AACH,CAfY,CAAb;MAiBaU,MAAM,gBAAGb,UAAA,CAAiB,SAASa,MAAT,CACnCX,KADmC,EAEnCC,GAFmC;EAInC,MAAM;IAAEW,MAAF;IAAUC,MAAV;IAAkBC,IAAlB;IAAwBC,OAAxB;IAAiC,GAAGC;MAAgBhB,KAA1D;EAEA,IAAIiB,QAAQ,GAAGD,WAAW,CAACC,QAA3B;;EAGA,IAAI,OAAOH,IAAP,KAAgB,UAApB,EAAgC;IAC5BG,QAAQ,GAAGC,KAAK,CAACC,OAAN,CAAcF,QAAd,IACL,CAAC,GAAGA,QAAJ,eAAcnB,aAAA,CAACsB,IAAD;MAAMC,GAAG,EAAC;MAAeC,IAAI,EAAC;KAA9B,CAAd,CADK,GAEL,CAACL,QAAD,eAAWnB,aAAA,CAACsB,IAAD;MAAMC,GAAG,EAAC;MAAeC,IAAI,EAAC;KAA9B,CAAX,CAFN;;;EAKJ,MAAMC,MAAM,gBAAGzB,aAAA,CAACD,IAAD,oBAAUmB;IAAaC,QAAQ,EAAEA;IAAUhB,GAAG,EAAEA;IAAhD,CAAf;EAEA,OAAOuB,wBAAwB,CAAC;IAAEZ,MAAF;IAAUC,MAAV;IAAkBC,IAAlB;IAAwBC;GAAzB,EAAoCQ,MAApC,CAA/B;AACH,CAlBqB;;;;"}

package/dist/esm/components/Button/util.js

@@ -29,28 +29,40 @@ const getAppearanceClasses = (value, icon = false) => {
       return `yt-grey-solid focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid`;
   }
 };
-const createButton = (props, className, ref) => {
+const createButtonWithTooltip = (props, className, ref) => {
   const {
-    dialog,
-    hanger,
-    menu,
-    popover,
     tooltip,
-    ...otherProps
+    ...buttonProps
   } = props;
-  let button = /*#__PURE__*/React__default.createElement(Button, Object.assign({}, otherProps, {
+  const button = /*#__PURE__*/React__default.createElement(Button, Object.assign({}, buttonProps, {
     className: className,
     ref: ref
   }));
 
+  if (tooltip) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: tooltip
+    }, button);
+  }
+
+  return button;
+};
+const createButtonWithOverlays = (props, buttonBase) => {
+  const {
+    dialog,
+    hanger,
+    menu,
+    popover
+  } = props;
+  let button = buttonBase;
+
   if (typeof dialog === 'function') {
     button = dialog({
       trigger: button
     });
   } else if (typeof menu === 'function') {
     button = menu({
-      trigger: button,
-      appearance: otherProps.appearance
+      trigger: button
     });
   } else if (typeof popover === 'function') {
     button = popover({
@@ -64,14 +76,8 @@ const createButton = (props, className, ref) => {
     });
   }
 
-  if (tooltip) {
-    button = /*#__PURE__*/React__default.createElement(Tooltip, {
-      title: tooltip
-    }, button);
-  }
-
   return button;
 };
 
-export { createButton, getAppearanceClasses, getButtonClasses };
+export { createButtonWithOverlays, createButtonWithTooltip, getAppearanceClasses, getButtonClasses };
 //# sourceMappingURL=util.js.map

package/dist/esm/components/Button/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n    switch (value) {\n        case 'primary':\n            return `yt-blue-solid focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white hover:bg-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid disabled:hover:hover:border-blue`;\n\n        case 'danger':\n            return `yt-red-solid focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid`;\n\n        case 'ghost':\n            return `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT)] text-blue focus:bg-transparent focus:text-blue active:bg-blue-lightest focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-dark hover:bg-blue-lightest hover:shadow-[inset_0_0_0_1px_theme(colors.blue.light)] hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.light),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-light`;\n\n        case 'discrete': {\n            if (icon) {\n                return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:text-black `;\n            }\n\n            return `yt-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent`;\n        }\n\n        default:\n            return `yt-grey-solid focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid`;\n    }\n};\n\nexport const createButton = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n    const { dialog, hanger, menu, popover, tooltip, ...otherProps } = props;\n\n    let button = <ButtonPrimitive.Button {...otherProps} className={className} ref={ref} />;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button, appearance: otherProps.appearance });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    if (tooltip) {\n        button = <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButton","props","className","ref","dialog","hanger","menu","popover","tooltip","otherProps","button","React","ButtonPrimitive","trigger","appearance","anchor","Tooltip","title"],"mappings":";;;;MAKaA,gBAAgB,GAAG;EAC5B,OAAO,iHAAP;AACH;MAEYC,oBAAoB,GAAG,CAACC,KAAD,EAAgCC,IAAI,GAAG,KAAvC;EAChC,QAAQD,KAAR;IACI,KAAK,SAAL;MACI,4RAAA;;IAEJ,KAAK,QAAL;MACI,2NAAA;;IAEJ,KAAK,OAAL;MACI,sfAAA;;IAEJ,KAAK,UAAL;MAAiB;QACb,IAAIC,IAAJ,EAAU;UACN,wLAAA;;;QAGJ,4JAAA;;;IAGJ;MACI,0NAAA;;AAEX;MAEYC,YAAY,GAAG,CACxBC,KADwB,EAExBC,SAFwB,EAGxBC,GAHwB;EAKxB,MAAM;IAAEC,MAAF;IAAUC,MAAV;IAAkBC,IAAlB;IAAwBC,OAAxB;IAAiCC,OAAjC;IAA0C,GAAGC;MAAeR,KAAlE;EAEA,IAAIS,MAAM,gBAAGC,4BAAA,CAACC,MAAD,oBAA4BH;IAAYP,SAAS,EAAEA;IAAWC,GAAG,EAAEA;IAAnE,CAAb;;EAEA,IAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;IAC9BM,MAAM,GAAGN,MAAM,CAAC;MAAES,OAAO,EAAEH;KAAZ,CAAf;GADJ,MAEO,IAAI,OAAOJ,IAAP,KAAgB,UAApB,EAAgC;IACnCI,MAAM,GAAGJ,IAAI,CAAC;MAAEO,OAAO,EAAEH,MAAX;MAAmBI,UAAU,EAAEL,UAAU,CAACK;KAA3C,CAAb;GADG,MAEA,IAAI,OAAOP,OAAP,KAAmB,UAAvB,EAAmC;IACtCG,MAAM,GAAGH,OAAO,CAAC;MAAEM,OAAO,EAAEH;KAAZ,CAAhB;;;EAGJ,IAAI,OAAOL,MAAP,KAAkB,UAAtB,EAAkC;IAC9BK,MAAM,GAAGL,MAAM,CAAC;MAAEU,MAAM,EAAEL;KAAX,CAAf;;;EAGJ,IAAIF,OAAJ,EAAa;IACTE,MAAM,gBAAGC,4BAAA,CAACK,OAAD;MAASC,KAAK,EAAET;KAAhB,EAA0BE,MAA1B,CAAT;;;EAGJ,OAAOA,MAAP;AACH;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n    switch (value) {\n        case 'primary':\n            return `yt-blue-solid focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white hover:bg-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid disabled:hover:hover:border-blue`;\n\n        case 'danger':\n            return `yt-red-solid focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid`;\n\n        case 'ghost':\n            return `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT)] text-blue focus:bg-transparent focus:text-blue active:bg-blue-lightest focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-dark hover:bg-blue-lightest hover:shadow-[inset_0_0_0_1px_theme(colors.blue.light)] hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.light),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-light`;\n\n        case 'discrete': {\n            if (icon) {\n                return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:text-black `;\n            }\n\n            return `yt-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent`;\n        }\n\n        default:\n            return `yt-grey-solid focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid`;\n    }\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: JSX.Element) => {\n    const { dialog, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButtonWithTooltip","props","className","ref","tooltip","buttonProps","button","React","ButtonPrimitive","Tooltip","title","createButtonWithOverlays","buttonBase","dialog","hanger","menu","popover","trigger","anchor"],"mappings":";;;;MAKaA,gBAAgB,GAAG;EAC5B,OAAO,iHAAP;AACH;MAEYC,oBAAoB,GAAG,CAACC,KAAD,EAAgCC,IAAI,GAAG,KAAvC;EAChC,QAAQD,KAAR;IACI,KAAK,SAAL;MACI,4RAAA;;IAEJ,KAAK,QAAL;MACI,2NAAA;;IAEJ,KAAK,OAAL;MACI,sfAAA;;IAEJ,KAAK,UAAL;MAAiB;QACb,IAAIC,IAAJ,EAAU;UACN,wLAAA;;;QAGJ,4JAAA;;;IAGJ;MACI,0NAAA;;AAEX;MAEYC,uBAAuB,GAAG,CACnCC,KADmC,EAEnCC,SAFmC,EAGnCC,GAHmC;EAKnC,MAAM;IAAEC,OAAF;IAAW,GAAGC;MAAgBJ,KAApC;EACA,MAAMK,MAAM,gBAAGC,4BAAA,CAACC,MAAD,oBAA4BH;IAAaH,SAAS,EAAEA;IAAWC,GAAG,EAAEA;IAApE,CAAf;;EAEA,IAAIC,OAAJ,EAAa;IACT,oBAAOG,4BAAA,CAACE,OAAD;MAASC,KAAK,EAAEN;KAAhB,EAA0BE,MAA1B,CAAP;;;EAGJ,OAAOA,MAAP;AACH;MAEYK,wBAAwB,GAAG,CAACV,KAAD,EAAaW,UAAb;EACpC,MAAM;IAAEC,MAAF;IAAUC,MAAV;IAAkBC,IAAlB;IAAwBC;MAAYf,KAA1C;EACA,IAAIK,MAAM,GAAGM,UAAb;;EAEA,IAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;IAC9BP,MAAM,GAAGO,MAAM,CAAC;MAAEI,OAAO,EAAEX;KAAZ,CAAf;GADJ,MAEO,IAAI,OAAOS,IAAP,KAAgB,UAApB,EAAgC;IACnCT,MAAM,GAAGS,IAAI,CAAC;MAAEE,OAAO,EAAEX;KAAZ,CAAb;GADG,MAEA,IAAI,OAAOU,OAAP,KAAmB,UAAvB,EAAmC;IACtCV,MAAM,GAAGU,OAAO,CAAC;MAAEC,OAAO,EAAEX;KAAZ,CAAhB;;;EAGJ,IAAI,OAAOQ,MAAP,KAAkB,UAAtB,EAAkC;IAC9BR,MAAM,GAAGQ,MAAM,CAAC;MAAEI,MAAM,EAAEZ;KAAX,CAAf;;;EAGJ,OAAOA,MAAP;AACH;;;;"}

package/dist/esm/components/Dialog/components/Trigger.js

@@ -3,10 +3,14 @@ import { mergeRefs } from '../../../utils/mergeRefs.js';
 import { Trigger as Trigger$1 } from '@radix-ui/react-dialog';
 import { useCurrentDialog } from '../Context.js';
 
-const Trigger = /*#__PURE__*/forwardRef(function DialogTrigger(props, ref) {
-  const dialog = useCurrentDialog();
-  return /*#__PURE__*/createElement(Trigger$1, Object.assign({}, dialog.props, props, {
-    ref: mergeRefs([dialog.ref, ref]),
+const Trigger = /*#__PURE__*/forwardRef(function DialogTrigger(props, externalRef) {
+  const {
+    ref: parentRef,
+    props: parentProps
+  } = useCurrentDialog();
+  const refCallback = mergeRefs([parentRef, externalRef]);
+  return /*#__PURE__*/createElement(Trigger$1, Object.assign({}, parentProps, props, {
+    ref: refCallback,
     asChild: true
   }));
 });

package/dist/esm/components/Dialog/components/Trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Trigger.js","sources":["../../../../../src/components/Dialog/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useCurrentDialog } from '../Context';\nimport { mergeRefs } from '../../../utils/mergeRefs';\n\nexport type DialogTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Trigger = React.forwardRef(function DialogTrigger(props: DialogTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n    return <DialogPrimitive.Trigger {...dialog.props} {...props} ref={mergeRefs([dialog.ref, ref])} asChild />;\n});\n"],"names":["Trigger","React","DialogTrigger","props","ref","dialog","useCurrentDialog","DialogPrimitive","mergeRefs","asChild"],"mappings":";;;;;MAOaA,OAAO,gBAAGC,UAAA,CAAiB,SAASC,aAAT,CAAuBC,KAAvB,EAAkDC,GAAlD;EACpC,MAAMC,MAAM,GAAGC,gBAAgB,EAA/B;EACA,oBAAOL,aAAA,CAACM,SAAD,oBAA6BF,MAAM,CAACF,OAAWA;IAAOC,GAAG,EAAEI,SAAS,CAAC,CAACH,MAAM,CAACD,GAAR,EAAaA,GAAb,CAAD;IAAqBK,OAAO;IAAhG,CAAP;AACH,CAHsB;;;;"}
+{"version":3,"file":"Trigger.js","sources":["../../../../../src/components/Dialog/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useCurrentDialog } from '../Context';\nimport { mergeRefs } from '../../../utils/mergeRefs';\n\nexport type DialogTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Trigger = React.forwardRef(function DialogTrigger(\n    props: DialogTriggerProps,\n    externalRef: React.Ref<HTMLButtonElement>\n) {\n    const { ref: parentRef, props: parentProps } = useCurrentDialog();\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    return <DialogPrimitive.Trigger {...parentProps} {...props} ref={refCallback} asChild />;\n});\n"],"names":["Trigger","React","DialogTrigger","props","externalRef","ref","parentRef","parentProps","useCurrentDialog","refCallback","mergeRefs","DialogPrimitive","asChild"],"mappings":";;;;;MAOaA,OAAO,gBAAGC,UAAA,CAAiB,SAASC,aAAT,CACpCC,KADoC,EAEpCC,WAFoC;EAIpC,MAAM;IAAEC,GAAG,EAAEC,SAAP;IAAkBH,KAAK,EAAEI;MAAgBC,gBAAgB,EAA/D;EACA,MAAMC,WAAW,GAAGC,SAAS,CAAC,CAACJ,SAAD,EAAYF,WAAZ,CAAD,CAA7B;EAEA,oBAAOH,aAAA,CAACU,SAAD,oBAA6BJ,aAAiBJ;IAAOE,GAAG,EAAEI;IAAaG,OAAO;IAA9E,CAAP;AACH,CARsB;;;;"}

package/dist/esm/components/Hanger/Hanger.js

@@ -7,13 +7,18 @@ import { Root, Anchor as Anchor$1, Close } from '@radix-ui/react-popover';
 import { UnstyledContent, UnstyledArrow } from '../Popover/Primitives.js';
 
 const HangerContext = /*#__PURE__*/createContext({
+  onClose: undefined,
   props: {},
   ref: null
 });
-const Anchor = /*#__PURE__*/forwardRef(function HangerAnchor(props, ref) {
+const Anchor = /*#__PURE__*/forwardRef(function HangerAnchor(props, externalRef) {
   var _props$children;
 
-  const context = useContext(HangerContext);
+  const {
+    ref: parentRef,
+    props: parentProps
+  } = useContext(HangerContext);
+  const refCallback = mergeRefs([parentRef, externalRef]);
   let children = props.children;
 
   if ( /*#__PURE__*/isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
@@ -21,9 +26,9 @@ const Anchor = /*#__PURE__*/forwardRef(function HangerAnchor(props, ref) {
     children = /*#__PURE__*/createElement("span", null, props.children);
   }
 
-  return /*#__PURE__*/createElement(Anchor$1, Object.assign({}, context.props, props, {
+  return /*#__PURE__*/createElement(Anchor$1, Object.assign({}, parentProps, props, {
     children: children,
-    ref: mergeRefs([context.ref, ref]),
+    ref: refCallback,
     asChild: true
   }));
 });
@@ -60,7 +65,7 @@ const Content = /*#__PURE__*/forwardRef(function HangerContent(props, ref) {
     "aria-label": texts.hanger.close,
     className: "absolute top-0 right-0 ml-2 mr-2 mt-2 text-white",
     icon: "close",
-    onClick: context.props.onClose
+    onClick: context.onClose
   })));
 });
 const Hanger = /*#__PURE__*/forwardRef(function Hanger(props, ref) {
@@ -68,12 +73,14 @@ const Hanger = /*#__PURE__*/forwardRef(function Hanger(props, ref) {
     anchor,
     children,
     defaultOpen = true,
+    onClose,
     ...otherProps
   } = props;
   const context = useMemo(() => ({
+    onClose,
     props: otherProps,
     ref
-  }), [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
+  }), [onClose, otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
 
   const [open, setOpen] = useState(false);
   useEffect(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"Hanger.js","sources":["../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow, UnstyledContent } from '../Popover/Primitives';\nimport { useLocalization } from '../Provider/Provider';\nimport './Hanger.css';\nimport { mergeRefs } from '../../utils/mergeRefs';\n\ntype HangerContextValue = {\n    props: any;\n    ref: React.Ref<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    props: {},\n    ref: null,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, ref: React.Ref<HTMLDivElement>) {\n    const context = React.useContext(HangerContext);\n    let children = props.children;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        console.warn(\n            `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n        );\n        children = <span>{props.children}</span>;\n    }\n\n    return (\n        <PopoverPrimitive.Anchor {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\n    );\n});\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent max-w-sm',\n        props.className\n    );\n    const handleInteractOutside = (event: CustomEvent): void => {\n        event.preventDefault();\n    };\n\n    return (\n        <UnstyledContent\n            className={className}\n            data-taco=\"hanger\"\n            onInteractOutside={handleInteractOutside}\n            placement={props.placement}\n            ref={ref}>\n            {props.children}\n            <UnstyledArrow className=\"text-blue\" />\n            <PopoverPrimitive.Close asChild>\n                <IconButton\n                    appearance=\"primary\"\n                    aria-label={texts.hanger.close}\n                    className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\n                    icon=\"close\"\n                    onClick={context.props.onClose}\n                />\n            </PopoverPrimitive.Close>\n        </UnstyledContent>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef(function Hanger(props: HangerProps, ref: React.Ref<HTMLElement>) {\n    const { anchor, children, defaultOpen = true, ...otherProps } = props;\n    const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    return (\n        <HangerContext.Provider value={context}>\n            <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\n                {anchor && <Anchor>{anchor}</Anchor>}\n                {children}\n            </PopoverPrimitive.Root>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["HangerContext","React","props","ref","Anchor","HangerAnchor","context","children","type","console","warn","name","PopoverPrimitive","mergeRefs","asChild","Title","DialogTitle","className","cn","Content","HangerContent","texts","useLocalization","handleInteractOutside","event","preventDefault","UnstyledContent","onInteractOutside","placement","UnstyledArrow","IconButton","appearance","hanger","close","icon","onClick","onClose","Hanger","anchor","defaultOpen","otherProps","open","setOpen","Provider","value","key","String"],"mappings":"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"}
+{"version":3,"file":"Hanger.js","sources":["../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow, UnstyledContent } from '../Popover/Primitives';\nimport { useLocalization } from '../Provider/Provider';\nimport './Hanger.css';\nimport { mergeRefs } from '../../utils/mergeRefs';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    props: any;\n    ref: React.Ref<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    onClose: undefined,\n    props: {},\n    ref: null,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { ref: parentRef, props: parentProps } = React.useContext(HangerContext);\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    let children = props.children;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        console.warn(\n            `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n        );\n        children = <span>{props.children}</span>;\n    }\n\n    return <PopoverPrimitive.Anchor {...parentProps} {...props} children={children} ref={refCallback} asChild />;\n});\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent max-w-sm',\n        props.className\n    );\n    const handleInteractOutside = (event: CustomEvent): void => {\n        event.preventDefault();\n    };\n\n    return (\n        <UnstyledContent\n            className={className}\n            data-taco=\"hanger\"\n            onInteractOutside={handleInteractOutside}\n            placement={props.placement}\n            ref={ref}>\n            {props.children}\n            <UnstyledArrow className=\"text-blue\" />\n            <PopoverPrimitive.Close asChild>\n                <IconButton\n                    appearance=\"primary\"\n                    aria-label={texts.hanger.close}\n                    className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\n                    icon=\"close\"\n                    onClick={context.onClose}\n                />\n            </PopoverPrimitive.Close>\n        </UnstyledContent>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const context = React.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    return (\n        <HangerContext.Provider value={context}>\n            <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\n                {anchor && <Anchor>{anchor}</Anchor>}\n                {children}\n            </PopoverPrimitive.Root>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["HangerContext","React","onClose","undefined","props","ref","Anchor","HangerAnchor","externalRef","parentRef","parentProps","refCallback","mergeRefs","children","type","console","warn","name","PopoverPrimitive","asChild","Title","DialogTitle","className","cn","Content","HangerContent","context","texts","useLocalization","handleInteractOutside","event","preventDefault","UnstyledContent","onInteractOutside","placement","UnstyledArrow","IconButton","appearance","hanger","close","icon","onClick","Hanger","anchor","defaultOpen","otherProps","open","setOpen","Provider","value","key","String"],"mappings":"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"}

package/dist/esm/components/IconButton/IconButton.js

@@ -1,9 +1,9 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
-import { getButtonClasses, getAppearanceClasses, createButton } from '../Button/util.js';
+import { getButtonClasses, getAppearanceClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util.js';
 
-const IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
+const Base = /*#__PURE__*/forwardRef(function IconButtonBase(props, ref) {
   const {
     icon,
     rounded = false,
@@ -20,7 +20,7 @@ const IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
     return null;
   }
 
-  return createButton({ ...otherProps,
+  return createButtonWithTooltip({ ...otherProps,
     children: /*#__PURE__*/createElement(Icon, {
       name: icon,
       className: "m-0 p-0"
@@ -28,6 +28,24 @@ const IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
     'data-taco': 'icon-button'
   }, className, ref);
 });
+const IconButton = /*#__PURE__*/forwardRef(function Button(props, ref) {
+  const {
+    dialog,
+    hanger,
+    menu,
+    popover,
+    ...buttonProps
+  } = props;
+  const button = /*#__PURE__*/createElement(Base, Object.assign({}, buttonProps, {
+    ref: ref
+  }));
+  return createButtonWithOverlays({
+    dialog,
+    hanger,
+    menu,
+    popover
+  }, button);
+});
 
-export { IconButton };
+export { Base, IconButton };
 //# sourceMappingURL=IconButton.js.map

package/dist/esm/components/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getAppearanceClasses, getButtonClasses, createButton } from '../Button/util';\nimport { Appearance } from '../../types';\nimport { DialogProps, HangerProps, MenuProps, PopoverProps } from '../..';\n\nexport type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string;\n};\n\nexport const IconButton = React.forwardRef(function IconButton(props: IconButtonProps, ref: React.Ref<HTMLButtonElement>) {\n    const { icon, rounded = false, ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        getAppearanceClasses(otherProps.appearance, true),\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n            'cursor-not-allowed opacity-50': props.disabled,\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButton(\n        { ...otherProps, children: <Icon name={icon} className=\"m-0 p-0\" />, 'data-taco': 'icon-button' },\n        className,\n        ref\n    );\n});\n"],"names":["IconButton","React","props","ref","icon","rounded","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","createButton","children","Icon","name"],"mappings":";;;;;MAsCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;EACvC,MAAM;IAAEC,IAAF;IAAQC,OAAO,GAAG,KAAlB;IAAyB,GAAGC;MAAeJ,KAAjD;EAEA,MAAMK,SAAS,GAAGC,EAAE,CAChB,KADgB,EAEhBC,gBAAgB,EAFA,EAGhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,EAAwB,IAAxB,CAHJ,EAIhB;IACI,gBAAgBN,OADpB;IAEIA,OAAO,EAAE,CAACA,OAFd;IAGI,iCAAiCH,KAAK,CAACU,QAH3C;IAII,wCAAwC,CAACV,KAAK,CAACU;GARnC,EAUhBV,KAAK,CAACK,SAVU,CAApB;;EAaA,IAAI,CAACH,IAAL,EAAW;IACP,OAAO,IAAP;;;EAGJ,OAAOS,YAAY,CACf,EAAE,GAAGP,UAAL;IAAiBQ,QAAQ,eAAEb,aAAA,CAACc,IAAD;MAAMC,IAAI,EAAEZ;MAAMG,SAAS,EAAC;KAA5B,CAA3B;IAAqE,aAAa;GADnE,EAEfA,SAFe,EAGfJ,GAHe,CAAnB;AAKH,CAzByB;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getAppearanceClasses, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util';\nimport { Appearance } from '../../types';\nimport { DialogProps, HangerProps, MenuProps, PopoverProps } from '../..';\n\nexport type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string;\n};\n\nexport const Base = React.forwardRef(function IconButtonBase(\n    props: IconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { icon, rounded = false, ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        getAppearanceClasses(otherProps.appearance, true),\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n            'cursor-not-allowed opacity-50': props.disabled,\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButtonWithTooltip(\n        { ...otherProps, children: <Icon name={icon} className=\"m-0 p-0\" />, 'data-taco': 'icon-button' },\n        className,\n        ref\n    );\n});\n\nexport const IconButton = React.forwardRef(function Button(\n    props: IconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n    const button = <Base {...buttonProps} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["Base","React","IconButtonBase","props","ref","icon","rounded","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","createButtonWithTooltip","children","Icon","name","IconButton","Button","dialog","hanger","menu","popover","buttonProps","button","createButtonWithOverlays"],"mappings":";;;;;MAsCaA,IAAI,gBAAGC,UAAA,CAAiB,SAASC,cAAT,CACjCC,KADiC,EAEjCC,GAFiC;EAIjC,MAAM;IAAEC,IAAF;IAAQC,OAAO,GAAG,KAAlB;IAAyB,GAAGC;MAAeJ,KAAjD;EAEA,MAAMK,SAAS,GAAGC,EAAE,CAChB,KADgB,EAEhBC,gBAAgB,EAFA,EAGhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,EAAwB,IAAxB,CAHJ,EAIhB;IACI,gBAAgBN,OADpB;IAEIA,OAAO,EAAE,CAACA,OAFd;IAGI,iCAAiCH,KAAK,CAACU,QAH3C;IAII,wCAAwC,CAACV,KAAK,CAACU;GARnC,EAUhBV,KAAK,CAACK,SAVU,CAApB;;EAaA,IAAI,CAACH,IAAL,EAAW;IACP,OAAO,IAAP;;;EAGJ,OAAOS,uBAAuB,CAC1B,EAAE,GAAGP,UAAL;IAAiBQ,QAAQ,eAAEd,aAAA,CAACe,IAAD;MAAMC,IAAI,EAAEZ;MAAMG,SAAS,EAAC;KAA5B,CAA3B;IAAqE,aAAa;GADxD,EAE1BA,SAF0B,EAG1BJ,GAH0B,CAA9B;AAKH,CA5BmB;MA8BPc,UAAU,gBAAGjB,UAAA,CAAiB,SAASkB,MAAT,CACvChB,KADuC,EAEvCC,GAFuC;EAIvC,MAAM;IAAEgB,MAAF;IAAUC,MAAV;IAAkBC,IAAlB;IAAwBC,OAAxB;IAAiC,GAAGC;MAAgBrB,KAA1D;EACA,MAAMsB,MAAM,gBAAGxB,aAAA,CAACD,IAAD,oBAAUwB;IAAapB,GAAG,EAAEA;IAA5B,CAAf;EAEA,OAAOsB,wBAAwB,CAAC;IAAEN,MAAF;IAAUC,MAAV;IAAkBC,IAAlB;IAAwBC;GAAzB,EAAoCE,MAApC,CAA/B;AACH,CARyB;;;;"}