@economic/taco 1.1.7 → 1.1.9-alpha.1

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

@@ -0,0 +1,93 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import cn from 'classnames';
+import { Root, Header, Trigger as Trigger$1, Content as Content$1, Item as Item$1 } from '@radix-ui/react-accordion';
+import { Icon } from '../Icon/Icon.js';
+
+var _excluded = ["id"],
+    _excluded2 = ["id", "defaultId", "onChange", "as"];
+var AccordionContext = /*#__PURE__*/React__default.createContext({
+  as: 'h2'
+});
+var StyledTrigger = /*#__PURE__*/React__default.forwardRef(function AccordionStyledTrigger(props, ref) {
+  var isExpanded = !!props['aria-expanded'];
+  var className = cn('w-full inline-flex justify-between items-center align-middle', 'focus:rounded-sm focus:border-blue focus:yt-focus', props.className);
+  return React__default.createElement("button", Object.assign({}, props, {
+    ref: ref,
+    className: className
+  }), props.children, React__default.createElement(Icon, {
+    name: isExpanded ? 'chevron-up' : 'chevron-down'
+  }));
+});
+var Trigger = /*#__PURE__*/React__default.forwardRef(function AccordionTrigger(props, ref) {
+  var children = props.children;
+
+  var _React$useContext = React__default.useContext(AccordionContext),
+      Heading = _React$useContext.as;
+
+  return React__default.createElement(Header, {
+    asChild: true
+  }, React__default.createElement(Heading, {
+    className: "my-3"
+  }, React__default.createElement(Trigger$1, {
+    ref: ref,
+    asChild: true
+  }, React__default.createElement(StyledTrigger, null, children))));
+});
+var Content = /*#__PURE__*/React__default.forwardRef(function AccordionContent(props, ref) {
+  return React__default.createElement(Content$1, Object.assign({}, props, {
+    ref: ref
+  }));
+});
+
+var Item = function Item(props) {
+  var id = props.id,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return React__default.createElement(Item$1, Object.assign({}, otherProps, {
+    value: id
+  }));
+};
+
+var Accordion = function Accordion(props) {
+  var id = props.id,
+      defaultId = props.defaultId,
+      onChange = props.onChange,
+      _props$as = props.as,
+      as = _props$as === void 0 ? 'h2' : _props$as,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
+
+  var context = React__default.useMemo(function () {
+    return {
+      as: as
+    };
+  }, [as]);
+  var valueProps;
+
+  if (defaultId) {
+    valueProps = {
+      defaultValue: defaultId || undefined
+    };
+  } else {
+    valueProps = {
+      onValueChange: onChange,
+      value: id || undefined
+    };
+  }
+
+  var type = Array.isArray(valueProps.defaultValue) || Array.isArray(valueProps.value) ? 'multiple' : 'single';
+  var className = cn('divide-y divide-grey', props.className);
+  return React__default.createElement(AccordionContext.Provider, {
+    value: context
+  }, React__default.createElement(Root, Object.assign({}, otherProps, valueProps, {
+    "data-taco": "accordion",
+    className: className,
+    type: type
+  })));
+};
+Accordion.Item = Item;
+Accordion.Trigger = Trigger;
+Accordion.Content = Content;
+
+export { Accordion };
+//# sourceMappingURL=Accordion.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop.js","sources":["../../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\n\r\nexport type BackdropProps = React.HTMLAttributes<HTMLDivElement>;\r\n\r\nexport const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(props, ref) {\r\n    const className = cn(\r\n        'fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] aria-hidden:hidden z-[996]',\r\n        props.className\r\n    );\r\n\r\n    return <div {...props} className={className} ref={ref} />;\r\n});\r\n"],"names":["Backdrop","React","props","ref","className","cn"],"mappings":";;;IAKaA,QAAQ,gBAAGC,UAAA,CAAgD,SAASD,QAAT,CAAkBE,KAAlB,EAAyBC,GAAzB;EACpE,IAAMC,SAAS,GAAGC,EAAE,CAChB,iGADgB,EAEhBH,KAAK,CAACE,SAFU,CAApB;EAKA,OAAOH,aAAA,MAAA,oBAASC;IAAOE,SAAS,EAAEA;IAAWD,GAAG,EAAEA;IAA3C,CAAP;AACH,CAPuB;;;;"}

package/dist/esm/components/Badge/Badge.js

@@ -0,0 +1,32 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+import { getOutlineClasses, getStateClasses } from '../../utils/taillwind.js';
+
+var _excluded = ["children", "compact", "outline", "state"];
+var Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
+  var _cn;
+
+  var children = props.children,
+      _props$compact = props.compact,
+      compact = _props$compact === void 0 ? false : _props$compact,
+      _props$outline = props.outline,
+      outline = _props$outline === void 0 ? false : _props$outline,
+      state = props.state,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5', (_cn = {}, _cn[getOutlineClasses(state)] = outline, _cn["border-transparent " + getStateClasses(state)] = !outline, _cn['h-2 w-2 min-w-0'] = compact, _cn['h-5 py-0 px-1.5'] = !compact, _cn), props.className);
+  return createElement("span", Object.assign({}, otherProps, {
+    "aria-atomic": "true",
+    "aria-live": "polite",
+    className: className,
+    "data-taco": "badge",
+    ref: ref,
+    role: "status",
+    title: props['aria-label']
+  }), compact ? createElement(VisuallyHidden, null, children) : children);
+});
+
+export { Badge };
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\r\nimport { State } from '../../types';\r\nimport { getStateClasses, getOutlineClasses } from '../../utils/taillwind';\r\nimport './Badge.css';\r\n\r\nexport type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\r\n    /** Content should be a numerical value or tag/status like text **/\r\n    children: React.ReactNode;\r\n    /** Show compact version **/\r\n    compact?: boolean;\r\n    /** Show outlined version **/\r\n    outline?: boolean;\r\n    /** State will change the style of the badge **/\r\n    state?: State;\r\n};\r\n\r\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\r\n    const { children, compact = false, outline = false, state, ...otherProps } = props;\r\n    const className = cn(\r\n        'rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5',\r\n        {\r\n            [getOutlineClasses(state)]: outline,\r\n            [`border-transparent ${getStateClasses(state)}`]: !outline,\r\n            'h-2 w-2 min-w-0': compact,\r\n            'h-5 py-0 px-1.5': !compact, // custom padding keeps single digits in a perfect circle\r\n        },\r\n        props.className\r\n    );\r\n\r\n    return (\r\n        <span\r\n            {...otherProps}\r\n            aria-atomic=\"true\"\r\n            aria-live=\"polite\"\r\n            className={className}\r\n            data-taco=\"badge\"\r\n            ref={ref}\r\n            role=\"status\"\r\n            title={props['aria-label']}\r\n        >\r\n            {compact ? <VisuallyHidden>{children}</VisuallyHidden> : children}\r\n        </span>\r\n    );\r\n});\r\n"],"names":["Badge","React","props","ref","children","compact","outline","state","otherProps","className","cn","getOutlineClasses","getStateClasses","role","title","VisuallyHidden"],"mappings":";;;;;;;IAkBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;;;EAClC,IAAQC,QAAR,GAA6EF,KAA7E,CAAQE,QAAR;uBAA6EF,KAA7E,CAAkBG,OAAlB;MAAkBA,OAAlB,+BAA4B,KAA5B;uBAA6EH,KAA7E,CAAmCI,OAAnC;MAAmCA,OAAnC,+BAA6C,KAA7C;MAAoDC,KAApD,GAA6EL,KAA7E,CAAoDK,KAApD;MAA8DC,UAA9D,iCAA6EN,KAA7E;;EACA,IAAMO,SAAS,GAAGC,EAAE,CAChB,+HADgB,iBAGXC,iBAAiB,CAACJ,KAAD,CAHN,IAGgBD,OAHhB,8BAIWM,eAAe,CAACL,KAAD,CAJ1B,IAIsC,CAACD,OAJvC,MAKZ,iBALY,IAKOD,OALP,MAMZ,iBANY,IAMO,CAACA,OANR,QAQhBH,KAAK,CAACO,SARU,CAApB;EAWA,OACIR,aAAA,OAAA,oBACQO;mBACQ;iBACF;IACVC,SAAS,EAAEA;iBACD;IACVN,GAAG,EAAEA;IACLU,IAAI,EAAC;IACLC,KAAK,EAAEZ,KAAK,CAAC,YAAD;IARhB,EAUKG,OAAO,GAAGJ,aAAA,CAACc,cAAD,MAAA,EAAiBX,QAAjB,CAAH,GAAiDA,QAV7D,CADJ;AAcH,CA3BoB;;;;"}

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

@@ -0,0 +1,24 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+import { getBannerIcon } from './util.js';
+import { IconButton } from '../IconButton/IconButton.js';
+
+var Banner = /*#__PURE__*/forwardRef(function Banner(props, ref) {
+  var children = props.children,
+      state = props.state,
+      onClose = props.onClose;
+  var className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);
+  return createElement("div", {
+    className: className,
+    "data-taco": "banner",
+    ref: ref
+  }, getBannerIcon(state), children, onClose ? createElement(IconButton, {
+    className: "ml-auto -mr-2 self-start",
+    icon: "close",
+    appearance: "discrete",
+    onClick: onClose
+  }) : null);
+});
+
+export { Banner };
+//# sourceMappingURL=Banner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { State } from '../../types';\r\nimport { getBannerIcon } from './util';\r\nimport { IconButton } from '../IconButton/IconButton';\r\n\r\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n    /** Content can be any react element, for e.g. a `div` */\r\n    children: React.ReactNode;\r\n    /** State will change the icon displayed in banner */\r\n    state: State;\r\n    onClose?: () => void;\r\n};\r\n\r\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\r\n    const { children, state, onClose } = props;\r\n    const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\r\n\r\n    return (\r\n        <div className={className} data-taco=\"banner\" ref={ref}>\r\n            {getBannerIcon(state)}\r\n            {children}\r\n            {onClose ? (\r\n                <IconButton className=\"ml-auto -mr-2 self-start\" icon=\"close\" appearance=\"discrete\" onClick={onClose} />\r\n            ) : null}\r\n        </div>\r\n    );\r\n});\r\n"],"names":["Banner","React","props","ref","children","state","onClose","className","cn","getBannerIcon","IconButton","icon","appearance","onClick"],"mappings":";;;;;IAcaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CAAgBE,KAAhB,EAAoCC,GAApC;EACnC,IAAQC,QAAR,GAAqCF,KAArC,CAAQE,QAAR;MAAkBC,KAAlB,GAAqCH,KAArC,CAAkBG,KAAlB;MAAyBC,OAAzB,GAAqCJ,KAArC,CAAyBI,OAAzB;EACA,IAAMC,SAAS,GAAGC,EAAE,CAAC,8EAAD,EAAiFN,KAAK,CAACK,SAAvF,CAApB;EAEA,OACIN,aAAA,MAAA;IAAKM,SAAS,EAAEA;iBAAqB;IAASJ,GAAG,EAAEA;GAAnD,EACKM,aAAa,CAACJ,KAAD,CADlB,EAEKD,QAFL,EAGKE,OAAO,GACJL,aAAA,CAACS,UAAD;IAAYH,SAAS,EAAC;IAA2BI,IAAI,EAAC;IAAQC,UAAU,EAAC;IAAWC,OAAO,EAAEP;GAA7F,CADI,GAEJ,IALR,CADJ;AASH,CAbqB;;;;"}

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

@@ -0,0 +1,36 @@
+import React__default from 'react';
+import { Icon } from '../Icon/Icon.js';
+
+const getBannerIcon = type => {
+  switch (type) {
+    case 'success':
+      return React__default.createElement(Icon, {
+        name: "tick",
+        className: "yt-green-solid mt-1 self-start rounded-full"
+      });
+
+    case 'error':
+      return React__default.createElement(Icon, {
+        name: "warning",
+        className: "yt-red-solid mt-1 self-start rounded-full"
+      });
+
+    case 'warning':
+      return React__default.createElement(Icon, {
+        name: "warning",
+        className: "yt-yellow-solid mt-1 self-start rounded-full"
+      });
+
+    case 'information':
+      return React__default.createElement(Icon, {
+        name: "info",
+        className: "yt-blue-solid mt-1 self-start rounded-full"
+      });
+
+    default:
+      return null;
+  }
+};
+
+export { getBannerIcon };
+//# sourceMappingURL=util.js.map

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

@@ -0,0 +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=\"yt-green-solid mt-1 self-start rounded-full\" />;\r\n\r\n        case 'error':\r\n            return <Icon name=\"warning\" className=\"yt-red-solid mt-1 self-start rounded-full\" />;\r\n\r\n        case 'warning':\r\n            return <Icon name=\"warning\" className=\"yt-yellow-solid mt-1 self-start rounded-full\" />;\r\n\r\n        case 'information':\r\n            return <Icon name=\"info\" className=\"yt-blue-solid mt-1 self-start rounded-full\" />;\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;EACzB,QAAQA,IAAR;IACI,KAAK,SAAL;MACI,OAAOC,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAOC,SAAS,EAAC;OAA5B,CAAP;;IAEJ,KAAK,OAAL;MACI,OAAOH,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAUC,SAAS,EAAC;OAA/B,CAAP;;IAEJ,KAAK,SAAL;MACI,OAAOH,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAUC,SAAS,EAAC;OAA/B,CAAP;;IAEJ,KAAK,aAAL;MACI,OAAOH,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAOC,SAAS,EAAC;OAA5B,CAAP;;IAEJ;MACI,OAAO,IAAP;;AAEX;;;;"}

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

@@ -0,0 +1,36 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+import { Icon } from '../Icon/Icon.js';
+import { getButtonClasses, getAppearanceClasses, createButton } from './util.js';
+
+var _excluded = ["fluid"];
+var Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
+  var fluid = props.fluid,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
+    'cursor-not-allowed opacity-50': props.disabled,
+    'focus:yt-focus active:focus:yt-focus': !props.disabled,
+    'w-full': fluid
+  }, props.className);
+  var children = otherProps.children; // add a chevron icon to menu buttons
+
+  if (typeof otherProps.menu === 'function') {
+    children = Array.isArray(children) ? [].concat(children, [createElement(Icon, {
+      key: "chevron-down",
+      name: "chevron-down"
+    })]) : [children, createElement(Icon, {
+      key: "chevron-down",
+      name: "chevron-down"
+    })];
+  }
+
+  return createButton(_extends({}, otherProps, {
+    children: children,
+    'data-taco': 'button'
+  }), className, ref);
+});
+
+export { Button };
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +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;EAInC,IAAQC,KAAR,GAAiCF,KAAjC,CAAQE,KAAR;MAAkBC,UAAlB,iCAAiCH,KAAjC;;EACA,IAAMI,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,CAFJ,EAGhB,cAHgB,EAIhB;IACI,iCAAiCR,KAAK,CAACS,QAD3C;IAEI,wCAAwC,CAACT,KAAK,CAACS,QAFnD;IAGI,UAAUP;GAPE,EAShBF,KAAK,CAACI,SATU,CAApB;EAYA,IAAIM,QAAQ,GAAGP,UAAU,CAACO,QAA1B;;EAGA,IAAI,OAAOP,UAAU,CAACQ,IAAlB,KAA2B,UAA/B,EAA2C;IACvCD,QAAQ,GAAGE,KAAK,CAACC,OAAN,CAAcH,QAAd,cACDA,QADC,GACSX,aAAA,CAACe,IAAD;MAAMC,GAAG,EAAC;MAAeC,IAAI,EAAC;KAA9B,CADT,KAEL,CAACN,QAAD,EAAWX,aAAA,CAACe,IAAD;MAAMC,GAAG,EAAC;MAAeC,IAAI,EAAC;KAA9B,CAAX,CAFN;;;EAKJ,OAAOC,YAAY,cAAMd,UAAN;IAAkBO,QAAQ,EAARA,QAAlB;IAA4B,aAAa;MAAYN,SAArD,EAAgEH,GAAhE,CAAnB;AACH,CA3BqB;;;;"}

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

@@ -0,0 +1,77 @@
+import React__default from 'react';
+import { Button } from '../../primitives/Button.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+
+const getButtonClasses = () => {
+  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center';
+};
+const getAppearanceClasses = (value, icon = false) => {
+  switch (value) {
+    case 'primary':
+      return `yt-blue-solid focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white hover:bg-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid disabled:hover:hover:border-blue`;
+
+    case 'danger':
+      return `yt-red-solid 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 `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT)] text-blue focus:bg-transparent focus:text-blue active:bg-blue-lightest focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-dark hover:bg-blue-lightest hover:shadow-[inset_0_0_0_1px_theme(colors.blue.light)] hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.light),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-light`;
+
+    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:text-black `;
+        }
+
+        return `yt-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 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, {
+    className: className,
+    ref: ref
+  }));
+
+  if (typeof dialog === 'function') {
+    button = dialog({
+      trigger: button
+    });
+  } else if (typeof menu === 'function') {
+    button = menu({
+      trigger: button,
+      appearance: otherProps.appearance
+    });
+  } else if (typeof popover === 'function') {
+    button = popover({
+      trigger: button
+    });
+  }
+
+  if (typeof hanger === 'function') {
+    button = hanger({
+      anchor: button
+    });
+  }
+
+  if (tooltip) {
+    button = React__default.createElement(Tooltip, {
+      title: tooltip
+    }, button);
+  }
+
+  return button;
+};
+
+export { createButton, getAppearanceClasses, getButtonClasses };
+//# sourceMappingURL=util.js.map

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

@@ -0,0 +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 leading-5 inline-flex items-center justify-center';\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 focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white hover:bg-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid disabled:hover:hover:border-blue`;\r\n\r\n        case 'danger':\r\n            return `yt-red-solid 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 `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT)] text-blue focus:bg-transparent focus:text-blue active:bg-blue-lightest focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-dark hover:bg-blue-lightest hover:shadow-[inset_0_0_0_1px_theme(colors.blue.light)] hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.light),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-light`;\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:text-black `;\r\n            }\r\n\r\n            return `yt-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 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;EAC5B,OAAO,iHAAP;AACH;MAEYC,oBAAoB,GAAG,CAACC,KAAD,EAAgCC,IAAI,GAAG,KAAvC;EAChC,QAAQD,KAAR;IACI,KAAK,SAAL;MACI,4RAAA;;IAEJ,KAAK,QAAL;MACI,2NAAA;;IAEJ,KAAK,OAAL;MACI,sfAAA;;IAEJ,KAAK,UAAL;MAAiB;QACb,IAAIC,IAAJ,EAAU;UACN,wLAAA;;;QAGJ,4JAAA;;;IAGJ;MACI,0NAAA;;AAEX;MAEYC,YAAY,GAAG,CACxBC,KADwB,EAExBC,SAFwB,EAGxBC,GAHwB;EAKxB,MAAM;IAAEC,MAAF;IAAUC,MAAV;IAAkBC,IAAlB;IAAwBC,OAAxB;IAAiCC,OAAjC;IAA0C,GAAGC;MAAeR,KAAlE;EAEA,IAAIS,MAAM,GAAGC,4BAAA,CAACC,MAAD,oBAA4BH;IAAYP,SAAS,EAAEA;IAAWC,GAAG,EAAEA;IAAnE,CAAb;;EAEA,IAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;IAC9BM,MAAM,GAAGN,MAAM,CAAC;MAAES,OAAO,EAAEH;KAAZ,CAAf;GADJ,MAEO,IAAI,OAAOJ,IAAP,KAAgB,UAApB,EAAgC;IACnCI,MAAM,GAAGJ,IAAI,CAAC;MAAEO,OAAO,EAAEH,MAAX;MAAmBI,UAAU,EAAEL,UAAU,CAACK;KAA3C,CAAb;GADG,MAEA,IAAI,OAAOP,OAAP,KAAmB,UAAvB,EAAmC;IACtCG,MAAM,GAAGH,OAAO,CAAC;MAAEM,OAAO,EAAEH;KAAZ,CAAhB;;;EAGJ,IAAI,OAAOL,MAAP,KAAkB,UAAtB,EAAkC;IAC9BK,MAAM,GAAGL,MAAM,CAAC;MAAEU,MAAM,EAAEL;KAAX,CAAf;;;EAGJ,IAAIF,OAAJ,EAAa;IACTE,MAAM,GAAGC,4BAAA,CAACK,OAAD;MAASC,KAAK,EAAET;KAAhB,EAA0BE,MAA1B,CAAT;;;EAGJ,OAAOA,MAAP;AACH;;;;"}

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

@@ -0,0 +1,152 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, useState, useEffect, createElement, memo } from 'react';
+import cn from 'classnames';
+import { IconButton } from '../IconButton/IconButton.js';
+import ReactDayPicker from 'react-day-picker';
+import { useLocalization } from '../Provider/Provider.js';
+
+var _excluded = ["onChange", "value"];
+
+var renderDay = function renderDay(day, modifiers) {
+  return modifiers.disabled ? createElement("span", {
+    className: "dot"
+  }) : day.getDate();
+};
+
+var thisYear = /*#__PURE__*/new Date().getFullYear();
+var years = [];
+
+for (var i = thisYear - 10; i <= thisYear + 10; i += 1) {
+  years.push(i);
+}
+
+var Navbar = /*#__PURE__*/memo(function (_ref) {
+  var onMonthChange = _ref.onMonthChange,
+      onNextClick = _ref.onNextClick,
+      onPreviousClick = _ref.onPreviousClick,
+      _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));
+  };
+
+  return createElement("div", {
+    className: "mb-2 flex items-center justify-between"
+  }, createElement("form", {
+    className: "inline-flex space-x-1"
+  }, createElement("select", {
+    className: "h-8 px-2",
+    name: "month",
+    onChange: handleChange,
+    value: value.getMonth()
+  }, months.map(function (month, i) {
+    return createElement("option", {
+      key: month,
+      value: i
+    }, month);
+  })), createElement("select", {
+    className: "h-8 px-2",
+    name: "year",
+    onChange: handleChange,
+    value: value.getFullYear()
+  }, years.map(function (year) {
+    return createElement("option", {
+      key: year,
+      value: year
+    }, String(year));
+  }))), createElement("div", null, createElement(IconButton, {
+    appearance: "discrete",
+    icon: "chevron-left",
+    "aria-label": actions.previousMonth,
+    onClick: function onClick() {
+      return onPreviousClick();
+    },
+    rounded: true
+  }), createElement(IconButton, {
+    appearance: "discrete",
+    icon: "chevron-right",
+    "aria-label": actions.nextMonth,
+    onClick: function onClick() {
+      return onNextClick();
+    },
+    rounded: true
+  })));
+});
+var Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
+  var handleChange = props.onChange,
+      value = props.value,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useLocalization2 = useLocalization(),
+      locale = _useLocalization2.locale,
+      texts = _useLocalization2.texts;
+
+  var _React$useState = useState(value !== null && value !== void 0 ? value : new Date()),
+      visibleMonth = _React$useState[0],
+      setVisibleMonth = _React$useState[1];
+
+  useEffect(function () {
+    if (visibleMonth !== value) {
+      setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
+    }
+  }, [value]);
+
+  var handleDayClick = function handleDayClick(date, modifiers, event) {
+    if (modifiers.outside || modifiers.disabled) {
+      return;
+    }
+
+    handleChange(date, event);
+  };
+
+  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);
+    today.setSeconds(0);
+    handleChange(today);
+  };
+
+  var className = cn('flex bg-white text-xs p-4', otherProps.className);
+  return createElement("div", {
+    "data-taco": "calendar"
+  }, createElement(ReactDayPicker, Object.assign({}, otherProps, {
+    className: className,
+    month: visibleMonth,
+    selectedDays: value,
+    locale: locale.substring(0, 2),
+    firstDayOfWeek: 1,
+    months: texts.calendar.months,
+    weekdaysShort: texts.calendar.weekdaysShort,
+    navbarElement: function navbarElement(navProps) {
+      return createElement(Navbar, Object.assign({}, navProps, {
+        onMonthChange: setVisibleMonth,
+        value: visibleMonth
+      }));
+    },
+    onDayClick: handleDayClick,
+    onMonthChange: setVisibleMonth,
+    onTodayButtonClick: handleCalendarClickToday,
+    captionElement: function captionElement() {
+      return null;
+    },
+    todayButton: texts.calendar.actions.today,
+    showOutsideDays: true,
+    renderDay: renderDay,
+    numberOfMonths: 1,
+    ref: ref
+  })));
+});
+
+export { Calendar };
+//# sourceMappingURL=Calendar.js.map

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

@@ -0,0 +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":";;;;;;;;;AA6BA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,GAAD,EAAYC,SAAZ;EAAA,OACdA,SAAS,CAACC,QAAV,GAAqBC,aAAA,OAAA;IAAMC,SAAS,EAAC;GAAhB,CAArB,GAAgDJ,GAAG,CAACK,OAAJ,EADlC;AAAA,CAAlB;;AAUA,IAAMC,QAAQ,gBAAG,IAAIC,IAAJ,GAAWC,WAAX,EAAjB;AACA,IAAMC,KAAK,GAAa,EAAxB;;AAEA,KAAK,IAAIC,CAAC,GAAGJ,QAAQ,GAAG,EAAxB,EAA4BI,CAAC,IAAIJ,QAAQ,GAAG,EAA5C,EAAgDI,CAAC,IAAI,CAArD,EAAwD;EACpDD,KAAK,CAACE,IAAN,CAAWD,CAAX;AACH;;AAED,IAAME,MAAM,gBAAGT,IAAA,CACX;MAAGU,qBAAAA;MAAeC,mBAAAA;MAAaC,uBAAAA;wBAAiBC;MAAAA,gCAAQ,IAAIT,IAAJ;;EACpD,uBAIIU,eAAe,EAJnB;+CACIC,KADJ,CAEQC,QAFR;MAEoBC,OAFpB,yBAEoBA,OAFpB;MAE6BC,MAF7B,yBAE6BA,MAF7B;;EAMA,IAAMC,YAAY,GAAG,SAASA,YAAT,CAAsBC,KAAtB;IACjB,yBAAwBA,KAAK,CAACC,MAAN,CAAaC,IAArC;QAAQC,IAAR,sBAAQA,IAAR;QAAcC,KAAd,sBAAcA,KAAd;IACAd,aAAa,CAAC,IAAIN,IAAJ,CAASmB,IAAI,CAACV,KAAd,EAAqBW,KAAK,CAACX,KAA3B,CAAD,CAAb;GAFJ;;EAKA,OACIb,aAAA,MAAA;IAAKC,SAAS,EAAC;GAAf,EACID,aAAA,OAAA;IAAMC,SAAS,EAAC;GAAhB,EACID,aAAA,SAAA;IAAQC,SAAS,EAAC;IAAWwB,IAAI,EAAC;IAAQC,QAAQ,EAAEP;IAAcN,KAAK,EAAEA,KAAK,CAACc,QAAN;GAAzE,EACKT,MAAM,CAACU,GAAP,CAAW,UAACJ,KAAD,EAAQjB,CAAR;IAAA,OACRP,aAAA,SAAA;MAAQ6B,GAAG,EAAEL;MAAOX,KAAK,EAAEN;KAA3B,EACKiB,KADL,CADQ;GAAX,CADL,CADJ,EAQIxB,aAAA,SAAA;IAAQC,SAAS,EAAC;IAAWwB,IAAI,EAAC;IAAOC,QAAQ,EAAEP;IAAcN,KAAK,EAAEA,KAAK,CAACR,WAAN;GAAxE,EACKC,KAAK,CAACsB,GAAN,CAAU,UAAAL,IAAI;IAAA,OACXvB,aAAA,SAAA;MAAQ6B,GAAG,EAAEN;MAAMV,KAAK,EAAEU;KAA1B,EACKO,MAAM,CAACP,IAAD,CADX,CADW;GAAd,CADL,CARJ,CADJ,EAiBIvB,aAAA,MAAA,MAAA,EACIA,aAAA,CAAC+B,UAAD;IACIC,UAAU,EAAC;IACXC,IAAI,EAAC;kBACOhB,OAAO,CAACiB;IACpBC,OAAO,EAAE;MAAA,OAAMvB,eAAe,EAArB;;IACTwB,OAAO;GALX,CADJ,EAQIpC,aAAA,CAAC+B,UAAD;IACIC,UAAU,EAAC;IACXC,IAAI,EAAC;kBACOhB,OAAO,CAACoB;IACpBF,OAAO,EAAE;MAAA,OAAMxB,WAAW,EAAjB;;IACTyB,OAAO;GALX,CARJ,CAjBJ,CADJ;AAoCH,CAjDU,CAAf;IA0DaE,QAAQ,gBAAGtC,UAAA,CAAiB,SAASsC,QAAT,CAAkBC,KAAlB,EAAwCC,GAAxC;EACrC,IAAkBrB,YAAlB,GAAyDoB,KAAzD,CAAQb,QAAR;MAAgCb,KAAhC,GAAyD0B,KAAzD,CAAgC1B,KAAhC;MAA0C4B,UAA1C,iCAAyDF,KAAzD;;EACA,wBAA0BzB,eAAe,EAAzC;MAAQ4B,MAAR,qBAAQA,MAAR;MAAgB3B,KAAhB,qBAAgBA,KAAhB;;EACA,sBAAwCf,QAAA,CAAea,KAAf,aAAeA,KAAf,cAAeA,KAAf,GAAwB,IAAIT,IAAJ,EAAxB,CAAxC;MAAOuC,YAAP;MAAqBC,eAArB;;EAEA5C,SAAA,CAAgB;IACZ,IAAI2C,YAAY,KAAK9B,KAArB,EAA4B;MACxB+B,eAAe,CAAC/B,KAAD,aAACA,KAAD,cAACA,KAAD,GAAU,IAAIT,IAAJ,EAAV,CAAf;;GAFR,EAIG,CAACS,KAAD,CAJH;;EAMA,IAAMgC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,IAAD,EAAOhD,SAAP,EAAkBsB,KAAlB;IACnB,IAAItB,SAAS,CAACiD,OAAV,IAAqBjD,SAAS,CAACC,QAAnC,EAA6C;MACzC;;;IAGJoB,YAAY,CAAC2B,IAAD,EAAO1B,KAAP,CAAZ;GALJ;;EAQA,IAAM4B,wBAAwB,GAAG,SAA3BA,wBAA2B;IAC7B,IAAMC,KAAK,GAAG,IAAI7C,IAAJ,EAAd;;IAGA6C,KAAK,CAACC,QAAN,CAAe,EAAf;IACAD,KAAK,CAACE,UAAN,CAAiB,CAAjB;IACAF,KAAK,CAACG,UAAN,CAAiB,CAAjB;IAEAjC,YAAY,CAAC8B,KAAD,CAAZ;GARJ;;EAWA,IAAMhD,SAAS,GAAGoD,EAAE,CAAC,2BAAD,EAA8BZ,UAAU,CAACxC,SAAzC,CAApB;EAEA,OACID,aAAA,MAAA;iBAAe;GAAf,EACIA,aAAA,CAACsD,cAAD,oBACQb;IACJxC,SAAS,EAAEA;IACXuB,KAAK,EAAEmB;IACPY,YAAY,EAAE1C;IACd6B,MAAM,EAAEA,MAAM,CAACc,SAAP,CAAiB,CAAjB,EAAoB,CAApB;IACRC,cAAc,EAAE;IAChBvC,MAAM,EAAEH,KAAK,CAACC,QAAN,CAAeE;IACvBwC,aAAa,EAAE3C,KAAK,CAACC,QAAN,CAAe0C;IAC9BC,aAAa,EAAE,uBAAAC,QAAQ;MAAA,OAAI5D,aAAA,CAACS,MAAD,oBAAYmD;QAAUlD,aAAa,EAAEkC;QAAiB/B,KAAK,EAAE8B;QAA7D,CAAJ;;IACvBkB,UAAU,EAAEhB;IACZnC,aAAa,EAAEkC;IACfkB,kBAAkB,EAAEd;IACpBe,cAAc,EAAE;MAAA,OAAM,IAAN;;IAChBC,WAAW,EAAEjD,KAAK,CAACC,QAAN,CAAeC,OAAf,CAAuBgC;IACpCgB,eAAe;IACfrE,SAAS,EAAEA;IACXsE,cAAc,EAAE;IAChB1B,GAAG,EAAEA;IAlBT,CADJ,CADJ;AAwBH,CAxDuB;;;;"}