@economic/taco 10.0.1-improve-publish-scripts.0 → 10.0.1-react-19.0

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: 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;"}
+{"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":";;;AA6BO,SAAS,SAA+B,UAA2B,SAA2B;AACjG,QAAM,CAAC,aAAa,cAAc,IAAIA,eAAM,SAAA;AAC5C,QAAM,CAAC,aAAa,UAAU,IAAI,wBAAA;AAClC,QAAM,eAAe,gBAAA;AAErB,QAAM,mBAAmB,CAAC,UACtB,IAAI,KAAK,aAAa,aAAa,QAAQ,EAAE,uBAAuB,EAAA,CAAG,EAAE,OAAO,KAAK;AAEzF,QAAM,kBAAkB,SAAS,aAAa;AAE9C,QAAM,EAAE,OAAO,OAAA,IAAWA,eAAM,QAAQ,MAAM;AAC1C,UAAMC,SAAQD,eAAM,SAAS,QAAQ,QAAQ,EACxC,OAAO,CAAA,UAASA,eAAM,eAAuC,KAAK,CAAC,EACnE,IAAI,CAAA,UAAS;AACV,YAAM,UAAU,MAAM,MAAM,WAAW,MAAM,MAAM;AACnD,aAAO;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,QAAQ,SAAS;AAAA,MAAA;AAAA,IAE3C,CAAC;AAEL,UAAME,UAAuBD,OACxB,OAAO,CAAA,SAAQ,CAAC,YAAY,KAAK,OAAO,CAAC,EACzC,IAAI,CAAC,SAAiC;AACnC,aAAO;AAAA,QACH,WAAW;AAAA,UACP,aAAa;AAAA,QAAA;AAAA,QAEjB,OAAO,KAAK;AAAA,QACZ,SAAS,KAAK;AAAA,QACd,KAAK;AAAA,UACD,aAAa;AAAA,QAAA;AAAA,QAEjB,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,MAAA;AAAA,IAEnB,CAAC;AAEL,WAAO,EAAE,OAAAA,QAAO,QAAAC,QAAAA;AAAAA,EACpB,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,SAAO,EAAE,OAAO,QAAQ,aAAa,gBAAgB,iBAAiB,WAAA;AAC1E;AAEO,SAAS,0BAA6G;AACzH,QAAM,CAAC,OAAO,QAAQ,IAAIF,eAAM,SAAuC,CAAA,CAAkC;AAEzG,WAAS,OAAO,MAAmB;AAC/B,aAAS,CAAA,iBAAgB;AACrB,YAAM,YAAY,EAAE,GAAG,aAAA;AAEvB,UAAI,aAAa,IAAI,GAAG;AACpB,eAAO,UAAU,IAAI;AAAA,MACzB,OAAO;AACH,kBAAU,IAAI,IAAI;AAAA,MACtB;AAEA,aAAO;AAAA,IACX,CAAC;AAAA,EACL;AAEA,SAAO,CAAC,OAAO,MAAM;AACzB;"}

package/dist/charts/utils/color.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"color.cjs","sources":["../../../src/charts/utils/color.ts"],"sourcesContent":["import themeColors from '../../../tailwind.colors.js';\n\nconst mapColor = (palette: any, prefix = ''): any => {\n    return Object.keys(palette).reduce((accum, color) => {\n        if (color === 'current') {\n            return accum;\n        }\n\n        if (typeof palette[color] === 'string') {\n            return {\n                ...accum,\n                [prefix ? (color === 'DEFAULT' ? prefix : `${prefix}-${color}`) : color]: palette[color],\n            };\n        }\n\n        return {\n            ...accum,\n            ...mapColor(palette[color], color),\n        };\n    }, {});\n};\n\nexport const colors: Record<string, string> = mapColor(themeColors);\n\nexport type Color = keyof typeof colors;\n\nexport const getThemeColor = (color: string | Color | undefined, def = '') => colors[color ?? def];\n\nexport const getInverseThemeColor = (hexCode: string) => {\n    const themeColor: Color | undefined = Object.keys(colors)[Object.values(colors).indexOf(hexCode)];\n\n    const [color, number] = String(themeColor).split('-');\n    const shade = Number(number);\n\n    if (shade) {\n        if (shade > 500) {\n            return getThemeColor(`${color}-100`);\n        }\n        if (\n            shade === 500 &&\n            (color === 'red' || color === 'blue' || color === 'brown' || color === 'purple' || color === 'green')\n        ) {\n            return 'white';\n        }\n\n        return getThemeColor(`${color}-900`);\n    }\n\n    return color === 'black' ? 'white' : 'black';\n};\n"],"names":["themeColors"],"mappings":";;;AAEA,MAAM,WAAW,CAAC,SAAc,SAAS,OAAY;AACjD,SAAO,OAAO,KAAK,OAAO,EAAE,OAAO,CAAC,OAAO,UAAU;AACjD,QAAI,UAAU,WAAW;AACd,aAAA;AAAA,IAAA;AAGX,QAAI,OAAO,QAAQ,KAAK,MAAM,UAAU;AAC7B,aAAA;AAAA,QACH,GAAG;AAAA,QACH,CAAC,SAAU,UAAU,YAAY,SAAS,GAAG,MAAM,IAAI,KAAK,KAAM,KAAK,GAAG,QAAQ,KAAK;AAAA,MAC3F;AAAA,IAAA;AAGG,WAAA;AAAA,MACH,GAAG;AAAA,MACH,GAAG,SAAS,QAAQ,KAAK,GAAG,KAAK;AAAA,IACrC;AAAA,EACJ,GAAG,EAAE;AACT;AAEa,MAAA,SAAiC,SAASA,eAAW;AAI3D,MAAM,gBAAgB,CAAC,OAAmC,MAAM,OAAO,OAAO,SAAS,GAAG;AAEpF,MAAA,uBAAuB,CAAC,YAAoB;AAC/C,QAAA,aAAgC,OAAO,KAAK,MAAM,EAAE,OAAO,OAAO,MAAM,EAAE,QAAQ,OAAO,CAAC;AAE1F,QAAA,CAAC,OAAO,MAAM,IAAI,OAAO,UAAU,EAAE,MAAM,GAAG;AAC9C,QAAA,QAAQ,OAAO,MAAM;AAE3B,MAAI,OAAO;AACP,QAAI,QAAQ,KAAK;AACN,aAAA,cAAc,GAAG,KAAK,MAAM;AAAA,IAAA;AAGnC,QAAA,UAAU,QACT,UAAU,SAAS,UAAU,UAAU,UAAU,WAAW,UAAU,YAAY,UAAU,UAC/F;AACS,aAAA;AAAA,IAAA;AAGJ,WAAA,cAAc,GAAG,KAAK,MAAM;AAAA,EAAA;AAGhC,SAAA,UAAU,UAAU,UAAU;AACzC;;;;"}
+{"version":3,"file":"color.cjs","sources":["../../../src/charts/utils/color.ts"],"sourcesContent":["import themeColors from '../../../tailwind.colors.js';\n\nconst mapColor = (palette: any, prefix = ''): any => {\n    return Object.keys(palette).reduce((accum, color) => {\n        if (color === 'current') {\n            return accum;\n        }\n\n        if (typeof palette[color] === 'string') {\n            return {\n                ...accum,\n                [prefix ? (color === 'DEFAULT' ? prefix : `${prefix}-${color}`) : color]: palette[color],\n            };\n        }\n\n        return {\n            ...accum,\n            ...mapColor(palette[color], color),\n        };\n    }, {});\n};\n\nexport const colors: Record<string, string> = mapColor(themeColors);\n\nexport type Color = keyof typeof colors;\n\nexport const getThemeColor = (color: string | Color | undefined, def = '') => colors[color ?? def];\n\nexport const getInverseThemeColor = (hexCode: string) => {\n    const themeColor: Color | undefined = Object.keys(colors)[Object.values(colors).indexOf(hexCode)];\n\n    const [color, number] = String(themeColor).split('-');\n    const shade = Number(number);\n\n    if (shade) {\n        if (shade > 500) {\n            return getThemeColor(`${color}-100`);\n        }\n        if (\n            shade === 500 &&\n            (color === 'red' || color === 'blue' || color === 'brown' || color === 'purple' || color === 'green')\n        ) {\n            return 'white';\n        }\n\n        return getThemeColor(`${color}-900`);\n    }\n\n    return color === 'black' ? 'white' : 'black';\n};\n"],"names":["themeColors"],"mappings":";;;AAEA,MAAM,WAAW,CAAC,SAAc,SAAS,OAAY;AACjD,SAAO,OAAO,KAAK,OAAO,EAAE,OAAO,CAAC,OAAO,UAAU;AACjD,QAAI,UAAU,WAAW;AACrB,aAAO;AAAA,IACX;AAEA,QAAI,OAAO,QAAQ,KAAK,MAAM,UAAU;AACpC,aAAO;AAAA,QACH,GAAG;AAAA,QACH,CAAC,SAAU,UAAU,YAAY,SAAS,GAAG,MAAM,IAAI,KAAK,KAAM,KAAK,GAAG,QAAQ,KAAK;AAAA,MAAA;AAAA,IAE/F;AAEA,WAAO;AAAA,MACH,GAAG;AAAA,MACH,GAAG,SAAS,QAAQ,KAAK,GAAG,KAAK;AAAA,IAAA;AAAA,EAEzC,GAAG,CAAA,CAAE;AACT;AAEO,MAAM,SAAiC,SAASA,eAAW;AAI3D,MAAM,gBAAgB,CAAC,OAAmC,MAAM,OAAO,OAAO,SAAS,GAAG;AAE1F,MAAM,uBAAuB,CAAC,YAAoB;AACrD,QAAM,aAAgC,OAAO,KAAK,MAAM,EAAE,OAAO,OAAO,MAAM,EAAE,QAAQ,OAAO,CAAC;AAEhG,QAAM,CAAC,OAAO,MAAM,IAAI,OAAO,UAAU,EAAE,MAAM,GAAG;AACpD,QAAM,QAAQ,OAAO,MAAM;AAE3B,MAAI,OAAO;AACP,QAAI,QAAQ,KAAK;AACb,aAAO,cAAc,GAAG,KAAK,MAAM;AAAA,IACvC;AACA,QACI,UAAU,QACT,UAAU,SAAS,UAAU,UAAU,UAAU,WAAW,UAAU,YAAY,UAAU,UAC/F;AACE,aAAO;AAAA,IACX;AAEA,WAAO,cAAc,GAAG,KAAK,MAAM;AAAA,EACvC;AAEA,SAAO,UAAU,UAAU,UAAU;AACzC;;;;"}

package/dist/charts/utils/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","sources":["../../../src/charts/utils/color.ts"],"sourcesContent":["import themeColors from '../../../tailwind.colors.js';\n\nconst mapColor = (palette: any, prefix = ''): any => {\n    return Object.keys(palette).reduce((accum, color) => {\n        if (color === 'current') {\n            return accum;\n        }\n\n        if (typeof palette[color] === 'string') {\n            return {\n                ...accum,\n                [prefix ? (color === 'DEFAULT' ? prefix : `${prefix}-${color}`) : color]: palette[color],\n            };\n        }\n\n        return {\n            ...accum,\n            ...mapColor(palette[color], color),\n        };\n    }, {});\n};\n\nexport const colors: Record<string, string> = mapColor(themeColors);\n\nexport type Color = keyof typeof colors;\n\nexport const getThemeColor = (color: string | Color | undefined, def = '') => colors[color ?? def];\n\nexport const getInverseThemeColor = (hexCode: string) => {\n    const themeColor: Color | undefined = Object.keys(colors)[Object.values(colors).indexOf(hexCode)];\n\n    const [color, number] = String(themeColor).split('-');\n    const shade = Number(number);\n\n    if (shade) {\n        if (shade > 500) {\n            return getThemeColor(`${color}-100`);\n        }\n        if (\n            shade === 500 &&\n            (color === 'red' || color === 'blue' || color === 'brown' || color === 'purple' || color === 'green')\n        ) {\n            return 'white';\n        }\n\n        return getThemeColor(`${color}-900`);\n    }\n\n    return color === 'black' ? 'white' : 'black';\n};\n"],"names":["themeColors"],"mappings":";AAEA,MAAM,WAAW,CAAC,SAAc,SAAS,OAAY;AACjD,SAAO,OAAO,KAAK,OAAO,EAAE,OAAO,CAAC,OAAO,UAAU;AACjD,QAAI,UAAU,WAAW;AACd,aAAA;AAAA,IAAA;AAGX,QAAI,OAAO,QAAQ,KAAK,MAAM,UAAU;AAC7B,aAAA;AAAA,QACH,GAAG;AAAA,QACH,CAAC,SAAU,UAAU,YAAY,SAAS,GAAG,MAAM,IAAI,KAAK,KAAM,KAAK,GAAG,QAAQ,KAAK;AAAA,MAC3F;AAAA,IAAA;AAGG,WAAA;AAAA,MACH,GAAG;AAAA,MACH,GAAG,SAAS,QAAQ,KAAK,GAAG,KAAK;AAAA,IACrC;AAAA,EACJ,GAAG,EAAE;AACT;AAEa,MAAA,SAAiC,SAASA,YAAW;AAI3D,MAAM,gBAAgB,CAAC,OAAmC,MAAM,OAAO,OAAO,SAAS,GAAG;AAEpF,MAAA,uBAAuB,CAAC,YAAoB;AAC/C,QAAA,aAAgC,OAAO,KAAK,MAAM,EAAE,OAAO,OAAO,MAAM,EAAE,QAAQ,OAAO,CAAC;AAE1F,QAAA,CAAC,OAAO,MAAM,IAAI,OAAO,UAAU,EAAE,MAAM,GAAG;AAC9C,QAAA,QAAQ,OAAO,MAAM;AAE3B,MAAI,OAAO;AACP,QAAI,QAAQ,KAAK;AACN,aAAA,cAAc,GAAG,KAAK,MAAM;AAAA,IAAA;AAGnC,QAAA,UAAU,QACT,UAAU,SAAS,UAAU,UAAU,UAAU,WAAW,UAAU,YAAY,UAAU,UAC/F;AACS,aAAA;AAAA,IAAA;AAGJ,WAAA,cAAc,GAAG,KAAK,MAAM;AAAA,EAAA;AAGhC,SAAA,UAAU,UAAU,UAAU;AACzC;"}
+{"version":3,"file":"color.js","sources":["../../../src/charts/utils/color.ts"],"sourcesContent":["import themeColors from '../../../tailwind.colors.js';\n\nconst mapColor = (palette: any, prefix = ''): any => {\n    return Object.keys(palette).reduce((accum, color) => {\n        if (color === 'current') {\n            return accum;\n        }\n\n        if (typeof palette[color] === 'string') {\n            return {\n                ...accum,\n                [prefix ? (color === 'DEFAULT' ? prefix : `${prefix}-${color}`) : color]: palette[color],\n            };\n        }\n\n        return {\n            ...accum,\n            ...mapColor(palette[color], color),\n        };\n    }, {});\n};\n\nexport const colors: Record<string, string> = mapColor(themeColors);\n\nexport type Color = keyof typeof colors;\n\nexport const getThemeColor = (color: string | Color | undefined, def = '') => colors[color ?? def];\n\nexport const getInverseThemeColor = (hexCode: string) => {\n    const themeColor: Color | undefined = Object.keys(colors)[Object.values(colors).indexOf(hexCode)];\n\n    const [color, number] = String(themeColor).split('-');\n    const shade = Number(number);\n\n    if (shade) {\n        if (shade > 500) {\n            return getThemeColor(`${color}-100`);\n        }\n        if (\n            shade === 500 &&\n            (color === 'red' || color === 'blue' || color === 'brown' || color === 'purple' || color === 'green')\n        ) {\n            return 'white';\n        }\n\n        return getThemeColor(`${color}-900`);\n    }\n\n    return color === 'black' ? 'white' : 'black';\n};\n"],"names":["themeColors"],"mappings":";AAEA,MAAM,WAAW,CAAC,SAAc,SAAS,OAAY;AACjD,SAAO,OAAO,KAAK,OAAO,EAAE,OAAO,CAAC,OAAO,UAAU;AACjD,QAAI,UAAU,WAAW;AACrB,aAAO;AAAA,IACX;AAEA,QAAI,OAAO,QAAQ,KAAK,MAAM,UAAU;AACpC,aAAO;AAAA,QACH,GAAG;AAAA,QACH,CAAC,SAAU,UAAU,YAAY,SAAS,GAAG,MAAM,IAAI,KAAK,KAAM,KAAK,GAAG,QAAQ,KAAK;AAAA,MAAA;AAAA,IAE/F;AAEA,WAAO;AAAA,MACH,GAAG;AAAA,MACH,GAAG,SAAS,QAAQ,KAAK,GAAG,KAAK;AAAA,IAAA;AAAA,EAEzC,GAAG,CAAA,CAAE;AACT;AAEO,MAAM,SAAiC,SAASA,YAAW;AAI3D,MAAM,gBAAgB,CAAC,OAAmC,MAAM,OAAO,OAAO,SAAS,GAAG;AAE1F,MAAM,uBAAuB,CAAC,YAAoB;AACrD,QAAM,aAAgC,OAAO,KAAK,MAAM,EAAE,OAAO,OAAO,MAAM,EAAE,QAAQ,OAAO,CAAC;AAEhG,QAAM,CAAC,OAAO,MAAM,IAAI,OAAO,UAAU,EAAE,MAAM,GAAG;AACpD,QAAM,QAAQ,OAAO,MAAM;AAE3B,MAAI,OAAO;AACP,QAAI,QAAQ,KAAK;AACb,aAAO,cAAc,GAAG,KAAK,MAAM;AAAA,IACvC;AACA,QACI,UAAU,QACT,UAAU,SAAS,UAAU,UAAU,UAAU,WAAW,UAAU,YAAY,UAAU,UAC/F;AACE,aAAO;AAAA,IACX;AAEA,WAAO,cAAc,GAAG,KAAK,MAAM;AAAA,EACvC;AAEA,SAAO,UAAU,UAAU,UAAU;AACzC;"}

package/dist/charts/utils/common.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"common.cjs","sources":["../../../src/charts/utils/common.tsx"],"sourcesContent":["import { AxisInterval } from 'recharts/types/util/types';\nimport { CartesianChartProps } from '../components/types';\n\nexport function getAxisProps<TData extends object>(axis: 'x' | 'y', props: CartesianChartProps<TData>, inverted = false) {\n    const { showXAxis = true, showYAxis = false } = props;\n    const isYAxis = axis === 'y';\n\n    let hide = isYAxis ? !showYAxis : !showXAxis;\n    let dataKey = isYAxis ? undefined : (props.dataKey as string);\n    let minTickGap = 5;\n    let type;\n\n    if (inverted) {\n        dataKey = isYAxis ? (props.dataKey as string) : undefined;\n        hide = isYAxis ? !showXAxis : !showYAxis;\n        // this ensures all y axis labels are shown in horizontal mode when no height is set\n        minTickGap = isYAxis ? 1 : minTickGap;\n        type = (isYAxis ? 'category' : 'number') as any;\n    }\n\n    return {\n        axisLine: false,\n        dataKey,\n        fontSize: 11,\n        hide,\n        interval: 'preserveStartEnd' as AxisInterval,\n        minTickGap,\n        scale: isYAxis ? props.yAxisScale : props.xAxisScale,\n        tickLine: false,\n        tickMargin: axis === 'y' ? 2 : 6,\n        tickFormatter: isYAxis ? props.yAxisTickFormatter : props.xAxisTickFormatter,\n        type,\n        width: (isYAxis ? props.yAxisWidth : undefined) ?? 55,\n    };\n}\n\nexport function stripCartesianProps<TProps extends CartesianChartProps<any>>(props: TProps): TProps {\n    const {\n        dataKey: _1,\n        showXAxis: _2,\n        showYAxis: _3,\n        xAxisScale: _4,\n        xAxisTickFormatter: _5,\n        yAxisScale: _6,\n        yAxisTickFormatter: _7,\n        yAxisWidth: _8,\n        ...otherProps\n    } = props;\n\n    return otherProps as TProps;\n}\n"],"names":[],"mappings":";;AAGO,SAAS,aAAmC,MAAiB,OAAmC,WAAW,OAAO;AACrH,QAAM,EAAE,YAAY,MAAM,YAAY,MAAU,IAAA;AAChD,QAAM,UAAU,SAAS;AAEzB,MAAI,OAAO,UAAU,CAAC,YAAY,CAAC;AAC/B,MAAA,UAAU,UAAU,SAAa,MAAM;AAC3C,MAAI,aAAa;AACb,MAAA;AAEJ,MAAI,UAAU;AACA,cAAA,UAAW,MAAM,UAAqB;AACzC,WAAA,UAAU,CAAC,YAAY,CAAC;AAE/B,iBAAa,UAAU,IAAI;AAC3B,WAAQ,UAAU,aAAa;AAAA,EAAA;AAG5B,SAAA;AAAA,IACH,UAAU;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,OAAO,UAAU,MAAM,aAAa,MAAM;AAAA,IAC1C,UAAU;AAAA,IACV,YAAY,SAAS,MAAM,IAAI;AAAA,IAC/B,eAAe,UAAU,MAAM,qBAAqB,MAAM;AAAA,IAC1D;AAAA,IACA,QAAQ,UAAU,MAAM,aAAa,WAAc;AAAA,EACvD;AACJ;AAEO,SAAS,oBAA6D,OAAuB;AAC1F,QAAA;AAAA,IACF,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AAEG,SAAA;AACX;;;"}
+{"version":3,"file":"common.cjs","sources":["../../../src/charts/utils/common.tsx"],"sourcesContent":["import { AxisInterval } from 'recharts/types/util/types';\nimport { CartesianChartProps } from '../components/types';\n\nexport function getAxisProps<TData extends object>(axis: 'x' | 'y', props: CartesianChartProps<TData>, inverted = false) {\n    const { showXAxis = true, showYAxis = false } = props;\n    const isYAxis = axis === 'y';\n\n    let hide = isYAxis ? !showYAxis : !showXAxis;\n    let dataKey = isYAxis ? undefined : (props.dataKey as string);\n    let minTickGap = 5;\n    let type;\n\n    if (inverted) {\n        dataKey = isYAxis ? (props.dataKey as string) : undefined;\n        hide = isYAxis ? !showXAxis : !showYAxis;\n        // this ensures all y axis labels are shown in horizontal mode when no height is set\n        minTickGap = isYAxis ? 1 : minTickGap;\n        type = (isYAxis ? 'category' : 'number') as any;\n    }\n\n    return {\n        axisLine: false,\n        dataKey,\n        fontSize: 11,\n        hide,\n        interval: 'preserveStartEnd' as AxisInterval,\n        minTickGap,\n        scale: isYAxis ? props.yAxisScale : props.xAxisScale,\n        tickLine: false,\n        tickMargin: axis === 'y' ? 2 : 6,\n        tickFormatter: isYAxis ? props.yAxisTickFormatter : props.xAxisTickFormatter,\n        type,\n        width: (isYAxis ? props.yAxisWidth : undefined) ?? 55,\n    };\n}\n\nexport function stripCartesianProps<TProps extends CartesianChartProps<any>>(props: TProps): TProps {\n    const {\n        dataKey: _1,\n        showXAxis: _2,\n        showYAxis: _3,\n        xAxisScale: _4,\n        xAxisTickFormatter: _5,\n        yAxisScale: _6,\n        yAxisTickFormatter: _7,\n        yAxisWidth: _8,\n        ...otherProps\n    } = props;\n\n    return otherProps as TProps;\n}\n"],"names":[],"mappings":";;AAGO,SAAS,aAAmC,MAAiB,OAAmC,WAAW,OAAO;AACrH,QAAM,EAAE,YAAY,MAAM,YAAY,UAAU;AAChD,QAAM,UAAU,SAAS;AAEzB,MAAI,OAAO,UAAU,CAAC,YAAY,CAAC;AACnC,MAAI,UAAU,UAAU,SAAa,MAAM;AAC3C,MAAI,aAAa;AACjB,MAAI;AAEJ,MAAI,UAAU;AACV,cAAU,UAAW,MAAM,UAAqB;AAChD,WAAO,UAAU,CAAC,YAAY,CAAC;AAE/B,iBAAa,UAAU,IAAI;AAC3B,WAAQ,UAAU,aAAa;AAAA,EACnC;AAEA,SAAO;AAAA,IACH,UAAU;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,OAAO,UAAU,MAAM,aAAa,MAAM;AAAA,IAC1C,UAAU;AAAA,IACV,YAAY,SAAS,MAAM,IAAI;AAAA,IAC/B,eAAe,UAAU,MAAM,qBAAqB,MAAM;AAAA,IAC1D;AAAA,IACA,QAAQ,UAAU,MAAM,aAAa,WAAc;AAAA,EAAA;AAE3D;AAEO,SAAS,oBAA6D,OAAuB;AAChG,QAAM;AAAA,IACF,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AAEJ,SAAO;AACX;;;"}

package/dist/charts/utils/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sources":["../../../src/charts/utils/common.tsx"],"sourcesContent":["import { AxisInterval } from 'recharts/types/util/types';\nimport { CartesianChartProps } from '../components/types';\n\nexport function getAxisProps<TData extends object>(axis: 'x' | 'y', props: CartesianChartProps<TData>, inverted = false) {\n    const { showXAxis = true, showYAxis = false } = props;\n    const isYAxis = axis === 'y';\n\n    let hide = isYAxis ? !showYAxis : !showXAxis;\n    let dataKey = isYAxis ? undefined : (props.dataKey as string);\n    let minTickGap = 5;\n    let type;\n\n    if (inverted) {\n        dataKey = isYAxis ? (props.dataKey as string) : undefined;\n        hide = isYAxis ? !showXAxis : !showYAxis;\n        // this ensures all y axis labels are shown in horizontal mode when no height is set\n        minTickGap = isYAxis ? 1 : minTickGap;\n        type = (isYAxis ? 'category' : 'number') as any;\n    }\n\n    return {\n        axisLine: false,\n        dataKey,\n        fontSize: 11,\n        hide,\n        interval: 'preserveStartEnd' as AxisInterval,\n        minTickGap,\n        scale: isYAxis ? props.yAxisScale : props.xAxisScale,\n        tickLine: false,\n        tickMargin: axis === 'y' ? 2 : 6,\n        tickFormatter: isYAxis ? props.yAxisTickFormatter : props.xAxisTickFormatter,\n        type,\n        width: (isYAxis ? props.yAxisWidth : undefined) ?? 55,\n    };\n}\n\nexport function stripCartesianProps<TProps extends CartesianChartProps<any>>(props: TProps): TProps {\n    const {\n        dataKey: _1,\n        showXAxis: _2,\n        showYAxis: _3,\n        xAxisScale: _4,\n        xAxisTickFormatter: _5,\n        yAxisScale: _6,\n        yAxisTickFormatter: _7,\n        yAxisWidth: _8,\n        ...otherProps\n    } = props;\n\n    return otherProps as TProps;\n}\n"],"names":[],"mappings":"AAGO,SAAS,aAAmC,MAAiB,OAAmC,WAAW,OAAO;AACrH,QAAM,EAAE,YAAY,MAAM,YAAY,MAAU,IAAA;AAChD,QAAM,UAAU,SAAS;AAEzB,MAAI,OAAO,UAAU,CAAC,YAAY,CAAC;AAC/B,MAAA,UAAU,UAAU,SAAa,MAAM;AAC3C,MAAI,aAAa;AACb,MAAA;AAEJ,MAAI,UAAU;AACA,cAAA,UAAW,MAAM,UAAqB;AACzC,WAAA,UAAU,CAAC,YAAY,CAAC;AAE/B,iBAAa,UAAU,IAAI;AAC3B,WAAQ,UAAU,aAAa;AAAA,EAAA;AAG5B,SAAA;AAAA,IACH,UAAU;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,OAAO,UAAU,MAAM,aAAa,MAAM;AAAA,IAC1C,UAAU;AAAA,IACV,YAAY,SAAS,MAAM,IAAI;AAAA,IAC/B,eAAe,UAAU,MAAM,qBAAqB,MAAM;AAAA,IAC1D;AAAA,IACA,QAAQ,UAAU,MAAM,aAAa,WAAc;AAAA,EACvD;AACJ;AAEO,SAAS,oBAA6D,OAAuB;AAC1F,QAAA;AAAA,IACF,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AAEG,SAAA;AACX;"}
+{"version":3,"file":"common.js","sources":["../../../src/charts/utils/common.tsx"],"sourcesContent":["import { AxisInterval } from 'recharts/types/util/types';\nimport { CartesianChartProps } from '../components/types';\n\nexport function getAxisProps<TData extends object>(axis: 'x' | 'y', props: CartesianChartProps<TData>, inverted = false) {\n    const { showXAxis = true, showYAxis = false } = props;\n    const isYAxis = axis === 'y';\n\n    let hide = isYAxis ? !showYAxis : !showXAxis;\n    let dataKey = isYAxis ? undefined : (props.dataKey as string);\n    let minTickGap = 5;\n    let type;\n\n    if (inverted) {\n        dataKey = isYAxis ? (props.dataKey as string) : undefined;\n        hide = isYAxis ? !showXAxis : !showYAxis;\n        // this ensures all y axis labels are shown in horizontal mode when no height is set\n        minTickGap = isYAxis ? 1 : minTickGap;\n        type = (isYAxis ? 'category' : 'number') as any;\n    }\n\n    return {\n        axisLine: false,\n        dataKey,\n        fontSize: 11,\n        hide,\n        interval: 'preserveStartEnd' as AxisInterval,\n        minTickGap,\n        scale: isYAxis ? props.yAxisScale : props.xAxisScale,\n        tickLine: false,\n        tickMargin: axis === 'y' ? 2 : 6,\n        tickFormatter: isYAxis ? props.yAxisTickFormatter : props.xAxisTickFormatter,\n        type,\n        width: (isYAxis ? props.yAxisWidth : undefined) ?? 55,\n    };\n}\n\nexport function stripCartesianProps<TProps extends CartesianChartProps<any>>(props: TProps): TProps {\n    const {\n        dataKey: _1,\n        showXAxis: _2,\n        showYAxis: _3,\n        xAxisScale: _4,\n        xAxisTickFormatter: _5,\n        yAxisScale: _6,\n        yAxisTickFormatter: _7,\n        yAxisWidth: _8,\n        ...otherProps\n    } = props;\n\n    return otherProps as TProps;\n}\n"],"names":[],"mappings":"AAGO,SAAS,aAAmC,MAAiB,OAAmC,WAAW,OAAO;AACrH,QAAM,EAAE,YAAY,MAAM,YAAY,UAAU;AAChD,QAAM,UAAU,SAAS;AAEzB,MAAI,OAAO,UAAU,CAAC,YAAY,CAAC;AACnC,MAAI,UAAU,UAAU,SAAa,MAAM;AAC3C,MAAI,aAAa;AACjB,MAAI;AAEJ,MAAI,UAAU;AACV,cAAU,UAAW,MAAM,UAAqB;AAChD,WAAO,UAAU,CAAC,YAAY,CAAC;AAE/B,iBAAa,UAAU,IAAI;AAC3B,WAAQ,UAAU,aAAa;AAAA,EACnC;AAEA,SAAO;AAAA,IACH,UAAU;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,OAAO,UAAU,MAAM,aAAa,MAAM;AAAA,IAC1C,UAAU;AAAA,IACV,YAAY,SAAS,MAAM,IAAI;AAAA,IAC/B,eAAe,UAAU,MAAM,qBAAqB,MAAM;AAAA,IAC1D;AAAA,IACA,QAAQ,UAAU,MAAM,aAAa,WAAc;AAAA,EAAA;AAE3D;AAEO,SAAS,oBAA6D,OAAuB;AAChG,QAAM;AAAA,IACF,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AAEJ,SAAO;AACX;"}

package/dist/components/Accordion/Accordion.cjs

@@ -10,7 +10,7 @@ const AccordionContext = React.createContext({
 const Trigger = React.forwardRef(function AccordionTrigger(props, ref) {
   const { headingLevel: Heading } = React.useContext(AccordionContext);
   const className = cn(
-    "w-full inline-flex justify-between items-center align-middle focus-within:yt-focus focus:rounded-sm group",
+    "group inline-flex w-full items-center justify-between align-middle focus-within:yt-focus focus:rounded-sm",
     props.className
   );
   return /* @__PURE__ */ React.createElement(Heading, { className: "my-3" }, /* @__PURE__ */ React.createElement(reactAriaComponents.Button, { ...props, className, "data-taco": "accordion-trigger", ref, slot: "trigger" }, props.children, /* @__PURE__ */ React.createElement(Icon.Icon, { name: "chevron-down", "aria-hidden": true, className: "group-aria-expanded:rotate-180" })));

package/dist/components/Accordion/Accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.cjs","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport {\n    Button as ReactAriaButton,\n    ButtonProps as ReactAriaButtonProps,\n    Disclosure as ReactAriaDisclosure,\n    DisclosurePanel as ReactAriaDisclosurePanel,\n    DisclosureGroup as ReactAriaDisclosureGroup,\n    DisclosureGroupProps as ReactAriaDisclosureGroupProps,\n    DisclosurePanelProps as ReactAriaDisclosurePanelProps,\n    DisclosureProps as ReactAriaDisclosureProps,\n} from 'react-aria-components';\nimport { Icon } from '../Icon/Icon';\nimport { Either } from '../../types';\n\ntype AccordionContext = {\n    headingLevel: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n};\nconst AccordionContext = React.createContext<AccordionContext>({\n    headingLevel: 'h2',\n});\n\n// trigger\nexport type AccordionTriggerProps = Omit<ReactAriaButtonProps, 'children' | 'slot'> & {\n    children: React.ReactNode;\n};\n\nconst Trigger = React.forwardRef(function AccordionTrigger(props: AccordionTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const { headingLevel: Heading } = React.useContext(AccordionContext);\n    const className = cn(\n        'w-full inline-flex justify-between items-center align-middle focus-within:yt-focus focus:rounded-sm group',\n        props.className\n    );\n\n    return (\n        <Heading className=\"my-3\">\n            <ReactAriaButton {...props} className={className} data-taco=\"accordion-trigger\" ref={ref} slot=\"trigger\">\n                {props.children}\n                <Icon name=\"chevron-down\" aria-hidden className=\"group-aria-expanded:rotate-180\" />\n            </ReactAriaButton>\n        </Heading>\n    );\n});\n\n// content\nexport type AccordionContentProps = ReactAriaDisclosurePanelProps;\n\nconst Content = React.forwardRef(function AccordionContent(props: AccordionContentProps, ref: React.Ref<HTMLDivElement>) {\n    return <ReactAriaDisclosurePanel {...props} data-taco=\"accordion-panel\" ref={ref} />;\n});\n\n// item\nexport type AccordionItemProps = Omit<\n    ReactAriaDisclosureProps,\n    'id' | 'isDisabled' | 'onExpandedChange' | 'defaultExpanded' | 'isExpanded'\n> & {\n    disabled?: boolean;\n    id: string;\n};\n\nconst Item = React.forwardRef(function AccordionItem(props: AccordionItemProps, ref: React.Ref<HTMLDivElement>) {\n    const { disabled, ...otherProps } = props;\n    const disclosureClassName = cn('group data-[disabled]:opacity-50', props.className);\n\n    return <ReactAriaDisclosure {...otherProps} className={disclosureClassName} isDisabled={disabled} ref={ref} />;\n});\n\n// accordion\nexport type AccordionBaseProps = Omit<\n    ReactAriaDisclosureGroupProps,\n    'allowsMultipleExpanded' | 'id' | 'isDisabled' | 'expandedKeys' | 'defaultExpandedKeys' | 'onExpandedChange'\n> & {\n    children: React.ReactNode;\n    /** Change what heading element accordion regions will render */\n    as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n    /** Additional classes for Accordion root element */\n    className?: string;\n    disabled?: boolean;\n};\n\nexport type AccordionProps = AccordionBaseProps &\n    Either<\n        // controlled\n        {\n            /* Expanded accordions (controlled) */\n            id: string | string[];\n            /* Handler called when the expanded state changes (controlled) */\n            onChange: ((id: string) => void) | ((id: string[]) => void);\n        },\n        // uncontrolled\n        {\n            /* Expanded accordions (uncontrolled) */\n            defaultId?: string | string[];\n        }\n    >;\n\nexport function Accordion(props: AccordionProps) {\n    const { disabled, id, defaultId, onChange, as: headingLevel = 'h2', ...otherProps } = props;\n    const context = React.useMemo(() => ({ headingLevel }), [headingLevel]);\n\n    let expandedKeys;\n    let handleExpandedChange;\n    let defaultExpandedKeys;\n\n    // controlled or uncontrolled\n    if (onChange) {\n        // string is iteratable, so make sure to wrap it in an array before giving it to DisclosureGroup\n        expandedKeys = typeof id === 'string' ? [id] : id;\n        handleExpandedChange = (expandedItems: Set<React.Key>) => {\n            const expandedItemsArray = Array.from(expandedItems).map(String);\n            const isSingleSelect = typeof id === 'string';\n\n            // We need typecasting to by bypass TS error because the way TS handle function overload\n            // https://github.com/microsoft/TypeScript/issues/14107\n            if (isSingleSelect) {\n                (onChange as (id: string | undefined) => void)(expandedItemsArray[0]);\n            } else {\n                (onChange as (id: string[]) => void)(expandedItemsArray);\n            }\n        };\n    } else {\n        // string is iteratable, so make sure to wrap it in an array before giving it to DisclosureGroup\n        defaultExpandedKeys = typeof defaultId === 'string' ? [defaultId] : defaultId;\n    }\n\n    return (\n        <AccordionContext.Provider value={context}>\n            <ReactAriaDisclosureGroup\n                {...otherProps}\n                allowsMultipleExpanded={Array.isArray(defaultId) || Array.isArray(id)}\n                className={cn('divide-y divide-gray-200', props.className)}\n                data-taco=\"accordion\"\n                defaultExpandedKeys={defaultExpandedKeys}\n                expandedKeys={expandedKeys}\n                isDisabled={disabled}\n                onExpandedChange={handleExpandedChange}\n            />\n        </AccordionContext.Provider>\n    );\n}\n\nAccordion.Item = Item;\nAccordion.Trigger = Trigger;\nAccordion.Content = Content;\n"],"names":["ReactAriaButton","Icon","ReactAriaDisclosurePanel","ReactAriaDisclosure","ReactAriaDisclosureGroup"],"mappings":";;;;;;AAkBA,MAAM,mBAAmB,MAAM,cAAgC;AAAA,EAC3D,cAAc;AAClB,CAAC;AAOD,MAAM,UAAU,MAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAmC;AACxH,QAAM,EAAE,cAAc,QAAA,IAAY,MAAM,WAAW,gBAAgB;AACnE,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAGI,SAAA,sBAAA,cAAC,SAAQ,EAAA,WAAU,OACf,GAAA,sBAAA,cAACA,oBAAAA,UAAiB,GAAG,OAAO,WAAsB,aAAU,qBAAoB,KAAU,MAAK,UAC1F,GAAA,MAAM,UACP,sBAAA,cAACC,KAAK,MAAA,EAAA,MAAK,gBAAe,eAAW,MAAC,WAAU,iCAAiC,CAAA,CACrF,CACJ;AAER,CAAC;AAKD,MAAM,UAAU,MAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAgC;AACrH,6CAAQC,qCAA0B,EAAA,GAAG,OAAO,aAAU,mBAAkB,KAAU;AACtF,CAAC;AAWD,MAAM,OAAO,MAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AAC5G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,sBAAsB,GAAG,oCAAoC,MAAM,SAAS;AAE3E,SAAA,sBAAA,cAACC,kCAAqB,GAAG,YAAY,WAAW,qBAAqB,YAAY,UAAU,IAAU,CAAA;AAChH,CAAC;AA+BM,SAAS,UAAU,OAAuB;AACvC,QAAA,EAAE,UAAU,IAAI,WAAW,UAAU,IAAI,eAAe,MAAM,GAAG,WAAA,IAAe;AAChF,QAAA,UAAU,MAAM,QAAQ,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAAC;AAElE,MAAA;AACA,MAAA;AACA,MAAA;AAGJ,MAAI,UAAU;AAEV,mBAAe,OAAO,OAAO,WAAW,CAAC,EAAE,IAAI;AAC/C,2BAAuB,CAAC,kBAAkC;AACtD,YAAM,qBAAqB,MAAM,KAAK,aAAa,EAAE,IAAI,MAAM;AACzD,YAAA,iBAAiB,OAAO,OAAO;AAIrC,UAAI,gBAAgB;AACf,iBAA8C,mBAAmB,CAAC,CAAC;AAAA,MAAA,OACjE;AACF,iBAAoC,kBAAkB;AAAA,MAAA;AAAA,IAE/D;AAAA,EAAA,OACG;AAEH,0BAAsB,OAAO,cAAc,WAAW,CAAC,SAAS,IAAI;AAAA,EAAA;AAGxE,SACK,sBAAA,cAAA,iBAAiB,UAAjB,EAA0B,OAAO,WAC9B,sBAAA;AAAA,IAACC,oBAAA;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,wBAAwB,MAAM,QAAQ,SAAS,KAAK,MAAM,QAAQ,EAAE;AAAA,MACpE,WAAW,GAAG,4BAA4B,MAAM,SAAS;AAAA,MACzD,aAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,kBAAkB;AAAA,IAAA;AAAA,EAAA,CAE1B;AAER;AAEA,UAAU,OAAO;AACjB,UAAU,UAAU;AACpB,UAAU,UAAU;;"}
+{"version":3,"file":"Accordion.cjs","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport {\n    Button as ReactAriaButton,\n    ButtonProps as ReactAriaButtonProps,\n    Disclosure as ReactAriaDisclosure,\n    DisclosurePanel as ReactAriaDisclosurePanel,\n    DisclosureGroup as ReactAriaDisclosureGroup,\n    DisclosureGroupProps as ReactAriaDisclosureGroupProps,\n    DisclosurePanelProps as ReactAriaDisclosurePanelProps,\n    DisclosureProps as ReactAriaDisclosureProps,\n} from 'react-aria-components';\nimport { Icon } from '../Icon/Icon';\nimport { Either } from '../../types';\n\ntype AccordionContext = {\n    headingLevel: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n};\nconst AccordionContext = React.createContext<AccordionContext>({\n    headingLevel: 'h2',\n});\n\n// trigger\nexport type AccordionTriggerProps = Omit<ReactAriaButtonProps, 'children' | 'slot'> & {\n    children: React.ReactNode;\n};\n\nconst Trigger = React.forwardRef(function AccordionTrigger(props: AccordionTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const { headingLevel: Heading } = React.useContext(AccordionContext);\n    const className = cn(\n        'group inline-flex w-full items-center justify-between align-middle focus-within:yt-focus focus:rounded-sm',\n        props.className\n    );\n\n    return (\n        <Heading className=\"my-3\">\n            <ReactAriaButton {...props} className={className} data-taco=\"accordion-trigger\" ref={ref} slot=\"trigger\">\n                {props.children}\n                <Icon name=\"chevron-down\" aria-hidden className=\"group-aria-expanded:rotate-180\" />\n            </ReactAriaButton>\n        </Heading>\n    );\n});\n\n// content\nexport type AccordionContentProps = ReactAriaDisclosurePanelProps;\n\nconst Content = React.forwardRef(function AccordionContent(props: AccordionContentProps, ref: React.Ref<HTMLDivElement>) {\n    return <ReactAriaDisclosurePanel {...props} data-taco=\"accordion-panel\" ref={ref} />;\n});\n\n// item\nexport type AccordionItemProps = Omit<\n    ReactAriaDisclosureProps,\n    'id' | 'isDisabled' | 'onExpandedChange' | 'defaultExpanded' | 'isExpanded'\n> & {\n    disabled?: boolean;\n    id: string;\n};\n\nconst Item = React.forwardRef(function AccordionItem(props: AccordionItemProps, ref: React.Ref<HTMLDivElement>) {\n    const { disabled, ...otherProps } = props;\n    const disclosureClassName = cn('group data-[disabled]:opacity-50', props.className);\n\n    return <ReactAriaDisclosure {...otherProps} className={disclosureClassName} isDisabled={disabled} ref={ref} />;\n});\n\n// accordion\nexport type AccordionBaseProps = Omit<\n    ReactAriaDisclosureGroupProps,\n    'allowsMultipleExpanded' | 'id' | 'isDisabled' | 'expandedKeys' | 'defaultExpandedKeys' | 'onExpandedChange'\n> & {\n    children: React.ReactNode;\n    /** Change what heading element accordion regions will render */\n    as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n    /** Additional classes for Accordion root element */\n    className?: string;\n    disabled?: boolean;\n};\n\nexport type AccordionProps = AccordionBaseProps &\n    Either<\n        // controlled\n        {\n            /* Expanded accordions (controlled) */\n            id: string | string[];\n            /* Handler called when the expanded state changes (controlled) */\n            onChange: ((id: string) => void) | ((id: string[]) => void);\n        },\n        // uncontrolled\n        {\n            /* Expanded accordions (uncontrolled) */\n            defaultId?: string | string[];\n        }\n    >;\n\nexport function Accordion(props: AccordionProps) {\n    const { disabled, id, defaultId, onChange, as: headingLevel = 'h2', ...otherProps } = props;\n    const context = React.useMemo(() => ({ headingLevel }), [headingLevel]);\n\n    let expandedKeys;\n    let handleExpandedChange;\n    let defaultExpandedKeys;\n\n    // controlled or uncontrolled\n    if (onChange) {\n        // string is iteratable, so make sure to wrap it in an array before giving it to DisclosureGroup\n        expandedKeys = typeof id === 'string' ? [id] : id;\n        handleExpandedChange = (expandedItems: Set<React.Key>) => {\n            const expandedItemsArray = Array.from(expandedItems).map(String);\n            const isSingleSelect = typeof id === 'string';\n\n            // We need typecasting to by bypass TS error because the way TS handle function overload\n            // https://github.com/microsoft/TypeScript/issues/14107\n            if (isSingleSelect) {\n                (onChange as (id: string | undefined) => void)(expandedItemsArray[0]);\n            } else {\n                (onChange as (id: string[]) => void)(expandedItemsArray);\n            }\n        };\n    } else {\n        // string is iteratable, so make sure to wrap it in an array before giving it to DisclosureGroup\n        defaultExpandedKeys = typeof defaultId === 'string' ? [defaultId] : defaultId;\n    }\n\n    return (\n        <AccordionContext.Provider value={context}>\n            <ReactAriaDisclosureGroup\n                {...otherProps}\n                allowsMultipleExpanded={Array.isArray(defaultId) || Array.isArray(id)}\n                className={cn('divide-y divide-gray-200', props.className)}\n                data-taco=\"accordion\"\n                defaultExpandedKeys={defaultExpandedKeys}\n                expandedKeys={expandedKeys}\n                isDisabled={disabled}\n                onExpandedChange={handleExpandedChange}\n            />\n        </AccordionContext.Provider>\n    );\n}\n\nAccordion.Item = Item;\nAccordion.Trigger = Trigger;\nAccordion.Content = Content;\n"],"names":["ReactAriaButton","Icon","ReactAriaDisclosurePanel","ReactAriaDisclosure","ReactAriaDisclosureGroup"],"mappings":";;;;;;AAkBA,MAAM,mBAAmB,MAAM,cAAgC;AAAA,EAC3D,cAAc;AAClB,CAAC;AAOD,MAAM,UAAU,MAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAmC;AACxH,QAAM,EAAE,cAAc,QAAA,IAAY,MAAM,WAAW,gBAAgB;AACnE,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,SACI,sBAAA,cAAC,SAAA,EAAQ,WAAU,OAAA,GACf,sBAAA,cAACA,oBAAAA,UAAiB,GAAG,OAAO,WAAsB,aAAU,qBAAoB,KAAU,MAAK,UAAA,GAC1F,MAAM,UACP,sBAAA,cAACC,KAAAA,MAAA,EAAK,MAAK,gBAAe,eAAW,MAAC,WAAU,iCAAA,CAAiC,CACrF,CACJ;AAER,CAAC;AAKD,MAAM,UAAU,MAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAgC;AACrH,6CAAQC,qCAAA,EAA0B,GAAG,OAAO,aAAU,mBAAkB,KAAU;AACtF,CAAC;AAWD,MAAM,OAAO,MAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AAC5G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,sBAAsB,GAAG,oCAAoC,MAAM,SAAS;AAElF,SAAO,sBAAA,cAACC,oBAAAA,cAAqB,GAAG,YAAY,WAAW,qBAAqB,YAAY,UAAU,IAAA,CAAU;AAChH,CAAC;AA+BM,SAAS,UAAU,OAAuB;AAC7C,QAAM,EAAE,UAAU,IAAI,WAAW,UAAU,IAAI,eAAe,MAAM,GAAG,WAAA,IAAe;AACtF,QAAM,UAAU,MAAM,QAAQ,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAAC;AAEtE,MAAI;AACJ,MAAI;AACJ,MAAI;AAGJ,MAAI,UAAU;AAEV,mBAAe,OAAO,OAAO,WAAW,CAAC,EAAE,IAAI;AAC/C,2BAAuB,CAAC,kBAAkC;AACtD,YAAM,qBAAqB,MAAM,KAAK,aAAa,EAAE,IAAI,MAAM;AAC/D,YAAM,iBAAiB,OAAO,OAAO;AAIrC,UAAI,gBAAgB;AACf,iBAA8C,mBAAmB,CAAC,CAAC;AAAA,MACxE,OAAO;AACF,iBAAoC,kBAAkB;AAAA,MAC3D;AAAA,IACJ;AAAA,EACJ,OAAO;AAEH,0BAAsB,OAAO,cAAc,WAAW,CAAC,SAAS,IAAI;AAAA,EACxE;AAEA,SACI,sBAAA,cAAC,iBAAiB,UAAjB,EAA0B,OAAO,WAC9B,sBAAA;AAAA,IAACC,oBAAAA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,wBAAwB,MAAM,QAAQ,SAAS,KAAK,MAAM,QAAQ,EAAE;AAAA,MACpE,WAAW,GAAG,4BAA4B,MAAM,SAAS;AAAA,MACzD,aAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,kBAAkB;AAAA,IAAA;AAAA,EAAA,CAE1B;AAER;AAEA,UAAU,OAAO;AACjB,UAAU,UAAU;AACpB,UAAU,UAAU;;"}

package/dist/components/Accordion/Accordion.d.ts

@@ -29,7 +29,7 @@ export declare namespace Accordion {
         disabled?: boolean;
         id: string;
     } & React.RefAttributes<HTMLDivElement>>;
-    var Trigger: React.ForwardRefExoticComponent<Omit<ReactAriaButtonProps, "children" | "slot"> & {
+    var Trigger: React.ForwardRefExoticComponent<Omit<ReactAriaButtonProps, "slot" | "children"> & {
         children: React.ReactNode;
     } & React.RefAttributes<HTMLButtonElement>>;
     var Content: React.ForwardRefExoticComponent<ReactAriaDisclosurePanelProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/Accordion.js

@@ -8,7 +8,7 @@ const AccordionContext = React__default.createContext({
 const Trigger = React__default.forwardRef(function AccordionTrigger(props, ref) {
   const { headingLevel: Heading } = React__default.useContext(AccordionContext);
   const className = cn(
-    "w-full inline-flex justify-between items-center align-middle focus-within:yt-focus focus:rounded-sm group",
+    "group inline-flex w-full items-center justify-between align-middle focus-within:yt-focus focus:rounded-sm",
     props.className
   );
   return /* @__PURE__ */ React__default.createElement(Heading, { className: "my-3" }, /* @__PURE__ */ React__default.createElement(Button, { ...props, className, "data-taco": "accordion-trigger", ref, slot: "trigger" }, props.children, /* @__PURE__ */ React__default.createElement(Icon, { name: "chevron-down", "aria-hidden": true, className: "group-aria-expanded:rotate-180" })));

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport {\n    Button as ReactAriaButton,\n    ButtonProps as ReactAriaButtonProps,\n    Disclosure as ReactAriaDisclosure,\n    DisclosurePanel as ReactAriaDisclosurePanel,\n    DisclosureGroup as ReactAriaDisclosureGroup,\n    DisclosureGroupProps as ReactAriaDisclosureGroupProps,\n    DisclosurePanelProps as ReactAriaDisclosurePanelProps,\n    DisclosureProps as ReactAriaDisclosureProps,\n} from 'react-aria-components';\nimport { Icon } from '../Icon/Icon';\nimport { Either } from '../../types';\n\ntype AccordionContext = {\n    headingLevel: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n};\nconst AccordionContext = React.createContext<AccordionContext>({\n    headingLevel: 'h2',\n});\n\n// trigger\nexport type AccordionTriggerProps = Omit<ReactAriaButtonProps, 'children' | 'slot'> & {\n    children: React.ReactNode;\n};\n\nconst Trigger = React.forwardRef(function AccordionTrigger(props: AccordionTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const { headingLevel: Heading } = React.useContext(AccordionContext);\n    const className = cn(\n        'w-full inline-flex justify-between items-center align-middle focus-within:yt-focus focus:rounded-sm group',\n        props.className\n    );\n\n    return (\n        <Heading className=\"my-3\">\n            <ReactAriaButton {...props} className={className} data-taco=\"accordion-trigger\" ref={ref} slot=\"trigger\">\n                {props.children}\n                <Icon name=\"chevron-down\" aria-hidden className=\"group-aria-expanded:rotate-180\" />\n            </ReactAriaButton>\n        </Heading>\n    );\n});\n\n// content\nexport type AccordionContentProps = ReactAriaDisclosurePanelProps;\n\nconst Content = React.forwardRef(function AccordionContent(props: AccordionContentProps, ref: React.Ref<HTMLDivElement>) {\n    return <ReactAriaDisclosurePanel {...props} data-taco=\"accordion-panel\" ref={ref} />;\n});\n\n// item\nexport type AccordionItemProps = Omit<\n    ReactAriaDisclosureProps,\n    'id' | 'isDisabled' | 'onExpandedChange' | 'defaultExpanded' | 'isExpanded'\n> & {\n    disabled?: boolean;\n    id: string;\n};\n\nconst Item = React.forwardRef(function AccordionItem(props: AccordionItemProps, ref: React.Ref<HTMLDivElement>) {\n    const { disabled, ...otherProps } = props;\n    const disclosureClassName = cn('group data-[disabled]:opacity-50', props.className);\n\n    return <ReactAriaDisclosure {...otherProps} className={disclosureClassName} isDisabled={disabled} ref={ref} />;\n});\n\n// accordion\nexport type AccordionBaseProps = Omit<\n    ReactAriaDisclosureGroupProps,\n    'allowsMultipleExpanded' | 'id' | 'isDisabled' | 'expandedKeys' | 'defaultExpandedKeys' | 'onExpandedChange'\n> & {\n    children: React.ReactNode;\n    /** Change what heading element accordion regions will render */\n    as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n    /** Additional classes for Accordion root element */\n    className?: string;\n    disabled?: boolean;\n};\n\nexport type AccordionProps = AccordionBaseProps &\n    Either<\n        // controlled\n        {\n            /* Expanded accordions (controlled) */\n            id: string | string[];\n            /* Handler called when the expanded state changes (controlled) */\n            onChange: ((id: string) => void) | ((id: string[]) => void);\n        },\n        // uncontrolled\n        {\n            /* Expanded accordions (uncontrolled) */\n            defaultId?: string | string[];\n        }\n    >;\n\nexport function Accordion(props: AccordionProps) {\n    const { disabled, id, defaultId, onChange, as: headingLevel = 'h2', ...otherProps } = props;\n    const context = React.useMemo(() => ({ headingLevel }), [headingLevel]);\n\n    let expandedKeys;\n    let handleExpandedChange;\n    let defaultExpandedKeys;\n\n    // controlled or uncontrolled\n    if (onChange) {\n        // string is iteratable, so make sure to wrap it in an array before giving it to DisclosureGroup\n        expandedKeys = typeof id === 'string' ? [id] : id;\n        handleExpandedChange = (expandedItems: Set<React.Key>) => {\n            const expandedItemsArray = Array.from(expandedItems).map(String);\n            const isSingleSelect = typeof id === 'string';\n\n            // We need typecasting to by bypass TS error because the way TS handle function overload\n            // https://github.com/microsoft/TypeScript/issues/14107\n            if (isSingleSelect) {\n                (onChange as (id: string | undefined) => void)(expandedItemsArray[0]);\n            } else {\n                (onChange as (id: string[]) => void)(expandedItemsArray);\n            }\n        };\n    } else {\n        // string is iteratable, so make sure to wrap it in an array before giving it to DisclosureGroup\n        defaultExpandedKeys = typeof defaultId === 'string' ? [defaultId] : defaultId;\n    }\n\n    return (\n        <AccordionContext.Provider value={context}>\n            <ReactAriaDisclosureGroup\n                {...otherProps}\n                allowsMultipleExpanded={Array.isArray(defaultId) || Array.isArray(id)}\n                className={cn('divide-y divide-gray-200', props.className)}\n                data-taco=\"accordion\"\n                defaultExpandedKeys={defaultExpandedKeys}\n                expandedKeys={expandedKeys}\n                isDisabled={disabled}\n                onExpandedChange={handleExpandedChange}\n            />\n        </AccordionContext.Provider>\n    );\n}\n\nAccordion.Item = Item;\nAccordion.Trigger = Trigger;\nAccordion.Content = Content;\n"],"names":["React","ReactAriaButton","ReactAriaDisclosurePanel","ReactAriaDisclosure","ReactAriaDisclosureGroup"],"mappings":";;;;AAkBA,MAAM,mBAAmBA,eAAM,cAAgC;AAAA,EAC3D,cAAc;AAClB,CAAC;AAOD,MAAM,UAAUA,eAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAmC;AACxH,QAAM,EAAE,cAAc,QAAA,IAAYA,eAAM,WAAW,gBAAgB;AACnE,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAGI,SAAAA,+BAAA,cAAC,SAAQ,EAAA,WAAU,OACf,GAAAA,+BAAA,cAACC,UAAiB,GAAG,OAAO,WAAsB,aAAU,qBAAoB,KAAU,MAAK,UAC1F,GAAA,MAAM,UACPD,+BAAA,cAAC,MAAK,EAAA,MAAK,gBAAe,eAAW,MAAC,WAAU,iCAAiC,CAAA,CACrF,CACJ;AAER,CAAC;AAKD,MAAM,UAAUA,eAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAgC;AACrH,sDAAQE,iBAA0B,EAAA,GAAG,OAAO,aAAU,mBAAkB,KAAU;AACtF,CAAC;AAWD,MAAM,OAAOF,eAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AAC5G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,sBAAsB,GAAG,oCAAoC,MAAM,SAAS;AAE3E,SAAAA,+BAAA,cAACG,cAAqB,GAAG,YAAY,WAAW,qBAAqB,YAAY,UAAU,IAAU,CAAA;AAChH,CAAC;AA+BM,SAAS,UAAU,OAAuB;AACvC,QAAA,EAAE,UAAU,IAAI,WAAW,UAAU,IAAI,eAAe,MAAM,GAAG,WAAA,IAAe;AAChF,QAAA,UAAUH,eAAM,QAAQ,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAAC;AAElE,MAAA;AACA,MAAA;AACA,MAAA;AAGJ,MAAI,UAAU;AAEV,mBAAe,OAAO,OAAO,WAAW,CAAC,EAAE,IAAI;AAC/C,2BAAuB,CAAC,kBAAkC;AACtD,YAAM,qBAAqB,MAAM,KAAK,aAAa,EAAE,IAAI,MAAM;AACzD,YAAA,iBAAiB,OAAO,OAAO;AAIrC,UAAI,gBAAgB;AACf,iBAA8C,mBAAmB,CAAC,CAAC;AAAA,MAAA,OACjE;AACF,iBAAoC,kBAAkB;AAAA,MAAA;AAAA,IAE/D;AAAA,EAAA,OACG;AAEH,0BAAsB,OAAO,cAAc,WAAW,CAAC,SAAS,IAAI;AAAA,EAAA;AAGxE,SACKA,+BAAA,cAAA,iBAAiB,UAAjB,EAA0B,OAAO,WAC9BA,+BAAA;AAAA,IAACI;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,wBAAwB,MAAM,QAAQ,SAAS,KAAK,MAAM,QAAQ,EAAE;AAAA,MACpE,WAAW,GAAG,4BAA4B,MAAM,SAAS;AAAA,MACzD,aAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,kBAAkB;AAAA,IAAA;AAAA,EAAA,CAE1B;AAER;AAEA,UAAU,OAAO;AACjB,UAAU,UAAU;AACpB,UAAU,UAAU;"}
+{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport {\n    Button as ReactAriaButton,\n    ButtonProps as ReactAriaButtonProps,\n    Disclosure as ReactAriaDisclosure,\n    DisclosurePanel as ReactAriaDisclosurePanel,\n    DisclosureGroup as ReactAriaDisclosureGroup,\n    DisclosureGroupProps as ReactAriaDisclosureGroupProps,\n    DisclosurePanelProps as ReactAriaDisclosurePanelProps,\n    DisclosureProps as ReactAriaDisclosureProps,\n} from 'react-aria-components';\nimport { Icon } from '../Icon/Icon';\nimport { Either } from '../../types';\n\ntype AccordionContext = {\n    headingLevel: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n};\nconst AccordionContext = React.createContext<AccordionContext>({\n    headingLevel: 'h2',\n});\n\n// trigger\nexport type AccordionTriggerProps = Omit<ReactAriaButtonProps, 'children' | 'slot'> & {\n    children: React.ReactNode;\n};\n\nconst Trigger = React.forwardRef(function AccordionTrigger(props: AccordionTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const { headingLevel: Heading } = React.useContext(AccordionContext);\n    const className = cn(\n        'group inline-flex w-full items-center justify-between align-middle focus-within:yt-focus focus:rounded-sm',\n        props.className\n    );\n\n    return (\n        <Heading className=\"my-3\">\n            <ReactAriaButton {...props} className={className} data-taco=\"accordion-trigger\" ref={ref} slot=\"trigger\">\n                {props.children}\n                <Icon name=\"chevron-down\" aria-hidden className=\"group-aria-expanded:rotate-180\" />\n            </ReactAriaButton>\n        </Heading>\n    );\n});\n\n// content\nexport type AccordionContentProps = ReactAriaDisclosurePanelProps;\n\nconst Content = React.forwardRef(function AccordionContent(props: AccordionContentProps, ref: React.Ref<HTMLDivElement>) {\n    return <ReactAriaDisclosurePanel {...props} data-taco=\"accordion-panel\" ref={ref} />;\n});\n\n// item\nexport type AccordionItemProps = Omit<\n    ReactAriaDisclosureProps,\n    'id' | 'isDisabled' | 'onExpandedChange' | 'defaultExpanded' | 'isExpanded'\n> & {\n    disabled?: boolean;\n    id: string;\n};\n\nconst Item = React.forwardRef(function AccordionItem(props: AccordionItemProps, ref: React.Ref<HTMLDivElement>) {\n    const { disabled, ...otherProps } = props;\n    const disclosureClassName = cn('group data-[disabled]:opacity-50', props.className);\n\n    return <ReactAriaDisclosure {...otherProps} className={disclosureClassName} isDisabled={disabled} ref={ref} />;\n});\n\n// accordion\nexport type AccordionBaseProps = Omit<\n    ReactAriaDisclosureGroupProps,\n    'allowsMultipleExpanded' | 'id' | 'isDisabled' | 'expandedKeys' | 'defaultExpandedKeys' | 'onExpandedChange'\n> & {\n    children: React.ReactNode;\n    /** Change what heading element accordion regions will render */\n    as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n    /** Additional classes for Accordion root element */\n    className?: string;\n    disabled?: boolean;\n};\n\nexport type AccordionProps = AccordionBaseProps &\n    Either<\n        // controlled\n        {\n            /* Expanded accordions (controlled) */\n            id: string | string[];\n            /* Handler called when the expanded state changes (controlled) */\n            onChange: ((id: string) => void) | ((id: string[]) => void);\n        },\n        // uncontrolled\n        {\n            /* Expanded accordions (uncontrolled) */\n            defaultId?: string | string[];\n        }\n    >;\n\nexport function Accordion(props: AccordionProps) {\n    const { disabled, id, defaultId, onChange, as: headingLevel = 'h2', ...otherProps } = props;\n    const context = React.useMemo(() => ({ headingLevel }), [headingLevel]);\n\n    let expandedKeys;\n    let handleExpandedChange;\n    let defaultExpandedKeys;\n\n    // controlled or uncontrolled\n    if (onChange) {\n        // string is iteratable, so make sure to wrap it in an array before giving it to DisclosureGroup\n        expandedKeys = typeof id === 'string' ? [id] : id;\n        handleExpandedChange = (expandedItems: Set<React.Key>) => {\n            const expandedItemsArray = Array.from(expandedItems).map(String);\n            const isSingleSelect = typeof id === 'string';\n\n            // We need typecasting to by bypass TS error because the way TS handle function overload\n            // https://github.com/microsoft/TypeScript/issues/14107\n            if (isSingleSelect) {\n                (onChange as (id: string | undefined) => void)(expandedItemsArray[0]);\n            } else {\n                (onChange as (id: string[]) => void)(expandedItemsArray);\n            }\n        };\n    } else {\n        // string is iteratable, so make sure to wrap it in an array before giving it to DisclosureGroup\n        defaultExpandedKeys = typeof defaultId === 'string' ? [defaultId] : defaultId;\n    }\n\n    return (\n        <AccordionContext.Provider value={context}>\n            <ReactAriaDisclosureGroup\n                {...otherProps}\n                allowsMultipleExpanded={Array.isArray(defaultId) || Array.isArray(id)}\n                className={cn('divide-y divide-gray-200', props.className)}\n                data-taco=\"accordion\"\n                defaultExpandedKeys={defaultExpandedKeys}\n                expandedKeys={expandedKeys}\n                isDisabled={disabled}\n                onExpandedChange={handleExpandedChange}\n            />\n        </AccordionContext.Provider>\n    );\n}\n\nAccordion.Item = Item;\nAccordion.Trigger = Trigger;\nAccordion.Content = Content;\n"],"names":["React","ReactAriaButton","ReactAriaDisclosurePanel","ReactAriaDisclosure","ReactAriaDisclosureGroup"],"mappings":";;;;AAkBA,MAAM,mBAAmBA,eAAM,cAAgC;AAAA,EAC3D,cAAc;AAClB,CAAC;AAOD,MAAM,UAAUA,eAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAmC;AACxH,QAAM,EAAE,cAAc,QAAA,IAAYA,eAAM,WAAW,gBAAgB;AACnE,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,SACIA,+BAAA,cAAC,SAAA,EAAQ,WAAU,OAAA,GACfA,+BAAA,cAACC,UAAiB,GAAG,OAAO,WAAsB,aAAU,qBAAoB,KAAU,MAAK,UAAA,GAC1F,MAAM,UACPD,+BAAA,cAAC,MAAA,EAAK,MAAK,gBAAe,eAAW,MAAC,WAAU,iCAAA,CAAiC,CACrF,CACJ;AAER,CAAC;AAKD,MAAM,UAAUA,eAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAgC;AACrH,sDAAQE,iBAAA,EAA0B,GAAG,OAAO,aAAU,mBAAkB,KAAU;AACtF,CAAC;AAWD,MAAM,OAAOF,eAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AAC5G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,sBAAsB,GAAG,oCAAoC,MAAM,SAAS;AAElF,SAAOA,+BAAA,cAACG,cAAqB,GAAG,YAAY,WAAW,qBAAqB,YAAY,UAAU,IAAA,CAAU;AAChH,CAAC;AA+BM,SAAS,UAAU,OAAuB;AAC7C,QAAM,EAAE,UAAU,IAAI,WAAW,UAAU,IAAI,eAAe,MAAM,GAAG,WAAA,IAAe;AACtF,QAAM,UAAUH,eAAM,QAAQ,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAAC;AAEtE,MAAI;AACJ,MAAI;AACJ,MAAI;AAGJ,MAAI,UAAU;AAEV,mBAAe,OAAO,OAAO,WAAW,CAAC,EAAE,IAAI;AAC/C,2BAAuB,CAAC,kBAAkC;AACtD,YAAM,qBAAqB,MAAM,KAAK,aAAa,EAAE,IAAI,MAAM;AAC/D,YAAM,iBAAiB,OAAO,OAAO;AAIrC,UAAI,gBAAgB;AACf,iBAA8C,mBAAmB,CAAC,CAAC;AAAA,MACxE,OAAO;AACF,iBAAoC,kBAAkB;AAAA,MAC3D;AAAA,IACJ;AAAA,EACJ,OAAO;AAEH,0BAAsB,OAAO,cAAc,WAAW,CAAC,SAAS,IAAI;AAAA,EACxE;AAEA,SACIA,+BAAA,cAAC,iBAAiB,UAAjB,EAA0B,OAAO,WAC9BA,+BAAA;AAAA,IAACI;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,wBAAwB,MAAM,QAAQ,SAAS,KAAK,MAAM,QAAQ,EAAE;AAAA,MACpE,WAAW,GAAG,4BAA4B,MAAM,SAAS;AAAA,MACzD,aAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,kBAAkB;AAAA,IAAA;AAAA,EAAA,CAE1B;AAER;AAEA,UAAU,OAAO;AACjB,UAAU,UAAU;AACpB,UAAU,UAAU;"}

package/dist/components/Actions/Button/Button.cjs

@@ -35,29 +35,25 @@ const Button = React__namespace.forwardRef(function Button2(props, ref) {
     busyMessage,
     disabled,
     icon,
-    iconPlacement,
+    iconPlacement = "start",
     iconOnly,
     children,
     ...nativeProps
   } = props;
   function handleClick(event) {
-    var _a;
     if (busy) {
       event.preventDefault();
       return;
     }
-    (_a = nativeProps.onClick) == null ? void 0 : _a.call(nativeProps, event);
+    nativeProps.onClick?.(event);
   }
   const { texts } = Localization.useLocalization();
-  let resolvedIconPlacement = void 0;
-  if (icon) {
-    resolvedIconPlacement = iconPlacement ? iconPlacement : "start";
-  }
+  const resolvedIconPlacement = icon ? iconPlacement : "none";
   const buttonClassName = cn(
     utils.SHARED_BUTTON_CLASSNAMES,
-    utils.getAppearanceClasses(variant, purpose),
+    utils.APPEARANCE_CLASSNAME[purpose][variant],
     utils.sizeClasses[size],
-    !iconOnly && utils.setPaddingClasses(size, resolvedIconPlacement),
+    !iconOnly && utils.PADDING_CLASSNAME[resolvedIconPlacement][size],
     { "aspect-square p-0": iconOnly }
   );
   return /* @__PURE__ */ React__namespace.createElement(

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

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Actions/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { useLocalization } from '../../Provider/Localization';\n\nimport {\n    ButtonSize,\n    ButtonPurpose,\n    ButtonVariant,\n    SHARED_BUTTON_CLASSNAMES,\n    sizeClasses,\n    getAppearanceClasses,\n    setPaddingClasses,\n    setIconSizeClass,\n} from './../utils';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Spinner } from '../../Spinner/Spinner';\n\nexport type ButtonTexts = {\n    /* Message used for button when it is in a busy state */\n    busyMessage: string;\n};\n\n/**\n * Button Text: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n */\nexport type ButtonChildren = string | React.ReactElement;\n\ntype IconProps =\n    | {\n          /* Which icon to display */\n          icon: IconName;\n          /* Determines if icon is placed before or after text label — defaults to \"start\" */\n          iconPlacement?: 'start' | 'end';\n          iconOnly?: never;\n      }\n    | {\n          /* Which icon to display */\n          icon: IconName;\n          /* Renders only the icon; children becomes the accessible label */\n          iconOnly: true;\n          iconPlacement?: never;\n      }\n    | {\n          icon?: never;\n          iconPlacement?: never;\n          iconOnly?: never;\n      };\n\nexport type ButtonIdleProps = ButtonCommonProps & {\n    /* Adds loading indicator to button */\n    busy?: boolean;\n    /* Conveys message to screen readers when busy is enabled — defaults to \"loading\" */\n    busyMessage?: string;\n    disabled?: boolean;\n};\n\nexport type ButtonBusyProps = ButtonCommonProps & {\n    busy: true;\n    /* Conveys message to screen readers when busy is enabled — defaults to \"loading\" */\n    busyMessage?: string;\n    disabled?: never;\n};\n\ntype ButtonCommonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className' | 'style' | 'disabled'> &\n    IconProps & {\n        /* Purpose: regular (default) or destructive */\n        purpose?: ButtonPurpose;\n        /** Variant determines primary, secondary or tertiary use. Secondary will be default */\n        variant?: ButtonVariant;\n        /* Choose between small, medium (default) and large */\n        size?: ButtonSize;\n        /* Is it for submitting, resetting a form or an in page action. Button is default */\n        type?: 'button' | 'submit' | 'reset';\n        /** The text content of the Button */\n        children: ButtonChildren;\n    };\n\nexport type ButtonProps = ButtonIdleProps | ButtonBusyProps;\n\nexport const Button = React.forwardRef(function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {\n    const {\n        // Destructure className and style props to prevent them from being spread onto the button DOM element\n        className: _className,\n        style: _style,\n        purpose = 'regular',\n        variant = 'secondary',\n        size = 'md',\n        busy,\n        busyMessage,\n        disabled,\n        icon,\n        iconPlacement,\n        iconOnly,\n        children,\n        ...nativeProps\n    } = props as ButtonProps & { className?: never; style?: never };\n\n    function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n        if (busy) {\n            event.preventDefault();\n            return;\n        }\n        nativeProps.onClick?.(event);\n    }\n\n    const { texts } = useLocalization();\n\n    let resolvedIconPlacement = undefined;\n    if (icon) {\n        resolvedIconPlacement = iconPlacement ? iconPlacement : 'start';\n    }\n\n    const buttonClassName = cn(\n        SHARED_BUTTON_CLASSNAMES,\n        getAppearanceClasses(variant, purpose),\n        sizeClasses[size],\n        !iconOnly && setPaddingClasses(size, resolvedIconPlacement),\n        { 'aspect-square p-0': iconOnly }\n    );\n\n    return (\n        <button\n            type={nativeProps.type || 'button'}\n            {...nativeProps}\n            ref={ref}\n            className={buttonClassName}\n            /* Use aria-disabled and a separate aria-live element because aria-busy isn't well supported and doesn't convey state */\n            aria-disabled={busy}\n            onClick={handleClick}\n            disabled={disabled}\n            data-taco=\"button\">\n            {icon && (\n                <span\n                    className={cn('leading-none', {\n                        invisible: busy,\n                        'order-1': resolvedIconPlacement === 'start' && !iconOnly,\n                        'order-3': resolvedIconPlacement === 'end' && !iconOnly,\n                    })}\n                    aria-hidden=\"true\"\n                    data-taco=\"button-icon\">\n                    <Icon name={icon} className={cn(setIconSizeClass[size])} />\n                </span>\n            )}\n\n            {iconOnly ? (\n                <span className=\"sr-only\" data-taco=\"button-text\">\n                    {children}\n                </span>\n            ) : (\n                <span className={cn('order-2 leading-none', { invisible: busy })} data-taco=\"button-text\">\n                    {children}\n                </span>\n            )}\n\n            {/** This pattern is inspired by React ARIA's approach for a busy/pending button:\n                https://react-aria.adobe.com/Button#pending */}\n            <span\n                className={cn('absolute inset-x-3 flex items-center justify-center', { invisible: !busy })}\n                role=\"progressbar\"\n                aria-label={busyMessage || texts.button.busyMessage}\n                data-taco=\"button-spinner\">\n                <Spinner className=\"h-4 w-4\" aria-hidden=\"true\" />\n            </span>\n        </button>\n    );\n});\n"],"names":["React","Button","useLocalization","SHARED_BUTTON_CLASSNAMES","getAppearanceClasses","sizeClasses","setPaddingClasses","Icon","setIconSizeClass","Spinner"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiFO,MAAM,SAASA,iBAAM,WAAW,SAASC,QAAO,OAAoB,KAAmC;AACpG,QAAA;AAAA;AAAA,IAEF,WAAW;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEJ,WAAS,YAAY,OAA4C;;AAC7D,QAAI,MAAM;AACN,YAAM,eAAe;AACrB;AAAA,IAAA;AAEJ,sBAAY,YAAZ,qCAAsB;AAAA,EAAK;AAGzB,QAAA,EAAE,MAAM,IAAIC,6BAAgB;AAElC,MAAI,wBAAwB;AAC5B,MAAI,MAAM;AACN,4BAAwB,gBAAgB,gBAAgB;AAAA,EAAA;AAG5D,QAAM,kBAAkB;AAAA,IACpBC,MAAA;AAAA,IACAC,MAAA,qBAAqB,SAAS,OAAO;AAAA,IACrCC,MAAAA,YAAY,IAAI;AAAA,IAChB,CAAC,YAAYC,MAAAA,kBAAkB,MAAM,qBAAqB;AAAA,IAC1D,EAAE,qBAAqB,SAAS;AAAA,EACpC;AAGI,SAAAN,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAM,YAAY,QAAQ;AAAA,MACzB,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MAEX,iBAAe;AAAA,MACf,SAAS;AAAA,MACT;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACT,QACGA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,gBAAgB;AAAA,UAC1B,WAAW;AAAA,UACX,WAAW,0BAA0B,WAAW,CAAC;AAAA,UACjD,WAAW,0BAA0B,SAAS,CAAC;AAAA,QAAA,CAClD;AAAA,QACD,eAAY;AAAA,QACZ,aAAU;AAAA,MAAA;AAAA,MACVA,iCAAA,cAACO,aAAK,MAAM,MAAM,WAAW,GAAGC,MAAAA,iBAAiB,IAAI,CAAC,EAAG,CAAA;AAAA,IAC7D;AAAA,IAGH,0DACI,QAAK,EAAA,WAAU,WAAU,aAAU,iBAC/B,QACL,IAEAR,iCAAA,cAAC,UAAK,WAAW,GAAG,wBAAwB,EAAE,WAAW,MAAM,GAAG,aAAU,cAAA,GACvE,QACL;AAAA,IAKJA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,uDAAuD,EAAE,WAAW,CAAC,MAAM;AAAA,QACzF,MAAK;AAAA,QACL,cAAY,eAAe,MAAM,OAAO;AAAA,QACxC,aAAU;AAAA,MAAA;AAAA,MACTA,iCAAA,cAAAS,iBAAA,EAAQ,WAAU,WAAU,eAAY,OAAO,CAAA;AAAA,IAAA;AAAA,EAExD;AAER,CAAC;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Actions/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { useLocalization } from '../../Provider/Localization';\n\nimport {\n    ButtonSize,\n    ButtonPurpose,\n    ButtonVariant,\n    SHARED_BUTTON_CLASSNAMES,\n    sizeClasses,\n    APPEARANCE_CLASSNAME,\n    PADDING_CLASSNAME,\n    setIconSizeClass,\n} from './../utils';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Spinner } from '../../Spinner/Spinner';\n\nexport type ButtonTexts = {\n    /* Message used for button when it is in a busy state */\n    busyMessage: string;\n};\n\n/**\n * Button Text: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n */\nexport type ButtonChildren = string | React.ReactElement;\n\ntype IconProps =\n    | {\n          /* Which icon to display */\n          icon: IconName;\n          /* Determines if icon is placed before or after text label — defaults to \"start\" */\n          iconPlacement?: 'start' | 'end';\n          iconOnly?: never;\n      }\n    | {\n          /* Which icon to display */\n          icon: IconName;\n          /* Renders only the icon; children becomes the accessible label */\n          iconOnly: true;\n          iconPlacement?: never;\n      }\n    | {\n          icon?: never;\n          iconPlacement?: never;\n          iconOnly?: never;\n      };\n\nexport type ButtonIdleProps = ButtonCommonProps & {\n    /* Adds loading indicator to button */\n    busy?: boolean;\n    /* Conveys message to screen readers when busy is enabled — defaults to \"loading\" */\n    busyMessage?: string;\n    disabled?: boolean;\n};\n\nexport type ButtonBusyProps = ButtonCommonProps & {\n    busy: true;\n    /* Conveys message to screen readers when busy is enabled — defaults to \"loading\" */\n    busyMessage?: string;\n    disabled?: never;\n};\n\ntype ButtonCommonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className' | 'style' | 'disabled'> &\n    IconProps & {\n        /* Purpose: regular (default) or destructive */\n        purpose?: ButtonPurpose;\n        /** Variant determines primary, secondary or tertiary use. Secondary will be default */\n        variant?: ButtonVariant;\n        /* Choose between small, medium (default) and large */\n        size?: ButtonSize;\n        /* Is it for submitting, resetting a form or an in page action. Button is default */\n        type?: 'button' | 'submit' | 'reset';\n        /** The text content of the Button */\n        children: ButtonChildren;\n    };\n\nexport type ButtonProps = ButtonIdleProps | ButtonBusyProps;\n\nexport const Button = React.forwardRef(function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {\n    const {\n        // Destructure className and style props to prevent them from being spread onto the button DOM element\n        className: _className,\n        style: _style,\n        purpose = 'regular',\n        variant = 'secondary',\n        size = 'md',\n        busy,\n        busyMessage,\n        disabled,\n        icon,\n        iconPlacement = 'start',\n        iconOnly,\n        children,\n        ...nativeProps\n    } = props as ButtonProps & { className?: never; style?: never };\n\n    function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n        if (busy) {\n            event.preventDefault();\n            return;\n        }\n        nativeProps.onClick?.(event);\n    }\n\n    const { texts } = useLocalization();\n\n    const resolvedIconPlacement = icon ? iconPlacement : 'none';\n\n    const buttonClassName = cn(\n        SHARED_BUTTON_CLASSNAMES,\n        APPEARANCE_CLASSNAME[purpose][variant],\n        sizeClasses[size],\n        !iconOnly && PADDING_CLASSNAME[resolvedIconPlacement][size],\n        { 'aspect-square p-0': iconOnly }\n    );\n\n    return (\n        <button\n            type={nativeProps.type || 'button'}\n            {...nativeProps}\n            ref={ref}\n            className={buttonClassName}\n            /* Use aria-disabled and a separate aria-live element because aria-busy isn't well supported and doesn't convey state */\n            aria-disabled={busy}\n            onClick={handleClick}\n            disabled={disabled}\n            data-taco=\"button\">\n            {icon && (\n                <span\n                    className={cn('leading-none', {\n                        invisible: busy,\n                        'order-1': resolvedIconPlacement === 'start' && !iconOnly,\n                        'order-3': resolvedIconPlacement === 'end' && !iconOnly,\n                    })}\n                    aria-hidden=\"true\"\n                    data-taco=\"button-icon\">\n                    <Icon name={icon} className={cn(setIconSizeClass[size])} />\n                </span>\n            )}\n\n            {iconOnly ? (\n                <span className=\"sr-only\" data-taco=\"button-text\">\n                    {children}\n                </span>\n            ) : (\n                <span className={cn('order-2 leading-none', { invisible: busy })} data-taco=\"button-text\">\n                    {children}\n                </span>\n            )}\n\n            {/** This pattern is inspired by React ARIA's approach for a busy/pending button:\n                https://react-aria.adobe.com/Button#pending */}\n            <span\n                className={cn('absolute inset-x-3 flex items-center justify-center', { invisible: !busy })}\n                role=\"progressbar\"\n                aria-label={busyMessage || texts.button.busyMessage}\n                data-taco=\"button-spinner\">\n                <Spinner className=\"h-4 w-4\" aria-hidden=\"true\" />\n            </span>\n        </button>\n    );\n});\n"],"names":["React","Button","useLocalization","SHARED_BUTTON_CLASSNAMES","APPEARANCE_CLASSNAME","sizeClasses","PADDING_CLASSNAME","Icon","setIconSizeClass","Spinner"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiFO,MAAM,SAASA,iBAAM,WAAW,SAASC,QAAO,OAAoB,KAAmC;AAC1G,QAAM;AAAA;AAAA,IAEF,WAAW;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEJ,WAAS,YAAY,OAA4C;AAC7D,QAAI,MAAM;AACN,YAAM,eAAA;AACN;AAAA,IACJ;AACA,gBAAY,UAAU,KAAK;AAAA,EAC/B;AAEA,QAAM,EAAE,MAAA,IAAUC,6BAAA;AAElB,QAAM,wBAAwB,OAAO,gBAAgB;AAErD,QAAM,kBAAkB;AAAA,IACpBC,MAAAA;AAAAA,IACAC,2BAAqB,OAAO,EAAE,OAAO;AAAA,IACrCC,MAAAA,YAAY,IAAI;AAAA,IAChB,CAAC,YAAYC,MAAAA,kBAAkB,qBAAqB,EAAE,IAAI;AAAA,IAC1D,EAAE,qBAAqB,SAAA;AAAA,EAAS;AAGpC,SACIN,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAM,YAAY,QAAQ;AAAA,MACzB,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MAEX,iBAAe;AAAA,MACf,SAAS;AAAA,MACT;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACT,QACGA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,gBAAgB;AAAA,UAC1B,WAAW;AAAA,UACX,WAAW,0BAA0B,WAAW,CAAC;AAAA,UACjD,WAAW,0BAA0B,SAAS,CAAC;AAAA,QAAA,CAClD;AAAA,QACD,eAAY;AAAA,QACZ,aAAU;AAAA,MAAA;AAAA,MACVA,iCAAA,cAACO,aAAK,MAAM,MAAM,WAAW,GAAGC,MAAAA,iBAAiB,IAAI,CAAC,EAAA,CAAG;AAAA,IAAA;AAAA,IAIhE,0DACI,QAAA,EAAK,WAAU,WAAU,aAAU,iBAC/B,QACL,IAEAR,iCAAA,cAAC,UAAK,WAAW,GAAG,wBAAwB,EAAE,WAAW,MAAM,GAAG,aAAU,cAAA,GACvE,QACL;AAAA,IAKJA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,uDAAuD,EAAE,WAAW,CAAC,MAAM;AAAA,QACzF,MAAK;AAAA,QACL,cAAY,eAAe,MAAM,OAAO;AAAA,QACxC,aAAU;AAAA,MAAA;AAAA,MACVA,iCAAA,cAACS,iBAAA,EAAQ,WAAU,WAAU,eAAY,OAAA,CAAO;AAAA,IAAA;AAAA,EACpD;AAGZ,CAAC;;"}

package/dist/components/Actions/Button/Button.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import cn from "clsx";
 import { useLocalization } from "../../Provider/Localization.js";
-import { SHARED_BUTTON_CLASSNAMES, getAppearanceClasses, sizeClasses, setPaddingClasses, setIconSizeClass } from "../utils.js";
+import { SHARED_BUTTON_CLASSNAMES, APPEARANCE_CLASSNAME, sizeClasses, PADDING_CLASSNAME, setIconSizeClass } from "../utils.js";
 import { Icon } from "../../Icon/Icon.js";
 import { Spinner } from "../../Spinner/Spinner.js";
 const Button = React.forwardRef(function Button2(props, ref) {
@@ -16,29 +16,25 @@ const Button = React.forwardRef(function Button2(props, ref) {
     busyMessage,
     disabled,
     icon,
-    iconPlacement,
+    iconPlacement = "start",
     iconOnly,
     children,
     ...nativeProps
   } = props;
   function handleClick(event) {
-    var _a;
     if (busy) {
       event.preventDefault();
       return;
     }
-    (_a = nativeProps.onClick) == null ? void 0 : _a.call(nativeProps, event);
+    nativeProps.onClick?.(event);
   }
   const { texts } = useLocalization();
-  let resolvedIconPlacement = void 0;
-  if (icon) {
-    resolvedIconPlacement = iconPlacement ? iconPlacement : "start";
-  }
+  const resolvedIconPlacement = icon ? iconPlacement : "none";
   const buttonClassName = cn(
     SHARED_BUTTON_CLASSNAMES,
-    getAppearanceClasses(variant, purpose),
+    APPEARANCE_CLASSNAME[purpose][variant],
     sizeClasses[size],
-    !iconOnly && setPaddingClasses(size, resolvedIconPlacement),
+    !iconOnly && PADDING_CLASSNAME[resolvedIconPlacement][size],
     { "aspect-square p-0": iconOnly }
   );
   return /* @__PURE__ */ React.createElement(

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/Actions/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { useLocalization } from '../../Provider/Localization';\n\nimport {\n    ButtonSize,\n    ButtonPurpose,\n    ButtonVariant,\n    SHARED_BUTTON_CLASSNAMES,\n    sizeClasses,\n    getAppearanceClasses,\n    setPaddingClasses,\n    setIconSizeClass,\n} from './../utils';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Spinner } from '../../Spinner/Spinner';\n\nexport type ButtonTexts = {\n    /* Message used for button when it is in a busy state */\n    busyMessage: string;\n};\n\n/**\n * Button Text: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n */\nexport type ButtonChildren = string | React.ReactElement;\n\ntype IconProps =\n    | {\n          /* Which icon to display */\n          icon: IconName;\n          /* Determines if icon is placed before or after text label — defaults to \"start\" */\n          iconPlacement?: 'start' | 'end';\n          iconOnly?: never;\n      }\n    | {\n          /* Which icon to display */\n          icon: IconName;\n          /* Renders only the icon; children becomes the accessible label */\n          iconOnly: true;\n          iconPlacement?: never;\n      }\n    | {\n          icon?: never;\n          iconPlacement?: never;\n          iconOnly?: never;\n      };\n\nexport type ButtonIdleProps = ButtonCommonProps & {\n    /* Adds loading indicator to button */\n    busy?: boolean;\n    /* Conveys message to screen readers when busy is enabled — defaults to \"loading\" */\n    busyMessage?: string;\n    disabled?: boolean;\n};\n\nexport type ButtonBusyProps = ButtonCommonProps & {\n    busy: true;\n    /* Conveys message to screen readers when busy is enabled — defaults to \"loading\" */\n    busyMessage?: string;\n    disabled?: never;\n};\n\ntype ButtonCommonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className' | 'style' | 'disabled'> &\n    IconProps & {\n        /* Purpose: regular (default) or destructive */\n        purpose?: ButtonPurpose;\n        /** Variant determines primary, secondary or tertiary use. Secondary will be default */\n        variant?: ButtonVariant;\n        /* Choose between small, medium (default) and large */\n        size?: ButtonSize;\n        /* Is it for submitting, resetting a form or an in page action. Button is default */\n        type?: 'button' | 'submit' | 'reset';\n        /** The text content of the Button */\n        children: ButtonChildren;\n    };\n\nexport type ButtonProps = ButtonIdleProps | ButtonBusyProps;\n\nexport const Button = React.forwardRef(function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {\n    const {\n        // Destructure className and style props to prevent them from being spread onto the button DOM element\n        className: _className,\n        style: _style,\n        purpose = 'regular',\n        variant = 'secondary',\n        size = 'md',\n        busy,\n        busyMessage,\n        disabled,\n        icon,\n        iconPlacement,\n        iconOnly,\n        children,\n        ...nativeProps\n    } = props as ButtonProps & { className?: never; style?: never };\n\n    function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n        if (busy) {\n            event.preventDefault();\n            return;\n        }\n        nativeProps.onClick?.(event);\n    }\n\n    const { texts } = useLocalization();\n\n    let resolvedIconPlacement = undefined;\n    if (icon) {\n        resolvedIconPlacement = iconPlacement ? iconPlacement : 'start';\n    }\n\n    const buttonClassName = cn(\n        SHARED_BUTTON_CLASSNAMES,\n        getAppearanceClasses(variant, purpose),\n        sizeClasses[size],\n        !iconOnly && setPaddingClasses(size, resolvedIconPlacement),\n        { 'aspect-square p-0': iconOnly }\n    );\n\n    return (\n        <button\n            type={nativeProps.type || 'button'}\n            {...nativeProps}\n            ref={ref}\n            className={buttonClassName}\n            /* Use aria-disabled and a separate aria-live element because aria-busy isn't well supported and doesn't convey state */\n            aria-disabled={busy}\n            onClick={handleClick}\n            disabled={disabled}\n            data-taco=\"button\">\n            {icon && (\n                <span\n                    className={cn('leading-none', {\n                        invisible: busy,\n                        'order-1': resolvedIconPlacement === 'start' && !iconOnly,\n                        'order-3': resolvedIconPlacement === 'end' && !iconOnly,\n                    })}\n                    aria-hidden=\"true\"\n                    data-taco=\"button-icon\">\n                    <Icon name={icon} className={cn(setIconSizeClass[size])} />\n                </span>\n            )}\n\n            {iconOnly ? (\n                <span className=\"sr-only\" data-taco=\"button-text\">\n                    {children}\n                </span>\n            ) : (\n                <span className={cn('order-2 leading-none', { invisible: busy })} data-taco=\"button-text\">\n                    {children}\n                </span>\n            )}\n\n            {/** This pattern is inspired by React ARIA's approach for a busy/pending button:\n                https://react-aria.adobe.com/Button#pending */}\n            <span\n                className={cn('absolute inset-x-3 flex items-center justify-center', { invisible: !busy })}\n                role=\"progressbar\"\n                aria-label={busyMessage || texts.button.busyMessage}\n                data-taco=\"button-spinner\">\n                <Spinner className=\"h-4 w-4\" aria-hidden=\"true\" />\n            </span>\n        </button>\n    );\n});\n"],"names":["Button"],"mappings":";;;;;;AAiFO,MAAM,SAAS,MAAM,WAAW,SAASA,QAAO,OAAoB,KAAmC;AACpG,QAAA;AAAA;AAAA,IAEF,WAAW;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEJ,WAAS,YAAY,OAA4C;;AAC7D,QAAI,MAAM;AACN,YAAM,eAAe;AACrB;AAAA,IAAA;AAEJ,sBAAY,YAAZ,qCAAsB;AAAA,EAAK;AAGzB,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAElC,MAAI,wBAAwB;AAC5B,MAAI,MAAM;AACN,4BAAwB,gBAAgB,gBAAgB;AAAA,EAAA;AAG5D,QAAM,kBAAkB;AAAA,IACpB;AAAA,IACA,qBAAqB,SAAS,OAAO;AAAA,IACrC,YAAY,IAAI;AAAA,IAChB,CAAC,YAAY,kBAAkB,MAAM,qBAAqB;AAAA,IAC1D,EAAE,qBAAqB,SAAS;AAAA,EACpC;AAGI,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAM,YAAY,QAAQ;AAAA,MACzB,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MAEX,iBAAe;AAAA,MACf,SAAS;AAAA,MACT;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACT,QACG,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,gBAAgB;AAAA,UAC1B,WAAW;AAAA,UACX,WAAW,0BAA0B,WAAW,CAAC;AAAA,UACjD,WAAW,0BAA0B,SAAS,CAAC;AAAA,QAAA,CAClD;AAAA,QACD,eAAY;AAAA,QACZ,aAAU;AAAA,MAAA;AAAA,MACV,sBAAA,cAAC,QAAK,MAAM,MAAM,WAAW,GAAG,iBAAiB,IAAI,CAAC,EAAG,CAAA;AAAA,IAC7D;AAAA,IAGH,+CACI,QAAK,EAAA,WAAU,WAAU,aAAU,iBAC/B,QACL,IAEA,sBAAA,cAAC,UAAK,WAAW,GAAG,wBAAwB,EAAE,WAAW,MAAM,GAAG,aAAU,cAAA,GACvE,QACL;AAAA,IAKJ,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,uDAAuD,EAAE,WAAW,CAAC,MAAM;AAAA,QACzF,MAAK;AAAA,QACL,cAAY,eAAe,MAAM,OAAO;AAAA,QACxC,aAAU;AAAA,MAAA;AAAA,MACT,sBAAA,cAAA,SAAA,EAAQ,WAAU,WAAU,eAAY,OAAO,CAAA;AAAA,IAAA;AAAA,EAExD;AAER,CAAC;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Actions/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { useLocalization } from '../../Provider/Localization';\n\nimport {\n    ButtonSize,\n    ButtonPurpose,\n    ButtonVariant,\n    SHARED_BUTTON_CLASSNAMES,\n    sizeClasses,\n    APPEARANCE_CLASSNAME,\n    PADDING_CLASSNAME,\n    setIconSizeClass,\n} from './../utils';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Spinner } from '../../Spinner/Spinner';\n\nexport type ButtonTexts = {\n    /* Message used for button when it is in a busy state */\n    busyMessage: string;\n};\n\n/**\n * Button Text: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n */\nexport type ButtonChildren = string | React.ReactElement;\n\ntype IconProps =\n    | {\n          /* Which icon to display */\n          icon: IconName;\n          /* Determines if icon is placed before or after text label — defaults to \"start\" */\n          iconPlacement?: 'start' | 'end';\n          iconOnly?: never;\n      }\n    | {\n          /* Which icon to display */\n          icon: IconName;\n          /* Renders only the icon; children becomes the accessible label */\n          iconOnly: true;\n          iconPlacement?: never;\n      }\n    | {\n          icon?: never;\n          iconPlacement?: never;\n          iconOnly?: never;\n      };\n\nexport type ButtonIdleProps = ButtonCommonProps & {\n    /* Adds loading indicator to button */\n    busy?: boolean;\n    /* Conveys message to screen readers when busy is enabled — defaults to \"loading\" */\n    busyMessage?: string;\n    disabled?: boolean;\n};\n\nexport type ButtonBusyProps = ButtonCommonProps & {\n    busy: true;\n    /* Conveys message to screen readers when busy is enabled — defaults to \"loading\" */\n    busyMessage?: string;\n    disabled?: never;\n};\n\ntype ButtonCommonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className' | 'style' | 'disabled'> &\n    IconProps & {\n        /* Purpose: regular (default) or destructive */\n        purpose?: ButtonPurpose;\n        /** Variant determines primary, secondary or tertiary use. Secondary will be default */\n        variant?: ButtonVariant;\n        /* Choose between small, medium (default) and large */\n        size?: ButtonSize;\n        /* Is it for submitting, resetting a form or an in page action. Button is default */\n        type?: 'button' | 'submit' | 'reset';\n        /** The text content of the Button */\n        children: ButtonChildren;\n    };\n\nexport type ButtonProps = ButtonIdleProps | ButtonBusyProps;\n\nexport const Button = React.forwardRef(function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {\n    const {\n        // Destructure className and style props to prevent them from being spread onto the button DOM element\n        className: _className,\n        style: _style,\n        purpose = 'regular',\n        variant = 'secondary',\n        size = 'md',\n        busy,\n        busyMessage,\n        disabled,\n        icon,\n        iconPlacement = 'start',\n        iconOnly,\n        children,\n        ...nativeProps\n    } = props as ButtonProps & { className?: never; style?: never };\n\n    function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n        if (busy) {\n            event.preventDefault();\n            return;\n        }\n        nativeProps.onClick?.(event);\n    }\n\n    const { texts } = useLocalization();\n\n    const resolvedIconPlacement = icon ? iconPlacement : 'none';\n\n    const buttonClassName = cn(\n        SHARED_BUTTON_CLASSNAMES,\n        APPEARANCE_CLASSNAME[purpose][variant],\n        sizeClasses[size],\n        !iconOnly && PADDING_CLASSNAME[resolvedIconPlacement][size],\n        { 'aspect-square p-0': iconOnly }\n    );\n\n    return (\n        <button\n            type={nativeProps.type || 'button'}\n            {...nativeProps}\n            ref={ref}\n            className={buttonClassName}\n            /* Use aria-disabled and a separate aria-live element because aria-busy isn't well supported and doesn't convey state */\n            aria-disabled={busy}\n            onClick={handleClick}\n            disabled={disabled}\n            data-taco=\"button\">\n            {icon && (\n                <span\n                    className={cn('leading-none', {\n                        invisible: busy,\n                        'order-1': resolvedIconPlacement === 'start' && !iconOnly,\n                        'order-3': resolvedIconPlacement === 'end' && !iconOnly,\n                    })}\n                    aria-hidden=\"true\"\n                    data-taco=\"button-icon\">\n                    <Icon name={icon} className={cn(setIconSizeClass[size])} />\n                </span>\n            )}\n\n            {iconOnly ? (\n                <span className=\"sr-only\" data-taco=\"button-text\">\n                    {children}\n                </span>\n            ) : (\n                <span className={cn('order-2 leading-none', { invisible: busy })} data-taco=\"button-text\">\n                    {children}\n                </span>\n            )}\n\n            {/** This pattern is inspired by React ARIA's approach for a busy/pending button:\n                https://react-aria.adobe.com/Button#pending */}\n            <span\n                className={cn('absolute inset-x-3 flex items-center justify-center', { invisible: !busy })}\n                role=\"progressbar\"\n                aria-label={busyMessage || texts.button.busyMessage}\n                data-taco=\"button-spinner\">\n                <Spinner className=\"h-4 w-4\" aria-hidden=\"true\" />\n            </span>\n        </button>\n    );\n});\n"],"names":["Button"],"mappings":";;;;;;AAiFO,MAAM,SAAS,MAAM,WAAW,SAASA,QAAO,OAAoB,KAAmC;AAC1G,QAAM;AAAA;AAAA,IAEF,WAAW;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEJ,WAAS,YAAY,OAA4C;AAC7D,QAAI,MAAM;AACN,YAAM,eAAA;AACN;AAAA,IACJ;AACA,gBAAY,UAAU,KAAK;AAAA,EAC/B;AAEA,QAAM,EAAE,MAAA,IAAU,gBAAA;AAElB,QAAM,wBAAwB,OAAO,gBAAgB;AAErD,QAAM,kBAAkB;AAAA,IACpB;AAAA,IACA,qBAAqB,OAAO,EAAE,OAAO;AAAA,IACrC,YAAY,IAAI;AAAA,IAChB,CAAC,YAAY,kBAAkB,qBAAqB,EAAE,IAAI;AAAA,IAC1D,EAAE,qBAAqB,SAAA;AAAA,EAAS;AAGpC,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAM,YAAY,QAAQ;AAAA,MACzB,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MAEX,iBAAe;AAAA,MACf,SAAS;AAAA,MACT;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACT,QACG,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,gBAAgB;AAAA,UAC1B,WAAW;AAAA,UACX,WAAW,0BAA0B,WAAW,CAAC;AAAA,UACjD,WAAW,0BAA0B,SAAS,CAAC;AAAA,QAAA,CAClD;AAAA,QACD,eAAY;AAAA,QACZ,aAAU;AAAA,MAAA;AAAA,MACV,sBAAA,cAAC,QAAK,MAAM,MAAM,WAAW,GAAG,iBAAiB,IAAI,CAAC,EAAA,CAAG;AAAA,IAAA;AAAA,IAIhE,+CACI,QAAA,EAAK,WAAU,WAAU,aAAU,iBAC/B,QACL,IAEA,sBAAA,cAAC,UAAK,WAAW,GAAG,wBAAwB,EAAE,WAAW,MAAM,GAAG,aAAU,cAAA,GACvE,QACL;AAAA,IAKJ,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,uDAAuD,EAAE,WAAW,CAAC,MAAM;AAAA,QACzF,MAAK;AAAA,QACL,cAAY,eAAe,MAAM,OAAO;AAAA,QACxC,aAAU;AAAA,MAAA;AAAA,MACV,sBAAA,cAAC,SAAA,EAAQ,WAAU,WAAU,eAAY,OAAA,CAAO;AAAA,IAAA;AAAA,EACpD;AAGZ,CAAC;"}

package/dist/components/Actions/Link/Link.cjs

@@ -35,7 +35,7 @@ function LinkInner(props, ref) {
     size ? [typography.TYPOGRAPHY_TEXT_SIZE_CLASSES[size], typography.TYPOGRAPHY_LINE_HEIGHT_CLASSES[size]] : void 0,
     /** set underline thickness depending on size of Link */
     size === "sm" ? "decoration-1" : "decoration-2",
-    "underline cursor-pointer focus:outline-transparent focus-visible:yt-focus text-blue-700 focus-visible:text-blue-700 hover:text-blue-900 focus-visible:hover:text-blue-900 active:text-blue-900 focus-visible:active:text-blue-900 visited:text-blue-700 focus-visible:visited:text-blue-700 underline-offset-2 ",
+    "cursor-pointer text-blue-700 underline underline-offset-2 visited:text-blue-700 hover:text-blue-900 focus:outline-transparent focus-visible:text-blue-700 focus-visible:yt-focus focus-visible:visited:text-blue-700 focus-visible:hover:text-blue-900 active:text-blue-900 focus-visible:active:text-blue-900",
     {
       "font-bold": bold
     }

package/dist/components/Actions/Link/Link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.cjs","sources":["../../../../src/components/Actions/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { TYPOGRAPHY_LINE_HEIGHT_CLASSES, TYPOGRAPHY_TEXT_SIZE_CLASSES } from '../../../utils/typography';\n\n/**\n * Link label: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n * (TypeScript cannot enforce “component returns string” vs JSX; avoid non-text elements.)\n */\nexport type LinkChildren = string | React.ReactElement | null;\n\n/** Props specific to our Link component */\ntype LinkOwnProps<T extends React.ElementType = 'a'> = {\n    /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */\n    as?: T;\n    /** Set specific size that matches our text sizes. If it's not set, it inherits the parent size */\n    size?: 'sm' | 'md' | 'lg';\n    /** If true, the Link will be rendered in bold */\n    bold?: boolean;\n    /** The content of the Link */\n    children?: LinkChildren;\n};\n\n/**\n * LinkProps combines our own props with the props of the underlying element (via `as`).\n * This allows the component to accept props like `to` for React Router or `href` for native anchors.\n * Note: `className` and `style` are explicitly excluded.\n */\nexport type LinkProps<T extends React.ElementType = 'a'> = LinkOwnProps<T> &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T> | 'className' | 'style'>;\n\nfunction LinkInner<T extends React.ElementType = 'a'>(\n    props: LinkProps<T> & { ref?: React.Ref<unknown> },\n    ref: React.Ref<unknown>\n) {\n    // Destructure and discard className/style to prevent them from being applied at runtime\n    const {\n        as,\n        size,\n        bold,\n        children,\n        className: _,\n        style: __,\n        ...otherProps\n    } = props as LinkProps<T> & {\n        className?: string;\n        style?: React.CSSProperties;\n    };\n\n    const Component: React.ElementType = as || 'a';\n\n    const className = cn(\n        size ? [TYPOGRAPHY_TEXT_SIZE_CLASSES[size], TYPOGRAPHY_LINE_HEIGHT_CLASSES[size]] : undefined,\n        /** set underline thickness depending on size of Link */\n        size === 'sm' ? 'decoration-1' : 'decoration-2',\n        'underline cursor-pointer focus:outline-transparent focus-visible:yt-focus text-blue-700 focus-visible:text-blue-700 hover:text-blue-900 focus-visible:hover:text-blue-900 active:text-blue-900 focus-visible:active:text-blue-900 visited:text-blue-700 focus-visible:visited:text-blue-700 underline-offset-2 ',\n        {\n            'font-bold': bold,\n        }\n    );\n\n    return (\n        <Component {...otherProps} className={className} data-taco=\"link\" ref={ref}>\n            {children}\n        </Component>\n    );\n}\n\nexport const Link = React.forwardRef(LinkInner) as <T extends React.ElementType = 'a'>(\n    props: LinkProps<T> & { ref?: React.Ref<unknown> }\n) => React.ReactElement | null;\n"],"names":["TYPOGRAPHY_TEXT_SIZE_CLASSES","TYPOGRAPHY_LINE_HEIGHT_CLASSES","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAS,UACL,OACA,KACF;AAEQ,QAAA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAKJ,QAAM,YAA+B,MAAM;AAE3C,QAAM,YAAY;AAAA,IACd,OAAO,CAACA,WAAAA,6BAA6B,IAAI,GAAGC,WAAAA,+BAA+B,IAAI,CAAC,IAAI;AAAA;AAAA,IAEpF,SAAS,OAAO,iBAAiB;AAAA,IACjC;AAAA,IACA;AAAA,MACI,aAAa;AAAA,IAAA;AAAA,EAErB;AAGI,SAAAC,iCAAA,cAAC,aAAW,GAAG,YAAY,WAAsB,aAAU,QAAO,OAC7D,QACL;AAER;AAEa,MAAA,OAAOA,iBAAM,WAAW,SAAS;;"}
+{"version":3,"file":"Link.cjs","sources":["../../../../src/components/Actions/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { TYPOGRAPHY_LINE_HEIGHT_CLASSES, TYPOGRAPHY_TEXT_SIZE_CLASSES } from '../../../utils/typography';\n\n/**\n * Link label: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n * (TypeScript cannot enforce “component returns string” vs JSX; avoid non-text elements.)\n */\nexport type LinkChildren = string | React.ReactElement | null;\n\n/** Props specific to our Link component */\ntype LinkOwnProps<T extends React.ElementType = 'a'> = {\n    /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */\n    as?: T;\n    /** Set specific size that matches our text sizes. If it's not set, it inherits the parent size */\n    size?: 'sm' | 'md' | 'lg';\n    /** If true, the Link will be rendered in bold */\n    bold?: boolean;\n    /** The content of the Link */\n    children?: LinkChildren;\n};\n\n/**\n * LinkProps combines our own props with the props of the underlying element (via `as`).\n * This allows the component to accept props like `to` for React Router or `href` for native anchors.\n * Note: `className` and `style` are explicitly excluded.\n */\nexport type LinkProps<T extends React.ElementType = 'a'> = LinkOwnProps<T> &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T> | 'className' | 'style'>;\n\nfunction LinkInner<T extends React.ElementType = 'a'>(\n    props: LinkProps<T> & { ref?: React.Ref<unknown> },\n    ref: React.Ref<unknown>\n) {\n    // Destructure and discard className/style to prevent them from being applied at runtime\n    const {\n        as,\n        size,\n        bold,\n        children,\n        className: _,\n        style: __,\n        ...otherProps\n    } = props as LinkProps<T> & {\n        className?: string;\n        style?: React.CSSProperties;\n    };\n\n    const Component: React.ElementType = as || 'a';\n\n    const className = cn(\n        size ? [TYPOGRAPHY_TEXT_SIZE_CLASSES[size], TYPOGRAPHY_LINE_HEIGHT_CLASSES[size]] : undefined,\n        /** set underline thickness depending on size of Link */\n        size === 'sm' ? 'decoration-1' : 'decoration-2',\n        'cursor-pointer text-blue-700 underline underline-offset-2 visited:text-blue-700 hover:text-blue-900 focus:outline-transparent focus-visible:text-blue-700 focus-visible:yt-focus focus-visible:visited:text-blue-700 focus-visible:hover:text-blue-900 active:text-blue-900 focus-visible:active:text-blue-900',\n        {\n            'font-bold': bold,\n        }\n    );\n\n    return (\n        <Component {...otherProps} className={className} data-taco=\"link\" ref={ref}>\n            {children}\n        </Component>\n    );\n}\n\nexport const Link = React.forwardRef(LinkInner) as <T extends React.ElementType = 'a'>(\n    props: LinkProps<T> & { ref?: React.Ref<unknown> }\n) => React.ReactElement | null;\n"],"names":["TYPOGRAPHY_TEXT_SIZE_CLASSES","TYPOGRAPHY_LINE_HEIGHT_CLASSES","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAS,UACL,OACA,KACF;AAEE,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAKJ,QAAM,YAA+B,MAAM;AAE3C,QAAM,YAAY;AAAA,IACd,OAAO,CAACA,WAAAA,6BAA6B,IAAI,GAAGC,WAAAA,+BAA+B,IAAI,CAAC,IAAI;AAAA;AAAA,IAEpF,SAAS,OAAO,iBAAiB;AAAA,IACjC;AAAA,IACA;AAAA,MACI,aAAa;AAAA,IAAA;AAAA,EACjB;AAGJ,SACIC,iCAAA,cAAC,aAAW,GAAG,YAAY,WAAsB,aAAU,QAAO,OAC7D,QACL;AAER;AAEO,MAAM,OAAOA,iBAAM,WAAW,SAAS;;"}

package/dist/components/Actions/Link/Link.js

@@ -16,7 +16,7 @@ function LinkInner(props, ref) {
     size ? [TYPOGRAPHY_TEXT_SIZE_CLASSES[size], TYPOGRAPHY_LINE_HEIGHT_CLASSES[size]] : void 0,
     /** set underline thickness depending on size of Link */
     size === "sm" ? "decoration-1" : "decoration-2",
-    "underline cursor-pointer focus:outline-transparent focus-visible:yt-focus text-blue-700 focus-visible:text-blue-700 hover:text-blue-900 focus-visible:hover:text-blue-900 active:text-blue-900 focus-visible:active:text-blue-900 visited:text-blue-700 focus-visible:visited:text-blue-700 underline-offset-2 ",
+    "cursor-pointer text-blue-700 underline underline-offset-2 visited:text-blue-700 hover:text-blue-900 focus:outline-transparent focus-visible:text-blue-700 focus-visible:yt-focus focus-visible:visited:text-blue-700 focus-visible:hover:text-blue-900 active:text-blue-900 focus-visible:active:text-blue-900",
     {
       "font-bold": bold
     }

package/dist/components/Actions/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../../src/components/Actions/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { TYPOGRAPHY_LINE_HEIGHT_CLASSES, TYPOGRAPHY_TEXT_SIZE_CLASSES } from '../../../utils/typography';\n\n/**\n * Link label: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n * (TypeScript cannot enforce “component returns string” vs JSX; avoid non-text elements.)\n */\nexport type LinkChildren = string | React.ReactElement | null;\n\n/** Props specific to our Link component */\ntype LinkOwnProps<T extends React.ElementType = 'a'> = {\n    /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */\n    as?: T;\n    /** Set specific size that matches our text sizes. If it's not set, it inherits the parent size */\n    size?: 'sm' | 'md' | 'lg';\n    /** If true, the Link will be rendered in bold */\n    bold?: boolean;\n    /** The content of the Link */\n    children?: LinkChildren;\n};\n\n/**\n * LinkProps combines our own props with the props of the underlying element (via `as`).\n * This allows the component to accept props like `to` for React Router or `href` for native anchors.\n * Note: `className` and `style` are explicitly excluded.\n */\nexport type LinkProps<T extends React.ElementType = 'a'> = LinkOwnProps<T> &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T> | 'className' | 'style'>;\n\nfunction LinkInner<T extends React.ElementType = 'a'>(\n    props: LinkProps<T> & { ref?: React.Ref<unknown> },\n    ref: React.Ref<unknown>\n) {\n    // Destructure and discard className/style to prevent them from being applied at runtime\n    const {\n        as,\n        size,\n        bold,\n        children,\n        className: _,\n        style: __,\n        ...otherProps\n    } = props as LinkProps<T> & {\n        className?: string;\n        style?: React.CSSProperties;\n    };\n\n    const Component: React.ElementType = as || 'a';\n\n    const className = cn(\n        size ? [TYPOGRAPHY_TEXT_SIZE_CLASSES[size], TYPOGRAPHY_LINE_HEIGHT_CLASSES[size]] : undefined,\n        /** set underline thickness depending on size of Link */\n        size === 'sm' ? 'decoration-1' : 'decoration-2',\n        'underline cursor-pointer focus:outline-transparent focus-visible:yt-focus text-blue-700 focus-visible:text-blue-700 hover:text-blue-900 focus-visible:hover:text-blue-900 active:text-blue-900 focus-visible:active:text-blue-900 visited:text-blue-700 focus-visible:visited:text-blue-700 underline-offset-2 ',\n        {\n            'font-bold': bold,\n        }\n    );\n\n    return (\n        <Component {...otherProps} className={className} data-taco=\"link\" ref={ref}>\n            {children}\n        </Component>\n    );\n}\n\nexport const Link = React.forwardRef(LinkInner) as <T extends React.ElementType = 'a'>(\n    props: LinkProps<T> & { ref?: React.Ref<unknown> }\n) => React.ReactElement | null;\n"],"names":[],"mappings":";;;AAgCA,SAAS,UACL,OACA,KACF;AAEQ,QAAA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAKJ,QAAM,YAA+B,MAAM;AAE3C,QAAM,YAAY;AAAA,IACd,OAAO,CAAC,6BAA6B,IAAI,GAAG,+BAA+B,IAAI,CAAC,IAAI;AAAA;AAAA,IAEpF,SAAS,OAAO,iBAAiB;AAAA,IACjC;AAAA,IACA;AAAA,MACI,aAAa;AAAA,IAAA;AAAA,EAErB;AAGI,SAAA,sBAAA,cAAC,aAAW,GAAG,YAAY,WAAsB,aAAU,QAAO,OAC7D,QACL;AAER;AAEa,MAAA,OAAO,MAAM,WAAW,SAAS;"}
+{"version":3,"file":"Link.js","sources":["../../../../src/components/Actions/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { TYPOGRAPHY_LINE_HEIGHT_CLASSES, TYPOGRAPHY_TEXT_SIZE_CLASSES } from '../../../utils/typography';\n\n/**\n * Link label: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n * (TypeScript cannot enforce “component returns string” vs JSX; avoid non-text elements.)\n */\nexport type LinkChildren = string | React.ReactElement | null;\n\n/** Props specific to our Link component */\ntype LinkOwnProps<T extends React.ElementType = 'a'> = {\n    /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */\n    as?: T;\n    /** Set specific size that matches our text sizes. If it's not set, it inherits the parent size */\n    size?: 'sm' | 'md' | 'lg';\n    /** If true, the Link will be rendered in bold */\n    bold?: boolean;\n    /** The content of the Link */\n    children?: LinkChildren;\n};\n\n/**\n * LinkProps combines our own props with the props of the underlying element (via `as`).\n * This allows the component to accept props like `to` for React Router or `href` for native anchors.\n * Note: `className` and `style` are explicitly excluded.\n */\nexport type LinkProps<T extends React.ElementType = 'a'> = LinkOwnProps<T> &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T> | 'className' | 'style'>;\n\nfunction LinkInner<T extends React.ElementType = 'a'>(\n    props: LinkProps<T> & { ref?: React.Ref<unknown> },\n    ref: React.Ref<unknown>\n) {\n    // Destructure and discard className/style to prevent them from being applied at runtime\n    const {\n        as,\n        size,\n        bold,\n        children,\n        className: _,\n        style: __,\n        ...otherProps\n    } = props as LinkProps<T> & {\n        className?: string;\n        style?: React.CSSProperties;\n    };\n\n    const Component: React.ElementType = as || 'a';\n\n    const className = cn(\n        size ? [TYPOGRAPHY_TEXT_SIZE_CLASSES[size], TYPOGRAPHY_LINE_HEIGHT_CLASSES[size]] : undefined,\n        /** set underline thickness depending on size of Link */\n        size === 'sm' ? 'decoration-1' : 'decoration-2',\n        'cursor-pointer text-blue-700 underline underline-offset-2 visited:text-blue-700 hover:text-blue-900 focus:outline-transparent focus-visible:text-blue-700 focus-visible:yt-focus focus-visible:visited:text-blue-700 focus-visible:hover:text-blue-900 active:text-blue-900 focus-visible:active:text-blue-900',\n        {\n            'font-bold': bold,\n        }\n    );\n\n    return (\n        <Component {...otherProps} className={className} data-taco=\"link\" ref={ref}>\n            {children}\n        </Component>\n    );\n}\n\nexport const Link = React.forwardRef(LinkInner) as <T extends React.ElementType = 'a'>(\n    props: LinkProps<T> & { ref?: React.Ref<unknown> }\n) => React.ReactElement | null;\n"],"names":[],"mappings":";;;AAgCA,SAAS,UACL,OACA,KACF;AAEE,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAKJ,QAAM,YAA+B,MAAM;AAE3C,QAAM,YAAY;AAAA,IACd,OAAO,CAAC,6BAA6B,IAAI,GAAG,+BAA+B,IAAI,CAAC,IAAI;AAAA;AAAA,IAEpF,SAAS,OAAO,iBAAiB;AAAA,IACjC;AAAA,IACA;AAAA,MACI,aAAa;AAAA,IAAA;AAAA,EACjB;AAGJ,SACI,sBAAA,cAAC,aAAW,GAAG,YAAY,WAAsB,aAAU,QAAO,OAC7D,QACL;AAER;AAEO,MAAM,OAAO,MAAM,WAAW,SAAS;"}

package/dist/components/Actions/LinkButton/LinkButton.cjs

@@ -36,8 +36,8 @@ function LinkButtonInner(props, ref) {
   const Component = as || "a";
   const btnClassName = cn(
     utils.SHARED_BUTTON_CLASSNAMES,
-    utils.getAppearanceClasses(variant, "regular"),
-    !iconOnly && utils.setPaddingClasses(size, icon && "end"),
+    utils.APPEARANCE_CLASSNAME.regular[variant],
+    !iconOnly && utils.PADDING_CLASSNAME[icon ? "end" : "none"][size],
     utils.sizeClasses[size],
     "no-underline",
     { "aspect-square p-0": iconOnly }

package/dist/components/Actions/LinkButton/LinkButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.cjs","sources":["../../../../src/components/Actions/LinkButton/LinkButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport {\n    ButtonSize,\n    ButtonVariant,\n    SHARED_BUTTON_CLASSNAMES,\n    sizeClasses,\n    getAppearanceClasses,\n    setPaddingClasses,\n    setIconSizeClass,\n} from './../utils';\nimport { Icon, IconName } from '../../Icon/Icon';\n\n/**\n * LinkButton Text: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n */\nexport type LinkButtonChildren = string | React.ReactElement;\n\ntype IconProps =\n    | {\n          /**\n           *  Which icon to display\n           *  This dynamic type causes the type extraction for props to fail\n           * */\n          icon: IconName;\n          /* Determines if icon is placed before or after text label */\n          iconOnly?: boolean;\n      }\n    | {\n          icon?: never;\n          iconOnly?: never;\n      };\n\n/** Props specific to our Link component */\ntype LinkButtonBaseProps<T extends React.ElementType = 'a'> = {\n    /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */\n    as?: T;\n    /** Set size to either sm, md or lg — will fallback to md  */\n    size?: ButtonSize;\n    /** Variant determines primary, secondary or tertiary use. Secondary will be default */\n    variant?: ButtonVariant;\n    /** The content of the Link */\n    children: LinkButtonChildren;\n};\n\n/**\n * LinkProps combines the base props with the props of the underlying element (via `as`).\n * This allows the component to accept props like `to` for React Router or `href` for native anchors.\n * Note: `className` and `style` are explicitly excluded.\n */\nexport type LinkButtonProps<T extends React.ElementType = 'a'> = LinkButtonBaseProps<T> &\n    IconProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof LinkButtonBaseProps<T> | 'className' | 'style'>;\n\nfunction LinkButtonInner<T extends React.ElementType = 'a'>(\n    props: LinkButtonProps<T> & { ref?: React.Ref<unknown> },\n    ref: React.Ref<unknown>\n) {\n    // Destructure and discard className/style to prevent them from being applied at runtime\n    const {\n        as,\n        size = 'md',\n        variant = 'secondary',\n        children,\n        icon,\n        iconOnly,\n        className: _,\n        style: __,\n        ...otherProps\n    } = props as LinkButtonProps<T> & {\n        className?: string;\n        style?: React.CSSProperties;\n    };\n\n    const Component: React.ElementType = as || 'a';\n\n    /**\n     * Todo:\n     * - Find a clever way to pass 'regular' and 'end'\n     */\n    const btnClassName = cn(\n        SHARED_BUTTON_CLASSNAMES,\n        getAppearanceClasses(variant, 'regular'),\n        !iconOnly && setPaddingClasses(size, icon && 'end'),\n        sizeClasses[size],\n        'no-underline',\n        { 'aspect-square p-0': iconOnly }\n    );\n\n    return (\n        <Component {...otherProps} className={btnClassName} data-taco=\"linkbutton\" ref={ref}>\n            <span data-taco=\"linkbutton-text\" className={cn({ 'sr-only': iconOnly && icon }, 'text-nowrap')}>\n                {children}\n            </span>\n            {icon ? (\n                <span data-taco=\"linkbutton-icon\" className=\"leading-none\">\n                    <Icon name={icon} className={cn(setIconSizeClass[size])} />\n                </span>\n            ) : null}\n        </Component>\n    );\n}\n\nexport const LinkButton = React.forwardRef(LinkButtonInner as React.ForwardRefRenderFunction<unknown, LinkButtonProps>) as <\n    T extends React.ElementType = 'a'\n>(\n    props: LinkButtonProps<T> & { ref?: React.Ref<unknown> }\n) => React.ReactElement | null;\n"],"names":["SHARED_BUTTON_CLASSNAMES","getAppearanceClasses","setPaddingClasses","sizeClasses","React","Icon","setIconSizeClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAwDA,SAAS,gBACL,OACA,KACF;AAEQ,QAAA;AAAA,IACF;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAKJ,QAAM,YAA+B,MAAM;AAM3C,QAAM,eAAe;AAAA,IACjBA,MAAA;AAAA,IACAC,MAAA,qBAAqB,SAAS,SAAS;AAAA,IACvC,CAAC,YAAYC,MAAkB,kBAAA,MAAM,QAAQ,KAAK;AAAA,IAClDC,MAAAA,YAAY,IAAI;AAAA,IAChB;AAAA,IACA,EAAE,qBAAqB,SAAS;AAAA,EACpC;AAEA,wDACK,WAAW,EAAA,GAAG,YAAY,WAAW,cAAc,aAAU,cAAa,IAAA,kDACtE,QAAK,EAAA,aAAU,mBAAkB,WAAW,GAAG,EAAE,WAAW,YAAY,KAAQ,GAAA,aAAa,KACzF,QACL,GACC,OACIC,iCAAA,cAAA,QAAA,EAAK,aAAU,mBAAkB,WAAU,kBACvCA,iCAAA,cAAAC,KAAAA,MAAA,EAAK,MAAM,MAAM,WAAW,GAAGC,MAAiB,iBAAA,IAAI,CAAC,GAAG,CAC7D,IACA,IACR;AAER;AAEa,MAAA,aAAaF,iBAAM,WAAW,eAA2E;;"}
+{"version":3,"file":"LinkButton.cjs","sources":["../../../../src/components/Actions/LinkButton/LinkButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport {\n    ButtonSize,\n    ButtonVariant,\n    SHARED_BUTTON_CLASSNAMES,\n    sizeClasses,\n    APPEARANCE_CLASSNAME,\n    PADDING_CLASSNAME,\n    setIconSizeClass,\n} from './../utils';\nimport { Icon, IconName } from '../../Icon/Icon';\n\n/**\n * LinkButton Text: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n */\nexport type LinkButtonChildren = string | React.ReactElement;\n\ntype IconProps =\n    | {\n          /**\n           *  Which icon to display\n           *  This dynamic type causes the type extraction for props to fail\n           * */\n          icon: IconName;\n          /* Renders only the icon; children becomes the accessible label */\n          iconOnly?: boolean;\n      }\n    | {\n          icon?: never;\n          iconOnly?: never;\n      };\n\n/** Props specific to our Link component */\ntype LinkButtonBaseProps<T extends React.ElementType = 'a'> = {\n    /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */\n    as?: T;\n    /** Set size to either sm, md or lg — will fallback to md  */\n    size?: ButtonSize;\n    /** Variant determines primary, secondary or tertiary use. Secondary will be default */\n    variant?: ButtonVariant;\n    /** The content of the Link */\n    children: LinkButtonChildren;\n};\n\n/**\n * LinkProps combines the base props with the props of the underlying element (via `as`).\n * This allows the component to accept props like `to` for React Router or `href` for native anchors.\n * Note: `className` and `style` are explicitly excluded.\n */\nexport type LinkButtonProps<T extends React.ElementType = 'a'> = LinkButtonBaseProps<T> &\n    IconProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof LinkButtonBaseProps<T> | 'className' | 'style'>;\n\nfunction LinkButtonInner<T extends React.ElementType = 'a'>(\n    props: LinkButtonProps<T> & { ref?: React.Ref<unknown> },\n    ref: React.Ref<unknown>\n) {\n    // Destructure and discard className/style to prevent them from being applied at runtime\n    const {\n        as,\n        size = 'md',\n        variant = 'secondary',\n        children,\n        icon,\n        iconOnly,\n        className: _,\n        style: __,\n        ...otherProps\n    } = props as LinkButtonProps<T> & {\n        className?: string;\n        style?: React.CSSProperties;\n    };\n\n    const Component: React.ElementType = as || 'a';\n\n    /**\n     * Todo:\n     * - Find a clever way to pass 'regular' and 'end'\n     */\n    const btnClassName = cn(\n        SHARED_BUTTON_CLASSNAMES,\n        APPEARANCE_CLASSNAME.regular[variant],\n        !iconOnly && PADDING_CLASSNAME[icon ? 'end' : 'none'][size],\n        sizeClasses[size],\n        'no-underline',\n        { 'aspect-square p-0': iconOnly }\n    );\n\n    return (\n        <Component {...otherProps} className={btnClassName} data-taco=\"linkbutton\" ref={ref}>\n            <span data-taco=\"linkbutton-text\" className={cn({ 'sr-only': iconOnly && icon }, 'text-nowrap')}>\n                {children}\n            </span>\n            {icon ? (\n                <span data-taco=\"linkbutton-icon\" className=\"leading-none\">\n                    <Icon name={icon} className={cn(setIconSizeClass[size])} />\n                </span>\n            ) : null}\n        </Component>\n    );\n}\n\nexport const LinkButton = React.forwardRef(LinkButtonInner as React.ForwardRefRenderFunction<unknown, LinkButtonProps>) as <\n    T extends React.ElementType = 'a',\n>(\n    props: LinkButtonProps<T> & { ref?: React.Ref<unknown> }\n) => React.ReactElement | null;\n"],"names":["SHARED_BUTTON_CLASSNAMES","APPEARANCE_CLASSNAME","PADDING_CLASSNAME","sizeClasses","React","Icon","setIconSizeClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAwDA,SAAS,gBACL,OACA,KACF;AAEE,QAAM;AAAA,IACF;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAKJ,QAAM,YAA+B,MAAM;AAM3C,QAAM,eAAe;AAAA,IACjBA,MAAAA;AAAAA,IACAC,MAAAA,qBAAqB,QAAQ,OAAO;AAAA,IACpC,CAAC,YAAYC,MAAAA,kBAAkB,OAAO,QAAQ,MAAM,EAAE,IAAI;AAAA,IAC1DC,MAAAA,YAAY,IAAI;AAAA,IAChB;AAAA,IACA,EAAE,qBAAqB,SAAA;AAAA,EAAS;AAGpC,wDACK,WAAA,EAAW,GAAG,YAAY,WAAW,cAAc,aAAU,cAAa,IAAA,kDACtE,QAAA,EAAK,aAAU,mBAAkB,WAAW,GAAG,EAAE,WAAW,YAAY,QAAQ,aAAa,KACzF,QACL,GACC,OACGC,iCAAA,cAAC,QAAA,EAAK,aAAU,mBAAkB,WAAU,kBACxCA,iCAAA,cAACC,KAAAA,MAAA,EAAK,MAAM,MAAM,WAAW,GAAGC,MAAAA,iBAAiB,IAAI,CAAC,GAAG,CAC7D,IACA,IACR;AAER;AAEO,MAAM,aAAaF,iBAAM,WAAW,eAA2E;;"}

package/dist/components/Actions/LinkButton/LinkButton.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import cn from "clsx";
-import { SHARED_BUTTON_CLASSNAMES, getAppearanceClasses, setPaddingClasses, sizeClasses, setIconSizeClass } from "../utils.js";
+import { SHARED_BUTTON_CLASSNAMES, APPEARANCE_CLASSNAME, PADDING_CLASSNAME, sizeClasses, setIconSizeClass } from "../utils.js";
 import { Icon } from "../../Icon/Icon.js";
 function LinkButtonInner(props, ref) {
   const {
@@ -17,8 +17,8 @@ function LinkButtonInner(props, ref) {
   const Component = as || "a";
   const btnClassName = cn(
     SHARED_BUTTON_CLASSNAMES,
-    getAppearanceClasses(variant, "regular"),
-    !iconOnly && setPaddingClasses(size, icon && "end"),
+    APPEARANCE_CLASSNAME.regular[variant],
+    !iconOnly && PADDING_CLASSNAME[icon ? "end" : "none"][size],
     sizeClasses[size],
     "no-underline",
     { "aspect-square p-0": iconOnly }

package/dist/components/Actions/LinkButton/LinkButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.js","sources":["../../../../src/components/Actions/LinkButton/LinkButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport {\n    ButtonSize,\n    ButtonVariant,\n    SHARED_BUTTON_CLASSNAMES,\n    sizeClasses,\n    getAppearanceClasses,\n    setPaddingClasses,\n    setIconSizeClass,\n} from './../utils';\nimport { Icon, IconName } from '../../Icon/Icon';\n\n/**\n * LinkButton Text: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n */\nexport type LinkButtonChildren = string | React.ReactElement;\n\ntype IconProps =\n    | {\n          /**\n           *  Which icon to display\n           *  This dynamic type causes the type extraction for props to fail\n           * */\n          icon: IconName;\n          /* Determines if icon is placed before or after text label */\n          iconOnly?: boolean;\n      }\n    | {\n          icon?: never;\n          iconOnly?: never;\n      };\n\n/** Props specific to our Link component */\ntype LinkButtonBaseProps<T extends React.ElementType = 'a'> = {\n    /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */\n    as?: T;\n    /** Set size to either sm, md or lg — will fallback to md  */\n    size?: ButtonSize;\n    /** Variant determines primary, secondary or tertiary use. Secondary will be default */\n    variant?: ButtonVariant;\n    /** The content of the Link */\n    children: LinkButtonChildren;\n};\n\n/**\n * LinkProps combines the base props with the props of the underlying element (via `as`).\n * This allows the component to accept props like `to` for React Router or `href` for native anchors.\n * Note: `className` and `style` are explicitly excluded.\n */\nexport type LinkButtonProps<T extends React.ElementType = 'a'> = LinkButtonBaseProps<T> &\n    IconProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof LinkButtonBaseProps<T> | 'className' | 'style'>;\n\nfunction LinkButtonInner<T extends React.ElementType = 'a'>(\n    props: LinkButtonProps<T> & { ref?: React.Ref<unknown> },\n    ref: React.Ref<unknown>\n) {\n    // Destructure and discard className/style to prevent them from being applied at runtime\n    const {\n        as,\n        size = 'md',\n        variant = 'secondary',\n        children,\n        icon,\n        iconOnly,\n        className: _,\n        style: __,\n        ...otherProps\n    } = props as LinkButtonProps<T> & {\n        className?: string;\n        style?: React.CSSProperties;\n    };\n\n    const Component: React.ElementType = as || 'a';\n\n    /**\n     * Todo:\n     * - Find a clever way to pass 'regular' and 'end'\n     */\n    const btnClassName = cn(\n        SHARED_BUTTON_CLASSNAMES,\n        getAppearanceClasses(variant, 'regular'),\n        !iconOnly && setPaddingClasses(size, icon && 'end'),\n        sizeClasses[size],\n        'no-underline',\n        { 'aspect-square p-0': iconOnly }\n    );\n\n    return (\n        <Component {...otherProps} className={btnClassName} data-taco=\"linkbutton\" ref={ref}>\n            <span data-taco=\"linkbutton-text\" className={cn({ 'sr-only': iconOnly && icon }, 'text-nowrap')}>\n                {children}\n            </span>\n            {icon ? (\n                <span data-taco=\"linkbutton-icon\" className=\"leading-none\">\n                    <Icon name={icon} className={cn(setIconSizeClass[size])} />\n                </span>\n            ) : null}\n        </Component>\n    );\n}\n\nexport const LinkButton = React.forwardRef(LinkButtonInner as React.ForwardRefRenderFunction<unknown, LinkButtonProps>) as <\n    T extends React.ElementType = 'a'\n>(\n    props: LinkButtonProps<T> & { ref?: React.Ref<unknown> }\n) => React.ReactElement | null;\n"],"names":[],"mappings":";;;;AAwDA,SAAS,gBACL,OACA,KACF;AAEQ,QAAA;AAAA,IACF;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAKJ,QAAM,YAA+B,MAAM;AAM3C,QAAM,eAAe;AAAA,IACjB;AAAA,IACA,qBAAqB,SAAS,SAAS;AAAA,IACvC,CAAC,YAAY,kBAAkB,MAAM,QAAQ,KAAK;AAAA,IAClD,YAAY,IAAI;AAAA,IAChB;AAAA,IACA,EAAE,qBAAqB,SAAS;AAAA,EACpC;AAEA,6CACK,WAAW,EAAA,GAAG,YAAY,WAAW,cAAc,aAAU,cAAa,IAAA,uCACtE,QAAK,EAAA,aAAU,mBAAkB,WAAW,GAAG,EAAE,WAAW,YAAY,KAAQ,GAAA,aAAa,KACzF,QACL,GACC,OACI,sBAAA,cAAA,QAAA,EAAK,aAAU,mBAAkB,WAAU,kBACvC,sBAAA,cAAA,MAAA,EAAK,MAAM,MAAM,WAAW,GAAG,iBAAiB,IAAI,CAAC,GAAG,CAC7D,IACA,IACR;AAER;AAEa,MAAA,aAAa,MAAM,WAAW,eAA2E;"}
+{"version":3,"file":"LinkButton.js","sources":["../../../../src/components/Actions/LinkButton/LinkButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport {\n    ButtonSize,\n    ButtonVariant,\n    SHARED_BUTTON_CLASSNAMES,\n    sizeClasses,\n    APPEARANCE_CLASSNAME,\n    PADDING_CLASSNAME,\n    setIconSizeClass,\n} from './../utils';\nimport { Icon, IconName } from '../../Icon/Icon';\n\n/**\n * LinkButton Text: string text (literals, template literals, i18n helpers that return `string`, string constants),\n * or a single React element—typically a component whose output is text-only.\n */\nexport type LinkButtonChildren = string | React.ReactElement;\n\ntype IconProps =\n    | {\n          /**\n           *  Which icon to display\n           *  This dynamic type causes the type extraction for props to fail\n           * */\n          icon: IconName;\n          /* Renders only the icon; children becomes the accessible label */\n          iconOnly?: boolean;\n      }\n    | {\n          icon?: never;\n          iconOnly?: never;\n      };\n\n/** Props specific to our Link component */\ntype LinkButtonBaseProps<T extends React.ElementType = 'a'> = {\n    /** Allows using a custom or framework-specific link component (e.g. Next.js or React Router) */\n    as?: T;\n    /** Set size to either sm, md or lg — will fallback to md  */\n    size?: ButtonSize;\n    /** Variant determines primary, secondary or tertiary use. Secondary will be default */\n    variant?: ButtonVariant;\n    /** The content of the Link */\n    children: LinkButtonChildren;\n};\n\n/**\n * LinkProps combines the base props with the props of the underlying element (via `as`).\n * This allows the component to accept props like `to` for React Router or `href` for native anchors.\n * Note: `className` and `style` are explicitly excluded.\n */\nexport type LinkButtonProps<T extends React.ElementType = 'a'> = LinkButtonBaseProps<T> &\n    IconProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof LinkButtonBaseProps<T> | 'className' | 'style'>;\n\nfunction LinkButtonInner<T extends React.ElementType = 'a'>(\n    props: LinkButtonProps<T> & { ref?: React.Ref<unknown> },\n    ref: React.Ref<unknown>\n) {\n    // Destructure and discard className/style to prevent them from being applied at runtime\n    const {\n        as,\n        size = 'md',\n        variant = 'secondary',\n        children,\n        icon,\n        iconOnly,\n        className: _,\n        style: __,\n        ...otherProps\n    } = props as LinkButtonProps<T> & {\n        className?: string;\n        style?: React.CSSProperties;\n    };\n\n    const Component: React.ElementType = as || 'a';\n\n    /**\n     * Todo:\n     * - Find a clever way to pass 'regular' and 'end'\n     */\n    const btnClassName = cn(\n        SHARED_BUTTON_CLASSNAMES,\n        APPEARANCE_CLASSNAME.regular[variant],\n        !iconOnly && PADDING_CLASSNAME[icon ? 'end' : 'none'][size],\n        sizeClasses[size],\n        'no-underline',\n        { 'aspect-square p-0': iconOnly }\n    );\n\n    return (\n        <Component {...otherProps} className={btnClassName} data-taco=\"linkbutton\" ref={ref}>\n            <span data-taco=\"linkbutton-text\" className={cn({ 'sr-only': iconOnly && icon }, 'text-nowrap')}>\n                {children}\n            </span>\n            {icon ? (\n                <span data-taco=\"linkbutton-icon\" className=\"leading-none\">\n                    <Icon name={icon} className={cn(setIconSizeClass[size])} />\n                </span>\n            ) : null}\n        </Component>\n    );\n}\n\nexport const LinkButton = React.forwardRef(LinkButtonInner as React.ForwardRefRenderFunction<unknown, LinkButtonProps>) as <\n    T extends React.ElementType = 'a',\n>(\n    props: LinkButtonProps<T> & { ref?: React.Ref<unknown> }\n) => React.ReactElement | null;\n"],"names":[],"mappings":";;;;AAwDA,SAAS,gBACL,OACA,KACF;AAEE,QAAM;AAAA,IACF;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAKJ,QAAM,YAA+B,MAAM;AAM3C,QAAM,eAAe;AAAA,IACjB;AAAA,IACA,qBAAqB,QAAQ,OAAO;AAAA,IACpC,CAAC,YAAY,kBAAkB,OAAO,QAAQ,MAAM,EAAE,IAAI;AAAA,IAC1D,YAAY,IAAI;AAAA,IAChB;AAAA,IACA,EAAE,qBAAqB,SAAA;AAAA,EAAS;AAGpC,6CACK,WAAA,EAAW,GAAG,YAAY,WAAW,cAAc,aAAU,cAAa,IAAA,uCACtE,QAAA,EAAK,aAAU,mBAAkB,WAAW,GAAG,EAAE,WAAW,YAAY,QAAQ,aAAa,KACzF,QACL,GACC,OACG,sBAAA,cAAC,QAAA,EAAK,aAAU,mBAAkB,WAAU,kBACxC,sBAAA,cAAC,MAAA,EAAK,MAAM,MAAM,WAAW,GAAG,iBAAiB,IAAI,CAAC,GAAG,CAC7D,IACA,IACR;AAER;AAEO,MAAM,aAAa,MAAM,WAAW,eAA2E;"}