@economic/taco 0.0.6-alpha.0 → 0.0.7-alpha.0

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Appearance } from '../../types';
 import * as ButtonPrimitive from '../../primitives/Button';
 import { HangerProps } from '../Hanger/Hanger';
+import { MenuProps } from '../Menu/Menu';
 import { DialogProps } from '../Dialog/Dialog';
 import { PopoverProps } from '../Popover/Popover';
 import './Button.css';
@@ -18,6 +19,8 @@ export declare type ButtonProps = ButtonPrimitive.ButtonProps & {
     fluid?: boolean;
     /** Hanger component associated with the button. */
     hanger?: React.ReactElement<HangerProps>;
+    /** Menu component associated with the button. */
+    menu?: React.ReactElement<MenuProps>;
     /**
      * 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
@@ -46,6 +49,8 @@ export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAtt
     hanger?: React.ReactElement<{
         children?: React.ReactNode;
     }, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    /** Menu component associated with the button. */
+    menu?: React.ReactElement<MenuProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | 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

package/dist/components/Dialog/Context.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { DialogSize } from './types';
 export declare type DialogContext = {
+    closeOnEscape: boolean;
     draggable: boolean;
     drawer?: {
         open: boolean;
@@ -14,6 +15,7 @@ export declare type DialogContext = {
     onClose?: () => void;
     props: {};
     ref: React.Ref<HTMLElement>;
+    showCloseButton: boolean;
     size: DialogSize;
 };
 export declare const DialogContext: React.Context<DialogContext>;

package/dist/components/Dialog/Dialog.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import './Dialog.css';
 import { DialogTriggerProps } from './components/Trigger';
-import { DialogContentProps, DialogTitleProps, DialogFooterProps, DialogCloseProps } from './components/Content';
+import { DialogContentProps, DialogContentRenderProps, DialogContentDrawerRenderProps, DialogTitleProps, DialogFooterProps, DialogCloseProps } from './components/Content';
 import { DialogDrawerProps } from './components/Drawer';
 import { DialogExtraProps } from './components/Extra';
 import { DialogSize } from './types';
-export { DialogContentProps, DialogTitleProps, DialogFooterProps, DialogCloseProps };
+export { DialogContentProps, DialogContentRenderProps, DialogContentDrawerRenderProps, DialogTitleProps, DialogFooterProps, DialogCloseProps, DialogSize, };
 export declare type DialogTexts = {
     /**
      * Aria-label for close icon button in dialog.
@@ -16,12 +16,16 @@ export declare type DialogTexts = {
 };
 export declare type DialogProps = {
     children: React.ReactNode | React.ReactNode[];
+    /** When `true`, pressing escape will close the dialog */
+    closeOnEscape?: boolean;
     /** Allows dragging the dialog around the screen (window constrained) */
     draggable?: boolean;
     /** Handler called when dialog closes by user interaction */
     onClose?: () => void;
     /** Set whether the dialog is open by default or not, use when not providing a trigger  */
     open?: boolean;
+    /** Shows the close icon button of the dialog */
+    showCloseButton?: boolean;
     /** Size of the dialog. This is the recommended way to set a size for dialog component. */
     size?: DialogSize;
 };

package/dist/components/Dialog/components/Content.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
+export declare type DialogContentDrawerRenderProps = {
+    open: boolean;
+    toggle: () => void;
+};
 export declare type DialogContentRenderProps = {
     close: () => void;
-    drawer?: {
-        open: boolean;
-        toggle: () => void;
-    };
+    drawer?: DialogContentDrawerRenderProps;
 };
 export declare type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
 export declare const Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
@@ -13,12 +14,12 @@ export declare const Footer: React.ForwardRefExoticComponent<DialogFooterProps &
 export declare type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement>;
 export declare const Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 export declare type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
-    /** An accessible description to be announced when the dialog is opened */
-    'aria-describedby': string;
+    /** An accessible label to be announced when the dialog is opened */
+    'aria-label': string;
     children: Omit<React.ReactNode, 'Function'> | ((props: DialogContentRenderProps) => JSX.Element);
 };
 export declare const Content: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "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"> & {
-    /** An accessible description to be announced when the dialog is opened */
-    'aria-describedby': string;
+    /** An accessible label to be announced when the dialog is opened */
+    'aria-label': string;
     children: Pick<React.ReactNode, never> | ((props: DialogContentRenderProps) => JSX.Element);
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Select/Select.d.ts

@@ -31,7 +31,7 @@ export declare const Select: React.ForwardRefExoticComponent<Pick<React.InputHTM
     loading?: boolean | undefined;
     state?: "default" | "success" | "error" | "warning" | "information" | undefined;
     value?: string | number | boolean | null | undefined;
-} & Pick<ComboboxProps, "onChange" | "onFocus" | "defaultValue" | "value" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "width" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "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" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "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" | "button" | "icon" | "highlighted" | "state" | "data" | "emptyValue" | "loading"> & {
+} & Pick<ComboboxProps, "onChange" | "onFocus" | "defaultValue" | "value" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "width" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "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" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "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" | "button" | "icon" | "highlighted" | "state" | "data" | "emptyValue" | "loading" | "onSearch"> & {
     /**
      * Allows to select multiple values.
      * All the selected values will be combined in a comma-seperated string as the value of the input.

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 { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\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?: React.ReactElement<DialogProps>;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: React.ReactElement<HangerProps>;\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?: React.ReactElement<PopoverProps>;\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 { appearance, fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        getAppearanceClasses(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 createButton({ ...otherProps, 'data-taco': 'button' }, className, ref);\n});\n"],"names":["Button","React","props","ref","appearance","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","disabled","createButton"],"mappings":";;;;;;IAiCaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CACnCE,KADmC,EAEnCC,GAFmC;AAInC,MAAQC,UAAR,GAA6CF,KAA7C,CAAQE,UAAR;AAAA,MAAoBC,KAApB,GAA6CH,KAA7C,CAAoBG,KAApB;AAAA,MAA8BC,UAA9B,iCAA6CJ,KAA7C;;AACA,MAAMK,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACN,UAAD,CAFJ,EAGhB,cAHgB,EAIhB;AACI,qCAAiCF,KAAK,CAACS,QAD3C;AAEI,4CAAwC,CAACT,KAAK,CAACS,QAFnD;AAGI,cAAUN;AAHd,GAJgB,EAShBH,KAAK,CAACK,SATU,CAApB;AAYA,SAAOK,YAAY,cAAMN,UAAN;AAAkB,iBAAa;AAA/B,MAA2CC,SAA3C,EAAsDJ,GAAtD,CAAnB;AACH,CAlBqB;;;;"}
+{"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';\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?: React.ReactElement<DialogProps>;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: React.ReactElement<HangerProps>;\n    /** Menu component associated with the button. */\n    menu?: React.ReactElement<MenuProps>;\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?: React.ReactElement<PopoverProps>;\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 { appearance, fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        getAppearanceClasses(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 createButton({ ...otherProps, 'data-taco': 'button' }, className, ref);\n});\n"],"names":["Button","React","props","ref","appearance","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","disabled","createButton"],"mappings":";;;;;;IAoCaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CACnCE,KADmC,EAEnCC,GAFmC;AAInC,MAAQC,UAAR,GAA6CF,KAA7C,CAAQE,UAAR;AAAA,MAAoBC,KAApB,GAA6CH,KAA7C,CAAoBG,KAApB;AAAA,MAA8BC,UAA9B,iCAA6CJ,KAA7C;;AACA,MAAMK,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACN,UAAD,CAFJ,EAGhB,cAHgB,EAIhB;AACI,qCAAiCF,KAAK,CAACS,QAD3C;AAEI,4CAAwC,CAACT,KAAK,CAACS,QAFnD;AAGI,cAAUN;AAHd,GAJgB,EAShBH,KAAK,CAACK,SATU,CAApB;AAYA,SAAOK,YAAY,cAAMN,UAAN;AAAkB,iBAAa;AAA/B,MAA2CC,SAA3C,EAAsDJ,GAAtD,CAAnB;AACH,CAlBqB;;;;"}

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

@@ -3,10 +3,11 @@ import React__default from 'react';
 import { Button } from '../../primitives/Button.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { Hanger } from '../Hanger/Hanger.js';
+import { Menu } from '../Menu/Menu.js';
 import { Dialog } from '../Dialog/Dialog.js';
 import { Popover } from '../Popover/Popover.js';
 
-var _excluded = ["dialog", "hanger", "popover", "tooltip"];
+var _excluded = ["dialog", "hanger", "menu", "popover", "tooltip"];
 var getButtonClasses = function getButtonClasses() {
   return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';
 };
@@ -41,6 +42,7 @@ var getAppearanceClasses = function getAppearanceClasses(value, icon) {
 var createButton = function createButton(props, className, ref) {
   var dialog = props.dialog,
       hanger = props.hanger,
+      menu = props.menu,
       popover = props.popover,
       tooltip = props.tooltip,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
@@ -54,6 +56,10 @@ var createButton = function createButton(props, className, ref) {
     button = React__default.createElement(Hanger, Object.assign({}, hanger.props), React__default.createElement(Hanger.Anchor, null, button), hanger.props.children);
   }
 
+  if (menu) {
+    button = React__default.createElement(Menu, Object.assign({}, menu.props), React__default.createElement(Menu.Trigger, null, button), menu.props.children);
+  }
+
   if (dialog) {
     button = React__default.createElement(Dialog, Object.assign({}, dialog.props), React__default.createElement(Dialog.Trigger, null, button), dialog.props.children);
   }

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';\nimport { Hanger } from '../Hanger/Hanger';\nimport { Dialog } from '../Dialog/Dialog';\nimport { Popover } from '../Popover/Popover';\n\nexport const getButtonClasses = () => {\n    return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n    switch (value) {\n        case 'primary':\n            return `yt-blue-solid border-blue\n                focus:bg-blue focus:text-white focus:yt-focus\n                active:bg-blue-dark active:text-white \n                hover:bg-blue-light hover:border-blue-light hover:text-white\n                hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white\n                disabled:hover:yt-blue-solid`;\n\n        case 'danger':\n            return `yt-red-solid border-red\n                focus:bg-red focus:text-white focus:yt-focus-red\n                active:bg-red-dark active:text-white \n                hover:bg-red-light hover:text-white\n                hover:focus:bg-red-light hover:focus:text-white\n                disabled:hover:yt-red-solid`;\n\n        case 'ghost':\n            return `yt-blue-inverted\n                focus:bg-transparent focus:text-blue focus:yt-focus\n                active:bg-blue-lightest active:border-blue active:text-blue-dark \n                hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light\n                hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light\n                disabled:hover:yt-blue-inverted`;\n\n        case 'discrete': {\n            if (icon) {\n                return `bg-transparent text-black border-transparent\n                    focus:text-black focus:yt-focus\n                    active:text-black\n                    hover:text-grey-darkest\n                    hover:focus:text-grey-darkest\n                    disabled:hover:yt-transparent`;\n            }\n\n            return `yt-transparent border-transparent\n                focus:text-blue focus:yt-focus\n                active:text-blue-dark\n                hover:text-blue-light\n                hover:focus:text-blue-light\n                disabled:hover:yt-transparent`;\n        }\n\n        default:\n            return `yt-grey-solid border-grey\n                focus:bg-grey focus:yt-focus\n                active:bg-grey-dark active:text-black\n                hover:bg-grey-light hover:text-grey-darkest\n                hover:focus:bg-grey-light hover:focus:text-grey-darkest\n                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, popover, tooltip, ...otherProps } = props;\n\n    let button = <ButtonPrimitive.Button {...otherProps} className={className} ref={ref} />;\n\n    if (hanger) {\n        button = (\n            <Hanger {...hanger.props}>\n                <Hanger.Anchor>{button}</Hanger.Anchor>\n                {hanger.props.children}\n            </Hanger>\n        );\n    }\n\n    if (dialog) {\n        button = (\n            <Dialog {...dialog.props}>\n                <Dialog.Trigger>{button}</Dialog.Trigger>\n                {dialog.props.children}\n            </Dialog>\n        );\n    }\n\n    if (popover) {\n        button = (\n            <Popover {...popover.props}>\n                <Popover.Trigger>{button}</Popover.Trigger>\n                {popover.props.children}\n            </Popover>\n        );\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","popover","tooltip","otherProps","button","React","ButtonPrimitive","Hanger","Anchor","children","Dialog","Trigger","Popover","Tooltip","title"],"mappings":";;;;;;;;;IAQaA,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC5B,SAAO,6IAAP;AACH;IAEYC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAgCC,IAAhC;MAAgCA;AAAAA,IAAAA,OAAO;;;AACvE,UAAQD,KAAR;AACI,SAAK,SAAL;AACI;;AAOJ,SAAK,QAAL;AACI;;AAOJ,SAAK,OAAL;AACI;;AAOJ,SAAK,UAAL;AAAiB;AACb,YAAIC,IAAJ,EAAU;AACN;AAMH;;AAED;AAMH;;AAED;AACI;AA5CR;AAmDH;IAEYC,YAAY,GAAG,SAAfA,YAAe,CACxBC,KADwB,EAExBC,SAFwB,EAGxBC,GAHwB;AAKxB,MAAQC,MAAR,GAA4DH,KAA5D,CAAQG,MAAR;AAAA,MAAgBC,MAAhB,GAA4DJ,KAA5D,CAAgBI,MAAhB;AAAA,MAAwBC,OAAxB,GAA4DL,KAA5D,CAAwBK,OAAxB;AAAA,MAAiCC,OAAjC,GAA4DN,KAA5D,CAAiCM,OAAjC;AAAA,MAA6CC,UAA7C,iCAA4DP,KAA5D;;AAEA,MAAIQ,MAAM,GAAGC,4BAAA,CAACC,MAAD,oBAA4BH;AAAYN,IAAAA,SAAS,EAAEA;AAAWC,IAAAA,GAAG,EAAEA;IAAnE,CAAb;;AAEA,MAAIE,MAAJ,EAAY;AACRI,IAAAA,MAAM,GACFC,4BAAA,CAACE,MAAD,oBAAYP,MAAM,CAACJ,MAAnB,EACIS,4BAAA,CAACE,MAAM,CAACC,MAAR,MAAA,EAAgBJ,MAAhB,CADJ,EAEKJ,MAAM,CAACJ,KAAP,CAAaa,QAFlB,CADJ;AAMH;;AAED,MAAIV,MAAJ,EAAY;AACRK,IAAAA,MAAM,GACFC,4BAAA,CAACK,MAAD,oBAAYX,MAAM,CAACH,MAAnB,EACIS,4BAAA,CAACK,MAAM,CAACC,OAAR,MAAA,EAAiBP,MAAjB,CADJ,EAEKL,MAAM,CAACH,KAAP,CAAaa,QAFlB,CADJ;AAMH;;AAED,MAAIR,OAAJ,EAAa;AACTG,IAAAA,MAAM,GACFC,4BAAA,CAACO,OAAD,oBAAaX,OAAO,CAACL,MAArB,EACIS,4BAAA,CAACO,OAAO,CAACD,OAAT,MAAA,EAAkBP,MAAlB,CADJ,EAEKH,OAAO,CAACL,KAAR,CAAca,QAFnB,CADJ;AAMH;;AAED,MAAIP,OAAJ,EAAa;AACTE,IAAAA,MAAM,GAAGC,4BAAA,CAACQ,OAAD;AAASC,MAAAA,KAAK,EAAEZ;KAAhB,EAA0BE,MAA1B,CAAT;AACH;;AAED,SAAOA,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';\nimport { Hanger } from '../Hanger/Hanger';\nimport { Menu } from '../Menu/Menu';\nimport { Dialog } from '../Dialog/Dialog';\nimport { Popover } from '../Popover/Popover';\n\nexport const getButtonClasses = () => {\n    return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n    switch (value) {\n        case 'primary':\n            return `yt-blue-solid border-blue\n                focus:bg-blue focus:text-white focus:yt-focus\n                active:bg-blue-dark active:text-white \n                hover:bg-blue-light hover:border-blue-light hover:text-white\n                hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white\n                disabled:hover:yt-blue-solid`;\n\n        case 'danger':\n            return `yt-red-solid border-red\n                focus:bg-red focus:text-white focus:yt-focus-red\n                active:bg-red-dark active:text-white \n                hover:bg-red-light hover:text-white\n                hover:focus:bg-red-light hover:focus:text-white\n                disabled:hover:yt-red-solid`;\n\n        case 'ghost':\n            return `yt-blue-inverted\n                focus:bg-transparent focus:text-blue focus:yt-focus\n                active:bg-blue-lightest active:border-blue active:text-blue-dark \n                hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light\n                hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light\n                disabled:hover:yt-blue-inverted`;\n\n        case 'discrete': {\n            if (icon) {\n                return `bg-transparent text-black border-transparent\n                    focus:text-black focus:yt-focus\n                    active:text-black\n                    hover:text-grey-darkest\n                    hover:focus:text-grey-darkest\n                    disabled:hover:yt-transparent`;\n            }\n\n            return `yt-transparent border-transparent\n                focus:text-blue focus:yt-focus\n                active:text-blue-dark\n                hover:text-blue-light\n                hover:focus:text-blue-light\n                disabled:hover:yt-transparent`;\n        }\n\n        default:\n            return `yt-grey-solid border-grey\n                focus:bg-grey focus:yt-focus\n                active:bg-grey-dark active:text-black\n                hover:bg-grey-light hover:text-grey-darkest\n                hover:focus:bg-grey-light hover:focus:text-grey-darkest\n                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 (hanger) {\n        button = (\n            <Hanger {...hanger.props}>\n                <Hanger.Anchor>{button}</Hanger.Anchor>\n                {hanger.props.children}\n            </Hanger>\n        );\n    }\n\n    if (menu) {\n        button = (\n            <Menu {...menu.props}>\n                <Menu.Trigger>{button}</Menu.Trigger>\n                {menu.props.children}\n            </Menu>\n        );\n    }\n\n    if (dialog) {\n        button = (\n            <Dialog {...dialog.props}>\n                <Dialog.Trigger>{button}</Dialog.Trigger>\n                {dialog.props.children}\n            </Dialog>\n        );\n    }\n\n    if (popover) {\n        button = (\n            <Popover {...popover.props}>\n                <Popover.Trigger>{button}</Popover.Trigger>\n                {popover.props.children}\n            </Popover>\n        );\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","Hanger","Anchor","children","Menu","Trigger","Dialog","Popover","Tooltip","title"],"mappings":";;;;;;;;;;IASaA,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC5B,SAAO,6IAAP;AACH;IAEYC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAgCC,IAAhC;MAAgCA;AAAAA,IAAAA,OAAO;;;AACvE,UAAQD,KAAR;AACI,SAAK,SAAL;AACI;;AAOJ,SAAK,QAAL;AACI;;AAOJ,SAAK,OAAL;AACI;;AAOJ,SAAK,UAAL;AAAiB;AACb,YAAIC,IAAJ,EAAU;AACN;AAMH;;AAED;AAMH;;AAED;AACI;AA5CR;AAmDH;IAEYC,YAAY,GAAG,SAAfA,YAAe,CACxBC,KADwB,EAExBC,SAFwB,EAGxBC,GAHwB;AAKxB,MAAQC,MAAR,GAAkEH,KAAlE,CAAQG,MAAR;AAAA,MAAgBC,MAAhB,GAAkEJ,KAAlE,CAAgBI,MAAhB;AAAA,MAAwBC,IAAxB,GAAkEL,KAAlE,CAAwBK,IAAxB;AAAA,MAA8BC,OAA9B,GAAkEN,KAAlE,CAA8BM,OAA9B;AAAA,MAAuCC,OAAvC,GAAkEP,KAAlE,CAAuCO,OAAvC;AAAA,MAAmDC,UAAnD,iCAAkER,KAAlE;;AAEA,MAAIS,MAAM,GAAGC,4BAAA,CAACC,MAAD,oBAA4BH;AAAYP,IAAAA,SAAS,EAAEA;AAAWC,IAAAA,GAAG,EAAEA;IAAnE,CAAb;;AAEA,MAAIE,MAAJ,EAAY;AACRK,IAAAA,MAAM,GACFC,4BAAA,CAACE,MAAD,oBAAYR,MAAM,CAACJ,MAAnB,EACIU,4BAAA,CAACE,MAAM,CAACC,MAAR,MAAA,EAAgBJ,MAAhB,CADJ,EAEKL,MAAM,CAACJ,KAAP,CAAac,QAFlB,CADJ;AAMH;;AAED,MAAIT,IAAJ,EAAU;AACNI,IAAAA,MAAM,GACFC,4BAAA,CAACK,IAAD,oBAAUV,IAAI,CAACL,MAAf,EACIU,4BAAA,CAACK,IAAI,CAACC,OAAN,MAAA,EAAeP,MAAf,CADJ,EAEKJ,IAAI,CAACL,KAAL,CAAWc,QAFhB,CADJ;AAMH;;AAED,MAAIX,MAAJ,EAAY;AACRM,IAAAA,MAAM,GACFC,4BAAA,CAACO,MAAD,oBAAYd,MAAM,CAACH,MAAnB,EACIU,4BAAA,CAACO,MAAM,CAACD,OAAR,MAAA,EAAiBP,MAAjB,CADJ,EAEKN,MAAM,CAACH,KAAP,CAAac,QAFlB,CADJ;AAMH;;AAED,MAAIR,OAAJ,EAAa;AACTG,IAAAA,MAAM,GACFC,4BAAA,CAACQ,OAAD,oBAAaZ,OAAO,CAACN,MAArB,EACIU,4BAAA,CAACQ,OAAO,CAACF,OAAT,MAAA,EAAkBP,MAAlB,CADJ,EAEKH,OAAO,CAACN,KAAR,CAAcc,QAFnB,CADJ;AAMH;;AAED,MAAIP,OAAJ,EAAa;AACTE,IAAAA,MAAM,GAAGC,4BAAA,CAACS,OAAD;AAASC,MAAAA,KAAK,EAAEb;KAAhB,EAA0BE,MAA1B,CAAT;AACH;;AAED,SAAOA,MAAP;AACH;;;;"}

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

@@ -2,6 +2,7 @@ import { createContext, useContext } from 'react';
 
 /* eslint-disable @typescript-eslint/no-empty-function */
 var DialogContext = /*#__PURE__*/createContext({
+  closeOnEscape: true,
   close: function close() {},
   draggable: false,
   drawer: undefined,
@@ -12,6 +13,7 @@ var DialogContext = /*#__PURE__*/createContext({
   onClose: function onClose() {},
   props: {},
   ref: null,
+  showCloseButton: true,
   size: 'sm'
 });
 var useCurrentDialog = function useCurrentDialog() {

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

@@ -1 +1 @@
-{"version":3,"file":"Context.js","sources":["../../../../src/components/Dialog/Context.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport * as React from 'react';\nimport { DialogSize } from './types';\n\nexport type DialogContext = {\n    draggable: boolean;\n    drawer?: {\n        open: boolean;\n        toggle: () => void;\n    };\n    elements: {\n        drawer?: React.ReactNode;\n        extra?: React.ReactNode;\n    };\n    close: () => void;\n    onClose?: () => void;\n    props: {};\n    ref: React.Ref<HTMLElement>;\n    size: DialogSize;\n};\n\nexport const DialogContext = React.createContext<DialogContext>({\n    close: () => {},\n    draggable: false,\n    drawer: undefined,\n    elements: {\n        drawer: undefined,\n        extra: undefined,\n    },\n    onClose: () => {},\n    props: {},\n    ref: null,\n    size: 'sm',\n});\n\nexport const useCurrentDialog = () => {\n    return React.useContext(DialogContext);\n};\n"],"names":["DialogContext","React","close","draggable","drawer","undefined","elements","extra","onClose","props","ref","size","useCurrentDialog"],"mappings":";;AAAA;IAqBaA,aAAa,gBAAGC,aAAA,CAAmC;AAC5DC,EAAAA,KAAK,EAAE,mBADqD;AAE5DC,EAAAA,SAAS,EAAE,KAFiD;AAG5DC,EAAAA,MAAM,EAAEC,SAHoD;AAI5DC,EAAAA,QAAQ,EAAE;AACNF,IAAAA,MAAM,EAAEC,SADF;AAENE,IAAAA,KAAK,EAAEF;AAFD,GAJkD;AAQ5DG,EAAAA,OAAO,EAAE,qBARmD;AAS5DC,EAAAA,KAAK,EAAE,EATqD;AAU5DC,EAAAA,GAAG,EAAE,IAVuD;AAW5DC,EAAAA,IAAI,EAAE;AAXsD,CAAnC;IAchBC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC5B,SAAOX,UAAA,CAAiBD,aAAjB,CAAP;AACH;;;;"}
+{"version":3,"file":"Context.js","sources":["../../../../src/components/Dialog/Context.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport * as React from 'react';\nimport { DialogSize } from './types';\n\nexport type DialogContext = {\n    closeOnEscape: boolean;\n    draggable: boolean;\n    drawer?: {\n        open: boolean;\n        toggle: () => void;\n    };\n    elements: {\n        drawer?: React.ReactNode;\n        extra?: React.ReactNode;\n    };\n    close: () => void;\n    onClose?: () => void;\n    props: {};\n    ref: React.Ref<HTMLElement>;\n    showCloseButton: boolean;\n    size: DialogSize;\n};\n\nexport const DialogContext = React.createContext<DialogContext>({\n    closeOnEscape: true,\n    close: () => {},\n    draggable: false,\n    drawer: undefined,\n    elements: {\n        drawer: undefined,\n        extra: undefined,\n    },\n    onClose: () => {},\n    props: {},\n    ref: null,\n    showCloseButton: true,\n    size: 'sm',\n});\n\nexport const useCurrentDialog = () => {\n    return React.useContext(DialogContext);\n};\n"],"names":["DialogContext","React","closeOnEscape","close","draggable","drawer","undefined","elements","extra","onClose","props","ref","showCloseButton","size","useCurrentDialog"],"mappings":";;AAAA;IAuBaA,aAAa,gBAAGC,aAAA,CAAmC;AAC5DC,EAAAA,aAAa,EAAE,IAD6C;AAE5DC,EAAAA,KAAK,EAAE,mBAFqD;AAG5DC,EAAAA,SAAS,EAAE,KAHiD;AAI5DC,EAAAA,MAAM,EAAEC,SAJoD;AAK5DC,EAAAA,QAAQ,EAAE;AACNF,IAAAA,MAAM,EAAEC,SADF;AAENE,IAAAA,KAAK,EAAEF;AAFD,GALkD;AAS5DG,EAAAA,OAAO,EAAE,qBATmD;AAU5DC,EAAAA,KAAK,EAAE,EAVqD;AAW5DC,EAAAA,GAAG,EAAE,IAXuD;AAY5DC,EAAAA,eAAe,EAAE,IAZ2C;AAa5DC,EAAAA,IAAI,EAAE;AAbsD,CAAnC;IAgBhBC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC5B,SAAOb,UAAA,CAAiBD,aAAjB,CAAP;AACH;;;;"}

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

@@ -7,7 +7,7 @@ import { Content, Title, Footer, Close } from './components/Content.js';
 import { Drawer } from './components/Drawer.js';
 import { Extra } from './components/Extra.js';
 
-var _excluded = ["children", "draggable", "onClose", "open", "size"];
+var _excluded = ["children", "closeOnEscape", "draggable", "onClose", "open", "showCloseButton", "size"];
 
 var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
   return useMemo(function () {
@@ -29,10 +29,14 @@ var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
 
 var Dialog = /*#__PURE__*/forwardRef(function (props, ref) {
   var initialChildren = props.children,
+      _props$closeOnEscape = props.closeOnEscape,
+      closeOnEscape = _props$closeOnEscape === void 0 ? true : _props$closeOnEscape,
       _props$draggable = props.draggable,
       draggable = _props$draggable === void 0 ? false : _props$draggable,
       onClose = props.onClose,
       defaultOpen = props.open,
+      _props$showCloseButto = props.showCloseButton,
+      showCloseButton = _props$showCloseButto === void 0 ? true : _props$showCloseButto,
       _props$size = props.size,
       size = _props$size === void 0 ? 'sm' : _props$size,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
@@ -55,6 +59,7 @@ var Dialog = /*#__PURE__*/forwardRef(function (props, ref) {
       close: function close() {
         return setOpen(false);
       },
+      closeOnEscape: closeOnEscape,
       draggable: draggable,
       drawer: {
         open: drawerOpen,
@@ -70,10 +75,11 @@ var Dialog = /*#__PURE__*/forwardRef(function (props, ref) {
       },
       onClose: onClose,
       props: otherProps,
+      showCloseButton: showCloseButton,
       size: size,
       ref: ref
     };
-  }, [open, drawerOpen, drawer, extra, otherProps]);
+  }, [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
   return createElement(DialogContext.Provider, {
     value: context
   }, createElement(Root, {

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport './Dialog.css';\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\nimport {\n    Content,\n    Title,\n    Footer,\n    Close,\n    DialogContentProps,\n    DialogTitleProps,\n    DialogFooterProps,\n    DialogCloseProps,\n} from './components/Content';\nimport { DialogDrawerProps, Drawer } from './components/Drawer';\nimport { DialogExtraProps, Extra } from './components/Extra';\nimport { DialogContext } from './Context';\nimport { DialogSize } from './types';\n\nexport { DialogContentProps, DialogTitleProps, DialogFooterProps, DialogCloseProps };\n\nexport type DialogTexts = {\n    /**\n     * Aria-label for close icon button in dialog.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    close: string;\n    drag: string;\n};\n\nexport type DialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** Allows dragging the dialog around the screen (window constrained) */\n    draggable?: boolean;\n    /** Handler called when dialog closes by user interaction */\n    onClose?: () => void;\n    /** Set whether the dialog is open by default or not, use when not providing a trigger  */\n    open?: boolean;\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\n    size?: DialogSize;\n};\n\nconst useSeparatedChildren = initialChildren => {\n    return React.useMemo(() => {\n        const children: any[] = [];\n        let drawer;\n        let extra;\n\n        React.Children.forEach(initialChildren, (child: any) => {\n            if (child.type.displayName === 'Drawer') {\n                drawer = child;\n            } else if (child.type.displayName === 'Extra') {\n                extra = child;\n            } else {\n                children.push(child);\n            }\n        });\n\n        return [children, drawer, extra];\n    }, [initialChildren]);\n};\n\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps>;\n    Content: React.ForwardRefExoticComponent<DialogContentProps>;\n    Title: React.ForwardRefExoticComponent<DialogTitleProps>;\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps>;\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps>;\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps>;\n    Close: React.ForwardRefExoticComponent<DialogCloseProps>;\n};\n\nexport const Dialog = React.forwardRef((props: DialogProps, ref: React.Ref<HTMLElement>): JSX.Element => {\n    const { children: initialChildren, draggable = false, onClose, open: defaultOpen, size = 'sm', ...otherProps } = props;\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\n\n    const [open, setOpen] = React.useState(defaultOpen);\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\n\n    const context = React.useMemo(\n        () => ({\n            close: () => setOpen(false),\n            draggable,\n            drawer: {\n                open: drawerOpen,\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\n            },\n            elements: {\n                drawer,\n                extra,\n            },\n            onClose,\n            props: otherProps,\n            size,\n            ref,\n        }),\n        [open, drawerOpen, drawer, extra, otherProps]\n    );\n\n    return (\n        <DialogContext.Provider value={context}>\n            <DialogPrimitive.Root children={children} open={open} onOpenChange={setOpen} />\n        </DialogContext.Provider>\n    );\n}) as ForwardedDialogWithStatics;\n\nDialog.Trigger = Trigger;\nDialog.Content = Content;\nDialog.Title = Title;\nDialog.Footer = Footer;\nDialog.Extra = Extra;\nDialog.Drawer = Drawer;\nDialog.Close = Close;\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","forEach","child","type","displayName","push","Dialog","props","ref","draggable","onClose","defaultOpen","open","size","otherProps","setOpen","drawerOpen","setDrawerOpen","context","close","toggle","isDrawerOpen","elements","DialogContext","Provider","value","DialogPrimitive","onOpenChange","Trigger","Content","Title","Footer","Extra","Drawer","Close"],"mappings":";;;;;;;;;;;AA0CA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,CAAAC,eAAe;AACxC,SAAOC,OAAA,CAAc;AACjB,QAAMC,QAAQ,GAAU,EAAxB;AACA,QAAIC,MAAJ;AACA,QAAIC,KAAJ;AAEAH,IAAAA,QAAA,CAAeI,OAAf,CAAuBL,eAAvB,EAAwC,UAACM,KAAD;AACpC,UAAIA,KAAK,CAACC,IAAN,CAAWC,WAAX,KAA2B,QAA/B,EAAyC;AACrCL,QAAAA,MAAM,GAAGG,KAAT;AACH,OAFD,MAEO,IAAIA,KAAK,CAACC,IAAN,CAAWC,WAAX,KAA2B,OAA/B,EAAwC;AAC3CJ,QAAAA,KAAK,GAAGE,KAAR;AACH,OAFM,MAEA;AACHJ,QAAAA,QAAQ,CAACO,IAAT,CAAcH,KAAd;AACH;AACJ,KARD;AAUA,WAAO,CAACJ,QAAD,EAAWC,MAAX,EAAmBC,KAAnB,CAAP;AACH,GAhBM,EAgBJ,CAACJ,eAAD,CAhBI,CAAP;AAiBH,CAlBD;;IA8BaU,MAAM,gBAAGT,UAAA,CAAiB,UAACU,KAAD,EAAqBC,GAArB;AACnC,MAAkBZ,eAAlB,GAAiHW,KAAjH,CAAQT,QAAR;AAAA,yBAAiHS,KAAjH,CAAmCE,SAAnC;AAAA,MAAmCA,SAAnC,iCAA+C,KAA/C;AAAA,MAAsDC,OAAtD,GAAiHH,KAAjH,CAAsDG,OAAtD;AAAA,MAAqEC,WAArE,GAAiHJ,KAAjH,CAA+DK,IAA/D;AAAA,oBAAiHL,KAAjH,CAAkFM,IAAlF;AAAA,MAAkFA,IAAlF,4BAAyF,IAAzF;AAAA,MAAkGC,UAAlG,iCAAiHP,KAAjH;;AACA,8BAAkCZ,oBAAoB,CAACC,eAAD,CAAtD;AAAA,MAAOE,QAAP;AAAA,MAAiBC,MAAjB;AAAA,MAAyBC,KAAzB;;AAEA,wBAAwBH,QAAA,CAAec,WAAf,CAAxB;AAAA,MAAOC,IAAP;AAAA,MAAaG,OAAb;;AACA,yBAAoClB,QAAA,CAAe,KAAf,CAApC;AAAA,MAAOmB,UAAP;AAAA,MAAmBC,aAAnB;;AAEA,MAAMC,OAAO,GAAGrB,OAAA,CACZ;AAAA,WAAO;AACHsB,MAAAA,KAAK,EAAE;AAAA,eAAMJ,OAAO,CAAC,KAAD,CAAb;AAAA,OADJ;AAEHN,MAAAA,SAAS,EAATA,SAFG;AAGHV,MAAAA,MAAM,EAAE;AACJa,QAAAA,IAAI,EAAEI,UADF;AAEJI,QAAAA,MAAM,EAAE;AAAA,iBAAMH,aAAa,CAAC,UAAAI,YAAY;AAAA,mBAAI,CAACA,YAAL;AAAA,WAAb,CAAnB;AAAA;AAFJ,OAHL;AAOHC,MAAAA,QAAQ,EAAE;AACNvB,QAAAA,MAAM,EAANA,MADM;AAENC,QAAAA,KAAK,EAALA;AAFM,OAPP;AAWHU,MAAAA,OAAO,EAAPA,OAXG;AAYHH,MAAAA,KAAK,EAAEO,UAZJ;AAaHD,MAAAA,IAAI,EAAJA,IAbG;AAcHL,MAAAA,GAAG,EAAHA;AAdG,KAAP;AAAA,GADY,EAiBZ,CAACI,IAAD,EAAOI,UAAP,EAAmBjB,MAAnB,EAA2BC,KAA3B,EAAkCc,UAAlC,CAjBY,CAAhB;AAoBA,SACIjB,aAAA,CAAC0B,aAAa,CAACC,QAAf;AAAwBC,IAAAA,KAAK,EAAEP;GAA/B,EACIrB,aAAA,CAAC6B,IAAD;AAAsB5B,IAAAA,QAAQ,EAAEA;AAAUc,IAAAA,IAAI,EAAEA;AAAMe,IAAAA,YAAY,EAAEZ;GAApE,CADJ,CADJ;AAKH,CAhCqB;AAkCtBT,MAAM,CAACsB,OAAP,GAAiBA,OAAjB;AACAtB,MAAM,CAACuB,OAAP,GAAiBA,OAAjB;AACAvB,MAAM,CAACwB,KAAP,GAAeA,KAAf;AACAxB,MAAM,CAACyB,MAAP,GAAgBA,MAAhB;AACAzB,MAAM,CAAC0B,KAAP,GAAeA,KAAf;AACA1B,MAAM,CAAC2B,MAAP,GAAgBA,MAAhB;AACA3B,MAAM,CAAC4B,KAAP,GAAeA,KAAf;;;;"}
+{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport './Dialog.css';\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\nimport {\n    Content,\n    Title,\n    Footer,\n    Close,\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogContentDrawerRenderProps,\n    DialogTitleProps,\n    DialogFooterProps,\n    DialogCloseProps,\n} from './components/Content';\nimport { DialogDrawerProps, Drawer } from './components/Drawer';\nimport { DialogExtraProps, Extra } from './components/Extra';\nimport { DialogContext } from './Context';\nimport { DialogSize } from './types';\n\nexport {\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogContentDrawerRenderProps,\n    DialogTitleProps,\n    DialogFooterProps,\n    DialogCloseProps,\n    DialogSize,\n};\n\nexport type DialogTexts = {\n    /**\n     * Aria-label for close icon button in dialog.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    close: string;\n    drag: string;\n};\n\nexport type DialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** When `true`, pressing escape will close the dialog */\n    closeOnEscape?: boolean;\n    /** Allows dragging the dialog around the screen (window constrained) */\n    draggable?: boolean;\n    /** Handler called when dialog closes by user interaction */\n    onClose?: () => void;\n    /** Set whether the dialog is open by default or not, use when not providing a trigger  */\n    open?: boolean;\n    /** Shows the close icon button of the dialog */\n    showCloseButton?: boolean;\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\n    size?: DialogSize;\n};\n\nconst useSeparatedChildren = initialChildren => {\n    return React.useMemo(() => {\n        const children: any[] = [];\n        let drawer;\n        let extra;\n\n        React.Children.forEach(initialChildren, (child: any) => {\n            if (child.type.displayName === 'Drawer') {\n                drawer = child;\n            } else if (child.type.displayName === 'Extra') {\n                extra = child;\n            } else {\n                children.push(child);\n            }\n        });\n\n        return [children, drawer, extra];\n    }, [initialChildren]);\n};\n\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps>;\n    Content: React.ForwardRefExoticComponent<DialogContentProps>;\n    Title: React.ForwardRefExoticComponent<DialogTitleProps>;\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps>;\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps>;\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps>;\n    Close: React.ForwardRefExoticComponent<DialogCloseProps>;\n};\n\nexport const Dialog = React.forwardRef((props: DialogProps, ref: React.Ref<HTMLElement>): JSX.Element => {\n    const {\n        children: initialChildren,\n        closeOnEscape = true,\n        draggable = false,\n        onClose,\n        open: defaultOpen,\n        showCloseButton = true,\n        size = 'sm',\n        ...otherProps\n    } = props;\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\n\n    const [open, setOpen] = React.useState(defaultOpen);\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\n\n    const context = React.useMemo(\n        () => ({\n            close: () => setOpen(false),\n            closeOnEscape,\n            draggable,\n            drawer: {\n                open: drawerOpen,\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\n            },\n            elements: {\n                drawer,\n                extra,\n            },\n            onClose,\n            props: otherProps,\n            showCloseButton,\n            size,\n            ref,\n        }),\n        [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\n    );\n\n    return (\n        <DialogContext.Provider value={context}>\n            <DialogPrimitive.Root children={children} open={open} onOpenChange={setOpen} />\n        </DialogContext.Provider>\n    );\n}) as ForwardedDialogWithStatics;\n\nDialog.Trigger = Trigger;\nDialog.Content = Content;\nDialog.Title = Title;\nDialog.Footer = Footer;\nDialog.Extra = Extra;\nDialog.Drawer = Drawer;\nDialog.Close = Close;\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","forEach","child","type","displayName","push","Dialog","props","ref","closeOnEscape","draggable","onClose","defaultOpen","open","showCloseButton","size","otherProps","setOpen","drawerOpen","setDrawerOpen","context","close","toggle","isDrawerOpen","elements","DialogContext","Provider","value","DialogPrimitive","onOpenChange","Trigger","Content","Title","Footer","Extra","Drawer","Close"],"mappings":"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"}

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

@@ -3,25 +3,26 @@ import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { Backdrop } from '../../Backdrop/Backdrop.js';
 import { useLocalization } from '../../Provider/Provider.js';
+import { useCurrentMenu } from '../../Menu/Context.js';
+import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
 import { Title as Title$1, Close as Close$1, Portal, Overlay, Content as Content$1 } from '@radix-ui/react-dialog';
 import { useCurrentDialog } from '../Context.js';
-import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
 import { useDraggable } from '../../../utils/hooks/useDraggable.js';
-import { useCurrentMenu } from '../../Menu/Context.js';
-import { Group } from '../../Group/Group.js';
 import { IconButton } from '../../IconButton/IconButton.js';
 
 var Title = /*#__PURE__*/forwardRef(function DialogTitle(props, ref) {
+  var className = cn('text-center', props.className);
   return createElement(Title$1, Object.assign({}, props, {
-    className: "text-center",
+    className: className,
     ref: ref
   }));
 });
 var Footer = /*#__PURE__*/forwardRef(function DialogFooter(props, ref) {
+  var className = cn('mt-8 flex justify-end', props.className);
   return createElement("div", Object.assign({}, props, {
-    className: "mt-8 flex justify-end",
+    className: className,
     ref: ref
-  }), createElement(Group, null, props.children));
+  }), props.children);
 });
 var Close = /*#__PURE__*/forwardRef(function DialogClose(props, ref) {
   var dialog = useCurrentDialog();
@@ -63,7 +64,16 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
   });
   var containerClassName = cn('bg-white p-6 rounded relative z-[999]', 'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]', {
     'rounded-b-none': !!dialog.elements.extra
-  }, props.className); // the chosen behaviour in taco is that outside clicks do not close the dialog
+  }, props.className);
+
+  var handleEscapeKeyDown = function handleEscapeKeyDown(event) {
+    if (!dialog.closeOnEscape) {
+      event.preventDefault();
+    } else if (dialog.onClose) {
+      dialog.onClose();
+    }
+  }; // the chosen behaviour in taco is that outside clicks do not close the dialog
+
 
   var handleInteractOutside = function handleInteractOutside(event) {
     return event.preventDefault();
@@ -84,7 +94,7 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
     asChild: true
   }, createElement(Backdrop, null, createElement(Content$1, Object.assign({}, props, {
     className: className,
-    onEscapeKeyDown: dialog.onClose,
+    onEscapeKeyDown: handleEscapeKeyDown,
     onInteractOutside: handleInteractOutside,
     onCloseAutoFocus: handleCloseAutoFocus,
     ref: ref,
@@ -98,7 +108,7 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
   }, output, dialog.draggable && createElement("div", Object.assign({}, dragHandleProps, {
     "aria-label": texts.dialog.drag,
     className: "yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center"
-  })), createElement(Close$1, {
+  })), dialog.showCloseButton ? createElement(Close$1, {
     asChild: true,
     onClick: dialog.onClose
   }, createElement(IconButton, {
@@ -106,7 +116,7 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
     "aria-label": texts.dialog.close,
     className: "absolute top-0 right-0 mt-2 mr-2",
     icon: "close"
-  }))), dialog.elements.drawer, dialog.elements.extra))));
+  })) : null), dialog.elements.drawer, dialog.elements.extra))));
 });
 
 export { Close, Content, Footer, Title };

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

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDialog } from '../Context';\nimport { useLocalization } from '../../Provider/Provider';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Group } from '../../Group/Group';\nimport { Backdrop } from '../../Backdrop/Backdrop';\n\nexport type DialogContentRenderProps = {\n    close: () => void;\n    drawer?: {\n        open: boolean;\n        toggle: () => void;\n    };\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    return <DialogPrimitive.Title {...props} className=\"text-center\" ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    return (\n        <div {...props} className=\"mt-8 flex justify-end\" ref={ref}>\n            <Group>{props.children}</Group>\n        </div>\n    );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n\n    return <DialogPrimitive.Close onClick={dialog.onClose} {...props} ref={ref} asChild />;\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible description to be announced when the dialog is opened */\n    'aria-describedby': string;\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogContentRenderProps) => JSX.Element);\n};\nexport const Content = React.forwardRef(function DialogContent(props: DialogContentProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const internalRef = useProxiedRef<HTMLDivElement>(ref);\n    const { position, handleProps: dragHandleProps } = useDraggable(internalRef);\n    const { texts } = useLocalization();\n\n    // if the dialog was opened by a menu, we need to close the menu when the dialog closes\n    // the menu is still open (and mounted) because it is the trigger for the dialog\n    const menu = useCurrentMenu();\n    let handleCloseAutoFocus;\n\n    if (menu) {\n        handleCloseAutoFocus = () => menu.close();\n    }\n\n    const className = cn('bg-white rounded mt-16 mx-auto', {\n        'w-128 text-center justify-center': dialog.size === 'dialog',\n        'w-xs': dialog.size === 'xs',\n        'w-sm': dialog.size === 'sm',\n        'w-md': dialog.size === 'md',\n        'w-lg': dialog.size === 'lg',\n    });\n\n    const containerClassName = cn(\n        'bg-white p-6 rounded relative z-[999]',\n        'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]',\n        {\n            'rounded-b-none': !!dialog.elements.extra,\n        },\n        props.className\n    );\n\n    // the chosen behaviour in taco is that outside clicks do not close the dialog\n    const handleInteractOutside = event => event.preventDefault();\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = props.children({ drawer: dialog.drawer, close: dialog.close });\n    } else {\n        output = props.children;\n    }\n\n    return (\n        <DialogPrimitive.Portal>\n            <DialogPrimitive.Overlay asChild>\n                <Backdrop>\n                    <DialogPrimitive.Content\n                        {...props}\n                        className={className}\n                        onEscapeKeyDown={dialog.onClose}\n                        onInteractOutside={handleInteractOutside}\n                        onCloseAutoFocus={handleCloseAutoFocus}\n                        ref={ref}\n                        style={{\n                            ...props.style,\n                            left: dialog.draggable ? `calc(50% + ${position.x}px)` : undefined,\n                            top: dialog.draggable ? `calc(50% + ${position.y}px)` : undefined,\n                        }}\n                    >\n                        <div className={containerClassName} data-taco=\"dialog\">\n                            {output}\n                            {dialog.draggable && (\n                                <div\n                                    {...dragHandleProps}\n                                    aria-label={texts.dialog.drag}\n                                    className=\"yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center\"\n                                />\n                            )}\n                            <DialogPrimitive.Close asChild onClick={dialog.onClose}>\n                                <IconButton\n                                    appearance=\"discrete\"\n                                    aria-label={texts.dialog.close}\n                                    className=\"absolute top-0 right-0 mt-2 mr-2\"\n                                    icon=\"close\"\n                                />\n                            </DialogPrimitive.Close>\n                        </div>\n                        {dialog.elements.drawer}\n                        {dialog.elements.extra}\n                    </DialogPrimitive.Content>\n                </Backdrop>\n            </DialogPrimitive.Overlay>\n        </DialogPrimitive.Portal>\n    );\n});\n"],"names":["Title","React","DialogTitle","props","ref","DialogPrimitive","className","Footer","DialogFooter","Group","children","Close","DialogClose","dialog","useCurrentDialog","onClick","onClose","asChild","Content","DialogContent","internalRef","useProxiedRef","useDraggable","position","dragHandleProps","handleProps","useLocalization","texts","menu","useCurrentMenu","handleCloseAutoFocus","close","cn","size","containerClassName","elements","extra","handleInteractOutside","event","preventDefault","output","drawer","Backdrop","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus","style","left","draggable","x","undefined","top","y","drag","IconButton","appearance","icon"],"mappings":"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"}
+{"version":3,"file":"Content.js","sources":["../../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDialog } from '../Context';\nimport { useLocalization } from '../../Provider/Provider';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Backdrop } from '../../Backdrop/Backdrop';\n\nexport type DialogContentDrawerRenderProps = {\n    open: boolean;\n    toggle: () => void;\n};\n\nexport type DialogContentRenderProps = {\n    close: () => void;\n    drawer?: DialogContentDrawerRenderProps;\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('text-center', props.className);\n    return <DialogPrimitive.Title {...props} className={className} ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('mt-8 flex justify-end', props.className);\n    return (\n        <div {...props} className={className} ref={ref}>\n            {props.children}\n        </div>\n    );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n\n    return <DialogPrimitive.Close onClick={dialog.onClose} {...props} ref={ref} asChild />;\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the dialog is opened */\n    'aria-label': string;\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogContentRenderProps) => JSX.Element);\n};\nexport const Content = React.forwardRef(function DialogContent(props: DialogContentProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const internalRef = useProxiedRef<HTMLDivElement>(ref);\n    const { position, handleProps: dragHandleProps } = useDraggable(internalRef);\n    const { texts } = useLocalization();\n\n    // if the dialog was opened by a menu, we need to close the menu when the dialog closes\n    // the menu is still open (and mounted) because it is the trigger for the dialog\n    const menu = useCurrentMenu();\n    let handleCloseAutoFocus;\n\n    if (menu) {\n        handleCloseAutoFocus = () => menu.close();\n    }\n\n    const className = cn('bg-white rounded mt-16 mx-auto', {\n        'w-128 text-center justify-center': dialog.size === 'dialog',\n        'w-xs': dialog.size === 'xs',\n        'w-sm': dialog.size === 'sm',\n        'w-md': dialog.size === 'md',\n        'w-lg': dialog.size === 'lg',\n    });\n\n    const containerClassName = cn(\n        'bg-white p-6 rounded relative z-[999]',\n        'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]',\n        {\n            'rounded-b-none': !!dialog.elements.extra,\n        },\n        props.className\n    );\n\n    const handleEscapeKeyDown = event => {\n        if (!dialog.closeOnEscape) {\n            event.preventDefault();\n        } else if (dialog.onClose) {\n            dialog.onClose();\n        }\n    };\n\n    // the chosen behaviour in taco is that outside clicks do not close the dialog\n    const handleInteractOutside = event => event.preventDefault();\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = props.children({ drawer: dialog.drawer, close: dialog.close });\n    } else {\n        output = props.children;\n    }\n\n    return (\n        <DialogPrimitive.Portal>\n            <DialogPrimitive.Overlay asChild>\n                <Backdrop>\n                    <DialogPrimitive.Content\n                        {...props}\n                        className={className}\n                        onEscapeKeyDown={handleEscapeKeyDown}\n                        onInteractOutside={handleInteractOutside}\n                        onCloseAutoFocus={handleCloseAutoFocus}\n                        ref={ref}\n                        style={{\n                            ...props.style,\n                            left: dialog.draggable ? `calc(50% + ${position.x}px)` : undefined,\n                            top: dialog.draggable ? `calc(50% + ${position.y}px)` : undefined,\n                        }}\n                    >\n                        <div className={containerClassName} data-taco=\"dialog\">\n                            {output}\n                            {dialog.draggable && (\n                                <div\n                                    {...dragHandleProps}\n                                    aria-label={texts.dialog.drag}\n                                    className=\"yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center\"\n                                />\n                            )}\n                            {dialog.showCloseButton ? (\n                                <DialogPrimitive.Close asChild onClick={dialog.onClose}>\n                                    <IconButton\n                                        appearance=\"discrete\"\n                                        aria-label={texts.dialog.close}\n                                        className=\"absolute top-0 right-0 mt-2 mr-2\"\n                                        icon=\"close\"\n                                    />\n                                </DialogPrimitive.Close>\n                            ) : null}\n                        </div>\n                        {dialog.elements.drawer}\n                        {dialog.elements.extra}\n                    </DialogPrimitive.Content>\n                </Backdrop>\n            </DialogPrimitive.Overlay>\n        </DialogPrimitive.Portal>\n    );\n});\n"],"names":["Title","React","DialogTitle","props","ref","className","cn","DialogPrimitive","Footer","DialogFooter","children","Close","DialogClose","dialog","useCurrentDialog","onClick","onClose","asChild","Content","DialogContent","internalRef","useProxiedRef","useDraggable","position","dragHandleProps","handleProps","useLocalization","texts","menu","useCurrentMenu","handleCloseAutoFocus","close","size","containerClassName","elements","extra","handleEscapeKeyDown","event","closeOnEscape","preventDefault","handleInteractOutside","output","drawer","Backdrop","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus","style","left","draggable","x","undefined","top","y","drag","showCloseButton","IconButton","appearance","icon"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
 import { motion } from 'framer-motion';
 import { useCurrentDialog } from '../Context.js';
 
@@ -6,8 +7,9 @@ var Drawer = /*#__PURE__*/forwardRef(function DialogDrawer(props, ref) {
   var _dialog$drawer, _dialog$drawer2;
 
   var dialog = useCurrentDialog();
+  var className = cn('absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left', props.className);
   return createElement(motion.div, Object.assign({}, props, {
-    className: "absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left",
+    className: className,
     "data-taco": "dialog-drawer",
     "aria-hidden": !((_dialog$drawer = dialog.drawer) !== null && _dialog$drawer !== void 0 && _dialog$drawer.open),
     variants: {

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../../src/components/Dialog/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport { useCurrentDialog } from '../Context';\n\nexport type DialogDrawerProps = Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'\n>;\n\nexport const Drawer = React.forwardRef(function DialogDrawer(props: DialogDrawerProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n\n    return (\n        <motion.div\n            {...props}\n            className=\"absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left\"\n            data-taco=\"dialog-drawer\"\n            aria-hidden={!dialog.drawer?.open}\n            variants={{\n                visible: {\n                    left: '100%',\n                    display: 'block',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                },\n                hidden: {\n                    left: '0%',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                    transitionEnd: {\n                        display: 'none',\n                    },\n                },\n            }}\n            animate={dialog.drawer?.open ? 'visible' : 'hidden'}\n            ref={ref}\n        />\n    );\n});\n"],"names":["Drawer","React","DialogDrawer","props","ref","dialog","useCurrentDialog","motion","div","className","drawer","open","variants","visible","left","display","transition","ease","duration","hidden","transitionEnd","animate"],"mappings":";;;;IASaA,MAAM,gBAAGC,UAAA,CAAiB,SAASC,YAAT,CAAsBC,KAAtB,EAAgDC,GAAhD;;;AACnC,MAAMC,MAAM,GAAGC,gBAAgB,EAA/B;AAEA,SACIL,aAAA,CAACM,MAAM,CAACC,GAAR,oBACQL;AACJM,IAAAA,SAAS,EAAC;iBACA;mBACG,oBAACJ,MAAM,CAACK,MAAR,2CAAC,eAAeC,IAAhB;AACbC,IAAAA,QAAQ,EAAE;AACNC,MAAAA,OAAO,EAAE;AACLC,QAAAA,IAAI,EAAE,MADD;AAELC,QAAAA,OAAO,EAAE,OAFJ;AAGLC,QAAAA,UAAU,EAAE;AAAEC,UAAAA,IAAI,EAAE,SAAR;AAAmBC,UAAAA,QAAQ,EAAE;AAA7B;AAHP,OADH;AAMNC,MAAAA,MAAM,EAAE;AACJL,QAAAA,IAAI,EAAE,IADF;AAEJE,QAAAA,UAAU,EAAE;AAAEC,UAAAA,IAAI,EAAE,SAAR;AAAmBC,UAAAA,QAAQ,EAAE;AAA7B,SAFR;AAGJE,QAAAA,aAAa,EAAE;AACXL,UAAAA,OAAO,EAAE;AADE;AAHX;AANF;AAcVM,IAAAA,OAAO,EAAE,mBAAAhB,MAAM,CAACK,MAAP,4DAAeC,IAAf,GAAsB,SAAtB,GAAkC;AAC3CP,IAAAA,GAAG,EAAEA;IApBT,CADJ;AAwBH,CA3BqB;;;;"}
+{"version":3,"file":"Drawer.js","sources":["../../../../../src/components/Dialog/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport cn from 'classnames';\nimport { useCurrentDialog } from '../Context';\n\nexport type DialogDrawerProps = Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'\n>;\n\nexport const Drawer = React.forwardRef(function DialogDrawer(props: DialogDrawerProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const className = cn(\n        'absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left',\n        props.className\n    );\n\n    return (\n        <motion.div\n            {...props}\n            className={className}\n            data-taco=\"dialog-drawer\"\n            aria-hidden={!dialog.drawer?.open}\n            variants={{\n                visible: {\n                    left: '100%',\n                    display: 'block',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                },\n                hidden: {\n                    left: '0%',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                    transitionEnd: {\n                        display: 'none',\n                    },\n                },\n            }}\n            animate={dialog.drawer?.open ? 'visible' : 'hidden'}\n            ref={ref}\n        />\n    );\n});\n"],"names":["Drawer","React","DialogDrawer","props","ref","dialog","useCurrentDialog","className","cn","motion","div","drawer","open","variants","visible","left","display","transition","ease","duration","hidden","transitionEnd","animate"],"mappings":";;;;;IAUaA,MAAM,gBAAGC,UAAA,CAAiB,SAASC,YAAT,CAAsBC,KAAtB,EAAgDC,GAAhD;;;AACnC,MAAMC,MAAM,GAAGC,gBAAgB,EAA/B;AACA,MAAMC,SAAS,GAAGC,EAAE,CAChB,wGADgB,EAEhBL,KAAK,CAACI,SAFU,CAApB;AAKA,SACIN,aAAA,CAACQ,MAAM,CAACC,GAAR,oBACQP;AACJI,IAAAA,SAAS,EAAEA;iBACD;mBACG,oBAACF,MAAM,CAACM,MAAR,2CAAC,eAAeC,IAAhB;AACbC,IAAAA,QAAQ,EAAE;AACNC,MAAAA,OAAO,EAAE;AACLC,QAAAA,IAAI,EAAE,MADD;AAELC,QAAAA,OAAO,EAAE,OAFJ;AAGLC,QAAAA,UAAU,EAAE;AAAEC,UAAAA,IAAI,EAAE,SAAR;AAAmBC,UAAAA,QAAQ,EAAE;AAA7B;AAHP,OADH;AAMNC,MAAAA,MAAM,EAAE;AACJL,QAAAA,IAAI,EAAE,IADF;AAEJE,QAAAA,UAAU,EAAE;AAAEC,UAAAA,IAAI,EAAE,SAAR;AAAmBC,UAAAA,QAAQ,EAAE;AAA7B,SAFR;AAGJE,QAAAA,aAAa,EAAE;AACXL,UAAAA,OAAO,EAAE;AADE;AAHX;AANF;AAcVM,IAAAA,OAAO,EAAE,mBAAAjB,MAAM,CAACM,MAAP,4DAAeC,IAAf,GAAsB,SAAtB,GAAkC;AAC3CR,IAAAA,GAAG,EAAEA;IApBT,CADJ;AAwBH,CA/BqB;;;;"}

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

@@ -1,8 +1,10 @@
 import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
 
 var Extra = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = cn('bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left', props.className);
   return createElement("div", Object.assign({}, props, {
-    className: "bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left",
+    className: className,
     "data-taco": "dialog-extra",
     ref: ref
   }));

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

@@ -1 +1 @@
-{"version":3,"file":"Extra.js","sources":["../../../../../src/components/Dialog/components/Extra.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport type DialogExtraProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Extra = React.forwardRef(function (props: DialogExtraProps, ref: React.Ref<HTMLDivElement>) {\n    return (\n        <div\n            {...props}\n            className=\"bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left\"\n            data-taco=\"dialog-extra\"\n            ref={ref}\n        />\n    );\n});\n"],"names":["Extra","React","props","ref","className"],"mappings":";;IAIaA,KAAK,gBAAGC,UAAA,CAAiB,UAAUC,KAAV,EAAmCC,GAAnC;AAClC,SACIF,aAAA,MAAA,oBACQC;AACJE,IAAAA,SAAS,EAAC;iBACA;AACVD,IAAAA,GAAG,EAAEA;IAJT,CADJ;AAQH,CAToB;;;;"}
+{"version":3,"file":"Extra.js","sources":["../../../../../src/components/Dialog/components/Extra.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nexport type DialogExtraProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Extra = React.forwardRef(function (props: DialogExtraProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left',\n        props.className\n    );\n\n    return <div {...props} className={className} data-taco=\"dialog-extra\" ref={ref} />;\n});\n"],"names":["Extra","React","props","ref","className","cn"],"mappings":";;;IAKaA,KAAK,gBAAGC,UAAA,CAAiB,UAAUC,KAAV,EAAmCC,GAAnC;AAClC,MAAMC,SAAS,GAAGC,EAAE,CAChB,6GADgB,EAEhBH,KAAK,CAACE,SAFU,CAApB;AAKA,SAAOH,aAAA,MAAA,oBAASC;AAAOE,IAAAA,SAAS,EAAEA;iBAAqB;AAAeD,IAAAA,GAAG,EAAEA;IAApE,CAAP;AACH,CAPoB;;;;"}

package/dist/esm/components/Menu/Menu.js

@@ -1,6 +1,6 @@
 import { useState, useMemo, createElement } from 'react';
-import { MenuContext } from './Context.js';
 import { Root } from '@radix-ui/react-dropdown-menu';
+import { MenuContext } from './Context.js';
 import { Content } from './components/Content.js';
 import { Item } from './components/Item.js';
 import { Link } from './components/Link.js';

package/dist/esm/components/Menu/components/Content.js

@@ -1,9 +1,9 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
-import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
-import { useCurrentMenu } from '../Context.js';
 import { Content as Content$1 } from '@radix-ui/react-dropdown-menu';
+import { useCurrentMenu } from '../Context.js';
+import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
 
 var _excluded = ["children", "placement"];
 

package/dist/esm/components/Menu/components/Header.js

@@ -1,7 +1,7 @@
 import { createElement } from 'react';
 import cn from 'classnames';
-import { useCurrentMenu } from '../Context.js';
 import { Label } from '@radix-ui/react-dropdown-menu';
+import { useCurrentMenu } from '../Context.js';
 
 var getAppearanceClasses = function getAppearanceClasses(appearance) {
   switch (appearance) {

package/dist/esm/components/Menu/components/Item.js

@@ -2,8 +2,8 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '.
 import { forwardRef, createElement, useEffect } from 'react';
 import cn from 'classnames';
 import { Icon as Icon$1 } from '../../Icon/Icon.js';
-import { useCurrentMenu } from '../Context.js';
 import { Item as Item$1 } from '@radix-ui/react-dropdown-menu';
+import { useCurrentMenu } from '../Context.js';
 
 var _excluded = ["icon", "shortcut"];
 var Icon = function Icon(_ref) {