@bikdotai/bik-component-library 0.0.840-tools-beta.5 → 0.0.841-beta.0

package/dist/esm/components/button/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sources":["../../../../src/components/button/themes.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tButtonLarge,\n\tButtonLargeAI,\n\tButtonRegular,\n\tButtonRegularAI,\n} from '../TypographyStyle';\nimport { Size, Type } from './model';\n\nexport const getBackgroundColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n\tbuttonColor?: string,\n): string => {\n\tif (type === 'special') return COLORS.background.brandVeryLight;\n\tif (type === 'secondaryGray') return 'transparent';\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn 'transparent';\n\t\t}\n\t\treturn darkMode ? COLORS.surface.hovered : COLORS.surface.subdued;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn buttonColor\n\t\t\t\t? buttonColor\n\t\t\t\t: inverse\n\t\t\t\t? COLORS.background.warning.vibrant\n\t\t\t\t: COLORS.background.inverseLight;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.background.negative.vibrant;\n\t\tcase 'tertiary':\n\t\t\treturn 'transparent';\n\t\tdefault:\n\t\t\treturn 'transparent';\n\t}\n};\n\nexport const getColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n): string => {\n\tif (type === 'special') return COLORS.background.inverseLight;\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn inverse ? COLORS.content.inactive : COLORS.content.brand;\n\t\t}\n\t\treturn darkMode ? COLORS.content.primary : COLORS.content.secondary;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn inverse ? COLORS.content.primary : COLORS.content.primaryInverse;\n\t\tcase 'tertiaryGray':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tcase 'dashBold':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'dashRegular':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'ai':\n\t\t\treturn COLORS.content.ai;\n\t\tdefault:\n\t\t\treturn inverse ? COLORS.content.primaryInverse : COLORS.stroke.brand;\n\t}\n};\n\nexport const getDisabledTextColor = (inverse?: boolean) => {\n\tif (inverse) {\n\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t}\n\treturn COLORS.content.inactive;\n};\n\nexport const getPadding = (type: Type, size: Size) => {\n\tif (type === 'text') {\n\t\treturn '0px';\n\t} else if (size === 'xs') {\n\t\treturn '4px 6px';\n\t} else if (size === 'chip') {\n\t\treturn '4px 8px';\n\t} else if (size === 'small') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '6px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '6px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '6px 12px';\n\t\t}\n\t} else if (size === 'medium') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '10px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '10px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '10px 12px';\n\t\t}\n\t} else if (size === 'large') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '14px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '14px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '14px 12px';\n\t\t}\n\t}\n};\nexport const GetButtonTextComponent = (\n\tsize: Size,\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (!disabled && type === 'ai') {\n\t\tif (size === 'small') {\n\t\t\treturn ButtonRegularAI;\n\t\t} else {\n\t\t\treturn ButtonLargeAI;\n\t\t}\n\t}\n\n\tif (type === 'dashRegular') {\n\t\treturn BodySecondary;\n\t}\n\tif (size === 'chip' || size === 'xs') {\n\t\treturn BodyCaption;\n\t} else if (size === 'small') {\n\t\treturn ButtonRegular;\n\t}\n\treturn ButtonLarge;\n};\n\nexport const getBorderColor = (\n\ttype: Type,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (error) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\n\tif (inverse) {\n\t\treturn COLORS.surface.standard;\n\t}\n\tif (type == 'secondary') {\n\t\treturn COLORS.stroke.brand;\n\t}\n\treturn COLORS.content.placeholder;\n};\n\nexport const getBorder = (\n\tversion: '1.0' | '2.0' | '3.0',\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (type == 'text') {\n\t\treturn 'border: none;';\n\t}\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t};`;\n\t}\n\tif (inverse) {\n\t\tif (type === 'secondary') {\n\t\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\t\ttype,\n\t\t\t\tinverse,\n\t\t\t\terror,\n\t\t\t)};`;\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\ttype,\n\t\t\tfalse,\n\t\t\terror,\n\t\t)};`;\n\t}\n\treturn 'border: none;';\n};\n\nexport const getLinearGradientValue = (size: Size): string => {\n\tif (size === 'medium') {\n\t\treturn `5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px`;\n\t}\n\treturn `6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px`;\n};\n\n/**\n * Adjusts the brightness of a given hex color by a specified percentage.\n * Below function is used to generate a hover effect for button backgrounds.\n *\n * @param {string} color - The hex color code to be adjusted (e.g., \"#ff0000\").\n * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.\n * @returns {string} - The adjusted hex color code.\n *\n * @example\n * // Darken the color #ff0000 (red) by 10%\n * const darkerRed = getHoverButtonBackgroundCustom(\"#ff0000\", 10);\n * console.log(darkerRed); // Output might be \"#e60000\"\n */\n\nexport const getHoverButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 * percent),\n\t\tR = (num >> 16) - amt,\n\t\tG = ((num >> 8) & 0x00ff) - amt,\n\t\tB = (num & 0x0000ff) - amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.max(R, 0) << 16) +\n\t\t(Math.max(G, 0) << 8) +\n\t\tMath.max(B, 0)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\n/**\n * Generates a new color by adjusting the brightness of the given color by a specified percentage.\n *\n * @param color - The original color in hexadecimal format (e.g., \"#RRGGBB\").\n * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.\n * @returns The new color in hexadecimal format after adjusting the brightness.\n *\n * @example\n * // Lighten the color by 20%\n * const newColor = getLoadingButtonBackgroundCustom(\"#ff0000\", 20); // \"#ff3333\"\n *\n * @example\n * // Darken the color by 10%\n * const newColor = getLoadingButtonBackgroundCustom(\"#00ff00\", -10); // \"#00e600\"\n */\nexport const getLoadingButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 * percent),\n\t\tR = (num >> 16) + amt,\n\t\tG = ((num >> 8) & 0x00ff) + amt,\n\t\tB = (num & 0x0000ff) + amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.min(R, 255) << 16) +\n\t\t(Math.min(G, 255) << 8) +\n\t\tMath.min(B, 255)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\nexport const getHoverButtonBackground = (type: Type, inverse?: boolean) => {\n\tif (type === 'ai') {\n\t\treturn `background: ${COLORS.surface.aiLight};`;\n\t}\n\n\tif (type === 'text') {\n\t\treturn `background-color:transparent;`;\n\t}\n\tif (type === 'special' || type === 'secondaryGray') {\n\t\treturn '';\n\t}\n\tif (!inverse && type !== 'primary') {\n\t\treturn `background-color: #000000;\n\t\t\t\topacity: 0.03;`;\n\t}\n\n\treturn ``;\n};\n\nexport const getHoverButtonTextDecorationStyle = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\treturn `text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n};\n\nexport const generateInverseHoverBackground = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\tif (type === 'primary') {\n\t\treturn `background-color: ${COLORS.stroke.warning.lightAlt};`;\n\t}\n\treturn `background-color: rgba(255, 255, 255, 0.1)`;\n};\n\nexport const generateDisabledStyling = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.base}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: transparent;`;\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\treturn inverse\n\t\t\t? 'background-color: rgba(255,255,255,0.3);'\n\t\t\t: `background-color: ${COLORS.background.inactive};`;\n\t} else if (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid rgba(255, 255, 255, 0.5);`\n\t\t\t: `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\treturn '';\n};\n\nexport const getDashedBorderStyling = (\n\ttype: Type,\n\tsize: Size,\n\tborderColor: string = getBorderColor(type, false),\n) => {\n\treturn `\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t`;\n};\n\nexport const getClickEffect = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'text') {\n\t\treturn `background-color: ${COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n\t}\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandLight}; border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.hovered}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${COLORS.background.brandLight};`;\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\tif (inverse) {\n\t\t\treturn `background-color: ${COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`;\n\t\t}\n\t\treturn 'box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);';\n\t} else if (\n\t\ttype === 'secondary' ||\n\t\ttype === 'tertiary' ||\n\t\ttype === 'tertiaryGray' ||\n\t\ttype.startsWith('dash')\n\t) {\n\t\treturn inverse\n\t\t\t? `background-color: ${COLORS.background.inverseLight}  !important;`\n\t\t\t: `background-color: ${COLORS.background.brandLight};`;\n\t}\n};\nexport const getLoadingBackground = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tbuttonColor?: string,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandVeryLight};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.subdued};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: ${COLORS.background.base};`;\n\t}\n\tif (type === 'primary') {\n\t\tif (buttonColor) {\n\t\t\treturn `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\tbuttonColor,\n\t\t\t\t50,\n\t\t\t)};`;\n\t\t}\n\t\treturn `background-color: ${\n\t\t\tinverse ? COLORS.background.warning.vibrant : COLORS.background.brandLight\n\t\t};`;\n\t}\n\tif (type === 'destructive') {\n\t\treturn `background-color: ${COLORS.background.negative.light};`;\n\t}\n\treturn 'background-color: transparent;';\n};\n\nexport const getLoadingBorder = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: none;`;\n\t}\n\tif (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid ${COLORS.content.secondary};`\n\t\t\t: `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\treturn '';\n};\n\nexport const SpinnerColorMap = (type: Type, inverse?: boolean) => {\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\tif (inverse) {\n\t\tif (type === 'primary') {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t}\n\tif (type === 'destructive') {\n\t\treturn COLORS.content.negative;\n\t}\n\treturn COLORS.content.brand;\n};\n\nexport const getButtonIconColor = (\n\tsize: Size,\n\ttype: Type,\n\tinverse?: boolean,\n\tdisabled?: boolean,\n\tisLoading?: boolean,\n\tdarkMode?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t} else if (darkMode) {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n\tif (isLoading) {\n\t\treturn 'transparent';\n\t}\n\tif (type === 'special') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.background.inverseLight;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.content.secondary;\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t} else if (type === 'secondary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiaryGray' || type.startsWith('dash')) {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n};\n"],"names":["getBackgroundColor","type","size","inverse","darkMode","buttonColor","COLORS","getColor","getDisabledTextColor","getPadding","GetButtonTextComponent","disabled","ButtonRegularAI","ButtonLargeAI","BodySecondary","BodyCaption","ButtonRegular","ButtonLarge","getBorderColor","error","getBorder","version","getLinearGradientValue","getHoverButtonBackgroundCustom","color","percent","num","amt","R","G","B","getLoadingButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","generateDisabledStyling","getDashedBorderStyling","borderColor","getClickEffect","getLoadingBackground","getLoadingBorder","SpinnerColorMap","getButtonIconColor","isLoading"],"mappings":"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"}
+{"version":3,"file":"themes.js","sources":["../../../../src/components/button/themes.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tButtonLarge,\n\tButtonLargeAI,\n\tButtonRegular,\n\tButtonRegularAI,\n} from '../TypographyStyle';\nimport { Size, Type } from './model';\n\nexport const getBackgroundColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n\tbuttonColor?: string,\n): string => {\n\tif (type === 'special') return COLORS.background.brandVeryLight;\n\tif (type === 'secondaryGray') return 'transparent';\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn 'transparent';\n\t\t}\n\t\treturn darkMode ? COLORS.surface.hovered : COLORS.surface.subdued;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn buttonColor\n\t\t\t\t? buttonColor\n\t\t\t\t: inverse\n\t\t\t\t? COLORS.background.warning.vibrant\n\t\t\t\t: COLORS.background.inverseLight;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.background.negative.vibrant;\n\t\tcase 'tertiary':\n\t\t\treturn 'transparent';\n\t\tdefault:\n\t\t\treturn 'transparent';\n\t}\n};\n\nexport const getColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n): string => {\n\tif (type === 'special') return COLORS.background.inverseLight;\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn inverse ? COLORS.content.inactive : COLORS.content.brand;\n\t\t}\n\t\treturn darkMode ? COLORS.content.primary : COLORS.content.secondary;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn inverse ? COLORS.content.primary : COLORS.content.primaryInverse;\n\t\tcase 'tertiaryGray':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tcase 'dashBold':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'dashRegular':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'ai':\n\t\t\treturn COLORS.content.ai;\n\t\tdefault:\n\t\t\treturn inverse ? COLORS.content.primaryInverse : COLORS.stroke.brand;\n\t}\n};\n\nexport const getDisabledTextColor = (inverse?: boolean) => {\n\tif (inverse) {\n\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t}\n\treturn COLORS.content.inactive;\n};\n\nexport const getPadding = (type: Type, size: Size) => {\n\tif (type === 'text') {\n\t\treturn '0px';\n\t} else if (size === 'xs') {\n\t\treturn '4px 6px';\n\t} else if (size === 'chip') {\n\t\treturn '4px 8px';\n\t} else if (size === 'small') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '6px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '6px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '6px 12px';\n\t\t}\n\t} else if (size === 'medium') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '10px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '10px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '10px 12px';\n\t\t}\n\t} else if (size === 'large') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '14px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '14px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '14px 12px';\n\t\t}\n\t}\n};\nexport const GetButtonTextComponent = (\n\tsize: Size,\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (!disabled && type === 'ai') {\n\t\tif (size === 'small') {\n\t\t\treturn ButtonRegularAI;\n\t\t} else {\n\t\t\treturn ButtonLargeAI;\n\t\t}\n\t}\n\n\tif (type === 'dashRegular') {\n\t\treturn BodySecondary;\n\t}\n\tif (size === 'chip' || size === 'xs') {\n\t\treturn BodyCaption;\n\t} else if (size === 'small') {\n\t\treturn ButtonRegular;\n\t}\n\treturn ButtonLarge;\n};\n\nexport const getBorderColor = (\n\ttype: Type,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (error) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\n\tif (inverse) {\n\t\treturn COLORS.surface.standard;\n\t}\n\tif (type == 'secondary') {\n\t\treturn COLORS.stroke.brand;\n\t}\n\treturn COLORS.content.placeholder;\n};\n\nexport const strokeStyle = (size: Size, color: string, width = 1): string =>\n\tsize === 'xs'\n\t\t? `box-shadow: inset 0 0 0 ${width}px ${color}; border: none;`\n\t\t: `border: ${width}px solid ${color};`;\n\nexport const getBorder = (\n\tversion: '1.0' | '2.0' | '3.0',\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (type == 'text') {\n\t\treturn 'border: none;';\n\t}\n\tif (type === 'special') {\n\t\treturn strokeStyle(size, COLORS.stroke.brandLightAlt);\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn strokeStyle(size, COLORS.stroke.primary);\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t};`;\n\t}\n\tif (inverse) {\n\t\tif (type === 'secondary') {\n\t\t\treturn strokeStyle(\n\t\t\t\tsize,\n\t\t\t\tgetBorderColor(type, inverse, error),\n\t\t\t\tversion === '2.0' ? 0.5 : 1,\n\t\t\t);\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn strokeStyle(\n\t\t\tsize,\n\t\t\tgetBorderColor(type, false, error),\n\t\t\tversion === '2.0' ? 0.5 : 1,\n\t\t);\n\t}\n\treturn 'border: none;';\n};\n\nexport const getLinearGradientValue = (size: Size): string => {\n\tif (size === 'medium') {\n\t\treturn `5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px`;\n\t}\n\treturn `6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px`;\n};\n\n/**\n * Adjusts the brightness of a given hex color by a specified percentage.\n * Below function is used to generate a hover effect for button backgrounds.\n *\n * @param {string} color - The hex color code to be adjusted (e.g., \"#ff0000\").\n * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.\n * @returns {string} - The adjusted hex color code.\n *\n * @example\n * // Darken the color #ff0000 (red) by 10%\n * const darkerRed = getHoverButtonBackgroundCustom(\"#ff0000\", 10);\n * console.log(darkerRed); // Output might be \"#e60000\"\n */\n\nexport const getHoverButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 * percent),\n\t\tR = (num >> 16) - amt,\n\t\tG = ((num >> 8) & 0x00ff) - amt,\n\t\tB = (num & 0x0000ff) - amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.max(R, 0) << 16) +\n\t\t(Math.max(G, 0) << 8) +\n\t\tMath.max(B, 0)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\n/**\n * Generates a new color by adjusting the brightness of the given color by a specified percentage.\n *\n * @param color - The original color in hexadecimal format (e.g., \"#RRGGBB\").\n * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.\n * @returns The new color in hexadecimal format after adjusting the brightness.\n *\n * @example\n * // Lighten the color by 20%\n * const newColor = getLoadingButtonBackgroundCustom(\"#ff0000\", 20); // \"#ff3333\"\n *\n * @example\n * // Darken the color by 10%\n * const newColor = getLoadingButtonBackgroundCustom(\"#00ff00\", -10); // \"#00e600\"\n */\nexport const getLoadingButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 * percent),\n\t\tR = (num >> 16) + amt,\n\t\tG = ((num >> 8) & 0x00ff) + amt,\n\t\tB = (num & 0x0000ff) + amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.min(R, 255) << 16) +\n\t\t(Math.min(G, 255) << 8) +\n\t\tMath.min(B, 255)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\nexport const getHoverButtonBackground = (type: Type, inverse?: boolean) => {\n\tif (type === 'ai') {\n\t\treturn `background: ${COLORS.surface.aiLight};`;\n\t}\n\n\tif (type === 'text') {\n\t\treturn `background-color:transparent;`;\n\t}\n\tif (type === 'special' || type === 'secondaryGray') {\n\t\treturn '';\n\t}\n\tif (!inverse && type !== 'primary') {\n\t\treturn `background-color: #000000;\n\t\t\t\topacity: 0.03;`;\n\t}\n\n\treturn ``;\n};\n\nexport const getHoverButtonTextDecorationStyle = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\treturn `text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n};\n\nexport const generateInverseHoverBackground = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\tif (type === 'primary') {\n\t\treturn `background-color: ${COLORS.stroke.warning.lightAlt};`;\n\t}\n\treturn `background-color: rgba(255, 255, 255, 0.1)`;\n};\n\nexport const generateDisabledStyling = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.base}; ${strokeStyle(\n\t\t\tsize,\n\t\t\tCOLORS.stroke.primary,\n\t\t)}`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn strokeStyle(size, COLORS.stroke.primary);\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: transparent;`;\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\treturn inverse\n\t\t\t? 'background-color: rgba(255,255,255,0.3);'\n\t\t\t: `background-color: ${COLORS.background.inactive};`;\n\t} else if (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? strokeStyle(size, 'rgba(255, 255, 255, 0.5)')\n\t\t\t: strokeStyle(size, COLORS.stroke.primary);\n\t}\n\treturn '';\n};\n\nexport const getDashedBorderStyling = (\n\ttype: Type,\n\tsize: Size,\n\tborderColor: string = getBorderColor(type, false),\n) => {\n\treturn `\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t`;\n};\n\nexport const getClickEffect = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'text') {\n\t\treturn `background-color: ${COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n\t}\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandLight}; ${strokeStyle(\n\t\t\tsize,\n\t\t\tCOLORS.stroke.brandLightAlt,\n\t\t)}`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.hovered}; ${strokeStyle(\n\t\t\tsize,\n\t\t\tCOLORS.stroke.primary,\n\t\t)}`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${COLORS.background.brandLight};`;\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\tif (inverse) {\n\t\t\treturn `background-color: ${COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`;\n\t\t}\n\t\treturn 'box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);';\n\t} else if (\n\t\ttype === 'secondary' ||\n\t\ttype === 'tertiary' ||\n\t\ttype === 'tertiaryGray' ||\n\t\ttype.startsWith('dash')\n\t) {\n\t\treturn inverse\n\t\t\t? `background-color: ${COLORS.background.inverseLight}  !important;`\n\t\t\t: `background-color: ${COLORS.background.brandLight};`;\n\t}\n};\nexport const getLoadingBackground = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tbuttonColor?: string,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandVeryLight};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.subdued};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: ${COLORS.background.base};`;\n\t}\n\tif (type === 'primary') {\n\t\tif (buttonColor) {\n\t\t\treturn `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\tbuttonColor,\n\t\t\t\t50,\n\t\t\t)};`;\n\t\t}\n\t\treturn `background-color: ${\n\t\t\tinverse ? COLORS.background.warning.vibrant : COLORS.background.brandLight\n\t\t};`;\n\t}\n\tif (type === 'destructive') {\n\t\treturn `background-color: ${COLORS.background.negative.light};`;\n\t}\n\treturn 'background-color: transparent;';\n};\n\nexport const getLoadingBorder = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'special') {\n\t\treturn strokeStyle(size, COLORS.stroke.brandLightAlt);\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn strokeStyle(size, COLORS.stroke.primary);\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: none;`;\n\t}\n\tif (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? strokeStyle(size, COLORS.content.secondary)\n\t\t\t: strokeStyle(size, COLORS.stroke.brandLightAlt);\n\t}\n\treturn '';\n};\n\nexport const SpinnerColorMap = (type: Type, inverse?: boolean) => {\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\tif (inverse) {\n\t\tif (type === 'primary') {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t}\n\tif (type === 'destructive') {\n\t\treturn COLORS.content.negative;\n\t}\n\treturn COLORS.content.brand;\n};\n\nexport const getButtonIconColor = (\n\tsize: Size,\n\ttype: Type,\n\tinverse?: boolean,\n\tdisabled?: boolean,\n\tisLoading?: boolean,\n\tdarkMode?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t} else if (darkMode) {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n\tif (isLoading) {\n\t\treturn 'transparent';\n\t}\n\tif (type === 'special') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.background.inverseLight;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.content.secondary;\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t} else if (type === 'secondary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiaryGray' || type.startsWith('dash')) {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n};\n"],"names":["getBackgroundColor","type","size","inverse","darkMode","buttonColor","COLORS","getColor","getDisabledTextColor","getPadding","GetButtonTextComponent","disabled","ButtonRegularAI","ButtonLargeAI","BodySecondary","BodyCaption","ButtonRegular","ButtonLarge","getBorderColor","error","strokeStyle","color","width","getBorder","version","getLinearGradientValue","getHoverButtonBackgroundCustom","percent","num","amt","R","G","B","getLoadingButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","generateDisabledStyling","getDashedBorderStyling","borderColor","getClickEffect","getLoadingBackground","getLoadingBorder","SpinnerColorMap","getButtonIconColor","isLoading"],"mappings":"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"}

package/dist/esm/components/card-selector/CardSelector.js

@@ -1,12 +1,13 @@
 import { jsx as t, Fragment as l, jsxs as n } from "react/jsx-runtime";
 import { COLORS as i } from "../../constants/Theme.js";
-import { Spinner as a } from "../spinner/Spinner.js";
-import { TitleSmall as o, BodyCaption as h } from "../TypographyStyle.js";
-import { Container as d, Loader as m } from "./CardSelector.styled.js";
-import { Tooltip as r } from "../tooltips/Tooltip.js";
-const u = (e) => /* @__PURE__ */ t(l, { children: e.tooltip ? /* @__PURE__ */ t(r, { title: e.tooltip, children: /* @__PURE__ */ t(
+import { Spinner as c } from "../spinner/Spinner.js";
+import { TitleSmall as o, BodyCaption as r } from "../TypographyStyle.js";
+import { Container as d, Loader as h } from "./CardSelector.styled.js";
+import { Tooltip as m } from "../tooltips/Tooltip.js";
+const u = (e) => /* @__PURE__ */ t(l, { children: e.tooltip ? /* @__PURE__ */ t(m, { title: e.tooltip, children: /* @__PURE__ */ t(
   d,
   {
+    "data-testid": "card-selector-container",
     style: {
       alignItems: e.title && e.subtitle ? "flex-start" : "center"
     },
@@ -17,11 +18,12 @@ const u = (e) => /* @__PURE__ */ t(l, { children: e.tooltip ? /* @__PURE__ */ t(
       !e.disabled && !e.loading && e.onCardClick(e.id);
     },
     isTooltipPresent: !!e.tooltip,
-    children: /* @__PURE__ */ t(c, { ...e })
+    children: /* @__PURE__ */ t(a, { ...e })
   }
 ) }) : /* @__PURE__ */ t(
   d,
   {
+    "data-testid": "card-selector-container",
     style: {
       alignItems: e.title && e.subtitle ? "flex-start" : "center"
     },
@@ -32,9 +34,9 @@ const u = (e) => /* @__PURE__ */ t(l, { children: e.tooltip ? /* @__PURE__ */ t(
       !e.disabled && !e.loading && e.onCardClick(e.id);
     },
     isTooltipPresent: !!e.tooltip,
-    children: /* @__PURE__ */ t(c, { ...e })
+    children: /* @__PURE__ */ t(a, { ...e })
   }
-) }), c = (e) => /* @__PURE__ */ t(l, { children: e.loading ? /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(a, { size: "large" }) }) : /* @__PURE__ */ n(l, { children: [
+) }), a = (e) => /* @__PURE__ */ t(l, { children: e.loading ? /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t(c, { size: "large" }) }) : /* @__PURE__ */ n(l, { children: [
   e?.icon && /* @__PURE__ */ t("div", { style: { width: 24, height: 24 }, children: /* @__PURE__ */ t(
     e.icon,
     {
@@ -53,7 +55,7 @@ const u = (e) => /* @__PURE__ */ t(l, { children: e.tooltip ? /* @__PURE__ */ t(
       }
     ),
     e.subtitle && /* @__PURE__ */ t(
-      h,
+      r,
       {
         style: {
           marginTop: e.title ? 4 : 0,

package/dist/esm/components/card-selector/CardSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardSelector.js","sources":["../../../../src/components/card-selector/CardSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { Spinner } from '../spinner/Spinner';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\nimport { Container, Loader } from './CardSelector.styled';\n\nexport type CardSelectorProps = {\n\tid: number;\n\ticon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\ttitle?: string;\n\tsubtitle?: string;\n\tselected: boolean;\n\tloading?: boolean;\n\tdisabled?: boolean;\n\tdataTestId?: string;\n\ttooltip?: string;\n};\n\ntype CardSelectorInternalProps = CardSelectorProps & {\n\tonCardClick: (id: number) => void;\n};\n\nexport const CardSelector: React.FC<CardSelectorInternalProps> = (props) => {\n\treturn (\n\t\t<>\n\t\t\t{props.tooltip ? (\n\t\t\t\t<Tooltip title={props.tooltip}>\n\t\t\t\t\t<Container\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\talignItems:\n\t\t\t\t\t\t\t\tprops.title && props.subtitle ? 'flex-start' : 'center',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tselected={props.selected}\n\t\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\t\tloading={props.loading ?? false}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (!props.disabled && !props.loading) {\n\t\t\t\t\t\t\t\tprops.onCardClick(props.id);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tisTooltipPresent={!!props.tooltip}\n\t\t\t\t\t>\n\t\t\t\t\t\t<EachSelector {...props} />\n\t\t\t\t\t</Container>\n\t\t\t\t</Tooltip>\n\t\t\t) : (\n\t\t\t\t<Container\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\talignItems: props.title && props.subtitle ? 'flex-start' : 'center',\n\t\t\t\t\t}}\n\t\t\t\t\tselected={props.selected}\n\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\tloading={props.loading ?? false}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tif (!props.disabled && !props.loading) {\n\t\t\t\t\t\t\tprops.onCardClick(props.id);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisTooltipPresent={!!props.tooltip}\n\t\t\t\t>\n\t\t\t\t\t<EachSelector {...props} />\n\t\t\t\t</Container>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst EachSelector: React.FC<CardSelectorInternalProps> = (props) => {\n\treturn (\n\t\t<>\n\t\t\t{props.loading ? (\n\t\t\t\t<Loader>\n\t\t\t\t\t<Spinner size={'large'} />\n\t\t\t\t</Loader>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{props?.icon && (\n\t\t\t\t\t\t<div style={{ width: 24, height: 24 }}>\n\t\t\t\t\t\t\t<props.icon\n\t\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\tprops.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.placeholder\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div data-test={props?.dataTestId}>\n\t\t\t\t\t\t{props.title && (\n\t\t\t\t\t\t\t<TitleSmall\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.title}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.subtitle && (\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmarginTop: props.title ? 4 : 0,\n\t\t\t\t\t\t\t\t\tcolor: props.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.subtitle}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["CardSelector","props","Tooltip","jsx","Container","EachSelector","Fragment","Loader","Spinner","jsxs","COLORS","TitleSmall","BodyCaption"],"mappings":";;;;;;AAuBO,MAAMA,IAAoD,CAACC,6BAG9D,UAAAA,EAAM,4BACLC,GAAA,EAAQ,OAAOD,EAAM,SACrB,UAAA,gBAAAE;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,OAAO;AAAA,MACN,YACCH,EAAM,SAASA,EAAM,WAAW,eAAe;AAAA,IAAA;AAAA,IAEjD,UAAUA,EAAM;AAAA,IAChB,UAAUA,EAAM,YAAY;AAAA,IAC5B,SAASA,EAAM,WAAW;AAAA,IAC1B,SAAS,MAAM;AACd,MAAI,CAACA,EAAM,YAAY,CAACA,EAAM,WAC7BA,EAAM,YAAYA,EAAM,EAAE;AAAA,IAE5B;AAAA,IACA,kBAAkB,CAAC,CAACA,EAAM;AAAA,IAE1B,UAAA,gBAAAE,EAACE,GAAA,EAAc,GAAGJ,EAAA,CAAO;AAAA,EAAA;AAAA,GAE3B,IAEA,gBAAAE;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,OAAO;AAAA,MACN,YAAYH,EAAM,SAASA,EAAM,WAAW,eAAe;AAAA,IAAA;AAAA,IAE5D,UAAUA,EAAM;AAAA,IAChB,UAAUA,EAAM,YAAY;AAAA,IAC5B,SAASA,EAAM,WAAW;AAAA,IAC1B,SAAS,MAAM;AACd,MAAI,CAACA,EAAM,YAAY,CAACA,EAAM,WAC7BA,EAAM,YAAYA,EAAM,EAAE;AAAA,IAE5B;AAAA,IACA,kBAAkB,CAAC,CAACA,EAAM;AAAA,IAE1B,UAAA,gBAAAE,EAACE,GAAA,EAAc,GAAGJ,EAAA,CAAO;AAAA,EAAA;AAAA,GAG5B,GAIII,IAAoD,CAACJ,MAEzD,gBAAAE,EAAAG,GAAA,EACE,UAAAL,EAAM,UACN,gBAAAE,EAACI,GAAA,EACA,UAAA,gBAAAJ,EAACK,GAAA,EAAQ,MAAM,QAAA,CAAS,EAAA,CACzB,IAEA,gBAAAC,EAAAH,GAAA,EACE,UAAA;AAAA,EAAAL,GAAO,0BACN,OAAA,EAAI,OAAO,EAAE,OAAO,IAAI,QAAQ,GAAA,GAChC,UAAA,gBAAAE;AAAA,IAACF,EAAM;AAAA,IAAN;AAAA,MACA,OAAO;AAAA,MACP,OACCA,EAAM,WACHS,EAAO,QAAQ,QACfT,EAAM,WACNS,EAAO,QAAQ,WACfA,EAAO,QAAQ;AAAA,IAAA;AAAA,EAAA,GAGrB;AAAA,EAED,gBAAAD,EAAC,OAAA,EAAI,aAAWR,GAAO,YACrB,UAAA;AAAA,IAAAA,EAAM,SACN,gBAAAE;AAAA,MAACQ;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,OAAOV,EAAM,WACVS,EAAO,QAAQ,QACfT,EAAM,WACNS,EAAO,QAAQ,WACfA,EAAO,QAAQ;AAAA,QAAA;AAAA,QAGlB,UAAAT,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAGRA,EAAM,YACN,gBAAAE;AAAA,MAACS;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,WAAWX,EAAM,QAAQ,IAAI;AAAA,UAC7B,OAAOA,EAAM,WACVS,EAAO,QAAQ,QACfT,EAAM,WACNS,EAAO,QAAQ,WACfA,EAAO,QAAQ;AAAA,QAAA;AAAA,QAGlB,UAAAT,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,EAAA,CAEF;AAAA,EAAA,CACD,EAAA,CAEF;"}
+{"version":3,"file":"CardSelector.js","sources":["../../../../src/components/card-selector/CardSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { Spinner } from '../spinner/Spinner';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\nimport { Container, Loader } from './CardSelector.styled';\n\nexport type CardSelectorProps = {\n\tid: number;\n\ticon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\ttitle?: string;\n\tsubtitle?: string;\n\tselected: boolean;\n\tloading?: boolean;\n\tdisabled?: boolean;\n\tdataTestId?: string;\n\ttooltip?: string;\n};\n\ntype CardSelectorInternalProps = CardSelectorProps & {\n\tonCardClick: (id: number) => void;\n};\n\nexport const CardSelector: React.FC<CardSelectorInternalProps> = (props) => {\n\treturn (\n\t\t<>\n\t\t\t{props.tooltip ? (\n\t\t\t\t<Tooltip title={props.tooltip}>\n\t\t\t\t\t<Container\n\t\t\t\t\t\tdata-testid=\"card-selector-container\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\talignItems:\n\t\t\t\t\t\t\t\tprops.title && props.subtitle ? 'flex-start' : 'center',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tselected={props.selected}\n\t\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\t\tloading={props.loading ?? false}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (!props.disabled && !props.loading) {\n\t\t\t\t\t\t\t\tprops.onCardClick(props.id);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tisTooltipPresent={!!props.tooltip}\n\t\t\t\t\t>\n\t\t\t\t\t\t<EachSelector {...props} />\n\t\t\t\t\t</Container>\n\t\t\t\t</Tooltip>\n\t\t\t) : (\n\t\t\t\t<Container\n\t\t\t\t\tdata-testid=\"card-selector-container\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\talignItems: props.title && props.subtitle ? 'flex-start' : 'center',\n\t\t\t\t\t}}\n\t\t\t\t\tselected={props.selected}\n\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\tloading={props.loading ?? false}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tif (!props.disabled && !props.loading) {\n\t\t\t\t\t\t\tprops.onCardClick(props.id);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisTooltipPresent={!!props.tooltip}\n\t\t\t\t>\n\t\t\t\t\t<EachSelector {...props} />\n\t\t\t\t</Container>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst EachSelector: React.FC<CardSelectorInternalProps> = (props) => {\n\treturn (\n\t\t<>\n\t\t\t{props.loading ? (\n\t\t\t\t<Loader>\n\t\t\t\t\t<Spinner size={'large'} />\n\t\t\t\t</Loader>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{props?.icon && (\n\t\t\t\t\t\t<div style={{ width: 24, height: 24 }}>\n\t\t\t\t\t\t\t<props.icon\n\t\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\tprops.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.placeholder\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div data-test={props?.dataTestId}>\n\t\t\t\t\t\t{props.title && (\n\t\t\t\t\t\t\t<TitleSmall\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.title}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.subtitle && (\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmarginTop: props.title ? 4 : 0,\n\t\t\t\t\t\t\t\t\tcolor: props.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.subtitle}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["CardSelector","props","Tooltip","jsx","Container","EachSelector","Fragment","Loader","Spinner","jsxs","COLORS","TitleSmall","BodyCaption"],"mappings":";;;;;;AAuBO,MAAMA,IAAoD,CAACC,6BAG9D,UAAAA,EAAM,4BACLC,GAAA,EAAQ,OAAOD,EAAM,SACrB,UAAA,gBAAAE;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,eAAY;AAAA,IACZ,OAAO;AAAA,MACN,YACCH,EAAM,SAASA,EAAM,WAAW,eAAe;AAAA,IAAA;AAAA,IAEjD,UAAUA,EAAM;AAAA,IAChB,UAAUA,EAAM,YAAY;AAAA,IAC5B,SAASA,EAAM,WAAW;AAAA,IAC1B,SAAS,MAAM;AACd,MAAI,CAACA,EAAM,YAAY,CAACA,EAAM,WAC7BA,EAAM,YAAYA,EAAM,EAAE;AAAA,IAE5B;AAAA,IACA,kBAAkB,CAAC,CAACA,EAAM;AAAA,IAE1B,UAAA,gBAAAE,EAACE,GAAA,EAAc,GAAGJ,EAAA,CAAO;AAAA,EAAA;AAAA,GAE3B,IAEA,gBAAAE;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,eAAY;AAAA,IACZ,OAAO;AAAA,MACN,YAAYH,EAAM,SAASA,EAAM,WAAW,eAAe;AAAA,IAAA;AAAA,IAE5D,UAAUA,EAAM;AAAA,IAChB,UAAUA,EAAM,YAAY;AAAA,IAC5B,SAASA,EAAM,WAAW;AAAA,IAC1B,SAAS,MAAM;AACd,MAAI,CAACA,EAAM,YAAY,CAACA,EAAM,WAC7BA,EAAM,YAAYA,EAAM,EAAE;AAAA,IAE5B;AAAA,IACA,kBAAkB,CAAC,CAACA,EAAM;AAAA,IAE1B,UAAA,gBAAAE,EAACE,GAAA,EAAc,GAAGJ,EAAA,CAAO;AAAA,EAAA;AAAA,GAG5B,GAIII,IAAoD,CAACJ,MAEzD,gBAAAE,EAAAG,GAAA,EACE,UAAAL,EAAM,UACN,gBAAAE,EAACI,GAAA,EACA,UAAA,gBAAAJ,EAACK,GAAA,EAAQ,MAAM,QAAA,CAAS,EAAA,CACzB,IAEA,gBAAAC,EAAAH,GAAA,EACE,UAAA;AAAA,EAAAL,GAAO,0BACN,OAAA,EAAI,OAAO,EAAE,OAAO,IAAI,QAAQ,GAAA,GAChC,UAAA,gBAAAE;AAAA,IAACF,EAAM;AAAA,IAAN;AAAA,MACA,OAAO;AAAA,MACP,OACCA,EAAM,WACHS,EAAO,QAAQ,QACfT,EAAM,WACNS,EAAO,QAAQ,WACfA,EAAO,QAAQ;AAAA,IAAA;AAAA,EAAA,GAGrB;AAAA,EAED,gBAAAD,EAAC,OAAA,EAAI,aAAWR,GAAO,YACrB,UAAA;AAAA,IAAAA,EAAM,SACN,gBAAAE;AAAA,MAACQ;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,OAAOV,EAAM,WACVS,EAAO,QAAQ,QACfT,EAAM,WACNS,EAAO,QAAQ,WACfA,EAAO,QAAQ;AAAA,QAAA;AAAA,QAGlB,UAAAT,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAGRA,EAAM,YACN,gBAAAE;AAAA,MAACS;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,WAAWX,EAAM,QAAQ,IAAI;AAAA,UAC7B,OAAOA,EAAM,WACVS,EAAO,QAAQ,QACfT,EAAM,WACNS,EAAO,QAAQ,WACfA,EAAO,QAAQ;AAAA,QAAA;AAAA,QAGlB,UAAAT,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,EAAA,CAEF;AAAA,EAAA,CACD,EAAA,CAEF;"}

package/dist/esm/components/card-selector/CardSelectorGroup.js

@@ -3,6 +3,7 @@ import { CardSelector as l } from "./CardSelector.js";
 const a = (e) => /* @__PURE__ */ i(
   "div",
   {
+    "data-testid": "card-selector-group",
     style: {
       display: "flex",
       flexDirection: e.align === "vertical" ? "column" : "row",

package/dist/esm/components/card-selector/CardSelectorGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardSelectorGroup.js","sources":["../../../../src/components/card-selector/CardSelectorGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { CardSelector, CardSelectorProps } from './CardSelector';\n\nexport type CardSelectorGroupProps = {\n\tgap?: number;\n\talign?: 'horizontal' | 'vertical';\n\tcards: CardSelectorProps[];\n\tonClick: (id: number) => void;\n\t'data-test': string;\n};\n\nexport const CardSelectorGroup: React.FC<CardSelectorGroupProps> = (props) => {\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: props.align === 'vertical' ? 'column' : 'row',\n\t\t\t\tgap: props.gap || 16,\n\t\t\t}}\n\t\t>\n\t\t\t{props.cards.map((card) => (\n\t\t\t\t<div key={card.id} style={{ display: 'flex', flex: 1 }}>\n\t\t\t\t\t<CardSelector\n\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\tid={card.id}\n\t\t\t\t\t\ticon={card.icon}\n\t\t\t\t\t\ttitle={card.title}\n\t\t\t\t\t\tsubtitle={card.subtitle}\n\t\t\t\t\t\tselected={card.selected}\n\t\t\t\t\t\tonCardClick={props.onClick}\n\t\t\t\t\t\tloading={card.loading}\n\t\t\t\t\t\tdisabled={card.disabled}\n\t\t\t\t\t\tdataTestId={card.dataTestId}\n\t\t\t\t\t\ttooltip={card.tooltip}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n"],"names":["CardSelectorGroup","props","jsx","card","CardSelector"],"mappings":";;AAWO,MAAMA,IAAsD,CAACC,MAElE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,OAAO;AAAA,MACN,SAAS;AAAA,MACT,eAAeD,EAAM,UAAU,aAAa,WAAW;AAAA,MACvD,KAAKA,EAAM,OAAO;AAAA,IAAA;AAAA,IAGlB,UAAAA,EAAM,MAAM,IAAI,CAACE,MACjB,gBAAAD,EAAC,OAAA,EAAkB,OAAO,EAAE,SAAS,QAAQ,MAAM,KAClD,UAAA,gBAAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,aAAWH,EAAM,WAAW;AAAA,QAC5B,IAAIE,EAAK;AAAA,QACT,MAAMA,EAAK;AAAA,QACX,OAAOA,EAAK;AAAA,QACZ,UAAUA,EAAK;AAAA,QACf,UAAUA,EAAK;AAAA,QACf,aAAaF,EAAM;AAAA,QACnB,SAASE,EAAK;AAAA,QACd,UAAUA,EAAK;AAAA,QACf,YAAYA,EAAK;AAAA,QACjB,SAASA,EAAK;AAAA,MAAA;AAAA,IAAA,EACf,GAbSA,EAAK,EAcf,CACA;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"CardSelectorGroup.js","sources":["../../../../src/components/card-selector/CardSelectorGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { CardSelector, CardSelectorProps } from './CardSelector';\n\nexport type CardSelectorGroupProps = {\n\tgap?: number;\n\talign?: 'horizontal' | 'vertical';\n\tcards: CardSelectorProps[];\n\tonClick: (id: number) => void;\n\t'data-test': string;\n};\n\nexport const CardSelectorGroup: React.FC<CardSelectorGroupProps> = (props) => {\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"card-selector-group\"\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: props.align === 'vertical' ? 'column' : 'row',\n\t\t\t\tgap: props.gap || 16,\n\t\t\t}}\n\t\t>\n\t\t\t{props.cards.map((card) => (\n\t\t\t\t<div key={card.id} style={{ display: 'flex', flex: 1 }}>\n\t\t\t\t\t<CardSelector\n\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\tid={card.id}\n\t\t\t\t\t\ticon={card.icon}\n\t\t\t\t\t\ttitle={card.title}\n\t\t\t\t\t\tsubtitle={card.subtitle}\n\t\t\t\t\t\tselected={card.selected}\n\t\t\t\t\t\tonCardClick={props.onClick}\n\t\t\t\t\t\tloading={card.loading}\n\t\t\t\t\t\tdisabled={card.disabled}\n\t\t\t\t\t\tdataTestId={card.dataTestId}\n\t\t\t\t\t\ttooltip={card.tooltip}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n"],"names":["CardSelectorGroup","props","jsx","card","CardSelector"],"mappings":";;AAWO,MAAMA,IAAsD,CAACC,MAElE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,eAAY;AAAA,IACZ,OAAO;AAAA,MACN,SAAS;AAAA,MACT,eAAeD,EAAM,UAAU,aAAa,WAAW;AAAA,MACvD,KAAKA,EAAM,OAAO;AAAA,IAAA;AAAA,IAGlB,UAAAA,EAAM,MAAM,IAAI,CAACE,MACjB,gBAAAD,EAAC,OAAA,EAAkB,OAAO,EAAE,SAAS,QAAQ,MAAM,KAClD,UAAA,gBAAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,aAAWH,EAAM,WAAW;AAAA,QAC5B,IAAIE,EAAK;AAAA,QACT,MAAMA,EAAK;AAAA,QACX,OAAOA,EAAK;AAAA,QACZ,UAAUA,EAAK;AAAA,QACf,UAAUA,EAAK;AAAA,QACf,aAAaF,EAAM;AAAA,QACnB,SAASE,EAAK;AAAA,QACd,UAAUA,EAAK;AAAA,QACf,YAAYA,EAAK;AAAA,QACjB,SAASA,EAAK;AAAA,MAAA;AAAA,IAAA,EACf,GAbSA,EAAK,EAcf,CACA;AAAA,EAAA;AAAA;"}

package/dist/esm/components/carousel/carousel.js

@@ -1,17 +1,17 @@
-import { jsx as r, Fragment as e } from "react/jsx-runtime";
+import { jsx as r, Fragment as o } from "react/jsx-runtime";
 import i from "../../assets/icons/chevronLeft.svg.js";
-import n from "../../assets/icons/chevronRight.svg.js";
-import { Carousel as l } from "@trendyol-js/react-carousel";
+import a from "../../assets/icons/chevronRight.svg.js";
+import { Carousel as n } from "@trendyol-js/react-carousel";
 import s from "styled-components";
-const a = () => /* @__PURE__ */ r(o, { className: "left", children: /* @__PURE__ */ r(i, { width: 16, height: 16, color: "#fff" }) }), h = () => /* @__PURE__ */ r(o, { className: "right", children: /* @__PURE__ */ r(n, { width: 16, height: 16, color: "#fff" }) }), p = (t) => /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(
-  l,
+const l = () => /* @__PURE__ */ r(e, { className: "left", "data-testid": "carousel-left-arrow", children: /* @__PURE__ */ r(i, { width: 16, height: 16, color: "#fff" }) }), h = () => /* @__PURE__ */ r(e, { className: "right", "data-testid": "carousel-right-arrow", children: /* @__PURE__ */ r(a, { width: 16, height: 16, color: "#fff" }) }), u = (t) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(
+  n,
   {
-    leftArrow: /* @__PURE__ */ r(a, {}),
+    leftArrow: /* @__PURE__ */ r(l, {}),
     rightArrow: /* @__PURE__ */ r(h, {}),
     ...t,
     children: t.children
   }
-) }), o = s.div`
+) }), e = s.div`
 	cursor: pointer;
 	margin: 0 8px;
 	width: 50px;
@@ -34,6 +34,6 @@ const a = () => /* @__PURE__ */ r(o, { className: "left", children: /* @__PURE__
 	}
 `;
 export {
-  p as Carousel
+  u as Carousel
 };
 //# sourceMappingURL=carousel.js.map

package/dist/esm/components/carousel/carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.js","sources":["../../../../src/components/carousel/carousel.tsx"],"sourcesContent":["import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport { Carousel as ReactCarousel } from '@trendyol-js/react-carousel';\nimport { CarouselProps } from '@trendyol-js/react-carousel/dist/types/components/carousel';\nimport styled from 'styled-components';\n\nconst LeftArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"left\">\n\t\t\t<ChevronLeft width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nconst RightArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"right\">\n\t\t\t<ChevronRight width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nexport const Carousel = (props: CarouselProps) => {\n\treturn (\n\t\t<>\n\t\t\t<ReactCarousel\n\t\t\t\tleftArrow={<LeftArrow />}\n\t\t\t\trightArrow={<RightArrow />}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</ReactCarousel>\n\t\t</>\n\t);\n};\n\nconst ArrowContainer = styled.div`\n\tcursor: pointer;\n\tmargin: 0 8px;\n\twidth: 50px;\n\theight: 50px;\n\tborder-radius: 25px;\n\tdisplay: flex;\n\talign-items: center;\n\tbackground-color: rgba(0, 0, 0, 0.4);\n\tjustify-content: center;\n\tposition: absolute;\n\tz-index: 2;\n\ttop: 50%;\n\t&.left {\n\t\ttransform: translate(0%, -50%);\n\t\tleft: 0;\n\t}\n\t&.right {\n\t\ttransform: translate(0%, -50%);\n\t\tright: 0;\n\t}\n`;\n"],"names":["LeftArrow","jsx","ArrowContainer","ChevronLeft","RightArrow","ChevronRight","Carousel","props","Fragment","ReactCarousel","styled"],"mappings":";;;;;AAMA,MAAMA,IAAY,MAEhB,gBAAAC,EAACC,GAAA,EAAe,WAAU,QACzB,UAAA,gBAAAD,EAACE,GAAA,EAAY,OAAO,IAAI,QAAQ,IAAI,OAAM,OAAA,CAAO,GAClD,GAIIC,IAAa,MAEjB,gBAAAH,EAACC,GAAA,EAAe,WAAU,SACzB,UAAA,gBAAAD,EAACI,GAAA,EAAa,OAAO,IAAI,QAAQ,IAAI,OAAM,OAAA,CAAO,GACnD,GAIWC,IAAW,CAACC,MAEvB,gBAAAN,EAAAO,GAAA,EACC,UAAA,gBAAAP;AAAA,EAACQ;AAAAA,EAAA;AAAA,IACA,6BAAYT,GAAA,EAAU;AAAA,IACtB,8BAAaI,GAAA,EAAW;AAAA,IACvB,GAAGG;AAAA,IAEH,UAAAA,EAAM;AAAA,EAAA;AAAA,GAET,GAIIL,IAAiBQ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"carousel.js","sources":["../../../../src/components/carousel/carousel.tsx"],"sourcesContent":["import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport { Carousel as ReactCarousel } from '@trendyol-js/react-carousel';\nimport { CarouselProps } from '@trendyol-js/react-carousel/dist/types/components/carousel';\nimport styled from 'styled-components';\n\nconst LeftArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"left\" data-testid=\"carousel-left-arrow\">\n\t\t\t<ChevronLeft width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nconst RightArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"right\" data-testid=\"carousel-right-arrow\">\n\t\t\t<ChevronRight width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nexport const Carousel = (props: CarouselProps) => {\n\treturn (\n\t\t<>\n\t\t\t<ReactCarousel\n\t\t\t\tleftArrow={<LeftArrow />}\n\t\t\t\trightArrow={<RightArrow />}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</ReactCarousel>\n\t\t</>\n\t);\n};\n\nconst ArrowContainer = styled.div`\n\tcursor: pointer;\n\tmargin: 0 8px;\n\twidth: 50px;\n\theight: 50px;\n\tborder-radius: 25px;\n\tdisplay: flex;\n\talign-items: center;\n\tbackground-color: rgba(0, 0, 0, 0.4);\n\tjustify-content: center;\n\tposition: absolute;\n\tz-index: 2;\n\ttop: 50%;\n\t&.left {\n\t\ttransform: translate(0%, -50%);\n\t\tleft: 0;\n\t}\n\t&.right {\n\t\ttransform: translate(0%, -50%);\n\t\tright: 0;\n\t}\n`;\n"],"names":["LeftArrow","jsx","ArrowContainer","ChevronLeft","RightArrow","ChevronRight","Carousel","props","Fragment","ReactCarousel","styled"],"mappings":";;;;;AAMA,MAAMA,IAAY,MAEhB,gBAAAC,EAACC,GAAA,EAAe,WAAU,QAAO,eAAY,uBAC5C,UAAA,gBAAAD,EAACE,GAAA,EAAY,OAAO,IAAI,QAAQ,IAAI,OAAM,QAAO,GAClD,GAIIC,IAAa,MAEjB,gBAAAH,EAACC,GAAA,EAAe,WAAU,SAAQ,eAAY,wBAC7C,UAAA,gBAAAD,EAACI,GAAA,EAAa,OAAO,IAAI,QAAQ,IAAI,OAAM,QAAO,GACnD,GAIWC,IAAW,CAACC,MAEvB,gBAAAN,EAAAO,GAAA,EACC,UAAA,gBAAAP;AAAA,EAACQ;AAAAA,EAAA;AAAA,IACA,6BAAYT,GAAA,EAAU;AAAA,IACtB,8BAAaI,GAAA,EAAW;AAAA,IACvB,GAAGG;AAAA,IAEH,UAAAA,EAAM;AAAA,EAAA;AAAA,GAET,GAIIL,IAAiBQ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/esm/components/checkBox/CheckBox.js

@@ -1,7 +1,7 @@
 import { jsxs as w, jsx as a, Fragment as M } from "react/jsx-runtime";
 import { useState as r, useEffect as o, useMemo as P } from "react";
 import { CheckboxContainer as B, CheckboxIcon as I } from "./CheckBox.styled.js";
-import { TitleSmall as k, BodyPrimary as f, BodySecondary as h, BodyCaption as m, TitleRegular as H } from "../TypographyStyle.js";
+import { TitleSmall as C, BodyPrimary as f, BodySecondary as h, BodyCaption as m, TitleRegular as H } from "../TypographyStyle.js";
 import { COLORS as i } from "../../constants/Theme.js";
 const T = (e) => {
   const c = P(
@@ -23,6 +23,7 @@ const T = (e) => {
   return /* @__PURE__ */ w(
     "svg",
     {
+      "data-testid": "checkbox-mark",
       width: l.box,
       height: l.box,
       viewBox: `0 0 ${l.box} ${l.box}`,
@@ -43,6 +44,7 @@ const T = (e) => {
         !e.isPartial && /* @__PURE__ */ a(
           "svg",
           {
+            "data-testid": "checkmark-icon",
             width: l.check.w,
             height: l.check.h,
             x: l.check.x,
@@ -64,6 +66,7 @@ const T = (e) => {
         e.isPartial && /* @__PURE__ */ a(
           "rect",
           {
+            "data-testid": "partial-mark",
             x: l.partial.x,
             y: l.partial.y,
             width: l.partial.w,
@@ -80,8 +83,8 @@ const T = (e) => {
     e.isPartiallyChecked || !1
   ), [d, u] = r(e.isDisabled || !1), [v, b] = r(!1), [g, x] = r(!1), y = (t) => {
     if (!e.isDisabled) {
-      const C = !c;
-      n ? s(!n) : l(C), e.onValueChange?.(C, e.value, t);
+      const k = !c;
+      n ? s(!n) : l(k), e.onValueChange?.(k, e.value, t);
     }
   }, D = (t) => {
     y(t);
@@ -103,7 +106,7 @@ const T = (e) => {
         bodyCaption: m,
         bodySecondary: h,
         bodyPrimary: f,
-        titleSmall: k
+        titleSmall: C
       }[e.labelTypography];
       return /* @__PURE__ */ a(
         t,
@@ -126,7 +129,7 @@ const T = (e) => {
         children: e.label
       }
     ) : /* @__PURE__ */ a(
-      k,
+      C,
       {
         color: e.isDisabled ? i.text.disabled : i.text.primary,
         children: e.label

package/dist/esm/components/checkBox/CheckBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' | 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n\t/** Accessible name when no visible label is rendered (e.g. product-picker rows). */\n\tariaLabel?: string;\n\tlabelTypography?:\n\t\t| 'bodyCaption'\n\t\t| 'bodySecondary'\n\t\t| 'bodyPrimary'\n\t\t| 'titleSmall';\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor || COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\t// Box (and inner check) dimensions per size — XS renders a 12x12 mark.\n\tconst dims =\n\t\tprops.size === 'XS'\n\t\t\t? {\n\t\t\t\t\tbox: 12,\n\t\t\t\t\tcheck: { w: 6, h: 5, x: 3, y: 3.5 },\n\t\t\t\t\tpartial: { x: 3, y: 5, w: 6 },\n\t\t\t  }\n\t\t\t: props.size === 'SMALL'\n\t\t\t? {\n\t\t\t\t\tbox: 16,\n\t\t\t\t\tcheck: { w: 8, h: 7, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 7, w: 6 },\n\t\t\t  }\n\t\t\t: {\n\t\t\t\t\tbox: 18,\n\t\t\t\t\tcheck: { w: 10, h: 9, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 8, w: 8 },\n\t\t\t  };\n\n\treturn (\n\t\t<svg\n\t\t\twidth={dims.box}\n\t\t\theight={dims.box}\n\t\t\tviewBox={`0 0 ${dims.box} ${dims.box}`}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={dims.box}\n\t\t\t\theight={dims.box}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\twidth={dims.check.w}\n\t\t\t\t\theight={dims.check.h}\n\t\t\t\t\tx={dims.check.x}\n\t\t\t\t\ty={dims.check.y}\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tx={dims.partial.x}\n\t\t\t\t\ty={dims.partial.y}\n\t\t\t\t\twidth={dims.partial.w}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked || false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked || false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled || false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst toggleCheck = (event?: React.SyntheticEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event as React.MouseEvent);\n\t\t}\n\t};\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\ttoggleCheck(event);\n\t};\n\n\tconst handleKeyDown = (event: React.KeyboardEvent) => {\n\t\tif (event.key === ' ' || event.key === 'Enter') {\n\t\t\tevent.preventDefault();\n\t\t\ttoggleCheck(event);\n\t\t}\n\t};\n\n\tconst ariaChecked = isPartiallyChecked\n\t\t? 'mixed'\n\t\t: isChecked\n\t\t? 'true'\n\t\t: 'false';\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled || false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked || false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif (props.labelTypography) {\n\t\t\tconst LabelTypography = {\n\t\t\t\tbodyCaption: BodyCaption,\n\t\t\t\tbodySecondary: BodySecondary,\n\t\t\t\tbodyPrimary: BodyPrimary,\n\t\t\t\ttitleSmall: TitleSmall,\n\t\t\t}[props.labelTypography];\n\t\t\treturn (\n\t\t\t\t<LabelTypography\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</LabelTypography>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'XS') {\n\t\t\treturn (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodyCaption>\n\t\t\t);\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) || props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\trole=\"checkbox\"\n\t\t\taria-checked={ariaChecked}\n\t\t\taria-disabled={isDisabled || undefined}\n\t\t\taria-label={props.label ? undefined : props.ariaLabel}\n\t\t\ttabIndex={isDisabled ? -1 : 0}\n\t\t\tonClick={handleCheck}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t\tactiveColor={props.activeColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked || false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tsize={props.size}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","dims","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","toggleCheck","event","newVal","handleCheck","handleKeyDown","ariaChecked","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"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"}
+{"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' | 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n\t/** Accessible name when no visible label is rendered (e.g. product-picker rows). */\n\tariaLabel?: string;\n\tlabelTypography?:\n\t\t| 'bodyCaption'\n\t\t| 'bodySecondary'\n\t\t| 'bodyPrimary'\n\t\t| 'titleSmall';\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor || COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\t// Box (and inner check) dimensions per size — XS renders a 12x12 mark.\n\tconst dims =\n\t\tprops.size === 'XS'\n\t\t\t? {\n\t\t\t\t\tbox: 12,\n\t\t\t\t\tcheck: { w: 6, h: 5, x: 3, y: 3.5 },\n\t\t\t\t\tpartial: { x: 3, y: 5, w: 6 },\n\t\t\t  }\n\t\t\t: props.size === 'SMALL'\n\t\t\t? {\n\t\t\t\t\tbox: 16,\n\t\t\t\t\tcheck: { w: 8, h: 7, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 7, w: 6 },\n\t\t\t  }\n\t\t\t: {\n\t\t\t\t\tbox: 18,\n\t\t\t\t\tcheck: { w: 10, h: 9, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 8, w: 8 },\n\t\t\t  };\n\n\treturn (\n\t\t<svg\n\t\t\tdata-testid=\"checkbox-mark\"\n\t\t\twidth={dims.box}\n\t\t\theight={dims.box}\n\t\t\tviewBox={`0 0 ${dims.box} ${dims.box}`}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={dims.box}\n\t\t\t\theight={dims.box}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\tdata-testid=\"checkmark-icon\"\n\t\t\t\t\twidth={dims.check.w}\n\t\t\t\t\theight={dims.check.h}\n\t\t\t\t\tx={dims.check.x}\n\t\t\t\t\ty={dims.check.y}\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tdata-testid=\"partial-mark\"\n\t\t\t\t\tx={dims.partial.x}\n\t\t\t\t\ty={dims.partial.y}\n\t\t\t\t\twidth={dims.partial.w}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked || false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked || false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled || false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst toggleCheck = (event?: React.SyntheticEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event as React.MouseEvent);\n\t\t}\n\t};\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\ttoggleCheck(event);\n\t};\n\n\tconst handleKeyDown = (event: React.KeyboardEvent) => {\n\t\tif (event.key === ' ' || event.key === 'Enter') {\n\t\t\tevent.preventDefault();\n\t\t\ttoggleCheck(event);\n\t\t}\n\t};\n\n\tconst ariaChecked = isPartiallyChecked\n\t\t? 'mixed'\n\t\t: isChecked\n\t\t? 'true'\n\t\t: 'false';\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled || false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked || false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif (props.labelTypography) {\n\t\t\tconst LabelTypography = {\n\t\t\t\tbodyCaption: BodyCaption,\n\t\t\t\tbodySecondary: BodySecondary,\n\t\t\t\tbodyPrimary: BodyPrimary,\n\t\t\t\ttitleSmall: TitleSmall,\n\t\t\t}[props.labelTypography];\n\t\t\treturn (\n\t\t\t\t<LabelTypography\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</LabelTypography>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'XS') {\n\t\t\treturn (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodyCaption>\n\t\t\t);\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) || props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\trole=\"checkbox\"\n\t\t\taria-checked={ariaChecked}\n\t\t\taria-disabled={isDisabled || undefined}\n\t\t\taria-label={props.label ? undefined : props.ariaLabel}\n\t\t\ttabIndex={isDisabled ? -1 : 0}\n\t\t\tonClick={handleCheck}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t\tactiveColor={props.activeColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked || false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tsize={props.size}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","dims","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","toggleCheck","event","newVal","handleCheck","handleKeyDown","ariaChecked","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"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"}

package/dist/esm/components/code-block/CodeBlock.js

@@ -16,15 +16,15 @@ const U = ({
   hideHeader: b = !1,
   hideCopy: M = !1
 }) => {
-  const [j, l] = c(!1), [v, d] = c(!1), [p, m] = c(
+  const [j, l] = c(!1), [v, d] = c(!1), [m, p] = c(
     "success"
-  ), x = async () => {
+  ), w = async () => {
     try {
-      await navigator.clipboard.writeText(a), l(!0), m("success"), d(!0), setTimeout(() => l(!1), 2e3);
+      await navigator.clipboard.writeText(a), l(!0), p("success"), d(!0), setTimeout(() => l(!1), 2e3);
     } catch {
-      m("error"), d(!0);
+      p("error"), d(!0);
     }
-  }, [S, f] = c(a);
+  }, [x, f] = c(a);
   L(() => {
     let e = !0;
     return (async () => {
@@ -41,15 +41,15 @@ const U = ({
       e = !1;
     };
   }, [a, s]);
-  const C = S.split(`
-`), _ = (e) => ({
+  const C = x.split(`
+`), S = (e) => ({
     javascript: "#FEC02D",
     python: "#3776ab",
     java: "#ed8b00",
     css: "#1572b6",
     html: "#e34c26",
     json: "#000000"
-  })[e.toLowerCase()] || (t === "dark" ? "#6e7681" : "#656d76"), w = (e) => ({
+  })[e.toLowerCase()] || (t === "dark" ? "#6e7681" : "#656d76"), _ = (e) => ({
     javascript: "#000"
   })?.[e.toLowerCase()] || "#fff";
   return /* @__PURE__ */ i(k, { themeMode: t, maxWidth: T, children: [
@@ -59,16 +59,16 @@ const U = ({
         /* @__PURE__ */ o(
           D,
           {
-            bg: _(s),
-            color: w(s),
+            bg: S(s),
+            color: _(s),
             children: s
           }
         )
       ] }),
-      !M && /* @__PURE__ */ o(E, { themeMode: t, onClick: x, children: j ? /* @__PURE__ */ o(u, { children: "✓ Copied" }) : /* @__PURE__ */ o(u, { children: "Copy" }) })
+      !M && /* @__PURE__ */ o(E, { themeMode: t, onClick: w, children: j ? /* @__PURE__ */ o(u, { children: "✓ Copied" }) : /* @__PURE__ */ o(u, { children: "Copy" }) })
     ] }),
     /* @__PURE__ */ i(P, { maxHeight: y, children: [
-      !g && /* @__PURE__ */ o(R, { themeMode: t, children: C.map((e, r) => /* @__PURE__ */ o("div", { children: r + 1 }, r)) }),
+      !g && /* @__PURE__ */ o(R, { themeMode: t, children: C.map((e, r) => /* @__PURE__ */ o("div", { "data-testid": "line-number-row", children: r + 1 }, r)) }),
       /* @__PURE__ */ o(J, { themeMode: t, children: C.map((e, r) => /* @__PURE__ */ o(
         "div",
         {
@@ -83,9 +83,9 @@ const U = ({
     v && /* @__PURE__ */ o(
       B,
       {
-        text: p === "success" ? "Code copied to clipboard!" : "Failed to copy code",
+        text: m === "success" ? "Code copied to clipboard!" : "Failed to copy code",
         autoClose: 2e3,
-        type: p,
+        type: m,
         hideProgressBar: !0,
         onCloseToast: () => d(!1)
       }

package/dist/esm/components/code-block/CodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.js","sources":["../../../../src/components/code-block/CodeBlock.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Toaster } from '@src/components/toaster/Toaster';\nimport {\n\tCode,\n\tCodeContainer,\n\tContainer,\n\tCopyButton,\n\tHeader,\n\tLanguageBadge,\n\tLineNumbers,\n\tTitle,\n\tTitleSection,\n} from './CodeBlock.styled';\nimport { highlightCode } from './CodeBlockHelper';\nimport { CodeBlockProps, CodeLanguage } from './types';\n\n// optional types extraction\n\nexport const CodeBlock = ({\n\tcode = '',\n\tlanguage = CodeLanguage.JAVASCRIPT,\n\ttitle = '',\n\thideLineNumbers = false,\n\tmaxHeight = '400px',\n\tmaxWidth,\n\ttheme = 'dark',\n\thideHeader = false,\n\thideCopy = false,\n}: CodeBlockProps) => {\n\tconst [copied, setCopied] = useState(false);\n\tconst [showToaster, setShowToaster] = useState(false);\n\tconst [toasterType, setToasterType] = useState<'success' | 'error'>(\n\t\t'success',\n\t);\n\n\tconst handleCopy = async () => {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(code);\n\t\t\tsetCopied(true);\n\t\t\tsetToasterType('success');\n\t\t\tsetShowToaster(true);\n\t\t\tsetTimeout(() => setCopied(false), 2000);\n\t\t} catch (err) {\n\t\t\tsetToasterType('error');\n\t\t\tsetShowToaster(true);\n\t\t}\n\t};\n\n\t// Apply language-specific formatting\n\tconst [formattedCode, setFormattedCode] = useState(code);\n\n\tuseEffect(() => {\n\t\tlet isMounted = true;\n\t\tconst formatCode = async () => {\n\t\t\ttry {\n\t\t\t\tconst formatterModule = await import(\n\t\t\t\t\t/* webpackChunkName: \"languageSpecificFormatting-[request]\" */\n\t\t\t\t\t`./languageSpecificFormatting/${language}_file.ts`\n\t\t\t\t);\n\t\t\t\tif (formatterModule?.format && isMounted) {\n\t\t\t\t\tsetFormattedCode(formatterModule.format(code));\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\t// No formatter found — just use original\n\t\t\t}\n\t\t\tif (isMounted) setFormattedCode(code);\n\t\t};\n\n\t\tformatCode();\n\t\treturn () => {\n\t\t\tisMounted = false;\n\t\t};\n\t}, [code, language]);\n\n\tconst lines = formattedCode.split('\\n');\n\n\tconst getLanguageBadgeColor = (lang: CodeLanguage) => {\n\t\tconst colors: Record<CodeLanguage, string> = {\n\t\t\tjavascript: '#FEC02D',\n\t\t\tpython: '#3776ab',\n\t\t\tjava: '#ed8b00',\n\t\t\tcss: '#1572b6',\n\t\t\thtml: '#e34c26',\n\t\t\tjson: '#000000',\n\t\t};\n\t\treturn (\n\t\t\tcolors[lang.toLowerCase()] || (theme === 'dark' ? '#6e7681' : '#656d76')\n\t\t);\n\t};\n\n\tconst getBadgeTextColor = (lang: CodeLanguage) => {\n\t\tconst colors: Record<string, string> = {\n\t\t\tjavascript: '#000',\n\t\t};\n\t\treturn colors?.[lang.toLowerCase()] || '#fff';\n\t};\n\n\treturn (\n\t\t<Container themeMode={theme} maxWidth={maxWidth}>\n\t\t\t{!hideHeader && (\n\t\t\t\t<Header themeMode={theme}>\n\t\t\t\t\t<TitleSection>\n\t\t\t\t\t\t{!!title && title && <Title themeMode={theme}>{title}</Title>}\n\t\t\t\t\t\t<LanguageBadge\n\t\t\t\t\t\t\tbg={getLanguageBadgeColor(language)}\n\t\t\t\t\t\t\tcolor={getBadgeTextColor(language)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{language}\n\t\t\t\t\t\t</LanguageBadge>\n\t\t\t\t\t</TitleSection>\n\t\t\t\t\t{!hideCopy && (\n\t\t\t\t\t\t<CopyButton themeMode={theme} onClick={handleCopy}>\n\t\t\t\t\t\t\t{copied ? <>✓ Copied</> : <>Copy</>}\n\t\t\t\t\t\t</CopyButton>\n\t\t\t\t\t)}\n\t\t\t\t</Header>\n\t\t\t)}\n\n\t\t\t<CodeContainer maxHeight={maxHeight}>\n\t\t\t\t{!hideLineNumbers && (\n\t\t\t\t\t<LineNumbers themeMode={theme}>\n\t\t\t\t\t\t{lines.map((_, index) => (\n\t\t\t\t\t\t\t<div key={index}>{index + 1}</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</LineNumbers>\n\t\t\t\t)}\n\t\t\t\t<Code themeMode={theme}>\n\t\t\t\t\t{lines.map((line, index) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\tstyle={{ minHeight: line.trim() ? '20px' : '0px' }}\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t__html: highlightCode(line, language, theme) || '&nbsp;',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</Code>\n\t\t\t</CodeContainer>\n\t\t\t{showToaster && (\n\t\t\t\t<Toaster\n\t\t\t\t\ttext={\n\t\t\t\t\t\ttoasterType === 'success'\n\t\t\t\t\t\t\t? 'Code copied to clipboard!'\n\t\t\t\t\t\t\t: 'Failed to copy code'\n\t\t\t\t\t}\n\t\t\t\t\tautoClose={2000}\n\t\t\t\t\ttype={toasterType}\n\t\t\t\t\thideProgressBar\n\t\t\t\t\tonCloseToast={() => setShowToaster(false)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n"],"names":["CodeBlock","code","language","CodeLanguage","title","hideLineNumbers","maxHeight","maxWidth","theme","hideHeader","hideCopy","copied","setCopied","useState","showToaster","setShowToaster","toasterType","setToasterType","handleCopy","formattedCode","setFormattedCode","useEffect","isMounted","formatterModule","__variableDynamicImportRuntimeHelper","lines","getLanguageBadgeColor","lang","getBadgeTextColor","jsxs","Container","Header","TitleSection","Title","jsx","LanguageBadge","CopyButton","Fragment","CodeContainer","LineNumbers","_","index","Code","line","highlightCode","Toaster"],"mappings":"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"}
+{"version":3,"file":"CodeBlock.js","sources":["../../../../src/components/code-block/CodeBlock.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Toaster } from '@src/components/toaster/Toaster';\nimport {\n\tCode,\n\tCodeContainer,\n\tContainer,\n\tCopyButton,\n\tHeader,\n\tLanguageBadge,\n\tLineNumbers,\n\tTitle,\n\tTitleSection,\n} from './CodeBlock.styled';\nimport { highlightCode } from './CodeBlockHelper';\nimport { CodeBlockProps, CodeLanguage } from './types';\n\n// optional types extraction\n\nexport const CodeBlock = ({\n\tcode = '',\n\tlanguage = CodeLanguage.JAVASCRIPT,\n\ttitle = '',\n\thideLineNumbers = false,\n\tmaxHeight = '400px',\n\tmaxWidth,\n\ttheme = 'dark',\n\thideHeader = false,\n\thideCopy = false,\n}: CodeBlockProps) => {\n\tconst [copied, setCopied] = useState(false);\n\tconst [showToaster, setShowToaster] = useState(false);\n\tconst [toasterType, setToasterType] = useState<'success' | 'error'>(\n\t\t'success',\n\t);\n\n\tconst handleCopy = async () => {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(code);\n\t\t\tsetCopied(true);\n\t\t\tsetToasterType('success');\n\t\t\tsetShowToaster(true);\n\t\t\tsetTimeout(() => setCopied(false), 2000);\n\t\t} catch (err) {\n\t\t\tsetToasterType('error');\n\t\t\tsetShowToaster(true);\n\t\t}\n\t};\n\n\t// Apply language-specific formatting\n\tconst [formattedCode, setFormattedCode] = useState(code);\n\n\tuseEffect(() => {\n\t\tlet isMounted = true;\n\t\tconst formatCode = async () => {\n\t\t\ttry {\n\t\t\t\tconst formatterModule = await import(\n\t\t\t\t\t/* webpackChunkName: \"languageSpecificFormatting-[request]\" */\n\t\t\t\t\t`./languageSpecificFormatting/${language}_file.ts`\n\t\t\t\t);\n\t\t\t\tif (formatterModule?.format && isMounted) {\n\t\t\t\t\tsetFormattedCode(formatterModule.format(code));\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\t// No formatter found — just use original\n\t\t\t}\n\t\t\tif (isMounted) setFormattedCode(code);\n\t\t};\n\n\t\tformatCode();\n\t\treturn () => {\n\t\t\tisMounted = false;\n\t\t};\n\t}, [code, language]);\n\n\tconst lines = formattedCode.split('\\n');\n\n\tconst getLanguageBadgeColor = (lang: CodeLanguage) => {\n\t\tconst colors: Record<CodeLanguage, string> = {\n\t\t\tjavascript: '#FEC02D',\n\t\t\tpython: '#3776ab',\n\t\t\tjava: '#ed8b00',\n\t\t\tcss: '#1572b6',\n\t\t\thtml: '#e34c26',\n\t\t\tjson: '#000000',\n\t\t};\n\t\treturn (\n\t\t\tcolors[lang.toLowerCase()] || (theme === 'dark' ? '#6e7681' : '#656d76')\n\t\t);\n\t};\n\n\tconst getBadgeTextColor = (lang: CodeLanguage) => {\n\t\tconst colors: Record<string, string> = {\n\t\t\tjavascript: '#000',\n\t\t};\n\t\treturn colors?.[lang.toLowerCase()] || '#fff';\n\t};\n\n\treturn (\n\t\t<Container themeMode={theme} maxWidth={maxWidth}>\n\t\t\t{!hideHeader && (\n\t\t\t\t<Header themeMode={theme}>\n\t\t\t\t\t<TitleSection>\n\t\t\t\t\t\t{!!title && title && <Title themeMode={theme}>{title}</Title>}\n\t\t\t\t\t\t<LanguageBadge\n\t\t\t\t\t\t\tbg={getLanguageBadgeColor(language)}\n\t\t\t\t\t\t\tcolor={getBadgeTextColor(language)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{language}\n\t\t\t\t\t\t</LanguageBadge>\n\t\t\t\t\t</TitleSection>\n\t\t\t\t\t{!hideCopy && (\n\t\t\t\t\t\t<CopyButton themeMode={theme} onClick={handleCopy}>\n\t\t\t\t\t\t\t{copied ? <>✓ Copied</> : <>Copy</>}\n\t\t\t\t\t\t</CopyButton>\n\t\t\t\t\t)}\n\t\t\t\t</Header>\n\t\t\t)}\n\n\t\t\t<CodeContainer maxHeight={maxHeight}>\n\t\t\t\t{!hideLineNumbers && (\n\t\t\t\t\t<LineNumbers themeMode={theme}>\n\t\t\t\t\t\t{lines.map((_, index) => (\n\t\t\t\t\t\t\t<div key={index} data-testid=\"line-number-row\">\n\t\t\t\t\t\t\t\t{index + 1}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</LineNumbers>\n\t\t\t\t)}\n\t\t\t\t<Code themeMode={theme}>\n\t\t\t\t\t{lines.map((line, index) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\tstyle={{ minHeight: line.trim() ? '20px' : '0px' }}\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t__html: highlightCode(line, language, theme) || '&nbsp;',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</Code>\n\t\t\t</CodeContainer>\n\t\t\t{showToaster && (\n\t\t\t\t<Toaster\n\t\t\t\t\ttext={\n\t\t\t\t\t\ttoasterType === 'success'\n\t\t\t\t\t\t\t? 'Code copied to clipboard!'\n\t\t\t\t\t\t\t: 'Failed to copy code'\n\t\t\t\t\t}\n\t\t\t\t\tautoClose={2000}\n\t\t\t\t\ttype={toasterType}\n\t\t\t\t\thideProgressBar\n\t\t\t\t\tonCloseToast={() => setShowToaster(false)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n"],"names":["CodeBlock","code","language","CodeLanguage","title","hideLineNumbers","maxHeight","maxWidth","theme","hideHeader","hideCopy","copied","setCopied","useState","showToaster","setShowToaster","toasterType","setToasterType","handleCopy","formattedCode","setFormattedCode","useEffect","isMounted","formatterModule","__variableDynamicImportRuntimeHelper","lines","getLanguageBadgeColor","lang","getBadgeTextColor","jsxs","Container","Header","TitleSection","Title","jsx","LanguageBadge","CopyButton","Fragment","CodeContainer","LineNumbers","_","index","Code","line","highlightCode","Toaster"],"mappings":"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"}

package/dist/esm/components/colourInput/ColourInput.js

@@ -1,23 +1,24 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { ColorInputContainer as n, StyledColorInput as l } from "./ColourInput.styled.js";
 import { BodySecondary as a, BodyPrimary as i } from "../TypographyStyle.js";
-const C = (e) => /* @__PURE__ */ r("div", { className: "buttonColorCustom", children: [
-  e.headingText && /* @__PURE__ */ o(a, { children: e.headingText }),
-  /* @__PURE__ */ r(n, { children: [
-    /* @__PURE__ */ o(i, { children: e.labelText ?? "Colour" }),
-    /* @__PURE__ */ o(
+const m = (o) => /* @__PURE__ */ t("div", { className: "buttonColorCustom", children: [
+  o.headingText && /* @__PURE__ */ e(a, { children: o.headingText }),
+  /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ e(i, { children: o.labelText ?? "Colour" }),
+    /* @__PURE__ */ e(
       l,
       {
         type: "color",
-        onChange: (t) => {
-          e.onValueChange(t.target.value);
+        "data-testid": "colour-input",
+        onChange: (r) => {
+          o.onValueChange(r.target.value);
         },
-        value: e.value
+        value: o.value
       }
     )
   ] })
 ] });
 export {
-  C as ColourInput
+  m as ColourInput
 };
 //# sourceMappingURL=ColourInput.js.map

package/dist/esm/components/colourInput/ColourInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColourInput.js","sources":["../../../../src/components/colourInput/ColourInput.tsx"],"sourcesContent":["import React from 'react';\nimport {\n\tColorInputContainer,\n\tStyledColorInput,\n} from '@src/components/colourInput/ColourInput.styled';\nimport { BodyPrimary, BodySecondary } from '@src/components/TypographyStyle';\n\nexport interface ColourInputProps {\n\tvalue: string;\n\tlabelText: string;\n\theadingText?: string;\n\tonValueChange: (value: string) => void;\n}\n\nexport const ColourInput: React.FC<ColourInputProps> = (props) => {\n\treturn (\n\t\t<div className=\"buttonColorCustom\">\n\t\t\t{props.headingText && <BodySecondary>{props.headingText}</BodySecondary>}\n\t\t\t<ColorInputContainer>\n\t\t\t\t<BodyPrimary>{props.labelText ?? 'Colour'}</BodyPrimary>\n\t\t\t\t<StyledColorInput\n\t\t\t\t\ttype=\"color\"\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tprops.onValueChange(e.target.value);\n\t\t\t\t\t}}\n\t\t\t\t\tvalue={props.value}\n\t\t\t\t/>\n\t\t\t</ColorInputContainer>\n\t\t</div>\n\t);\n};\n"],"names":["ColourInput","props","jsxs","jsx","BodySecondary","ColorInputContainer","BodyPrimary","StyledColorInput","e"],"mappings":";;;AAcO,MAAMA,IAA0C,CAACC,MAEtD,gBAAAC,EAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,EAAAD,EAAM,eAAe,gBAAAE,EAACC,GAAA,EAAe,UAAAH,EAAM,aAAY;AAAA,oBACvDI,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAF,EAACG,GAAA,EAAa,UAAAL,EAAM,aAAa,UAAS;AAAA,IAC1C,gBAAAE;AAAA,MAACI;AAAA,MAAA;AAAA,QACA,MAAK;AAAA,QACL,UAAU,CAACC,MAAM;AAChB,UAAAP,EAAM,cAAcO,EAAE,OAAO,KAAK;AAAA,QACnC;AAAA,QACA,OAAOP,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACd,EAAA,CACD;AAAA,GACD;"}
+{"version":3,"file":"ColourInput.js","sources":["../../../../src/components/colourInput/ColourInput.tsx"],"sourcesContent":["import React from 'react';\nimport {\n\tColorInputContainer,\n\tStyledColorInput,\n} from '@src/components/colourInput/ColourInput.styled';\nimport { BodyPrimary, BodySecondary } from '@src/components/TypographyStyle';\n\nexport interface ColourInputProps {\n\tvalue: string;\n\tlabelText: string;\n\theadingText?: string;\n\tonValueChange: (value: string) => void;\n}\n\nexport const ColourInput: React.FC<ColourInputProps> = (props) => {\n\treturn (\n\t\t<div className=\"buttonColorCustom\">\n\t\t\t{props.headingText && <BodySecondary>{props.headingText}</BodySecondary>}\n\t\t\t<ColorInputContainer>\n\t\t\t\t<BodyPrimary>{props.labelText ?? 'Colour'}</BodyPrimary>\n\t\t\t\t<StyledColorInput\n\t\t\t\t\ttype=\"color\"\n\t\t\t\t\tdata-testid=\"colour-input\"\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tprops.onValueChange(e.target.value);\n\t\t\t\t\t}}\n\t\t\t\t\tvalue={props.value}\n\t\t\t\t/>\n\t\t\t</ColorInputContainer>\n\t\t</div>\n\t);\n};\n"],"names":["ColourInput","props","jsxs","jsx","BodySecondary","ColorInputContainer","BodyPrimary","StyledColorInput","e"],"mappings":";;;AAcO,MAAMA,IAA0C,CAACC,MAEtD,gBAAAC,EAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,EAAAD,EAAM,eAAe,gBAAAE,EAACC,GAAA,EAAe,UAAAH,EAAM,aAAY;AAAA,oBACvDI,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAF,EAACG,GAAA,EAAa,UAAAL,EAAM,aAAa,UAAS;AAAA,IAC1C,gBAAAE;AAAA,MAACI;AAAA,MAAA;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,UAAU,CAACC,MAAM;AAChB,UAAAP,EAAM,cAAcO,EAAE,OAAO,KAAK;AAAA,QACnC;AAAA,QACA,OAAOP,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACd,EAAA,CACD;AAAA,GACD;"}