@economic/taco 2.47.0-server-1 → 2.47.0-server.10

package/dist/esm/packages/taco/src/components/BadgeIcon/BadgeIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeIcon.js","sources":["../../../../../../../src/components/BadgeIcon/BadgeIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { getSubtleColorShadeClasses, getColorShadeClasses } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { Color } from '../../types';\n\nexport type BadgeIconProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /** Icon type **/\n    icon: IconName;\n    /** Background color **/\n    color?: Color;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show small version of badge icon **/\n    small?: boolean;\n};\n\nexport const BadgeIcon = React.forwardRef(function Badge(props: BadgeIconProps, ref: React.Ref<HTMLSpanElement>) {\n    const { color, icon, subtle, small, ...otherProps } = props;\n\n    const className = cn(\n        `rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center border-transparent [&>*]:max-h-full shrink-0`,\n        { 'w-5 h-5': !small },\n        { 'w-4 h-4 text-xs': small },\n        { [getSubtleColorShadeClasses(color)]: subtle, [getColorShadeClasses(color)]: !subtle },\n        props.className\n    );\n\n    const iconProps = {\n        strokeWidth: 1,\n        stroke: 'currentColor',\n    };\n\n    return (\n        <span\n            {...otherProps}\n            aria-label=\"icon\"\n            className={className}\n            data-taco=\"badge-icon\"\n            ref={ref}\n            role=\"status\"\n            title={props['aria-label']}>\n            <Icon name={icon} {...iconProps} />\n        </span>\n    );\n});\n"],"names":["BadgeIcon","React","Badge","props","ref","color","icon","subtle","small","otherProps","className","cn","getSubtleColorShadeClasses","getColorShadeClasses","iconProps","strokeWidth","stroke","role","title","Icon","name"],"mappings":";;;;;MAiBaA,SAAS,gBAAGC,UAAgB,CAAC,SAASC,KAAKA,CAACC,KAAqB,EAAEC,GAA+B;EAC3G,MAAM;IAAEC,KAAK;IAAEC,IAAI;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAE3D,MAAMO,SAAS,GAAGC,EAAE,CAChB,4IAA4I,EAC5I;IAAE,SAAS,EAAE,CAACH;GAAO,EACrB;IAAE,iBAAiB,EAAEA;GAAO,EAC5B;IAAE,CAACI,0BAA0B,CAACP,KAAK,CAAC,GAAGE,MAAM;IAAE,CAACM,oBAAoB,CAACR,KAAK,CAAC,GAAG,CAACE;GAAQ,EACvFJ,KAAK,CAACO,SAAS,CAClB;EAED,MAAMI,SAAS,GAAG;IACdC,WAAW,EAAE,CAAC;IACdC,MAAM,EAAE;GACX;EAED,oBACIf,wCACQQ,UAAU;kBACH,MAAM;IACjBC,SAAS,EAAEA,SAAS;iBACV,YAAY;IACtBN,GAAG,EAAEA,GAAG;IACRa,IAAI,EAAC,QAAQ;IACbC,KAAK,EAAEf,KAAK,CAAC,YAAY;mBACzBF,cAACkB,IAAI;IAACC,IAAI,EAAEd;KAAUQ,SAAS,EAAI,CAChC;AAEf,CAAC;;;;"}
+{"version":3,"file":"BadgeIcon.js","sources":["../../../../../../../src/components/BadgeIcon/BadgeIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { getSubtleColorShadeClasses, getColorShadeClasses } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { Color } from '../../types';\n\nexport type BadgeIconProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /** Icon type **/\n    icon: IconName;\n    /** Background color **/\n    color?: Color;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show small version of badge icon **/\n    small?: boolean;\n};\n\nexport const BadgeIcon = React.forwardRef(function Badge(props: BadgeIconProps, ref: React.Ref<HTMLSpanElement>) {\n    const { color, icon, subtle, small, ...otherProps } = props;\n\n    const className = cn(\n        `rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center border-transparent [&>*]:max-h-full shrink-0`,\n        { 'w-5 h-5': !small },\n        { 'w-4 h-4 text-xs': small },\n        { [getSubtleColorShadeClasses(color)]: subtle, [getColorShadeClasses(color)]: !subtle },\n        props.className\n    );\n\n    const iconProps = {\n        strokeWidth: 1,\n        stroke: 'currentColor',\n    };\n\n    return (\n        <span\n            {...otherProps}\n            aria-label=\"icon\"\n            className={className}\n            data-taco=\"badge-icon\"\n            ref={ref}\n            role=\"status\"\n            title={props['aria-label']}>\n            <Icon name={icon} {...iconProps} />\n        </span>\n    );\n});\n"],"names":["BadgeIcon","React","Badge","props","ref","color","icon","subtle","small","otherProps","_objectWithoutPropertiesLoose","_excluded","className","cn","_cn","getSubtleColorShadeClasses","getColorShadeClasses","iconProps","strokeWidth","stroke","role","title","Icon","name"],"mappings":";;;;;;;IAiBaA,SAAS,gBAAGC,UAAgB,CAAC,SAASC,KAAKA,CAACC,KAAqB,EAAEC,GAA+B;;EAC3G,IAAQC,KAAK,GAAyCF,KAAK,CAAnDE,KAAK;IAAEC,IAAI,GAAmCH,KAAK,CAA5CG,IAAI;IAAEC,MAAM,GAA2BJ,KAAK,CAAtCI,MAAM;IAAEC,KAAK,GAAoBL,KAAK,CAA9BK,KAAK;IAAKC,UAAU,GAAAC,6BAAA,CAAKP,KAAK,EAAAQ,SAAA;EAE3D,IAAMC,SAAS,GAAGC,EAAE,+IAEhB;IAAE,SAAS,EAAE,CAACL;GAAO,EACrB;IAAE,iBAAiB,EAAEA;GAAO,GAAAM,GAAA,OAAAA,GAAA,CACzBC,0BAA0B,CAACV,KAAK,CAAC,IAAGE,MAAM,EAAAO,GAAA,CAAGE,oBAAoB,CAACX,KAAK,CAAC,IAAG,CAACE,MAAM,EAAAO,GAAA,GACrFX,KAAK,CAACS,SAAS,CAClB;EAED,IAAMK,SAAS,GAAG;IACdC,WAAW,EAAE,CAAC;IACdC,MAAM,EAAE;GACX;EAED,oBACIlB,wCACQQ,UAAU;kBACH,MAAM;IACjBG,SAAS,EAAEA,SAAS;iBACV,YAAY;IACtBR,GAAG,EAAEA,GAAG;IACRgB,IAAI,EAAC,QAAQ;IACbC,KAAK,EAAElB,KAAK,CAAC,YAAY;mBACzBF,cAACqB,IAAI;IAACC,IAAI,EAAEjB;KAAUW,SAAS,EAAI,CAChC;AAEf,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Banner/Banner.js

@@ -4,16 +4,13 @@ import { getBannerIcon } from './util.js';
 import { IconButton } from '../IconButton/IconButton.js';
 import { useLocalization } from '../Provider/Localization.js';
 
-const Banner = /*#__PURE__*/forwardRef(function Banner(props, ref) {
-  const {
-    children,
-    state,
-    onClose
-  } = props;
-  const {
-    texts
-  } = useLocalization();
-  const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);
+var Banner = /*#__PURE__*/forwardRef(function Banner(props, ref) {
+  var children = props.children,
+    state = props.state,
+    onClose = props.onClose;
+  var _useLocalization = useLocalization(),
+    texts = _useLocalization.texts;
+  var className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);
   return /*#__PURE__*/createElement("div", {
     className: className,
     "data-taco": "banner",

package/dist/esm/packages/taco/src/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Content can be any react element, for e.g. a `div` */\n    children: React.ReactNode;\n    /** State will change the icon displayed in banner */\n    state: State;\n    onClose?: () => void;\n};\n\nexport type BannerTexts = {\n    /** Aria-label for the close icon button of banner */\n    close: string;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, state, onClose } = props;\n    const { texts } = useLocalization();\n    const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n    return (\n        <div className={className} data-taco=\"banner\" ref={ref}>\n            {getBannerIcon(state)}\n            {children}\n            {onClose ? (\n                <IconButton\n                    aria-label={texts.banner.close}\n                    className=\"-mr-2 ml-auto self-start\"\n                    icon=\"close\"\n                    appearance=\"discrete\"\n                    onClick={onClose}\n                />\n            ) : null}\n        </div>\n    );\n});\n"],"names":["Banner","React","props","ref","children","state","onClose","texts","useLocalization","className","cn","getBannerIcon","IconButton","banner","close","icon","appearance","onClick"],"mappings":";;;;;;MAoBaA,MAAM,gBAAGC,UAAgB,CAAC,SAASD,MAAMA,CAACE,KAAkB,EAAEC,GAA8B;EACrG,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC;GAAS,GAAGJ,KAAK;EAC1C,MAAM;IAAEK;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGC,EAAE,CAAC,8EAA8E,EAAER,KAAK,CAACO,SAAS,CAAC;EAErH,oBACIR;IAAKQ,SAAS,EAAEA,SAAS;iBAAY,QAAQ;IAACN,GAAG,EAAEA;KAC9CQ,aAAa,CAACN,KAAK,CAAC,EACpBD,QAAQ,EACRE,OAAO,iBACJL,cAACW,UAAU;kBACKL,KAAK,CAACM,MAAM,CAACC,KAAK;IAC9BL,SAAS,EAAC,0BAA0B;IACpCM,IAAI,EAAC,OAAO;IACZC,UAAU,EAAC,UAAU;IACrBC,OAAO,EAAEX;IACX,IACF,IAAI,CACN;AAEd,CAAC;;;;"}
+{"version":3,"file":"Banner.js","sources":["../../../../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Content can be any react element, for e.g. a `div` */\n    children: React.ReactNode;\n    /** State will change the icon displayed in banner */\n    state: State;\n    onClose?: () => void;\n};\n\nexport type BannerTexts = {\n    /** Aria-label for the close icon button of banner */\n    close: string;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, state, onClose } = props;\n    const { texts } = useLocalization();\n    const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n    return (\n        <div className={className} data-taco=\"banner\" ref={ref}>\n            {getBannerIcon(state)}\n            {children}\n            {onClose ? (\n                <IconButton\n                    aria-label={texts.banner.close}\n                    className=\"-mr-2 ml-auto self-start\"\n                    icon=\"close\"\n                    appearance=\"discrete\"\n                    onClick={onClose}\n                />\n            ) : null}\n        </div>\n    );\n});\n"],"names":["Banner","React","props","ref","children","state","onClose","_useLocalization","useLocalization","texts","className","cn","getBannerIcon","IconButton","banner","close","icon","appearance","onClick"],"mappings":";;;;;;IAoBaA,MAAM,gBAAGC,UAAgB,CAAC,SAASD,MAAMA,CAACE,KAAkB,EAAEC,GAA8B;EACrG,IAAQC,QAAQ,GAAqBF,KAAK,CAAlCE,QAAQ;IAAEC,KAAK,GAAcH,KAAK,CAAxBG,KAAK;IAAEC,OAAO,GAAKJ,KAAK,CAAjBI,OAAO;EAChC,IAAAC,gBAAA,GAAkBC,eAAe,EAAE;IAA3BC,KAAK,GAAAF,gBAAA,CAALE,KAAK;EACb,IAAMC,SAAS,GAAGC,EAAE,CAAC,8EAA8E,EAAET,KAAK,CAACQ,SAAS,CAAC;EAErH,oBACIT;IAAKS,SAAS,EAAEA,SAAS;iBAAY,QAAQ;IAACP,GAAG,EAAEA;KAC9CS,aAAa,CAACP,KAAK,CAAC,EACpBD,QAAQ,EACRE,OAAO,iBACJL,cAACY,UAAU;kBACKJ,KAAK,CAACK,MAAM,CAACC,KAAK;IAC9BL,SAAS,EAAC,0BAA0B;IACpCM,IAAI,EAAC,OAAO;IACZC,UAAU,EAAC,UAAU;IACrBC,OAAO,EAAEZ;IACX,IACF,IAAI,CACN;AAEd,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Banner/util.js

@@ -1,10 +1,10 @@
 import React__default from 'react';
 import { BadgeIcon } from '../BadgeIcon/BadgeIcon.js';
 
-const getBannerIcon = type => {
+var getBannerIcon = function getBannerIcon(type) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "mt-[5px] self-start"
-  }, (() => {
+  }, function () {
     switch (type) {
       case 'success':
         return /*#__PURE__*/React__default.createElement(BadgeIcon, {
@@ -29,7 +29,7 @@ const getBannerIcon = type => {
       default:
         return null;
     }
-  })());
+  }());
 };
 
 export { getBannerIcon };

package/dist/esm/packages/taco/src/components/Banner/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\nimport { State } from '../../types';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\n\nexport const getBannerIcon = (type: State): JSX.Element | null => {\n    return (\n        <div className=\"mt-[5px] self-start\">\n            {(() => {\n                switch (type) {\n                    case 'success':\n                        return <BadgeIcon icon=\"tick\" color=\"green\" />;\n                    case 'error':\n                        return <BadgeIcon icon=\"close\" color=\"red\" />;\n                    case 'warning':\n                        return <BadgeIcon icon=\"warning\" color=\"yellow\" />;\n                    case 'information':\n                        return <BadgeIcon icon=\"info\" color=\"blue\" />;\n                    default:\n                        return null;\n                }\n            })()}\n        </div>\n    );\n};\n"],"names":["getBannerIcon","type","React","className","BadgeIcon","icon","color"],"mappings":";;;MAIaA,aAAa,GAAIC,IAAW;EACrC,oBACIC;IAAKC,SAAS,EAAC;KACV,CAAC;IACE,QAAQF,IAAI;MACR,KAAK,SAAS;QACV,oBAAOC,6BAACE,SAAS;UAACC,IAAI,EAAC,MAAM;UAACC,KAAK,EAAC;UAAU;MAClD,KAAK,OAAO;QACR,oBAAOJ,6BAACE,SAAS;UAACC,IAAI,EAAC,OAAO;UAACC,KAAK,EAAC;UAAQ;MACjD,KAAK,SAAS;QACV,oBAAOJ,6BAACE,SAAS;UAACC,IAAI,EAAC,SAAS;UAACC,KAAK,EAAC;UAAW;MACtD,KAAK,aAAa;QACd,oBAAOJ,6BAACE,SAAS;UAACC,IAAI,EAAC,MAAM;UAACC,KAAK,EAAC;UAAS;MACjD;QACI,OAAO,IAAI;;GAEtB,GAAG,CACF;AAEd;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\nimport { State } from '../../types';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\n\nexport const getBannerIcon = (type: State): JSX.Element | null => {\n    return (\n        <div className=\"mt-[5px] self-start\">\n            {(() => {\n                switch (type) {\n                    case 'success':\n                        return <BadgeIcon icon=\"tick\" color=\"green\" />;\n                    case 'error':\n                        return <BadgeIcon icon=\"close\" color=\"red\" />;\n                    case 'warning':\n                        return <BadgeIcon icon=\"warning\" color=\"yellow\" />;\n                    case 'information':\n                        return <BadgeIcon icon=\"info\" color=\"blue\" />;\n                    default:\n                        return null;\n                }\n            })()}\n        </div>\n    );\n};\n"],"names":["getBannerIcon","type","React","className","BadgeIcon","icon","color"],"mappings":";;;IAIaA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,IAAW;EACrC,oBACIC;IAAKC,SAAS,EAAC;KACT;IACE,QAAQF,IAAI;MACR,KAAK,SAAS;QACV,oBAAOC,6BAACE,SAAS;UAACC,IAAI,EAAC,MAAM;UAACC,KAAK,EAAC;UAAU;MAClD,KAAK,OAAO;QACR,oBAAOJ,6BAACE,SAAS;UAACC,IAAI,EAAC,OAAO;UAACC,KAAK,EAAC;UAAQ;MACjD,KAAK,SAAS;QACV,oBAAOJ,6BAACE,SAAS;UAACC,IAAI,EAAC,SAAS;UAACC,KAAK,EAAC;UAAW;MACtD,KAAK,aAAa;QACd,oBAAOJ,6BAACE,SAAS;UAACC,IAAI,EAAC,MAAM;UAACC,KAAK,EAAC;UAAS;MACjD;QACI,OAAO,IAAI;;GAEtB,EAAG,CACF;AAEd;;;;"}

package/dist/esm/packages/taco/src/components/Button/Button.js

@@ -1,51 +1,50 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'clsx';
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Icon } from '../Icon/Icon.js';
 import { createButtonWithOverlays, getButtonClasses, getAppearanceClasses, createButtonWithTooltip } from './util.js';
 
-const Base = /*#__PURE__*/forwardRef(function ButtonBase(props, ref) {
-  const {
-    appearance,
-    fluid,
-    ...otherProps
-  } = props;
-  const className = cn(getButtonClasses(), getAppearanceClasses(appearance), 'rounded px-3', {
+var _excluded = ["appearance", "fluid"],
+  _excluded2 = ["dialog", "drawer", "hanger", "menu", "popover"];
+var Base = /*#__PURE__*/forwardRef(function ButtonBase(props, ref) {
+  var appearance = props.appearance,
+    fluid = props.fluid,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+  var className = cn(getButtonClasses(), getAppearanceClasses(appearance), 'rounded px-3', {
     'w-full': fluid
   }, props.className);
-  return createButtonWithTooltip({
-    ...otherProps,
-    'data-taco': 'button'
-  }, className, ref);
+  return createButtonWithTooltip(_extends({}, otherProps, {
+    'data-taco': 'button',
+    'data-appearance': appearance
+  }), className, ref);
 });
-const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
-  const {
-    dialog,
-    drawer,
-    hanger,
-    menu,
-    popover,
-    ...buttonProps
-  } = props;
-  let children = buttonProps.children;
+var Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
+  var dialog = props.dialog,
+    drawer = props.drawer,
+    hanger = props.hanger,
+    menu = props.menu,
+    popover = props.popover,
+    buttonProps = _objectWithoutPropertiesLoose(props, _excluded2);
+  var children = buttonProps.children;
   // add a chevron icon to menu buttons
   if (typeof menu === 'function') {
-    children = Array.isArray(children) ? [...children, /*#__PURE__*/createElement(Icon, {
+    children = Array.isArray(children) ? [].concat(children, [/*#__PURE__*/createElement(Icon, {
       key: "chevron-down",
       name: "chevron-down"
-    })] : [children, /*#__PURE__*/createElement(Icon, {
+    })]) : [children, /*#__PURE__*/createElement(Icon, {
       key: "chevron-down",
       name: "chevron-down"
     })];
   }
-  const button = /*#__PURE__*/createElement(Base, Object.assign({}, buttonProps, {
+  var button = /*#__PURE__*/createElement(Base, Object.assign({}, buttonProps, {
     ref: ref
   }), children);
   return createButtonWithOverlays({
-    dialog,
-    drawer,
-    hanger,
-    menu,
-    popover
+    dialog: dialog,
+    drawer: drawer,
+    hanger: hanger,
+    menu: menu,
+    popover: popover
   }, button);
 });
 

package/dist/esm/packages/taco/src/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 '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\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    /**\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 Base = React.forwardRef(function ButtonBase(props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) {\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({ ...otherProps, 'data-taco': 'button' }, className, ref);\n});\n\nexport const Button = React.forwardRef(function Button(\n    props: ButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, 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        <Base {...buttonProps} ref={ref}>\n            {children}\n        </Base>\n    );\n\n    return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["Base","React","ButtonBase","props","ref","appearance","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","createButtonWithTooltip","Button","dialog","drawer","hanger","menu","popover","buttonProps","children","Array","isArray","Icon","key","name","button","createButtonWithOverlays"],"mappings":";;;;;AA4CA,MAAMA,IAAI,gBAAGC,UAAgB,CAAC,SAASC,UAAUA,CAACC,KAAkB,EAAEC,GAAqD;EACvH,MAAM;IAAEC,UAAU;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAClD,MAAMK,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EAAE,EAClBC,oBAAoB,CAACN,UAAU,CAAC,EAChC,cAAc,EACd;IACI,QAAQ,EAAEC;GACb,EACDH,KAAK,CAACK,SAAS,CAClB;EAED,OAAOI,uBAAuB,CAAC;IAAE,GAAGL,UAAU;IAAE,WAAW,EAAE;GAAU,EAAEC,SAAS,EAAEJ,GAAG,CAAC;AAC5F,CAAC,CAAC;MAEWS,MAAM,gBAAGZ,UAAgB,CAAC,SAASY,MAAMA,CAClDV,KAAkB,EAClBC,GAAqD;EAErD,MAAM;IAAEU,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGhB,KAAK;EAEvE,IAAIiB,QAAQ,GAAGD,WAAW,CAACC,QAAQ;;EAGnC,IAAI,OAAOH,IAAI,KAAK,UAAU,EAAE;IAC5BG,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACF,QAAQ,CAAC,GAC5B,CAAC,GAAGA,QAAQ,eAAEnB,cAACsB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC,GAC9D,CAACL,QAAQ,eAAEnB,cAACsB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC;;EAGrE,MAAMC,MAAM,gBACRzB,cAACD,IAAI,oBAAKmB,WAAW;IAAEf,GAAG,EAAEA;MACvBgB,QAAQ,CAEhB;EAED,OAAOO,wBAAwB,CAAC;IAAEb,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,EAAEQ,MAAM,CAAC;AACtF,CAAC;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../../../../../src/components/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\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    /**\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 Base = React.forwardRef(function ButtonBase(props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) {\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': 'button',\n            'data-appearance': appearance,\n        },\n        className,\n        ref\n    );\n});\n\nexport const Button = React.forwardRef(function Button(\n    props: ButtonProps,\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        <Base {...buttonProps} ref={ref}>\n            {children}\n        </Base>\n    );\n\n    return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["Base","React","ButtonBase","props","ref","appearance","fluid","otherProps","_objectWithoutPropertiesLoose","_excluded","className","cn","getButtonClasses","getAppearanceClasses","createButtonWithTooltip","_extends","Button","dialog","drawer","hanger","menu","popover","buttonProps","_excluded2","children","Array","isArray","concat","Icon","key","name","button","createButtonWithOverlays"],"mappings":";;;;;;;;AA4CA,IAAMA,IAAI,gBAAGC,UAAgB,CAAC,SAASC,UAAUA,CAACC,KAAkB,EAAEC,GAAqD;EACvH,IAAQC,UAAU,GAA2BF,KAAK,CAA1CE,UAAU;IAAEC,KAAK,GAAoBH,KAAK,CAA9BG,KAAK;IAAKC,UAAU,GAAAC,6BAAA,CAAKL,KAAK,EAAAM,SAAA;EAClD,IAAMC,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EAAE,EAClBC,oBAAoB,CAACR,UAAU,CAAC,EAChC,cAAc,EACd;IACI,QAAQ,EAAEC;GACb,EACDH,KAAK,CAACO,SAAS,CAClB;EAED,OAAOI,uBAAuB,CAAAC,QAAA,KAEnBR,UAAU;IACb,WAAW,EAAE,QAAQ;IACrB,iBAAiB,EAAEF;MAEvBK,SAAS,EACTN,GAAG,CACN;AACL,CAAC,CAAC;IAEWY,MAAM,gBAAGf,UAAgB,CAAC,SAASe,MAAMA,CAClDb,KAAkB,EAClBC,GAAqD;EAErD,IAAQa,MAAM,GAAoDd,KAAK,CAA/Dc,MAAM;IAAEC,MAAM,GAA4Cf,KAAK,CAAvDe,MAAM;IAAEC,MAAM,GAAoChB,KAAK,CAA/CgB,MAAM;IAAEC,IAAI,GAA8BjB,KAAK,CAAvCiB,IAAI;IAAEC,OAAO,GAAqBlB,KAAK,CAAjCkB,OAAO;IAAKC,WAAW,GAAAd,6BAAA,CAAKL,KAAK,EAAAoB,UAAA;EAEvE,IAAIC,QAAQ,GAAGF,WAAW,CAACE,QAAQ;;EAGnC,IAAI,OAAOJ,IAAI,KAAK,UAAU,EAAE;IAC5BI,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACF,QAAQ,CAAC,MAAAG,MAAA,CACxBH,QAAQ,gBAAEvB,cAAC2B,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,KAC7D,CAACN,QAAQ,eAAEvB,cAAC2B,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC;;EAGrE,IAAMC,MAAM,gBACR9B,cAACD,IAAI,oBAAKsB,WAAW;IAAElB,GAAG,EAAEA;MACvBoB,QAAQ,CAEhB;EAED,OAAOQ,wBAAwB,CAAC;IAAEf,MAAM,EAANA,MAAM;IAAEC,MAAM,EAANA,MAAM;IAAEC,MAAM,EAANA,MAAM;IAAEC,IAAI,EAAJA,IAAI;IAAEC,OAAO,EAAPA;GAAS,EAAEU,MAAM,CAAC;AACtF,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Button/util.js

@@ -1,39 +1,42 @@
 import React__default from 'react';
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Button } from '../../primitives/Button.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 
-const getButtonClasses = () => {
+var _excluded = ["tooltip"];
+var getButtonClasses = function 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) => {
+var getAppearanceClasses = function getAppearanceClasses(value, icon) {
+  if (icon === void 0) {
+    icon = false;
+  }
   switch (value) {
     case 'primary':
-      return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;
+      return "wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active: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 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;
+      return "wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active: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 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;
+      return "bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover: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-[#000]/[0.08] aria-disabled:text-black/30`;
+          return "bg-transparent text-black visited:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30";
         }
-        return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 aria-disabled:text-blue-500/50`;
+        return "bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 aria-disabled:text-blue-500/50";
       }
     case 'transparent':
       {
-        return `bg-transparent text-black visited:text-black hover:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;
+        return "bg-transparent text-black visited:text-black hover:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent";
       }
     default:
-      return `wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 aria-disabled:bg-grey-200/50 aria-disabled:text-black/30`;
+      return "wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 aria-disabled:bg-grey-200/50 aria-disabled:text-black/30";
   }
 };
-const createButtonWithTooltip = (props, className, ref) => {
-  const {
-    tooltip,
-    ...buttonProps
-  } = props;
-  const button = /*#__PURE__*/React__default.createElement(Button, Object.assign({}, buttonProps, {
+var createButtonWithTooltip = function createButtonWithTooltip(props, className, ref) {
+  var tooltip = props.tooltip,
+    buttonProps = _objectWithoutPropertiesLoose(props, _excluded);
+  var button = /*#__PURE__*/React__default.createElement(Button, Object.assign({}, buttonProps, {
     className: className,
     ref: ref
   }));
@@ -44,15 +47,13 @@ const createButtonWithTooltip = (props, className, ref) => {
   }
   return button;
 };
-const createButtonWithOverlays = (props, buttonBase) => {
-  const {
-    dialog,
-    drawer,
-    hanger,
-    menu,
-    popover
-  } = props;
-  let button = buttonBase;
+var createButtonWithOverlays = function createButtonWithOverlays(props, buttonBase) {
+  var dialog = props.dialog,
+    drawer = props.drawer,
+    hanger = props.hanger,
+    menu = props.menu,
+    popover = props.popover;
+  var button = buttonBase;
   if (typeof dialog === 'function') {
     button = dialog({
       trigger: button

package/dist/esm/packages/taco/src/components/Button/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    return '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 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 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 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-[#000]/[0.08] aria-disabled:text-black/30`;\n            }\n\n            return `bg-transparent text-blue-500 visited:text-blue-500 hover: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 hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;\n        }\n\n        default:\n            return `wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 aria-disabled:bg-grey-200/50 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":["getButtonClasses","getAppearanceClasses","value","icon","createButtonWithTooltip","props","className","ref","tooltip","buttonProps","button","React","ButtonPrimitive","Tooltip","title","createButtonWithOverlays","buttonBase","dialog","drawer","hanger","menu","popover","trigger","anchor"],"mappings":";;;;MAKaA,gBAAgB,GAAGA;EAC5B,OAAO,0NAA0N;AACrO;MAEaC,oBAAoB,GAAGA,CAACC,KAA6B,EAAEC,IAAI,GAAG,KAAK;EAC5E,QAAQD,KAAK;IACT,KAAK,SAAS;MACV,OAAO,qJAAqJ;IAEhK,KAAK,QAAQ;MACT,OAAO,+IAA+I;IAE1J,KAAK,OAAO;MACR,OAAO,kMAAkM;IAE7M,KAAK,UAAU;MAAE;QACb,IAAIC,IAAI,EAAE;UACN,OAAO,iGAAiG;;QAG5G,OAAO,uGAAuG;;IAGlH,KAAK,aAAa;MAAE;QAChB,OAAO,+IAA+I;;IAG1J;MACI,OAAO,kHAAkH;;AAErI;MAEaC,uBAAuB,GAAGA,CACnCC,KAAU,EACVC,SAAiB,EACjBC,GAAqD;EAErD,MAAM;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGJ,KAAK;EACzC,MAAMK,MAAM,gBAAGC,6BAACC,MAAsB,oBAAKH,WAAW;IAAEH,SAAS,EAAEA,SAAS;IAAEC,GAAG,EAAEA;KAAO;EAE1F,IAAIC,OAAO,EAAE;IACT,oBAAOG,6BAACE,OAAO;MAACC,KAAK,EAAEN;OAAUE,MAAM,CAAW;;EAGtD,OAAOA,MAAM;AACjB;MAEaK,wBAAwB,GAAGA,CAACV,KAAU,EAAEW,UAAuB;EACxE,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,GAAGhB,KAAK;EACvD,IAAIK,MAAM,GAAGM,UAAU;EAEvB,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;IAC9BP,MAAM,GAAGO,MAAM,CAAC;MAAEK,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOQ,MAAM,KAAK,UAAU,EAAE;IACrCR,MAAM,GAAGQ,MAAM,CAAC;MAAEI,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOU,IAAI,KAAK,UAAU,EAAE;IACnCV,MAAM,GAAGU,IAAI,CAAC;MAAEE,OAAO,EAAEZ;KAAQ,CAAC;GACrC,MAAM,IAAI,OAAOW,OAAO,KAAK,UAAU,EAAE;IACtCX,MAAM,GAAGW,OAAO,CAAC;MAAEC,OAAO,EAAEZ;KAAQ,CAAC;;EAGzC,IAAI,OAAOS,MAAM,KAAK,UAAU,EAAE;IAC9BT,MAAM,GAAGS,MAAM,CAAC;MAAEI,MAAM,EAAEb;KAAQ,CAAC;;EAGvC,OAAOA,MAAM;AACjB;;;;"}
+{"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 '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 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 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 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-[#000]/[0.08] aria-disabled:text-black/30`;\n            }\n\n            return `bg-transparent text-blue-500 visited:text-blue-500 hover: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 hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;\n        }\n\n        default:\n            return `wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 aria-disabled:bg-grey-200/50 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":["getButtonClasses","getAppearanceClasses","value","icon","createButtonWithTooltip","props","className","ref","tooltip","buttonProps","_objectWithoutPropertiesLoose","_excluded","button","React","ButtonPrimitive","Tooltip","title","createButtonWithOverlays","buttonBase","dialog","drawer","hanger","menu","popover","trigger","anchor"],"mappings":";;;;;;IAKaA,gBAAgB,GAAG,SAAnBA,gBAAgBA;EACzB,OAAO,0NAA0N;AACrO;IAEaC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAIC,KAA6B,EAAEC,IAAI;MAAJA,IAAI;IAAJA,IAAI,GAAG,KAAK;;EAC5E,QAAQD,KAAK;IACT,KAAK,SAAS;MACV;IAEJ,KAAK,QAAQ;MACT;IAEJ,KAAK,OAAO;MACR;IAEJ,KAAK,UAAU;MAAE;QACb,IAAIC,IAAI,EAAE;UACN;;QAGJ;;IAGJ,KAAK,aAAa;MAAE;QAChB;;IAGJ;MACI;;AAEZ;IAEaC,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAChCC,KAAU,EACVC,SAAiB,EACjBC,GAAqD;EAErD,IAAQC,OAAO,GAAqBH,KAAK,CAAjCG,OAAO;IAAKC,WAAW,GAAAC,6BAAA,CAAKL,KAAK,EAAAM,SAAA;EACzC,IAAMC,MAAM,gBAAGC,6BAACC,MAAsB,oBAAKL,WAAW;IAAEH,SAAS,EAAEA,SAAS;IAAEC,GAAG,EAAEA;KAAO;EAE1F,IAAIC,OAAO,EAAE;IACT,oBAAOK,6BAACE,OAAO;MAACC,KAAK,EAAER;OAAUI,MAAM,CAAW;;EAGtD,OAAOA,MAAM;AACjB;IAEaK,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAIZ,KAAU,EAAEa,UAAuB;EACxE,IAAQC,MAAM,GAAoCd,KAAK,CAA/Cc,MAAM;IAAEC,MAAM,GAA4Bf,KAAK,CAAvCe,MAAM;IAAEC,MAAM,GAAoBhB,KAAK,CAA/BgB,MAAM;IAAEC,IAAI,GAAcjB,KAAK,CAAvBiB,IAAI;IAAEC,OAAO,GAAKlB,KAAK,CAAjBkB,OAAO;EAC7C,IAAIX,MAAM,GAAGM,UAAU;EAEvB,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;IAC9BP,MAAM,GAAGO,MAAM,CAAC;MAAEK,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOQ,MAAM,KAAK,UAAU,EAAE;IACrCR,MAAM,GAAGQ,MAAM,CAAC;MAAEI,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOU,IAAI,KAAK,UAAU,EAAE;IACnCV,MAAM,GAAGU,IAAI,CAAC;MAAEE,OAAO,EAAEZ;KAAQ,CAAC;GACrC,MAAM,IAAI,OAAOW,OAAO,KAAK,UAAU,EAAE;IACtCX,MAAM,GAAGW,OAAO,CAAC;MAAEC,OAAO,EAAEZ;KAAQ,CAAC;;EAGzC,IAAI,OAAOS,MAAM,KAAK,UAAU,EAAE;IAC9BT,MAAM,GAAGS,MAAM,CAAC;MAAEI,MAAM,EAAEb;KAAQ,CAAC;;EAGvC,OAAOA,MAAM;AACjB;;;;"}

package/dist/esm/packages/taco/src/components/Calendar/Calendar.js

@@ -1,38 +1,35 @@
 import { useState, useEffect, createElement, memo } from 'react';
 import cn from 'clsx';
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { IconButton } from '../IconButton/IconButton.js';
 import { useLocalization } from '../Provider/Localization.js';
 import { DayPicker, Button } from 'react-day-picker';
 
-const thisYear = /*#__PURE__*/new Date().getFullYear();
-const years = [];
-for (let i = thisYear - 50; i <= thisYear + 10; i += 1) {
+var _excluded = ["onChange", "value", "disabledDays", "visibleMonth"];
+var thisYear = /*#__PURE__*/new Date().getFullYear();
+var years = [];
+for (var i = thisYear - 50; i <= thisYear + 10; i += 1) {
   years.push(i);
 }
-const Navbar = /*#__PURE__*/memo(({
-  onMonthChange,
-  value = new Date()
-}) => {
-  const {
-    texts: {
-      calendar: {
-        actions,
-        months
-      }
-    }
-  } = useLocalization();
-  const handleChange = event => {
-    const {
-      year,
-      month
-    } = event.target.form;
+var Navbar = /*#__PURE__*/memo(function (_ref) {
+  var onMonthChange = _ref.onMonthChange,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? new Date() : _ref$value;
+  var _useLocalization = useLocalization(),
+    _useLocalization$text = _useLocalization.texts.calendar,
+    actions = _useLocalization$text.actions,
+    months = _useLocalization$text.months;
+  var handleChange = function handleChange(event) {
+    var _event$target$form = event.target.form,
+      year = _event$target$form.year,
+      month = _event$target$form.month;
     onMonthChange(new Date(year.value, month.value));
   };
-  const onNextClick = () => {
+  var onNextClick = function onNextClick() {
     onMonthChange(new Date(value.getFullYear(), value.getMonth() + 1, value.getDay()));
   };
-  const onPreviousClick = () => {
+  var onPreviousClick = function onPreviousClick() {
     onMonthChange(new Date(value.getFullYear(), value.getMonth() - 1, value.getDay()));
   };
   return /*#__PURE__*/createElement("div", {
@@ -44,18 +41,22 @@ const Navbar = /*#__PURE__*/memo(({
     name: "month",
     onChange: handleChange,
     value: value.getMonth()
-  }, months.map((month, i) => (/*#__PURE__*/createElement("option", {
-    key: month,
-    value: i
-  }, month)))), /*#__PURE__*/createElement("select", {
+  }, months.map(function (month, i) {
+    return /*#__PURE__*/createElement("option", {
+      key: month,
+      value: i
+    }, month);
+  })), /*#__PURE__*/createElement("select", {
     className: "h-8 px-2",
     name: "year",
     onChange: handleChange,
     value: value.getFullYear()
-  }, years.map(year => (/*#__PURE__*/createElement("option", {
-    key: year,
-    value: year
-  }, String(year)))))), /*#__PURE__*/createElement("div", null, /*#__PURE__*/createElement(Tooltip, {
+  }, years.map(function (year) {
+    return /*#__PURE__*/createElement("option", {
+      key: year,
+      value: year
+    }, String(year));
+  }))), /*#__PURE__*/createElement("div", null, /*#__PURE__*/createElement(Tooltip, {
     title: actions.previousMonth
   }, /*#__PURE__*/createElement(IconButton, {
     appearance: "discrete",
@@ -73,14 +74,12 @@ const Navbar = /*#__PURE__*/memo(({
     rounded: true
   }))));
 });
-const TodayButton = ({
-  handleChange
-}) => {
-  const {
-    texts
-  } = useLocalization();
-  const handleCalendarClickToday = () => {
-    const today = new Date();
+var TodayButton = function TodayButton(_ref2) {
+  var handleChange = _ref2.handleChange;
+  var _useLocalization2 = useLocalization(),
+    texts = _useLocalization2.texts;
+  var handleCalendarClickToday = function handleCalendarClickToday() {
+    var today = new Date();
     // set to midday to avoid UTC offset causing dates to be mismatched server side
     today.setHours(12);
     today.setMinutes(0);
@@ -92,58 +91,64 @@ const TodayButton = ({
     onClick: handleCalendarClickToday
   }, texts.calendar.actions.today);
 };
-const Calendar = props => {
-  const {
-    onChange: handleChange,
-    value,
-    disabledDays,
-    ...otherProps
-  } = props;
-  const [visibleMonth, setVisibleMonth] = useState(value !== null && value !== void 0 ? value : new Date());
-  const {
-    texts
-  } = useLocalization();
-  useEffect(() => {
-    if (visibleMonth !== value) {
-      setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
+var Calendar = function Calendar(props) {
+  var _ref3;
+  var handleChange = props.onChange,
+    value = props.value,
+    disabledDays = props.disabledDays,
+    visibleMonth = props.visibleMonth,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+  var _React$useState = useState((_ref3 = visibleMonth !== null && visibleMonth !== void 0 ? visibleMonth : value) !== null && _ref3 !== void 0 ? _ref3 : new Date()),
+    internalVisibleMonth = _React$useState[0],
+    setInternalVisibleMonth = _React$useState[1];
+  var _useLocalization3 = useLocalization(),
+    texts = _useLocalization3.texts;
+  useEffect(function () {
+    if (visibleMonth && visibleMonth !== internalVisibleMonth) {
+      setInternalVisibleMonth(visibleMonth);
     }
-    // visibleMonth in deps array breaking month switching logic. It should not be in deps array.
-  }, [value]);
-  const handleDayClick = (date, modifiers, event) => {
+  }, [visibleMonth]);
+  var handleDayClick = function handleDayClick(date, modifiers, event) {
     if (modifiers.outside || modifiers.disabled) {
       return;
     }
     handleChange(date, event);
   };
-  const className = cn('flex bg-white text-xs p-2', otherProps.className);
+  var className = cn('flex bg-white text-xs p-2', otherProps.className);
   return /*#__PURE__*/createElement("div", {
     "data-taco": "calendar"
   }, /*#__PURE__*/createElement(DayPicker, {
     className: className,
     captionLayout: "dropdown-buttons",
     weekStartsOn: 1,
-    month: visibleMonth,
+    month: internalVisibleMonth,
     numberOfMonths: 1,
     components: {
-      Caption: props => /*#__PURE__*/createElement(Navbar, Object.assign({}, props, {
-        onMonthChange: setVisibleMonth,
-        value: visibleMonth
-      })),
-      Footer: () => (/*#__PURE__*/createElement("tfoot", null, /*#__PURE__*/createElement("tr", null, /*#__PURE__*/createElement("td", {
-        colSpan: 7,
-        className: "text-center"
-      }, /*#__PURE__*/createElement(TodayButton, {
-        handleChange: handleChange
-      }))))),
-      HeadRow: () => (/*#__PURE__*/createElement("tr", null, texts.calendar.weekdaysShort.map((weekday, index) => {
-        const label = texts.calendar.weekdays && texts.calendar.weekdays[index];
-        return /*#__PURE__*/createElement("th", {
-          key: weekday,
-          "aria-label": label,
-          className: "rdp-head_cell",
-          title: label
-        }, weekday);
-      })))
+      Caption: function Caption(props) {
+        return /*#__PURE__*/createElement(Navbar, Object.assign({}, props, {
+          onMonthChange: setInternalVisibleMonth,
+          value: internalVisibleMonth
+        }));
+      },
+      Footer: function Footer() {
+        return /*#__PURE__*/createElement("tfoot", null, /*#__PURE__*/createElement("tr", null, /*#__PURE__*/createElement("td", {
+          colSpan: 7,
+          className: "text-center"
+        }, /*#__PURE__*/createElement(TodayButton, {
+          handleChange: handleChange
+        }))));
+      },
+      HeadRow: function HeadRow() {
+        return /*#__PURE__*/createElement("tr", null, texts.calendar.weekdaysShort.map(function (weekday, index) {
+          var label = texts.calendar.weekdays && texts.calendar.weekdays[index];
+          return /*#__PURE__*/createElement("th", {
+            key: weekday,
+            "aria-label": label,
+            className: "rdp-head_cell",
+            title: label
+          }, weekday);
+        }));
+      }
     },
     onDayClick: handleDayClick,
     selected: value,

package/dist/esm/packages/taco/src/components/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Button, CaptionProps, DayClickEventHandler, DayPicker, Matcher } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport './Calendar.css';\n\nexport type CalendarTextsActions = {\n    /** Aria-label for previous month action button */\n    previousMonth: string;\n    /** Aria-label for next month action button */\n    nextMonth: string;\n    /** Aria-label for previous year action button */\n    previousYear: string;\n    /** Aria-label for next year action button */\n    nextYear: string;\n    /** Text displayed within today action button */\n    today: string;\n};\n\nexport type CalendarTexts = {\n    /** Text and aria-label for action buttons in Calendar */\n    actions: CalendarTextsActions;\n    /** Text abbreviation for months in Calendar's header, starting with January */\n    months: string[];\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\n    weekdaysShort: string[];\n    /** Text for days in Calendar's header, starting with Sunday */\n    weekdays: string[];\n};\n\n/** @internal */\ntype CustomNavbarElementProps = {\n    onMonthChange: (month: Date) => void;\n    value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 50; i <= thisYear + 10; i += 1) {\n    years.push(i);\n}\n\nconst Navbar = React.memo(({ onMonthChange, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n    const {\n        texts: {\n            calendar: { actions, months },\n        },\n    } = useLocalization();\n\n    const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n        const { year, month } = event.target.form as HTMLFormElement;\n        onMonthChange(new Date(year.value, month.value));\n    };\n\n    const onNextClick = () => {\n        onMonthChange(new Date(value.getFullYear(), value.getMonth() + 1, value.getDay()));\n    };\n\n    const onPreviousClick = () => {\n        onMonthChange(new Date(value.getFullYear(), value.getMonth() - 1, value.getDay()));\n    };\n\n    return (\n        <div className=\"mb-3 flex items-center justify-between\">\n            <form className=\"inline-flex space-x-1\">\n                <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n                    {months.map((month, i) => (\n                        <option key={month} value={i}>\n                            {month}\n                        </option>\n                    ))}\n                </select>\n                <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n                    {years.map(year => (\n                        <option key={year} value={year}>\n                            {String(year)}\n                        </option>\n                    ))}\n                </select>\n            </form>\n            <div>\n                <Tooltip title={actions.previousMonth}>\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-left\"\n                        aria-label={actions.previousMonth}\n                        onClick={onPreviousClick}\n                        rounded\n                    />\n                </Tooltip>\n                <Tooltip title={actions.nextMonth}>\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-right\"\n                        aria-label={actions.nextMonth}\n                        onClick={onNextClick}\n                        rounded\n                    />\n                </Tooltip>\n            </div>\n        </div>\n    );\n});\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n    /** Handler called when a day is clicked in calendar */\n    onChange: (date: Date, event?: React.MouseEvent<Element>) => void;\n    value?: Date;\n    disabledDays?: Matcher[];\n};\n\nconst TodayButton = ({ handleChange }: { handleChange: (month: Date) => void }) => {\n    const { texts } = useLocalization();\n\n    const handleCalendarClickToday = (): void => {\n        const today = new Date();\n\n        // set to midday to avoid UTC offset causing dates to be mismatched server side\n        today.setHours(12);\n        today.setMinutes(0);\n        today.setSeconds(0);\n\n        handleChange(today);\n    };\n    return (\n        <Button\n            className=\"cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n            onClick={handleCalendarClickToday}>\n            {texts.calendar.actions.today}\n        </Button>\n    );\n};\n\nexport const Calendar = (props: CalendarProps) => {\n    const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n    const { texts } = useLocalization();\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n        // visibleMonth in deps array breaking month switching logic. It should not be in deps array.\n    }, [value]);\n\n    const handleDayClick: DayClickEventHandler = (date, modifiers, event) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, event);\n    };\n\n    const className = cn('flex bg-white text-xs p-2', otherProps.className);\n\n    return (\n        <div data-taco=\"calendar\">\n            <DayPicker\n                className={className}\n                captionLayout=\"dropdown-buttons\"\n                weekStartsOn={1}\n                month={visibleMonth}\n                numberOfMonths={1}\n                components={{\n                    Caption: (props: CaptionProps) => <Navbar {...props} onMonthChange={setVisibleMonth} value={visibleMonth} />,\n                    Footer: () => (\n                        <tfoot>\n                            <tr>\n                                <td colSpan={7} className=\"text-center\">\n                                    <TodayButton handleChange={handleChange} />\n                                </td>\n                            </tr>\n                        </tfoot>\n                    ),\n                    HeadRow: () => (\n                        <tr>\n                            {texts.calendar.weekdaysShort.map((weekday, index) => {\n                                const label = texts.calendar.weekdays && texts.calendar.weekdays[index];\n                                return (\n                                    <th key={weekday} aria-label={label} className=\"rdp-head_cell\" title={label}>\n                                        {weekday}\n                                    </th>\n                                );\n                            })}\n                        </tr>\n                    ),\n                }}\n                onDayClick={handleDayClick}\n                selected={value}\n                disabled={disabledDays}\n            />\n        </div>\n    );\n};\n"],"names":["thisYear","Date","getFullYear","years","i","push","Navbar","React","onMonthChange","value","texts","calendar","actions","months","useLocalization","handleChange","event","year","month","target","form","onNextClick","getMonth","getDay","onPreviousClick","className","name","onChange","map","key","String","Tooltip","title","previousMonth","IconButton","appearance","icon","onClick","rounded","nextMonth","TodayButton","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","Button","Calendar","props","disabledDays","otherProps","visibleMonth","setVisibleMonth","handleDayClick","date","modifiers","outside","disabled","cn","DayPicker","captionLayout","weekStartsOn","numberOfMonths","components","Caption","Footer","colSpan","HeadRow","weekdaysShort","weekday","index","label","weekdays","onDayClick","selected"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Button, CaptionProps, DayClickEventHandler, DayPicker, Matcher } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport './Calendar.css';\n\nexport type CalendarTextsActions = {\n    /** Aria-label for previous month action button */\n    previousMonth: string;\n    /** Aria-label for next month action button */\n    nextMonth: string;\n    /** Aria-label for previous year action button */\n    previousYear: string;\n    /** Aria-label for next year action button */\n    nextYear: string;\n    /** Text displayed within today action button */\n    today: string;\n};\n\nexport type CalendarTexts = {\n    /** Text and aria-label for action buttons in Calendar */\n    actions: CalendarTextsActions;\n    /** Text abbreviation for months in Calendar's header, starting with January */\n    months: string[];\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\n    weekdaysShort: string[];\n    /** Text for days in Calendar's header, starting with Sunday */\n    weekdays: string[];\n};\n\n/** @internal */\ntype CustomNavbarElementProps = {\n    onMonthChange: (month: Date) => void;\n    value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 50; i <= thisYear + 10; i += 1) {\n    years.push(i);\n}\n\nconst Navbar = React.memo(({ onMonthChange, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n    const {\n        texts: {\n            calendar: { actions, months },\n        },\n    } = useLocalization();\n\n    const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n        const { year, month } = event.target.form as HTMLFormElement;\n        onMonthChange(new Date(year.value, month.value));\n    };\n\n    const onNextClick = () => {\n        onMonthChange(new Date(value.getFullYear(), value.getMonth() + 1, value.getDay()));\n    };\n\n    const onPreviousClick = () => {\n        onMonthChange(new Date(value.getFullYear(), value.getMonth() - 1, value.getDay()));\n    };\n\n    return (\n        <div className=\"mb-3 flex items-center justify-between\">\n            <form className=\"inline-flex space-x-1\">\n                <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n                    {months.map((month, i) => (\n                        <option key={month} value={i}>\n                            {month}\n                        </option>\n                    ))}\n                </select>\n                <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n                    {years.map(year => (\n                        <option key={year} value={year}>\n                            {String(year)}\n                        </option>\n                    ))}\n                </select>\n            </form>\n            <div>\n                <Tooltip title={actions.previousMonth}>\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-left\"\n                        aria-label={actions.previousMonth}\n                        onClick={onPreviousClick}\n                        rounded\n                    />\n                </Tooltip>\n                <Tooltip title={actions.nextMonth}>\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-right\"\n                        aria-label={actions.nextMonth}\n                        onClick={onNextClick}\n                        rounded\n                    />\n                </Tooltip>\n            </div>\n        </div>\n    );\n});\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n    /** Handler called when a day is clicked in calendar */\n    onChange: (date: Date, event?: React.MouseEvent<Element>) => void;\n    value?: Date;\n    disabledDays?: Matcher[];\n    visibleMonth?: Date;\n};\n\nconst TodayButton = ({ handleChange }: { handleChange: (month: Date) => void }) => {\n    const { texts } = useLocalization();\n\n    const handleCalendarClickToday = (): void => {\n        const today = new Date();\n\n        // set to midday to avoid UTC offset causing dates to be mismatched server side\n        today.setHours(12);\n        today.setMinutes(0);\n        today.setSeconds(0);\n\n        handleChange(today);\n    };\n    return (\n        <Button\n            className=\"cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n            onClick={handleCalendarClickToday}>\n            {texts.calendar.actions.today}\n        </Button>\n    );\n};\n\nexport const Calendar = (props: CalendarProps) => {\n    const { onChange: handleChange, value, disabledDays, visibleMonth, ...otherProps } = props;\n    const [internalVisibleMonth, setInternalVisibleMonth] = React.useState(visibleMonth ?? value ?? new Date());\n    const { texts } = useLocalization();\n\n    React.useEffect(() => {\n        if (visibleMonth && visibleMonth !== internalVisibleMonth) {\n            setInternalVisibleMonth(visibleMonth);\n        }\n    }, [visibleMonth]);\n\n    const handleDayClick: DayClickEventHandler = (date, modifiers, event) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, event);\n    };\n\n    const className = cn('flex bg-white text-xs p-2', otherProps.className);\n\n    return (\n        <div data-taco=\"calendar\">\n            <DayPicker\n                className={className}\n                captionLayout=\"dropdown-buttons\"\n                weekStartsOn={1}\n                month={internalVisibleMonth}\n                numberOfMonths={1}\n                components={{\n                    Caption: (props: CaptionProps) => (\n                        <Navbar {...props} onMonthChange={setInternalVisibleMonth} value={internalVisibleMonth} />\n                    ),\n                    Footer: () => (\n                        <tfoot>\n                            <tr>\n                                <td colSpan={7} className=\"text-center\">\n                                    <TodayButton handleChange={handleChange} />\n                                </td>\n                            </tr>\n                        </tfoot>\n                    ),\n                    HeadRow: () => (\n                        <tr>\n                            {texts.calendar.weekdaysShort.map((weekday, index) => {\n                                const label = texts.calendar.weekdays && texts.calendar.weekdays[index];\n                                return (\n                                    <th key={weekday} aria-label={label} className=\"rdp-head_cell\" title={label}>\n                                        {weekday}\n                                    </th>\n                                );\n                            })}\n                        </tr>\n                    ),\n                }}\n                onDayClick={handleDayClick}\n                selected={value}\n                disabled={disabledDays}\n            />\n        </div>\n    );\n};\n"],"names":["thisYear","Date","getFullYear","years","i","push","Navbar","React","_ref","onMonthChange","_ref$value","value","_useLocalization","useLocalization","_useLocalization$text","texts","calendar","actions","months","handleChange","event","_event$target$form","target","form","year","month","onNextClick","getMonth","getDay","onPreviousClick","className","name","onChange","map","key","String","Tooltip","title","previousMonth","IconButton","appearance","icon","onClick","rounded","nextMonth","TodayButton","_ref2","_useLocalization2","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","Button","Calendar","props","disabledDays","visibleMonth","otherProps","_objectWithoutPropertiesLoose","_excluded","_React$useState","_ref3","internalVisibleMonth","setInternalVisibleMonth","_useLocalization3","handleDayClick","date","modifiers","outside","disabled","cn","DayPicker","captionLayout","weekStartsOn","numberOfMonths","components","Caption","Footer","colSpan","HeadRow","weekdaysShort","weekday","index","label","weekdays","onDayClick","selected"],"mappings":"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"}