@economic/taco 8.1.2-hanger-base-ui.2 → 8.1.2

package/dist/charts/components/useChartData.cjs

@@ -29,11 +29,11 @@ function useChart(children, options) {
         color: item.color,
         dataKey: item.dataKey,
         dot: {
-          fillOpacity: 0.8
+          fillOpacity: 1
         },
         isAnimationActive: false,
         fill: item.color,
-        fillOpacity: 0.8,
+        fillOpacity: 1,
         formatter: item.formatter,
         name: item.label,
         stroke: item.color,

package/dist/charts/components/useChartData.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useChartData.cjs","sources":["../../../src/charts/components/useChartData.tsx"],"sourcesContent":["import React from 'react';\nimport { ChartChildProps, ChartValueFormatter } from './types';\nimport { getThemeColor } from '../utils/color';\nimport { useLocalization } from '../../components/Provider/Localization';\n\nexport type useChartOptions = {\n    formatter?: ChartValueFormatter;\n    unit?: string;\n};\n\nexport type ChartShape = {\n    activeDot: {\n        strokeWidth: number;\n    };\n    color: string | undefined;\n    dataKey: string;\n    dot: {\n        fillOpacity: number;\n    };\n    isAnimationActive: boolean;\n    fill: string | undefined;\n    fillOpacity: number;\n    formatter: ChartValueFormatter | undefined;\n    name: string;\n    stroke: string | undefined;\n    strokeWidth: number;\n    unit?: string;\n};\n\nexport function useChart<TData extends object>(children: React.ReactNode, options?: useChartOptions) {\n    const [activeIndex, setActiveIndex] = React.useState<number | undefined>();\n    const [hiddenItems, toggleItem] = useChartDataHiddenState<TData>();\n    const localization = useLocalization();\n\n    const defaultFormatter = (value: number) =>\n        new Intl.NumberFormat(localization.locale, { minimumFractionDigits: 2 }).format(value);\n\n    const globalFormatter = options?.formatter ?? defaultFormatter;\n\n    const { items, shapes } = React.useMemo(() => {\n        const items = React.Children.toArray(children)\n            .filter(child => React.isValidElement<ChartChildProps<TData>>(child))\n            .map(child => {\n                const dataKey = child.props.dataKey ?? child.props.label;\n                return {\n                    ...child.props,\n                    dataKey,\n                    color: getThemeColor(child.props.color, 'blue-300'),\n                    formatter: child.props.formatter ?? globalFormatter,\n                    isHidden: !!hiddenItems[dataKey],\n                    unit: child.props.unit ?? options?.unit,\n                } as ChartChildProps<TData>;\n            });\n\n        const shapes: ChartShape[] = items\n            .filter(item => !hiddenItems[item.dataKey])\n            .map((item: ChartChildProps<TData>) => {\n                return {\n                    activeDot: {\n                        strokeWidth: 1,\n                    },\n                    color: item.color,\n                    dataKey: item.dataKey as string,\n                    dot: {\n                        fillOpacity: 0.8,\n                    },\n                    isAnimationActive: false,\n                    fill: item.color,\n                    fillOpacity: 0.8,\n                    formatter: item.formatter,\n                    name: item.label,\n                    stroke: item.color,\n                    strokeWidth: 1.5,\n                    unit: item.unit,\n                };\n            });\n\n        return { items, shapes };\n    }, [children, hiddenItems]);\n\n    return { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem };\n}\n\nexport function useChartDataHiddenState<TData extends object>(): [Record<keyof TData, boolean>, (name: keyof TData) => void] {\n    const [state, setState] = React.useState<Record<keyof TData, boolean>>({} as Record<keyof TData, boolean>);\n\n    function toggle(name: keyof TData) {\n        setState(currentState => {\n            const nextState = { ...currentState };\n\n            if (currentState[name]) {\n                delete nextState[name];\n            } else {\n                nextState[name] = true;\n            }\n\n            return nextState;\n        });\n    }\n\n    return [state, toggle];\n}\n"],"names":["useLocalization","items","getThemeColor","shapes"],"mappings":";;;;;AA6BgB,SAAA,SAA+B,UAA2B,SAA2B;AACjG,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAA6B;AACzE,QAAM,CAAC,aAAa,UAAU,IAAI,wBAA+B;AACjE,QAAM,eAAeA,aAAAA,gBAAgB;AAErC,QAAM,mBAAmB,CAAC,UACtB,IAAI,KAAK,aAAa,aAAa,QAAQ,EAAE,uBAAuB,EAAG,CAAA,EAAE,OAAO,KAAK;AAEnF,QAAA,mBAAkB,mCAAS,cAAa;AAE9C,QAAM,EAAE,OAAO,OAAW,IAAA,MAAM,QAAQ,MAAM;AAC1C,UAAMC,SAAQ,MAAM,SAAS,QAAQ,QAAQ,EACxC,OAAO,CAAS,UAAA,MAAM,eAAuC,KAAK,CAAC,EACnE,IAAI,CAAS,UAAA;AACV,YAAM,UAAU,MAAM,MAAM,WAAW,MAAM,MAAM;AAC5C,aAAA;AAAA,QACH,GAAG,MAAM;AAAA,QACT;AAAA,QACA,OAAOC,MAAAA,cAAc,MAAM,MAAM,OAAO,UAAU;AAAA,QAClD,WAAW,MAAM,MAAM,aAAa;AAAA,QACpC,UAAU,CAAC,CAAC,YAAY,OAAO;AAAA,QAC/B,MAAM,MAAM,MAAM,SAAQ,mCAAS;AAAA,MACvC;AAAA,IAAA,CACH;AAEL,UAAMC,UAAuBF,OACxB,OAAO,CAAA,SAAQ,CAAC,YAAY,KAAK,OAAO,CAAC,EACzC,IAAI,CAAC,SAAiC;AAC5B,aAAA;AAAA,QACH,WAAW;AAAA,UACP,aAAa;AAAA,QACjB;AAAA,QACA,OAAO,KAAK;AAAA,QACZ,SAAS,KAAK;AAAA,QACd,KAAK;AAAA,UACD,aAAa;AAAA,QACjB;AAAA,QACA,mBAAmB;AAAA,QACnB,MAAM,KAAK;AAAA,QACX,aAAa;AAAA,QACb,WAAW,KAAK;AAAA,QAChB,MAAM,KAAK;AAAA,QACX,QAAQ,KAAK;AAAA,QACb,aAAa;AAAA,QACb,MAAM,KAAK;AAAA,MACf;AAAA,IAAA,CACH;AAEL,WAAO,EAAE,OAAAA,QAAO,QAAAE,QAAO;AAAA,EAAA,GACxB,CAAC,UAAU,WAAW,CAAC;AAE1B,SAAO,EAAE,OAAO,QAAQ,aAAa,gBAAgB,iBAAiB,WAAW;AACrF;AAEO,SAAS,0BAA6G;AACzH,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAuC,CAAA,CAAkC;AAEzG,WAAS,OAAO,MAAmB;AAC/B,aAAS,CAAgB,iBAAA;AACf,YAAA,YAAY,EAAE,GAAG,aAAa;AAEhC,UAAA,aAAa,IAAI,GAAG;AACpB,eAAO,UAAU,IAAI;AAAA,MAAA,OAClB;AACH,kBAAU,IAAI,IAAI;AAAA,MAAA;AAGf,aAAA;AAAA,IAAA,CACV;AAAA,EAAA;AAGE,SAAA,CAAC,OAAO,MAAM;AACzB;;;"}
+{"version":3,"file":"useChartData.cjs","sources":["../../../src/charts/components/useChartData.tsx"],"sourcesContent":["import React from 'react';\nimport { ChartChildProps, ChartValueFormatter } from './types';\nimport { getThemeColor } from '../utils/color';\nimport { useLocalization } from '../../components/Provider/Localization';\n\nexport type useChartOptions = {\n    formatter?: ChartValueFormatter;\n    unit?: string;\n};\n\nexport type ChartShape = {\n    activeDot: {\n        strokeWidth: number;\n    };\n    color: string | undefined;\n    dataKey: string;\n    dot: {\n        fillOpacity: number;\n    };\n    isAnimationActive: boolean;\n    fill: string | undefined;\n    fillOpacity: number;\n    formatter: ChartValueFormatter | undefined;\n    name: string;\n    stroke: string | undefined;\n    strokeWidth: number;\n    unit?: string;\n};\n\nexport function useChart<TData extends object>(children: React.ReactNode, options?: useChartOptions) {\n    const [activeIndex, setActiveIndex] = React.useState<number | undefined>();\n    const [hiddenItems, toggleItem] = useChartDataHiddenState<TData>();\n    const localization = useLocalization();\n\n    const defaultFormatter = (value: number) =>\n        new Intl.NumberFormat(localization.locale, { minimumFractionDigits: 2 }).format(value);\n\n    const globalFormatter = options?.formatter ?? defaultFormatter;\n\n    const { items, shapes } = React.useMemo(() => {\n        const items = React.Children.toArray(children)\n            .filter(child => React.isValidElement<ChartChildProps<TData>>(child))\n            .map(child => {\n                const dataKey = child.props.dataKey ?? child.props.label;\n                return {\n                    ...child.props,\n                    dataKey,\n                    color: getThemeColor(child.props.color, 'blue-300'),\n                    formatter: child.props.formatter ?? globalFormatter,\n                    isHidden: !!hiddenItems[dataKey],\n                    unit: child.props.unit ?? options?.unit,\n                } as ChartChildProps<TData>;\n            });\n\n        const shapes: ChartShape[] = items\n            .filter(item => !hiddenItems[item.dataKey])\n            .map((item: ChartChildProps<TData>) => {\n                return {\n                    activeDot: {\n                        strokeWidth: 1,\n                    },\n                    color: item.color,\n                    dataKey: item.dataKey as string,\n                    dot: {\n                        fillOpacity: 1,\n                    },\n                    isAnimationActive: false,\n                    fill: item.color,\n                    fillOpacity: 1,\n                    formatter: item.formatter,\n                    name: item.label,\n                    stroke: item.color,\n                    strokeWidth: 1.5,\n                    unit: item.unit,\n                };\n            });\n\n        return { items, shapes };\n    }, [children, hiddenItems]);\n\n    return { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem };\n}\n\nexport function useChartDataHiddenState<TData extends object>(): [Record<keyof TData, boolean>, (name: keyof TData) => void] {\n    const [state, setState] = React.useState<Record<keyof TData, boolean>>({} as Record<keyof TData, boolean>);\n\n    function toggle(name: keyof TData) {\n        setState(currentState => {\n            const nextState = { ...currentState };\n\n            if (currentState[name]) {\n                delete nextState[name];\n            } else {\n                nextState[name] = true;\n            }\n\n            return nextState;\n        });\n    }\n\n    return [state, toggle];\n}\n"],"names":["useLocalization","items","getThemeColor","shapes"],"mappings":";;;;;AA6BgB,SAAA,SAA+B,UAA2B,SAA2B;AACjG,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAA6B;AACzE,QAAM,CAAC,aAAa,UAAU,IAAI,wBAA+B;AACjE,QAAM,eAAeA,aAAAA,gBAAgB;AAErC,QAAM,mBAAmB,CAAC,UACtB,IAAI,KAAK,aAAa,aAAa,QAAQ,EAAE,uBAAuB,EAAG,CAAA,EAAE,OAAO,KAAK;AAEnF,QAAA,mBAAkB,mCAAS,cAAa;AAE9C,QAAM,EAAE,OAAO,OAAW,IAAA,MAAM,QAAQ,MAAM;AAC1C,UAAMC,SAAQ,MAAM,SAAS,QAAQ,QAAQ,EACxC,OAAO,CAAS,UAAA,MAAM,eAAuC,KAAK,CAAC,EACnE,IAAI,CAAS,UAAA;AACV,YAAM,UAAU,MAAM,MAAM,WAAW,MAAM,MAAM;AAC5C,aAAA;AAAA,QACH,GAAG,MAAM;AAAA,QACT;AAAA,QACA,OAAOC,MAAAA,cAAc,MAAM,MAAM,OAAO,UAAU;AAAA,QAClD,WAAW,MAAM,MAAM,aAAa;AAAA,QACpC,UAAU,CAAC,CAAC,YAAY,OAAO;AAAA,QAC/B,MAAM,MAAM,MAAM,SAAQ,mCAAS;AAAA,MACvC;AAAA,IAAA,CACH;AAEL,UAAMC,UAAuBF,OACxB,OAAO,CAAA,SAAQ,CAAC,YAAY,KAAK,OAAO,CAAC,EACzC,IAAI,CAAC,SAAiC;AAC5B,aAAA;AAAA,QACH,WAAW;AAAA,UACP,aAAa;AAAA,QACjB;AAAA,QACA,OAAO,KAAK;AAAA,QACZ,SAAS,KAAK;AAAA,QACd,KAAK;AAAA,UACD,aAAa;AAAA,QACjB;AAAA,QACA,mBAAmB;AAAA,QACnB,MAAM,KAAK;AAAA,QACX,aAAa;AAAA,QACb,WAAW,KAAK;AAAA,QAChB,MAAM,KAAK;AAAA,QACX,QAAQ,KAAK;AAAA,QACb,aAAa;AAAA,QACb,MAAM,KAAK;AAAA,MACf;AAAA,IAAA,CACH;AAEL,WAAO,EAAE,OAAAA,QAAO,QAAAE,QAAO;AAAA,EAAA,GACxB,CAAC,UAAU,WAAW,CAAC;AAE1B,SAAO,EAAE,OAAO,QAAQ,aAAa,gBAAgB,iBAAiB,WAAW;AACrF;AAEO,SAAS,0BAA6G;AACzH,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAuC,CAAA,CAAkC;AAEzG,WAAS,OAAO,MAAmB;AAC/B,aAAS,CAAgB,iBAAA;AACf,YAAA,YAAY,EAAE,GAAG,aAAa;AAEhC,UAAA,aAAa,IAAI,GAAG;AACpB,eAAO,UAAU,IAAI;AAAA,MAAA,OAClB;AACH,kBAAU,IAAI,IAAI;AAAA,MAAA;AAGf,aAAA;AAAA,IAAA,CACV;AAAA,EAAA;AAGE,SAAA,CAAC,OAAO,MAAM;AACzB;;;"}

package/dist/charts/components/useChartData.js

@@ -27,11 +27,11 @@ function useChart(children, options) {
         color: item.color,
         dataKey: item.dataKey,
         dot: {
-          fillOpacity: 0.8
+          fillOpacity: 1
         },
         isAnimationActive: false,
         fill: item.color,
-        fillOpacity: 0.8,
+        fillOpacity: 1,
         formatter: item.formatter,
         name: item.label,
         stroke: item.color,

package/dist/charts/components/useChartData.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChartData.js","sources":["../../../src/charts/components/useChartData.tsx"],"sourcesContent":["import React from 'react';\nimport { ChartChildProps, ChartValueFormatter } from './types';\nimport { getThemeColor } from '../utils/color';\nimport { useLocalization } from '../../components/Provider/Localization';\n\nexport type useChartOptions = {\n    formatter?: ChartValueFormatter;\n    unit?: string;\n};\n\nexport type ChartShape = {\n    activeDot: {\n        strokeWidth: number;\n    };\n    color: string | undefined;\n    dataKey: string;\n    dot: {\n        fillOpacity: number;\n    };\n    isAnimationActive: boolean;\n    fill: string | undefined;\n    fillOpacity: number;\n    formatter: ChartValueFormatter | undefined;\n    name: string;\n    stroke: string | undefined;\n    strokeWidth: number;\n    unit?: string;\n};\n\nexport function useChart<TData extends object>(children: React.ReactNode, options?: useChartOptions) {\n    const [activeIndex, setActiveIndex] = React.useState<number | undefined>();\n    const [hiddenItems, toggleItem] = useChartDataHiddenState<TData>();\n    const localization = useLocalization();\n\n    const defaultFormatter = (value: number) =>\n        new Intl.NumberFormat(localization.locale, { minimumFractionDigits: 2 }).format(value);\n\n    const globalFormatter = options?.formatter ?? defaultFormatter;\n\n    const { items, shapes } = React.useMemo(() => {\n        const items = React.Children.toArray(children)\n            .filter(child => React.isValidElement<ChartChildProps<TData>>(child))\n            .map(child => {\n                const dataKey = child.props.dataKey ?? child.props.label;\n                return {\n                    ...child.props,\n                    dataKey,\n                    color: getThemeColor(child.props.color, 'blue-300'),\n                    formatter: child.props.formatter ?? globalFormatter,\n                    isHidden: !!hiddenItems[dataKey],\n                    unit: child.props.unit ?? options?.unit,\n                } as ChartChildProps<TData>;\n            });\n\n        const shapes: ChartShape[] = items\n            .filter(item => !hiddenItems[item.dataKey])\n            .map((item: ChartChildProps<TData>) => {\n                return {\n                    activeDot: {\n                        strokeWidth: 1,\n                    },\n                    color: item.color,\n                    dataKey: item.dataKey as string,\n                    dot: {\n                        fillOpacity: 0.8,\n                    },\n                    isAnimationActive: false,\n                    fill: item.color,\n                    fillOpacity: 0.8,\n                    formatter: item.formatter,\n                    name: item.label,\n                    stroke: item.color,\n                    strokeWidth: 1.5,\n                    unit: item.unit,\n                };\n            });\n\n        return { items, shapes };\n    }, [children, hiddenItems]);\n\n    return { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem };\n}\n\nexport function useChartDataHiddenState<TData extends object>(): [Record<keyof TData, boolean>, (name: keyof TData) => void] {\n    const [state, setState] = React.useState<Record<keyof TData, boolean>>({} as Record<keyof TData, boolean>);\n\n    function toggle(name: keyof TData) {\n        setState(currentState => {\n            const nextState = { ...currentState };\n\n            if (currentState[name]) {\n                delete nextState[name];\n            } else {\n                nextState[name] = true;\n            }\n\n            return nextState;\n        });\n    }\n\n    return [state, toggle];\n}\n"],"names":["React","items","shapes"],"mappings":";;;AA6BgB,SAAA,SAA+B,UAA2B,SAA2B;AACjG,QAAM,CAAC,aAAa,cAAc,IAAIA,eAAM,SAA6B;AACzE,QAAM,CAAC,aAAa,UAAU,IAAI,wBAA+B;AACjE,QAAM,eAAe,gBAAgB;AAErC,QAAM,mBAAmB,CAAC,UACtB,IAAI,KAAK,aAAa,aAAa,QAAQ,EAAE,uBAAuB,EAAG,CAAA,EAAE,OAAO,KAAK;AAEnF,QAAA,mBAAkB,mCAAS,cAAa;AAE9C,QAAM,EAAE,OAAO,OAAW,IAAAA,eAAM,QAAQ,MAAM;AAC1C,UAAMC,SAAQD,eAAM,SAAS,QAAQ,QAAQ,EACxC,OAAO,CAAS,UAAAA,eAAM,eAAuC,KAAK,CAAC,EACnE,IAAI,CAAS,UAAA;AACV,YAAM,UAAU,MAAM,MAAM,WAAW,MAAM,MAAM;AAC5C,aAAA;AAAA,QACH,GAAG,MAAM;AAAA,QACT;AAAA,QACA,OAAO,cAAc,MAAM,MAAM,OAAO,UAAU;AAAA,QAClD,WAAW,MAAM,MAAM,aAAa;AAAA,QACpC,UAAU,CAAC,CAAC,YAAY,OAAO;AAAA,QAC/B,MAAM,MAAM,MAAM,SAAQ,mCAAS;AAAA,MACvC;AAAA,IAAA,CACH;AAEL,UAAME,UAAuBD,OACxB,OAAO,CAAA,SAAQ,CAAC,YAAY,KAAK,OAAO,CAAC,EACzC,IAAI,CAAC,SAAiC;AAC5B,aAAA;AAAA,QACH,WAAW;AAAA,UACP,aAAa;AAAA,QACjB;AAAA,QACA,OAAO,KAAK;AAAA,QACZ,SAAS,KAAK;AAAA,QACd,KAAK;AAAA,UACD,aAAa;AAAA,QACjB;AAAA,QACA,mBAAmB;AAAA,QACnB,MAAM,KAAK;AAAA,QACX,aAAa;AAAA,QACb,WAAW,KAAK;AAAA,QAChB,MAAM,KAAK;AAAA,QACX,QAAQ,KAAK;AAAA,QACb,aAAa;AAAA,QACb,MAAM,KAAK;AAAA,MACf;AAAA,IAAA,CACH;AAEL,WAAO,EAAE,OAAAA,QAAO,QAAAC,QAAO;AAAA,EAAA,GACxB,CAAC,UAAU,WAAW,CAAC;AAE1B,SAAO,EAAE,OAAO,QAAQ,aAAa,gBAAgB,iBAAiB,WAAW;AACrF;AAEO,SAAS,0BAA6G;AACzH,QAAM,CAAC,OAAO,QAAQ,IAAIF,eAAM,SAAuC,CAAA,CAAkC;AAEzG,WAAS,OAAO,MAAmB;AAC/B,aAAS,CAAgB,iBAAA;AACf,YAAA,YAAY,EAAE,GAAG,aAAa;AAEhC,UAAA,aAAa,IAAI,GAAG;AACpB,eAAO,UAAU,IAAI;AAAA,MAAA,OAClB;AACH,kBAAU,IAAI,IAAI;AAAA,MAAA;AAGf,aAAA;AAAA,IAAA,CACV;AAAA,EAAA;AAGE,SAAA,CAAC,OAAO,MAAM;AACzB;"}
+{"version":3,"file":"useChartData.js","sources":["../../../src/charts/components/useChartData.tsx"],"sourcesContent":["import React from 'react';\nimport { ChartChildProps, ChartValueFormatter } from './types';\nimport { getThemeColor } from '../utils/color';\nimport { useLocalization } from '../../components/Provider/Localization';\n\nexport type useChartOptions = {\n    formatter?: ChartValueFormatter;\n    unit?: string;\n};\n\nexport type ChartShape = {\n    activeDot: {\n        strokeWidth: number;\n    };\n    color: string | undefined;\n    dataKey: string;\n    dot: {\n        fillOpacity: number;\n    };\n    isAnimationActive: boolean;\n    fill: string | undefined;\n    fillOpacity: number;\n    formatter: ChartValueFormatter | undefined;\n    name: string;\n    stroke: string | undefined;\n    strokeWidth: number;\n    unit?: string;\n};\n\nexport function useChart<TData extends object>(children: React.ReactNode, options?: useChartOptions) {\n    const [activeIndex, setActiveIndex] = React.useState<number | undefined>();\n    const [hiddenItems, toggleItem] = useChartDataHiddenState<TData>();\n    const localization = useLocalization();\n\n    const defaultFormatter = (value: number) =>\n        new Intl.NumberFormat(localization.locale, { minimumFractionDigits: 2 }).format(value);\n\n    const globalFormatter = options?.formatter ?? defaultFormatter;\n\n    const { items, shapes } = React.useMemo(() => {\n        const items = React.Children.toArray(children)\n            .filter(child => React.isValidElement<ChartChildProps<TData>>(child))\n            .map(child => {\n                const dataKey = child.props.dataKey ?? child.props.label;\n                return {\n                    ...child.props,\n                    dataKey,\n                    color: getThemeColor(child.props.color, 'blue-300'),\n                    formatter: child.props.formatter ?? globalFormatter,\n                    isHidden: !!hiddenItems[dataKey],\n                    unit: child.props.unit ?? options?.unit,\n                } as ChartChildProps<TData>;\n            });\n\n        const shapes: ChartShape[] = items\n            .filter(item => !hiddenItems[item.dataKey])\n            .map((item: ChartChildProps<TData>) => {\n                return {\n                    activeDot: {\n                        strokeWidth: 1,\n                    },\n                    color: item.color,\n                    dataKey: item.dataKey as string,\n                    dot: {\n                        fillOpacity: 1,\n                    },\n                    isAnimationActive: false,\n                    fill: item.color,\n                    fillOpacity: 1,\n                    formatter: item.formatter,\n                    name: item.label,\n                    stroke: item.color,\n                    strokeWidth: 1.5,\n                    unit: item.unit,\n                };\n            });\n\n        return { items, shapes };\n    }, [children, hiddenItems]);\n\n    return { items, shapes, activeIndex, setActiveIndex, globalFormatter, toggleItem };\n}\n\nexport function useChartDataHiddenState<TData extends object>(): [Record<keyof TData, boolean>, (name: keyof TData) => void] {\n    const [state, setState] = React.useState<Record<keyof TData, boolean>>({} as Record<keyof TData, boolean>);\n\n    function toggle(name: keyof TData) {\n        setState(currentState => {\n            const nextState = { ...currentState };\n\n            if (currentState[name]) {\n                delete nextState[name];\n            } else {\n                nextState[name] = true;\n            }\n\n            return nextState;\n        });\n    }\n\n    return [state, toggle];\n}\n"],"names":["React","items","shapes"],"mappings":";;;AA6BgB,SAAA,SAA+B,UAA2B,SAA2B;AACjG,QAAM,CAAC,aAAa,cAAc,IAAIA,eAAM,SAA6B;AACzE,QAAM,CAAC,aAAa,UAAU,IAAI,wBAA+B;AACjE,QAAM,eAAe,gBAAgB;AAErC,QAAM,mBAAmB,CAAC,UACtB,IAAI,KAAK,aAAa,aAAa,QAAQ,EAAE,uBAAuB,EAAG,CAAA,EAAE,OAAO,KAAK;AAEnF,QAAA,mBAAkB,mCAAS,cAAa;AAE9C,QAAM,EAAE,OAAO,OAAW,IAAAA,eAAM,QAAQ,MAAM;AAC1C,UAAMC,SAAQD,eAAM,SAAS,QAAQ,QAAQ,EACxC,OAAO,CAAS,UAAAA,eAAM,eAAuC,KAAK,CAAC,EACnE,IAAI,CAAS,UAAA;AACV,YAAM,UAAU,MAAM,MAAM,WAAW,MAAM,MAAM;AAC5C,aAAA;AAAA,QACH,GAAG,MAAM;AAAA,QACT;AAAA,QACA,OAAO,cAAc,MAAM,MAAM,OAAO,UAAU;AAAA,QAClD,WAAW,MAAM,MAAM,aAAa;AAAA,QACpC,UAAU,CAAC,CAAC,YAAY,OAAO;AAAA,QAC/B,MAAM,MAAM,MAAM,SAAQ,mCAAS;AAAA,MACvC;AAAA,IAAA,CACH;AAEL,UAAME,UAAuBD,OACxB,OAAO,CAAA,SAAQ,CAAC,YAAY,KAAK,OAAO,CAAC,EACzC,IAAI,CAAC,SAAiC;AAC5B,aAAA;AAAA,QACH,WAAW;AAAA,UACP,aAAa;AAAA,QACjB;AAAA,QACA,OAAO,KAAK;AAAA,QACZ,SAAS,KAAK;AAAA,QACd,KAAK;AAAA,UACD,aAAa;AAAA,QACjB;AAAA,QACA,mBAAmB;AAAA,QACnB,MAAM,KAAK;AAAA,QACX,aAAa;AAAA,QACb,WAAW,KAAK;AAAA,QAChB,MAAM,KAAK;AAAA,QACX,QAAQ,KAAK;AAAA,QACb,aAAa;AAAA,QACb,MAAM,KAAK;AAAA,MACf;AAAA,IAAA,CACH;AAEL,WAAO,EAAE,OAAAA,QAAO,QAAAC,QAAO;AAAA,EAAA,GACxB,CAAC,UAAU,WAAW,CAAC;AAE1B,SAAO,EAAE,OAAO,QAAQ,aAAa,gBAAgB,iBAAiB,WAAW;AACrF;AAEO,SAAS,0BAA6G;AACzH,QAAM,CAAC,OAAO,QAAQ,IAAIF,eAAM,SAAuC,CAAA,CAAkC;AAEzG,WAAS,OAAO,MAAmB;AAC/B,aAAS,CAAgB,iBAAA;AACf,YAAA,YAAY,EAAE,GAAG,aAAa;AAEhC,UAAA,aAAa,IAAI,GAAG;AACpB,eAAO,UAAU,IAAI;AAAA,MAAA,OAClB;AACH,kBAAU,IAAI,IAAI;AAAA,MAAA;AAGf,aAAA;AAAA,IAAA,CACV;AAAA,EAAA;AAGE,SAAA,CAAC,OAAO,MAAM;AACzB;"}

package/dist/components/Backdrop/Backdrop.cjs

@@ -23,7 +23,7 @@ const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const Backdrop = React__namespace.forwardRef(function Backdrop2(props, forwardedRef) {
   const ref = useMergedRef.useMergedRef(forwardedRef);
   const className = cn(
-    "fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible print:overflow-visible print:absolute",
+    "fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] aria-hidden:invisible print:overflow-visible print:absolute",
     props.className
   );
   const onPointerDown = (event) => {

package/dist/components/Backdrop/Backdrop.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.cjs","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\nexport type BackdropProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(props, forwardedRef) {\n    const ref = useMergedRef<HTMLDivElement>(forwardedRef);\n    const className = cn(\n        'fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible print:overflow-visible print:absolute',\n        props.className\n    );\n\n    // prevents focus from leaving dialogs when clicking on backdrops\n    const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n        if (event.target === ref.current) {\n            event.preventDefault();\n        }\n    };\n\n    return <div {...props} className={className} onPointerDown={onPointerDown} data-taco=\"backdrop\" ref={ref} />;\n});\n"],"names":["React","Backdrop","useMergedRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAMO,MAAM,WAAWA,iBAAM,WAA0C,SAASC,UAAS,OAAO,cAAc;AACrG,QAAA,MAAMC,0BAA6B,YAAY;AACrD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAGM,QAAA,gBAAgB,CAAC,UAA8C;AAC7D,QAAA,MAAM,WAAW,IAAI,SAAS;AAC9B,YAAM,eAAe;AAAA,IAAA;AAAA,EAE7B;AAEO,SAAAF,iCAAA,cAAC,SAAK,GAAG,OAAO,WAAsB,eAA8B,aAAU,YAAW,IAAU,CAAA;AAC9G,CAAC;;"}
+{"version":3,"file":"Backdrop.cjs","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\nexport type BackdropProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(props, forwardedRef) {\n    const ref = useMergedRef<HTMLDivElement>(forwardedRef);\n    const className = cn(\n        'fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] aria-hidden:invisible print:overflow-visible print:absolute',\n        props.className\n    );\n\n    // prevents focus from leaving dialogs when clicking on backdrops\n    const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n        if (event.target === ref.current) {\n            event.preventDefault();\n        }\n    };\n\n    return <div {...props} className={className} onPointerDown={onPointerDown} data-taco=\"backdrop\" ref={ref} />;\n});\n"],"names":["React","Backdrop","useMergedRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAMO,MAAM,WAAWA,iBAAM,WAA0C,SAASC,UAAS,OAAO,cAAc;AACrG,QAAA,MAAMC,0BAA6B,YAAY;AACrD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAGM,QAAA,gBAAgB,CAAC,UAA8C;AAC7D,QAAA,MAAM,WAAW,IAAI,SAAS;AAC9B,YAAM,eAAe;AAAA,IAAA;AAAA,EAE7B;AAEO,SAAAF,iCAAA,cAAC,SAAK,GAAG,OAAO,WAAsB,eAA8B,aAAU,YAAW,IAAU,CAAA;AAC9G,CAAC;;"}

package/dist/components/Backdrop/Backdrop.js

@@ -4,7 +4,7 @@ import { useMergedRef } from "../../hooks/useMergedRef.js";
 const Backdrop = React.forwardRef(function Backdrop2(props, forwardedRef) {
   const ref = useMergedRef(forwardedRef);
   const className = cn(
-    "fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible print:overflow-visible print:absolute",
+    "fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] aria-hidden:invisible print:overflow-visible print:absolute",
     props.className
   );
   const onPointerDown = (event) => {

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

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.js","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\nexport type BackdropProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(props, forwardedRef) {\n    const ref = useMergedRef<HTMLDivElement>(forwardedRef);\n    const className = cn(\n        'fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible print:overflow-visible print:absolute',\n        props.className\n    );\n\n    // prevents focus from leaving dialogs when clicking on backdrops\n    const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n        if (event.target === ref.current) {\n            event.preventDefault();\n        }\n    };\n\n    return <div {...props} className={className} onPointerDown={onPointerDown} data-taco=\"backdrop\" ref={ref} />;\n});\n"],"names":["Backdrop"],"mappings":";;;AAMO,MAAM,WAAW,MAAM,WAA0C,SAASA,UAAS,OAAO,cAAc;AACrG,QAAA,MAAM,aAA6B,YAAY;AACrD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAGM,QAAA,gBAAgB,CAAC,UAA8C;AAC7D,QAAA,MAAM,WAAW,IAAI,SAAS;AAC9B,YAAM,eAAe;AAAA,IAAA;AAAA,EAE7B;AAEO,SAAA,sBAAA,cAAC,SAAK,GAAG,OAAO,WAAsB,eAA8B,aAAU,YAAW,IAAU,CAAA;AAC9G,CAAC;"}
+{"version":3,"file":"Backdrop.js","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\nexport type BackdropProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(props, forwardedRef) {\n    const ref = useMergedRef<HTMLDivElement>(forwardedRef);\n    const className = cn(\n        'fixed inset-0 cursor-default overflow-y-auto bg-brand-midnight/[0.3] aria-hidden:invisible print:overflow-visible print:absolute',\n        props.className\n    );\n\n    // prevents focus from leaving dialogs when clicking on backdrops\n    const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n        if (event.target === ref.current) {\n            event.preventDefault();\n        }\n    };\n\n    return <div {...props} className={className} onPointerDown={onPointerDown} data-taco=\"backdrop\" ref={ref} />;\n});\n"],"names":["Backdrop"],"mappings":";;;AAMO,MAAM,WAAW,MAAM,WAA0C,SAASA,UAAS,OAAO,cAAc;AACrG,QAAA,MAAM,aAA6B,YAAY;AACrD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAGM,QAAA,gBAAgB,CAAC,UAA8C;AAC7D,QAAA,MAAM,WAAW,IAAI,SAAS;AAC9B,YAAM,eAAe;AAAA,IAAA;AAAA,EAE7B;AAEO,SAAA,sBAAA,cAAC,SAAK,GAAG,OAAO,WAAsB,eAA8B,aAAU,YAAW,IAAU,CAAA;AAC9G,CAAC;"}

package/dist/components/Button/util.cjs

@@ -16,15 +16,15 @@ const getAppearanceClasses = (value, icon = false) => {
       return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible: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] focus-visible:bg-[#000]/[0.08] aria-disabled:text-black/30`;
+        return `bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30`;
       }
       return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50`;
     }
     case "transparent": {
-      return `bg-transparent text-black visited:text-black hover:text-black focus-visible: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 focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent`;
     }
     default:
-      return `wcag-gray-200 visited:wcag-gray-200 hover:wcag-gray-300 focus-visible:wcag-gray-300 aria-disabled:bg-gray-200/50 aria-disabled:text-black/30`;
+      return `wcag-gray-100 visited:wcag-gray-200 hover:wcag-gray-200 focus-visible:wcag-gray-200 aria-disabled:bg-gray-100 aria-disabled:text-black/30`;
   }
 };
 const createButtonWithTooltip = (props, className, ref) => {

package/dist/components/Button/util.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"util.cjs","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 focus-visible: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 focus-visible: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 focus-visible: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] focus-visible: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 focus-visible: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 focus-visible:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;\n        }\n\n        default:\n            return `wcag-gray-200 visited:wcag-gray-200 hover:wcag-gray-300 focus-visible:wcag-gray-300 aria-disabled:bg-gray-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":["ButtonPrimitive.Button","Tooltip"],"mappings":";;;;;AAKO,MAAM,mBAAmB,MAAM;AAC3B,SAAA;AACX;AAEO,MAAM,uBAAuB,CAAC,OAA+B,OAAO,UAAkB;AACzF,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK,YAAY;AACb,UAAI,MAAM;AACC,eAAA;AAAA,MAAA;AAGJ,aAAA;AAAA,IAAA;AAAA,IAGX,KAAK,eAAe;AACT,aAAA;AAAA,IAAA;AAAA,IAGX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEO,MAAM,0BAA0B,CACnC,OACA,WACA,QACc;AACd,QAAM,EAAE,SAAS,GAAG,YAAA,IAAgB;AAC9B,QAAA,6CAAUA,OAAAA,QAAA,EAAwB,GAAG,aAAa,WAAsB,KAAU;AAExF,MAAI,SAAS;AACT,WAAQ,sBAAA,cAAAC,QAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,MAAO;AAAA,EAAA;AAGrC,SAAA;AACX;AAEa,MAAA,2BAA2B,CAAC,OAAY,eAA4B;AAC7E,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,YAAY;AAClD,MAAI,SAAS;AAET,MAAA,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC5B,OAAO,WAAW,YAAY;AACrC,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC5B,OAAO,SAAS,YAAY;AACnC,aAAS,KAAK,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC1B,OAAO,YAAY,YAAY;AACtC,aAAS,QAAQ,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA;AAGpC,MAAA,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,QAAQ,OAAA,CAAQ;AAAA,EAAA;AAG/B,SAAA;AACX;;;;;"}
+{"version":3,"file":"util.cjs","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 focus-visible: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 focus-visible: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 focus-visible: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-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30`;\n            }\n\n            return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible: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 focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent`;\n        }\n\n        default:\n            return `wcag-gray-100 visited:wcag-gray-200 hover:wcag-gray-200 focus-visible:wcag-gray-200 aria-disabled:bg-gray-100 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":["ButtonPrimitive.Button","Tooltip"],"mappings":";;;;;AAKO,MAAM,mBAAmB,MAAM;AAC3B,SAAA;AACX;AAEO,MAAM,uBAAuB,CAAC,OAA+B,OAAO,UAAkB;AACzF,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK,YAAY;AACb,UAAI,MAAM;AACC,eAAA;AAAA,MAAA;AAGJ,aAAA;AAAA,IAAA;AAAA,IAGX,KAAK,eAAe;AACT,aAAA;AAAA,IAAA;AAAA,IAGX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEO,MAAM,0BAA0B,CACnC,OACA,WACA,QACc;AACd,QAAM,EAAE,SAAS,GAAG,YAAA,IAAgB;AAC9B,QAAA,6CAAUA,OAAAA,QAAA,EAAwB,GAAG,aAAa,WAAsB,KAAU;AAExF,MAAI,SAAS;AACT,WAAQ,sBAAA,cAAAC,QAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,MAAO;AAAA,EAAA;AAGrC,SAAA;AACX;AAEa,MAAA,2BAA2B,CAAC,OAAY,eAA4B;AAC7E,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,YAAY;AAClD,MAAI,SAAS;AAET,MAAA,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC5B,OAAO,WAAW,YAAY;AACrC,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC5B,OAAO,SAAS,YAAY;AACnC,aAAS,KAAK,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC1B,OAAO,YAAY,YAAY;AACtC,aAAS,QAAQ,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA;AAGpC,MAAA,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,QAAQ,OAAA,CAAQ;AAAA,EAAA;AAG/B,SAAA;AACX;;;;;"}

package/dist/components/Button/util.js

@@ -14,15 +14,15 @@ const getAppearanceClasses = (value, icon = false) => {
       return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible: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] focus-visible:bg-[#000]/[0.08] aria-disabled:text-black/30`;
+        return `bg-transparent text-black visited:text-black hover:bg-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30`;
       }
       return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50`;
     }
     case "transparent": {
-      return `bg-transparent text-black visited:text-black hover:text-black focus-visible: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 focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent`;
     }
     default:
-      return `wcag-gray-200 visited:wcag-gray-200 hover:wcag-gray-300 focus-visible:wcag-gray-300 aria-disabled:bg-gray-200/50 aria-disabled:text-black/30`;
+      return `wcag-gray-100 visited:wcag-gray-200 hover:wcag-gray-200 focus-visible:wcag-gray-200 aria-disabled:bg-gray-100 aria-disabled:text-black/30`;
   }
 };
 const createButtonWithTooltip = (props, className, ref) => {

package/dist/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 focus-visible: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 focus-visible: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 focus-visible: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] focus-visible: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 focus-visible: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 focus-visible:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;\n        }\n\n        default:\n            return `wcag-gray-200 visited:wcag-gray-200 hover:wcag-gray-300 focus-visible:wcag-gray-300 aria-disabled:bg-gray-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":["ButtonPrimitive.Button","React"],"mappings":";;;AAKO,MAAM,mBAAmB,MAAM;AAC3B,SAAA;AACX;AAEO,MAAM,uBAAuB,CAAC,OAA+B,OAAO,UAAkB;AACzF,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK,YAAY;AACb,UAAI,MAAM;AACC,eAAA;AAAA,MAAA;AAGJ,aAAA;AAAA,IAAA;AAAA,IAGX,KAAK,eAAe;AACT,aAAA;AAAA,IAAA;AAAA,IAGX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEO,MAAM,0BAA0B,CACnC,OACA,WACA,QACc;AACd,QAAM,EAAE,SAAS,GAAG,YAAA,IAAgB;AAC9B,QAAA,sDAAUA,QAAA,EAAwB,GAAG,aAAa,WAAsB,KAAU;AAExF,MAAI,SAAS;AACT,WAAQC,+BAAA,cAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,MAAO;AAAA,EAAA;AAGrC,SAAA;AACX;AAEa,MAAA,2BAA2B,CAAC,OAAY,eAA4B;AAC7E,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,YAAY;AAClD,MAAI,SAAS;AAET,MAAA,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC5B,OAAO,WAAW,YAAY;AACrC,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC5B,OAAO,SAAS,YAAY;AACnC,aAAS,KAAK,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC1B,OAAO,YAAY,YAAY;AACtC,aAAS,QAAQ,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA;AAGpC,MAAA,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,QAAQ,OAAA,CAAQ;AAAA,EAAA;AAG/B,SAAA;AACX;"}
+{"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 focus-visible: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 focus-visible: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 focus-visible: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-black-subtle focus-visible:bg-black-subtle aria-disabled:text-black/30`;\n            }\n\n            return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible: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 focus-visible:text-black hover:bg-black-subtle aria-disabled:text-black/30 aria-disabled:bg-transparent`;\n        }\n\n        default:\n            return `wcag-gray-100 visited:wcag-gray-200 hover:wcag-gray-200 focus-visible:wcag-gray-200 aria-disabled:bg-gray-100 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":["ButtonPrimitive.Button","React"],"mappings":";;;AAKO,MAAM,mBAAmB,MAAM;AAC3B,SAAA;AACX;AAEO,MAAM,uBAAuB,CAAC,OAA+B,OAAO,UAAkB;AACzF,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK,YAAY;AACb,UAAI,MAAM;AACC,eAAA;AAAA,MAAA;AAGJ,aAAA;AAAA,IAAA;AAAA,IAGX,KAAK,eAAe;AACT,aAAA;AAAA,IAAA;AAAA,IAGX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEO,MAAM,0BAA0B,CACnC,OACA,WACA,QACc;AACd,QAAM,EAAE,SAAS,GAAG,YAAA,IAAgB;AAC9B,QAAA,sDAAUA,QAAA,EAAwB,GAAG,aAAa,WAAsB,KAAU;AAExF,MAAI,SAAS;AACT,WAAQC,+BAAA,cAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,MAAO;AAAA,EAAA;AAGrC,SAAA;AACX;AAEa,MAAA,2BAA2B,CAAC,OAAY,eAA4B;AAC7E,QAAM,EAAE,QAAQ,QAAQ,QAAQ,MAAM,YAAY;AAClD,MAAI,SAAS;AAET,MAAA,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC5B,OAAO,WAAW,YAAY;AACrC,aAAS,OAAO,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC5B,OAAO,SAAS,YAAY;AACnC,aAAS,KAAK,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA,WAC1B,OAAO,YAAY,YAAY;AACtC,aAAS,QAAQ,EAAE,SAAS,OAAA,CAAQ;AAAA,EAAA;AAGpC,MAAA,OAAO,WAAW,YAAY;AAC9B,aAAS,OAAO,EAAE,QAAQ,OAAA,CAAQ;AAAA,EAAA;AAG/B,SAAA;AACX;"}

package/dist/components/Card/Card.cjs

@@ -37,7 +37,7 @@ const Content = React__namespace.forwardRef(function CardContent(externalProps,
 const Card = React__namespace.forwardRef(function Card2(props, ref) {
   const { title, menu, children, className, ...otherProps } = props;
   const localization = Localization.useLocalization();
-  const cardClassName = cn("bg-white flex flex-col rounded-lg pt-4 border border-solid border-gray-300", className);
+  const cardClassName = cn("bg-white flex flex-col rounded-lg pt-4 border border-solid border-gray-200", className);
   const headerContainerAlignment = title ? "justify-between" : "justify-end";
   return /* @__PURE__ */ React__namespace.createElement("div", { ...otherProps, className: cardClassName, "data-taco": "card", ref }, (title || menu) && /* @__PURE__ */ React__namespace.createElement("div", { className: cn("flex px-4 pb-2", headerContainerAlignment) }, title && /* @__PURE__ */ React__namespace.createElement(Truncate.Truncate, { tooltip: title }, /* @__PURE__ */ React__namespace.createElement("h4", { className: "mb-0 flex-grow truncate text-left" }, title)), menu && /* @__PURE__ */ React__namespace.createElement(
     IconButton.IconButton,

package/dist/components/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","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';\nimport { useLocalization } from '../Provider/Localization';\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 = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\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 type CardTexts = {\n    /** Text and aria-label for menu button in Card */\n    menu: string;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const localization = useLocalization();\n    const cardClassName = cn('bg-white flex flex-col rounded-lg pt-4 border border-solid border-gray-300', className);\n    // if title is not passed menu should be shifted to the end of the container\n    const headerContainerAlignment = title ? 'justify-between' : 'justify-end';\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            {(title || menu) && (\n                <div className={cn('flex px-4 pb-2', headerContainerAlignment)}>\n                    {title && (\n                        <Truncate tooltip={title}>\n                            <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                        </Truncate>\n                    )}\n                    {menu && (\n                        <IconButton\n                            aria-label={localization.texts.card.menu}\n                            icon=\"ellipsis-horizontal\"\n                            appearance=\"discrete\"\n                            menu={menu}\n                            className=\"-mt-[4px]\"\n                        />\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["React","Card","useLocalization","Truncate","IconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,UAAUA,iBAAM,WAA6C,SAAS,YAAY,eAAe,KAAK;AACxG,QAAM,EAAE,WAAW,GAAG,MAAA,IAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,aAAa,CAAC;AAAA,IAClB;AAAA,IACA,MAAM;AAAA,EACV;AACA,wDAAQ,OAAK,EAAA,GAAG,OAAO,WAAsB,aAAU,gBAAe,KAAU;AACpF,CAAC;AAcM,MAAM,OAAOA,iBAAM,WAAsC,SAASC,MAAK,OAAO,KAAK;AACtF,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,GAAG,eAAe;AAC5D,QAAM,eAAeC,aAAAA,gBAAgB;AAC/B,QAAA,gBAAgB,GAAG,8EAA8E,SAAS;AAE1G,QAAA,2BAA2B,QAAQ,oBAAoB;AAE7D,SACKF,iCAAA,cAAA,OAAA,EAAK,GAAG,YAAY,WAAW,eAAe,aAAU,QAAO,QAC1D,SAAS,SACPA,iCAAA,cAAC,SAAI,WAAW,GAAG,kBAAkB,wBAAwB,EACxD,GAAA,SACIA,iCAAA,cAAAG,SAAAA,UAAA,EAAS,SAAS,SACdH,iCAAA,cAAA,MAAA,EAAG,WAAU,oCAAA,GAAqC,KAAM,CAC7D,GAEH,QACGA,iCAAA;AAAA,IAACI,WAAA;AAAA,IAAA;AAAA,MACG,cAAY,aAAa,MAAM,KAAK;AAAA,MACpC,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAGtB,CAAA,GAEH,QACL;AAER,CAAC;AAGD,KAAK,UAAU;;"}
+{"version":3,"file":"Card.cjs","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';\nimport { useLocalization } from '../Provider/Localization';\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 = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\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 type CardTexts = {\n    /** Text and aria-label for menu button in Card */\n    menu: string;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const localization = useLocalization();\n    const cardClassName = cn('bg-white flex flex-col rounded-lg pt-4 border border-solid border-gray-200', className);\n    // if title is not passed menu should be shifted to the end of the container\n    const headerContainerAlignment = title ? 'justify-between' : 'justify-end';\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            {(title || menu) && (\n                <div className={cn('flex px-4 pb-2', headerContainerAlignment)}>\n                    {title && (\n                        <Truncate tooltip={title}>\n                            <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                        </Truncate>\n                    )}\n                    {menu && (\n                        <IconButton\n                            aria-label={localization.texts.card.menu}\n                            icon=\"ellipsis-horizontal\"\n                            appearance=\"discrete\"\n                            menu={menu}\n                            className=\"-mt-[4px]\"\n                        />\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["React","Card","useLocalization","Truncate","IconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,UAAUA,iBAAM,WAA6C,SAAS,YAAY,eAAe,KAAK;AACxG,QAAM,EAAE,WAAW,GAAG,MAAA,IAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,aAAa,CAAC;AAAA,IAClB;AAAA,IACA,MAAM;AAAA,EACV;AACA,wDAAQ,OAAK,EAAA,GAAG,OAAO,WAAsB,aAAU,gBAAe,KAAU;AACpF,CAAC;AAcM,MAAM,OAAOA,iBAAM,WAAsC,SAASC,MAAK,OAAO,KAAK;AACtF,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,GAAG,eAAe;AAC5D,QAAM,eAAeC,aAAAA,gBAAgB;AAC/B,QAAA,gBAAgB,GAAG,8EAA8E,SAAS;AAE1G,QAAA,2BAA2B,QAAQ,oBAAoB;AAE7D,SACKF,iCAAA,cAAA,OAAA,EAAK,GAAG,YAAY,WAAW,eAAe,aAAU,QAAO,QAC1D,SAAS,SACPA,iCAAA,cAAC,SAAI,WAAW,GAAG,kBAAkB,wBAAwB,EACxD,GAAA,SACIA,iCAAA,cAAAG,SAAAA,UAAA,EAAS,SAAS,SACdH,iCAAA,cAAA,MAAA,EAAG,WAAU,oCAAA,GAAqC,KAAM,CAC7D,GAEH,QACGA,iCAAA;AAAA,IAACI,WAAA;AAAA,IAAA;AAAA,MACG,cAAY,aAAa,MAAM,KAAK;AAAA,MACpC,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAGtB,CAAA,GAEH,QACL;AAER,CAAC;AAGD,KAAK,UAAU;;"}

package/dist/components/Card/Card.js

@@ -18,7 +18,7 @@ const Content = React.forwardRef(function CardContent(externalProps, ref) {
 const Card = React.forwardRef(function Card2(props, ref) {
   const { title, menu, children, className, ...otherProps } = props;
   const localization = useLocalization();
-  const cardClassName = cn("bg-white flex flex-col rounded-lg pt-4 border border-solid border-gray-300", className);
+  const cardClassName = cn("bg-white flex flex-col rounded-lg pt-4 border border-solid border-gray-200", className);
   const headerContainerAlignment = title ? "justify-between" : "justify-end";
   return /* @__PURE__ */ React.createElement("div", { ...otherProps, className: cardClassName, "data-taco": "card", ref }, (title || menu) && /* @__PURE__ */ React.createElement("div", { className: cn("flex px-4 pb-2", headerContainerAlignment) }, title && /* @__PURE__ */ React.createElement(Truncate, { tooltip: title }, /* @__PURE__ */ React.createElement("h4", { className: "mb-0 flex-grow truncate text-left" }, title)), menu && /* @__PURE__ */ React.createElement(
     IconButton,

package/dist/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';\nimport { useLocalization } from '../Provider/Localization';\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 = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\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 type CardTexts = {\n    /** Text and aria-label for menu button in Card */\n    menu: string;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const localization = useLocalization();\n    const cardClassName = cn('bg-white flex flex-col rounded-lg pt-4 border border-solid border-gray-300', className);\n    // if title is not passed menu should be shifted to the end of the container\n    const headerContainerAlignment = title ? 'justify-between' : 'justify-end';\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            {(title || menu) && (\n                <div className={cn('flex px-4 pb-2', headerContainerAlignment)}>\n                    {title && (\n                        <Truncate tooltip={title}>\n                            <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                        </Truncate>\n                    )}\n                    {menu && (\n                        <IconButton\n                            aria-label={localization.texts.card.menu}\n                            icon=\"ellipsis-horizontal\"\n                            appearance=\"discrete\"\n                            menu={menu}\n                            className=\"-mt-[4px]\"\n                        />\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Card"],"mappings":";;;;;;AAYA,MAAM,UAAU,MAAM,WAA6C,SAAS,YAAY,eAAe,KAAK;AACxG,QAAM,EAAE,WAAW,GAAG,MAAA,IAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,aAAa,CAAC;AAAA,IAClB;AAAA,IACA,MAAM;AAAA,EACV;AACA,6CAAQ,OAAK,EAAA,GAAG,OAAO,WAAsB,aAAU,gBAAe,KAAU;AACpF,CAAC;AAcM,MAAM,OAAO,MAAM,WAAsC,SAASA,MAAK,OAAO,KAAK;AACtF,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,GAAG,eAAe;AAC5D,QAAM,eAAe,gBAAgB;AAC/B,QAAA,gBAAgB,GAAG,8EAA8E,SAAS;AAE1G,QAAA,2BAA2B,QAAQ,oBAAoB;AAE7D,SACK,sBAAA,cAAA,OAAA,EAAK,GAAG,YAAY,WAAW,eAAe,aAAU,QAAO,QAC1D,SAAS,SACP,sBAAA,cAAC,SAAI,WAAW,GAAG,kBAAkB,wBAAwB,EACxD,GAAA,SACI,sBAAA,cAAA,UAAA,EAAS,SAAS,SACd,sBAAA,cAAA,MAAA,EAAG,WAAU,oCAAA,GAAqC,KAAM,CAC7D,GAEH,QACG,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAY,aAAa,MAAM,KAAK;AAAA,MACpC,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAGtB,CAAA,GAEH,QACL;AAER,CAAC;AAGD,KAAK,UAAU;"}
+{"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';\nimport { useLocalization } from '../Provider/Localization';\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 = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\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 type CardTexts = {\n    /** Text and aria-label for menu button in Card */\n    menu: string;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const localization = useLocalization();\n    const cardClassName = cn('bg-white flex flex-col rounded-lg pt-4 border border-solid border-gray-200', className);\n    // if title is not passed menu should be shifted to the end of the container\n    const headerContainerAlignment = title ? 'justify-between' : 'justify-end';\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            {(title || menu) && (\n                <div className={cn('flex px-4 pb-2', headerContainerAlignment)}>\n                    {title && (\n                        <Truncate tooltip={title}>\n                            <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                        </Truncate>\n                    )}\n                    {menu && (\n                        <IconButton\n                            aria-label={localization.texts.card.menu}\n                            icon=\"ellipsis-horizontal\"\n                            appearance=\"discrete\"\n                            menu={menu}\n                            className=\"-mt-[4px]\"\n                        />\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Card"],"mappings":";;;;;;AAYA,MAAM,UAAU,MAAM,WAA6C,SAAS,YAAY,eAAe,KAAK;AACxG,QAAM,EAAE,WAAW,GAAG,MAAA,IAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,aAAa,CAAC;AAAA,IAClB;AAAA,IACA,MAAM;AAAA,EACV;AACA,6CAAQ,OAAK,EAAA,GAAG,OAAO,WAAsB,aAAU,gBAAe,KAAU;AACpF,CAAC;AAcM,MAAM,OAAO,MAAM,WAAsC,SAASA,MAAK,OAAO,KAAK;AACtF,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,GAAG,eAAe;AAC5D,QAAM,eAAe,gBAAgB;AAC/B,QAAA,gBAAgB,GAAG,8EAA8E,SAAS;AAE1G,QAAA,2BAA2B,QAAQ,oBAAoB;AAE7D,SACK,sBAAA,cAAA,OAAA,EAAK,GAAG,YAAY,WAAW,eAAe,aAAU,QAAO,QAC1D,SAAS,SACP,sBAAA,cAAC,SAAI,WAAW,GAAG,kBAAkB,wBAAwB,EACxD,GAAA,SACI,sBAAA,cAAA,UAAA,EAAS,SAAS,SACd,sBAAA,cAAA,MAAA,EAAG,WAAU,oCAAA,GAAqC,KAAM,CAC7D,GAEH,QACG,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAY,aAAa,MAAM,KAAK;AAAA,MACpC,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAGtB,CAAA,GAEH,QACL;AAER,CAAC;AAGD,KAAK,UAAU;"}

package/dist/components/Checkbox/Checkbox.cjs

@@ -32,8 +32,8 @@ const Checkbox = React__namespace.forwardRef(function Checkbox2(props, externalR
       "border-red-500 hover:border-red-700 checked:border-red-500 indeterminate:border-red-500 checked:bg-red-500 indeterminate:bg-red-500 checked:hover:border-red-700 indeterminate:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:bg-red-700": !props.disabled,
       "border-red-500/50 checked:wcag-red-500/50 indeterminate:wcag-red-500/50": props.disabled
     } : {
-      "border-gray-700 hover:border-gray-900 checked:border-blue-500 indeterminate:border-blue-500 checked:bg-blue-500 indeterminate:bg-blue-500 checked:hover:border-blue-700 indeterminate:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:bg-blue-700": !props.disabled,
-      "border-gray-500 checked:bg-blue-500 checked:border-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 opacity-50": props.disabled
+      "border-gray-200 hover:border-gray-300 checked:border-blue-500 indeterminate:border-blue-500 checked:bg-blue-500 indeterminate:bg-blue-500 checked:hover:border-blue-700 indeterminate:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:bg-blue-700": !props.disabled,
+      "border-gray-100 checked:bg-blue-500 checked:border-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 opacity-50": props.disabled
     }
   );
   const handleChange = (event) => {

package/dist/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn, { clsx } from 'clsx';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\ntype CheckboxBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, '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    /* 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, externalRef: React.Ref<HTMLInputElement>) {\n    const { checked, defaultChecked, indeterminate, invalid, label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n    const ref = useMergedRef<HTMLInputElement>(externalRef);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus enabled:cursor-pointer disabled:cursor-not-allowed peer text-white appearance-none',\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 checked:border-red-500 indeterminate:border-red-500 checked:bg-red-500 indeterminate:bg-red-500 checked:hover:border-red-700 indeterminate:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 checked:wcag-red-500/50 indeterminate:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-gray-700 hover:border-gray-900 checked:border-blue-500 indeterminate:border-blue-500 checked:bg-blue-500 indeterminate:bg-blue-500 checked:hover:border-blue-700 indeterminate:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-gray-500 checked:bg-blue-500 checked:border-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 opacity-50':\n                      props.disabled,\n              }\n    );\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event.target.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<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            event.preventDefault();\n            event.currentTarget.click();\n        }\n    };\n\n    React.useEffect(() => {\n        if (ref.current) {\n            (ref.current as HTMLInputElement).indeterminate = Boolean(indeterminate);\n        }\n    }, [ref, indeterminate]);\n\n    const element = (\n        <div\n            className={clsx(\n                'relative inline-flex w-fit',\n                {\n                    'mt-[0.1rem]': !label,\n                    'self-start': !!label,\n                },\n                props.className\n            )}\n            data-taco=\"checkbox-input-wrapper\">\n            <input\n                {...otherProps}\n                {...labelledByProps}\n                aria-invalid={invalid}\n                checked={checked}\n                className={className}\n                data-taco=\"checkbox\"\n                defaultChecked={defaultChecked}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                ref={ref}\n                type=\"checkbox\"\n            />\n            <Icon\n                aria-hidden\n                className=\"pointer-events-none invisible absolute !h-5 !w-5 peer-checked:visible peer-indeterminate:visible\"\n                color=\"white\"\n                data-taco=\"checkbox-icon\"\n                name={indeterminate ? 'line' : 'tick'}\n            />\n        </div>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center gap-2', {\n            'cursor-not-allowed text-gray-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label\n                    className={clsx(props.disabled ? 'cursor-not-allowed text-gray-300' : 'cursor-pointer')}\n                    htmlFor={id}\n                    id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["React","Checkbox","useId","useMergedRef","clsx","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqCO,MAAM,WAAWA,iBAAM,WAAW,SAASC,UAAS,OAAsB,aAA0C;AACjH,QAAA,EAAE,SAAS,gBAAgB,eAAe,SAAS,OAAO,UAAU,GAAG,WAAA,IAAe;AACtF,QAAA,KAAKC,MAAAA,MAAM,MAAM,EAAE;AACnB,QAAA,MAAMC,0BAA+B,WAAW;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,UACM;AAAA,MACI,+PACI,CAAC,MAAM;AAAA,MACX,2EAA2E,MAAM;AAAA,IAAA,IAErF;AAAA,MACI,yQACI,CAAC,MAAM;AAAA,MACX,kIACI,MAAM;AAAA,IAAA;AAAA,EAExB;AAEM,QAAA,eAAe,CAAC,UAA+C;AACtD,yCAAA,MAAM,OAAO;AAAA,EAC5B;AAEA,MAAI,kBAAiD;AAErD,MAAI,OAAO;AACW,sBAAA;AAAA,MACd,mBAAmB,GAAG,EAAE;AAAA,MACxB;AAAA,IACJ;AAAA,EAAA;AAIE,QAAA,gBAAgB,CAAC,UAAiD;AAChE,QAAA,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAe;AACrB,YAAM,cAAc,MAAM;AAAA,IAAA;AAAA,EAElC;AAEAH,mBAAM,UAAU,MAAM;AAClB,QAAI,IAAI,SAAS;AACZ,UAAI,QAA6B,gBAAgB,QAAQ,aAAa;AAAA,IAAA;AAAA,EAC3E,GACD,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,UACFA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWI,GAAA;AAAA,QACP;AAAA,QACA;AAAA,UACI,eAAe,CAAC;AAAA,UAChB,cAAc,CAAC,CAAC;AAAA,QACpB;AAAA,QACA,MAAM;AAAA,MACV;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACVJ,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA,QACA,MAAK;AAAA,MAAA;AAAA,IACT;AAAA,IACAA,iCAAA;AAAA,MAACK,KAAA;AAAA,MAAA;AAAA,QACG,eAAW;AAAA,QACX,WAAU;AAAA,QACV,OAAM;AAAA,QACN,aAAU;AAAA,QACV,MAAM,gBAAgB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAEvC;AAGJ,MAAI,OAAO;AACD,UAAA,0BAA0B,GAAG,2BAA2B;AAAA,MAC1D,oCAAoC,MAAM;AAAA,IAAA,CAC7C;AAED,0DACK,QAAK,EAAA,WAAW,yBAAyB,aAAU,wBAC/C,SACDL,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWI,GAAAA,KAAK,MAAM,WAAW,qCAAqC,gBAAgB;AAAA,QACtF,SAAS;AAAA,QACT,IAAI,GAAG,EAAE;AAAA,MAAA;AAAA,MACR;AAAA,IAAA,CAET;AAAA,EAAA;AAID,SAAA;AACX,CAAC;AACD,SAAS,cAAc;;"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn, { clsx } from 'clsx';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\ntype CheckboxBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, '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    /* 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, externalRef: React.Ref<HTMLInputElement>) {\n    const { checked, defaultChecked, indeterminate, invalid, label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n    const ref = useMergedRef<HTMLInputElement>(externalRef);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus enabled:cursor-pointer disabled:cursor-not-allowed peer text-white appearance-none',\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 checked:border-red-500 indeterminate:border-red-500 checked:bg-red-500 indeterminate:bg-red-500 checked:hover:border-red-700 indeterminate:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 checked:wcag-red-500/50 indeterminate:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-gray-200 hover:border-gray-300 checked:border-blue-500 indeterminate:border-blue-500 checked:bg-blue-500 indeterminate:bg-blue-500 checked:hover:border-blue-700 indeterminate:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-gray-100 checked:bg-blue-500 checked:border-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 opacity-50':\n                      props.disabled,\n              }\n    );\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event.target.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<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            event.preventDefault();\n            event.currentTarget.click();\n        }\n    };\n\n    React.useEffect(() => {\n        if (ref.current) {\n            (ref.current as HTMLInputElement).indeterminate = Boolean(indeterminate);\n        }\n    }, [ref, indeterminate]);\n\n    const element = (\n        <div\n            className={clsx(\n                'relative inline-flex w-fit',\n                {\n                    'mt-[0.1rem]': !label,\n                    'self-start': !!label,\n                },\n                props.className\n            )}\n            data-taco=\"checkbox-input-wrapper\">\n            <input\n                {...otherProps}\n                {...labelledByProps}\n                aria-invalid={invalid}\n                checked={checked}\n                className={className}\n                data-taco=\"checkbox\"\n                defaultChecked={defaultChecked}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                ref={ref}\n                type=\"checkbox\"\n            />\n            <Icon\n                aria-hidden\n                className=\"pointer-events-none invisible absolute !h-5 !w-5 peer-checked:visible peer-indeterminate:visible\"\n                color=\"white\"\n                data-taco=\"checkbox-icon\"\n                name={indeterminate ? 'line' : 'tick'}\n            />\n        </div>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center gap-2', {\n            'cursor-not-allowed text-gray-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label\n                    className={clsx(props.disabled ? 'cursor-not-allowed text-gray-300' : 'cursor-pointer')}\n                    htmlFor={id}\n                    id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["React","Checkbox","useId","useMergedRef","clsx","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqCO,MAAM,WAAWA,iBAAM,WAAW,SAASC,UAAS,OAAsB,aAA0C;AACjH,QAAA,EAAE,SAAS,gBAAgB,eAAe,SAAS,OAAO,UAAU,GAAG,WAAA,IAAe;AACtF,QAAA,KAAKC,MAAAA,MAAM,MAAM,EAAE;AACnB,QAAA,MAAMC,0BAA+B,WAAW;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,UACM;AAAA,MACI,+PACI,CAAC,MAAM;AAAA,MACX,2EAA2E,MAAM;AAAA,IAAA,IAErF;AAAA,MACI,yQACI,CAAC,MAAM;AAAA,MACX,kIACI,MAAM;AAAA,IAAA;AAAA,EAExB;AAEM,QAAA,eAAe,CAAC,UAA+C;AACtD,yCAAA,MAAM,OAAO;AAAA,EAC5B;AAEA,MAAI,kBAAiD;AAErD,MAAI,OAAO;AACW,sBAAA;AAAA,MACd,mBAAmB,GAAG,EAAE;AAAA,MACxB;AAAA,IACJ;AAAA,EAAA;AAIE,QAAA,gBAAgB,CAAC,UAAiD;AAChE,QAAA,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAe;AACrB,YAAM,cAAc,MAAM;AAAA,IAAA;AAAA,EAElC;AAEAH,mBAAM,UAAU,MAAM;AAClB,QAAI,IAAI,SAAS;AACZ,UAAI,QAA6B,gBAAgB,QAAQ,aAAa;AAAA,IAAA;AAAA,EAC3E,GACD,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,UACFA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWI,GAAA;AAAA,QACP;AAAA,QACA;AAAA,UACI,eAAe,CAAC;AAAA,UAChB,cAAc,CAAC,CAAC;AAAA,QACpB;AAAA,QACA,MAAM;AAAA,MACV;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACVJ,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA,QACA,MAAK;AAAA,MAAA;AAAA,IACT;AAAA,IACAA,iCAAA;AAAA,MAACK,KAAA;AAAA,MAAA;AAAA,QACG,eAAW;AAAA,QACX,WAAU;AAAA,QACV,OAAM;AAAA,QACN,aAAU;AAAA,QACV,MAAM,gBAAgB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAEvC;AAGJ,MAAI,OAAO;AACD,UAAA,0BAA0B,GAAG,2BAA2B;AAAA,MAC1D,oCAAoC,MAAM;AAAA,IAAA,CAC7C;AAED,0DACK,QAAK,EAAA,WAAW,yBAAyB,aAAU,wBAC/C,SACDL,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWI,GAAAA,KAAK,MAAM,WAAW,qCAAqC,gBAAgB;AAAA,QACtF,SAAS;AAAA,QACT,IAAI,GAAG,EAAE;AAAA,MAAA;AAAA,MACR;AAAA,IAAA,CAET;AAAA,EAAA;AAID,SAAA;AACX,CAAC;AACD,SAAS,cAAc;;"}

package/dist/components/Checkbox/Checkbox.js

@@ -13,8 +13,8 @@ const Checkbox = React.forwardRef(function Checkbox2(props, externalRef) {
       "border-red-500 hover:border-red-700 checked:border-red-500 indeterminate:border-red-500 checked:bg-red-500 indeterminate:bg-red-500 checked:hover:border-red-700 indeterminate:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:bg-red-700": !props.disabled,
       "border-red-500/50 checked:wcag-red-500/50 indeterminate:wcag-red-500/50": props.disabled
     } : {
-      "border-gray-700 hover:border-gray-900 checked:border-blue-500 indeterminate:border-blue-500 checked:bg-blue-500 indeterminate:bg-blue-500 checked:hover:border-blue-700 indeterminate:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:bg-blue-700": !props.disabled,
-      "border-gray-500 checked:bg-blue-500 checked:border-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 opacity-50": props.disabled
+      "border-gray-200 hover:border-gray-300 checked:border-blue-500 indeterminate:border-blue-500 checked:bg-blue-500 indeterminate:bg-blue-500 checked:hover:border-blue-700 indeterminate:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:bg-blue-700": !props.disabled,
+      "border-gray-100 checked:bg-blue-500 checked:border-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 opacity-50": props.disabled
     }
   );
   const handleChange = (event) => {

package/dist/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, { clsx } from 'clsx';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\ntype CheckboxBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, '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    /* 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, externalRef: React.Ref<HTMLInputElement>) {\n    const { checked, defaultChecked, indeterminate, invalid, label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n    const ref = useMergedRef<HTMLInputElement>(externalRef);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus enabled:cursor-pointer disabled:cursor-not-allowed peer text-white appearance-none',\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 checked:border-red-500 indeterminate:border-red-500 checked:bg-red-500 indeterminate:bg-red-500 checked:hover:border-red-700 indeterminate:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 checked:wcag-red-500/50 indeterminate:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-gray-700 hover:border-gray-900 checked:border-blue-500 indeterminate:border-blue-500 checked:bg-blue-500 indeterminate:bg-blue-500 checked:hover:border-blue-700 indeterminate:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-gray-500 checked:bg-blue-500 checked:border-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 opacity-50':\n                      props.disabled,\n              }\n    );\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event.target.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<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            event.preventDefault();\n            event.currentTarget.click();\n        }\n    };\n\n    React.useEffect(() => {\n        if (ref.current) {\n            (ref.current as HTMLInputElement).indeterminate = Boolean(indeterminate);\n        }\n    }, [ref, indeterminate]);\n\n    const element = (\n        <div\n            className={clsx(\n                'relative inline-flex w-fit',\n                {\n                    'mt-[0.1rem]': !label,\n                    'self-start': !!label,\n                },\n                props.className\n            )}\n            data-taco=\"checkbox-input-wrapper\">\n            <input\n                {...otherProps}\n                {...labelledByProps}\n                aria-invalid={invalid}\n                checked={checked}\n                className={className}\n                data-taco=\"checkbox\"\n                defaultChecked={defaultChecked}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                ref={ref}\n                type=\"checkbox\"\n            />\n            <Icon\n                aria-hidden\n                className=\"pointer-events-none invisible absolute !h-5 !w-5 peer-checked:visible peer-indeterminate:visible\"\n                color=\"white\"\n                data-taco=\"checkbox-icon\"\n                name={indeterminate ? 'line' : 'tick'}\n            />\n        </div>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center gap-2', {\n            'cursor-not-allowed text-gray-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label\n                    className={clsx(props.disabled ? 'cursor-not-allowed text-gray-300' : 'cursor-pointer')}\n                    htmlFor={id}\n                    id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox"],"mappings":";;;;;AAqCO,MAAM,WAAW,MAAM,WAAW,SAASA,UAAS,OAAsB,aAA0C;AACjH,QAAA,EAAE,SAAS,gBAAgB,eAAe,SAAS,OAAO,UAAU,GAAG,WAAA,IAAe;AACtF,QAAA,KAAK,MAAM,MAAM,EAAE;AACnB,QAAA,MAAM,aAA+B,WAAW;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,UACM;AAAA,MACI,+PACI,CAAC,MAAM;AAAA,MACX,2EAA2E,MAAM;AAAA,IAAA,IAErF;AAAA,MACI,yQACI,CAAC,MAAM;AAAA,MACX,kIACI,MAAM;AAAA,IAAA;AAAA,EAExB;AAEM,QAAA,eAAe,CAAC,UAA+C;AACtD,yCAAA,MAAM,OAAO;AAAA,EAC5B;AAEA,MAAI,kBAAiD;AAErD,MAAI,OAAO;AACW,sBAAA;AAAA,MACd,mBAAmB,GAAG,EAAE;AAAA,MACxB;AAAA,IACJ;AAAA,EAAA;AAIE,QAAA,gBAAgB,CAAC,UAAiD;AAChE,QAAA,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAe;AACrB,YAAM,cAAc,MAAM;AAAA,IAAA;AAAA,EAElC;AAEA,QAAM,UAAU,MAAM;AAClB,QAAI,IAAI,SAAS;AACZ,UAAI,QAA6B,gBAAgB,QAAQ,aAAa;AAAA,IAAA;AAAA,EAC3E,GACD,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,UACF,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA;AAAA,UACI,eAAe,CAAC;AAAA,UAChB,cAAc,CAAC,CAAC;AAAA,QACpB;AAAA,QACA,MAAM;AAAA,MACV;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACV,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA,QACA,MAAK;AAAA,MAAA;AAAA,IACT;AAAA,IACA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,eAAW;AAAA,QACX,WAAU;AAAA,QACV,OAAM;AAAA,QACN,aAAU;AAAA,QACV,MAAM,gBAAgB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAEvC;AAGJ,MAAI,OAAO;AACD,UAAA,0BAA0B,GAAG,2BAA2B;AAAA,MAC1D,oCAAoC,MAAM;AAAA,IAAA,CAC7C;AAED,+CACK,QAAK,EAAA,WAAW,yBAAyB,aAAU,wBAC/C,SACD,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,MAAM,WAAW,qCAAqC,gBAAgB;AAAA,QACtF,SAAS;AAAA,QACT,IAAI,GAAG,EAAE;AAAA,MAAA;AAAA,MACR;AAAA,IAAA,CAET;AAAA,EAAA;AAID,SAAA;AACX,CAAC;AACD,SAAS,cAAc;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn, { clsx } from 'clsx';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\ntype CheckboxBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, '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    /* 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, externalRef: React.Ref<HTMLInputElement>) {\n    const { checked, defaultChecked, indeterminate, invalid, label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n    const ref = useMergedRef<HTMLInputElement>(externalRef);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus enabled:cursor-pointer disabled:cursor-not-allowed peer text-white appearance-none',\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 checked:border-red-500 indeterminate:border-red-500 checked:bg-red-500 indeterminate:bg-red-500 checked:hover:border-red-700 indeterminate:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 checked:wcag-red-500/50 indeterminate:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-gray-200 hover:border-gray-300 checked:border-blue-500 indeterminate:border-blue-500 checked:bg-blue-500 indeterminate:bg-blue-500 checked:hover:border-blue-700 indeterminate:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-gray-100 checked:bg-blue-500 checked:border-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 opacity-50':\n                      props.disabled,\n              }\n    );\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event.target.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<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            event.preventDefault();\n            event.currentTarget.click();\n        }\n    };\n\n    React.useEffect(() => {\n        if (ref.current) {\n            (ref.current as HTMLInputElement).indeterminate = Boolean(indeterminate);\n        }\n    }, [ref, indeterminate]);\n\n    const element = (\n        <div\n            className={clsx(\n                'relative inline-flex w-fit',\n                {\n                    'mt-[0.1rem]': !label,\n                    'self-start': !!label,\n                },\n                props.className\n            )}\n            data-taco=\"checkbox-input-wrapper\">\n            <input\n                {...otherProps}\n                {...labelledByProps}\n                aria-invalid={invalid}\n                checked={checked}\n                className={className}\n                data-taco=\"checkbox\"\n                defaultChecked={defaultChecked}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                ref={ref}\n                type=\"checkbox\"\n            />\n            <Icon\n                aria-hidden\n                className=\"pointer-events-none invisible absolute !h-5 !w-5 peer-checked:visible peer-indeterminate:visible\"\n                color=\"white\"\n                data-taco=\"checkbox-icon\"\n                name={indeterminate ? 'line' : 'tick'}\n            />\n        </div>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center gap-2', {\n            'cursor-not-allowed text-gray-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label\n                    className={clsx(props.disabled ? 'cursor-not-allowed text-gray-300' : 'cursor-pointer')}\n                    htmlFor={id}\n                    id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox"],"mappings":";;;;;AAqCO,MAAM,WAAW,MAAM,WAAW,SAASA,UAAS,OAAsB,aAA0C;AACjH,QAAA,EAAE,SAAS,gBAAgB,eAAe,SAAS,OAAO,UAAU,GAAG,WAAA,IAAe;AACtF,QAAA,KAAK,MAAM,MAAM,EAAE;AACnB,QAAA,MAAM,aAA+B,WAAW;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,UACM;AAAA,MACI,+PACI,CAAC,MAAM;AAAA,MACX,2EAA2E,MAAM;AAAA,IAAA,IAErF;AAAA,MACI,yQACI,CAAC,MAAM;AAAA,MACX,kIACI,MAAM;AAAA,IAAA;AAAA,EAExB;AAEM,QAAA,eAAe,CAAC,UAA+C;AACtD,yCAAA,MAAM,OAAO;AAAA,EAC5B;AAEA,MAAI,kBAAiD;AAErD,MAAI,OAAO;AACW,sBAAA;AAAA,MACd,mBAAmB,GAAG,EAAE;AAAA,MACxB;AAAA,IACJ;AAAA,EAAA;AAIE,QAAA,gBAAgB,CAAC,UAAiD;AAChE,QAAA,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAe;AACrB,YAAM,cAAc,MAAM;AAAA,IAAA;AAAA,EAElC;AAEA,QAAM,UAAU,MAAM;AAClB,QAAI,IAAI,SAAS;AACZ,UAAI,QAA6B,gBAAgB,QAAQ,aAAa;AAAA,IAAA;AAAA,EAC3E,GACD,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,UACF,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA;AAAA,UACI,eAAe,CAAC;AAAA,UAChB,cAAc,CAAC,CAAC;AAAA,QACpB;AAAA,QACA,MAAM;AAAA,MACV;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACV,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA,QACA,MAAK;AAAA,MAAA;AAAA,IACT;AAAA,IACA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,eAAW;AAAA,QACX,WAAU;AAAA,QACV,OAAM;AAAA,QACN,aAAU;AAAA,QACV,MAAM,gBAAgB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAEvC;AAGJ,MAAI,OAAO;AACD,UAAA,0BAA0B,GAAG,2BAA2B;AAAA,MAC1D,oCAAoC,MAAM;AAAA,IAAA,CAC7C;AAED,+CACK,QAAK,EAAA,WAAW,yBAAyB,aAAU,wBAC/C,SACD,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,MAAM,WAAW,qCAAqC,gBAAgB;AAAA,QACtF,SAAS;AAAA,QACT,IAAI,GAAG,EAAE;AAAA,MAAA;AAAA,MACR;AAAA,IAAA,CAET;AAAA,EAAA;AAID,SAAA;AACX,CAAC;AACD,SAAS,cAAc;"}

package/dist/components/Datepicker/Datepicker.cjs

@@ -100,11 +100,11 @@ const Datepicker = React__namespace.forwardRef(function Datepicker2(props, ref)
           setOpen(false);
         }
       }
-    ), shortcuts && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col border-l border-gray-300" }, /* @__PURE__ */ React__namespace.createElement("span", { className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold" }, shortcutsText ?? texts.datepicker.shortcuts), /* @__PURE__ */ React__namespace.createElement("ul", null, shortcuts.map((shortcut) => /* @__PURE__ */ React__namespace.createElement("li", { key: shortcut.text }, /* @__PURE__ */ React__namespace.createElement(
+    ), shortcuts && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col border-l border-gray-100" }, /* @__PURE__ */ React__namespace.createElement("span", { className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold" }, shortcutsText ?? texts.datepicker.shortcuts), /* @__PURE__ */ React__namespace.createElement("ul", null, shortcuts.map((shortcut) => /* @__PURE__ */ React__namespace.createElement("li", { key: shortcut.text }, /* @__PURE__ */ React__namespace.createElement(
       "button",
       {
         type: "button",
-        className: "hover:wcag-gray-200 flex w-full items-start px-4 py-1 text-xs",
+        className: "hover:wcag-gray-100 flex w-full items-start px-4 py-1 text-xs",
         "data-taco": "datepicker-shortcut",
         onClick: (event) => {
           shortcut.onClick(event);

package/dist/components/Datepicker/Datepicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.cjs","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\n\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date | string;\n};\n\nconst PopoverArrow = () => (\n    <PopoverPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas] \"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-200\"\n            />\n            <path d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\" />\n        </svg>\n    </PopoverPrimitive.Arrow>\n);\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const [open, setOpen] = React.useState(false);\n\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n    const popoverContentRef = React.useRef<HTMLDivElement>(null);\n\n    const handlePopoverClick = React.useCallback((event: React.MouseEvent) => {\n        // Prevent the mouse click event from bubbling up to the parent element\n        event.stopPropagation();\n    }, []);\n\n    const handleCloseAutoFocus = () => input.ref.current;\n\n    const handleOpenAutoFocus = () => {\n        const currentDay: HTMLButtonElement | null = popoverContentRef?.current?.querySelector('td.rdp-selected button') ?? null;\n\n        return currentDay;\n    };\n\n    // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.\n    // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,\n    // without it, datepicker cannot be set into detailed editing mode by pressing \"Enter\",\n    // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (!event.defaultPrevented) {\n            input.onKeyDown?.(event);\n        }\n    };\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <PopoverPrimitive.Root modal=\"trap-focus\" open={open} onOpenChange={setOpen}>\n                <Input\n                    {...input}\n                    onKeyDown={handleInputKeyDown}\n                    button={\n                        input.readOnly ? undefined : (\n                            <PopoverPrimitive.Trigger\n                                render={\n                                    <IconButton\n                                        aria-label={texts.datepicker.expand}\n                                        data-taco=\"toggle-calendar-button\"\n                                        disabled={input.disabled || input.readOnly}\n                                        icon=\"calendar\"\n                                        tabIndex={-1}\n                                        tooltip={texts.datepicker.calendar}\n                                    />\n                                }\n                            />\n                        )\n                    }\n                />\n\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner sideOffset={8}>\n                        <PopoverPrimitive.Popup\n                            initialFocus={handleOpenAutoFocus}\n                            finalFocus={handleCloseAutoFocus}\n                            className=\"yt-shadow group rounded border border-transparent bg-white p-3 outline-none\">\n                            <PopoverArrow />\n                            <div ref={popoverContentRef} className=\"-m-3 flex\" onClick={handlePopoverClick}>\n                                <Calendar\n                                    {...calendar}\n                                    onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                        calendar.onChange(date, event);\n                                        setOpen(false);\n                                    }}\n                                />\n                                {shortcuts && (\n                                    <div className=\"flex flex-col border-l border-gray-300\">\n                                        <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                            {shortcutsText ?? texts.datepicker.shortcuts}\n                                        </span>\n                                        <ul>\n                                            {shortcuts.map(shortcut => (\n                                                <li key={shortcut.text}>\n                                                    <button\n                                                        type=\"button\"\n                                                        className=\"hover:wcag-gray-200 flex w-full items-start px-4 py-1 text-xs\"\n                                                        data-taco=\"datepicker-shortcut\"\n                                                        onClick={event => {\n                                                            shortcut.onClick(event);\n                                                            setOpen(false);\n                                                        }}>\n                                                        {shortcut.text}\n                                                    </button>\n                                                </li>\n                                            ))}\n                                        </ul>\n                                        {handleReset && (\n                                            <button\n                                                type=\"button\"\n                                                className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                data-taco=\"datepicker-clear-button\"\n                                                onClick={event => {\n                                                    handleReset(event);\n                                                    setOpen(false);\n                                                }}>\n                                                {texts.datepicker.clear}\n                                            </button>\n                                        )}\n                                    </div>\n                                )}\n                            </div>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["React","PopoverPrimitive","Datepicker","useDatepicker","useLocalization","Input","IconButton","Calendar"],"mappings":"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"}
+{"version":3,"file":"Datepicker.cjs","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\n\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date | string;\n};\n\nconst PopoverArrow = () => (\n    <PopoverPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas] \"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-200\"\n            />\n            <path d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\" />\n        </svg>\n    </PopoverPrimitive.Arrow>\n);\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const [open, setOpen] = React.useState(false);\n\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n    const popoverContentRef = React.useRef<HTMLDivElement>(null);\n\n    const handlePopoverClick = React.useCallback((event: React.MouseEvent) => {\n        // Prevent the mouse click event from bubbling up to the parent element\n        event.stopPropagation();\n    }, []);\n\n    const handleCloseAutoFocus = () => input.ref.current;\n\n    const handleOpenAutoFocus = () => {\n        const currentDay: HTMLButtonElement | null = popoverContentRef?.current?.querySelector('td.rdp-selected button') ?? null;\n\n        return currentDay;\n    };\n\n    // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.\n    // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,\n    // without it, datepicker cannot be set into detailed editing mode by pressing \"Enter\",\n    // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (!event.defaultPrevented) {\n            input.onKeyDown?.(event);\n        }\n    };\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <PopoverPrimitive.Root modal=\"trap-focus\" open={open} onOpenChange={setOpen}>\n                <Input\n                    {...input}\n                    onKeyDown={handleInputKeyDown}\n                    button={\n                        input.readOnly ? undefined : (\n                            <PopoverPrimitive.Trigger\n                                render={\n                                    <IconButton\n                                        aria-label={texts.datepicker.expand}\n                                        data-taco=\"toggle-calendar-button\"\n                                        disabled={input.disabled || input.readOnly}\n                                        icon=\"calendar\"\n                                        tabIndex={-1}\n                                        tooltip={texts.datepicker.calendar}\n                                    />\n                                }\n                            />\n                        )\n                    }\n                />\n\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner sideOffset={8}>\n                        <PopoverPrimitive.Popup\n                            initialFocus={handleOpenAutoFocus}\n                            finalFocus={handleCloseAutoFocus}\n                            className=\"yt-shadow group rounded border border-transparent bg-white p-3 outline-none\">\n                            <PopoverArrow />\n                            <div ref={popoverContentRef} className=\"-m-3 flex\" onClick={handlePopoverClick}>\n                                <Calendar\n                                    {...calendar}\n                                    onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                        calendar.onChange(date, event);\n                                        setOpen(false);\n                                    }}\n                                />\n                                {shortcuts && (\n                                    <div className=\"flex flex-col border-l border-gray-100\">\n                                        <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                            {shortcutsText ?? texts.datepicker.shortcuts}\n                                        </span>\n                                        <ul>\n                                            {shortcuts.map(shortcut => (\n                                                <li key={shortcut.text}>\n                                                    <button\n                                                        type=\"button\"\n                                                        className=\"hover:wcag-gray-100 flex w-full items-start px-4 py-1 text-xs\"\n                                                        data-taco=\"datepicker-shortcut\"\n                                                        onClick={event => {\n                                                            shortcut.onClick(event);\n                                                            setOpen(false);\n                                                        }}>\n                                                        {shortcut.text}\n                                                    </button>\n                                                </li>\n                                            ))}\n                                        </ul>\n                                        {handleReset && (\n                                            <button\n                                                type=\"button\"\n                                                className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                data-taco=\"datepicker-clear-button\"\n                                                onClick={event => {\n                                                    handleReset(event);\n                                                    setOpen(false);\n                                                }}>\n                                                {texts.datepicker.clear}\n                                            </button>\n                                        )}\n                                    </div>\n                                )}\n                            </div>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["React","PopoverPrimitive","Datepicker","useDatepicker","useLocalization","Input","IconButton","Calendar"],"mappings":"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"}

package/dist/components/Datepicker/Datepicker.js

@@ -81,11 +81,11 @@ const Datepicker = React.forwardRef(function Datepicker2(props, ref) {
           setOpen(false);
         }
       }
-    ), shortcuts && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col border-l border-gray-300" }, /* @__PURE__ */ React.createElement("span", { className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold" }, shortcutsText ?? texts.datepicker.shortcuts), /* @__PURE__ */ React.createElement("ul", null, shortcuts.map((shortcut) => /* @__PURE__ */ React.createElement("li", { key: shortcut.text }, /* @__PURE__ */ React.createElement(
+    ), shortcuts && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col border-l border-gray-100" }, /* @__PURE__ */ React.createElement("span", { className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold" }, shortcutsText ?? texts.datepicker.shortcuts), /* @__PURE__ */ React.createElement("ul", null, shortcuts.map((shortcut) => /* @__PURE__ */ React.createElement("li", { key: shortcut.text }, /* @__PURE__ */ React.createElement(
       "button",
       {
         type: "button",
-        className: "hover:wcag-gray-200 flex w-full items-start px-4 py-1 text-xs",
+        className: "hover:wcag-gray-100 flex w-full items-start px-4 py-1 text-xs",
         "data-taco": "datepicker-shortcut",
         onClick: (event) => {
           shortcut.onClick(event);

package/dist/components/Datepicker/Datepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.js","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\n\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date | string;\n};\n\nconst PopoverArrow = () => (\n    <PopoverPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas] \"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-200\"\n            />\n            <path d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\" />\n        </svg>\n    </PopoverPrimitive.Arrow>\n);\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const [open, setOpen] = React.useState(false);\n\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n    const popoverContentRef = React.useRef<HTMLDivElement>(null);\n\n    const handlePopoverClick = React.useCallback((event: React.MouseEvent) => {\n        // Prevent the mouse click event from bubbling up to the parent element\n        event.stopPropagation();\n    }, []);\n\n    const handleCloseAutoFocus = () => input.ref.current;\n\n    const handleOpenAutoFocus = () => {\n        const currentDay: HTMLButtonElement | null = popoverContentRef?.current?.querySelector('td.rdp-selected button') ?? null;\n\n        return currentDay;\n    };\n\n    // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.\n    // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,\n    // without it, datepicker cannot be set into detailed editing mode by pressing \"Enter\",\n    // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (!event.defaultPrevented) {\n            input.onKeyDown?.(event);\n        }\n    };\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <PopoverPrimitive.Root modal=\"trap-focus\" open={open} onOpenChange={setOpen}>\n                <Input\n                    {...input}\n                    onKeyDown={handleInputKeyDown}\n                    button={\n                        input.readOnly ? undefined : (\n                            <PopoverPrimitive.Trigger\n                                render={\n                                    <IconButton\n                                        aria-label={texts.datepicker.expand}\n                                        data-taco=\"toggle-calendar-button\"\n                                        disabled={input.disabled || input.readOnly}\n                                        icon=\"calendar\"\n                                        tabIndex={-1}\n                                        tooltip={texts.datepicker.calendar}\n                                    />\n                                }\n                            />\n                        )\n                    }\n                />\n\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner sideOffset={8}>\n                        <PopoverPrimitive.Popup\n                            initialFocus={handleOpenAutoFocus}\n                            finalFocus={handleCloseAutoFocus}\n                            className=\"yt-shadow group rounded border border-transparent bg-white p-3 outline-none\">\n                            <PopoverArrow />\n                            <div ref={popoverContentRef} className=\"-m-3 flex\" onClick={handlePopoverClick}>\n                                <Calendar\n                                    {...calendar}\n                                    onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                        calendar.onChange(date, event);\n                                        setOpen(false);\n                                    }}\n                                />\n                                {shortcuts && (\n                                    <div className=\"flex flex-col border-l border-gray-300\">\n                                        <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                            {shortcutsText ?? texts.datepicker.shortcuts}\n                                        </span>\n                                        <ul>\n                                            {shortcuts.map(shortcut => (\n                                                <li key={shortcut.text}>\n                                                    <button\n                                                        type=\"button\"\n                                                        className=\"hover:wcag-gray-200 flex w-full items-start px-4 py-1 text-xs\"\n                                                        data-taco=\"datepicker-shortcut\"\n                                                        onClick={event => {\n                                                            shortcut.onClick(event);\n                                                            setOpen(false);\n                                                        }}>\n                                                        {shortcut.text}\n                                                    </button>\n                                                </li>\n                                            ))}\n                                        </ul>\n                                        {handleReset && (\n                                            <button\n                                                type=\"button\"\n                                                className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                data-taco=\"datepicker-clear-button\"\n                                                onClick={event => {\n                                                    handleReset(event);\n                                                    setOpen(false);\n                                                }}>\n                                                {texts.datepicker.clear}\n                                            </button>\n                                        )}\n                                    </div>\n                                )}\n                            </div>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["PopoverPrimitive","Datepicker"],"mappings":"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"}
+{"version":3,"file":"Datepicker.js","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\n\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date | string;\n};\n\nconst PopoverArrow = () => (\n    <PopoverPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas] \"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-200\"\n            />\n            <path d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\" />\n        </svg>\n    </PopoverPrimitive.Arrow>\n);\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const [open, setOpen] = React.useState(false);\n\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n    const popoverContentRef = React.useRef<HTMLDivElement>(null);\n\n    const handlePopoverClick = React.useCallback((event: React.MouseEvent) => {\n        // Prevent the mouse click event from bubbling up to the parent element\n        event.stopPropagation();\n    }, []);\n\n    const handleCloseAutoFocus = () => input.ref.current;\n\n    const handleOpenAutoFocus = () => {\n        const currentDay: HTMLButtonElement | null = popoverContentRef?.current?.querySelector('td.rdp-selected button') ?? null;\n\n        return currentDay;\n    };\n\n    // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.\n    // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,\n    // without it, datepicker cannot be set into detailed editing mode by pressing \"Enter\",\n    // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (!event.defaultPrevented) {\n            input.onKeyDown?.(event);\n        }\n    };\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <PopoverPrimitive.Root modal=\"trap-focus\" open={open} onOpenChange={setOpen}>\n                <Input\n                    {...input}\n                    onKeyDown={handleInputKeyDown}\n                    button={\n                        input.readOnly ? undefined : (\n                            <PopoverPrimitive.Trigger\n                                render={\n                                    <IconButton\n                                        aria-label={texts.datepicker.expand}\n                                        data-taco=\"toggle-calendar-button\"\n                                        disabled={input.disabled || input.readOnly}\n                                        icon=\"calendar\"\n                                        tabIndex={-1}\n                                        tooltip={texts.datepicker.calendar}\n                                    />\n                                }\n                            />\n                        )\n                    }\n                />\n\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner sideOffset={8}>\n                        <PopoverPrimitive.Popup\n                            initialFocus={handleOpenAutoFocus}\n                            finalFocus={handleCloseAutoFocus}\n                            className=\"yt-shadow group rounded border border-transparent bg-white p-3 outline-none\">\n                            <PopoverArrow />\n                            <div ref={popoverContentRef} className=\"-m-3 flex\" onClick={handlePopoverClick}>\n                                <Calendar\n                                    {...calendar}\n                                    onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                        calendar.onChange(date, event);\n                                        setOpen(false);\n                                    }}\n                                />\n                                {shortcuts && (\n                                    <div className=\"flex flex-col border-l border-gray-100\">\n                                        <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                            {shortcutsText ?? texts.datepicker.shortcuts}\n                                        </span>\n                                        <ul>\n                                            {shortcuts.map(shortcut => (\n                                                <li key={shortcut.text}>\n                                                    <button\n                                                        type=\"button\"\n                                                        className=\"hover:wcag-gray-100 flex w-full items-start px-4 py-1 text-xs\"\n                                                        data-taco=\"datepicker-shortcut\"\n                                                        onClick={event => {\n                                                            shortcut.onClick(event);\n                                                            setOpen(false);\n                                                        }}>\n                                                        {shortcut.text}\n                                                    </button>\n                                                </li>\n                                            ))}\n                                        </ul>\n                                        {handleReset && (\n                                            <button\n                                                type=\"button\"\n                                                className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                data-taco=\"datepicker-clear-button\"\n                                                onClick={event => {\n                                                    handleReset(event);\n                                                    setOpen(false);\n                                                }}>\n                                                {texts.datepicker.clear}\n                                            </button>\n                                        )}\n                                    </div>\n                                )}\n                            </div>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["PopoverPrimitive","Datepicker"],"mappings":"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"}