@economic/taco 2.45.0-alpha.3 → 2.45.0-alpha.31

package/dist/esm/packages/taco/src/charts/components/Line/LineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.js","sources":["../../../../../../../../src/charts/components/Line/LineChart.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport * as Recharts from 'recharts';\n\nimport { Color, getThemeColor } from '../../utils/color';\nimport {\n    CommonChartProps,\n    getCartesianGridProps,\n    getXAxisProps,\n    getYAxisProps,\n    getLegendProps,\n    getTooltipProps,\n} from '../../utils/common';\nimport { ResponsiveContainer } from '../ResponsiveContainer';\nimport { ActiveChartItems, PayloadType } from '../types';\n\ntype LineChartBarProps<TType> = {\n    accessor: keyof TType & string;\n    color?: Color;\n    label?: string;\n};\n\nconst Line = (_: LineChartBarProps<any>) => null;\n\ntype LineChartProps<TType> = CommonChartProps<TType> & {\n    children: React.ReactElement<LineChartBarProps<TType>> | React.ReactElement<LineChartBarProps<TType>>[];\n    data: TType[];\n    formatter?: (value: any) => string;\n};\n\nexport const LineChart = function LineChart<TType = unknown>(externalProps: LineChartProps<TType>) {\n    const { children, data, formatter, ...props } = externalProps;\n    const [hoveredLine, setHoveredLine] = useState<(keyof TType & string) | null>(null);\n    const [activeLines, setActiveLines] = useState<ActiveChartItems<TType>>(() => {\n        const keys = {} as ActiveChartItems<TType>;\n\n        React.Children.forEach(children, child => {\n            keys[child.props.accessor] = true;\n        });\n\n        return keys;\n    });\n\n    const handleLegendClick = (entry: PayloadType<TType>): void => {\n        setHoveredLine(null);\n        setActiveLines({ ...activeLines, [entry.dataKey]: !activeLines[entry.dataKey] });\n    };\n\n    return (\n        <ResponsiveContainer>\n            <Recharts.LineChart data={data} margin={{ top: 10, right: 0, left: -25, bottom: 0 }}>\n                <Recharts.CartesianGrid {...getCartesianGridProps()} />\n                <Recharts.XAxis {...getXAxisProps<TType>(props)} />\n                <Recharts.YAxis {...getYAxisProps<TType>(props)} />\n                <Recharts.Legend\n                    {...getLegendProps({\n                        onClick: handleLegendClick,\n                        onMouseEnter: entry => setHoveredLine(entry.dataKey),\n                        onMouseLeave: () => setHoveredLine(null),\n                        activeItems: activeLines,\n                    })}\n                />\n                <Recharts.Tooltip {...getTooltipProps()} formatter={formatter} />\n                {React.Children.map(children, child => (\n                    <Recharts.Line\n                        activeDot={{\n                            fill: getThemeColor(child.props.color ?? 'blue-300'),\n                        }}\n                        dataKey={child.props.accessor}\n                        isAnimationActive={false}\n                        dot={false}\n                        name={child.props.label}\n                        stroke={getThemeColor(child.props.color ?? 'blue-300')}\n                        strokeWidth={2}\n                        hide={!activeLines[child.props.accessor]}\n                        opacity={hoveredLine && child.props.accessor !== hoveredLine ? 0.3 : 1}\n                    />\n                ))}\n            </Recharts.LineChart>\n        </ResponsiveContainer>\n    );\n};\nLineChart.Line = Line;\n"],"names":["Line","_","LineChart","externalProps","children","data","formatter","props","hoveredLine","setHoveredLine","useState","activeLines","setActiveLines","keys","React","Children","forEach","child","accessor","handleLegendClick","entry","dataKey","ResponsiveContainer","Recharts","margin","top","right","left","bottom","getCartesianGridProps","getXAxisProps","getYAxisProps","getLegendProps","onClick","onMouseEnter","onMouseLeave","activeItems","getTooltipProps","map","_child$props$color","_child$props$color2","activeDot","fill","getThemeColor","color","isAnimationActive","dot","name","label","stroke","strokeWidth","hide","opacity"],"mappings":";;;;;;AAqBA,MAAMA,IAAI,GAAIC,CAAyB,IAAK,IAAI;MAQnCC,SAAS,GAAG,SAASA,SAASA,CAAkBC,aAAoC;EAC7F,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGJ,aAAa;EAC7D,MAAM,CAACK,WAAW,EAAEC,cAAc,CAAC,GAAGC,QAAQ,CAAgC,IAAI,CAAC;EACnF,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGF,QAAQ,CAA0B;IACpE,MAAMG,IAAI,GAAG,EAA6B;IAE1CC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACZ,QAAQ,EAAEa,KAAK;MAClCJ,IAAI,CAACI,KAAK,CAACV,KAAK,CAACW,QAAQ,CAAC,GAAG,IAAI;KACpC,CAAC;IAEF,OAAOL,IAAI;GACd,CAAC;EAEF,MAAMM,iBAAiB,GAAIC,KAAyB;IAChDX,cAAc,CAAC,IAAI,CAAC;IACpBG,cAAc,CAAC;MAAE,GAAGD,WAAW;MAAE,CAACS,KAAK,CAACC,OAAO,GAAG,CAACV,WAAW,CAACS,KAAK,CAACC,OAAO;KAAG,CAAC;GACnF;EAED,oBACIP,6BAACQ,mBAAmB,qBAChBR,6BAACS,WAAkB;IAAClB,IAAI,EAAEA,IAAI;IAAEmB,MAAM,EAAE;MAAEC,GAAG,EAAE,EAAE;MAAEC,KAAK,EAAE,CAAC;MAAEC,IAAI,EAAE,CAAC,EAAE;MAAEC,MAAM,EAAE;;kBAC5Ed,6BAACS,aAAsB,oBAAKM,qBAAqB,EAAE,EAAI,eACvDf,6BAACS,KAAc,oBAAKO,aAAa,CAAQvB,KAAK,CAAC,EAAI,eACnDO,6BAACS,KAAc,oBAAKQ,aAAa,CAAQxB,KAAK,CAAC,EAAI,eACnDO,6BAACS,MAAe,oBACRS,cAAc,CAAC;IACfC,OAAO,EAAEd,iBAAiB;IAC1Be,YAAY,EAAEd,KAAK,IAAIX,cAAc,CAACW,KAAK,CAACC,OAAO,CAAC;IACpDc,YAAY,EAAEA,MAAM1B,cAAc,CAAC,IAAI,CAAC;IACxC2B,WAAW,EAAEzB;GAChB,CAAC,EACJ,eACFG,6BAACS,OAAgB,oBAAKc,eAAe,EAAE;IAAE/B,SAAS,EAAEA;KAAa,EAChEQ,cAAK,CAACC,QAAQ,CAACuB,GAAG,CAAClC,QAAQ,EAAEa,KAAK;IAAA,IAAAsB,kBAAA,EAAAC,mBAAA;IAAA,oBAC/B1B,6BAACS,MAAa;MACVkB,SAAS,EAAE;QACPC,IAAI,EAAEC,aAAa,EAAAJ,kBAAA,GAACtB,KAAK,CAACV,KAAK,CAACqC,KAAK,cAAAL,kBAAA,cAAAA,kBAAA,GAAI,UAAU;OACtD;MACDlB,OAAO,EAAEJ,KAAK,CAACV,KAAK,CAACW,QAAQ;MAC7B2B,iBAAiB,EAAE,KAAK;MACxBC,GAAG,EAAE,KAAK;MACVC,IAAI,EAAE9B,KAAK,CAACV,KAAK,CAACyC,KAAK;MACvBC,MAAM,EAAEN,aAAa,EAAAH,mBAAA,GAACvB,KAAK,CAACV,KAAK,CAACqC,KAAK,cAAAJ,mBAAA,cAAAA,mBAAA,GAAI,UAAU,CAAC;MACtDU,WAAW,EAAE,CAAC;MACdC,IAAI,EAAE,CAACxC,WAAW,CAACM,KAAK,CAACV,KAAK,CAACW,QAAQ,CAAC;MACxCkC,OAAO,EAAE5C,WAAW,IAAIS,KAAK,CAACV,KAAK,CAACW,QAAQ,KAAKV,WAAW,GAAG,GAAG,GAAG;MACvE;GACL,CAAC,CACe,CACH;AAE9B;AACAN,SAAS,CAACF,IAAI,GAAGA,IAAI;;;;"}

package/dist/esm/packages/taco/src/charts/components/ResponsiveContainer.js

@@ -0,0 +1,10 @@
+import React__default from 'react';
+import { ResponsiveContainer as ResponsiveContainer$1 } from 'recharts';
+
+// A hacky fix for EC-50037 to make sure that Chart doesn't resize when it is inside a Card.
+const ResponsiveContainer = props => (/*#__PURE__*/React__default.createElement(ResponsiveContainer$1, Object.assign({
+  className: "!h-[calc(100%-1px)] !w-[calc(100%-1px)]"
+}, props)));
+
+export { ResponsiveContainer };
+//# sourceMappingURL=ResponsiveContainer.js.map

package/dist/esm/packages/taco/src/charts/components/ResponsiveContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveContainer.js","sources":["../../../../../../../src/charts/components/ResponsiveContainer.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\n\ntype ResponsiveContainerProps = Recharts.ResponsiveContainerProps & React.RefAttributes<HTMLDivElement>;\n\n// A hacky fix for EC-50037 to make sure that Chart doesn't resize when it is inside a Card.\nexport const ResponsiveContainer = (props: ResponsiveContainerProps) => (\n    <Recharts.ResponsiveContainer className=\"!h-[calc(100%-1px)] !w-[calc(100%-1px)]\" {...props} />\n);\n"],"names":["ResponsiveContainer","props","React","Recharts","className"],"mappings":";;;AAKA;MACaA,mBAAmB,GAAIC,KAA+B,kBAC/DC,6BAACC,qBAA4B;EAACC,SAAS,EAAC;GAA8CH,KAAK,EAAI;;;;"}

package/dist/esm/packages/taco/src/charts/components/Tooltip.js

@@ -0,0 +1,44 @@
+import React__default from 'react';
+import { getThemeColor } from '../utils/color.js';
+
+const Tooltip = ({
+  active,
+  formatter,
+  payload,
+  style,
+  singlePieDonutChart
+}) => {
+  const getColor = entry => {
+    var _ref, _entry$color;
+    if (singlePieDonutChart) {
+      // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie
+      // and one with multiple pies.
+      return getThemeColor(entry.payload.color);
+    }
+    return (_ref = (_entry$color = entry.color) !== null && _entry$color !== void 0 ? _entry$color : entry.payload.fill) !== null && _ref !== void 0 ? _ref : 'blue-500';
+  };
+  if (active && payload && payload.length) {
+    return /*#__PURE__*/React__default.createElement("dl", {
+      className: "z-20 grid grid-cols-[max-content_max-content] gap-x-4 rounded-md bg-white p-4 text-xs shadow-[0px_0px_1px_rgba(0,0,0,0.1),_0px_6px_18px_rgba(47,51,68,0.2)]",
+      style: style
+    }, payload.map((entry, index) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: `${entry.name}-${index}`
+    }, /*#__PURE__*/React__default.createElement("dt", {
+      className: "text-grey-700 mb-0 flex items-center gap-1 font-normal"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "-mt-px h-2.5 w-2.5 rounded-sm",
+      style: {
+        background: getColor(entry)
+      }
+    }),
+    // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie
+    // and one with multiple pies.
+    singlePieDonutChart ? entry.payload.label : entry.name), /*#__PURE__*/React__default.createElement("dd", {
+      className: "mb-0 text-right font-bold text-black "
+    }, formatter ? formatter(entry.value) : entry.value)))));
+  }
+  return null;
+};
+
+export { Tooltip };
+//# sourceMappingURL=Tooltip.js.map

package/dist/esm/packages/taco/src/charts/components/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../../../../../src/charts/components/Tooltip.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { getThemeColor } from '../utils/color';\n\ntype TooltipProps = {\n    active?: boolean;\n    formatter: (value: any) => any;\n    payload: any;\n    style?: CSSProperties;\n    singlePieDonutChart?: boolean;\n};\n\nexport const Tooltip = ({ active, formatter, payload, style, singlePieDonutChart }: TooltipProps) => {\n    const getColor = entry => {\n        if (singlePieDonutChart) {\n            // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie\n            // and one with multiple pies.\n            return getThemeColor(entry.payload.color);\n        }\n\n        return entry.color ?? entry.payload.fill ?? 'blue-500';\n    };\n\n    if (active && payload && payload.length) {\n        return (\n            <dl\n                className=\"z-20 grid grid-cols-[max-content_max-content] gap-x-4 rounded-md bg-white p-4 text-xs shadow-[0px_0px_1px_rgba(0,0,0,0.1),_0px_6px_18px_rgba(47,51,68,0.2)]\"\n                style={style}>\n                {payload.map((entry, index) => (\n                    <React.Fragment key={`${entry.name}-${index}`}>\n                        <dt className=\"text-grey-700 mb-0 flex items-center gap-1 font-normal\">\n                            <span className=\"-mt-px h-2.5 w-2.5 rounded-sm\" style={{ background: getColor(entry) }} />\n                            {\n                                // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie\n                                // and one with multiple pies.\n                                singlePieDonutChart ? entry.payload.label : entry.name\n                            }\n                        </dt>\n                        <dd className=\"mb-0 text-right font-bold text-black \">\n                            {formatter ? formatter(entry.value) : entry.value}\n                        </dd>\n                    </React.Fragment>\n                ))}\n            </dl>\n        );\n    }\n\n    return null;\n};\n"],"names":["Tooltip","active","formatter","payload","style","singlePieDonutChart","getColor","entry","getThemeColor","color","_ref","_entry$color","fill","length","React","className","map","index","Fragment","key","name","background","label","value"],"mappings":";;;MAWaA,OAAO,GAAGA,CAAC;EAAEC,MAAM;EAAEC,SAAS;EAAEC,OAAO;EAAEC,KAAK;EAAEC;CAAmC;EAC5F,MAAMC,QAAQ,GAAGC,KAAK;;IAClB,IAAIF,mBAAmB,EAAE;;;MAGrB,OAAOG,aAAa,CAACD,KAAK,CAACJ,OAAO,CAACM,KAAK,CAAC;;IAG7C,QAAAC,IAAA,IAAAC,YAAA,GAAOJ,KAAK,CAACE,KAAK,cAAAE,YAAA,cAAAA,YAAA,GAAIJ,KAAK,CAACJ,OAAO,CAACS,IAAI,cAAAF,IAAA,cAAAA,IAAA,GAAI,UAAU;GACzD;EAED,IAAIT,MAAM,IAAIE,OAAO,IAAIA,OAAO,CAACU,MAAM,EAAE;IACrC,oBACIC;MACIC,SAAS,EAAC,6JAA6J;MACvKX,KAAK,EAAEA;OACND,OAAO,CAACa,GAAG,CAAC,CAACT,KAAK,EAAEU,KAAK,mBACtBH,6BAACA,cAAK,CAACI,QAAQ;MAACC,GAAG,EAAE,GAAGZ,KAAK,CAACa,IAAI,IAAIH,KAAK;oBACvCH;MAAIC,SAAS,EAAC;oBACVD;MAAMC,SAAS,EAAC,+BAA+B;MAACX,KAAK,EAAE;QAAEiB,UAAU,EAAEf,QAAQ,CAACC,KAAK;;MAAO;;;IAItFF,mBAAmB,GAAGE,KAAK,CAACJ,OAAO,CAACmB,KAAK,GAAGf,KAAK,CAACa,IAAI,CAEzD,eACLN;MAAIC,SAAS,EAAC;OACTb,SAAS,GAAGA,SAAS,CAACK,KAAK,CAACgB,KAAK,CAAC,GAAGhB,KAAK,CAACgB,KAAK,CAChD,CACQ,CACpB,CAAC,CACD;;EAIb,OAAO,IAAI;AACf;;;;"}

package/dist/esm/packages/taco/src/charts/utils/color.js

@@ -0,0 +1,24 @@
+import themeColors from '../../../tailwind.colors.js';
+
+const mapColor = (palette, prefix = '') => {
+  return Object.keys(palette).reduce((accum, color) => {
+    if (color === 'current') {
+      return accum;
+    } else if (typeof palette[color] === 'string') {
+      return {
+        ...accum,
+        [prefix ? color === 'DEFAULT' ? prefix : `${prefix}-${color}` : color]: palette[color]
+      };
+    } else {
+      return {
+        ...accum,
+        ...mapColor(palette[color], color)
+      };
+    }
+  }, {});
+};
+const colors = /*#__PURE__*/mapColor(themeColors);
+const getThemeColor = color => colors[color];
+
+export { colors, getThemeColor };
+//# sourceMappingURL=color.js.map

package/dist/esm/packages/taco/src/charts/utils/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","sources":["../../../../../../../src/charts/utils/color.ts"],"sourcesContent":["import themeColors from '../../../tailwind.colors.js';\n\nconst mapColor = (palette, prefix = ''): any => {\n    return Object.keys(palette).reduce((accum, color) => {\n        if (color === 'current') {\n            return accum;\n        } else if (typeof palette[color] === 'string') {\n            return {\n                ...accum,\n                [prefix ? (color === 'DEFAULT' ? prefix : `${prefix}-${color}`) : color]: palette[color],\n            };\n        } else {\n            return {\n                ...accum,\n                ...mapColor(palette[color], color),\n            };\n        }\n    }, {});\n};\n\nexport const colors: Record<string, string> = mapColor(themeColors);\n\nexport type Color = keyof typeof colors;\n\nexport const getThemeColor = (color: string) => colors[color];\n"],"names":["mapColor","palette","prefix","Object","keys","reduce","accum","color","colors","themeColors","getThemeColor"],"mappings":";;AAEA,MAAMA,QAAQ,GAAGA,CAACC,OAAO,EAAEC,MAAM,GAAG,EAAE;EAClC,OAAOC,MAAM,CAACC,IAAI,CAACH,OAAO,CAAC,CAACI,MAAM,CAAC,CAACC,KAAK,EAAEC,KAAK;IAC5C,IAAIA,KAAK,KAAK,SAAS,EAAE;MACrB,OAAOD,KAAK;KACf,MAAM,IAAI,OAAOL,OAAO,CAACM,KAAK,CAAC,KAAK,QAAQ,EAAE;MAC3C,OAAO;QACH,GAAGD,KAAK;QACR,CAACJ,MAAM,GAAIK,KAAK,KAAK,SAAS,GAAGL,MAAM,GAAG,GAAGA,MAAM,IAAIK,KAAK,EAAE,GAAIA,KAAK,GAAGN,OAAO,CAACM,KAAK;OAC1F;KACJ,MAAM;MACH,OAAO;QACH,GAAGD,KAAK;QACR,GAAGN,QAAQ,CAACC,OAAO,CAACM,KAAK,CAAC,EAAEA,KAAK;OACpC;;GAER,EAAE,EAAE,CAAC;AACV,CAAC;MAEYC,MAAM,gBAA2BR,QAAQ,CAACS,WAAW;MAIrDC,aAAa,GAAIH,KAAa,IAAKC,MAAM,CAACD,KAAK;;;;"}

package/dist/esm/packages/taco/src/charts/utils/common.js

@@ -0,0 +1,34 @@
+import React__default from 'react';
+import { Legend } from '../components/Legend.js';
+import { Tooltip } from '../components/Tooltip.js';
+
+const getCartesianGridProps = () => ({
+  vertical: false
+});
+const getXAxisProps = props => ({
+  axisLine: false,
+  dataKey: props.accessor,
+  fontSize: 12,
+  scale: props.xAxisScale,
+  tickLine: false,
+  tickFormatter: props.xAxisTickFormat
+});
+const getYAxisProps = props => ({
+  axisLine: false,
+  fontSize: 12,
+  scale: props.yAxisScale,
+  tickLine: false,
+  tickFormatter: props.yAxisTickFormat
+});
+const getLegendProps = props => ({
+  content: /*#__PURE__*/React__default.createElement(Legend, Object.assign({}, props))
+});
+const getTooltipProps = (props = undefined) => ({
+  content: /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, props)),
+  wrapperStyle: {
+    outline: 'none'
+  }
+});
+
+export { getCartesianGridProps, getLegendProps, getTooltipProps, getXAxisProps, getYAxisProps };
+//# sourceMappingURL=common.js.map

package/dist/esm/packages/taco/src/charts/utils/common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","sources":["../../../../../../../src/charts/utils/common.tsx"],"sourcesContent":["import React from 'react';\nimport { ScaleType } from 'recharts/types/util/types';\n\nimport { Legend } from '../components/Legend';\nimport { Tooltip } from '../components/Tooltip';\nimport { LegendProps } from '../components/Legend';\n\nexport type CommonChartProps<TType> = {\n    accessor: keyof TType & string;\n    // eslint-disable-next-line @typescript-eslint/ban-types\n    xAxisScale?: ScaleType | Function;\n    xAxisTickFormat: (value: any) => string;\n    // eslint-disable-next-line @typescript-eslint/ban-types\n    yAxisScale?: ScaleType | Function;\n    yAxisTickFormat: (value: any) => string;\n};\n\nexport const getCartesianGridProps = () => ({\n    vertical: false,\n});\n\nexport const getXAxisProps = <TType,>(props: CommonChartProps<TType>) => ({\n    axisLine: false,\n    dataKey: props.accessor,\n    fontSize: 12,\n    scale: props.xAxisScale,\n    tickLine: false,\n    tickFormatter: props.xAxisTickFormat,\n});\n\nexport const getYAxisProps = <TType,>(props: CommonChartProps<TType>) => ({\n    axisLine: false,\n    fontSize: 12,\n    scale: props.yAxisScale,\n    tickLine: false,\n    tickFormatter: props.yAxisTickFormat,\n});\n\nexport const getLegendProps = <TType,>(props: LegendProps<TType>) => ({\n    content: <Legend {...props} />,\n});\n\nexport const getTooltipProps = (props: any = undefined) => ({\n    content: <Tooltip {...props} />,\n    wrapperStyle: { outline: 'none' },\n});\n"],"names":["getCartesianGridProps","vertical","getXAxisProps","props","axisLine","dataKey","accessor","fontSize","scale","xAxisScale","tickLine","tickFormatter","xAxisTickFormat","getYAxisProps","yAxisScale","yAxisTickFormat","getLegendProps","content","React","Legend","getTooltipProps","undefined","Tooltip","wrapperStyle","outline"],"mappings":";;;;MAiBaA,qBAAqB,GAAGA,OAAO;EACxCC,QAAQ,EAAE;CACb;MAEYC,aAAa,GAAYC,KAA8B,KAAM;EACtEC,QAAQ,EAAE,KAAK;EACfC,OAAO,EAAEF,KAAK,CAACG,QAAQ;EACvBC,QAAQ,EAAE,EAAE;EACZC,KAAK,EAAEL,KAAK,CAACM,UAAU;EACvBC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAER,KAAK,CAACS;CACxB;MAEYC,aAAa,GAAYV,KAA8B,KAAM;EACtEC,QAAQ,EAAE,KAAK;EACfG,QAAQ,EAAE,EAAE;EACZC,KAAK,EAAEL,KAAK,CAACW,UAAU;EACvBJ,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAER,KAAK,CAACY;CACxB;MAEYC,cAAc,GAAYb,KAAyB,KAAM;EAClEc,OAAO,eAAEC,6BAACC,MAAM,oBAAKhB,KAAK;CAC7B;MAEYiB,eAAe,GAAGA,CAACjB,QAAakB,SAAS,MAAM;EACxDJ,OAAO,eAAEC,6BAACI,OAAO,oBAAKnB,KAAK,EAAI;EAC/BoB,YAAY,EAAE;IAAEC,OAAO,EAAE;;CAC5B;;;;"}

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

@@ -57,33 +57,25 @@ const Accordion = props => {
   const context = React__default.useMemo(() => ({
     as
   }), [as]);
-  const type = typeof defaultId === 'string' || typeof id === 'string' ? 'single' : 'multiple';
   let valueProps;
   if (defaultId) {
-    valueProps = type === 'single' ? {
-      type: 'single',
-      defaultValue: defaultId
-    } : {
-      type: 'multiple',
-      defaultValue: defaultId
+    valueProps = {
+      defaultValue: defaultId || undefined
     };
   } else {
-    valueProps = type === 'single' ? {
-      type: 'single',
-      onValueChange: onChange,
-      value: id || undefined
-    } : {
-      type: 'multiple',
+    valueProps = {
       onValueChange: onChange,
       value: id || undefined
     };
   }
+  const type = typeof valueProps.defaultValue === 'string' || typeof valueProps.value === 'string' ? 'single' : 'multiple';
   const className = cn('divide-y divide-grey-200', props.className);
   return /*#__PURE__*/React__default.createElement(AccordionContext.Provider, {
     value: context
   }, /*#__PURE__*/React__default.createElement(Root, Object.assign({}, otherProps, valueProps, {
     "data-taco": "accordion",
-    className: className
+    className: className,
+    type: type
   })));
 };
 Accordion.Item = Item;

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

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

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

@@ -12,6 +12,8 @@ const getIconName = state => {
       return 'warning';
     case 'error':
       return 'close';
+    case 'experiment':
+      return 'experiment';
     case 'success':
       return 'tick';
     default:

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\nimport { getColorByState, getSubtleColorShadeClasses } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { State } from '../../types';\n\nexport type AlertProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children: React.ReactNode;\n    state?: State;\n    onClose?: () => void;\n};\n\nconst getIconName = (state: State | undefined): IconName => {\n    switch (state) {\n        case 'information':\n            return 'info';\n        case 'warning':\n            return 'warning';\n        case 'error':\n            return 'close';\n        case 'success':\n            return 'tick';\n        default:\n            return 'question-mark';\n    }\n};\n\nexport const Alert = React.forwardRef(function Alert(props: AlertProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, title, state, onClose } = props;\n\n    const className = cn(\n        `flex w-full flex-row items-start gap-2 rounded-md border-transparent p-3 ${getSubtleColorShadeClasses(\n            getColorByState(state)\n        )}`,\n        props.className\n    );\n\n    return (\n        <div {...props} ref={ref} className={className} data-taco=\"alert\" role=\"alert\">\n            <BadgeIcon className=\"flex-none\" icon={getIconName(state)} color={getColorByState(state)} />\n            <div className=\"grow text-sm\">\n                {title && <div className=\"font-bold\">{title}</div>}\n                {children}\n            </div>\n            {onClose && <Icon className=\"flex-none cursor-pointer\" name=\"close\" onClick={onClose} />}\n        </div>\n    );\n});\n"],"names":["getIconName","state","Alert","React","forwardRef","props","ref","children","title","onClose","className","cn","getSubtleColorShadeClasses","getColorByState","role","BadgeIcon","icon","color","Icon","name","onClick"],"mappings":";;;;;;AAaA,MAAMA,WAAW,GAAIC,KAAwB;EACzC,QAAQA,KAAK;IACT,KAAK,aAAa;MACd,OAAO,MAAM;IACjB,KAAK,SAAS;MACV,OAAO,SAAS;IACpB,KAAK,OAAO;MACR,OAAO,OAAO;IAClB,KAAK,SAAS;MACV,OAAO,MAAM;IACjB;MACI,OAAO,eAAe;;AAElC,CAAC;MAEYC,KAAK,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,KAAKA,CAACG,KAAiB,EAAEC,GAA8B;EAClG,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEP,KAAK;IAAEQ;GAAS,GAAGJ,KAAK;EAEjD,MAAMK,SAAS,GAAGC,EAAE,CAChB,4EAA4EC,0BAA0B,CAClGC,eAAe,CAACZ,KAAK,CAAC,CACzB,EAAE,EACHI,KAAK,CAACK,SAAS,CAClB;EAED,oBACIP,sDAASE,KAAK;IAAEC,GAAG,EAAEA,GAAG;IAAEI,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACI,IAAI,EAAC;mBACnEX,6BAACY,SAAS;IAACL,SAAS,EAAC,WAAW;IAACM,IAAI,EAAEhB,WAAW,CAACC,KAAK,CAAC;IAAEgB,KAAK,EAAEJ,eAAe,CAACZ,KAAK;IAAK,eAC5FE;IAAKO,SAAS,EAAC;KACVF,KAAK,iBAAIL;IAAKO,SAAS,EAAC;KAAaF,KAAK,CAAO,EACjDD,QAAQ,CACP,EACLE,OAAO,iBAAIN,6BAACe,IAAI;IAACR,SAAS,EAAC,0BAA0B;IAACS,IAAI,EAAC,OAAO;IAACC,OAAO,EAAEX;IAAW,CACtF;AAEd,CAAC;;;;"}
+{"version":3,"file":"Alert.js","sources":["../../../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\nimport { getColorByState, getSubtleColorShadeClasses } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { State } from '../../types';\n\nexport type AlertProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children: React.ReactNode;\n    state?: State;\n    onClose?: () => void;\n};\n\nconst getIconName = (state: State | undefined): IconName => {\n    switch (state) {\n        case 'information':\n            return 'info';\n        case 'warning':\n            return 'warning';\n        case 'error':\n            return 'close';\n        case 'experiment':\n            return 'experiment';\n        case 'success':\n            return 'tick';\n        default:\n            return 'question-mark';\n    }\n};\n\nexport const Alert = React.forwardRef(function Alert(props: AlertProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, title, state, onClose } = props;\n\n    const className = cn(\n        `flex w-full flex-row items-start gap-2 rounded-md border-transparent p-3 ${getSubtleColorShadeClasses(\n            getColorByState(state)\n        )}`,\n        props.className\n    );\n\n    return (\n        <div {...props} ref={ref} className={className} data-taco=\"alert\" role=\"alert\">\n            <BadgeIcon className=\"flex-none\" icon={getIconName(state)} color={getColorByState(state)} />\n            <div className=\"grow text-sm\">\n                {title && <div className=\"font-bold\">{title}</div>}\n                {children}\n            </div>\n            {onClose && <Icon className=\"flex-none cursor-pointer\" name=\"close\" onClick={onClose} />}\n        </div>\n    );\n});\n"],"names":["getIconName","state","Alert","React","forwardRef","props","ref","children","title","onClose","className","cn","getSubtleColorShadeClasses","getColorByState","role","BadgeIcon","icon","color","Icon","name","onClick"],"mappings":";;;;;;AAaA,MAAMA,WAAW,GAAIC,KAAwB;EACzC,QAAQA,KAAK;IACT,KAAK,aAAa;MACd,OAAO,MAAM;IACjB,KAAK,SAAS;MACV,OAAO,SAAS;IACpB,KAAK,OAAO;MACR,OAAO,OAAO;IAClB,KAAK,YAAY;MACb,OAAO,YAAY;IACvB,KAAK,SAAS;MACV,OAAO,MAAM;IACjB;MACI,OAAO,eAAe;;AAElC,CAAC;MAEYC,KAAK,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,KAAKA,CAACG,KAAiB,EAAEC,GAA8B;EAClG,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEP,KAAK;IAAEQ;GAAS,GAAGJ,KAAK;EAEjD,MAAMK,SAAS,GAAGC,EAAE,CAChB,4EAA4EC,0BAA0B,CAClGC,eAAe,CAACZ,KAAK,CAAC,CACzB,EAAE,EACHI,KAAK,CAACK,SAAS,CAClB;EAED,oBACIP,sDAASE,KAAK;IAAEC,GAAG,EAAEA,GAAG;IAAEI,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACI,IAAI,EAAC;mBACnEX,6BAACY,SAAS;IAACL,SAAS,EAAC,WAAW;IAACM,IAAI,EAAEhB,WAAW,CAACC,KAAK,CAAC;IAAEgB,KAAK,EAAEJ,eAAe,CAACZ,KAAK;IAAK,eAC5FE;IAAKO,SAAS,EAAC;KACVF,KAAK,iBAAIL;IAAKO,SAAS,EAAC;KAAaF,KAAK,CAAO,EACjDD,QAAQ,CACP,EACLE,OAAO,iBAAIN,6BAACe,IAAI;IAACR,SAAS,EAAC,0BAA0B;IAACS,IAAI,EAAC,OAAO;IAACC,OAAO,EAAEX;IAAW,CACtF;AAEd,CAAC;;;;"}

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

@@ -15,10 +15,10 @@ const Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
     ...otherProps
   } = props;
   const isTransparent = color === 'transparent';
-  const className = cn('rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
+  const className = cn('rounded-full border box-border overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
     [`border ${getOutlineColorShadeClasses(color)}`]: outline,
-    [`border-transparent font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,
-    [`border-transparent ${getColorShadeClasses(color)}`]: !outline && !subtle,
+    [`border-none font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,
+    [`border-none ${getColorShadeClasses(color)}`]: !outline && !subtle,
     'h-4 min-w-0 py-0 px-1 text-xs': small,
     'h-2 w-2 min-w-0': compact,
     'font-bold': outline || !subtle,
@@ -30,12 +30,15 @@ const Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
     if (compact) {
       return /*#__PURE__*/createElement(VisuallyHidden, null, children);
     }
+    const contentToRender = typeof children === 'string' ? /*#__PURE__*/createElement("span", {
+      className: "items-center truncate"
+    }, children) : children;
     if (status) {
       return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement("div", {
-        className: cn('mr-1 h-2 w-2 rounded-full', getColorShadeClasses(color))
-      }), children);
+        className: cn('mr-1 h-2 w-2 shrink-0 rounded-full', getColorShadeClasses(color))
+      }), contentToRender);
     }
-    return children;
+    return contentToRender;
   };
   return /*#__PURE__*/createElement("span", Object.assign({}, otherProps, {
     "aria-atomic": "true",

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { Color } from '../../types';\nimport { getSubtleColorShadeClasses, getColorShadeClasses, getOutlineColorShadeClasses } from '../../utils/tailwind';\nimport './Badge.css';\n\nexport type BadgeBaseProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /** Content should be a numerical value or tag/status like text **/\n    children: React.ReactNode;\n    /** Show small version of badge **/\n    small?: boolean;\n    /** Background color **/\n    color?: Color;\n};\n\ninterface CompactBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: boolean;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: never;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface OutlineBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: boolean;\n    /** Show subtle version **/\n    subtle?: never;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface SubtleBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface StatusBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: boolean;\n}\n\nexport type BadgeProps = CompactBadgeProps | OutlineBadgeProps | SubtleBadgeProps | StatusBadgeProps;\n\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\n    const {\n        children,\n        compact = false,\n        outline = false,\n        status = false,\n        subtle = false,\n        small = false,\n        color,\n        ...otherProps\n    } = props;\n    const isTransparent = color === 'transparent';\n    const className = cn(\n        'rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center',\n        {\n            [`border ${getOutlineColorShadeClasses(color)}`]: outline,\n            [`border-transparent font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,\n            [`border-transparent ${getColorShadeClasses(color)}`]: !outline && !subtle,\n            'h-4 min-w-0 py-0 px-1 text-xs': small,\n            'h-2 w-2 min-w-0': compact,\n            'font-bold': outline || !subtle,\n            'text-sm': !small,\n            'h-5 py-0 px-1.5': !compact && !small, // custom padding keeps single digits in a perfect circle\n            '!bg-grey-700': compact && isTransparent,\n        },\n        props.className\n    );\n\n    const content = () => {\n        if (compact) {\n            return <VisuallyHidden>{children}</VisuallyHidden>;\n        }\n        if (status) {\n            return (\n                <>\n                    <div className={cn('mr-1 h-2 w-2 rounded-full', getColorShadeClasses(color))} />\n                    {children}\n                </>\n            );\n        }\n        return children;\n    };\n\n    return (\n        <span\n            {...otherProps}\n            aria-atomic=\"true\"\n            aria-live=\"polite\"\n            className={className}\n            data-taco=\"badge\"\n            ref={ref}\n            role=\"status\"\n            title={props['aria-label']}>\n            {content()}\n        </span>\n    );\n});\n"],"names":["Badge","React","props","ref","children","compact","outline","status","subtle","small","color","otherProps","isTransparent","className","cn","getOutlineColorShadeClasses","getSubtleColorShadeClasses","getColorShadeClasses","content","VisuallyHidden","role","title"],"mappings":";;;;;MA8DaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAKA,CAACE,KAAiB,EAAEC,GAA+B;EACnG,MAAM;IACFC,QAAQ;IACRC,OAAO,GAAG,KAAK;IACfC,OAAO,GAAG,KAAK;IACfC,MAAM,GAAG,KAAK;IACdC,MAAM,GAAG,KAAK;IACdC,KAAK,GAAG,KAAK;IACbC,KAAK;IACL,GAAGC;GACN,GAAGT,KAAK;EACT,MAAMU,aAAa,GAAGF,KAAK,KAAK,aAAa;EAC7C,MAAMG,SAAS,GAAGC,EAAE,CAChB,+FAA+F,EAC/F;IACI,CAAC,UAAUC,2BAA2B,CAACL,KAAK,CAAC,EAAE,GAAGJ,OAAO;IACzD,CAAC,kCAAkCU,0BAA0B,CAACN,KAAK,CAAC,EAAE,GAAGF,MAAM;IAC/E,CAAC,sBAAsBS,oBAAoB,CAACP,KAAK,CAAC,EAAE,GAAG,CAACJ,OAAO,IAAI,CAACE,MAAM;IAC1E,+BAA+B,EAAEC,KAAK;IACtC,iBAAiB,EAAEJ,OAAO;IAC1B,WAAW,EAAEC,OAAO,IAAI,CAACE,MAAM;IAC/B,SAAS,EAAE,CAACC,KAAK;IACjB,iBAAiB,EAAE,CAACJ,OAAO,IAAI,CAACI,KAAK;IACrC,cAAc,EAAEJ,OAAO,IAAIO;GAC9B,EACDV,KAAK,CAACW,SAAS,CAClB;EAED,MAAMK,OAAO,GAAGA;IACZ,IAAIb,OAAO,EAAE;MACT,oBAAOJ,cAACkB,cAAc,QAAEf,QAAQ,CAAkB;;IAEtD,IAAIG,MAAM,EAAE;MACR,oBACIN,2CACIA;QAAKY,SAAS,EAAEC,EAAE,CAAC,2BAA2B,EAAEG,oBAAoB,CAACP,KAAK,CAAC;QAAK,EAC/EN,QAAQ,CACV;;IAGX,OAAOA,QAAQ;GAClB;EAED,oBACIH,wCACQU,UAAU;mBACF,MAAM;iBACR,QAAQ;IAClBE,SAAS,EAAEA,SAAS;iBACV,OAAO;IACjBV,GAAG,EAAEA,GAAG;IACRiB,IAAI,EAAC,QAAQ;IACbC,KAAK,EAAEnB,KAAK,CAAC,YAAY;MACxBgB,OAAO,EAAE,CACP;AAEf,CAAC;;;;"}
+{"version":3,"file":"Badge.js","sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { Color } from '../../types';\nimport { getSubtleColorShadeClasses, getColorShadeClasses, getOutlineColorShadeClasses } from '../../utils/tailwind';\nimport './Badge.css';\n\nexport type BadgeBaseProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /** Content should be a numerical value or tag/status like text **/\n    children: React.ReactNode;\n    /** Show small version of badge **/\n    small?: boolean;\n    /** Background color **/\n    color?: Color;\n};\n\ninterface CompactBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: boolean;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: never;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface OutlineBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: boolean;\n    /** Show subtle version **/\n    subtle?: never;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface SubtleBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface StatusBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: boolean;\n}\n\nexport type BadgeProps = CompactBadgeProps | OutlineBadgeProps | SubtleBadgeProps | StatusBadgeProps;\n\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\n    const {\n        children,\n        compact = false,\n        outline = false,\n        status = false,\n        subtle = false,\n        small = false,\n        color,\n        ...otherProps\n    } = props;\n    const isTransparent = color === 'transparent';\n    const className = cn(\n        'rounded-full border box-border overflow-hidden whitespace-nowrap inline-flex items-center justify-center',\n        {\n            [`border ${getOutlineColorShadeClasses(color)}`]: outline,\n            [`border-none font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,\n            [`border-none ${getColorShadeClasses(color)}`]: !outline && !subtle,\n            'h-4 min-w-0 py-0 px-1 text-xs': small,\n            'h-2 w-2 min-w-0': compact,\n            'font-bold': outline || !subtle,\n            'text-sm': !small,\n            'h-5 py-0 px-1.5': !compact && !small, // custom padding keeps single digits in a perfect circle\n            '!bg-grey-700': compact && isTransparent,\n        },\n        props.className\n    );\n\n    const content = () => {\n        if (compact) {\n            return <VisuallyHidden>{children}</VisuallyHidden>;\n        }\n\n        const contentToRender =\n            typeof children === 'string' ? <span className=\"items-center truncate\">{children}</span> : children;\n\n        if (status) {\n            return (\n                <>\n                    <div className={cn('mr-1 h-2 w-2 shrink-0 rounded-full', getColorShadeClasses(color))} />\n                    {contentToRender}\n                </>\n            );\n        }\n        return contentToRender;\n    };\n\n    return (\n        <span\n            {...otherProps}\n            aria-atomic=\"true\"\n            aria-live=\"polite\"\n            className={className}\n            data-taco=\"badge\"\n            ref={ref}\n            role=\"status\"\n            title={props['aria-label']}>\n            {content()}\n        </span>\n    );\n});\n"],"names":["Badge","React","props","ref","children","compact","outline","status","subtle","small","color","otherProps","isTransparent","className","cn","getOutlineColorShadeClasses","getSubtleColorShadeClasses","getColorShadeClasses","content","VisuallyHidden","contentToRender","role","title"],"mappings":";;;;;MA8DaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAKA,CAACE,KAAiB,EAAEC,GAA+B;EACnG,MAAM;IACFC,QAAQ;IACRC,OAAO,GAAG,KAAK;IACfC,OAAO,GAAG,KAAK;IACfC,MAAM,GAAG,KAAK;IACdC,MAAM,GAAG,KAAK;IACdC,KAAK,GAAG,KAAK;IACbC,KAAK;IACL,GAAGC;GACN,GAAGT,KAAK;EACT,MAAMU,aAAa,GAAGF,KAAK,KAAK,aAAa;EAC7C,MAAMG,SAAS,GAAGC,EAAE,CAChB,0GAA0G,EAC1G;IACI,CAAC,UAAUC,2BAA2B,CAACL,KAAK,CAAC,EAAE,GAAGJ,OAAO;IACzD,CAAC,2BAA2BU,0BAA0B,CAACN,KAAK,CAAC,EAAE,GAAGF,MAAM;IACxE,CAAC,eAAeS,oBAAoB,CAACP,KAAK,CAAC,EAAE,GAAG,CAACJ,OAAO,IAAI,CAACE,MAAM;IACnE,+BAA+B,EAAEC,KAAK;IACtC,iBAAiB,EAAEJ,OAAO;IAC1B,WAAW,EAAEC,OAAO,IAAI,CAACE,MAAM;IAC/B,SAAS,EAAE,CAACC,KAAK;IACjB,iBAAiB,EAAE,CAACJ,OAAO,IAAI,CAACI,KAAK;IACrC,cAAc,EAAEJ,OAAO,IAAIO;GAC9B,EACDV,KAAK,CAACW,SAAS,CAClB;EAED,MAAMK,OAAO,GAAGA;IACZ,IAAIb,OAAO,EAAE;MACT,oBAAOJ,cAACkB,cAAc,QAAEf,QAAQ,CAAkB;;IAGtD,MAAMgB,eAAe,GACjB,OAAOhB,QAAQ,KAAK,QAAQ,gBAAGH;MAAMY,SAAS,EAAC;OAAyBT,QAAQ,CAAQ,GAAGA,QAAQ;IAEvG,IAAIG,MAAM,EAAE;MACR,oBACIN,2CACIA;QAAKY,SAAS,EAAEC,EAAE,CAAC,oCAAoC,EAAEG,oBAAoB,CAACP,KAAK,CAAC;QAAK,EACxFU,eAAe,CACjB;;IAGX,OAAOA,eAAe;GACzB;EAED,oBACInB,wCACQU,UAAU;mBACF,MAAM;iBACR,QAAQ;IAClBE,SAAS,EAAEA,SAAS;iBACV,OAAO;IACjBV,GAAG,EAAEA,GAAG;IACRkB,IAAI,EAAC,QAAQ;IACbC,KAAK,EAAEpB,KAAK,CAAC,YAAY;MACxBgB,OAAO,EAAE,CACP;AAEf,CAAC;;;;"}

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

@@ -16,6 +16,11 @@ const getBannerIcon = type => {
           icon: "close",
           color: "red"
         });
+      case 'experiment':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "experiment",
+          color: "purple"
+        });
       case 'warning':
         return /*#__PURE__*/React__default.createElement(BadgeIcon, {
           icon: "warning",

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

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

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

@@ -14,7 +14,8 @@ const Base = /*#__PURE__*/forwardRef(function ButtonBase(props, ref) {
   }, props.className);
   return createButtonWithTooltip({
     ...otherProps,
-    'data-taco': 'button'
+    'data-taco': 'button',
+    'data-appearance': appearance
   }, className, ref);
 });
 const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { MenuProps } from '../Menu/Menu';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../Icon/Icon';\nimport { DrawerProps } from '../Drawer/Drawer';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /**\n     * Drawer component associated with the button, clicking the button will open the drawer.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated drawer when clicked.\n     */\n    drawer?: (props: Partial<DrawerProps>) => JSX.Element;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | JSX.Element;\n};\n\nconst Base = React.forwardRef(function ButtonBase(props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) {\n    const { appearance, fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        getAppearanceClasses(appearance),\n        'rounded px-3',\n        {\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButtonWithTooltip({ ...otherProps, 'data-taco': 'button' }, className, ref);\n});\n\nexport const Button = React.forwardRef(function Button(\n    props: ButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n    let children = buttonProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    const button = (\n        <Base {...buttonProps} ref={ref}>\n            {children}\n        </Base>\n    );\n\n    return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["Base","React","ButtonBase","props","ref","appearance","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","createButtonWithTooltip","Button","dialog","drawer","hanger","menu","popover","buttonProps","children","Array","isArray","Icon","key","name","button","createButtonWithOverlays"],"mappings":";;;;;AA4CA,MAAMA,IAAI,gBAAGC,UAAgB,CAAC,SAASC,UAAUA,CAACC,KAAkB,EAAEC,GAAqD;EACvH,MAAM;IAAEC,UAAU;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAClD,MAAMK,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EAAE,EAClBC,oBAAoB,CAACN,UAAU,CAAC,EAChC,cAAc,EACd;IACI,QAAQ,EAAEC;GACb,EACDH,KAAK,CAACK,SAAS,CAClB;EAED,OAAOI,uBAAuB,CAAC;IAAE,GAAGL,UAAU;IAAE,WAAW,EAAE;GAAU,EAAEC,SAAS,EAAEJ,GAAG,CAAC;AAC5F,CAAC,CAAC;MAEWS,MAAM,gBAAGZ,UAAgB,CAAC,SAASY,MAAMA,CAClDV,KAAkB,EAClBC,GAAqD;EAErD,MAAM;IAAEU,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGhB,KAAK;EAEvE,IAAIiB,QAAQ,GAAGD,WAAW,CAACC,QAAQ;;EAGnC,IAAI,OAAOH,IAAI,KAAK,UAAU,EAAE;IAC5BG,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACF,QAAQ,CAAC,GAC5B,CAAC,GAAGA,QAAQ,eAAEnB,cAACsB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC,GAC9D,CAACL,QAAQ,eAAEnB,cAACsB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC;;EAGrE,MAAMC,MAAM,gBACRzB,cAACD,IAAI,oBAAKmB,WAAW;IAAEf,GAAG,EAAEA;MACvBgB,QAAQ,CAEhB;EAED,OAAOO,wBAAwB,CAAC;IAAEb,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,EAAEQ,MAAM,CAAC;AACtF,CAAC;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { MenuProps } from '../Menu/Menu';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../Icon/Icon';\nimport { DrawerProps } from '../Drawer/Drawer';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /**\n     * Drawer component associated with the button, clicking the button will open the drawer.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated drawer when clicked.\n     */\n    drawer?: (props: Partial<DrawerProps>) => JSX.Element;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | JSX.Element;\n};\n\nconst Base = React.forwardRef(function ButtonBase(props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) {\n    const { appearance, fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        getAppearanceClasses(appearance),\n        'rounded px-3',\n        {\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButtonWithTooltip(\n        {\n            ...otherProps,\n            'data-taco': 'button',\n            'data-appearance': appearance,\n        },\n        className,\n        ref\n    );\n});\n\nexport const Button = React.forwardRef(function Button(\n    props: ButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n    let children = buttonProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    const button = (\n        <Base {...buttonProps} ref={ref}>\n            {children}\n        </Base>\n    );\n\n    return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["Base","React","ButtonBase","props","ref","appearance","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","createButtonWithTooltip","Button","dialog","drawer","hanger","menu","popover","buttonProps","children","Array","isArray","Icon","key","name","button","createButtonWithOverlays"],"mappings":";;;;;AA4CA,MAAMA,IAAI,gBAAGC,UAAgB,CAAC,SAASC,UAAUA,CAACC,KAAkB,EAAEC,GAAqD;EACvH,MAAM;IAAEC,UAAU;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAClD,MAAMK,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EAAE,EAClBC,oBAAoB,CAACN,UAAU,CAAC,EAChC,cAAc,EACd;IACI,QAAQ,EAAEC;GACb,EACDH,KAAK,CAACK,SAAS,CAClB;EAED,OAAOI,uBAAuB,CAC1B;IACI,GAAGL,UAAU;IACb,WAAW,EAAE,QAAQ;IACrB,iBAAiB,EAAEF;GACtB,EACDG,SAAS,EACTJ,GAAG,CACN;AACL,CAAC,CAAC;MAEWS,MAAM,gBAAGZ,UAAgB,CAAC,SAASY,MAAMA,CAClDV,KAAkB,EAClBC,GAAqD;EAErD,MAAM;IAAEU,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGhB,KAAK;EAEvE,IAAIiB,QAAQ,GAAGD,WAAW,CAACC,QAAQ;;EAGnC,IAAI,OAAOH,IAAI,KAAK,UAAU,EAAE;IAC5BG,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACF,QAAQ,CAAC,GAC5B,CAAC,GAAGA,QAAQ,eAAEnB,cAACsB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC,GAC9D,CAACL,QAAQ,eAAEnB,cAACsB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC;;EAGrE,MAAMC,MAAM,gBACRzB,cAACD,IAAI,oBAAKmB,WAAW;IAAEf,GAAG,EAAEA;MACvBgB,QAAQ,CAEhB;EAED,OAAOO,wBAAwB,CAAC;IAAEb,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,EAAEQ,MAAM,CAAC;AACtF,CAAC;;;;"}

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

@@ -9,7 +9,7 @@ const Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref)
     ...props
   } = externalProps;
   const className = cn('flex-grow overflow-auto', {
-    'mx-4 mb-4': !noPadding
+    'px-4 pb-4': !noPadding
   }, props.className);
   return /*#__PURE__*/createElement("div", Object.assign({}, props, {
     className: className,
@@ -31,7 +31,7 @@ const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
     "data-taco": "card",
     ref: ref
   }), /*#__PURE__*/createElement("div", {
-    className: "mx-4 mb-2 mt-4 flex justify-between"
+    className: "flex justify-between px-4 pb-2 pt-4"
   }, title && (/*#__PURE__*/createElement(Truncate, {
     tooltip: title
   }, /*#__PURE__*/createElement("h4", {

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            'px-4 pb-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=\"flex justify-between px-4 pb-2 pt-4\">\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;;;;"}

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

@@ -16,8 +16,9 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     ...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', {
-    'self-start': !!label
+  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
+    'self-start': !!label,
+    'mt-[0.1rem]': !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,
     'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled

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 focus-visible:yt-focus disabled:cursor-not-allowed text-white',\n        {\n            'self-start': !!label,\n            'mt-[0.1rem]': !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,qHAAqH,EACrH;IACI,YAAY,EAAE,CAAC,CAACP,KAAK;IACrB,aAAa,EAAE,CAACA;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;;;;"}

package/dist/esm/packages/taco/src/components/Combobox/useCombobox.js

@@ -37,22 +37,23 @@ const useCombobox = ({
   const data = useMemo(() => shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData, [shouldFilterData, inputValue, flattenedData]);
   // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state
   const [currentIndex, setCurrentIndex] = useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined);
-  const setInputValueByIndex = index => {
+  const setInputValueByIndex = (index, event) => {
     if (index !== undefined) {
       const option = data[index];
       if (option && !option.disabled) {
-        setInputValueByRef(inputRef.current, option.value, 'focusout');
+        const eventType = event !== null && event !== void 0 ? event : 'focusout';
+        setInputValueByRef(inputRef.current, option.value, eventType);
       }
     }
   };
-  const setCurrentValue = index => {
+  const setCurrentValue = (index, event) => {
     if (index === undefined) {
       return;
     }
     const option = data[index];
     // if the selected option is not already selected, trigger blur event
     if (option.value !== value) {
-      setInputValueByIndex(index);
+      setInputValueByIndex(index, event);
     } else {
       // if the selected option is already selected, refill input with its value
       setInputValue(convertToInputValue(value));
@@ -148,7 +149,8 @@ const useCombobox = ({
           }
         case 'Tab':
           {
-            setCurrentValue(currentIndex);
+            // default focusout will trigger onBlur and we don't want to trigger it twice
+            setCurrentValue(currentIndex, 'change');
             setOpen(false);
             return;
           }
@@ -163,7 +165,8 @@ const useCombobox = ({
               }
             }
             if (open) {
-              setCurrentValue(currentIndex);
+              // we need to focusout to trigger onBlur as we are not actually blurring the input
+              setCurrentValue(currentIndex, 'focusout');
               setOpen(false);
             }
             return;