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

package/dist/components/Accordion/Accordion.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
+export declare type AccordionTriggerProps = React.HTMLAttributes<HTMLElement>;
+export declare type AccordionContentProps = React.HTMLAttributes<HTMLElement>;
+export declare type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {
+    id: string;
+    disabled?: boolean;
+};
 declare type AccordionBaseProps = {
     children: React.ReactNode[];
     /** Change what heading element accordion regions will render */
@@ -27,16 +33,10 @@ export interface AccordionSingleControlledProps extends AccordionBaseProps {
     defaultId?: never;
 }
 export declare type AccordionProps = AccordionUncontrolledProps | AccordionMultipleControlledProps | AccordionSingleControlledProps;
-declare type AccordionItem = React.HTMLAttributes<HTMLDivElement> & {
-    id: string;
-    disabled?: boolean;
-};
-declare type AccordionTrigger = React.HTMLAttributes<HTMLElement>;
-declare type AccordionContent = React.HTMLAttributes<HTMLElement>;
 export declare const Accordion: {
     (props: AccordionProps): JSX.Element;
-    Item: React.FC<AccordionItem>;
-    Trigger: React.ForwardRefExoticComponent<AccordionTrigger & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<AccordionContent & React.RefAttributes<HTMLDivElement>>;
+    Item: (props: AccordionItemProps) => JSX.Element;
+    Trigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
 };
 export {};

package/dist/components/Backdrop/Backdrop.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 export declare type BackdropProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Backdrop: (props: BackdropProps) => JSX.Element;
+export declare const Backdrop: React.ForwardRefExoticComponent<BackdropProps & React.RefAttributes<HTMLDivElement>>;

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';
@@ -13,17 +14,19 @@ export declare type ButtonProps = ButtonPrimitive.ButtonProps & {
      * *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?: React.ReactElement<DialogProps>;
+    dialog?: (props: Partial<DialogProps>) => JSX.Element;
     /** If fluid, button expands to the width of it's container */
     fluid?: boolean;
     /** Hanger component associated with the button. */
-    hanger?: React.ReactElement<HangerProps>;
+    hanger?: (props: Partial<HangerProps>) => JSX.Element;
+    /** Menu component associated with the button. */
+    menu?: (props: Partial<MenuProps>) => JSX.Element;
     /**
      * 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?: React.ReactElement<PopoverProps>;
+    popover?: (props: Partial<PopoverProps>) => JSX.Element;
     /** A tooltip to show when hovering over the button */
     tooltip?: string;
 };
@@ -39,21 +42,19 @@ export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAtt
      * *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?: React.ReactElement<DialogProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    dialog?: ((props: Partial<DialogProps>) => JSX.Element) | undefined;
     /** If fluid, button expands to the width of it's container */
     fluid?: boolean | undefined;
     /** Hanger component associated with the button. */
-    hanger?: React.ReactElement<{
-        children?: React.ReactNode;
-    }, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    hanger?: ((props: Partial<HangerProps>) => JSX.Element) | undefined;
+    /** 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?: React.ReactElement<{
-        children?: React.ReactNode;
-    }, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    popover?: ((props: Partial<PopoverProps>) => JSX.Element) | undefined;
     /** A tooltip to show when hovering over the button */
     tooltip?: string | undefined;
 } & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

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;
@@ -10,10 +11,10 @@ export declare type DialogContext = {
         drawer?: React.ReactNode;
         extra?: React.ReactNode;
     };
-    close: () => void;
     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,22 +16,32 @@ export declare type DialogTexts = {
 };
 export declare type DialogProps = {
     children: React.ReactNode | React.ReactNode[];
+    /** When `true`, pressing escape will close the dialog */
+    closeOnEscape?: boolean;
+    /** Set whether the dialog is open by default or not, use when not providing a trigger  */
+    defaultOpen?: 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  */
+    /** Called when the dialog opens or closes, must be used in conjunction with open  */
+    onChange?: (open: boolean) => void;
+    /** Control the open state of the dialog from outside the component  */
     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;
+    /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */
+    trigger?: JSX.Element;
 };
 export declare type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {
-    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps>;
-    Content: React.ForwardRefExoticComponent<DialogContentProps>;
-    Title: React.ForwardRefExoticComponent<DialogTitleProps>;
-    Footer: React.ForwardRefExoticComponent<DialogFooterProps>;
-    Extra: React.ForwardRefExoticComponent<DialogExtraProps>;
-    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps>;
-    Close: React.ForwardRefExoticComponent<DialogCloseProps>;
+    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+    Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;
+    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 };
 export declare const Dialog: ForwardedDialogWithStatics;

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/Hanger/Hanger.d.ts

@@ -13,7 +13,10 @@ export declare type HangerContentProps = React.HTMLAttributes<HTMLDivElement> &
     /** Set the position of the Hanger relative to its achor. Default value is `bottom` */
     placement?: Placement;
 };
-export declare type HangerProps = React.PropsWithChildren<{}>;
+export declare type HangerProps = React.PropsWithChildren<{
+    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */
+    anchor?: JSX.Element;
+}>;
 export declare type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {
     Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;
     Content: React.ForwardRefExoticComponent<HangerContentProps>;

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ButtonPrimitive from '../../primitives/Button';
 import { IconName } from '../Icon/Icon';
 import { Appearance } from '../../types';
-import { DialogProps, HangerProps, PopoverProps } from '../..';
+import { DialogProps, HangerProps, MenuProps, PopoverProps } from '../..';
 export declare type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {
     /** Appearance will change the style of the button */
     appearance?: Appearance;
@@ -16,6 +16,8 @@ export declare type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'childre
     icon: IconName;
     /** 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
@@ -45,6 +47,8 @@ export declare const IconButton: React.ForwardRefExoticComponent<Pick<ButtonPrim
     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/Menu/Menu.d.ts

@@ -3,9 +3,11 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 export declare type MenuProps = {
     children: React.ReactNode;
     id?: string;
+    /** A trigger to be used for the menu, should not be set if `children` already contains a trigger */
+    trigger?: JSX.Element;
 };
 export declare const Menu: {
-    (props: MenuProps): JSX.Element;
+    (externalProps: MenuProps): JSX.Element;
     Trigger: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLButtonElement>, "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"> & {
         children: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
     } & React.RefAttributes<HTMLButtonElement>>;

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

@@ -10,7 +10,10 @@ export declare type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivEleme
     placement?: Placement;
 };
 export declare type PopoverCloseProps = React.HTMLAttributes<HTMLButtonElement>;
-export declare type PopoverProps = React.PropsWithChildren<{}>;
+export declare type PopoverProps = React.PropsWithChildren<{
+    /** A trigger to be used for the popover, should not be set if `children` already contains a trigger */
+    trigger?: JSX.Element;
+}>;
 export declare type ForwardedPopoverWithStatics = React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLElement>> & {
     Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps>;
     Content: React.ForwardRefExoticComponent<PopoverContentProps>;

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/Accordion/Accordion.js

@@ -6,7 +6,9 @@ import { Icon } from '../Icon/Icon.js';
 
 var _excluded = ["id"],
     _excluded2 = ["id", "defaultId", "onChange", "as"];
-var AccordionContext = /*#__PURE__*/React__default.createContext({});
+var AccordionContext = /*#__PURE__*/React__default.createContext({
+  as: 'h2'
+});
 var StyledTrigger = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var isExpanded = !!props['aria-expanded'];
   var className = cn('w-full inline-flex justify-between items-center align-middle', 'focus:rounded-sm focus:border-blue focus:yt-focus', props.className);
@@ -21,8 +23,7 @@ var Trigger = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var children = props.children;
 
   var _React$useContext = React__default.useContext(AccordionContext),
-      _React$useContext$as = _React$useContext.as,
-      Heading = _React$useContext$as === void 0 ? 'h2' : _React$useContext$as;
+      Heading = _React$useContext.as;
 
   return React__default.createElement(Header, {
     asChild: true
@@ -52,9 +53,15 @@ var Accordion = function Accordion(props) {
   var id = props.id,
       defaultId = props.defaultId,
       onChange = props.onChange,
-      as = props.as,
+      _props$as = props.as,
+      as = _props$as === void 0 ? 'h2' : _props$as,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
 
+  var context = React__default.useMemo(function () {
+    return {
+      as: as
+    };
+  }, [as]);
   var valueProps;
 
   if (defaultId) {
@@ -71,13 +78,11 @@ var Accordion = function Accordion(props) {
   var type = Array.isArray(valueProps.defaultValue) || Array.isArray(valueProps.value) ? 'multiple' : 'single';
   var className = cn('divide-y divide-grey', props.className);
   return React__default.createElement(AccordionContext.Provider, {
-    value: {
-      as: as
-    }
+    value: context
   }, React__default.createElement(Root, Object.assign({}, otherProps, valueProps, {
     "data-taco": "accordion",
-    type: type,
-    className: className
+    className: className,
+    type: type
   })));
 };
 Accordion.Item = Item;

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport * as AccordionPrimitive from '@radix-ui/react-accordion';\nimport { Icon } from '../Icon/Icon';\n\ntype AccordionBaseProps = {\n    children: React.ReactNode[];\n\n    /** Change what heading element accordion regions will render */\n    as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n    /** Additional classes for Accordion root element */\n    className?: string;\n};\n\nexport interface AccordionUncontrolledProps extends AccordionBaseProps {\n    /** Default expanded accordion(s) */\n    defaultId: string | string[];\n\n    id?: never;\n    onChange?: never;\n}\n\nexport interface AccordionMultipleControlledProps extends AccordionBaseProps {\n    /** Expanded accordions */\n    id: string[];\n\n    /** onChange function to receive ids of expanded accordions */\n    onChange: (id: string[]) => void;\n\n    defaultId?: never;\n}\nexport interface AccordionSingleControlledProps extends AccordionBaseProps {\n    /** Expanded accordion */\n    id: string;\n\n    /** onChange function to receive id of expanded accordion */\n    onChange: (id: string) => void;\n\n    defaultId?: never;\n}\n\nexport type AccordionProps = AccordionUncontrolledProps | AccordionMultipleControlledProps | AccordionSingleControlledProps;\n\ntype AccordionItem = React.HTMLAttributes<HTMLDivElement> & {\n    id: string;\n    disabled?: boolean;\n};\ntype AccordionTrigger = React.HTMLAttributes<HTMLElement>;\ntype AccordionContent = React.HTMLAttributes<HTMLElement>;\n\ntype AccordionContext = {\n    as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n};\nconst AccordionContext = React.createContext<AccordionContext>({});\n\nconst StyledTrigger = React.forwardRef((props: AccordionPrimitive.AccordionTriggerProps, ref: React.Ref<HTMLButtonElement>) => {\n    const isExpanded = !!props['aria-expanded'];\n\n    const className = cn(\n        'w-full inline-flex justify-between items-center align-middle',\n        'focus:rounded-sm focus:border-blue focus:yt-focus',\n        props.className\n    );\n\n    return (\n        <button {...props} ref={ref} className={className}>\n            {props.children}\n            <Icon name={isExpanded ? 'chevron-up' : 'chevron-down'} />\n        </button>\n    );\n});\n\nconst Trigger = React.forwardRef((props: AccordionTrigger, ref: React.Ref<HTMLButtonElement>) => {\n    const { children } = props;\n    const { as: Heading = 'h2' } = React.useContext(AccordionContext);\n\n    return (\n        <AccordionPrimitive.Header asChild>\n            <Heading className=\"my-3\">\n                <AccordionPrimitive.Trigger ref={ref} asChild>\n                    <StyledTrigger>{children}</StyledTrigger>\n                </AccordionPrimitive.Trigger>\n            </Heading>\n        </AccordionPrimitive.Header>\n    );\n});\n\nconst Content = React.forwardRef((props: AccordionContent, ref: React.Ref<HTMLDivElement>) => (\n    <AccordionPrimitive.Content {...props} ref={ref} />\n));\n\nconst Item: React.FC<AccordionItem> = props => {\n    const { id, ...otherProps } = props;\n    return <AccordionPrimitive.Item {...otherProps} value={id} />;\n};\n\nexport const Accordion = (props: AccordionProps) => {\n    const { id, defaultId, onChange, as, ...otherProps } = props;\n\n    let valueProps;\n\n    if (defaultId) {\n        valueProps = {\n            defaultValue: defaultId || undefined,\n        };\n    } else {\n        valueProps = {\n            onValueChange: onChange,\n            value: id || undefined,\n        };\n    }\n\n    const type = Array.isArray(valueProps.defaultValue) || Array.isArray(valueProps.value) ? 'multiple' : 'single';\n    const className = cn('divide-y divide-grey', props.className);\n\n    return (\n        <AccordionContext.Provider value={{ as }}>\n            <AccordionPrimitive.Root {...otherProps} {...valueProps} data-taco=\"accordion\" type={type} className={className} />\n        </AccordionContext.Provider>\n    );\n};\n\nAccordion.Item = Item;\nAccordion.Trigger = Trigger;\nAccordion.Content = Content;\n"],"names":["AccordionContext","React","createContext","StyledTrigger","forwardRef","props","ref","isExpanded","className","cn","children","Icon","name","Trigger","useContext","as","Heading","AccordionPrimitive","asChild","Content","Item","id","otherProps","value","Accordion","defaultId","onChange","valueProps","defaultValue","undefined","onValueChange","type","Array","isArray","Provider"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport * as AccordionPrimitive from '@radix-ui/react-accordion';\nimport { Icon } from '../Icon/Icon';\n\ntype AccordionContext = {\n    as: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n};\nconst AccordionContext = React.createContext<AccordionContext>({\n    as: 'h2',\n});\n\nexport type AccordionTriggerProps = React.HTMLAttributes<HTMLElement>;\n\nconst StyledTrigger = React.forwardRef((props: AccordionPrimitive.AccordionTriggerProps, ref: React.Ref<HTMLButtonElement>) => {\n    const isExpanded = !!props['aria-expanded'];\n\n    const className = cn(\n        'w-full inline-flex justify-between items-center align-middle',\n        'focus:rounded-sm focus:border-blue focus:yt-focus',\n        props.className\n    );\n\n    return (\n        <button {...props} ref={ref} className={className}>\n            {props.children}\n            <Icon name={isExpanded ? 'chevron-up' : 'chevron-down'} />\n        </button>\n    );\n});\n\nconst Trigger = React.forwardRef((props: AccordionTriggerProps, ref: React.Ref<HTMLButtonElement>) => {\n    const { children } = props;\n    const { as: Heading } = React.useContext(AccordionContext);\n\n    return (\n        <AccordionPrimitive.Header asChild>\n            <Heading className=\"my-3\">\n                <AccordionPrimitive.Trigger ref={ref} asChild>\n                    <StyledTrigger>{children}</StyledTrigger>\n                </AccordionPrimitive.Trigger>\n            </Heading>\n        </AccordionPrimitive.Header>\n    );\n});\n\nexport type AccordionContentProps = React.HTMLAttributes<HTMLElement>;\nconst Content = React.forwardRef((props: AccordionContentProps, ref: React.Ref<HTMLDivElement>) => (\n    <AccordionPrimitive.Content {...props} ref={ref} />\n));\n\nexport type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {\n    id: string;\n    disabled?: boolean;\n};\nconst Item = (props: AccordionItemProps) => {\n    const { id, ...otherProps } = props;\n    return <AccordionPrimitive.Item {...otherProps} value={id} />;\n};\n\ntype AccordionBaseProps = {\n    children: React.ReactNode[];\n\n    /** Change what heading element accordion regions will render */\n    as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n    /** Additional classes for Accordion root element */\n    className?: string;\n};\n\nexport interface AccordionUncontrolledProps extends AccordionBaseProps {\n    /** Default expanded accordion(s) */\n    defaultId: string | string[];\n\n    id?: never;\n    onChange?: never;\n}\n\nexport interface AccordionMultipleControlledProps extends AccordionBaseProps {\n    /** Expanded accordions */\n    id: string[];\n\n    /** onChange function to receive ids of expanded accordions */\n    onChange: (id: string[]) => void;\n\n    defaultId?: never;\n}\nexport interface AccordionSingleControlledProps extends AccordionBaseProps {\n    /** Expanded accordion */\n    id: string;\n\n    /** onChange function to receive id of expanded accordion */\n    onChange: (id: string) => void;\n\n    defaultId?: never;\n}\n\nexport type AccordionProps = AccordionUncontrolledProps | AccordionMultipleControlledProps | AccordionSingleControlledProps;\n\nexport const Accordion = (props: AccordionProps) => {\n    const { id, defaultId, onChange, as = 'h2', ...otherProps } = props;\n    const context = React.useMemo(() => ({ as }), [as]);\n\n    let valueProps;\n\n    if (defaultId) {\n        valueProps = {\n            defaultValue: defaultId || undefined,\n        };\n    } else {\n        valueProps = {\n            onValueChange: onChange,\n            value: id || undefined,\n        };\n    }\n\n    const type = Array.isArray(valueProps.defaultValue) || Array.isArray(valueProps.value) ? 'multiple' : 'single';\n    const className = cn('divide-y divide-grey', props.className);\n\n    return (\n        <AccordionContext.Provider value={context}>\n            <AccordionPrimitive.Root {...otherProps} {...valueProps} data-taco=\"accordion\" className={className} type={type} />\n        </AccordionContext.Provider>\n    );\n};\n\nAccordion.Item = Item;\nAccordion.Trigger = Trigger;\nAccordion.Content = Content;\n"],"names":["AccordionContext","React","createContext","as","StyledTrigger","forwardRef","props","ref","isExpanded","className","cn","children","Icon","name","Trigger","useContext","Heading","AccordionPrimitive","asChild","Content","Item","id","otherProps","value","Accordion","defaultId","onChange","context","useMemo","valueProps","defaultValue","undefined","onValueChange","type","Array","isArray","Provider"],"mappings":"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"}

package/dist/esm/components/Backdrop/Backdrop.js

@@ -1,12 +1,13 @@
-import { createElement } from 'react';
+import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 
-var Backdrop = function Backdrop(props) {
+var Backdrop = /*#__PURE__*/forwardRef(function Backdrop(props, ref) {
   var className = cn('fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] animate-[fade-in_150ms] aria-hidden:hidden', props.className);
   return createElement("div", Object.assign({}, props, {
-    className: className
+    className: className,
+    ref: ref
   }));
-};
+});
 
 export { Backdrop };
 //# sourceMappingURL=Backdrop.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.js","sources":["../../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nexport type BackdropProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Backdrop = (props: BackdropProps) => {\n    const className = cn(\n        'fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] animate-[fade-in_150ms] aria-hidden:hidden',\n        props.className\n    );\n\n    return <div {...props} className={className} />;\n};\n"],"names":["Backdrop","props","className","cn","React"],"mappings":";;;IAKaA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD;AACpB,MAAMC,SAAS,GAAGC,EAAE,CAChB,iHADgB,EAEhBF,KAAK,CAACC,SAFU,CAApB;AAKA,SAAOE,aAAA,MAAA,oBAASH;AAAOC,IAAAA,SAAS,EAAEA;IAA3B,CAAP;AACH;;;;"}
+{"version":3,"file":"Backdrop.js","sources":["../../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nexport type BackdropProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(props, ref) {\n    const className = cn(\n        'fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] animate-[fade-in_150ms] aria-hidden:hidden',\n        props.className\n    );\n\n    return <div {...props} className={className} ref={ref} />;\n});\n"],"names":["Backdrop","React","props","ref","className","cn"],"mappings":";;;IAKaA,QAAQ,gBAAGC,UAAA,CAAgD,SAASD,QAAT,CAAkBE,KAAlB,EAAyBC,GAAzB;AACpE,MAAMC,SAAS,GAAGC,EAAE,CAChB,iHADgB,EAEhBH,KAAK,CAACE,SAFU,CAApB;AAKA,SAAOH,aAAA,MAAA,oBAASC;AAAOE,IAAAA,SAAS,EAAEA;AAAWD,IAAAA,GAAG,EAAEA;IAA3C,CAAP;AACH,CAPuB;;;;"}

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?: (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 { 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

@@ -2,11 +2,8 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '.
 import React__default from 'react';
 import { Button } from '../../primitives/Button.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
-import { Hanger } from '../Hanger/Hanger.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 +38,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);
@@ -50,16 +48,28 @@ var createButton = function createButton(props, className, ref) {
     ref: ref
   }));
 
-  if (hanger) {
-    button = React__default.createElement(Hanger, Object.assign({}, hanger.props), React__default.createElement(Hanger.Anchor, null, button), hanger.props.children);
+  if (typeof dialog === 'function') {
+    button = dialog({
+      trigger: button
+    });
   }
 
-  if (dialog) {
-    button = React__default.createElement(Dialog, Object.assign({}, dialog.props), React__default.createElement(Dialog.Trigger, null, button), dialog.props.children);
+  if (typeof hanger === 'function') {
+    button = hanger({
+      anchor: button
+    });
   }
 
-  if (popover) {
-    button = React__default.createElement(Popover, Object.assign({}, popover.props), React__default.createElement(Popover.Trigger, null, button), popover.props.children);
+  if (typeof menu === 'function') {
+    button = menu({
+      trigger: button
+    });
+  }
+
+  if (typeof popover === 'function') {
+    button = popover({
+      trigger: button
+    });
   }
 
   if (tooltip) {

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';\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 (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    }\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    }\n\n    if (typeof popover === 'function') {\n        button = popover({ trigger: 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","anchor","Tooltip","title"],"mappings":";;;;;;IAKaA,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,MAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;AAC9BM,IAAAA,MAAM,GAAGN,MAAM,CAAC;AAAES,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAf;AACH;;AACD,MAAI,OAAOL,MAAP,KAAkB,UAAtB,EAAkC;AAC9BK,IAAAA,MAAM,GAAGL,MAAM,CAAC;AAAES,MAAAA,MAAM,EAAEJ;AAAV,KAAD,CAAf;AACH;;AAED,MAAI,OAAOJ,IAAP,KAAgB,UAApB,EAAgC;AAC5BI,IAAAA,MAAM,GAAGJ,IAAI,CAAC;AAAEO,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAb;AACH;;AAED,MAAI,OAAOH,OAAP,KAAmB,UAAvB,EAAmC;AAC/BG,IAAAA,MAAM,GAAGH,OAAO,CAAC;AAAEM,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAhB;AACH;;AAED,MAAIF,OAAJ,EAAa;AACTE,IAAAA,MAAM,GAAGC,4BAAA,CAACI,OAAD;AAASC,MAAAA,KAAK,EAAER;KAAhB,EAA0BE,MAA1B,CAAT;AACH;;AAED,SAAOA,MAAP;AACH;;;;"}

package/dist/esm/components/Calendar/Calendar.js

@@ -1,9 +1,9 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useState, useEffect, createElement, memo } from 'react';
 import cn from 'classnames';
-import { useLocalization } from '../Provider/Provider.js';
 import { IconButton } from '../IconButton/IconButton.js';
 import ReactDayPicker from 'react-day-picker';
+import { useLocalization } from '../Provider/Provider.js';
 
 var _excluded = ["onChange", "value"];
 

package/dist/esm/components/Combobox/Combobox.js

@@ -1,8 +1,8 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useRef, createElement } from 'react';
 import cn from 'classnames';
-import { Root, Anchor, Content } from '@radix-ui/react-popover';
 import { IconButton } from '../IconButton/IconButton.js';
+import { Root, Anchor, Content } from '@radix-ui/react-popover';
 import { Input } from '../Input/Input.js';
 import { ScrollableList } from '../Listbox/ScrollableList.js';
 import { useCombobox } from './useCombobox.js';