@economic/taco 2.47.0-server.3 → 2.47.0-server.5

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

@@ -1,39 +1,42 @@
 import React__default from 'react';
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Button } from '../../primitives/Button.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 
-const getButtonClasses = () => {
+var _excluded = ["tooltip"];
+var getButtonClasses = function getButtonClasses() {
   return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';
 };
-const getAppearanceClasses = (value, icon = false) => {
+var getAppearanceClasses = function getAppearanceClasses(value, icon) {
+  if (icon === void 0) {
+    icon = false;
+  }
   switch (value) {
     case 'primary':
-      return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;
+      return "wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50";
     case 'danger':
-      return `wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;
+      return "wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50";
     case 'ghost':
-      return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;
+      return "bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white";
     case 'discrete':
       {
         if (icon) {
-          return `bg-transparent text-black visited:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30`;
+          return "bg-transparent text-black visited:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30";
         }
-        return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 aria-disabled:text-blue-500/50`;
+        return "bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 aria-disabled:text-blue-500/50";
       }
     case 'transparent':
       {
-        return `bg-transparent text-black visited:text-black hover:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;
+        return "bg-transparent text-black visited:text-black hover:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent";
       }
     default:
-      return `wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 aria-disabled:bg-grey-200/50 aria-disabled:text-black/30`;
+      return "wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 aria-disabled:bg-grey-200/50 aria-disabled:text-black/30";
   }
 };
-const createButtonWithTooltip = (props, className, ref) => {
-  const {
-    tooltip,
-    ...buttonProps
-  } = props;
-  const button = /*#__PURE__*/React__default.createElement(Button, Object.assign({}, buttonProps, {
+var createButtonWithTooltip = function createButtonWithTooltip(props, className, ref) {
+  var tooltip = props.tooltip,
+    buttonProps = _objectWithoutPropertiesLoose(props, _excluded);
+  var button = /*#__PURE__*/React__default.createElement(Button, Object.assign({}, buttonProps, {
     className: className,
     ref: ref
   }));
@@ -44,15 +47,13 @@ const createButtonWithTooltip = (props, className, ref) => {
   }
   return button;
 };
-const createButtonWithOverlays = (props, buttonBase) => {
-  const {
-    dialog,
-    drawer,
-    hanger,
-    menu,
-    popover
-  } = props;
-  let button = buttonBase;
+var createButtonWithOverlays = function createButtonWithOverlays(props, buttonBase) {
+  var dialog = props.dialog,
+    drawer = props.drawer,
+    hanger = props.hanger,
+    menu = props.menu,
+    popover = props.popover;
+  var button = buttonBase;
   if (typeof dialog === 'function') {
     button = dialog({
       trigger: button

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

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

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

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

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

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

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

@@ -1,14 +1,15 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'clsx';
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { IconButton } from '../IconButton/IconButton.js';
 import { Truncate } from '../Truncate/Truncate.js';
 
-const Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref) {
-  const {
-    noPadding,
-    ...props
-  } = externalProps;
-  const className = cn('flex-grow overflow-auto', {
+var _excluded = ["noPadding"],
+  _excluded2 = ["title", "menu", "children", "className"];
+var Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref) {
+  var noPadding = externalProps.noPadding,
+    props = _objectWithoutPropertiesLoose(externalProps, _excluded);
+  var className = cn('flex-grow overflow-auto', {
     'mx-4 mb-4': !noPadding
   }, props.className);
   return /*#__PURE__*/createElement("div", Object.assign({}, props, {
@@ -17,15 +18,13 @@ const Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref)
     ref: ref
   }));
 });
-const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
-  const {
-    title,
-    menu,
-    children,
-    className,
-    ...otherProps
-  } = props;
-  const cardClassName = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500', className);
+var Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
+  var title = props.title,
+    menu = props.menu,
+    children = props.children,
+    className = props.className,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
+  var cardClassName = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500', className);
   return /*#__PURE__*/createElement("div", Object.assign({}, otherProps, {
     className: cardClassName,
     "data-taco": "card",

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { MenuProps } from '../Menu/Menu';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Truncate } from '../Truncate/Truncate';\nimport './style.css';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'mx-4 mb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Title of the Card */\n    title: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const cardClassName = cn(\n        'bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500',\n        className\n    );\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            <div className=\"mx-4 mb-2 mt-4 flex justify-between\">\n                {title && (\n                    <Truncate tooltip={title}>\n                        <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                    </Truncate>\n                )}\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n            </div>\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","otherProps","cardClassName","Truncate","tooltip","IconButton","icon","appearance"],"mappings":";;;;;AAWA,MAAMA,OAAO,gBAAGC,UAAgB,CAAmC,SAASC,WAAWA,CAACC,aAAa,EAAEC,GAAG;EACtG,MAAM;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGH,aAAa;EAC7C,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBAAyB,EACzB;IACI,WAAW,EAAE,CAACH;GACjB,EACDC,KAAK,CAACC,SAAS,CAClB;EACD,oBAAON,uCAASK,KAAK;IAAEC,SAAS,EAAEA,SAAS;iBAAY,cAAc;IAACH,GAAG,EAAEA;KAAO;AACtF,CAAC,CAAC;MASWK,IAAI,gBAAGR,UAAgB,CAA4B,SAASQ,IAAIA,CAACH,KAAK,EAAEF,GAAG;EACpF,MAAM;IAAEM,KAAK;IAAEC,IAAI;IAAEC,QAAQ;IAAEL,SAAS;IAAE,GAAGM;GAAY,GAAGP,KAAK;EACjE,MAAMQ,aAAa,GAAGN,EAAE,CACpB,kHAAkH,EAClHD,SAAS,CACZ;EAED,oBACIN,uCAASY,UAAU;IAAEN,SAAS,EAAEO,aAAa;iBAAY,MAAM;IAACV,GAAG,EAAEA;mBACjEH;IAAKM,SAAS,EAAC;KACVG,KAAK,kBACFT,cAACc,QAAQ;IAACC,OAAO,EAAEN;kBACfT;IAAIM,SAAS,EAAC;KAAqCG,KAAK,CAAM,CACvD,CACd,EACAC,IAAI,gBAAGV,cAACgB,UAAU;IAACC,IAAI,EAAC,qBAAqB;IAACC,UAAU,EAAC,UAAU;IAACR,IAAI,EAAEA,IAAI;IAAEJ,SAAS,EAAC;IAAc,GAAG,IAAI,CAC9G,EACLK,QAAQ,CACP;AAEd,CAAC;AAGDH,IAAI,CAACT,OAAO,GAAGA,OAAO;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { MenuProps } from '../Menu/Menu';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Truncate } from '../Truncate/Truncate';\nimport './style.css';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'mx-4 mb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Title of the Card */\n    title: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const cardClassName = cn(\n        'bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500',\n        className\n    );\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            <div className=\"mx-4 mb-2 mt-4 flex justify-between\">\n                {title && (\n                    <Truncate tooltip={title}>\n                        <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                    </Truncate>\n                )}\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n            </div>\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","_objectWithoutPropertiesLoose","_excluded","className","cn","Card","title","menu","children","otherProps","_excluded2","cardClassName","Truncate","tooltip","IconButton","icon","appearance"],"mappings":";;;;;;;;AAWA,IAAMA,OAAO,gBAAGC,UAAgB,CAAmC,SAASC,WAAWA,CAACC,aAAa,EAAEC,GAAG;EACtG,IAAQC,SAAS,GAAeF,aAAa,CAArCE,SAAS;IAAKC,KAAK,GAAAC,6BAAA,CAAKJ,aAAa,EAAAK,SAAA;EAC7C,IAAMC,SAAS,GAAGC,EAAE,CAChB,yBAAyB,EACzB;IACI,WAAW,EAAE,CAACL;GACjB,EACDC,KAAK,CAACG,SAAS,CAClB;EACD,oBAAOR,uCAASK,KAAK;IAAEG,SAAS,EAAEA,SAAS;iBAAY,cAAc;IAACL,GAAG,EAAEA;KAAO;AACtF,CAAC,CAAC;IASWO,IAAI,gBAAGV,UAAgB,CAA4B,SAASU,IAAIA,CAACL,KAAK,EAAEF,GAAG;EACpF,IAAQQ,KAAK,GAA+CN,KAAK,CAAzDM,KAAK;IAAEC,IAAI,GAAyCP,KAAK,CAAlDO,IAAI;IAAEC,QAAQ,GAA+BR,KAAK,CAA5CQ,QAAQ;IAAEL,SAAS,GAAoBH,KAAK,CAAlCG,SAAS;IAAKM,UAAU,GAAAR,6BAAA,CAAKD,KAAK,EAAAU,UAAA;EACjE,IAAMC,aAAa,GAAGP,EAAE,CACpB,kHAAkH,EAClHD,SAAS,CACZ;EAED,oBACIR,uCAASc,UAAU;IAAEN,SAAS,EAAEQ,aAAa;iBAAY,MAAM;IAACb,GAAG,EAAEA;mBACjEH;IAAKQ,SAAS,EAAC;KACVG,KAAK,kBACFX,cAACiB,QAAQ;IAACC,OAAO,EAAEP;kBACfX;IAAIQ,SAAS,EAAC;KAAqCG,KAAK,CAAM,CACvD,CACd,EACAC,IAAI,gBAAGZ,cAACmB,UAAU;IAACC,IAAI,EAAC,qBAAqB;IAACC,UAAU,EAAC,UAAU;IAACT,IAAI,EAAEA,IAAI;IAAEJ,SAAS,EAAC;IAAc,GAAG,IAAI,CAC9G,EACLK,QAAQ,CACP;AAEd,CAAC;AAGDH,IAAI,CAACX,OAAO,GAAGA,OAAO;;;;"}

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

@@ -1,22 +1,22 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'clsx';
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Icon } from '../Icon/Icon.js';
 import { Root, Indicator } from '@radix-ui/react-checkbox';
 import { useId } from '../../hooks/useId.js';
 import { Spinner } from '../Spinner/Spinner.js';
 
-const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
-  const {
-    checked,
-    indeterminate,
-    invalid,
-    label,
-    loading,
-    onChange,
-    ...otherProps
-  } = props;
-  const id = useId(props.id);
-  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
+var _excluded = ["checked", "indeterminate", "invalid", "label", "loading", "onChange"];
+var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
+  var checked = props.checked,
+    indeterminate = props.indeterminate,
+    invalid = props.invalid,
+    label = props.label,
+    loading = props.loading,
+    onChange = props.onChange,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+  var id = useId(props.id);
+  var className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
     'self-start': !!label
   }, invalid ? {
     'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700': !props.disabled,
@@ -25,29 +25,31 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700': !props.disabled,
     'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled
   }, props.className);
-  let handleChange;
+  var handleChange;
   if (onChange) {
-    handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
+    handleChange = function handleChange(checked) {
+      return onChange(checked === 'indeterminate' ? false : checked);
+    };
   }
-  let labelledByProps = null;
+  var labelledByProps = null;
   if (label) {
     labelledByProps = {
-      'aria-labelledby': `${id}-label`,
-      id
+      'aria-labelledby': id + "-label",
+      id: id
     };
   }
   // the enter keyboard shortcut isn't supported by default, but we want it
-  const handleKeyDown = event => {
+  var handleKeyDown = function handleKeyDown(event) {
     if (event.key === 'Enter') {
       event.currentTarget.click();
     }
   };
-  const spinnerClassname = cn(
+  var spinnerClassname = cn(
   //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side
   "m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]", {
     'text-blue-500': !checked && !indeterminate
   });
-  const element = /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, labelledByProps, {
+  var element = /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, labelledByProps, {
     "aria-invalid": invalid ? 'true' : undefined,
     "data-taco": "checkbox",
     checked: indeterminate ? 'indeterminate' : checked,
@@ -64,7 +66,7 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     className: "!h-full !w-full"
   }))));
   if (label) {
-    const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
+    var labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
       'cursor-not-allowed text-grey-300': props.disabled
     });
     return /*#__PURE__*/createElement("span", {
@@ -72,7 +74,7 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
       "data-taco": "checkbox-container"
     }, element, /*#__PURE__*/createElement("label", {
       htmlFor: id,
-      id: `${id}-label`
+      id: id + "-label"
     }, label));
   }
   return element;

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\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    /** Displays loading state in checkbox */\n    loading?: boolean;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface 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, indeterminate, invalid, label, loading, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white',\n        {\n            'self-start': !!label,\n        },\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled,\n              },\n        props.className\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    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            event.currentTarget.click();\n        }\n    };\n\n    const spinnerClassname = cn(\n        //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side\n        \"m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]\",\n        { 'text-blue-500': !checked && !indeterminate }\n    );\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            {...labelledByProps}\n            aria-invalid={invalid ? 'true' : undefined}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}>\n            {loading ? (\n                <Spinner className={spinnerClassname} />\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            )}\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {\n            'cursor-not-allowed text-grey-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label htmlFor={id} id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","indeterminate","invalid","label","loading","onChange","otherProps","id","useId","className","cn","disabled","handleChange","labelledByProps","handleKeyDown","event","key","currentTarget","click","spinnerClassname","element","CheckboxPrimitive","undefined","onCheckedChange","onKeyDown","Spinner","Icon","name","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;;;MA0CaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAiC;EAC9G,MAAM;IAAEC,OAAO;IAAEC,aAAa;IAAEC,OAAO;IAAEC,KAAK;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAC1F,MAAMS,EAAE,GAAGC,KAAK,CAACV,KAAK,CAACS,EAAE,CAAC;EAE1B,MAAME,SAAS,GAAGC,EAAE,CAChB,iIAAiI,EACjI;IACI,YAAY,EAAE,CAAC,CAACP;GACnB,EACDD,OAAO,GACD;IACI,qSAAqS,EACjS,CAACJ,KAAK,CAACa,QAAQ;IACnB,mFAAmF,EAAEb,KAAK,CAACa;GAC9F,GACD;IACI,+SAA+S,EAC3S,CAACb,KAAK,CAACa,QAAQ;IACnB,kFAAkF,EAAEb,KAAK,CAACa;GAC7F,EACPb,KAAK,CAACW,SAAS,CAClB;EAED,IAAIG,YAA2D;EAE/D,IAAIP,QAAQ,EAAE;IACVO,YAAY,GAAIZ,OAAqB,IAAKK,QAAQ,CAACL,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;EAGrG,IAAIa,eAAe,GAAkC,IAAI;EAEzD,IAAIV,KAAK,EAAE;IACPU,eAAe,GAAG;MACd,iBAAiB,EAAE,GAAGN,EAAE,QAAQ;MAChCA;KACH;;;EAIL,MAAMO,aAAa,GAAIC,KAA6C;IAChE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBD,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,MAAMC,gBAAgB,GAAGT,EAAE;;EAEvB,6EAA6E,EAC7E;IAAE,eAAe,EAAE,CAACV,OAAO,IAAI,CAACC;GAAe,CAClD;EAED,MAAMmB,OAAO,gBACTvB,cAACwB,IAAsB,oBACff,UAAU,EACVO,eAAe;oBACLX,OAAO,GAAG,MAAM,GAAGoB,SAAS;iBAChC,UAAU;IACpBtB,OAAO,EAAEC,aAAa,GAAG,eAAe,GAAGD,OAAO;IAClDS,SAAS,EAAEA,SAAS;IACpBc,eAAe,EAAEX,YAAY;IAC7BY,SAAS,EAAEV,aAAa;IACxBf,GAAG,EAAEA;MACJK,OAAO,iBACJP,cAAC4B,OAAO;IAAChB,SAAS,EAAEU;IAAoB,kBAExCtB,cAACwB,SAA2B;IAACZ,SAAS,EAAC;kBACnCZ,cAAC6B,IAAI;IAACC,IAAI,EAAE1B,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEQ,SAAS,EAAC;IAAoB,CACjD,CACjC,CAER;EAED,IAAIN,KAAK,EAAE;IACP,MAAMyB,uBAAuB,GAAGlB,EAAE,CAAC,wCAAwC,EAAE;MACzE,kCAAkC,EAAEZ,KAAK,CAACa;KAC7C,CAAC;IAEF,oBACId;MAAMY,SAAS,EAAEmB,uBAAuB;mBAAY;OAC/CR,OAAO,eACRvB;MAAOgC,OAAO,EAAEtB,EAAE;MAAEA,EAAE,EAAE,GAAGA,EAAE;OACxBJ,KAAK,CACF,CACL;;EAIf,OAAOiB,OAAO;AAClB,CAAC;AACDxB,QAAQ,CAACkC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\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    /** Displays loading state in checkbox */\n    loading?: boolean;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface 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, indeterminate, invalid, label, loading, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white',\n        {\n            'self-start': !!label,\n        },\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled,\n              },\n        props.className\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    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            event.currentTarget.click();\n        }\n    };\n\n    const spinnerClassname = cn(\n        //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side\n        \"m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]\",\n        { 'text-blue-500': !checked && !indeterminate }\n    );\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            {...labelledByProps}\n            aria-invalid={invalid ? 'true' : undefined}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}>\n            {loading ? (\n                <Spinner className={spinnerClassname} />\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            )}\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {\n            'cursor-not-allowed text-grey-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label htmlFor={id} id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","indeterminate","invalid","label","loading","onChange","otherProps","_objectWithoutPropertiesLoose","_excluded","id","useId","className","cn","disabled","handleChange","labelledByProps","handleKeyDown","event","key","currentTarget","click","spinnerClassname","element","CheckboxPrimitive","undefined","onCheckedChange","onKeyDown","Spinner","Icon","name","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;;;;;IA0CaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAiC;EAC9G,IAAQC,OAAO,GAAsEF,KAAK,CAAlFE,OAAO;IAAEC,aAAa,GAAuDH,KAAK,CAAzEG,aAAa;IAAEC,OAAO,GAA8CJ,KAAK,CAA1DI,OAAO;IAAEC,KAAK,GAAuCL,KAAK,CAAjDK,KAAK;IAAEC,OAAO,GAA8BN,KAAK,CAA1CM,OAAO;IAAEC,QAAQ,GAAoBP,KAAK,CAAjCO,QAAQ;IAAKC,UAAU,GAAAC,6BAAA,CAAKT,KAAK,EAAAU,SAAA;EAC1F,IAAMC,EAAE,GAAGC,KAAK,CAACZ,KAAK,CAACW,EAAE,CAAC;EAE1B,IAAME,SAAS,GAAGC,EAAE,CAChB,iIAAiI,EACjI;IACI,YAAY,EAAE,CAAC,CAACT;GACnB,EACDD,OAAO,GACD;IACI,qSAAqS,EACjS,CAACJ,KAAK,CAACe,QAAQ;IACnB,mFAAmF,EAAEf,KAAK,CAACe;GAC9F,GACD;IACI,+SAA+S,EAC3S,CAACf,KAAK,CAACe,QAAQ;IACnB,kFAAkF,EAAEf,KAAK,CAACe;GAC7F,EACPf,KAAK,CAACa,SAAS,CAClB;EAED,IAAIG,YAA2D;EAE/D,IAAIT,QAAQ,EAAE;IACVS,YAAY,GAAG,SAAAA,aAACd,OAAqB;MAAA,OAAKK,QAAQ,CAACL,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;;EAGrG,IAAIe,eAAe,GAAkC,IAAI;EAEzD,IAAIZ,KAAK,EAAE;IACPY,eAAe,GAAG;MACd,iBAAiB,EAAKN,EAAE,WAAQ;MAChCA,EAAE,EAAFA;KACH;;;EAIL,IAAMO,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAA6C;IAChE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBD,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,IAAMC,gBAAgB,GAAGT,EAAE;;EAEvB,6EAA6E,EAC7E;IAAE,eAAe,EAAE,CAACZ,OAAO,IAAI,CAACC;GAAe,CAClD;EAED,IAAMqB,OAAO,gBACTzB,cAAC0B,IAAsB,oBACfjB,UAAU,EACVS,eAAe;oBACLb,OAAO,GAAG,MAAM,GAAGsB,SAAS;iBAChC,UAAU;IACpBxB,OAAO,EAAEC,aAAa,GAAG,eAAe,GAAGD,OAAO;IAClDW,SAAS,EAAEA,SAAS;IACpBc,eAAe,EAAEX,YAAY;IAC7BY,SAAS,EAAEV,aAAa;IACxBjB,GAAG,EAAEA;MACJK,OAAO,iBACJP,cAAC8B,OAAO;IAAChB,SAAS,EAAEU;IAAoB,kBAExCxB,cAAC0B,SAA2B;IAACZ,SAAS,EAAC;kBACnCd,cAAC+B,IAAI;IAACC,IAAI,EAAE5B,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEU,SAAS,EAAC;IAAoB,CACjD,CACjC,CAER;EAED,IAAIR,KAAK,EAAE;IACP,IAAM2B,uBAAuB,GAAGlB,EAAE,CAAC,wCAAwC,EAAE;MACzE,kCAAkC,EAAEd,KAAK,CAACe;KAC7C,CAAC;IAEF,oBACIhB;MAAMc,SAAS,EAAEmB,uBAAuB;mBAAY;OAC/CR,OAAO,eACRzB;MAAOkC,OAAO,EAAEtB,EAAE;MAAEA,EAAE,EAAKA,EAAE;OACxBN,KAAK,CACF,CACL;;EAIf,OAAOmB,OAAO;AAClB,CAAC;AACD1B,QAAQ,CAACoC,WAAW,GAAG,UAAU;;;;"}