@economic/taco 0.0.33-alpha.1 → 1.0.0-alpha.0

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

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import { Icon } from '../Icon/Icon.js';
 
-const getBannerIcon = type => {
+var getBannerIcon = function getBannerIcon(type) {
   switch (type) {
     case 'success':
       return React__default.createElement(Icon, {

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

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Icon } from '../Icon/Icon';\r\nimport { State } from '../../types';\r\n\r\nexport const getBannerIcon = (type: State): JSX.Element | null => {\r\n    switch (type) {\r\n        case 'success':\r\n            return <Icon name=\"tick\" className=\"rounded-full yt-green-solid mr-4\" />;\r\n\r\n        case 'error':\r\n            return <Icon name=\"warning\" className=\"rounded-full yt-red-solid mr-4\" />;\r\n\r\n        case 'warning':\r\n            return <Icon name=\"warning\" className=\"rounded-full yt-yellow-solid mr-4\" />;\r\n\r\n        case 'information':\r\n            return <Icon name=\"info\" className=\"rounded-full yt-blue-solid mr-4\" />;\r\n\r\n        default:\r\n            return null;\r\n    }\r\n};\r\n"],"names":["getBannerIcon","type","React","Icon","name","className"],"mappings":";;;MAIaA,aAAa,GAAIC,IAAD;AACzB,UAAQA,IAAR;AACI,SAAK,SAAL;AACI,aAAOC,4BAAA,CAACC,IAAD;AAAMC,QAAAA,IAAI,EAAC;AAAOC,QAAAA,SAAS,EAAC;OAA5B,CAAP;;AAEJ,SAAK,OAAL;AACI,aAAOH,4BAAA,CAACC,IAAD;AAAMC,QAAAA,IAAI,EAAC;AAAUC,QAAAA,SAAS,EAAC;OAA/B,CAAP;;AAEJ,SAAK,SAAL;AACI,aAAOH,4BAAA,CAACC,IAAD;AAAMC,QAAAA,IAAI,EAAC;AAAUC,QAAAA,SAAS,EAAC;OAA/B,CAAP;;AAEJ,SAAK,aAAL;AACI,aAAOH,4BAAA,CAACC,IAAD;AAAMC,QAAAA,IAAI,EAAC;AAAOC,QAAAA,SAAS,EAAC;OAA5B,CAAP;;AAEJ;AACI,aAAO,IAAP;AAdR;AAgBH;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '../Icon/Icon';\nimport { State } from '../../types';\n\nexport const getBannerIcon = (type: State): JSX.Element | null => {\n    switch (type) {\n        case 'success':\n            return <Icon name=\"tick\" className=\"rounded-full yt-green-solid mr-4\" />;\n\n        case 'error':\n            return <Icon name=\"warning\" className=\"rounded-full yt-red-solid mr-4\" />;\n\n        case 'warning':\n            return <Icon name=\"warning\" className=\"rounded-full yt-yellow-solid mr-4\" />;\n\n        case 'information':\n            return <Icon name=\"info\" className=\"rounded-full yt-blue-solid mr-4\" />;\n\n        default:\n            return null;\n    }\n};\n"],"names":["getBannerIcon","type","React","Icon","name","className"],"mappings":";;;IAIaA,aAAa,GAAG,SAAhBA,aAAgB,CAACC,IAAD;AACzB,UAAQA,IAAR;AACI,SAAK,SAAL;AACI,aAAOC,4BAAA,CAACC,IAAD;AAAMC,QAAAA,IAAI,EAAC;AAAOC,QAAAA,SAAS,EAAC;OAA5B,CAAP;;AAEJ,SAAK,OAAL;AACI,aAAOH,4BAAA,CAACC,IAAD;AAAMC,QAAAA,IAAI,EAAC;AAAUC,QAAAA,SAAS,EAAC;OAA/B,CAAP;;AAEJ,SAAK,SAAL;AACI,aAAOH,4BAAA,CAACC,IAAD;AAAMC,QAAAA,IAAI,EAAC;AAAUC,QAAAA,SAAS,EAAC;OAA/B,CAAP;;AAEJ,SAAK,aAAL;AACI,aAAOH,4BAAA,CAACC,IAAD;AAAMC,QAAAA,IAAI,EAAC;AAAOC,QAAAA,SAAS,EAAC;OAA5B,CAAP;;AAEJ;AACI,aAAO,IAAP;AAdR;AAgBH;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { Appearance } from '../../types';\r\nimport * as ButtonPrimitive from '../../primitives/Button';\r\nimport { getAppearanceClasses, getButtonClasses, createButton } from './util';\r\nimport { HangerProps } from '../Hanger/Hanger';\r\nimport { MenuProps } from '../Menu/Menu';\r\nimport { DialogProps } from '../Dialog/Dialog';\r\nimport { PopoverProps } from '../Popover/Popover';\r\nimport './Button.css';\r\nimport { Icon } from '../Icon/Icon';\r\n\r\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\r\n    /** Appearance will change the style of the button */\r\n    appearance?: Appearance;\r\n    /**\r\n     * Dialog component associated with the button, clicking the button will open the dialog.\r\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\r\n     * the button should be only to open the associated dialog when clicked.\r\n     */\r\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\r\n    /** If fluid, button expands to the width of it's container */\r\n    fluid?: boolean;\r\n    /** Hanger component associated with the button. */\r\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\r\n    /** Menu component associated with the button. */\r\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\r\n    /**\r\n     * Popover component associated with the button, clicking the button will open the popover.\r\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\r\n     * the button should be only to open the associated popover when clicked.\r\n     */\r\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\r\n    /** A tooltip to show when hovering over the button */\r\n    tooltip?: string;\r\n};\r\n\r\nexport const Button = React.forwardRef(function Button(\r\n    props: ButtonProps,\r\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\r\n) {\r\n    const { fluid, ...otherProps } = props;\r\n    const className = cn(\r\n        getButtonClasses(),\r\n        getAppearanceClasses(otherProps.appearance),\r\n        'rounded px-3',\r\n        {\r\n            'cursor-not-allowed opacity-50': props.disabled,\r\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\r\n            'w-full': fluid,\r\n        },\r\n        props.className\r\n    );\r\n\r\n    let children = otherProps.children;\r\n\r\n    // add a chevron icon to menu buttons\r\n    if (typeof otherProps.menu === 'function') {\r\n        children = Array.isArray(children)\r\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\r\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\r\n    }\r\n\r\n    return createButton({ ...otherProps, children, 'data-taco': 'button' }, className, ref);\r\n});\r\n"],"names":["Button","React","props","ref","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","children","menu","Array","isArray","Icon","key","name","createButton"],"mappings":";;;;;;;IAqCaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CACnCE,KADmC,EAEnCC,GAFmC;AAInC,MAAQC,KAAR,GAAiCF,KAAjC,CAAQE,KAAR;AAAA,MAAkBC,UAAlB,iCAAiCH,KAAjC;;AACA,MAAMI,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,CAFJ,EAGhB,cAHgB,EAIhB;AACI,qCAAiCR,KAAK,CAACS,QAD3C;AAEI,4CAAwC,CAACT,KAAK,CAACS,QAFnD;AAGI,cAAUP;AAHd,GAJgB,EAShBF,KAAK,CAACI,SATU,CAApB;AAYA,MAAIM,QAAQ,GAAGP,UAAU,CAACO,QAA1B;;AAGA,MAAI,OAAOP,UAAU,CAACQ,IAAlB,KAA2B,UAA/B,EAA2C;AACvCD,IAAAA,QAAQ,GAAGE,KAAK,CAACC,OAAN,CAAcH,QAAd,cACDA,QADC,GACSX,aAAA,CAACe,IAAD;AAAMC,MAAAA,GAAG,EAAC;AAAeC,MAAAA,IAAI,EAAC;KAA9B,CADT,KAEL,CAACN,QAAD,EAAWX,aAAA,CAACe,IAAD;AAAMC,MAAAA,GAAG,EAAC;AAAeC,MAAAA,IAAI,EAAC;KAA9B,CAAX,CAFN;AAGH;;AAED,SAAOC,YAAY,cAAMd,UAAN;AAAkBO,IAAAA,QAAQ,EAARA,QAAlB;AAA4B,iBAAa;AAAzC,MAAqDN,SAArD,EAAgEH,GAAhE,CAAnB;AACH,CA3BqB;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButton } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { MenuProps } from '../Menu/Menu';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../Icon/Icon';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string;\n};\n\nexport const Button = React.forwardRef(function Button(\n    props: ButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        getAppearanceClasses(otherProps.appearance),\n        'rounded px-3',\n        {\n            'cursor-not-allowed opacity-50': props.disabled,\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    let children = otherProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof otherProps.menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    return createButton({ ...otherProps, children, 'data-taco': 'button' }, className, ref);\n});\n"],"names":["Button","React","props","ref","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","children","menu","Array","isArray","Icon","key","name","createButton"],"mappings":";;;;;;;IAqCaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CACnCE,KADmC,EAEnCC,GAFmC;AAInC,MAAQC,KAAR,GAAiCF,KAAjC,CAAQE,KAAR;AAAA,MAAkBC,UAAlB,iCAAiCH,KAAjC;;AACA,MAAMI,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,CAFJ,EAGhB,cAHgB,EAIhB;AACI,qCAAiCR,KAAK,CAACS,QAD3C;AAEI,4CAAwC,CAACT,KAAK,CAACS,QAFnD;AAGI,cAAUP;AAHd,GAJgB,EAShBF,KAAK,CAACI,SATU,CAApB;AAYA,MAAIM,QAAQ,GAAGP,UAAU,CAACO,QAA1B;;AAGA,MAAI,OAAOP,UAAU,CAACQ,IAAlB,KAA2B,UAA/B,EAA2C;AACvCD,IAAAA,QAAQ,GAAGE,KAAK,CAACC,OAAN,CAAcH,QAAd,cACDA,QADC,GACSX,aAAA,CAACe,IAAD;AAAMC,MAAAA,GAAG,EAAC;AAAeC,MAAAA,IAAI,EAAC;KAA9B,CADT,KAEL,CAACN,QAAD,EAAWX,aAAA,CAACe,IAAD;AAAMC,MAAAA,GAAG,EAAC;AAAeC,MAAAA,IAAI,EAAC;KAA9B,CAAX,CAFN;AAGH;;AAED,SAAOC,YAAY,cAAMd,UAAN;AAAkBO,IAAAA,QAAQ,EAARA,QAAlB;AAA4B,iBAAa;AAAzC,MAAqDN,SAArD,EAAgEH,GAAhE,CAAnB;AACH,CA3BqB;;;;"}

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

@@ -1,44 +1,49 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { Button } from '../../primitives/Button.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 
-const getButtonClasses = () => {
+var _excluded = ["dialog", "hanger", "menu", "popover", "tooltip"];
+var getButtonClasses = function getButtonClasses() {
   return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max inline-flex items-center justify-center border';
 };
-const getAppearanceClasses = (value, icon = false) => {
+var getAppearanceClasses = function getAppearanceClasses(value, icon) {
+  if (icon === void 0) {
+    icon = false;
+  }
+
   switch (value) {
     case 'primary':
-      return `yt-blue-solid border-blue focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white  hover:bg-blue-light hover:border-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid`;
+      return "yt-blue-solid border-blue focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white  hover:bg-blue-light hover:border-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid";
 
     case 'danger':
-      return `yt-red-solid border-red focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white  hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid`;
+      return "yt-red-solid border-red focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white  hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid";
 
     case 'ghost':
-      return `yt-blue-inverted focus:bg-transparent focus:text-blue focus:yt-focus active:bg-blue-lightest active:border-blue active:text-blue-dark  hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light disabled:hover:yt-blue-inverted`;
+      return "yt-blue-inverted focus:bg-transparent focus:text-blue focus:yt-focus active:bg-blue-lightest active:border-blue active:text-blue-dark  hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light disabled:hover:yt-blue-inverted";
 
     case 'discrete':
       {
         if (icon) {
-          return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:yt-transparent`;
+          return "bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:yt-transparent";
         }
 
-        return `yt-transparent border-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent`;
+        return "yt-transparent border-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent";
       }
 
     default:
-      return `yt-grey-solid border-grey focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid`;
+      return "yt-grey-solid border-grey focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid";
   }
 };
-const createButton = (props, className, ref) => {
-  const {
-    dialog,
-    hanger,
-    menu,
-    popover,
-    tooltip,
-    ...otherProps
-  } = props;
-  let button = React__default.createElement(Button, Object.assign({}, otherProps, {
+var createButton = function createButton(props, className, ref) {
+  var dialog = props.dialog,
+      hanger = props.hanger,
+      menu = props.menu,
+      popover = props.popover,
+      tooltip = props.tooltip,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var button = React__default.createElement(Button, Object.assign({}, otherProps, {
     className: className,
     ref: ref
   }));

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

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Appearance } from '../../types';\r\nimport * as ButtonPrimitive from '../../primitives/Button';\r\nimport { Tooltip } from '../Tooltip/Tooltip';\r\n\r\nexport const getButtonClasses = () => {\r\n    return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max inline-flex items-center justify-center border';\r\n};\r\n\r\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\r\n    switch (value) {\r\n        case 'primary':\r\n            return `yt-blue-solid border-blue focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white  hover:bg-blue-light hover:border-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid`;\r\n\r\n        case 'danger':\r\n            return `yt-red-solid border-red focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white  hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid`;\r\n\r\n        case 'ghost':\r\n            return `yt-blue-inverted focus:bg-transparent focus:text-blue focus:yt-focus active:bg-blue-lightest active:border-blue active:text-blue-dark  hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light disabled:hover:yt-blue-inverted`;\r\n\r\n        case 'discrete': {\r\n            if (icon) {\r\n                return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:yt-transparent`;\r\n            }\r\n\r\n            return `yt-transparent border-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent`;\r\n        }\r\n\r\n        default:\r\n            return `yt-grey-solid border-grey focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid`;\r\n    }\r\n};\r\n\r\nexport const createButton = (\r\n    props: any,\r\n    className: string,\r\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\r\n): JSX.Element => {\r\n    const { dialog, hanger, menu, popover, tooltip, ...otherProps } = props;\r\n\r\n    let button = <ButtonPrimitive.Button {...otherProps} className={className} ref={ref} />;\r\n\r\n    if (typeof dialog === 'function') {\r\n        button = dialog({ trigger: button });\r\n    } else if (typeof menu === 'function') {\r\n        button = menu({ trigger: button, appearance: otherProps.appearance });\r\n    } else if (typeof popover === 'function') {\r\n        button = popover({ trigger: button });\r\n    }\r\n\r\n    if (typeof hanger === 'function') {\r\n        button = hanger({ anchor: button });\r\n    }\r\n\r\n    if (tooltip) {\r\n        button = <Tooltip title={tooltip}>{button}</Tooltip>;\r\n    }\r\n\r\n    return button;\r\n};\r\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButton","props","className","ref","dialog","hanger","menu","popover","tooltip","otherProps","button","React","ButtonPrimitive","trigger","appearance","anchor","Tooltip","title"],"mappings":";;;;MAKaA,gBAAgB,GAAG;AAC5B,SAAO,8GAAP;AACH;MAEYC,oBAAoB,GAAG,CAACC,KAAD,EAAgCC,IAAI,GAAG,KAAvC;AAChC,UAAQD,KAAR;AACI,SAAK,SAAL;AACI,sSAAA;;AAEJ,SAAK,QAAL;AACI,6OAAA;;AAEJ,SAAK,OAAL;AACI,iVAAA;;AAEJ,SAAK,UAAL;AAAiB;AACb,YAAIC,IAAJ,EAAU;AACN,qMAAA;AACH;;AAED,uLAAA;AACH;;AAED;AACI,4OAAA;AAnBR;AAqBH;MAEYC,YAAY,GAAG,CACxBC,KADwB,EAExBC,SAFwB,EAGxBC,GAHwB;AAKxB,QAAM;AAAEC,IAAAA,MAAF;AAAUC,IAAAA,MAAV;AAAkBC,IAAAA,IAAlB;AAAwBC,IAAAA,OAAxB;AAAiCC,IAAAA,OAAjC;AAA0C,OAAGC;AAA7C,MAA4DR,KAAlE;AAEA,MAAIS,MAAM,GAAGC,4BAAA,CAACC,MAAD,oBAA4BH;AAAYP,IAAAA,SAAS,EAAEA;AAAWC,IAAAA,GAAG,EAAEA;IAAnE,CAAb;;AAEA,MAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;AAC9BM,IAAAA,MAAM,GAAGN,MAAM,CAAC;AAAES,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAf;AACH,GAFD,MAEO,IAAI,OAAOJ,IAAP,KAAgB,UAApB,EAAgC;AACnCI,IAAAA,MAAM,GAAGJ,IAAI,CAAC;AAAEO,MAAAA,OAAO,EAAEH,MAAX;AAAmBI,MAAAA,UAAU,EAAEL,UAAU,CAACK;AAA1C,KAAD,CAAb;AACH,GAFM,MAEA,IAAI,OAAOP,OAAP,KAAmB,UAAvB,EAAmC;AACtCG,IAAAA,MAAM,GAAGH,OAAO,CAAC;AAAEM,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAhB;AACH;;AAED,MAAI,OAAOL,MAAP,KAAkB,UAAtB,EAAkC;AAC9BK,IAAAA,MAAM,GAAGL,MAAM,CAAC;AAAEU,MAAAA,MAAM,EAAEL;AAAV,KAAD,CAAf;AACH;;AAED,MAAIF,OAAJ,EAAa;AACTE,IAAAA,MAAM,GAAGC,4BAAA,CAACK,OAAD;AAASC,MAAAA,KAAK,EAAET;KAAhB,EAA0BE,MAA1B,CAAT;AACH;;AAED,SAAOA,MAAP;AACH;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max inline-flex items-center justify-center border';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n    switch (value) {\n        case 'primary':\n            return `yt-blue-solid border-blue focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white  hover:bg-blue-light hover:border-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid`;\n\n        case 'danger':\n            return `yt-red-solid border-red focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white  hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid`;\n\n        case 'ghost':\n            return `yt-blue-inverted focus:bg-transparent focus:text-blue focus:yt-focus active:bg-blue-lightest active:border-blue active:text-blue-dark  hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light disabled:hover:yt-blue-inverted`;\n\n        case 'discrete': {\n            if (icon) {\n                return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:yt-transparent`;\n            }\n\n            return `yt-transparent border-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent`;\n        }\n\n        default:\n            return `yt-grey-solid border-grey focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid`;\n    }\n};\n\nexport const createButton = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n    const { dialog, hanger, menu, popover, tooltip, ...otherProps } = props;\n\n    let button = <ButtonPrimitive.Button {...otherProps} className={className} ref={ref} />;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button, appearance: otherProps.appearance });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    if (tooltip) {\n        button = <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButton","props","className","ref","dialog","hanger","menu","popover","tooltip","otherProps","button","React","ButtonPrimitive","trigger","appearance","anchor","Tooltip","title"],"mappings":";;;;;;IAKaA,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC5B,SAAO,8GAAP;AACH;IAEYC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAgCC,IAAhC;MAAgCA;AAAAA,IAAAA,OAAO;;;AACvE,UAAQD,KAAR;AACI,SAAK,SAAL;AACI;;AAEJ,SAAK,QAAL;AACI;;AAEJ,SAAK,OAAL;AACI;;AAEJ,SAAK,UAAL;AAAiB;AACb,YAAIC,IAAJ,EAAU;AACN;AACH;;AAED;AACH;;AAED;AACI;AAnBR;AAqBH;IAEYC,YAAY,GAAG,SAAfA,YAAe,CACxBC,KADwB,EAExBC,SAFwB,EAGxBC,GAHwB;AAKxB,MAAQC,MAAR,GAAkEH,KAAlE,CAAQG,MAAR;AAAA,MAAgBC,MAAhB,GAAkEJ,KAAlE,CAAgBI,MAAhB;AAAA,MAAwBC,IAAxB,GAAkEL,KAAlE,CAAwBK,IAAxB;AAAA,MAA8BC,OAA9B,GAAkEN,KAAlE,CAA8BM,OAA9B;AAAA,MAAuCC,OAAvC,GAAkEP,KAAlE,CAAuCO,OAAvC;AAAA,MAAmDC,UAAnD,iCAAkER,KAAlE;;AAEA,MAAIS,MAAM,GAAGC,4BAAA,CAACC,MAAD,oBAA4BH;AAAYP,IAAAA,SAAS,EAAEA;AAAWC,IAAAA,GAAG,EAAEA;IAAnE,CAAb;;AAEA,MAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;AAC9BM,IAAAA,MAAM,GAAGN,MAAM,CAAC;AAAES,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAf;AACH,GAFD,MAEO,IAAI,OAAOJ,IAAP,KAAgB,UAApB,EAAgC;AACnCI,IAAAA,MAAM,GAAGJ,IAAI,CAAC;AAAEO,MAAAA,OAAO,EAAEH,MAAX;AAAmBI,MAAAA,UAAU,EAAEL,UAAU,CAACK;AAA1C,KAAD,CAAb;AACH,GAFM,MAEA,IAAI,OAAOP,OAAP,KAAmB,UAAvB,EAAmC;AACtCG,IAAAA,MAAM,GAAGH,OAAO,CAAC;AAAEM,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAhB;AACH;;AAED,MAAI,OAAOL,MAAP,KAAkB,UAAtB,EAAkC;AAC9BK,IAAAA,MAAM,GAAGL,MAAM,CAAC;AAAEU,MAAAA,MAAM,EAAEL;AAAV,KAAD,CAAf;AACH;;AAED,MAAIF,OAAJ,EAAa;AACTE,IAAAA,MAAM,GAAGC,4BAAA,CAACK,OAAD;AAASC,MAAAA,KAAK,EAAET;KAAhB,EAA0BE,MAA1B,CAAT;AACH;;AAED,SAAOA,MAAP;AACH;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport ReactDayPicker, { NavbarElementProps, DayModifiers } from 'react-day-picker';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport './Calendar.css';\r\nimport { IconButton } from '../IconButton/IconButton';\r\n\r\nexport type CalendarTextsActions = {\r\n    /** Aria-label for previous month action button */\r\n    previousMonth: string;\r\n    /** Aria-label for next month action button */\r\n    nextMonth: string;\r\n    /** Aria-label for previous year action button */\r\n    previousYear: string;\r\n    /** Aria-label for next year action button */\r\n    nextYear: string;\r\n    /** Text displayed within today action button */\r\n    today: string;\r\n};\r\n\r\nexport type CalendarTexts = {\r\n    /** Text and aria-label for action buttons in Calendar */\r\n    actions: CalendarTextsActions;\r\n    /** Text abbreviation for months in Calendar's header, starting with January */\r\n    months: string[];\r\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\r\n    weekdaysShort: string[];\r\n};\r\n\r\nconst renderDay = (day: Date, modifiers: DayModifiers): React.ReactNode =>\r\n    modifiers.disabled ? <span className=\"dot\" /> : day.getDate();\r\n\r\n/** @internal */\r\ntype CustomNavbarElementProps = NavbarElementProps & {\r\n    showYearControls?: boolean;\r\n    onMonthChange: (month: Date) => void;\r\n    value?: Date;\r\n};\r\n\r\nconst thisYear = new Date().getFullYear();\r\nconst years: number[] = [];\r\n\r\nfor (let i = thisYear - 10; i <= thisYear + 10; i += 1) {\r\n    years.push(i);\r\n}\r\n\r\nconst Navbar = React.memo(\r\n    ({ onMonthChange, onNextClick, onPreviousClick, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\r\n        const {\r\n            texts: {\r\n                calendar: { actions, months },\r\n            },\r\n        } = useLocalization();\r\n\r\n        const handleChange = function handleChange(event) {\r\n            const { year, month } = event.target.form;\r\n            onMonthChange(new Date(year.value, month.value));\r\n        };\r\n\r\n        return (\r\n            <div className=\"mb-2 flex items-center justify-between\">\r\n                <form className=\"inline-flex space-x-1\">\r\n                    <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\r\n                        {months.map((month, i) => (\r\n                            <option key={month} value={i}>\r\n                                {month}\r\n                            </option>\r\n                        ))}\r\n                    </select>\r\n                    <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\r\n                        {years.map(year => (\r\n                            <option key={year} value={year}>\r\n                                {String(year)}\r\n                            </option>\r\n                        ))}\r\n                    </select>\r\n                </form>\r\n                <div>\r\n                    <IconButton\r\n                        appearance=\"discrete\"\r\n                        icon=\"chevron-left\"\r\n                        aria-label={actions.previousMonth}\r\n                        onClick={() => onPreviousClick()}\r\n                        rounded\r\n                    />\r\n                    <IconButton\r\n                        appearance=\"discrete\"\r\n                        icon=\"chevron-right\"\r\n                        aria-label={actions.nextMonth}\r\n                        onClick={() => onNextClick()}\r\n                        rounded\r\n                    />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n);\r\n\r\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\r\n    /** Handler called when a day is clicked in calendar */\r\n    onChange: (date: Date, event?: React.MouseEvent<HTMLDivElement>) => void;\r\n    value?: Date;\r\n};\r\n\r\nexport const Calendar = React.forwardRef(function Calendar(props: CalendarProps, ref: React.Ref<ReactDayPicker>) {\r\n    const { onChange: handleChange, value, ...otherProps } = props;\r\n    const { locale, texts } = useLocalization();\r\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\r\n\r\n    React.useEffect(() => {\r\n        if (visibleMonth !== value) {\r\n            setVisibleMonth(value ?? new Date());\r\n        }\r\n    }, [value]);\r\n\r\n    const handleDayClick = (date, modifiers, event) => {\r\n        if (modifiers.outside || modifiers.disabled) {\r\n            return;\r\n        }\r\n\r\n        handleChange(date, event);\r\n    };\r\n\r\n    const handleCalendarClickToday = (): void => {\r\n        const today = new Date();\r\n\r\n        // set to midday to avoid UTC offset causing dates to be mismatched server side\r\n        today.setHours(12);\r\n        today.setMinutes(0);\r\n        today.setSeconds(0);\r\n\r\n        handleChange(today);\r\n    };\r\n\r\n    const className = cn('flex bg-white text-xs p-4', otherProps.className);\r\n\r\n    return (\r\n        <div data-taco=\"calendar\">\r\n            <ReactDayPicker\r\n                {...otherProps}\r\n                className={className}\r\n                month={visibleMonth}\r\n                selectedDays={value}\r\n                locale={locale.substring(0, 2)}\r\n                firstDayOfWeek={1}\r\n                months={texts.calendar.months}\r\n                weekdaysShort={texts.calendar.weekdaysShort}\r\n                navbarElement={navProps => <Navbar {...navProps} onMonthChange={setVisibleMonth} value={visibleMonth} />}\r\n                onDayClick={handleDayClick}\r\n                onMonthChange={setVisibleMonth}\r\n                onTodayButtonClick={handleCalendarClickToday}\r\n                captionElement={() => null}\r\n                todayButton={texts.calendar.actions.today}\r\n                showOutsideDays\r\n                renderDay={renderDay}\r\n                numberOfMonths={1}\r\n                ref={ref}\r\n            />\r\n        </div>\r\n    );\r\n});\r\n"],"names":["renderDay","day","modifiers","disabled","React","className","getDate","thisYear","Date","getFullYear","years","i","push","Navbar","onMonthChange","onNextClick","onPreviousClick","value","useLocalization","texts","calendar","actions","months","handleChange","event","target","form","year","month","name","onChange","getMonth","map","key","String","IconButton","appearance","icon","previousMonth","onClick","rounded","nextMonth","Calendar","props","ref","otherProps","locale","visibleMonth","setVisibleMonth","handleDayClick","date","outside","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","cn","ReactDayPicker","selectedDays","substring","firstDayOfWeek","weekdaysShort","navbarElement","navProps","onDayClick","onTodayButtonClick","captionElement","todayButton","showOutsideDays","numberOfMonths"],"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 'classnames';\nimport ReactDayPicker, { NavbarElementProps, DayModifiers } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Provider';\nimport './Calendar.css';\nimport { IconButton } from '../IconButton/IconButton';\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};\n\nconst renderDay = (day: Date, modifiers: DayModifiers): React.ReactNode =>\n    modifiers.disabled ? <span className=\"dot\" /> : day.getDate();\n\n/** @internal */\ntype CustomNavbarElementProps = NavbarElementProps & {\n    showYearControls?: boolean;\n    onMonthChange: (month: Date) => void;\n    value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 10; i <= thisYear + 10; i += 1) {\n    years.push(i);\n}\n\nconst Navbar = React.memo(\n    ({ onMonthChange, onNextClick, onPreviousClick, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n        const {\n            texts: {\n                calendar: { actions, months },\n            },\n        } = useLocalization();\n\n        const handleChange = function handleChange(event) {\n            const { year, month } = event.target.form;\n            onMonthChange(new Date(year.value, month.value));\n        };\n\n        return (\n            <div className=\"mb-2 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                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-left\"\n                        aria-label={actions.previousMonth}\n                        onClick={() => onPreviousClick()}\n                        rounded\n                    />\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-right\"\n                        aria-label={actions.nextMonth}\n                        onClick={() => onNextClick()}\n                        rounded\n                    />\n                </div>\n            </div>\n        );\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<HTMLDivElement>) => void;\n    value?: Date;\n};\n\nexport const Calendar = React.forwardRef(function Calendar(props: CalendarProps, ref: React.Ref<ReactDayPicker>) {\n    const { onChange: handleChange, value, ...otherProps } = props;\n    const { locale, texts } = useLocalization();\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n    }, [value]);\n\n    const handleDayClick = (date, modifiers, event) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, event);\n    };\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\n    const className = cn('flex bg-white text-xs p-4', otherProps.className);\n\n    return (\n        <div data-taco=\"calendar\">\n            <ReactDayPicker\n                {...otherProps}\n                className={className}\n                month={visibleMonth}\n                selectedDays={value}\n                locale={locale.substring(0, 2)}\n                firstDayOfWeek={1}\n                months={texts.calendar.months}\n                weekdaysShort={texts.calendar.weekdaysShort}\n                navbarElement={navProps => <Navbar {...navProps} onMonthChange={setVisibleMonth} value={visibleMonth} />}\n                onDayClick={handleDayClick}\n                onMonthChange={setVisibleMonth}\n                onTodayButtonClick={handleCalendarClickToday}\n                captionElement={() => null}\n                todayButton={texts.calendar.actions.today}\n                showOutsideDays\n                renderDay={renderDay}\n                numberOfMonths={1}\n                ref={ref}\n            />\n        </div>\n    );\n});\n"],"names":["renderDay","day","modifiers","disabled","React","className","getDate","thisYear","Date","getFullYear","years","i","push","Navbar","onMonthChange","onNextClick","onPreviousClick","value","useLocalization","texts","calendar","actions","months","handleChange","event","target","form","year","month","name","onChange","getMonth","map","key","String","IconButton","appearance","icon","previousMonth","onClick","rounded","nextMonth","Calendar","props","ref","otherProps","locale","visibleMonth","setVisibleMonth","handleDayClick","date","outside","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","cn","ReactDayPicker","selectedDays","substring","firstDayOfWeek","weekdaysShort","navbarElement","navProps","onDayClick","onTodayButtonClick","captionElement","todayButton","showOutsideDays","numberOfMonths"],"mappings":"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"}

package/dist/esm/components/Checkbox/Checkbox.js

@@ -14,7 +14,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
       onChange = props.onChange,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
-  var className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {
+  var className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', props.className, {
     'mr-2': !!label,
     'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,
     'border-grey text-blue-light cursor-not-allowed': props.disabled,

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\r\nimport { Icon } from '../Icon/Icon';\r\n\r\ntype CheckedState = boolean | 'indeterminate';\r\n\r\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\r\n    /* Increases visual prominenance of the checkbox */\r\n    highlighted?: boolean;\r\n    /**\r\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\r\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\r\n     */\r\n    indeterminate?: boolean;\r\n    /* Whether the checkbox is in an invalid state */\r\n    invalid?: boolean;\r\n    /** Label for the checkbox */\r\n    label?: React.ReactNode;\r\n    /* Whether user input is required */\r\n    required?: boolean;\r\n};\r\n\r\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\r\n    checked?: never;\r\n    onChange?: never;\r\n    /* The default checked state (uncontrolled) */\r\n    defaultChecked?: boolean;\r\n}\r\n\r\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\r\n    defaultChecked?: never;\r\n    /* The current checked state (controlled) */\r\n    checked: boolean;\r\n    /* Handler called when the checked state changes */\r\n    onChange: (checked: boolean) => void;\r\n}\r\n\r\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\r\n\r\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\r\n    const { checked, highlighted, indeterminate, invalid, label, onChange, ...otherProps } = props;\r\n\r\n    const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {\r\n        'mr-2': !!label,\r\n        'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,\r\n        'border-grey text-blue-light cursor-not-allowed': props.disabled,\r\n        'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,\r\n        'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled,\r\n    });\r\n\r\n    let handleChange: ((checked: CheckedState) => void) | undefined;\r\n\r\n    if (onChange) {\r\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\r\n    }\r\n\r\n    const element = (\r\n        <CheckboxPrimitive.Root\r\n            {...otherProps}\r\n            data-taco=\"checkbox\"\r\n            checked={indeterminate ? 'indeterminate' : checked}\r\n            className={className}\r\n            onCheckedChange={handleChange}\r\n            ref={ref}\r\n        >\r\n            <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\r\n                <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\r\n            </CheckboxPrimitive.Indicator>\r\n        </CheckboxPrimitive.Root>\r\n    );\r\n\r\n    if (label) {\r\n        const labelClassName = cn(\r\n            'flex items-center cursor-pointer',\r\n            {\r\n                'cursor-not-allowed text-grey-dark': props.disabled,\r\n            },\r\n            props.className\r\n        );\r\n\r\n        return (\r\n            <label className={labelClassName}>\r\n                {element}\r\n                {label}\r\n            </label>\r\n        );\r\n    }\r\n\r\n    return element;\r\n});\r\n"],"names":["Checkbox","React","props","ref","checked","highlighted","indeterminate","invalid","label","onChange","otherProps","className","cn","disabled","handleChange","element","CheckboxPrimitive","onCheckedChange","Icon","name","labelClassName"],"mappings":";;;;;;;IAwCaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,MAAQC,OAAR,GAAyFF,KAAzF,CAAQE,OAAR;AAAA,MAAiBC,WAAjB,GAAyFH,KAAzF,CAAiBG,WAAjB;AAAA,MAA8BC,aAA9B,GAAyFJ,KAAzF,CAA8BI,aAA9B;AAAA,MAA6CC,OAA7C,GAAyFL,KAAzF,CAA6CK,OAA7C;AAAA,MAAsDC,KAAtD,GAAyFN,KAAzF,CAAsDM,KAAtD;AAAA,MAA6DC,QAA7D,GAAyFP,KAAzF,CAA6DO,QAA7D;AAAA,MAA0EC,UAA1E,iCAAyFR,KAAzF;;AAEA,MAAMS,SAAS,GAAGC,EAAE,CAAC,8EAAD,EAAiF;AACjG,YAAQ,CAAC,CAACJ,KADuF;AAEjG,mEAA+D,CAACN,KAAK,CAACW,QAAP,IAAmB,CAACN,OAFc;AAGjG,sDAAkDL,KAAK,CAACW,QAHyC;AAIjG,oEAAgER,WAJiC;AAKjG,+DAA2DE,OAAO,IAAI,CAACL,KAAK,CAACW;AALoB,GAAjF,CAApB;AAQA,MAAIC,YAAJ;;AAEA,MAAIL,QAAJ,EAAc;AACVK,IAAAA,YAAY,GAAG,sBAACV,OAAD;AAAA,aAA2BK,QAAQ,CAACL,OAAO,KAAK,eAAZ,GAA8B,KAA9B,GAAsCA,OAAvC,CAAnC;AAAA,KAAf;AACH;;AAED,MAAMW,OAAO,GACTd,aAAA,CAACe,IAAD,oBACQN;iBACM;AACVN,IAAAA,OAAO,EAAEE,aAAa,GAAG,eAAH,GAAqBF;AAC3CO,IAAAA,SAAS,EAAEA;AACXM,IAAAA,eAAe,EAAEH;AACjBX,IAAAA,GAAG,EAAEA;IANT,EAQIF,aAAA,CAACe,SAAD;AAA6BL,IAAAA,SAAS,EAAC;GAAvC,EACIV,aAAA,CAACiB,IAAD;AAAMC,IAAAA,IAAI,EAAEb,aAAa,GAAG,MAAH,GAAY;AAAQK,IAAAA,SAAS,EAAC;GAAvD,CADJ,CARJ,CADJ;;AAeA,MAAIH,KAAJ,EAAW;AACP,QAAMY,cAAc,GAAGR,EAAE,CACrB,kCADqB,EAErB;AACI,2CAAqCV,KAAK,CAACW;AAD/C,KAFqB,EAKrBX,KAAK,CAACS,SALe,CAAzB;AAQA,WACIV,aAAA,QAAA;AAAOU,MAAAA,SAAS,EAAES;KAAlB,EACKL,OADL,EAEKP,KAFL,CADJ;AAMH;;AAED,SAAOO,OAAP;AACH,CAlDuB;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /* Increases visual prominenance of the checkbox */\n    highlighted?: boolean;\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, highlighted, indeterminate, invalid, label, onChange, ...otherProps } = props;\n\n    const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', props.className, {\n        'mr-2': !!label,\n        'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,\n        'border-grey text-blue-light cursor-not-allowed': props.disabled,\n        'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,\n        'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled,\n    });\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            ref={ref}\n        >\n            <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelClassName = cn(\n            'flex items-center cursor-pointer',\n            {\n                'cursor-not-allowed text-grey-dark': props.disabled,\n            },\n            props.className\n        );\n\n        return (\n            <label className={labelClassName}>\n                {element}\n                {label}\n            </label>\n        );\n    }\n\n    return element;\n});\n"],"names":["Checkbox","React","props","ref","checked","highlighted","indeterminate","invalid","label","onChange","otherProps","className","cn","disabled","handleChange","element","CheckboxPrimitive","onCheckedChange","Icon","name","labelClassName"],"mappings":";;;;;;;IAwCaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,MAAQC,OAAR,GAAyFF,KAAzF,CAAQE,OAAR;AAAA,MAAiBC,WAAjB,GAAyFH,KAAzF,CAAiBG,WAAjB;AAAA,MAA8BC,aAA9B,GAAyFJ,KAAzF,CAA8BI,aAA9B;AAAA,MAA6CC,OAA7C,GAAyFL,KAAzF,CAA6CK,OAA7C;AAAA,MAAsDC,KAAtD,GAAyFN,KAAzF,CAAsDM,KAAtD;AAAA,MAA6DC,QAA7D,GAAyFP,KAAzF,CAA6DO,QAA7D;AAAA,MAA0EC,UAA1E,iCAAyFR,KAAzF;;AAEA,MAAMS,SAAS,GAAGC,EAAE,CAAC,8EAAD,EAAiFV,KAAK,CAACS,SAAvF,EAAkG;AAClH,YAAQ,CAAC,CAACH,KADwG;AAElH,mEAA+D,CAACN,KAAK,CAACW,QAAP,IAAmB,CAACN,OAF+B;AAGlH,sDAAkDL,KAAK,CAACW,QAH0D;AAIlH,oEAAgER,WAJkD;AAKlH,+DAA2DE,OAAO,IAAI,CAACL,KAAK,CAACW;AALqC,GAAlG,CAApB;AAQA,MAAIC,YAAJ;;AAEA,MAAIL,QAAJ,EAAc;AACVK,IAAAA,YAAY,GAAG,sBAACV,OAAD;AAAA,aAA2BK,QAAQ,CAACL,OAAO,KAAK,eAAZ,GAA8B,KAA9B,GAAsCA,OAAvC,CAAnC;AAAA,KAAf;AACH;;AAED,MAAMW,OAAO,GACTd,aAAA,CAACe,IAAD,oBACQN;iBACM;AACVN,IAAAA,OAAO,EAAEE,aAAa,GAAG,eAAH,GAAqBF;AAC3CO,IAAAA,SAAS,EAAEA;AACXM,IAAAA,eAAe,EAAEH;AACjBX,IAAAA,GAAG,EAAEA;IANT,EAQIF,aAAA,CAACe,SAAD;AAA6BL,IAAAA,SAAS,EAAC;GAAvC,EACIV,aAAA,CAACiB,IAAD;AAAMC,IAAAA,IAAI,EAAEb,aAAa,GAAG,MAAH,GAAY;AAAQK,IAAAA,SAAS,EAAC;GAAvD,CADJ,CARJ,CADJ;;AAeA,MAAIH,KAAJ,EAAW;AACP,QAAMY,cAAc,GAAGR,EAAE,CACrB,kCADqB,EAErB;AACI,2CAAqCV,KAAK,CAACW;AAD/C,KAFqB,EAKrBX,KAAK,CAACS,SALe,CAAzB;AAQA,WACIV,aAAA,QAAA;AAAOU,MAAAA,SAAS,EAAES;KAAlB,EACKL,OADL,EAEKP,KAFL,CADJ;AAMH;;AAED,SAAOO,OAAP;AACH,CAlDuB;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { Input, InputProps } from '../Input/Input';\r\nimport { useCombobox } from './useCombobox';\r\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\r\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport './Combobox.css';\r\nimport { DialogProps } from '../Dialog/Dialog';\r\nimport { useLocalization } from '../Provider/Provider';\r\n\r\nexport type ComboboxTexts = {\r\n    /* Tooltip shown for the dialog button */\r\n    tooltip: string;\r\n};\r\n\r\nexport type ComboboxItem = ScrollableListItem;\r\nexport type ComboboxValue = ScrollableListItemValue;\r\n\r\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\r\n    /** Array of options in combobox */\r\n    data?: ComboboxItem[];\r\n    /**\r\n     * Initial value of the input in combobox.\r\n     * This is used when combobox is mounted, if no value is provided.\r\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\r\n     */\r\n    defaultValue?: ComboboxValue;\r\n    /** Set what value should have an empty option in combobox */\r\n    emptyValue?: ComboboxValue;\r\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\r\n    highlighted?: boolean;\r\n    /** Displays loading state in listbox */\r\n    loading?: boolean;\r\n    /**\r\n     * Handler called when user chooses an option from the provided suggestions.\r\n     * Suggestions will be calculated based on the input value.\r\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\r\n     */\r\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n    /** Handler called when the user enters a query **/\r\n    onSearch?: (query: string) => void | Promise<void>;\r\n    /** Value of the input in combobox */\r\n    value?: ComboboxValue;\r\n};\r\n\r\ninterface InlineComboboxProps extends ComboboxBaseProps {\r\n    dialog?: never;\r\n    /**\r\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\r\n     * *Note* that default combobox will display matching data only when user starts typing in input.\r\n     */\r\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\r\n}\r\n\r\ninterface DialogComboboxProps extends ComboboxBaseProps {\r\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\r\n    inline?: never;\r\n}\r\n\r\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\r\n\r\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\r\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\r\n    const internalRef = React.useRef<HTMLDivElement>(null);\r\n    const { texts } = useLocalization();\r\n    const selectDimensions = useBoundingClientRectListener(internalRef);\r\n    const className = cn(\r\n        'inline-flex relative',\r\n        {\r\n            'yt-combobox--inline': props.inline,\r\n        },\r\n        externalClassName\r\n    );\r\n\r\n    return (\r\n        <span className={className} data-taco=\"combobox\" style={style}>\r\n            <PopoverPrimitive.Root {...popover}>\r\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\r\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\r\n                        <Input\r\n                            {...input}\r\n                            autoComplete=\"off\"\r\n                            button={\r\n                                props.inline ? (\r\n                                    <IconButton\r\n                                        appearance=\"discrete\"\r\n                                        className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\r\n                                        icon={popover.open ? 'chevron-up' : 'chevron-down'}\r\n                                        onClick={() => {\r\n                                            popover.onOpenChange(true);\r\n                                            input.ref.current?.focus();\r\n                                        }}\r\n                                        tabIndex={-1}\r\n                                    />\r\n                                ) : dialog ? (\r\n                                    <IconButton\r\n                                        icon=\"list-search\"\r\n                                        disabled={props.readOnly || props.disabled}\r\n                                        dialog={dialog}\r\n                                        onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\r\n                                            // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\r\n                                            event.preventDefault();\r\n                                            input.ref.current?.focus();\r\n                                        }}\r\n                                        ref={button.ref}\r\n                                        tabIndex={-1}\r\n                                        tooltip={texts.combobox.tooltip}\r\n                                    />\r\n                                ) : undefined\r\n                            }\r\n                        />\r\n                    </div>\r\n                </PopoverPrimitive.Anchor>\r\n                <PopoverPrimitive.Content\r\n                    align=\"start\"\r\n                    onOpenAutoFocus={event => {\r\n                        event.preventDefault();\r\n                    }}\r\n                    sideOffset={4}\r\n                >\r\n                    <ScrollableList\r\n                        {...list}\r\n                        className={cn('!border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]')}\r\n                        style={{ minWidth: selectDimensions?.width }}\r\n                        tabIndex={popover.open ? 0 : -1}\r\n                    />\r\n                </PopoverPrimitive.Content>\r\n            </PopoverPrimitive.Root>\r\n        </span>\r\n    );\r\n});\r\n"],"names":["Combobox","React","props","ref","externalClassName","className","dialog","style","otherProps","useCombobox","combobox","button","input","popover","list","internalRef","useLocalization","texts","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","current","focus","tabIndex","disabled","readOnly","onFocus","event","preventDefault","tooltip","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":"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"}
+{"version":3,"file":"Combobox.js","sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Provider';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <span className={className} data-taco=\"combobox\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.inline ? (\n                                    <IconButton\n                                        appearance=\"discrete\"\n                                        className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                                        icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                                        onClick={() => {\n                                            popover.onOpenChange(true);\n                                            input.ref.current?.focus();\n                                        }}\n                                        tabIndex={-1}\n                                    />\n                                ) : dialog ? (\n                                    <IconButton\n                                        icon=\"list-search\"\n                                        disabled={props.readOnly || props.disabled}\n                                        dialog={dialog}\n                                        onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                            // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                            event.preventDefault();\n                                            input.ref.current?.focus();\n                                        }}\n                                        ref={button.ref}\n                                        tabIndex={-1}\n                                        tooltip={texts.combobox.tooltip}\n                                    />\n                                ) : undefined\n                            }\n                        />\n                    </div>\n                </PopoverPrimitive.Anchor>\n                <PopoverPrimitive.Content\n                    align=\"start\"\n                    onOpenAutoFocus={event => {\n                        event.preventDefault();\n                    }}\n                    sideOffset={4}\n                >\n                    <ScrollableList\n                        {...list}\n                        className={cn('!border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]')}\n                        style={{ minWidth: selectDimensions?.width }}\n                        tabIndex={popover.open ? 0 : -1}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","externalClassName","className","dialog","style","otherProps","useCombobox","combobox","button","input","popover","list","internalRef","useLocalization","texts","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","current","focus","tabIndex","disabled","readOnly","onFocus","event","preventDefault","tooltip","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;;;IA+DaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,MAAmBC,iBAAnB,GAAuEF,KAAvE,CAAQG,SAAR;AAAA,MAAsCC,MAAtC,GAAuEJ,KAAvE,CAAsCI,MAAtC;AAAA,MAA8CC,KAA9C,GAAuEL,KAAvE,CAA8CK,KAA9C;AAAA,MAAwDC,UAAxD,iCAAuEN,KAAvE;;AACA,qBAAmDO,WAAW,CAACD,UAAD,EAAaL,GAAb,CAA9D;AAAA,MAAQO,QAAR,gBAAQA,QAAR;AAAA,MAAkBC,MAAlB,gBAAkBA,MAAlB;AAAA,MAA0BC,KAA1B,gBAA0BA,KAA1B;AAAA,MAAiCC,OAAjC,gBAAiCA,OAAjC;AAAA,MAA0CC,IAA1C,gBAA0CA,IAA1C;;AACA,MAAMC,WAAW,GAAGd,MAAA,CAA6B,IAA7B,CAApB;;AACA,yBAAkBe,eAAe,EAAjC;AAAA,MAAQC,KAAR,oBAAQA,KAAR;;AACA,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAD,CAAtD;AACA,MAAMV,SAAS,GAAGe,EAAE,CAChB,sBADgB,EAEhB;AACI,2BAAuBlB,KAAK,CAACmB;AADjC,GAFgB,EAKhBjB,iBALgB,CAApB;AAQA,SACIH,aAAA,OAAA;AAAMI,IAAAA,SAAS,EAAEA;iBAAqB;AAAWE,IAAAA,KAAK,EAAEA;GAAxD,EACIN,aAAA,CAACqB,IAAD,oBAA2BT,QAA3B,EACIZ,aAAA,CAACqB,MAAD;AAAyBC,IAAAA,OAAO;AAACpB,IAAAA,GAAG,EAAEY;GAAtC,EACId,aAAA,MAAA,oBAASS;AAAUL,IAAAA,SAAS,EAAC;AAAgBF,IAAAA,GAAG,EAAEA;IAAlD,EACIF,aAAA,CAACuB,KAAD,oBACQZ;AACJa,IAAAA,YAAY,EAAC;AACbd,IAAAA,MAAM,EACFT,KAAK,CAACmB,MAAN,GACIpB,aAAA,CAACyB,UAAD;AACIC,MAAAA,UAAU,EAAC;AACXtB,MAAAA,SAAS,EAAC;AACVuB,MAAAA,IAAI,EAAEf,OAAO,CAACgB,IAAR,GAAe,YAAf,GAA8B;AACpCC,MAAAA,OAAO,EAAE;;;AACLjB,QAAAA,OAAO,CAACkB,YAAR,CAAqB,IAArB;AACA,8BAAAnB,KAAK,CAACT,GAAN,CAAU6B,OAAV,0EAAmBC,KAAnB;AACH;AACDC,MAAAA,QAAQ,EAAE,CAAC;KARf,CADJ,GAWI5B,MAAM,GACNL,aAAA,CAACyB,UAAD;AACIE,MAAAA,IAAI,EAAC;AACLO,MAAAA,QAAQ,EAAEjC,KAAK,CAACkC,QAAN,IAAkBlC,KAAK,CAACiC;AAClC7B,MAAAA,MAAM,EAAEA;AACR+B,MAAAA,OAAO,EAAE,iBAACC,KAAD;;;AACL;AACAA,QAAAA,KAAK,CAACC,cAAN;AACA,+BAAA3B,KAAK,CAACT,GAAN,CAAU6B,OAAV,4EAAmBC,KAAnB;AACH;AACD9B,MAAAA,GAAG,EAAEQ,MAAM,CAACR;AACZ+B,MAAAA,QAAQ,EAAE,CAAC;AACXM,MAAAA,OAAO,EAAEvB,KAAK,CAACP,QAAN,CAAe8B;KAX5B,CADM,GAcNC;IA7BZ,CADJ,CADJ,CADJ,EAqCIxC,aAAA,CAACqB,OAAD;AACIoB,IAAAA,KAAK,EAAC;AACNC,IAAAA,eAAe,EAAE,yBAAAL,KAAK;AAClBA,MAAAA,KAAK,CAACC,cAAN;AACH;AACDK,IAAAA,UAAU,EAAE;GALhB,EAOI3C,aAAA,CAAC4C,cAAD,oBACQ/B;AACJT,IAAAA,SAAS,EAAEe,EAAE,CAAC,uEAAD;AACbb,IAAAA,KAAK,EAAE;AAAEuC,MAAAA,QAAQ,EAAE5B,gBAAF,aAAEA,gBAAF,uBAAEA,gBAAgB,CAAE6B;AAA9B;AACPb,IAAAA,QAAQ,EAAErB,OAAO,CAACgB,IAAR,GAAe,CAAf,GAAmB,CAAC;IAJlC,CAPJ,CArCJ,CADJ,CADJ;AAwDH,CAtEuB;;;;"}

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

@@ -1,3 +1,4 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useRef, useState, useMemo, useEffect } from 'react';
 import { v4 } from 'uuid';
 import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
@@ -7,42 +8,59 @@ import { getId } from '../Listbox/ScrollableList.js';
 import { createCustomKeyboardEvent } from '../../utils/input.js';
 import { useFlattenedData, filterData, getIndexFromValue, setInputValueByRef, findByValue, sanitizeItem, getOptionParents } from '../Listbox/util.js';
 
-const debouncer = /*#__PURE__*/debounce(f => f(), 200);
-
-const convertToInputValue = value => String(value !== null && value !== void 0 ? value : '');
-
-const useCombobox = ({
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-  data: unfilteredData = [],
-  defaultValue,
-  disabled,
-  id: nativeId,
-  inline,
-  loading: __,
-  onChange,
-  onClick,
-  onKeyDown,
-  onSearch,
-  readOnly,
-  value,
-  ...props
-}, ref) => {
-  const inputRef = useProxiedRef(ref);
-  const buttonRef = useRef(null);
-  const listRef = useRef(null);
-  const [open, setOpen] = useState(false);
-  const listId = useMemo(() => v4(), []);
-  const [inputValue, setInputValue] = useState(convertToInputValue(value));
-  const shouldFilterData = !onSearch && (!inline || inline && inputValue !== convertToInputValue(value));
-  const flattenedData = useFlattenedData(unfilteredData);
-  const data = useMemo(() => shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData, [shouldFilterData, inputValue, flattenedData]); // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state
-
-  const [currentIndex, setCurrentIndex] = useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined);
-
-  const setInputValueByIndex = index => {
+var _excluded = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "id", "inline", "loading", "onChange", "onClick", "onKeyDown", "onSearch", "readOnly", "value"];
+var debouncer = /*#__PURE__*/debounce(function (f) {
+  return f();
+}, 200);
+
+var convertToInputValue = function convertToInputValue(value) {
+  return String(value !== null && value !== void 0 ? value : '');
+};
+
+var useCombobox = function useCombobox(_ref, ref) {
+  var ariaLabelledBy = _ref['aria-labelledby'],
+      _ref$data = _ref.data,
+      unfilteredData = _ref$data === void 0 ? [] : _ref$data,
+      defaultValue = _ref.defaultValue,
+      disabled = _ref.disabled,
+      inline = _ref.inline,
+      onChange = _ref.onChange,
+      onClick = _ref.onClick,
+      onKeyDown = _ref.onKeyDown,
+      onSearch = _ref.onSearch,
+      readOnly = _ref.readOnly,
+      value = _ref.value,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var inputRef = useProxiedRef(ref);
+  var buttonRef = useRef(null);
+  var listRef = useRef(null);
+
+  var _React$useState = useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
+  var listId = useMemo(function () {
+    return v4();
+  }, []);
+
+  var _React$useState2 = useState(convertToInputValue(value)),
+      inputValue = _React$useState2[0],
+      setInputValue = _React$useState2[1];
+
+  var shouldFilterData = !onSearch && (!inline || inline && inputValue !== convertToInputValue(value));
+  var flattenedData = useFlattenedData(unfilteredData);
+  var data = useMemo(function () {
+    return shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData;
+  }, [shouldFilterData, inputValue, flattenedData]); // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state
+
+  var _React$useState3 = useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined),
+      currentIndex = _React$useState3[0],
+      setCurrentIndex = _React$useState3[1];
+
+  var setInputValueByIndex = function setInputValueByIndex(index) {
     if (index !== undefined) {
-      const option = data[index];
+      var option = data[index];
 
       if (option && !option.disabled) {
         setInputValueByRef(inputRef.current, option.value, 'focusout');
@@ -50,12 +68,12 @@ const useCombobox = ({
     }
   };
 
-  const setCurrentValue = index => {
+  var setCurrentValue = function setCurrentValue(index) {
     if (index === undefined) {
       return;
     }
 
-    const option = data[index]; // if the selected option is not already selected, trigger blur event
+    var option = data[index]; // if the selected option is not already selected, trigger blur event
 
     if (option.value !== value) {
       setInputValueByIndex(index);
@@ -66,29 +84,29 @@ const useCombobox = ({
   }; // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set
 
 
-  useEffect(() => {
+  useEffect(function () {
     if (defaultValue && !value) {
       setInputValueByIndex(getIndexFromValue(data, defaultValue));
     }
   }, [data]); // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc
 
-  useEffect(() => {
+  useEffect(function () {
     if (value !== undefined && value !== inputValue) {
       setInputValue(convertToInputValue(value));
     }
   }, [value]);
-  useEffect(() => {
+  useEffect(function () {
     if (onSearch) {
-      debouncer(() => {
+      debouncer(function () {
         onSearch(inputValue);
       });
     }
   }, [inputValue]); // show listbox based on input value
 
-  useEffect(() => {
+  useEffect(function () {
     // don't show the popover if the internal (input) value already is the current value
     // this prevents the popover showing after selecting a value or pressing escape
-    const isCurrentValue = value !== undefined && value !== null && inputValue === String(value);
+    var isCurrentValue = value !== undefined && value !== null && inputValue === String(value);
 
     if (inputValue && data.length && !isCurrentValue) {
       setCurrentIndex(0);
@@ -100,7 +118,7 @@ const useCombobox = ({
       setOpen(false);
     }
   }, [inputValue, data]);
-  useEffect(() => {
+  useEffect(function () {
     if (open) {
       setCurrentIndex(getIndexFromValue(data, inputValue) || 0);
     } else {
@@ -108,7 +126,7 @@ const useCombobox = ({
     }
   }, [open]); // event handlers
 
-  const handleInputBlur = event => {
+  var handleInputBlur = function handleInputBlur(event) {
     event.persist();
 
     if (event.relatedTarget === listRef.current) {
@@ -117,9 +135,9 @@ const useCombobox = ({
     }
 
     if (onChange && event.target.value !== value) {
-      const item = findByValue(flattenedData, event.target.value);
+      var item = findByValue(flattenedData, event.target.value);
       event.detail = sanitizeItem(item);
-      const parents = getOptionParents(flattenedData, item === null || item === void 0 ? void 0 : item.path);
+      var parents = getOptionParents(flattenedData, item === null || item === void 0 ? void 0 : item.path);
 
       if (parents !== null && parents.length > 0) {
         event.detail.parents = parents;
@@ -133,11 +151,11 @@ const useCombobox = ({
     }
   };
 
-  const handleInputChange = event => {
+  var handleInputChange = function handleInputChange(event) {
     setInputValue(event.target.value);
   };
 
-  const handleInputClick = event => {
+  var handleInputClick = function handleInputClick(event) {
     if (inline || !open && inputValue && data.length) {
       setOpen(true);
     }
@@ -148,7 +166,7 @@ const useCombobox = ({
     }
   };
 
-  const handleInputKeyDown = event => {
+  var handleInputKeyDown = function handleInputKeyDown(event) {
     event.persist();
 
     switch (event.keyCode) {
@@ -208,7 +226,7 @@ const useCombobox = ({
     if (inline && !open) {
       if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {
         event.preventDefault();
-        const initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;
+        var initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;
         setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
         setOpen(true);
       }
@@ -220,23 +238,24 @@ const useCombobox = ({
     }
   };
 
-  const handleListboxChange = index => {
+  var handleListboxChange = function handleListboxChange(index) {
     setCurrentIndex(index);
   };
 
-  const handleListboxClick = (event, index) => {
+  var handleListboxClick = function handleListboxClick(event, index) {
     event.preventDefault();
     setCurrentValue(index);
     setOpen(false);
   };
 
-  const combobox = {
+  var combobox = {
     'aria-expanded': open,
     'aria-owns': listId,
     'aria-haspopup': 'listbox',
     role: 'combobox'
   };
-  const input = { ...props,
+
+  var input = _extends({}, props, {
     'aria-controls': listId,
     // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions
     // are related to the string that is present in the textbox
@@ -244,20 +263,21 @@ const useCombobox = ({
     // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element
     'aria-activedescendant': currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,
     'aria-labelledby': ariaLabelledBy,
-    disabled,
+    disabled: disabled,
     onBlur: !disabled && !readOnly ? handleInputBlur : undefined,
     onChange: !disabled && !readOnly ? handleInputChange : undefined,
     onClick: !disabled && !readOnly ? handleInputClick : undefined,
     onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,
-    readOnly,
+    readOnly: readOnly,
     ref: inputRef,
     type: 'text',
     value: inputValue !== null && inputValue !== void 0 ? inputValue : ''
-  };
-  const list = {
+  });
+
+  var list = {
     'aria-labelledby': ariaLabelledBy,
-    data,
-    disabled,
+    data: data,
+    disabled: disabled,
     id: listId,
     onChange: handleListboxChange,
     onClick: handleListboxClick,
@@ -266,16 +286,16 @@ const useCombobox = ({
     tabIndex: -1,
     value: currentIndex
   };
-  const button = {
+  var button = {
     ref: buttonRef
   };
   return {
-    combobox,
-    input,
-    list,
-    button,
+    combobox: combobox,
+    input: input,
+    list: list,
+    button: button,
     popover: {
-      open,
+      open: open,
       onOpenChange: setOpen
     }
   };