@chayns-components/core 5.0.0-beta.998 → 5.0.0

package/lib/esm/components/amount-control/AmountControl.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","_ref","theme","_ref2","$isDisabled","StyledAmountControlInput","input","_ref3","_ref4","text","_ref5","$shouldShowWideInput","_ref6","$hasFocus","_ref7","$displayState","_ref8","$shouldShowIcon","StyledAmountControlPseudoInput","_ref9","_ref10","_ref11","StyledMotionAmountControlButton","button","_ref12","$color","_ref13","$isWide","_ref14"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n    overflow: hidden;\n    transition: opacity 0.2s ease;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n            pointer-events: none;\n        `}\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n    $hasFocus: boolean;\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n    color: ${({ theme }: StyledAmountControlInputProps) => theme.text};\n    border: none;\n    height: 28px;\n    width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    text-align: center;\n    cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n    ${({ $displayState }) =>\n        $displayState !== 'normal' &&\n        css`\n            border-bottom-right-radius: 3px;\n            border-top-right-radius: 3px;\n        `}\n    ${({ $displayState, $shouldShowIcon }) =>\n        $displayState === 'default' &&\n        !$shouldShowIcon &&\n        css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n        `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n    background-color: ${({ theme }: StyledAmountControlPseudoInputProps) => theme['202']};\n    color: ${({ theme }: StyledAmountControlPseudoInputProps) => theme.text};\n    border: none;\n    height: 28px;\n    min-width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    padding: 0 8px;\n    text-align: center;\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $color?: string;\n    $isWide?: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    overflow: hidden;\n    background-color: ${({ $color }) => $color ?? 'rgba(255, 255, 255, 0.2)'};\n    transition: background-color 0.2s ease-in-out;\n    height: 28px;\n    width: ${({ $isWide }) => ($isWide ? 40 : 28)}px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA6B;AACvE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACdC,WAAW,IACXN,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT,CAAC;AASD,OAAO,MAAMO,wBAAwB,GAAGR,MAAM,CAACS,KAAoC;AACnF,wBAAwBC,KAAA;EAAA,IAAC;IAAEL;EAAqC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,KAAK,CAAC;AAAA;AAClF,aAAaM,KAAA;EAAA,IAAC;IAAEN;EAAqC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAACO,IAAI;AAAA;AACrE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OAAMC,oBAAoB,GAAG,EAAE,GAAG,EAAE;AAAA,CAAC;AAC3E;AACA,cAAcC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,MAAM,GAAG,SAAS;AAAA,CAAC;AACjE;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAChBC,aAAa,KAAK,QAAQ,IAC1BjB,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT,MAAMkB,KAAA;EAAA,IAAC;IAAED,aAAa;IAAEE;EAAgB,CAAC,GAAAD,KAAA;EAAA,OACjCD,aAAa,KAAK,SAAS,IAC3B,CAACE,eAAe,IAChBnB,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT,CAAC;AAMD,OAAO,MAAMoB,8BAA8B,GAAGrB,MAAM,CAACG,GAAwC;AAC7F,wBAAwBmB,KAAA;EAAA,IAAC;IAAEjB;EAA2C,CAAC,GAAAiB,KAAA;EAAA,OAAKjB,KAAK,CAAC,KAAK,CAAC;AAAA;AACxF,aAAakB,MAAA;EAAA,IAAC;IAAElB;EAA2C,CAAC,GAAAkB,MAAA;EAAA,OAAKlB,KAAK,CAACO,IAAI;AAAA;AAC3E;AACA;AACA,iBAAiBY,MAAA;EAAA,IAAC;IAAEV;EAAqB,CAAC,GAAAU,MAAA;EAAA,OAAMV,oBAAoB,GAAG,EAAE,GAAG,EAAE;AAAA,CAAC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMW,+BAA+B,GAAGzB,MAAM,CACjDD,MAAM,CAAC2B,MACX,CAAiC;AACjC;AACA,wBAAwBC,MAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,MAAA;EAAA,OAAKC,MAAM,IAAI,0BAA0B;AAAA;AAC5E;AACA;AACA,aAAaC,MAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,MAAA;EAAA,OAAMC,OAAO,GAAG,EAAE,GAAG,EAAE;AAAA,CAAC;AACjD;AACA,MAAMC,MAAA;EAAA,IAAC;IAAExB;EAAY,CAAC,GAAAwB,MAAA;EAAA,OACdxB,WAAW,IACXN,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
+{"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","theme","$isDisabled","StyledInputWrapper","StyledAmountControlInput","input","$shouldShowWideInput","$hasFocus","$displayState","$shouldShowIcon","StyledAmountControlPseudoInput","$shouldShowRightIcon","StyledMotionAmountControlButton","button","$color"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n    overflow: hidden;\n    transition: opacity 0.2s ease;\n    height: 28px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n            pointer-events: none;\n        `}\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n    $hasFocus: boolean;\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledInputWrapper = styled.div<WithTheme<unknown>>`\n    background-color: ${({ theme }) => theme['408']};\n`;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: rgba(255, 255, 255, 0.2);\n    color: white;\n    border: none;\n    height: 28px;\n    width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    text-align: center;\n    cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n    ${({ $displayState }) =>\n        $displayState === 'maxAmount' &&\n        css`\n            border-bottom-right-radius: 3px;\n            border-top-right-radius: 3px;\n        `}\n    ${({ $displayState, $shouldShowIcon }) =>\n        $displayState === 'default' &&\n        !$shouldShowIcon &&\n        css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n        `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n    $shouldShowWideInput: boolean;\n    $shouldShowRightIcon: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n    background-color: rgba(255, 255, 255, 0.2);\n    color: white;\n    border: none;\n    height: 28px;\n    min-width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    padding: 1px 8px;\n    text-align: center;\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    border-bottom-left-radius: ${({ $shouldShowRightIcon }) =>\n        $shouldShowRightIcon ? '3px' : 'unset'};\n    border-top-left-radius: ${({ $shouldShowRightIcon }) =>\n        $shouldShowRightIcon ? '3px' : 'unset'};\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $color?: string;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    align-items: center;\n    background-color: ${({ theme, $color }: StyledAmountControlButtonProps) =>\n        $color ?? theme['408']};\n    display: flex;\n    justify-content: center;\n    overflow: hidden;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACXJ,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AASD,OAAO,MAAMK,kBAAkB,GAAGN,MAAM,CAACG,GAAuB;AAChE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AAED,OAAO,MAAMG,wBAAwB,GAAGP,MAAM,CAACQ,KAAoC;AACnF;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC3E;AACA,cAAc,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,MAAM,GAAG,SAAU;AACjE;AACA,MAAM,CAAC;EAAEC;AAAc,CAAC,KAChBA,aAAa,KAAK,WAAW,IAC7BV,GAAG;AACX;AACA;AACA,SAAS;AACT,MAAM,CAAC;EAAEU,aAAa;EAAEC;AAAgB,CAAC,KACjCD,aAAa,KAAK,SAAS,IAC3B,CAACC,eAAe,IAChBX,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAOD,OAAO,MAAMY,8BAA8B,GAAGb,MAAM,CAACG,GAAwC;AAC7F;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEM;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;EAAEK;AAAqB,CAAC,KAClDA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,8BAA8B,CAAC;EAAEA;AAAqB,CAAC,KAC/CA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,CAAC;AAOD,OAAO,MAAMC,+BAA+B,GAAGf,MAAM,CACjDD,MAAM,CAACiB,MACX,CAAiC;AACjC;AACA,wBAAwB,CAAC;EAAEZ,KAAK;EAAEa;AAAuC,CAAC,KAClEA,MAAM,IAAIb,KAAK,CAAC,KAAK,CAAC;AAC9B;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACXJ,GAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/animated-number/AnimatedNumber.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { animate, useMotionValue } from 'motion/react';
+const DEFAULT_ROUND = Math.round;
+const DEFAULT_EASE = [0.16, 1, 0.3, 1];
+export const AnimatedNumber = ({
+  value,
+  duration = 2,
+  delay = 0,
+  locale = 'de',
+  format,
+  round = DEFAULT_ROUND,
+  startFrom = 0,
+  onComplete,
+  ease = DEFAULT_EASE
+}) => {
+  const motionValue = useMotionValue(startFrom);
+  const [display, setDisplay] = useState(startFrom);
+  const formatter = useMemo(() => {
+    if (format) return format;
+    return n => round(n).toLocaleString(locale);
+  }, [format, locale, round]);
+  useEffect(() => {
+    motionValue.set(startFrom);
+    const controls = animate(motionValue, value, {
+      duration,
+      delay,
+      ease: ease,
+      onComplete
+    });
+    return () => controls.stop();
+  }, [value, duration, delay, startFrom, onComplete, ease, motionValue]);
+  useEffect(() => {
+    const unsub = motionValue.on('change', v => setDisplay(v));
+    return () => unsub();
+  }, [motionValue]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, formatter(display));
+};
+AnimatedNumber.displayName = 'AnimatedNumber';
+export default AnimatedNumber;
+//# sourceMappingURL=AnimatedNumber.js.map

package/lib/esm/components/animated-number/AnimatedNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedNumber.js","names":["React","useEffect","useMemo","useState","animate","useMotionValue","DEFAULT_ROUND","Math","round","DEFAULT_EASE","AnimatedNumber","value","duration","delay","locale","format","startFrom","onComplete","ease","motionValue","display","setDisplay","formatter","n","toLocaleString","set","controls","stop","unsub","on","v","createElement","Fragment","displayName"],"sources":["../../../../src/components/animated-number/AnimatedNumber.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport { animate, useMotionValue } from 'motion/react';\nimport { Easing, MotionValue, ObjectTarget } from 'motion';\n\ntype Ease = [number, number, number, number] | ((t: number) => number) | string;\n\nexport interface AnimatedNumberProps {\n    /**\n     * Start delay of the animation in seconds.\n     */\n    delay?: number;\n    /**\n     * Total duration of the animation in seconds.\n     */\n    duration?: number;\n    /**\n     * Easing curve of the animation (e.g., cubic-bezier like [0.16, 1, 0.3, 1] or predefined easings).\n     * Controls how the animation accelerates/decelerates.\n     */\n    ease?: Ease;\n    /**\n     * Custom formatter for the displayed value.\n     * If provided, it overrides locale/toLocaleString and round.\n     * Example: (n) => `${Math.round(n)} points`\n     */\n    format?: (n: number) => string;\n    /**\n     * Locale used by toLocaleString when no custom formatter is provided.\n     */\n    locale?: string;\n    /**\n     * Callback invoked when the animation completes.\n     */\n    onComplete?: () => void;\n    /**\n     * Custom rounding function when no custom formatter is provided.\n     * Default: Math.round\n     */\n    round?: (n: number) => number;\n    /**\n     * Starting value for the animation.\n     * Default: 0\n     */\n    startFrom?: number;\n    /**\n     * Target value to animate to.\n     */\n    value: number;\n}\n\nconst DEFAULT_ROUND = Math.round;\nconst DEFAULT_EASE: Ease = [0.16, 1, 0.3, 1];\n\nexport const AnimatedNumber: FC<AnimatedNumberProps> = ({\n    value,\n    duration = 2,\n    delay = 0,\n    locale = 'de',\n    format,\n    round = DEFAULT_ROUND,\n    startFrom = 0,\n    onComplete,\n    ease = DEFAULT_EASE,\n}) => {\n    const motionValue = useMotionValue(startFrom);\n\n    const [display, setDisplay] = useState<number>(startFrom);\n\n    const formatter = useMemo(() => {\n        if (format) return format;\n\n        return (n: number) => round(n).toLocaleString(locale);\n    }, [format, locale, round]);\n\n    useEffect(() => {\n        motionValue.set(startFrom);\n\n        const controls = animate(motionValue, value as ObjectTarget<MotionValue<number>>, {\n            duration,\n            delay,\n            ease: ease as Easing,\n            onComplete,\n        });\n\n        return () => controls.stop();\n    }, [value, duration, delay, startFrom, onComplete, ease, motionValue]);\n\n    useEffect(() => {\n        const unsub = motionValue.on('change', (v) => setDisplay(v));\n\n        return () => unsub();\n    }, [motionValue]);\n\n    return <>{formatter(display)}</>;\n};\n\nAnimatedNumber.displayName = 'AnimatedNumber';\n\nexport default AnimatedNumber;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SAASC,OAAO,EAAEC,cAAc,QAAQ,cAAc;AAiDtD,MAAMC,aAAa,GAAGC,IAAI,CAACC,KAAK;AAChC,MAAMC,YAAkB,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;AAE5C,OAAO,MAAMC,cAAuC,GAAGA,CAAC;EACpDC,KAAK;EACLC,QAAQ,GAAG,CAAC;EACZC,KAAK,GAAG,CAAC;EACTC,MAAM,GAAG,IAAI;EACbC,MAAM;EACNP,KAAK,GAAGF,aAAa;EACrBU,SAAS,GAAG,CAAC;EACbC,UAAU;EACVC,IAAI,GAAGT;AACX,CAAC,KAAK;EACF,MAAMU,WAAW,GAAGd,cAAc,CAACW,SAAS,CAAC;EAE7C,MAAM,CAACI,OAAO,EAAEC,UAAU,CAAC,GAAGlB,QAAQ,CAASa,SAAS,CAAC;EAEzD,MAAMM,SAAS,GAAGpB,OAAO,CAAC,MAAM;IAC5B,IAAIa,MAAM,EAAE,OAAOA,MAAM;IAEzB,OAAQQ,CAAS,IAAKf,KAAK,CAACe,CAAC,CAAC,CAACC,cAAc,CAACV,MAAM,CAAC;EACzD,CAAC,EAAE,CAACC,MAAM,EAAED,MAAM,EAAEN,KAAK,CAAC,CAAC;EAE3BP,SAAS,CAAC,MAAM;IACZkB,WAAW,CAACM,GAAG,CAACT,SAAS,CAAC;IAE1B,MAAMU,QAAQ,GAAGtB,OAAO,CAACe,WAAW,EAAER,KAAK,EAAuC;MAC9EC,QAAQ;MACRC,KAAK;MACLK,IAAI,EAAEA,IAAc;MACpBD;IACJ,CAAC,CAAC;IAEF,OAAO,MAAMS,QAAQ,CAACC,IAAI,CAAC,CAAC;EAChC,CAAC,EAAE,CAAChB,KAAK,EAAEC,QAAQ,EAAEC,KAAK,EAAEG,SAAS,EAAEC,UAAU,EAAEC,IAAI,EAAEC,WAAW,CAAC,CAAC;EAEtElB,SAAS,CAAC,MAAM;IACZ,MAAM2B,KAAK,GAAGT,WAAW,CAACU,EAAE,CAAC,QAAQ,EAAGC,CAAC,IAAKT,UAAU,CAACS,CAAC,CAAC,CAAC;IAE5D,OAAO,MAAMF,KAAK,CAAC,CAAC;EACxB,CAAC,EAAE,CAACT,WAAW,CAAC,CAAC;EAEjB,oBAAOnB,KAAA,CAAA+B,aAAA,CAAA/B,KAAA,CAAAgC,QAAA,QAAGV,SAAS,CAACF,OAAO,CAAI,CAAC;AACpC,CAAC;AAEDV,cAAc,CAACuB,WAAW,GAAG,gBAAgB;AAE7C,eAAevB,cAAc","ignoreList":[]}

package/lib/esm/components/area-provider/AreaContextProvider.js

@@ -1,16 +1,21 @@
 import React, { useMemo } from 'react';
 export const AreaContext = /*#__PURE__*/React.createContext({
-  shouldChangeColor: undefined
+  contentCardType: undefined,
+  shouldChangeColor: undefined,
+  shouldDisableListItemPadding: undefined
 });
 AreaContext.displayName = 'AreaContext';
-const AreaContextProvider = _ref => {
-  let {
-    children,
-    shouldChangeColor = true
-  } = _ref;
+const AreaContextProvider = ({
+  children,
+  contentCardType,
+  shouldChangeColor = true,
+  shouldDisableListItemPadding = false
+}) => {
   const providerValue = useMemo(() => ({
-    shouldChangeColor
-  }), [shouldChangeColor]);
+    contentCardType,
+    shouldChangeColor,
+    shouldDisableListItemPadding
+  }), [contentCardType, shouldChangeColor, shouldDisableListItemPadding]);
   return /*#__PURE__*/React.createElement(AreaContext.Provider, {
     value: providerValue
   }, children);

package/lib/esm/components/area-provider/AreaContextProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AreaContextProvider.js","names":["React","useMemo","AreaContext","createContext","shouldChangeColor","undefined","displayName","AreaContextProvider","_ref","children","providerValue","createElement","Provider","value"],"sources":["../../../../src/components/area-provider/AreaContextProvider.tsx"],"sourcesContent":["import React, { useMemo, type ReactNode } from 'react';\n\ninterface IAreaProviderContext {\n    shouldChangeColor?: boolean;\n}\n\nexport const AreaContext = React.createContext<IAreaProviderContext>({\n    shouldChangeColor: undefined,\n});\n\nAreaContext.displayName = 'AreaContext';\n\ninterface AreaContextProviderProps {\n    children: ReactNode;\n    shouldChangeColor?: boolean;\n}\n\nconst AreaContextProvider = ({ children, shouldChangeColor = true }: AreaContextProviderProps) => {\n    const providerValue = useMemo<IAreaProviderContext>(\n        () => ({\n            shouldChangeColor,\n        }),\n        [shouldChangeColor],\n    );\n\n    return <AreaContext.Provider value={providerValue}>{children}</AreaContext.Provider>;\n};\n\nAreaContextProvider.displayName = 'AreaContextProvider';\n\nexport default AreaContextProvider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAwB,OAAO;AAMtD,OAAO,MAAMC,WAAW,gBAAGF,KAAK,CAACG,aAAa,CAAuB;EACjEC,iBAAiB,EAAEC;AACvB,CAAC,CAAC;AAEFH,WAAW,CAACI,WAAW,GAAG,aAAa;AAOvC,MAAMC,mBAAmB,GAAGC,IAAA,IAAsE;EAAA,IAArE;IAAEC,QAAQ;IAAEL,iBAAiB,GAAG;EAA+B,CAAC,GAAAI,IAAA;EACzF,MAAME,aAAa,GAAGT,OAAO,CACzB,OAAO;IACHG;EACJ,CAAC,CAAC,EACF,CAACA,iBAAiB,CACtB,CAAC;EAED,oBAAOJ,KAAA,CAAAW,aAAA,CAACT,WAAW,CAACU,QAAQ;IAACC,KAAK,EAAEH;EAAc,GAAED,QAA+B,CAAC;AACxF,CAAC;AAEDF,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEvD,eAAeC,mBAAmB","ignoreList":[]}
+{"version":3,"file":"AreaContextProvider.js","names":["React","useMemo","AreaContext","createContext","contentCardType","undefined","shouldChangeColor","shouldDisableListItemPadding","displayName","AreaContextProvider","children","providerValue","createElement","Provider","value"],"sources":["../../../../src/components/area-provider/AreaContextProvider.tsx"],"sourcesContent":["import React, { useMemo, type ReactNode } from 'react';\nimport type { ContentCardType } from '../../types/contentCard';\n\ninterface IAreaProviderContext {\n    contentCardType?: ContentCardType;\n    shouldChangeColor?: boolean;\n    shouldDisableListItemPadding?: boolean;\n}\n\nexport const AreaContext = React.createContext<IAreaProviderContext>({\n    contentCardType: undefined,\n    shouldChangeColor: undefined,\n    shouldDisableListItemPadding: undefined,\n});\n\nAreaContext.displayName = 'AreaContext';\n\ninterface AreaContextProviderProps {\n    children: ReactNode;\n    contentCardType?: ContentCardType;\n    shouldChangeColor?: boolean;\n    shouldDisableListItemPadding?: boolean;\n}\n\nconst AreaContextProvider = ({\n    children,\n    contentCardType,\n    shouldChangeColor = true,\n    shouldDisableListItemPadding = false,\n}: AreaContextProviderProps) => {\n    const providerValue = useMemo<IAreaProviderContext>(\n        () => ({\n            contentCardType,\n            shouldChangeColor,\n            shouldDisableListItemPadding,\n        }),\n        [contentCardType, shouldChangeColor, shouldDisableListItemPadding],\n    );\n\n    return <AreaContext.Provider value={providerValue}>{children}</AreaContext.Provider>;\n};\n\nAreaContextProvider.displayName = 'AreaContextProvider';\n\nexport default AreaContextProvider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAwB,OAAO;AAStD,OAAO,MAAMC,WAAW,gBAAGF,KAAK,CAACG,aAAa,CAAuB;EACjEC,eAAe,EAAEC,SAAS;EAC1BC,iBAAiB,EAAED,SAAS;EAC5BE,4BAA4B,EAAEF;AAClC,CAAC,CAAC;AAEFH,WAAW,CAACM,WAAW,GAAG,aAAa;AASvC,MAAMC,mBAAmB,GAAGA,CAAC;EACzBC,QAAQ;EACRN,eAAe;EACfE,iBAAiB,GAAG,IAAI;EACxBC,4BAA4B,GAAG;AACT,CAAC,KAAK;EAC5B,MAAMI,aAAa,GAAGV,OAAO,CACzB,OAAO;IACHG,eAAe;IACfE,iBAAiB;IACjBC;EACJ,CAAC,CAAC,EACF,CAACH,eAAe,EAAEE,iBAAiB,EAAEC,4BAA4B,CACrE,CAAC;EAED,oBAAOP,KAAA,CAAAY,aAAA,CAACV,WAAW,CAACW,QAAQ;IAACC,KAAK,EAAEH;EAAc,GAAED,QAA+B,CAAC;AACxF,CAAC;AAEDD,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEvD,eAAeC,mBAAmB","ignoreList":[]}

package/lib/esm/components/badge/Badge.constants.js

@@ -0,0 +1,12 @@
+import { BadgeSize } from './Badge.types';
+export const BADGE_SIZES = {
+  [BadgeSize.SMALL]: {
+    font: '70%',
+    padding: '0 6px'
+  },
+  [BadgeSize.DEFAULT]: {
+    font: '80%',
+    padding: '2px 8px 0 8px'
+  }
+};
+//# sourceMappingURL=Badge.constants.js.map

package/lib/esm/components/badge/Badge.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.constants.js","names":["BadgeSize","BADGE_SIZES","SMALL","font","padding","DEFAULT"],"sources":["../../../../src/components/badge/Badge.constants.ts"],"sourcesContent":["import { BadgeSize } from './Badge.types';\n\nexport const BADGE_SIZES = {\n    [BadgeSize.SMALL]: { font: '70%', padding: '0 6px' },\n    [BadgeSize.DEFAULT]: { font: '80%', padding: '2px 8px 0 8px' },\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,eAAe;AAEzC,OAAO,MAAMC,WAAW,GAAG;EACvB,CAACD,SAAS,CAACE,KAAK,GAAG;IAAEC,IAAI,EAAE,KAAK;IAAEC,OAAO,EAAE;EAAQ,CAAC;EACpD,CAACJ,SAAS,CAACK,OAAO,GAAG;IAAEF,IAAI,EAAE,KAAK;IAAEC,OAAO,EAAE;EAAgB;AACjE,CAAC","ignoreList":[]}

package/lib/esm/components/badge/Badge.js

@@ -1,22 +1,25 @@
 import clsx from 'clsx';
 import React, { useRef } from 'react';
-import { useElementSize } from '../../hooks/useElementSize';
+import { useElementSize } from '../../hooks/element';
+import { BADGE_SIZES } from './Badge.constants';
 import { StyledBadge } from './Badge.styles';
-const Badge = _ref => {
-  let {
-    backgroundColor,
-    children,
-    className,
-    fontColor,
-    onClick
-  } = _ref;
+import { BadgeDesign, BadgeSize } from './Badge.types';
+const Badge = ({
+  backgroundColor,
+  children,
+  className,
+  fontColor,
+  onClick,
+  design = BadgeDesign.DEFAULT,
+  size = BadgeSize.DEFAULT
+}) => {
   const badgeClasses = clsx('beta-chayns-badge ellipsis', className);
   const badgeRef = useRef(null);
-  const size = useElementSize(badgeRef);
+  const elementSize = useElementSize(badgeRef);
 
   // Add 4px to the height to account for the padding
-  const borderRadius = size ? `${(size.height + 4) / 2}px` : '15px';
-  const minWidth = size ? `${size.height + 4}px` : '1.65rem';
+  const borderRadius = elementSize ? `${(elementSize.height + 4) / 2}px` : '15px';
+  const minWidth = elementSize ? `${elementSize.height + 4}px` : '1.65rem';
   return /*#__PURE__*/React.createElement(StyledBadge, {
     className: badgeClasses,
     onClick: onClick,
@@ -25,6 +28,8 @@ const Badge = _ref => {
     $borderRadius: borderRadius,
     $cursor: typeof onClick === 'function' ? 'pointer' : 'default',
     $fontColor: fontColor,
+    $design: design,
+    $size: BADGE_SIZES[size],
     $minWidth: minWidth
   }, children || '​');
 };

package/lib/esm/components/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["clsx","React","useRef","useElementSize","StyledBadge","Badge","_ref","backgroundColor","children","className","fontColor","onClick","badgeClasses","badgeRef","size","borderRadius","height","minWidth","createElement","ref","$backgroundColor","$borderRadius","$cursor","$fontColor","$minWidth","displayName"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, ReactNode, useRef, type CSSProperties, type MouseEventHandler } from 'react';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { StyledBadge } from './Badge.styles';\n\nexport type BadgeProps = {\n    /**\n     * The background color of the badge\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * The content of the badge\n     */\n    children?: ReactNode;\n    /**\n     * Additional class names for the badge element\n     */\n    className?: string;\n    /**\n     * The font color of the badge\n     */\n    fontColor?: CSSProperties['color'];\n    /**\n     * Function to be executed when the badge is clicked\n     */\n    onClick?: MouseEventHandler;\n};\n\nconst Badge: FC<BadgeProps> = ({ backgroundColor, children, className, fontColor, onClick }) => {\n    const badgeClasses = clsx('beta-chayns-badge ellipsis', className);\n\n    const badgeRef = useRef<HTMLDivElement>(null);\n\n    const size = useElementSize(badgeRef);\n\n    // Add 4px to the height to account for the padding\n    const borderRadius = size ? `${(size.height + 4) / 2}px` : '15px';\n    const minWidth = size ? `${size.height + 4}px` : '1.65rem';\n\n    return (\n        <StyledBadge\n            className={badgeClasses}\n            onClick={onClick}\n            ref={badgeRef}\n            $backgroundColor={backgroundColor}\n            $borderRadius={borderRadius}\n            $cursor={typeof onClick === 'function' ? 'pointer' : 'default'}\n            $fontColor={fontColor}\n            $minWidth={minWidth}\n        >\n            {children || '​'}\n        </StyledBadge>\n    );\n};\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,OAAOC,KAAK,IAAmBC,MAAM,QAAoD,OAAO;AAChG,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,WAAW,QAAQ,gBAAgB;AAyB5C,MAAMC,KAAqB,GAAGC,IAAA,IAAkE;EAAA,IAAjE;IAAEC,eAAe;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,SAAS;IAAEC;EAAQ,CAAC,GAAAL,IAAA;EACvF,MAAMM,YAAY,GAAGZ,IAAI,CAAC,4BAA4B,EAAES,SAAS,CAAC;EAElE,MAAMI,QAAQ,GAAGX,MAAM,CAAiB,IAAI,CAAC;EAE7C,MAAMY,IAAI,GAAGX,cAAc,CAACU,QAAQ,CAAC;;EAErC;EACA,MAAME,YAAY,GAAGD,IAAI,GAAG,GAAG,CAACA,IAAI,CAACE,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM;EACjE,MAAMC,QAAQ,GAAGH,IAAI,GAAG,GAAGA,IAAI,CAACE,MAAM,GAAG,CAAC,IAAI,GAAG,SAAS;EAE1D,oBACIf,KAAA,CAAAiB,aAAA,CAACd,WAAW;IACRK,SAAS,EAAEG,YAAa;IACxBD,OAAO,EAAEA,OAAQ;IACjBQ,GAAG,EAAEN,QAAS;IACdO,gBAAgB,EAAEb,eAAgB;IAClCc,aAAa,EAAEN,YAAa;IAC5BO,OAAO,EAAE,OAAOX,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;IAC/DY,UAAU,EAAEb,SAAU;IACtBc,SAAS,EAAEP;EAAS,GAEnBT,QAAQ,IAAI,GACJ,CAAC;AAEtB,CAAC;AAEDH,KAAK,CAACoB,WAAW,GAAG,OAAO;AAE3B,eAAepB,KAAK","ignoreList":[]}
+{"version":3,"file":"Badge.js","names":["clsx","React","useRef","useElementSize","BADGE_SIZES","StyledBadge","BadgeDesign","BadgeSize","Badge","backgroundColor","children","className","fontColor","onClick","design","DEFAULT","size","badgeClasses","badgeRef","elementSize","borderRadius","height","minWidth","createElement","ref","$backgroundColor","$borderRadius","$cursor","$fontColor","$design","$size","$minWidth","displayName"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, useRef } from 'react';\nimport { useElementSize } from '../../hooks/element';\nimport { BADGE_SIZES } from './Badge.constants';\nimport { StyledBadge } from './Badge.styles';\nimport { BadgeProps, BadgeDesign, BadgeSize } from './Badge.types';\n\nconst Badge: FC<BadgeProps> = ({\n    backgroundColor,\n    children,\n    className,\n    fontColor,\n    onClick,\n    design = BadgeDesign.DEFAULT,\n    size = BadgeSize.DEFAULT,\n}) => {\n    const badgeClasses = clsx('beta-chayns-badge ellipsis', className);\n\n    const badgeRef = useRef<HTMLDivElement>(null);\n\n    const elementSize = useElementSize(badgeRef);\n\n    // Add 4px to the height to account for the padding\n    const borderRadius = elementSize ? `${(elementSize.height + 4) / 2}px` : '15px';\n    const minWidth = elementSize ? `${elementSize.height + 4}px` : '1.65rem';\n\n    return (\n        <StyledBadge\n            className={badgeClasses}\n            onClick={onClick}\n            ref={badgeRef}\n            $backgroundColor={backgroundColor}\n            $borderRadius={borderRadius}\n            $cursor={typeof onClick === 'function' ? 'pointer' : 'default'}\n            $fontColor={fontColor}\n            $design={design}\n            $size={BADGE_SIZES[size]}\n            $minWidth={minWidth}\n        >\n            {children || '​'}\n        </StyledBadge>\n    );\n};\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,OAAOC,KAAK,IAAQC,MAAM,QAAQ,OAAO;AACzC,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,SAAqBC,WAAW,EAAEC,SAAS,QAAQ,eAAe;AAElE,MAAMC,KAAqB,GAAGA,CAAC;EAC3BC,eAAe;EACfC,QAAQ;EACRC,SAAS;EACTC,SAAS;EACTC,OAAO;EACPC,MAAM,GAAGR,WAAW,CAACS,OAAO;EAC5BC,IAAI,GAAGT,SAAS,CAACQ;AACrB,CAAC,KAAK;EACF,MAAME,YAAY,GAAGjB,IAAI,CAAC,4BAA4B,EAAEW,SAAS,CAAC;EAElE,MAAMO,QAAQ,GAAGhB,MAAM,CAAiB,IAAI,CAAC;EAE7C,MAAMiB,WAAW,GAAGhB,cAAc,CAACe,QAAQ,CAAC;;EAE5C;EACA,MAAME,YAAY,GAAGD,WAAW,GAAG,GAAG,CAACA,WAAW,CAACE,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM;EAC/E,MAAMC,QAAQ,GAAGH,WAAW,GAAG,GAAGA,WAAW,CAACE,MAAM,GAAG,CAAC,IAAI,GAAG,SAAS;EAExE,oBACIpB,KAAA,CAAAsB,aAAA,CAAClB,WAAW;IACRM,SAAS,EAAEM,YAAa;IACxBJ,OAAO,EAAEA,OAAQ;IACjBW,GAAG,EAAEN,QAAS;IACdO,gBAAgB,EAAEhB,eAAgB;IAClCiB,aAAa,EAAEN,YAAa;IAC5BO,OAAO,EAAE,OAAOd,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;IAC/De,UAAU,EAAEhB,SAAU;IACtBiB,OAAO,EAAEf,MAAO;IAChBgB,KAAK,EAAE1B,WAAW,CAACY,IAAI,CAAE;IACzBe,SAAS,EAAET;EAAS,GAEnBZ,QAAQ,IAAI,GACJ,CAAC;AAEtB,CAAC;AAEDF,KAAK,CAACwB,WAAW,GAAG,OAAO;AAE3B,eAAexB,KAAK","ignoreList":[]}

package/lib/esm/components/badge/Badge.styles.js

@@ -1,41 +1,42 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import { BadgeDesign } from './Badge.types';
 export const StyledBadge = styled.div`
-    background-color: ${_ref => {
-  let {
-    $backgroundColor,
-    theme
-  } = _ref;
-  return $backgroundColor ?? theme['secondary-202'];
-}};
-    border-radius: ${_ref2 => {
-  let {
-    $borderRadius
-  } = _ref2;
-  return $borderRadius;
-}};
-    color: ${_ref3 => {
-  let {
-    $fontColor,
-    theme
-  } = _ref3;
-  return $fontColor ?? theme.text;
-}};
-    display: inline-block;
-    font-size: 0.8rem;
-    min-width: ${_ref4 => {
-  let {
-    $minWidth
-  } = _ref4;
-  return $minWidth;
-}};
-    padding: 2px 6px;
-    line-height: 20px;
-    text-align: center;
-    cursor: ${_ref5 => {
-  let {
-    $cursor
-  } = _ref5;
-  return $cursor;
-}};
+    ${({
+  $backgroundColor,
+  theme,
+  $fontColor,
+  $design,
+  $cursor,
+  $borderRadius,
+  $size,
+  $minWidth
+}) => {
+  switch ($design) {
+    case BadgeDesign.BORDER:
+      return css`
+                    border-radius: 50px;
+                    border: 1px solid ${theme.primary};
+                    color: ${theme.primary};
+                    font-size: ${$size?.font};
+                    padding: ${$size?.padding};
+                    user-select: none;
+                    width: fit-content;
+                `;
+    case BadgeDesign.DEFAULT:
+    default:
+      return css`
+                    background-color: ${$backgroundColor ?? theme['secondary-202']};
+                    border-radius: ${$borderRadius};
+                    color: ${$fontColor ?? theme.text};
+                    display: inline-block;
+                    font-size: 0.8rem;
+                    min-width: ${$minWidth};
+                    padding: 2px 6px;
+                    line-height: 20px;
+                    text-align: center;
+                    cursor: ${$cursor};
+                `;
+  }
+}}
 `;
 //# sourceMappingURL=Badge.styles.js.map

package/lib/esm/components/badge/Badge.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.styles.js","names":["styled","StyledBadge","div","_ref","$backgroundColor","theme","_ref2","$borderRadius","_ref3","$fontColor","text","_ref4","$minWidth","_ref5","$cursor"],"sources":["../../../../src/components/badge/Badge.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledBadgeProps = WithTheme<{\n    $cursor: CSSProperties['cursor'];\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $borderRadius: CSSProperties['borderRadius'];\n    $fontColor?: CSSProperties['color'];\n    $minWidth: CSSProperties['minWidth'];\n}>;\n\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n    background-color: ${({ $backgroundColor, theme }: StyledBadgeProps) =>\n        $backgroundColor ?? theme['secondary-202']};\n    border-radius: ${({ $borderRadius }) => $borderRadius};\n    color: ${({ $fontColor, theme }: StyledBadgeProps) => $fontColor ?? theme.text};\n    display: inline-block;\n    font-size: 0.8rem;\n    min-width: ${({ $minWidth }) => $minWidth};\n    padding: 2px 6px;\n    line-height: 20px;\n    text-align: center;\n    cursor: ${({ $cursor }) => $cursor};\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAWtC,OAAO,MAAMC,WAAW,GAAGD,MAAM,CAACE,GAAqB;AACvD,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,gBAAgB;IAAEC;EAAwB,CAAC,GAAAF,IAAA;EAAA,OAC9DC,gBAAgB,IAAIC,KAAK,CAAC,eAAe,CAAC;AAAA;AAClD,qBAAqBC,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAAKC,aAAa;AAAA;AACzD,aAAaC,KAAA;EAAA,IAAC;IAAEC,UAAU;IAAEJ;EAAwB,CAAC,GAAAG,KAAA;EAAA,OAAKC,UAAU,IAAIJ,KAAK,CAACK,IAAI;AAAA;AAClF;AACA;AACA,iBAAiBC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAKC,SAAS;AAAA;AAC7C;AACA;AACA;AACA,cAAcC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAKC,OAAO;AAAA;AACtC,CAAC","ignoreList":[]}
+{"version":3,"file":"Badge.styles.js","names":["styled","css","BadgeDesign","StyledBadge","div","$backgroundColor","theme","$fontColor","$design","$cursor","$borderRadius","$size","$minWidth","BORDER","primary","font","padding","DEFAULT","text"],"sources":["../../../../src/components/badge/Badge.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { BadgeDesign } from './Badge.types';\n\ntype StyledBadgeProps = WithTheme<{\n    $cursor: CSSProperties['cursor'];\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $borderRadius: CSSProperties['borderRadius'];\n    $fontColor?: CSSProperties['color'];\n    $minWidth: CSSProperties['minWidth'];\n    $size?: { font: CSSProperties['fontSize']; padding: CSSProperties['padding'] };\n    $design: BadgeDesign;\n}>;\n\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n    ${({\n        $backgroundColor,\n        theme,\n        $fontColor,\n        $design,\n        $cursor,\n        $borderRadius,\n        $size,\n        $minWidth,\n    }: StyledBadgeProps) => {\n        switch ($design) {\n            case BadgeDesign.BORDER:\n                return css`\n                    border-radius: 50px;\n                    border: 1px solid ${theme.primary};\n                    color: ${theme.primary};\n                    font-size: ${$size?.font};\n                    padding: ${$size?.padding};\n                    user-select: none;\n                    width: fit-content;\n                `;\n            case BadgeDesign.DEFAULT:\n            default:\n                return css`\n                    background-color: ${$backgroundColor ?? theme['secondary-202']};\n                    border-radius: ${$borderRadius};\n                    color: ${$fontColor ?? theme.text};\n                    display: inline-block;\n                    font-size: 0.8rem;\n                    min-width: ${$minWidth};\n                    padding: 2px 6px;\n                    line-height: 20px;\n                    text-align: center;\n                    cursor: ${$cursor};\n                `;\n        }\n    }}\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,WAAW,QAAQ,eAAe;AAY3C,OAAO,MAAMC,WAAW,GAAGH,MAAM,CAACI,GAAqB;AACvD,MAAM,CAAC;EACCC,gBAAgB;EAChBC,KAAK;EACLC,UAAU;EACVC,OAAO;EACPC,OAAO;EACPC,aAAa;EACbC,KAAK;EACLC;AACc,CAAC,KAAK;EACpB,QAAQJ,OAAO;IACX,KAAKN,WAAW,CAACW,MAAM;MACnB,OAAOZ,GAAG;AAC1B;AACA,wCAAwCK,KAAK,CAACQ,OAAO;AACrD,6BAA6BR,KAAK,CAACQ,OAAO;AAC1C,iCAAiCH,KAAK,EAAEI,IAAI;AAC5C,+BAA+BJ,KAAK,EAAEK,OAAO;AAC7C;AACA;AACA,iBAAiB;IACL,KAAKd,WAAW,CAACe,OAAO;IACxB;MACI,OAAOhB,GAAG;AAC1B,wCAAwCI,gBAAgB,IAAIC,KAAK,CAAC,eAAe,CAAC;AAClF,qCAAqCI,aAAa;AAClD,6BAA6BH,UAAU,IAAID,KAAK,CAACY,IAAI;AACrD;AACA;AACA,iCAAiCN,SAAS;AAC1C;AACA;AACA;AACA,8BAA8BH,OAAO;AACrC,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/esm/components/badge/Badge.types.js

@@ -0,0 +1,22 @@
+/**
+ * Enum for the design variants of the Badge component.
+ */
+export let BadgeDesign = /*#__PURE__*/function (BadgeDesign) {
+  /** Default design with background color and no border */
+  BadgeDesign["DEFAULT"] = "default";
+  /** Design with border only, no background color */
+  BadgeDesign["BORDER"] = "border";
+  return BadgeDesign;
+}({});
+
+/**
+ * Enum for the size variants of the Badge component.
+ */
+export let BadgeSize = /*#__PURE__*/function (BadgeSize) {
+  /** Small size */
+  BadgeSize["SMALL"] = "small";
+  /** Default size */
+  BadgeSize["DEFAULT"] = "default";
+  return BadgeSize;
+}({});
+//# sourceMappingURL=Badge.types.js.map

package/lib/esm/components/badge/Badge.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.types.js","names":["BadgeDesign","BadgeSize"],"sources":["../../../../src/components/badge/Badge.types.ts"],"sourcesContent":["import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';\n\n/**\n * Enum for the design variants of the Badge component.\n */\nexport enum BadgeDesign {\n    /** Default design with background color and no border */\n    DEFAULT = 'default',\n    /** Design with border only, no background color */\n    BORDER = 'border',\n}\n\n/**\n * Enum for the size variants of the Badge component.\n */\nexport enum BadgeSize {\n    /** Small size */\n    SMALL = 'small',\n    /** Default size */\n    DEFAULT = 'default',\n}\n\nexport type BadgeProps = {\n    /**\n     * The background color of the badge.\n     * @description\n     * Allows customization of the badge's background color. Accepts any valid CSS color value, such as hex codes, color names, or RGB values.\n     * This can be used to match the badge with the application's theme or to highlight specific information.\n     * @optional\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * The content of the badge.\n     * @description\n     * The content to be displayed inside the badge. This can be text, icons, or any React node.\n     * If no content is provided, a zero-width space is used to maintain the badge's shape.\n     * @optional\n     */\n    children?: ReactNode;\n    /**\n     * Additional class names for the badge element.\n     * @description\n     * Allows adding custom CSS classes to the badge for further styling or integration with CSS frameworks.\n     * Multiple classes can be provided as a space-separated string.\n     * @optional\n     */\n    className?: string;\n    /**\n     * The design of the Badge.\n     * @description\n     * Determines the visual style of the badge. Options include 'default' for a solid background and 'border' for a bordered appearance.\n     * This affects how the badge integrates with the surrounding UI elements.\n     * @optional\n     * @default BadgeDesign.DEFAULT\n     */\n    design?: BadgeDesign;\n    /**\n     * The font color of the badge.\n     * @description\n     * Specifies the color of the text or content inside the badge. Accepts any valid CSS color value.\n     * Useful for ensuring readability against different background colors.\n     * @optional\n     */\n    fontColor?: CSSProperties['color'];\n    /**\n     * Function to be executed when the badge is clicked.\n     * @description\n     * A callback function that is triggered when the user clicks on the badge. This can be used to handle interactions,\n     * such as opening a modal, navigating to a page, or performing any custom action.\n     * @optional\n     */\n    onClick?: MouseEventHandler;\n    /**\n     * The size of the badge.\n     * @description\n     * Controls the size of the badge, affecting font size and padding. 'small' is more compact, while 'default' provides a standard size.\n     * Choose based on the context and available space in the UI.\n     * @optional\n     * @default BadgeSize.DEFAULT\n     */\n    size?: BadgeSize;\n};\n"],"mappings":"AAEA;AACA;AACA;AACA,WAAYA,WAAW,0BAAXA,WAAW;EACnB;EADQA,WAAW;EAGnB;EAHQA,WAAW;EAAA,OAAXA,WAAW;AAAA;;AAOvB;AACA;AACA;AACA,WAAYC,SAAS,0BAATA,SAAS;EACjB;EADQA,SAAS;EAGjB;EAHQA,SAAS;EAAA,OAATA,SAAS;AAAA","ignoreList":[]}

package/lib/esm/components/button/Button.js

@@ -1,23 +1,23 @@
 import clsx from 'clsx';
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 import React, { useMemo } from 'react';
 import { useTheme } from 'styled-components';
 import Icon from '../icon/Icon';
 import { StyledIconWrapper, StyledMotionButton, StyledMotionChildrenWrapper, StyledMotionWaitCursorWrapper } from './Button.styles';
 import WaitCursor from './wait-cursor/WaitCursor';
-const Button = _ref => {
-  let {
-    children,
-    className,
-    icon,
-    isDisabled,
-    isSecondary,
-    onClick,
-    shouldShowWaitCursor,
-    shouldStopPropagation,
-    shouldShowAsSelectButton = false,
-    shouldShowTextAsRobotoMedium = true
-  } = _ref;
+const Button = ({
+  children,
+  className,
+  icon,
+  isDisabled,
+  isSecondary,
+  onClick,
+  shouldShowWaitCursor,
+  shouldStopPropagation,
+  shouldShowAsSelectButton = false,
+  shouldShowTextAsRobotoMedium = true,
+  buttonDesign
+}) => {
   const handleClick = event => {
     if (shouldStopPropagation) {
       event.stopPropagation();
@@ -26,12 +26,13 @@ const Button = _ref => {
   };
   const buttonClasses = clsx('beta-chayns-button ellipsis', className);
   const theme = useTheme();
+  const effectiveButtonDesign = buttonDesign ?? theme.buttonDesign;
   const iconColor = useMemo(() => {
     if (isSecondary) {
       return theme.text;
     }
-    return theme.buttonDesign === '2' ? theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white' : theme.buttonColor ?? 'white';
-  }, [isSecondary, theme.buttonBackgroundColor, theme.buttonColor, theme.buttonDesign, theme.text]);
+    return effectiveButtonDesign === 2 ? theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white' : theme.buttonColor ?? 'white';
+  }, [isSecondary, theme.buttonBackgroundColor, theme.buttonColor, effectiveButtonDesign, theme.text]);
   const backgroundColor = useMemo(() => {
     let color;
     if (isSecondary || shouldShowAsSelectButton) {
@@ -39,13 +40,13 @@ const Button = _ref => {
     } else {
       color = theme.buttonBackgroundColor ?? theme['408'];
     }
-    if (theme.buttonDesign === '2') {
+    if (effectiveButtonDesign === 2) {
       color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;
     }
     return color;
-  }, [isSecondary, shouldShowAsSelectButton, theme]);
+  }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);
   const tapStyles = useMemo(() => {
-    if (theme.buttonDesign === '2') {
+    if (effectiveButtonDesign === 2) {
       return {
         backgroundColor: isSecondary || shouldShowAsSelectButton ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)` : `${theme.buttonBackgroundColor ?? ''}40`
       };
@@ -53,9 +54,9 @@ const Button = _ref => {
     return {
       opacity: 0.6
     };
-  }, [isSecondary, shouldShowAsSelectButton, theme]);
+  }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);
   const hoverStyles = useMemo(() => {
-    if (theme.buttonDesign === '2') {
+    if (effectiveButtonDesign === 2) {
       return {
         backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)`
       };
@@ -63,7 +64,7 @@ const Button = _ref => {
     return {
       opacity: 1
     };
-  }, [theme]);
+  }, [theme, effectiveButtonDesign]);
   return /*#__PURE__*/React.createElement(StyledMotionButton, {
     $shouldShowTextAsRobotoMedium: shouldShowTextAsRobotoMedium,
     $shouldShowAsSelectButton: shouldShowAsSelectButton,
@@ -74,6 +75,7 @@ const Button = _ref => {
     $hasChildren: !!children,
     $hasIcon: typeof icon === 'string' && icon !== '',
     $isSecondary: isSecondary,
+    $effectiveButtonDesign: effectiveButtonDesign,
     onClick: handleClick,
     style: {
       visibility: !backgroundColor ? 'hidden' : 'visible',

package/lib/esm/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["clsx","AnimatePresence","React","useMemo","useTheme","Icon","StyledIconWrapper","StyledMotionButton","StyledMotionChildrenWrapper","StyledMotionWaitCursorWrapper","WaitCursor","Button","_ref","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","shouldShowAsSelectButton","shouldShowTextAsRobotoMedium","handleClick","event","stopPropagation","buttonClasses","theme","iconColor","text","buttonDesign","buttonColor","buttonBackgroundColor","backgroundColor","color","tapStyles","opacity","hoverStyles","createElement","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$shouldShowWaitCursor","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","style","visibility","initial","animate","transition","duration","whileTap","whileHover","icons","width","exit","key","overflow","shouldHideBackground","displayName"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEventHandler, ReactNode, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledIconWrapper,\n    StyledMotionButton,\n    StyledMotionChildrenWrapper,\n    StyledMotionWaitCursorWrapper,\n} from './Button.styles';\nimport WaitCursor from './wait-cursor/WaitCursor';\n\nexport type ButtonProps = {\n    /**\n     * The label of the button\n     */\n    children?: ReactNode;\n    /**\n     * Additional class names for the button element\n     */\n    className?: string;\n    /**\n     * An icon that is displayed on the left-hand side of the button text\n     */\n    icon?: string;\n    /**\n     * Disables the button so that it cannot be clicked anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Displays the button in the secondary style\n     */\n    isSecondary?: boolean;\n    /**\n     * Function to be executed when the button is clicked\n     */\n    onClick: MouseEventHandler<HTMLButtonElement>;\n    /**\n     * Whether the button should be displayed as a selectButton.\n     */\n    shouldShowAsSelectButton?: boolean;\n    /**\n     * Whether the text should be 'Roboto Medium'\n     */\n    shouldShowTextAsRobotoMedium?: boolean;\n    /**\n     * Shows a wait cursor instead of button text\n     */\n    shouldShowWaitCursor?: boolean;\n    /**\n     * Stops event propagation on click\n     */\n    shouldStopPropagation?: boolean;\n};\n\nconst Button: FC<ButtonProps> = ({\n    children,\n    className,\n    icon,\n    isDisabled,\n    isSecondary,\n    onClick,\n    shouldShowWaitCursor,\n    shouldStopPropagation,\n    shouldShowAsSelectButton = false,\n    shouldShowTextAsRobotoMedium = true,\n}) => {\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        onClick(event);\n    };\n\n    const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n    const theme: Theme = useTheme();\n\n    const iconColor = useMemo(() => {\n        if (isSecondary) {\n            return theme.text;\n        }\n\n        return theme.buttonDesign === '2'\n            ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n            : (theme.buttonColor ?? 'white');\n    }, [\n        isSecondary,\n        theme.buttonBackgroundColor,\n        theme.buttonColor,\n        theme.buttonDesign,\n        theme.text,\n    ]);\n\n    const backgroundColor = useMemo(() => {\n        let color;\n\n        if (isSecondary || shouldShowAsSelectButton) {\n            color = theme['202'];\n        } else {\n            color = theme.buttonBackgroundColor ?? theme['408'];\n        }\n\n        if (theme.buttonDesign === '2') {\n            color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n        }\n\n        return color;\n    }, [isSecondary, shouldShowAsSelectButton, theme]);\n\n    const tapStyles = useMemo(() => {\n        if (theme.buttonDesign === '2') {\n            return {\n                backgroundColor:\n                    isSecondary || shouldShowAsSelectButton\n                        ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)`\n                        : `${theme.buttonBackgroundColor ?? ''}40`,\n            };\n        }\n\n        return { opacity: 0.6 };\n    }, [isSecondary, shouldShowAsSelectButton, theme]);\n\n    const hoverStyles = useMemo(() => {\n        if (theme.buttonDesign === '2') {\n            return { backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)` };\n        }\n\n        return { opacity: 1 };\n    }, [theme]);\n\n    return (\n        <StyledMotionButton\n            $shouldShowTextAsRobotoMedium={shouldShowTextAsRobotoMedium}\n            $shouldShowAsSelectButton={shouldShowAsSelectButton}\n            $shouldShowWaitCursor={shouldShowWaitCursor}\n            className={buttonClasses}\n            disabled={isDisabled}\n            $isDisabled={isDisabled}\n            $hasChildren={!!children}\n            $hasIcon={typeof icon === 'string' && icon !== ''}\n            $isSecondary={isSecondary}\n            onClick={handleClick}\n            style={{ visibility: !backgroundColor ? 'hidden' : 'visible', backgroundColor }}\n            initial={{ opacity: 0.5 }}\n            animate={{\n                opacity: isDisabled ? 0.5 : 1,\n            }}\n            transition={{ visibility: { duration: 0 } }}\n            whileTap={isDisabled ? {} : { ...tapStyles }}\n            whileHover={isDisabled ? {} : { ...hoverStyles }}\n        >\n            <AnimatePresence initial={false}>\n                {icon && (\n                    <StyledIconWrapper>\n                        <Icon color={iconColor} icons={[icon]} />\n                    </StyledIconWrapper>\n                )}\n                {shouldShowWaitCursor && (\n                    <StyledMotionWaitCursorWrapper\n                        animate={{ opacity: 1, width: 40 }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"wait-cursor\"\n                        style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        <WaitCursor color={iconColor ?? 'white'} shouldHideBackground />\n                    </StyledMotionWaitCursorWrapper>\n                )}\n                {!shouldShowWaitCursor && children && (\n                    <StyledMotionChildrenWrapper\n                        animate={{ opacity: 1, width: 'auto' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"children\"\n                        // style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        {children}\n                    </StyledMotionChildrenWrapper>\n                )}\n            </AnimatePresence>\n        </StyledMotionButton>\n    );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Button.js","names":["clsx","AnimatePresence","React","useMemo","useTheme","Icon","StyledIconWrapper","StyledMotionButton","StyledMotionChildrenWrapper","StyledMotionWaitCursorWrapper","WaitCursor","Button","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","shouldShowAsSelectButton","shouldShowTextAsRobotoMedium","buttonDesign","handleClick","event","stopPropagation","buttonClasses","theme","effectiveButtonDesign","iconColor","text","buttonColor","buttonBackgroundColor","backgroundColor","color","tapStyles","opacity","hoverStyles","createElement","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$shouldShowWaitCursor","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","$effectiveButtonDesign","style","visibility","initial","animate","transition","duration","whileTap","whileHover","icons","width","exit","key","overflow","shouldHideBackground","displayName"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEventHandler, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledIconWrapper,\n    StyledMotionButton,\n    StyledMotionChildrenWrapper,\n    StyledMotionWaitCursorWrapper,\n} from './Button.styles';\nimport type { ButtonProps } from './Button.types';\nimport WaitCursor from './wait-cursor/WaitCursor';\n\nconst Button: FC<ButtonProps> = ({\n    children,\n    className,\n    icon,\n    isDisabled,\n    isSecondary,\n    onClick,\n    shouldShowWaitCursor,\n    shouldStopPropagation,\n    shouldShowAsSelectButton = false,\n    shouldShowTextAsRobotoMedium = true,\n    buttonDesign,\n}) => {\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        onClick(event);\n    };\n\n    const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n    const theme = useTheme() as Theme;\n\n    const effectiveButtonDesign = (buttonDesign ?? theme.buttonDesign) as number;\n\n    const iconColor = useMemo(() => {\n        if (isSecondary) {\n            return theme.text;\n        }\n\n        return effectiveButtonDesign === 2\n            ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n            : (theme.buttonColor ?? 'white');\n    }, [\n        isSecondary,\n        theme.buttonBackgroundColor,\n        theme.buttonColor,\n        effectiveButtonDesign,\n        theme.text,\n    ]);\n\n    const backgroundColor = useMemo(() => {\n        let color;\n\n        if (isSecondary || shouldShowAsSelectButton) {\n            color = theme['202'];\n        } else {\n            color = theme.buttonBackgroundColor ?? theme['408'];\n        }\n\n        if (effectiveButtonDesign === 2) {\n            color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n        }\n\n        return color;\n    }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n    const tapStyles = useMemo(() => {\n        if (effectiveButtonDesign === 2) {\n            return {\n                backgroundColor:\n                    isSecondary || shouldShowAsSelectButton\n                        ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)`\n                        : `${theme.buttonBackgroundColor ?? ''}40`,\n            };\n        }\n\n        return { opacity: 0.6 };\n    }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n    const hoverStyles = useMemo(() => {\n        if (effectiveButtonDesign === 2) {\n            return { backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)` };\n        }\n\n        return { opacity: 1 };\n    }, [theme, effectiveButtonDesign]);\n\n    return (\n        <StyledMotionButton\n            $shouldShowTextAsRobotoMedium={shouldShowTextAsRobotoMedium}\n            $shouldShowAsSelectButton={shouldShowAsSelectButton}\n            $shouldShowWaitCursor={shouldShowWaitCursor}\n            className={buttonClasses}\n            disabled={isDisabled}\n            $isDisabled={isDisabled}\n            $hasChildren={!!children}\n            $hasIcon={typeof icon === 'string' && icon !== ''}\n            $isSecondary={isSecondary}\n            $effectiveButtonDesign={effectiveButtonDesign}\n            onClick={handleClick}\n            style={{ visibility: !backgroundColor ? 'hidden' : 'visible', backgroundColor }}\n            initial={{ opacity: 0.5 }}\n            animate={{\n                opacity: isDisabled ? 0.5 : 1,\n            }}\n            transition={{ visibility: { duration: 0 } }}\n            whileTap={isDisabled ? {} : { ...tapStyles }}\n            whileHover={isDisabled ? {} : { ...hoverStyles }}\n        >\n            <AnimatePresence initial={false}>\n                {icon && (\n                    <StyledIconWrapper>\n                        <Icon color={iconColor} icons={[icon]} />\n                    </StyledIconWrapper>\n                )}\n                {shouldShowWaitCursor && (\n                    <StyledMotionWaitCursorWrapper\n                        animate={{ opacity: 1, width: 40 }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"wait-cursor\"\n                        style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        <WaitCursor color={iconColor ?? 'white'} shouldHideBackground />\n                    </StyledMotionWaitCursorWrapper>\n                )}\n                {!shouldShowWaitCursor && children && (\n                    <StyledMotionChildrenWrapper\n                        animate={{ opacity: 1, width: 'auto' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"children\"\n                        // style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        {children}\n                    </StyledMotionChildrenWrapper>\n                )}\n            </AnimatePresence>\n        </StyledMotionButton>\n    );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/button/Button.styles.js

@@ -1,42 +1,39 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
 export const StyledMotionButton = styled(motion.button)`
-    ${_ref => {
-  let {
-    $shouldShowTextAsRobotoMedium,
-    $shouldShowAsSelectButton
-  } = _ref;
-  return $shouldShowTextAsRobotoMedium && !$shouldShowAsSelectButton && css`
+    ${({
+  $shouldShowTextAsRobotoMedium,
+  $shouldShowAsSelectButton
+}) => $shouldShowTextAsRobotoMedium && !$shouldShowAsSelectButton && css`
             font-size: 110%;
             font-family: 'Roboto Medium', serif;
-        `;
-}}
+        `}
 
     align-items: center;
 
-    ${_ref2 => {
-  let {
-    $isSecondary,
-    $shouldShowAsSelectButton,
-    theme
-  } = _ref2;
+    ${({
+  $isSecondary,
+  $shouldShowAsSelectButton,
+  $effectiveButtonDesign,
+  theme
+}) => {
   if ($isSecondary || $shouldShowAsSelectButton) {
     return css`
                 color: ${theme.text};
             `;
   }
   return css`
-            color: ${theme.buttonDesign === '2' ? theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white' : theme.buttonColor ?? 'white'};
+            color: ${$effectiveButtonDesign === 2 ? theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white' : theme.buttonColor ?? 'white'};
         `;
 }}
 
-    ${_ref3 => {
-  let {
-    theme,
-    $isSecondary,
-    $shouldShowAsSelectButton
-  } = _ref3;
-  if (theme.buttonDesign === '2' && !$shouldShowAsSelectButton) {
+    ${({
+  theme,
+  $isSecondary,
+  $shouldShowAsSelectButton,
+  $effectiveButtonDesign
+}) => {
+  if ($effectiveButtonDesign === 2 && !$shouldShowAsSelectButton) {
     return css`
                 border: 1px solid ${$isSecondary ? theme['202'] : theme.buttonBackgroundColor};
                 box-shadow: none;
@@ -49,24 +46,22 @@ export const StyledMotionButton = styled(motion.button)`
 }}
 
     border-radius: 3px;
-    cursor: ${_ref4 => {
-  let {
-    $isDisabled
-  } = _ref4;
-  return $isDisabled ? 'default' : 'pointer';
-}};
+    cursor: ${({
+  $isDisabled
+}) => $isDisabled ? 'default' : 'pointer'};
     display: inline-flex;
+    flex: 0 0 auto;
     line-height: 22px;
     min-height: 32px;
     position: relative;
     user-select: none;
+    width: fit-content;
 
-    ${_ref5 => {
-  let {
-    $hasIcon,
-    $hasChildren,
-    $shouldShowWaitCursor
-  } = _ref5;
+    ${({
+  $hasIcon,
+  $hasChildren,
+  $shouldShowWaitCursor
+}) => {
   if ($shouldShowWaitCursor) {
     return css`
                 padding: 4px 12px;
@@ -87,7 +82,6 @@ export const StyledMotionButton = styled(motion.button)`
         `;
 }}
 `;
-//
 export const StyledIconWrapper = styled.span`
     align-items: center;
     background-color: rgba(255, 255, 255, 0.2);