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

package/dist/components/Layout/components/Sidebar.js

@@ -1,6 +1,6 @@
 import React__default from "react";
 import cn from "clsx";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import { LayoutContext } from "./Context.js";
 import { useIsLargeScreen } from "../../../hooks/useIsLargeScreen.js";
 const Sidebar = React__default.forwardRef(function LayoutSidebar(props, ref) {
@@ -30,14 +30,14 @@ const Sidebar = React__default.forwardRef(function LayoutSidebar(props, ref) {
   const showBackdrop = isSmallScreen && sidebarOpen === true;
   const [ready, setReady] = React__default.useState(isSmallScreen);
   const className = cn(
-    "bg-gray-50 h-full w-64 flex-shrink-0 flex-grow-0 print:hidden",
+    "h-full w-64 flex-shrink-0 flex-grow-0 bg-gray-50 print:hidden",
     {
-      "absolute z-10 aria-hidden:-translate-x-64 ": isSmallScreen,
+      "absolute z-10 aria-hidden:-translate-x-64": isSmallScreen,
       // prevent animation when crossing the boundary from large to small screen,
       // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)
       invisible: isSmallScreen && !ready,
-      "transition-[transform] duration-300 visible": isSmallScreen && ready,
-      "border-r-2 border-gray-100 ": !showBackdrop
+      "visible transition-[transform] duration-300": isSmallScreen && ready,
+      "border-r-2 border-gray-100": !showBackdrop
     },
     props.className
   );
@@ -59,7 +59,7 @@ const Sidebar = React__default.forwardRef(function LayoutSidebar(props, ref) {
       animate: { opacity: 1 },
       exit: { opacity: 0 },
       onClick: () => setSidebarOpen(false),
-      className: "bg-brand-midnight/[0.3] fixed inset-0 z-[1] cursor-default overflow-y-auto print:absolute print:overflow-visible"
+      className: "fixed inset-0 z-[1] cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible"
     }
   )));
 });

package/dist/components/Layout/components/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { LayoutContext } from './Context';\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\n\nexport type LayoutSidebarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children:\n        | React.ReactNode\n        | (({\n              isLargeScreen,\n              open,\n              toggleSidebar,\n          }: {\n              isLargeScreen: boolean;\n              open: boolean;\n              toggleSidebar: () => void;\n          }) => React.ReactNode);\n};\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n    const { children, ...attributes } = props;\n    const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n    const isLargeScreen = useIsLargeScreen();\n    const isSmallScreen = !isLargeScreen;\n\n    // if it's a large screen we override the open state and make it always visible\n    const isVisible = isLargeScreen || sidebarOpen;\n\n    // ensures the menu is always closed by default when resizing to a smaller window size\n    React.useEffect(() => {\n        setSidebarOpen(isLargeScreen);\n    }, [isLargeScreen]);\n\n    React.useEffect(() => {\n        const handleEscapeKey = (event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                event.stopPropagation();\n                setSidebarOpen(false);\n            }\n        };\n\n        if (isSmallScreen && sidebarOpen) {\n            window.addEventListener('keydown', handleEscapeKey);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleEscapeKey);\n        };\n    }, [isSmallScreen, sidebarOpen]);\n\n    const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n    const [ready, setReady] = React.useState(isSmallScreen);\n\n    const className = cn(\n        'bg-gray-50 h-full w-64 flex-shrink-0 flex-grow-0 print:hidden',\n        {\n            'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,\n            // prevent animation when crossing the boundary from large to small screen,\n            // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n            invisible: isSmallScreen && !ready,\n            'transition-[transform] duration-300 visible': isSmallScreen && ready,\n            'border-r-2 border-gray-100 ': !showBackdrop,\n        },\n        props.className\n    );\n\n    React.useEffect(() => {\n        // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n        setTimeout(() => {\n            setReady(isSmallScreen);\n        }, 1);\n    }, [isSmallScreen]);\n\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n    const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n    if (!content) {\n        return null;\n    }\n\n    return (\n        <>\n            <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n                {content}\n            </nav>\n            <AnimatePresence>\n                {showBackdrop && (\n                    <motion.div\n                        aria-hidden\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        onClick={() => setSidebarOpen(false)}\n                        className=\"bg-brand-midnight/[0.3] fixed inset-0 z-[1] cursor-default overflow-y-auto print:absolute print:overflow-visible\"\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["React"],"mappings":";;;;;AAoBO,MAAM,UAAUA,eAAM,WAA+C,SAAS,cAAc,OAAO,KAAK;AAC3G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,aAAa,eAAA,IAAmBA,eAAM,WAAW,aAAa;AACtE,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnCA,iBAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAAA,GAC7B,CAAC,aAAa,CAAC;AAElBA,iBAAM,UAAU,MAAM;AACZ,UAAA,kBAAkB,CAAC,UAAyB;AAC1C,UAAA,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,uBAAe,KAAK;AAAA,MAAA;AAAA,IAE5B;AAEA,QAAI,iBAAiB,aAAa;AACvB,aAAA,iBAAiB,WAAW,eAAe;AAAA,IAAA;AAGtD,WAAO,MAAM;AACF,aAAA,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EAAA,GACD,CAAC,eAAe,WAAW,CAAC;AAEzB,QAAA,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,8CAA8C;AAAA;AAAA;AAAA,MAG9C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,+BAA+B,CAAC;AAAA,IACpC;AAAA,IACA,MAAM;AAAA,EACV;AAEAA,iBAAM,UAAU,MAAM;AAElB,eAAW,MAAM;AACb,eAAS,aAAa;AAAA,OACvB,CAAC;AAAA,EAAA,GACL,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AAClD,QAAA,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAc,CAAC,IAAI;AAEjH,MAAI,CAAC,SAAS;AACH,WAAA;AAAA,EAAA;AAGX,qFAESA,+BAAA,cAAA,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAC/F,GAAA,OACL,GACAA,+BAAA,cAAC,uBACI,gBACGA,+BAAA;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,MAAM,EAAE,SAAS,EAAE;AAAA,MACnB,SAAS,MAAM,eAAe,KAAK;AAAA,MACnC,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,CACJ;AAER,CAAC;"}
+{"version":3,"file":"Sidebar.js","sources":["../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { LayoutContext } from './Context';\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\n\nexport type LayoutSidebarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children:\n        | React.ReactNode\n        | (({\n              isLargeScreen,\n              open,\n              toggleSidebar,\n          }: {\n              isLargeScreen: boolean;\n              open: boolean;\n              toggleSidebar: () => void;\n          }) => React.ReactNode);\n};\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n    const { children, ...attributes } = props;\n    const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n    const isLargeScreen = useIsLargeScreen();\n    const isSmallScreen = !isLargeScreen;\n\n    // if it's a large screen we override the open state and make it always visible\n    const isVisible = isLargeScreen || sidebarOpen;\n\n    // ensures the menu is always closed by default when resizing to a smaller window size\n    React.useEffect(() => {\n        setSidebarOpen(isLargeScreen);\n    }, [isLargeScreen]);\n\n    React.useEffect(() => {\n        const handleEscapeKey = (event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                event.stopPropagation();\n                setSidebarOpen(false);\n            }\n        };\n\n        if (isSmallScreen && sidebarOpen) {\n            window.addEventListener('keydown', handleEscapeKey);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleEscapeKey);\n        };\n    }, [isSmallScreen, sidebarOpen]);\n\n    const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n    const [ready, setReady] = React.useState(isSmallScreen);\n\n    const className = cn(\n        'h-full w-64 flex-shrink-0 flex-grow-0 bg-gray-50 print:hidden',\n        {\n            'absolute z-10 aria-hidden:-translate-x-64': isSmallScreen,\n            // prevent animation when crossing the boundary from large to small screen,\n            // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n            invisible: isSmallScreen && !ready,\n            'visible transition-[transform] duration-300': isSmallScreen && ready,\n            'border-r-2 border-gray-100': !showBackdrop,\n        },\n        props.className\n    );\n\n    React.useEffect(() => {\n        // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n        setTimeout(() => {\n            setReady(isSmallScreen);\n        }, 1);\n    }, [isSmallScreen]);\n\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n    const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n    if (!content) {\n        return null;\n    }\n\n    return (\n        <>\n            <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n                {content}\n            </nav>\n            <AnimatePresence>\n                {showBackdrop && (\n                    <motion.div\n                        aria-hidden\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        onClick={() => setSidebarOpen(false)}\n                        className=\"fixed inset-0 z-[1] cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["React"],"mappings":";;;;;AAoBO,MAAM,UAAUA,eAAM,WAA+C,SAAS,cAAc,OAAO,KAAK;AAC3G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,aAAa,eAAA,IAAmBA,eAAM,WAAW,aAAa;AACtE,QAAM,gBAAgB,iBAAA;AACtB,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnCA,iBAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAChC,GAAG,CAAC,aAAa,CAAC;AAElBA,iBAAM,UAAU,MAAM;AAClB,UAAM,kBAAkB,CAAC,UAAyB;AAC9C,UAAI,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,uBAAe,KAAK;AAAA,MACxB;AAAA,IACJ;AAEA,QAAI,iBAAiB,aAAa;AAC9B,aAAO,iBAAiB,WAAW,eAAe;AAAA,IACtD;AAEA,WAAO,MAAM;AACT,aAAO,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EACJ,GAAG,CAAC,eAAe,WAAW,CAAC;AAE/B,QAAM,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,6CAA6C;AAAA;AAAA;AAAA,MAG7C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,8BAA8B,CAAC;AAAA,IAAA;AAAA,IAEnC,MAAM;AAAA,EAAA;AAGVA,iBAAM,UAAU,MAAM;AAElB,eAAW,MAAM;AACb,eAAS,aAAa;AAAA,IAC1B,GAAG,CAAC;AAAA,EACR,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AACxD,QAAM,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAA,CAAe,IAAI;AAEjH,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AAEA,qFAEQA,+BAAA,cAAC,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAAA,GAC/F,OACL,GACAA,+BAAA,cAAC,uBACI,gBACGA,+BAAA;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,MAAM,EAAE,SAAS,EAAA;AAAA,MACjB,SAAS,MAAM,eAAe,KAAK;AAAA,MACnC,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,CACJ;AAER,CAAC;"}

package/dist/components/Layout/components/Top.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Top.cjs","sources":["../../../../src/components/Layout/components/Top.tsx"],"sourcesContent":["import React from 'react';\nimport { LayoutContext } from './Context';\n\nexport type LayoutTopProps = {\n    children: React.ReactNode | (({ toggleSidebar }: { toggleSidebar: () => void }) => React.ReactNode);\n};\n\nexport const Top = (props: LayoutTopProps) => {\n    const { setSidebarOpen } = React.useContext(LayoutContext);\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n\n    return <>{typeof props.children === 'function' ? props.children({ toggleSidebar }) : props.children}</>;\n};\n"],"names":["LayoutContext"],"mappings":";;;;AAOa,MAAA,MAAM,CAAC,UAA0B;AAC1C,QAAM,EAAE,eAAmB,IAAA,MAAM,WAAWA,QAAAA,aAAa;AACzD,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AAExD,SAAU,sBAAA,cAAA,MAAA,UAAA,MAAA,OAAO,MAAM,aAAa,aAAa,MAAM,SAAS,EAAE,cAAc,CAAC,IAAI,MAAM,QAAS;AACxG;;"}
+{"version":3,"file":"Top.cjs","sources":["../../../../src/components/Layout/components/Top.tsx"],"sourcesContent":["import React from 'react';\nimport { LayoutContext } from './Context';\n\nexport type LayoutTopProps = {\n    children: React.ReactNode | (({ toggleSidebar }: { toggleSidebar: () => void }) => React.ReactNode);\n};\n\nexport const Top = (props: LayoutTopProps) => {\n    const { setSidebarOpen } = React.useContext(LayoutContext);\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n\n    return <>{typeof props.children === 'function' ? props.children({ toggleSidebar }) : props.children}</>;\n};\n"],"names":["LayoutContext"],"mappings":";;;;AAOO,MAAM,MAAM,CAAC,UAA0B;AAC1C,QAAM,EAAE,eAAA,IAAmB,MAAM,WAAWA,QAAAA,aAAa;AACzD,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AAExD,SAAO,sBAAA,cAAA,MAAA,UAAA,MAAG,OAAO,MAAM,aAAa,aAAa,MAAM,SAAS,EAAE,cAAA,CAAe,IAAI,MAAM,QAAS;AACxG;;"}

package/dist/components/Layout/components/Top.js.map

@@ -1 +1 @@
-{"version":3,"file":"Top.js","sources":["../../../../src/components/Layout/components/Top.tsx"],"sourcesContent":["import React from 'react';\nimport { LayoutContext } from './Context';\n\nexport type LayoutTopProps = {\n    children: React.ReactNode | (({ toggleSidebar }: { toggleSidebar: () => void }) => React.ReactNode);\n};\n\nexport const Top = (props: LayoutTopProps) => {\n    const { setSidebarOpen } = React.useContext(LayoutContext);\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n\n    return <>{typeof props.children === 'function' ? props.children({ toggleSidebar }) : props.children}</>;\n};\n"],"names":["React"],"mappings":";;AAOa,MAAA,MAAM,CAAC,UAA0B;AAC1C,QAAM,EAAE,eAAmB,IAAAA,eAAM,WAAW,aAAa;AACzD,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AAExD,SAAUA,+BAAA,cAAAA,eAAA,UAAA,MAAA,OAAO,MAAM,aAAa,aAAa,MAAM,SAAS,EAAE,cAAc,CAAC,IAAI,MAAM,QAAS;AACxG;"}
+{"version":3,"file":"Top.js","sources":["../../../../src/components/Layout/components/Top.tsx"],"sourcesContent":["import React from 'react';\nimport { LayoutContext } from './Context';\n\nexport type LayoutTopProps = {\n    children: React.ReactNode | (({ toggleSidebar }: { toggleSidebar: () => void }) => React.ReactNode);\n};\n\nexport const Top = (props: LayoutTopProps) => {\n    const { setSidebarOpen } = React.useContext(LayoutContext);\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n\n    return <>{typeof props.children === 'function' ? props.children({ toggleSidebar }) : props.children}</>;\n};\n"],"names":["React"],"mappings":";;AAOO,MAAM,MAAM,CAAC,UAA0B;AAC1C,QAAM,EAAE,eAAA,IAAmBA,eAAM,WAAW,aAAa;AACzD,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AAExD,SAAOA,+BAAA,cAAAA,eAAA,UAAA,MAAG,OAAO,MAAM,aAAa,aAAa,MAAM,SAAS,EAAE,cAAA,CAAe,IAAI,MAAM,QAAS;AACxG;"}

package/dist/components/LegacyComponents/Button/Button.cjs

@@ -26,7 +26,7 @@ const LegacyButtonBase = React__namespace.forwardRef(function LegacyButtonBase2(
   const { appearance, fluid, ...otherProps } = props;
   const className = cn(
     util.getButtonClasses(),
-    util.getAppearanceClasses(appearance),
+    util.APPEARANCE_CLASSNAME[appearance ?? "default"],
     "rounded px-3",
     {
       "w-full": fluid

package/dist/components/LegacyComponents/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../../src/components/LegacyComponents/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Appearance } from '../../../types';\nimport * as ButtonPrimitive from '../../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\nimport { HangerProps } from '../../Hanger/Hanger';\nimport { MenuProps } from '../../Menu/Menu';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { PopoverProps } from '../../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../../Icon/Icon';\nimport { DrawerProps } from '../../Drawer/Drawer';\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyButtonProps = 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    /**\n     * Drawer component associated with the button, clicking the button will open the drawer.\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 drawer when clicked.\n     */\n    drawer?: (props: Partial<DrawerProps>) => 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 | JSX.Element;\n};\n\nconst LegacyButtonBase = React.forwardRef(function LegacyButtonBase(\n    props: LegacyButtonProps,\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            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButtonWithTooltip(\n        {\n            ...otherProps,\n            'data-taco': 'legacy-button',\n            'data-appearance': appearance,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyButton = React.forwardRef(function LegacyButton(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n    let children = buttonProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    const button = (\n        <LegacyButtonBase {...buttonProps} ref={ref}>\n            {children}\n        </LegacyButtonBase>\n    );\n\n    return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["React","LegacyButtonBase","getButtonClasses","getAppearanceClasses","createButtonWithTooltip","LegacyButton","Icon","createButtonWithOverlays"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAM,mBAAmBA,iBAAM,WAAW,SAASC,kBAC/C,OACA,KACF;AACE,QAAM,EAAE,YAAY,OAAO,GAAG,WAAe,IAAA;AAC7C,QAAM,YAAY;AAAA,IACdC,sBAAiB;AAAA,IACjBC,KAAAA,qBAAqB,UAAU;AAAA,IAC/B;AAAA,IACA;AAAA,MACI,UAAU;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAEO,SAAAC,KAAA;AAAA,IACH;AAAA,MACI,GAAG;AAAA,MACH,aAAa;AAAA,MACb,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ,CAAC;AAKM,MAAM,eAAeJ,iBAAM,WAAW,SAASK,cAClD,OACA,KACF;AACQ,QAAA,EAAE,QAAQ,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAElE,MAAI,WAAW,YAAY;AAGvB,MAAA,OAAO,SAAS,YAAY;AACjB,eAAA,MAAM,QAAQ,QAAQ,IAC3B,CAAC,GAAG,UAAWL,iCAAA,cAAAM,KAAAA,MAAA,EAAK,KAAI,gBAAe,MAAK,eAAe,CAAA,CAAE,IAC7D,CAAC,UAAUN,iCAAA,cAACM,aAAK,KAAI,gBAAe,MAAK,eAAe,CAAA,CAAE;AAAA,EAAA;AAGpE,QAAM,SACDN,iCAAA,cAAA,kBAAA,EAAkB,GAAG,aAAa,OAC9B,QACL;AAGG,SAAAO,KAAA,yBAAyB,EAAE,QAAQ,QAAQ,QAAQ,MAAM,WAAW,MAAM;AACrF,CAAC;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/LegacyComponents/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Appearance } from '../../../types';\nimport * as ButtonPrimitive from '../../../primitives/Button';\nimport { APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\nimport { HangerProps } from '../../Hanger/Hanger';\nimport { MenuProps } from '../../Menu/Menu';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { PopoverProps } from '../../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../../Icon/Icon';\nimport { DrawerProps } from '../../Drawer/Drawer';\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyButtonProps = 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>) => React.JSX.Element;\n    /**\n     * Drawer component associated with the button, clicking the button will open the drawer.\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 drawer when clicked.\n     */\n    drawer?: (props: Partial<DrawerProps>) => React.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>) => React.JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.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>) => React.JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\nconst LegacyButtonBase = React.forwardRef(function LegacyButtonBase(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { appearance, fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        APPEARANCE_CLASSNAME[appearance ?? 'default'],\n        'rounded px-3',\n        {\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButtonWithTooltip(\n        {\n            ...otherProps,\n            'data-taco': 'legacy-button',\n            'data-appearance': appearance,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyButton = React.forwardRef(function LegacyButton(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n    let children = buttonProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    const button = (\n        <LegacyButtonBase {...buttonProps} ref={ref}>\n            {children}\n        </LegacyButtonBase>\n    );\n\n    return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["React","LegacyButtonBase","getButtonClasses","APPEARANCE_CLASSNAME","createButtonWithTooltip","LegacyButton","Icon","createButtonWithOverlays"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAM,mBAAmBA,iBAAM,WAAW,SAASC,kBAC/C,OACA,KACF;AACE,QAAM,EAAE,YAAY,OAAO,GAAG,eAAe;AAC7C,QAAM,YAAY;AAAA,IACdC,sBAAA;AAAA,IACAC,KAAAA,qBAAqB,cAAc,SAAS;AAAA,IAC5C;AAAA,IACA;AAAA,MACI,UAAU;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,SAAOC,KAAAA;AAAAA,IACH;AAAA,MACI,GAAG;AAAA,MACH,aAAa;AAAA,MACb,mBAAmB;AAAA,IAAA;AAAA,IAEvB;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,eAAeJ,iBAAM,WAAW,SAASK,cAClD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAElE,MAAI,WAAW,YAAY;AAG3B,MAAI,OAAO,SAAS,YAAY;AAC5B,eAAW,MAAM,QAAQ,QAAQ,IAC3B,CAAC,GAAG,UAAUL,iCAAA,cAACM,KAAAA,MAAA,EAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE,IAC7D,CAAC,UAAUN,iCAAA,cAACM,aAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE;AAAA,EACpE;AAEA,QAAM,SACFN,iCAAA,cAAC,kBAAA,EAAkB,GAAG,aAAa,OAC9B,QACL;AAGJ,SAAOO,KAAAA,yBAAyB,EAAE,QAAQ,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AACrF,CAAC;;"}

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

@@ -17,32 +17,32 @@ export type LegacyButtonProps = 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?: (props: Partial<DialogProps>) => JSX.Element;
+    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;
     /**
      * Drawer component associated with the button, clicking the button will open the drawer.
      * *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 drawer when clicked.
      */
-    drawer?: (props: Partial<DrawerProps>) => JSX.Element;
+    drawer?: (props: Partial<DrawerProps>) => React.JSX.Element;
     /** If fluid, button expands to the width of it's container */
     fluid?: boolean;
     /** Hanger component associated with the button. */
-    hanger?: (props: Partial<HangerProps>) => JSX.Element;
+    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;
     /** Menu component associated with the button. */
-    menu?: (props: Partial<MenuProps>) => JSX.Element;
+    menu?: (props: Partial<MenuProps>) => React.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?: (props: Partial<PopoverProps>) => JSX.Element;
+    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;
     /** A tooltip to show when hovering over the button */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
 };
 /**
  * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.
  */
-export declare const LegacyButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> & {
+export declare const LegacyButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, "popover"> & {
     children: React.ReactNode;
     href?: string;
     shortcut?: string | import('../../..').KeyDownHandlerOptions;
@@ -55,25 +55,25 @@ export declare const LegacyButton: React.ForwardRefExoticComponent<React.ButtonH
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
      * the button should be only to open the associated dialog when clicked.
      */
-    dialog?: (props: Partial<DialogProps>) => JSX.Element;
+    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;
     /**
      * Drawer component associated with the button, clicking the button will open the drawer.
      * *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 drawer when clicked.
      */
-    drawer?: (props: Partial<DrawerProps>) => JSX.Element;
+    drawer?: (props: Partial<DrawerProps>) => React.JSX.Element;
     /** If fluid, button expands to the width of it's container */
     fluid?: boolean;
     /** Hanger component associated with the button. */
-    hanger?: (props: Partial<HangerProps>) => JSX.Element;
+    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;
     /** Menu component associated with the button. */
-    menu?: (props: Partial<MenuProps>) => JSX.Element;
+    menu?: (props: Partial<MenuProps>) => React.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?: (props: Partial<PopoverProps>) => JSX.Element;
+    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;
     /** A tooltip to show when hovering over the button */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
 } & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/components/LegacyComponents/Button/Button.js

@@ -1,13 +1,13 @@
 import * as React from "react";
 import cn from "clsx";
-import { createButtonWithOverlays, getButtonClasses, getAppearanceClasses, createButtonWithTooltip } from "./util.js";
+import { createButtonWithOverlays, getButtonClasses, APPEARANCE_CLASSNAME, createButtonWithTooltip } from "./util.js";
 /* empty css           */
 import { Icon } from "../../Icon/Icon.js";
 const LegacyButtonBase = React.forwardRef(function LegacyButtonBase2(props, ref) {
   const { appearance, fluid, ...otherProps } = props;
   const className = cn(
     getButtonClasses(),
-    getAppearanceClasses(appearance),
+    APPEARANCE_CLASSNAME[appearance ?? "default"],
     "rounded px-3",
     {
       "w-full": fluid

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/LegacyComponents/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Appearance } from '../../../types';\nimport * as ButtonPrimitive from '../../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\nimport { HangerProps } from '../../Hanger/Hanger';\nimport { MenuProps } from '../../Menu/Menu';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { PopoverProps } from '../../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../../Icon/Icon';\nimport { DrawerProps } from '../../Drawer/Drawer';\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyButtonProps = 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    /**\n     * Drawer component associated with the button, clicking the button will open the drawer.\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 drawer when clicked.\n     */\n    drawer?: (props: Partial<DrawerProps>) => 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 | JSX.Element;\n};\n\nconst LegacyButtonBase = React.forwardRef(function LegacyButtonBase(\n    props: LegacyButtonProps,\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            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButtonWithTooltip(\n        {\n            ...otherProps,\n            'data-taco': 'legacy-button',\n            'data-appearance': appearance,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyButton = React.forwardRef(function LegacyButton(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n    let children = buttonProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    const button = (\n        <LegacyButtonBase {...buttonProps} ref={ref}>\n            {children}\n        </LegacyButtonBase>\n    );\n\n    return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["LegacyButtonBase","LegacyButton"],"mappings":";;;;;AA+CA,MAAM,mBAAmB,MAAM,WAAW,SAASA,kBAC/C,OACA,KACF;AACE,QAAM,EAAE,YAAY,OAAO,GAAG,WAAe,IAAA;AAC7C,QAAM,YAAY;AAAA,IACd,iBAAiB;AAAA,IACjB,qBAAqB,UAAU;AAAA,IAC/B;AAAA,IACA;AAAA,MACI,UAAU;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAEO,SAAA;AAAA,IACH;AAAA,MACI,GAAG;AAAA,MACH,aAAa;AAAA,MACb,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ,CAAC;AAKM,MAAM,eAAe,MAAM,WAAW,SAASC,cAClD,OACA,KACF;AACQ,QAAA,EAAE,QAAQ,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAElE,MAAI,WAAW,YAAY;AAGvB,MAAA,OAAO,SAAS,YAAY;AACjB,eAAA,MAAM,QAAQ,QAAQ,IAC3B,CAAC,GAAG,UAAW,sBAAA,cAAA,MAAA,EAAK,KAAI,gBAAe,MAAK,eAAe,CAAA,CAAE,IAC7D,CAAC,UAAU,sBAAA,cAAC,QAAK,KAAI,gBAAe,MAAK,eAAe,CAAA,CAAE;AAAA,EAAA;AAGpE,QAAM,SACD,sBAAA,cAAA,kBAAA,EAAkB,GAAG,aAAa,OAC9B,QACL;AAGG,SAAA,yBAAyB,EAAE,QAAQ,QAAQ,QAAQ,MAAM,WAAW,MAAM;AACrF,CAAC;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/LegacyComponents/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Appearance } from '../../../types';\nimport * as ButtonPrimitive from '../../../primitives/Button';\nimport { APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\nimport { HangerProps } from '../../Hanger/Hanger';\nimport { MenuProps } from '../../Menu/Menu';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { PopoverProps } from '../../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../../Icon/Icon';\nimport { DrawerProps } from '../../Drawer/Drawer';\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyButtonProps = 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>) => React.JSX.Element;\n    /**\n     * Drawer component associated with the button, clicking the button will open the drawer.\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 drawer when clicked.\n     */\n    drawer?: (props: Partial<DrawerProps>) => React.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>) => React.JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.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>) => React.JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\nconst LegacyButtonBase = React.forwardRef(function LegacyButtonBase(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { appearance, fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        APPEARANCE_CLASSNAME[appearance ?? 'default'],\n        'rounded px-3',\n        {\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButtonWithTooltip(\n        {\n            ...otherProps,\n            'data-taco': 'legacy-button',\n            'data-appearance': appearance,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `Button` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyButton = React.forwardRef(function LegacyButton(\n    props: LegacyButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n    let children = buttonProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    const button = (\n        <LegacyButtonBase {...buttonProps} ref={ref}>\n            {children}\n        </LegacyButtonBase>\n    );\n\n    return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["LegacyButtonBase","LegacyButton"],"mappings":";;;;;AA+CA,MAAM,mBAAmB,MAAM,WAAW,SAASA,kBAC/C,OACA,KACF;AACE,QAAM,EAAE,YAAY,OAAO,GAAG,eAAe;AAC7C,QAAM,YAAY;AAAA,IACd,iBAAA;AAAA,IACA,qBAAqB,cAAc,SAAS;AAAA,IAC5C;AAAA,IACA;AAAA,MACI,UAAU;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,SAAO;AAAA,IACH;AAAA,MACI,GAAG;AAAA,MACH,aAAa;AAAA,MACb,mBAAmB;AAAA,IAAA;AAAA,IAEvB;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,eAAe,MAAM,WAAW,SAASC,cAClD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAElE,MAAI,WAAW,YAAY;AAG3B,MAAI,OAAO,SAAS,YAAY;AAC5B,eAAW,MAAM,QAAQ,QAAQ,IAC3B,CAAC,GAAG,UAAU,sBAAA,cAAC,MAAA,EAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE,IAC7D,CAAC,UAAU,sBAAA,cAAC,QAAK,KAAI,gBAAe,MAAK,eAAA,CAAe,CAAE;AAAA,EACpE;AAEA,QAAM,SACF,sBAAA,cAAC,kBAAA,EAAkB,GAAG,aAAa,OAC9B,QACL;AAGJ,SAAO,yBAAyB,EAAE,QAAQ,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AACrF,CAAC;"}

package/dist/components/LegacyComponents/Button/util.cjs

@@ -6,26 +6,17 @@ const Tooltip = require("../../Tooltip/Tooltip.cjs");
 const getButtonClasses = () => {
   return "flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed";
 };
-const getAppearanceClasses = (value, icon = false) => {
-  switch (value) {
-    case "primary":
-      return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 focus-visible:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;
-    case "danger":
-      return `wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 focus-visible:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;
-    case "ghost":
-      return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;
-    case "discrete": {
-      if (icon) {
-        return `bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30`;
-      }
-      return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50`;
-    }
-    case "transparent": {
-      return `bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent`;
-    }
-    default:
-      return `wcag-gray-100 visited:wcag-gray-200 hover:wcag-gray-200 focus-visible:wcag-gray-200 aria-disabled:bg-gray-100 aria-disabled:text-black/30`;
-  }
+const APPEARANCE_CLASSNAME = {
+  primary: "wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 focus-visible:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50",
+  danger: "wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 focus-visible:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50",
+  ghost: "bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white",
+  discrete: "bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50",
+  transparent: "bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent",
+  default: "wcag-gray-100 visited:wcag-gray-200 hover:wcag-gray-200 focus-visible:wcag-gray-200 aria-disabled:bg-gray-100 aria-disabled:text-black/30"
+};
+const ICON_APPEARANCE_CLASSNAME = {
+  ...APPEARANCE_CLASSNAME,
+  discrete: "bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30"
 };
 const createButtonWithTooltip = (props, className, ref) => {
   const { tooltip, ...buttonProps } = props;
@@ -52,8 +43,9 @@ const createButtonWithOverlays = (props, buttonBase) => {
   }
   return button;
 };
+exports.APPEARANCE_CLASSNAME = APPEARANCE_CLASSNAME;
+exports.ICON_APPEARANCE_CLASSNAME = ICON_APPEARANCE_CLASSNAME;
 exports.createButtonWithOverlays = createButtonWithOverlays;
 exports.createButtonWithTooltip = createButtonWithTooltip;
-exports.getAppearanceClasses = getAppearanceClasses;
 exports.getButtonClasses = getButtonClasses;
 //# sourceMappingURL=util.cjs.map

package/dist/components/LegacyComponents/Button/util.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"util.cjs","sources":["../../../../src/components/LegacyComponents/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 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n    switch (value) {\n        case 'primary':\n            return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 focus-visible:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;\n\n        case 'danger':\n            return `wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 focus-visible:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;\n\n        case 'ghost':\n            return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;\n\n        case 'discrete': {\n            if (icon) {\n                return `bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30`;\n            }\n\n            return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50`;\n        }\n\n        case 'transparent': {\n            return `bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent`;\n        }\n\n        default:\n            return `wcag-gray-100 visited:wcag-gray-200 hover:wcag-gray-200 focus-visible:wcag-gray-200 aria-disabled:bg-gray-100 aria-disabled:text-black/30`;\n    }\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: JSX.Element) => {\n    const { dialog, drawer, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof drawer === 'function') {\n        button = drawer({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["ButtonPrimitive.Button","Tooltip"],"mappings":";;;;;AAKO,MAAM,mBAAmB,MAAM;AAC3B,SAAA;AACX;AAEO,MAAM,uBAAuB,CAAC,OAA+B,OAAO,UAAkB;AACzF,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK,YAAY;AACb,UAAI,MAAM;AACC,eAAA;AAAA,MAAA;AAGJ,aAAA;AAAA,IAAA;AAAA,IAGX,KAAK,eAAe;AACT,aAAA;AAAA,IAAA;AAAA,IAGX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEO,MAAM,0BAA0B,CACnC,OACA,WACA,QACc;AACd,QAAM,EAAE,SAAS,GAAG,YAAA,IAAgB;AAC9B,QAAA,6CAAUA,OAAAA,QAAA,EAAwB,GAAG,aAAa,WAAsB,KAAU;AAExF,MAAI,SAAS;AACT,WAAQ,sBAAA,cAAAC,QAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,MAAO;AAAA,EAAA;AAGrC,SAAA;AACX;AAEa,MAAA,2BAA2B,CAAC,OAAY,eAA4B;AAC7E,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,YAAY;AAClD,MAAI,SAAS;AAET,MAAA,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC5B,OAAO,WAAW,YAAY;AACrC,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC5B,OAAO,SAAS,YAAY;AACnC,aAAS,KAAK,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC1B,OAAO,YAAY,YAAY;AACtC,aAAS,QAAQ,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA;AAGpC,MAAA,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,QAAQ,OAAA,CAAQ;AAAA,EAAA;AAG/B,SAAA;AACX;;;;;"}
+{"version":3,"file":"util.cjs","sources":["../../../../src/components/LegacyComponents/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 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    primary:\n        'wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 focus-visible:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50',\n    danger: 'wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 focus-visible:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50',\n    ghost: 'bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white',\n    discrete:\n        'bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50',\n    transparent:\n        'bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent',\n    default:\n        'wcag-gray-100 visited:wcag-gray-200 hover:wcag-gray-200 focus-visible:wcag-gray-200 aria-disabled:bg-gray-100 aria-disabled:text-black/30',\n};\n\n// icon buttons render the discrete appearance in black rather than blue\nexport const ICON_APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    ...APPEARANCE_CLASSNAME,\n    discrete:\n        'bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30',\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): React.JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: React.JSX.Element) => {\n    const { dialog, drawer, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof drawer === 'function') {\n        button = drawer({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["ButtonPrimitive.Button","Tooltip"],"mappings":";;;;;AAKO,MAAM,mBAAmB,MAAM;AAClC,SAAO;AACX;AAEO,MAAM,uBAAmD;AAAA,EAC5D,SACI;AAAA,EACJ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UACI;AAAA,EACJ,aACI;AAAA,EACJ,SACI;AACR;AAGO,MAAM,4BAAwD;AAAA,EACjE,GAAG;AAAA,EACH,UACI;AACR;AAEO,MAAM,0BAA0B,CACnC,OACA,WACA,QACoB;AACpB,QAAM,EAAE,SAAS,GAAG,YAAA,IAAgB;AACpC,QAAM,6CAAUA,OAAAA,QAAA,EAAwB,GAAG,aAAa,WAAsB,KAAU;AAExF,MAAI,SAAS;AACT,WAAO,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,MAAO;AAAA,EAC5C;AAEA,SAAO;AACX;AAEO,MAAM,2BAA2B,CAAC,OAAY,eAAkC;AACnF,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,YAAY;AAClD,MAAI,SAAS;AAEb,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,WAAW,YAAY;AACrC,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,SAAS,YAAY;AACnC,aAAS,KAAK,EAAE,SAAS,OAAA,CAAQ;AAAA,EACrC,WAAW,OAAO,YAAY,YAAY;AACtC,aAAS,QAAQ,EAAE,SAAS,OAAA,CAAQ;AAAA,EACxC;AAEA,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,QAAQ,OAAA,CAAQ;AAAA,EACtC;AAEA,SAAO;AACX;;;;;;"}

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

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { Appearance } from '../../../types';
 export declare const getButtonClasses: () => string;
-export declare const getAppearanceClasses: (value: Appearance | undefined, icon?: boolean) => string;
-export declare const createButtonWithTooltip: (props: any, className: string, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => JSX.Element;
-export declare const createButtonWithOverlays: (props: any, buttonBase: JSX.Element) => JSX.Element;
+export declare const APPEARANCE_CLASSNAME: Record<Appearance, string>;
+export declare const ICON_APPEARANCE_CLASSNAME: Record<Appearance, string>;
+export declare const createButtonWithTooltip: (props: any, className: string, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => React.JSX.Element;
+export declare const createButtonWithOverlays: (props: any, buttonBase: React.JSX.Element) => React.JSX.Element;

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

@@ -4,26 +4,17 @@ import { Tooltip } from "../../Tooltip/Tooltip.js";
 const getButtonClasses = () => {
   return "flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed";
 };
-const getAppearanceClasses = (value, icon = false) => {
-  switch (value) {
-    case "primary":
-      return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 focus-visible:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;
-    case "danger":
-      return `wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 focus-visible:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;
-    case "ghost":
-      return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;
-    case "discrete": {
-      if (icon) {
-        return `bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30`;
-      }
-      return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50`;
-    }
-    case "transparent": {
-      return `bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent`;
-    }
-    default:
-      return `wcag-gray-100 visited:wcag-gray-200 hover:wcag-gray-200 focus-visible:wcag-gray-200 aria-disabled:bg-gray-100 aria-disabled:text-black/30`;
-  }
+const APPEARANCE_CLASSNAME = {
+  primary: "wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 focus-visible:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50",
+  danger: "wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 focus-visible:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50",
+  ghost: "bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white",
+  discrete: "bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50",
+  transparent: "bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent",
+  default: "wcag-gray-100 visited:wcag-gray-200 hover:wcag-gray-200 focus-visible:wcag-gray-200 aria-disabled:bg-gray-100 aria-disabled:text-black/30"
+};
+const ICON_APPEARANCE_CLASSNAME = {
+  ...APPEARANCE_CLASSNAME,
+  discrete: "bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30"
 };
 const createButtonWithTooltip = (props, className, ref) => {
   const { tooltip, ...buttonProps } = props;
@@ -51,9 +42,10 @@ const createButtonWithOverlays = (props, buttonBase) => {
   return button;
 };
 export {
+  APPEARANCE_CLASSNAME,
+  ICON_APPEARANCE_CLASSNAME,
   createButtonWithOverlays,
   createButtonWithTooltip,
-  getAppearanceClasses,
   getButtonClasses
 };
 //# sourceMappingURL=util.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../src/components/LegacyComponents/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 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n    switch (value) {\n        case 'primary':\n            return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 focus-visible:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;\n\n        case 'danger':\n            return `wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 focus-visible:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;\n\n        case 'ghost':\n            return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;\n\n        case 'discrete': {\n            if (icon) {\n                return `bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30`;\n            }\n\n            return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50`;\n        }\n\n        case 'transparent': {\n            return `bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent`;\n        }\n\n        default:\n            return `wcag-gray-100 visited:wcag-gray-200 hover:wcag-gray-200 focus-visible:wcag-gray-200 aria-disabled:bg-gray-100 aria-disabled:text-black/30`;\n    }\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: JSX.Element) => {\n    const { dialog, drawer, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof drawer === 'function') {\n        button = drawer({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["ButtonPrimitive.Button","React"],"mappings":";;;AAKO,MAAM,mBAAmB,MAAM;AAC3B,SAAA;AACX;AAEO,MAAM,uBAAuB,CAAC,OAA+B,OAAO,UAAkB;AACzF,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK,YAAY;AACb,UAAI,MAAM;AACC,eAAA;AAAA,MAAA;AAGJ,aAAA;AAAA,IAAA;AAAA,IAGX,KAAK,eAAe;AACT,aAAA;AAAA,IAAA;AAAA,IAGX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEO,MAAM,0BAA0B,CACnC,OACA,WACA,QACc;AACd,QAAM,EAAE,SAAS,GAAG,YAAA,IAAgB;AAC9B,QAAA,sDAAUA,QAAA,EAAwB,GAAG,aAAa,WAAsB,KAAU;AAExF,MAAI,SAAS;AACT,WAAQC,+BAAA,cAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,MAAO;AAAA,EAAA;AAGrC,SAAA;AACX;AAEa,MAAA,2BAA2B,CAAC,OAAY,eAA4B;AAC7E,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,YAAY;AAClD,MAAI,SAAS;AAET,MAAA,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC5B,OAAO,WAAW,YAAY;AACrC,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC5B,OAAO,SAAS,YAAY;AACnC,aAAS,KAAK,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC1B,OAAO,YAAY,YAAY;AACtC,aAAS,QAAQ,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA;AAGpC,MAAA,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,QAAQ,OAAA,CAAQ;AAAA,EAAA;AAG/B,SAAA;AACX;"}
+{"version":3,"file":"util.js","sources":["../../../../src/components/LegacyComponents/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 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    primary:\n        'wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 focus-visible:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50',\n    danger: 'wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 focus-visible:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50',\n    ghost: 'bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white',\n    discrete:\n        'bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50',\n    transparent:\n        'bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent',\n    default:\n        'wcag-gray-100 visited:wcag-gray-200 hover:wcag-gray-200 focus-visible:wcag-gray-200 aria-disabled:bg-gray-100 aria-disabled:text-black/30',\n};\n\n// icon buttons render the discrete appearance in black rather than blue\nexport const ICON_APPEARANCE_CLASSNAME: Record<Appearance, string> = {\n    ...APPEARANCE_CLASSNAME,\n    discrete:\n        'bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30',\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): React.JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: React.JSX.Element) => {\n    const { dialog, drawer, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof drawer === 'function') {\n        button = drawer({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["ButtonPrimitive.Button","React"],"mappings":";;;AAKO,MAAM,mBAAmB,MAAM;AAClC,SAAO;AACX;AAEO,MAAM,uBAAmD;AAAA,EAC5D,SACI;AAAA,EACJ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UACI;AAAA,EACJ,aACI;AAAA,EACJ,SACI;AACR;AAGO,MAAM,4BAAwD;AAAA,EACjE,GAAG;AAAA,EACH,UACI;AACR;AAEO,MAAM,0BAA0B,CACnC,OACA,WACA,QACoB;AACpB,QAAM,EAAE,SAAS,GAAG,YAAA,IAAgB;AACpC,QAAM,sDAAUA,QAAA,EAAwB,GAAG,aAAa,WAAsB,KAAU;AAExF,MAAI,SAAS;AACT,WAAOC,+BAAA,cAAC,SAAA,EAAQ,OAAO,QAAA,GAAU,MAAO;AAAA,EAC5C;AAEA,SAAO;AACX;AAEO,MAAM,2BAA2B,CAAC,OAAY,eAAkC;AACnF,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,YAAY;AAClD,MAAI,SAAS;AAEb,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,WAAW,YAAY;AACrC,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EACvC,WAAW,OAAO,SAAS,YAAY;AACnC,aAAS,KAAK,EAAE,SAAS,OAAA,CAAQ;AAAA,EACrC,WAAW,OAAO,YAAY,YAAY;AACtC,aAAS,QAAQ,EAAE,SAAS,OAAA,CAAQ;AAAA,EACxC;AAEA,MAAI,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,QAAQ,OAAA,CAAQ;AAAA,EACtC;AAEA,SAAO;AACX;"}

package/dist/components/LegacyComponents/IconButton/IconButton.cjs

@@ -22,11 +22,11 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const LegacyIconButtonBase = React__namespace.forwardRef(function LegacyIconButtonBase2(props, ref) {
-  const { icon, rounded = false, ...otherProps } = props;
+  const { icon, rounded = false, appearance = "default", ...otherProps } = props;
   const className = cn(
     "w-8",
     util.getButtonClasses(),
-    util.getAppearanceClasses(otherProps.appearance, true),
+    util.ICON_APPEARANCE_CLASSNAME[appearance],
     {
       "rounded-full": rounded,
       rounded: !rounded
@@ -37,7 +37,13 @@ const LegacyIconButtonBase = React__namespace.forwardRef(function LegacyIconButt
     return null;
   }
   return util.createButtonWithTooltip(
-    { "data-taco": "legacy-icon-button", ...otherProps, children: /* @__PURE__ */ React__namespace.createElement(Icon.Icon, { name: icon, className: "m-0 p-0" }) },
+    // forward the caller's own appearance so an omitted prop stays omitted from the DOM
+    {
+      "data-taco": "legacy-icon-button",
+      appearance: props.appearance,
+      ...otherProps,
+      children: /* @__PURE__ */ React__namespace.createElement(Icon.Icon, { name: icon, className: "m-0 p-0" })
+    },
     className,
     ref
   );

package/dist/components/LegacyComponents/IconButton/IconButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/LegacyComponents/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as ButtonPrimitive from '../../../primitives/Button';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { getAppearanceClasses, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util';\nimport { Appearance } from '../../../types';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { HangerProps } from '../../Hanger/Hanger';\nimport { MenuProps } from '../../Menu/Menu';\nimport { PopoverProps } from '../../Popover/Popover';\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | JSX.Element;\n};\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { icon, rounded = false, ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        getAppearanceClasses(otherProps.appearance, true),\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButtonWithTooltip(\n        { 'data-taco': 'legacy-icon-button', ...otherProps, children: <Icon name={icon} className=\"m-0 p-0\" /> },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButton = React.forwardRef(function LegacyIconButton(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n    const button = <LegacyIconButtonBase {...buttonProps} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["React","LegacyIconButtonBase","getButtonClasses","getAppearanceClasses","createButtonWithTooltip","Icon","LegacyIconButton","createButtonWithOverlays"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA+CO,MAAM,uBAAuBA,iBAAM,WAAW,SAASC,sBAC1D,OACA,KACF;AACE,QAAM,EAAE,MAAM,UAAU,OAAO,GAAG,WAAe,IAAA;AAEjD,QAAM,YAAY;AAAA,IACd;AAAA,IACAC,sBAAiB;AAAA,IACjBC,0BAAqB,WAAW,YAAY,IAAI;AAAA,IAChD;AAAA,MACI,gBAAgB;AAAA,MAChB,SAAS,CAAC;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAEA,MAAI,CAAC,MAAM;AACA,WAAA;AAAA,EAAA;AAGJ,SAAAC,KAAA;AAAA,IACH,EAAE,aAAa,sBAAsB,GAAG,YAAY,UAAWJ,iCAAA,cAAAK,KAAA,MAAA,EAAK,MAAM,MAAM,WAAU,UAAU,CAAA,EAAG;AAAA,IACvG;AAAA,IACA;AAAA,EACJ;AACJ,CAAC;AAKM,MAAM,mBAAmBL,iBAAM,WAAW,SAASM,kBACtD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAC1D,QAAM,SAASN,iCAAA,cAAC,sBAAsB,EAAA,GAAG,aAAa,KAAU;AAEhE,SAAOO,KAAAA,yBAAyB,EAAE,QAAQ,QAAQ,MAAM,WAAW,MAAM;AAC7E,CAAC;;;"}
+{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/LegacyComponents/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as ButtonPrimitive from '../../../primitives/Button';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { ICON_APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util';\nimport { Appearance } from '../../../types';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { HangerProps } from '../../Hanger/Hanger';\nimport { MenuProps } from '../../Menu/Menu';\nimport { PopoverProps } from '../../Popover/Popover';\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.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>) => React.JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { icon, rounded = false, appearance = 'default', ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        ICON_APPEARANCE_CLASSNAME[appearance],\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButtonWithTooltip(\n        // forward the caller's own appearance so an omitted prop stays omitted from the DOM\n        {\n            'data-taco': 'legacy-icon-button',\n            appearance: props.appearance,\n            ...otherProps,\n            children: <Icon name={icon} className=\"m-0 p-0\" />,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButton = React.forwardRef(function LegacyIconButton(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n    const button = <LegacyIconButtonBase {...buttonProps} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["React","LegacyIconButtonBase","getButtonClasses","ICON_APPEARANCE_CLASSNAME","createButtonWithTooltip","Icon","LegacyIconButton","createButtonWithOverlays"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA+CO,MAAM,uBAAuBA,iBAAM,WAAW,SAASC,sBAC1D,OACA,KACF;AACE,QAAM,EAAE,MAAM,UAAU,OAAO,aAAa,WAAW,GAAG,eAAe;AAEzE,QAAM,YAAY;AAAA,IACd;AAAA,IACAC,sBAAA;AAAA,IACAC,KAAAA,0BAA0B,UAAU;AAAA,IACpC;AAAA,MACI,gBAAgB;AAAA,MAChB,SAAS,CAAC;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,SAAOC,KAAAA;AAAAA;AAAAA,IAEH;AAAA,MACI,aAAa;AAAA,MACb,YAAY,MAAM;AAAA,MAClB,GAAG;AAAA,MACH,UAAUJ,iCAAA,cAACK,KAAAA,MAAA,EAAK,MAAM,MAAM,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,IAEpD;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,mBAAmBL,iBAAM,WAAW,SAASM,kBACtD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAC1D,QAAM,SAASN,iCAAA,cAAC,sBAAA,EAAsB,GAAG,aAAa,KAAU;AAEhE,SAAOO,KAAAA,yBAAyB,EAAE,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AAC7E,CAAC;;;"}

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

@@ -17,26 +17,26 @@ export type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
      * the button should be only to open the associated dialog when clicked.
      */
-    dialog?: (props: Partial<DialogProps>) => JSX.Element;
+    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;
     /** Hanger component associated with the button. */
-    hanger?: (props: Partial<HangerProps>) => JSX.Element;
+    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;
     /** Set which icon should be rendered within button */
     icon: IconName;
     /** Menu component associated with the button. */
-    menu?: (props: Partial<MenuProps>) => JSX.Element;
+    menu?: (props: Partial<MenuProps>) => React.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?: (props: Partial<PopoverProps>) => JSX.Element;
+    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;
     /**
      * Set whether the button is rounded.
      * Default value is `false`
      */
     rounded?: boolean;
     /** A tooltip to show when hovering over the button */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
 };
 /**
  * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.
@@ -49,26 +49,26 @@ export declare const LegacyIconButtonBase: React.ForwardRefExoticComponent<Omit<
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
      * the button should be only to open the associated dialog when clicked.
      */
-    dialog?: (props: Partial<DialogProps>) => JSX.Element;
+    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;
     /** Hanger component associated with the button. */
-    hanger?: (props: Partial<HangerProps>) => JSX.Element;
+    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;
     /** Set which icon should be rendered within button */
     icon: IconName;
     /** Menu component associated with the button. */
-    menu?: (props: Partial<MenuProps>) => JSX.Element;
+    menu?: (props: Partial<MenuProps>) => React.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?: (props: Partial<PopoverProps>) => JSX.Element;
+    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;
     /**
      * Set whether the button is rounded.
      * Default value is `false`
      */
     rounded?: boolean;
     /** A tooltip to show when hovering over the button */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
 } & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 /**
  * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.
@@ -81,24 +81,24 @@ export declare const LegacyIconButton: React.ForwardRefExoticComponent<Omit<Butt
      * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
      * the button should be only to open the associated dialog when clicked.
      */
-    dialog?: (props: Partial<DialogProps>) => JSX.Element;
+    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;
     /** Hanger component associated with the button. */
-    hanger?: (props: Partial<HangerProps>) => JSX.Element;
+    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;
     /** Set which icon should be rendered within button */
     icon: IconName;
     /** Menu component associated with the button. */
-    menu?: (props: Partial<MenuProps>) => JSX.Element;
+    menu?: (props: Partial<MenuProps>) => React.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?: (props: Partial<PopoverProps>) => JSX.Element;
+    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;
     /**
      * Set whether the button is rounded.
      * Default value is `false`
      */
     rounded?: boolean;
     /** A tooltip to show when hovering over the button */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
 } & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;