{"version":3,"file":"chameleon-B3PiCsYn.js","sources":["../../../../projects/chameleon/lib/theme/helpers.tsx","../../../../projects/chameleon/lib/theme/theme-data.ts","../../../../projects/chameleon/scripts/generate-icons/icon-component-wrapper.ts","../../../../projects/chameleon/icons/alert-filled.tsx","../../../../projects/chameleon/icons/circle-check-filled.tsx","../../../../projects/chameleon/lib/components/alert/alert.tsx","../../../../projects/chameleon/lib/components/button/button.tsx","../../../../projects/chameleon/icons/check.tsx","../../../../projects/chameleon/icons/amex.tsx","../../../../projects/chameleon/icons/apple-pay-mark.tsx","../../../../projects/chameleon/icons/cvv.tsx","../../../../projects/chameleon/icons/diner.tsx","../../../../projects/chameleon/icons/discover.tsx","../../../../projects/chameleon/icons/jcb.tsx","../../../../projects/chameleon/icons/maestro.tsx","../../../../projects/chameleon/icons/mastercard.tsx","../../../../projects/chameleon/icons/union-pay.tsx","../../../../projects/chameleon/icons/unknown-card.tsx","../../../../projects/chameleon/icons/visa.tsx","../../../../projects/chameleon/lib/components/text/text.tsx","../../../../projects/chameleon/lib/components/tooltip/tooltip.tsx","../../../../projects/chameleon/lib/components/display-cards/display-cards.tsx","../../../../projects/chameleon/lib/components/card-number-input/card-number-input.tsx","../../../../projects/chameleon/lib/components/inline-message/inline-message.tsx","../../../../projects/chameleon/lib/components/checkbox/checkbox.tsx","../../../../projects/chameleon/icons/help.tsx","../../../../projects/chameleon/lib/components/help-tooltip/help-tooltip.tsx","../../../../projects/chameleon/lib/components/cvv-input/cvv-input.tsx","../../../../projects/chameleon/lib/helpers/merge-object.ts","../../../../projects/chameleon/lib/components/design-system-provider/theme-merge.ts","../../../../projects/chameleon/lib/components/design-system-provider/design-system-provider.tsx","../../../../projects/chameleon/lib/components/divider/divider.tsx","../../../../projects/chameleon/lib/hooks/use-click-outside.ts","../../../../projects/chameleon/lib/components/dropdown-behaviour/dropdown-behaviour.tsx","../../../../projects/chameleon/lib/components/input-title/input-title.tsx","../../../../projects/chameleon/icons/loader.tsx","../../../../projects/chameleon/lib/components/loading-spinner/loading-spinner.tsx","../../../../projects/chameleon/lib/components/dropdown-autocomplete/autocomplete-option.tsx","../../../../projects/chameleon/lib/components/dropdown-autocomplete/dropdown-autocomplete.tsx","../../../../projects/chameleon/lib/components/error-tile/error-tile.tsx","../../../../projects/chameleon/lib/components/radio-button/radio-button.tsx","../../../../projects/chameleon/icons/chevron-down.tsx","../../../../projects/chameleon/lib/components/select/select.tsx","../../../../projects/chameleon/lib/components/text-input/text-input.tsx","../../../../projects/chameleon/lib/components/footer/footer.tsx","../../../../projects/chameleon/icons/paypal-btn-logo.tsx","../../../../projects/chameleon/icons/paypal-btn-logo-inverse.tsx","../../../../projects/chameleon/lib/components/paypal/paypal-button.tsx","../../../../projects/chameleon/lib/hooks/use-expand-collapse-animation.ts","../../../../projects/chameleon/lib/components/payment-method-title/payment-method-title.tsx","../../../../projects/chameleon/icons/check-example-en.tsx","../../../../projects/chameleon/icons/check-example-es-US.tsx","../../../../projects/chameleon/icons/pencil.tsx","../../../../projects/chameleon/icons/trash.tsx","../../../../projects/chameleon/icons/x.tsx","../../../../projects/chameleon/icons/dots-vertical.tsx","../../../../projects/chameleon/lib/components/flyout/flyout.tsx","../../../../projects/chameleon/lib/components/flyout/menu-item.tsx","../../../../projects/chameleon/icons/ecp.tsx","../../../../projects/chameleon/icons/gift.tsx","../../../../projects/chameleon/icons/google-pay-mark.tsx","../../../../projects/chameleon/icons/pay-by-bank.tsx","../../../../projects/chameleon/icons/paze.tsx","../../../../projects/chameleon/icons/sepa.tsx","../../../../projects/chameleon/icons/alipay.tsx","../../../../projects/chameleon/icons/ideal.tsx","../../../../projects/chameleon/icons/paypal.tsx","../../../../projects/chameleon/icons/trustly.tsx","../../../../projects/chameleon/icons/wechat-pay.tsx","../../../../projects/chameleon/lib/components/radio-tile/radio-tile.tsx","../../../../projects/chameleon/lib/components/radio-group/radio-group.tsx","../../../../projects/chameleon/lib/helpers/google-font-url.ts"],"sourcesContent":["import merge from \"lodash.merge\";\n\nimport {\n BreakpointConditions,\n Breakpoints,\n BreakpointsType,\n CoreColor,\n DensityType,\n DynamicContrastColor,\n FontWeightKey,\n HEX,\n MediaQuery,\n THSLA,\n ThemeColor,\n ThemeColorKey,\n TypographyKey,\n Unit,\n} from \"./theme\";\nimport { Theme, ThemePartial } from \"./theme.css\";\n\n/**\n * Returns a merged theme with overridden custom values\n */\nexport const createNewTheme = (\n standardTheme: Theme,\n newThemeObject: ThemePartial\n): Theme => {\n return merge(standardTheme, newThemeObject);\n};\n\n/**\n * Calculates hover and active colors for a hex value\n */\nexport const generateHexInteractionColors = (\n hex: `#${string}`\n): {\n active: `#${string}`;\n hover: `#${string}`;\n} => {\n return {\n active: `${hex}F2`, // 95%\n hover: `${hex}E6`, // 90%\n };\n};\n\n/**\n * Get lightness from the color\n */\nconst getColorLightness = (hsla: THSLA) => {\n return parseFloat(hsla.split(\", \")[2]);\n};\n\n/**\n * Get hsla values from the color\n */\nexport const getHSLAValues = (hsla: THSLA) => {\n const digits = hsla.match(/\\(([^)]+)\\)/)?.pop() || \"\";\n const parsed = digits.split(\",\").map((n) => parseFloat(n) || 0);\n // provide a default 0 structure if something goes really wrong\n return [parsed[0] ?? 0, parsed[1] ?? 0, parsed[2] ?? 0, parsed[3] ?? 0];\n};\n\nconst updateColorLightness = (color: THSLA, addon: number): THSLA => {\n const [h, s, l, a] = getHSLAValues(color);\n return `hsla(${h}, ${s}%, ${l + addon}%, ${a})`;\n};\n\nconst hslToRgb = (color: THSLA) => {\n const [h, _s, _l] = getHSLAValues(color);\n\n const s = _s / 100;\n const l = _l / 100;\n const k = (n: number) => (n + h / 30) % 12;\n const a = s * Math.min(l, 1 - l);\n const f = (n: number) =>\n l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));\n\n return [255 * f(0), 255 * f(8), 255 * f(4)];\n};\n\nconst relativeLuminance = (color: THSLA) => {\n const [R, G, B] = hslToRgb(color).map((n) => {\n n = n / 255;\n return n <= 0.03928 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);\n });\n return R * 0.2126 + G * 0.7152 + B * 0.0722;\n};\n\n/** Get contrast color for a given color - white or black */\nexport const onContrast = (color: THSLA, white: THSLA, black: THSLA) => {\n const colorLuminance = relativeLuminance(color);\n const whiteLuminance = relativeLuminance(white);\n const blackLuminance = relativeLuminance(black);\n const contrastWithWhite = (whiteLuminance + 0.05) / (colorLuminance + 0.05);\n const contrastWithBlack = (colorLuminance + 0.05) / (blackLuminance + 0.05);\n\n return contrastWithBlack > contrastWithWhite ? black : white;\n};\n\nexport const onHover = (color: THSLA): THSLA => {\n const lightness = getColorLightness(color);\n if (lightness - 10 > 0) {\n // Decrease lightness by 10 for hover effect\n return updateColorLightness(color, -10);\n } else {\n // If decreasing lightness goes beyond 0, increase lightness by 10\n return updateColorLightness(color, 10);\n }\n};\n\nexport const onPress = (color: THSLA): THSLA => {\n const lightness = getColorLightness(color);\n if (lightness - 20 > 0) {\n // Decrease lightness by 20 for hover effect\n return updateColorLightness(color, -20);\n } else {\n // If decreasing lightness goes beyond 0, increase lightness by 20\n return updateColorLightness(color, 20);\n }\n};\n\nexport const onFade = (color: THSLA, alpha = 0.02): THSLA => {\n // To get disabled effect set opacity to 2%\n const [h, s, l] = getHSLAValues(color);\n return `hsla(${h}, ${s}%, ${l}%, ${alpha})`;\n};\n\nexport const generateContrastColors = (\n coreColors: CoreColor\n): DynamicContrastColor => ({\n onBrand: onContrast(\n coreColors.brand as THSLA,\n coreColors.white as THSLA,\n coreColors.black as THSLA\n ),\n onPrimaryText: onContrast(\n coreColors.primaryText as THSLA,\n coreColors.white as THSLA,\n coreColors.black as THSLA\n ),\n outline: onContrast(\n coreColors.containerBackground as THSLA,\n coreColors.white as THSLA,\n coreColors.black as THSLA\n ),\n});\n\nexport const generateBrandColors = (coreColors: CoreColor) => ({\n brandHover: onHover(coreColors.brand as THSLA),\n brandPressed: onPress(coreColors.brand as THSLA),\n});\n\nexport const generateInteractiveColors = (coreColors: CoreColor) => ({\n interactiveHover: onHover(coreColors.interactive as THSLA),\n interactivePressed: onPress(coreColors.interactive as THSLA),\n});\n\nexport const generateCriticalColors = (coreColors: CoreColor) => ({\n criticalHover: onHover(coreColors.critical as THSLA),\n criticalPressed: onPress(coreColors.critical as THSLA),\n});\n\nexport const generatePrimaryTextColors = (coreColors: CoreColor) => ({\n primaryTextHover: onHover(coreColors.primaryText as THSLA),\n primaryTextPressed: onPress(coreColors.primaryText as THSLA),\n});\n\nexport const generateBorderColors = (coreColors: CoreColor) => ({\n borderHover: onHover(coreColors.border as THSLA),\n borderPressed: onPress(coreColors.border as THSLA),\n});\n\nexport const generateContainerBackgroundColors = (coreColors: CoreColor) => ({\n containerBackgroundHover: onHover(coreColors.containerBackground as THSLA),\n containerBackgroundPressed: onPress(coreColors.containerBackground as THSLA),\n});\n\nexport const generateFormBackgroundColors = (coreColors: CoreColor) => ({\n formBackgroundHover: onHover(coreColors.formBackground as THSLA),\n formBackgroundPressed: onPress(coreColors.formBackground as THSLA),\n});\n\nexport const generateTanslucentColors = (coreColors: CoreColor) => ({\n interactiveFade: onFade(coreColors.interactive as THSLA, 0.4),\n borderFade: onFade(coreColors.border as THSLA, 0.4),\n dropdownBoxShadow: onFade(coreColors.containerBackground as THSLA, 0.12),\n listItemHighlight: onFade(coreColors.black as THSLA, 0.02),\n});\n\nexport const generateDynamicColors = (coreColors: CoreColor) => ({\n ...generateContrastColors(coreColors),\n ...generateBrandColors(coreColors),\n ...generateInteractiveColors(coreColors),\n ...generateCriticalColors(coreColors),\n ...generatePrimaryTextColors(coreColors),\n ...generateBorderColors(coreColors),\n ...generateContainerBackgroundColors(coreColors),\n ...generateFormBackgroundColors(coreColors),\n ...generateTanslucentColors(coreColors),\n});\n\nexport const toHSLA = (color: HEX): THSLA => {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(color) || [];\n let r = parseInt(result[1], 16);\n let g = parseInt(result[2], 16);\n let b = parseInt(result[3], 16);\n\n r /= 255;\n g /= 255;\n b /= 255;\n const max = Math.max(r, g, b),\n min = Math.min(r, g, b);\n let h = 0,\n s = 0,\n l = (max + min) / 2;\n if (max !== min) {\n const difference = max - min;\n s = l > 0.5 ? difference / (2 - max - min) : difference / (max + min);\n switch (max) {\n case r:\n h = (g - b) / difference + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / difference + 2;\n break;\n case b:\n h = (r - g) / difference + 4;\n break;\n }\n h /= 6;\n }\n\n h = Math.round(h * 360);\n s = Math.round(s * 100);\n l = Math.round(l * 100);\n\n return `hsla(${h}, ${s}%, ${l}%, 1)`;\n};\n\nexport function hexAToHSLA(H: string): THSLA {\n let r = 0,\n g = 0,\n b = 0,\n a = 0;\n\n if (H.length === 5) {\n r = Number(\"0x\" + H[1] + H[1]);\n g = Number(\"0x\" + H[2] + H[2]);\n b = Number(\"0x\" + H[3] + H[3]);\n a = Number(\"0x\" + H[4] + H[4]);\n } else if (H.length === 9) {\n r = Number(\"0x\" + H[1] + H[2]);\n g = Number(\"0x\" + H[3] + H[4]);\n b = Number(\"0x\" + H[5] + H[6]);\n a = Number(\"0x\" + H[7] + H[8]);\n }\n\n // Then to HSL\n r /= 255;\n g /= 255;\n b /= 255;\n const cmin = Math.min(r, g, b);\n const cmax = Math.max(r, g, b);\n const delta = cmax - cmin;\n let h = 0;\n let s = 0;\n let l = 0;\n\n if (delta == 0) h = 0;\n else if (cmax === r) h = ((g - b) / delta) % 6;\n else if (cmax === g) h = (b - r) / delta + 2;\n else h = (r - g) / delta + 4;\n\n h = Math.round(h * 60);\n\n if (h < 0) h += 360;\n\n l = (cmax + cmin) / 2;\n s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));\n s = +(s * 100).toFixed(1);\n l = +(l * 100).toFixed(1);\n a = +(a / 255).toFixed(3);\n\n return `hsla(${h}, ${s}%, ${l}%, ${a})`;\n}\n\nexport const convertColorsToHSLA = (colors: ThemeColor) => {\n return Object.keys(colors).reduce(\n (newColors, key) => {\n const isHex = colors[key as ThemeColorKey].includes(\"#\");\n\n let color = colors[key as ThemeColorKey] as THSLA;\n if (isHex) {\n if (color.length === 4 || color.length === 7) {\n color = toHSLA(colors[key as ThemeColorKey] as HEX);\n } else {\n color = hexAToHSLA(colors[key as ThemeColorKey]);\n }\n }\n\n newColors[key as ThemeColorKey] = color;\n\n return newColors;\n },\n {} as Record\n );\n};\n\nexport const generateSpacingUnit = (densityValue: DensityType): Unit => {\n const density = {\n compact: 0.75,\n default: 1,\n spacious: 1.25,\n };\n const spacingBaseUnit = 4;\n return `${density[densityValue] * spacingBaseUnit}px`;\n};\n\nexport const generateConditions = (\n breakpointConditions: BreakpointConditions\n) => {\n return Object.keys(breakpointConditions).reduce(\n (newBreakpoints, key) => {\n const value = breakpointConditions[key as BreakpointsType];\n const breakpointObj = value === \"\" ? {} : { \"@media\": value };\n\n newBreakpoints = {\n ...newBreakpoints,\n [key]: breakpointObj,\n };\n return newBreakpoints;\n },\n {} as Record\n );\n};\n\nexport const mapBreakpointsToString = (breakpoints: Breakpoints) => {\n return Object.keys(breakpoints).reduce((newBreakpoints, key) => {\n const value = breakpoints[key as BreakpointsType];\n newBreakpoints = {\n ...newBreakpoints,\n [key]: value === 0 ? \"\" : `(min-width: ${value}px)`,\n };\n return newBreakpoints;\n }, {} as BreakpointConditions);\n};\n\nexport const generateLetterSpacings = (\n fontSizes: Record\n) => {\n // Values for letter spacing and line height are tried and tested by Design team and are based on the explanation here\n // https://www.figma.com/file/wEMFG5Q26IuCnqwMrti1qr/Typography-Tokens-%5BMSCHECKOUT-2560%5D?type=design&node-id=27%3A6716&t=u5n7VqPlFc6zK4fa-1\n // There is no formula for computing the values for letterSpacing and lineHeight\n const letterSpacingUnits = {\n h1: -0.015,\n h2: -0.01,\n h3: -0.005,\n h4: 0,\n body: 0,\n caption: 0.014,\n button: 0,\n };\n\n return Object.keys(fontSizes).reduce(\n (res, key) => {\n const value = Number(fontSizes[key as TypographyKey].split(\"r\")[0]);\n res[key as TypographyKey] = `${\n value * letterSpacingUnits[key as TypographyKey]\n }rem`;\n return res;\n },\n {} as Record\n );\n};\n\nexport const generateLineHeights = (\n fontSizes: Record\n) => {\n const lineHeightUnits = {\n h1: 1.25,\n h2: 1.33,\n h3: 1.4,\n h4: 1.5,\n body: 1.5,\n caption: 1.57,\n button: 1.5,\n };\n\n return Object.keys(fontSizes).reduce(\n (res, key) => {\n const value = Number(fontSizes[key as TypographyKey].split(\"r\")[0]);\n res[key as TypographyKey] = `${\n value * lineHeightUnits[key as TypographyKey]\n }rem`;\n return res;\n },\n {} as Record\n );\n};\n\nexport const pxFontSizesToRem = (fontSizes: Record) => {\n return Object.keys(fontSizes).reduce(\n (res, key) => {\n // Pixels aren't always passed so this returns rem if used\n if (fontSizes[key as TypographyKey]?.includes(\"rem\")) {\n res[key as TypographyKey] = fontSizes[key as TypographyKey];\n return res;\n }\n\n let value = Number(fontSizes[key as TypographyKey]);\n // compute based on pixels\n if (fontSizes[key as TypographyKey]?.includes(\"px\")) {\n value = Number(fontSizes[key as TypographyKey].slice(0, -2));\n }\n //numerical pass through\n res[key as TypographyKey] = `${value / 16}rem`;\n return res;\n },\n {} as Record\n );\n};\n\nexport const remFontSizeToPx = (fontSize: string): number => {\n let value = 0;\n if (isNaN(Number(fontSize))) {\n value = Number(fontSize.replace(\"rem\", \"\")) * 16;\n } else {\n value = Number(fontSize) * 16;\n }\n\n return value;\n};\n\nexport function useButtonDimensions(data: Theme): {\n height: number;\n padding: number;\n} {\n const height = remFontSizeToPx(data.lineHeights.button);\n const spacingBaseUnit = 4;\n const padding = Number(data.unit.replace(\"px\", \"\")) * spacingBaseUnit;\n\n return {\n height,\n padding,\n };\n}\n\nexport const generateFontWeights = (\n fontWeights: Record\n) => {\n const fontWeightUnits: Record = {\n semibold: \"600\",\n medium: \"500\",\n regular: \"400\",\n };\n return Object.keys(fontWeights).reduce(\n (res, key) => {\n res[key as TypographyKey] =\n fontWeightUnits[fontWeights[key as TypographyKey]];\n return res;\n },\n {} as Record\n );\n};\n\nexport const generateFontFamilies = (\n baseFont: string,\n fontFamilies?: Partial>\n) => {\n return {\n h1: fontFamilies?.h1 ?? baseFont,\n h2: fontFamilies?.h2 ?? baseFont,\n h3: fontFamilies?.h3 ?? baseFont,\n h4: fontFamilies?.h4 ?? baseFont,\n body: fontFamilies?.body ?? baseFont,\n caption: fontFamilies?.caption ?? baseFont,\n button: fontFamilies?.button ?? baseFont,\n };\n};\n","import {\n generateDynamicColors,\n generateLetterSpacings,\n generateLineHeights,\n generateSpacingUnit,\n mapBreakpointsToString,\n} from \"./helpers\";\nimport type {\n BreakpointConditions,\n Breakpoints,\n BreakpointsRange,\n CoreBorderRadius,\n CoreColor,\n DensityType,\n DynamicColor,\n ThemeTypographyBase,\n ThemeTypographyTags,\n Typography,\n Unit,\n} from \"./theme\";\n\n/** Breakpoints */\nexport const breakpoints: Breakpoints = {\n default: 0,\n over590: 590,\n over1024: 1024,\n over1236: 1236,\n};\n\n/** Breakpoints */\nexport const formGridBreakpoint: BreakpointsRange = {\n small: [0, 479],\n medium: [480, 767],\n large: [767],\n};\n\nexport const breakpointConditions: BreakpointConditions =\n mapBreakpointsToString(breakpoints);\n\n/**\n *\n * TYPOGRAPHY\n *\n */\n\nexport const fontWeights = {\n h1: \"600\",\n h2: \"500\",\n h3: \"500\",\n h4: \"500\",\n body: \"400\",\n caption: \"400\",\n button: \"500\",\n};\n\nexport const fontSizes = {\n h1: \"2rem\",\n h2: \"1.5rem\",\n h3: \"1.125rem\",\n h4: \"1rem\",\n body: \"1rem\",\n caption: \"0.875rem\",\n button: \"1rem\",\n};\n\nexport const lineHeights = generateLineHeights(fontSizes);\nexport const letterSpacings = generateLetterSpacings(fontSizes);\n\nexport const fontFamilies = {\n h1: \"system-ui\",\n h2: \"system-ui\",\n h3: \"system-ui\",\n h4: \"system-ui\",\n body: \"system-ui\",\n caption: \"system-ui\",\n button: \"system-ui\",\n};\n\nexport const typographyBase: ThemeTypographyBase = {\n fontStretch: \"normal\",\n fontStyle: \"normal\",\n textDecoration: \"none\",\n};\n\nexport const typographyTags: ThemeTypographyTags = {\n heading1: \"h1\",\n heading2: \"h2\",\n heading3: \"h3\",\n heading4: \"h4\",\n body: \"p\",\n caption: \"span\",\n button: \"button\",\n};\n\nexport const typography: Typography = {\n heading1: {\n text: {\n default: \"h2\",\n over590: \"h2\",\n over1024: \"h1\",\n over1236: \"h1\",\n },\n },\n heading2: {\n text: {\n default: \"h3\",\n over590: \"h3\",\n over1024: \"h2\",\n over1236: \"h2\",\n },\n },\n heading3: {\n text: {\n default: \"h4\",\n over590: \"h4\",\n over1024: \"h3\",\n over1236: \"h3\",\n },\n },\n heading4: {\n text: {\n default: \"h4\",\n over590: \"h4\",\n over1024: \"h4\",\n over1236: \"h4\",\n },\n },\n body: {\n text: {\n default: \"body\",\n over590: \"body\",\n over1024: \"body\",\n over1236: \"body\",\n },\n },\n caption: {\n text: {\n default: \"caption\",\n over590: \"caption\",\n over1024: \"caption\",\n over1236: \"caption\",\n },\n },\n button: {\n text: {\n default: \"button\",\n over590: \"button\",\n over1024: \"button\",\n over1236: \"button\",\n },\n },\n};\n\n/**\n *\n * Z Index\n *\n */\nconst zIndex = {\n hidden: \"-1\", // remove from view\n body: \"0\", //base level\n overBody: \"1000\", // for dropdown menus and tooltips on body areas\n navigation: \"2000\", // the top navigation area\n overNavigation: \"2500\", // for dropdown menus and tooltips on naviagation areas\n alert: \"3000\", // for alert banners, toasts, etc\n modalScrim: \"3999\", // covers the whole screen for scrim below modal\n modal: \"4000\", // modal\n overModal: \"4500\", // for dropdown menus and tooltips on modal\n critical: \"10000\", // visible no matter what, on top of everything\n};\n\n/**\n * Spacing\n */\n\nexport const spacingBaseUnit = 4;\n// This density value is used in documentation, in order to check unit value, please check generateSpacingUnit\nexport const density = {\n compact: 0.75,\n default: 1,\n spacious: 1.25,\n};\nexport const densityType: DensityType = \"default\";\nexport const unit: Unit = generateSpacingUnit(densityType);\n\n/**\n * Disabled Effect\n */\nexport const opacity = \"0.4\";\n\n/**\n * Core BorderRadius\n */\n\nexport const coreBorderRadius: CoreBorderRadius = {\n form: 4,\n button: 4,\n};\n\n/**\n * Shared theme values\n */\nexport const sharedThemeValues = {\n opacity,\n border: {\n thin: \"1px\",\n medium: \"1.5px\", // This is the default stroke width for icons\n },\n borderRadius: {\n form: `${coreBorderRadius.form}px`,\n button: `${coreBorderRadius.button}px`,\n },\n breakpoints: breakpointConditions,\n outline: {\n standard: \"2px\",\n offset: \"4px\",\n },\n densityType,\n unit,\n typography: {\n fontSize: \"16px\",\n fontFamily: \"system-ui\",\n base: typographyBase,\n tags: typographyTags,\n variants: typography,\n },\n fontSizes,\n lineHeights,\n letterSpacings,\n fontWeights,\n fontFamilies,\n zIndex,\n};\n\n/**\n *\n * COLORS\n *\n */\n\n/**\n * Core Colors\n */\nexport const coreColors: CoreColor = {\n brand: \"hsla(221, 83%, 53%, 1)\", // For action button backgrounds - use onBrand (dynamic token) as text color\n interactive: \"hsla(221, 83%, 53%, 1)\", // for action links\n pageBackground: \"hsla(210, 40%, 98%, 1)\",\n containerBackground: \"hsla(0, 0%, 100%, 1)\",\n formBackground: \"hsla(0, 0%, 100%, 1)\",\n primaryText: \"hsla(217, 33%, 17%, 1)\", // Primary text on pageBackground/containerBackground/formBackground\n secondaryText: \"hsla(215, 16%, 48%, 1)\", // Secondary text on pageBackground/containerBackground/formBackground\n tertiaryText: \"hsla(214, 20%, 73%, 1)\",\n border: \"hsla(214, 21%, 60%, 1)\",\n divider: \"hsla(214, 32%, 91%, 1)\",\n critical: \"hsla(345, 83%, 41%, 1)\",\n positive: \"hsla(163, 94%, 24%, 1)\",\n white: \"hsla(0, 0%, 100%, 1)\",\n black: \"hsla(0, 0%, 0%, 1)\",\n};\n\n/**\n * Dynamic Colors\n */\n\nexport const dynamicColors: DynamicColor = generateDynamicColors(coreColors);\n","import React from \"react\";\n\nimport { ThemeColor } from \"../../lib/theme/theme\";\nimport { iconClass, iconColorStyles } from \"./icon-component-wrapper.css\";\nimport { IconProps } from \"./ticon-component-wrapper\";\n\ninterface IconComponentWrapperProps extends IconProps {\n children: JSX.Element;\n}\n\nconst rectangleSizes = {\n \"16\": 18,\n \"20\": 32, // 20 shouldn't be used but is here for completeness\n \"24\": 36,\n \"32\": 48,\n \"40\": 56,\n \"60\": 96,\n \"80\": 96,\n};\n\nexport const IconComponentWrapper = (\n props: IconComponentWrapperProps\n): JSX.Element => {\n const { children, sizeVariant = 24, color, isRectangle, ...svgprops } = props;\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n return React.cloneElement(children, {\n ...children.props,\n ...svgprops,\n width: isRectangle\n ? `${rectangleSizes[`${sizeVariant}`]}px`\n : `${sizeVariant}px`,\n height: `${sizeVariant}px`,\n className: `${iconClass} ${iconColorStyles({\n color: color as keyof ThemeColor,\n })}`,\n });\n};\n","import { IconComponentWrapper } from \"../scripts/generate-icons/icon-component-wrapper\";\nimport type { IconProps } from \"../scripts/generate-icons/ticon-component-wrapper\";\n\nfunction IconComponent(props: React.SVGProps) {\n return (\n \n \n \n \n \n );\n}\nconst IconComponentWrapped = (props: IconProps) => {\n return (\n \n \n \n );\n};\nexport default IconComponentWrapped;\n","import { IconComponentWrapper } from \"../scripts/generate-icons/icon-component-wrapper\";\nimport type { IconProps } from \"../scripts/generate-icons/ticon-component-wrapper\";\n\nfunction IconComponent(props: React.SVGProps) {\n return (\n \n \n \n );\n}\nconst IconComponentWrapped = (props: IconProps) => {\n return (\n \n \n \n );\n};\nexport default IconComponentWrapped;\n","import { useEffect, useRef } from \"react\";\n\nimport AlertFilled from \"chameleon/icons/alert-filled\";\nimport CircleCheckFilled from \"chameleon/icons/circle-check-filled\";\nimport { Text } from \"chameleon/lib/components\";\n\nimport * as styles from \"./alert.css\";\n\ninterface Alert {\n /**\n * Variant styling changes color\n */\n variant: \"Error\" | \"Success\";\n /**\n * Title is not necessary but usable\n */\n title?: string | null;\n /**\n * Core description\n */\n description: string;\n}\n\n/**\n *\n * @example\n * \n */\nexport const Alert = ({ variant = \"Error\", title, description }: Alert) => {\n const variantIconMap = {\n Error: ,\n Success: ,\n };\n\n const sectionRef = useRef(null);\n\n useEffect(() => {\n sectionRef.current?.scrollIntoView?.({ behavior: \"smooth\" });\n }, []);\n\n return (\n \n {variantIconMap[variant]}\n
\n {title && ( // only show title if it is supplied, otherwise nothing\n \n {title}\n \n )}\n \n {description}\n \n
\n \n );\n};\n","import {\n CSSProperties,\n KeyboardEvent,\n MouseEvent,\n ReactElement,\n forwardRef,\n useMemo,\n} from \"react\";\n\nimport { InlineMessage, LoadingSpinner } from \"chameleon/lib/components\";\n\nimport {\n applePayVariantButtonStyles,\n buttonClass,\n buttonWrapper,\n criticalButtonClass,\n iconVariantButtonStyles,\n outlineVariantButtonStyles,\n textVariantButtonStyles,\n} from \"./button.css\";\n\nexport type ButtonProps = {\n /**\n * ID used for accessibility\n */\n id: string;\n /**\n * Is the Button disabled?\n */\n isDisabled?: boolean;\n /**\n * Is the button loading?\n */\n isLoading?: boolean;\n /**\n * onclick handler\n */\n onClick?: (e?: MouseEvent) => void | unknown;\n /**\n * onKeyDown handler\n */\n onKeyDown?: (e?: KeyboardEvent) => void | unknown;\n /**\n * Text to display in the button\n */\n text: string;\n /**\n * Tab index for the input\n */\n tabIndex?: number;\n /**\n * Icon in button\n */\n svg?: ReactElement;\n /**\n * Position of the icon\n */\n position?: \"left\" | \"right\";\n /**\n * Test id will be applied if added\n */\n testId?: string;\n /**\n * * Variant - default | text\n */\n variant?: \"default\" | \"outline\" | \"text\" | \"icon\" | \"applePay\" | \"critical\";\n /**\n * Error message for the button\n */\n errorMessage?: string;\n /**\n * Error Message Key for caption test id\n */\n errorMessageKey?: string;\n /**\n * Flag for hiding messaging in iframe wrapper\n */\n inIframe?: boolean;\n /**\n * Additional styles\n */\n style?: CSSProperties;\n /**\n * aria label text\n */\n ariaLabel?: string;\n};\n\n/**\n * A basic button with a loading state\n */\nexport const Button = forwardRef(\n (\n {\n id,\n isDisabled = false,\n isLoading = false,\n text,\n onClick,\n onKeyDown,\n tabIndex,\n svg,\n testId,\n position = \"left\",\n variant = \"default\",\n errorMessage,\n errorMessageKey,\n inIframe = false,\n style,\n ariaLabel,\n }: ButtonProps,\n ref\n ) => {\n const variantStyles = useMemo(() => {\n switch (variant) {\n case \"text\":\n return textVariantButtonStyles;\n case \"outline\":\n return outlineVariantButtonStyles;\n case \"icon\":\n return iconVariantButtonStyles;\n case \"applePay\":\n return applePayVariantButtonStyles;\n case \"critical\":\n return criticalButtonClass;\n default:\n return \"\";\n }\n }, [variant]);\n\n const captionID = `${id}-${errorMessageKey}-caption`;\n\n return (\n
\n \n <>\n {svg && position == \"left\" ? svg : undefined}\n {isLoading && }\n {variant !== \"icon\" && text}\n {svg && position == \"right\" ? svg : undefined}\n \n \n {errorMessage && !inIframe && (\n \n )}\n
\n );\n }\n);\n\nButton.displayName = \"Button\";\n","import { IconComponentWrapper } from \"../scripts/generate-icons/icon-component-wrapper\";\nimport type { IconProps } from \"../scripts/generate-icons/ticon-component-wrapper\";\n\nfunction IconComponent(props: React.SVGProps) {\n return (\n \n \n \n \n \n );\n}\nconst IconComponentWrapped = (props: IconProps) => {\n return (\n \n \n \n );\n};\nexport default IconComponentWrapped;\n","import { IconComponentWrapper } from \"../scripts/generate-icons/icon-component-wrapper\";\nimport type { IconProps } from \"../scripts/generate-icons/ticon-component-wrapper\";\n\nfunction IconComponent(props: React.SVGProps) {\n return (\n \n \n \n \n \n \n );\n}\nconst IconComponentWrapped = (props: IconProps) => {\n return (\n \n \n \n );\n};\nexport default IconComponentWrapped;\n","import { IconComponentWrapper } from \"../scripts/generate-icons/icon-component-wrapper\";\nimport type { IconProps } from \"../scripts/generate-icons/ticon-component-wrapper\";\n\nfunction IconComponent(props: React.SVGProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\nconst IconComponentWrapped = (props: IconProps) => {\n return (\n \n \n \n );\n};\nexport default IconComponentWrapped;\n","import { IconComponentWrapper } from \"../scripts/generate-icons/icon-component-wrapper\";\nimport type { IconProps } from \"../scripts/generate-icons/ticon-component-wrapper\";\n\nfunction IconComponent(props: React.SVGProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\nconst IconComponentWrapped = (props: IconProps) => {\n return (\n \n \n \n );\n};\nexport default IconComponentWrapped;\n","import { IconComponentWrapper } from \"../scripts/generate-icons/icon-component-wrapper\";\nimport type { IconProps } from \"../scripts/generate-icons/ticon-component-wrapper\";\n\nfunction IconComponent(props: React.SVGProps) {\n return (\n \n \n \n \n \n );\n}\nconst IconComponentWrapped = (props: IconProps) => {\n return (\n \n \n \n );\n};\nexport default IconComponentWrapped;\n","import { IconComponentWrapper } from \"../scripts/generate-icons/icon-component-wrapper\";\nimport type { IconProps } from \"../scripts/generate-icons/ticon-component-wrapper\";\n\nfunction IconComponent(props: React.SVGProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\nconst IconComponentWrapped = (props: IconProps) => {\n return (\n \n \n \n );\n};\nexport default IconComponentWrapped;\n","import { IconComponentWrapper } from \"../scripts/generate-icons/icon-component-wrapper\";\nimport type { IconProps } from \"../scripts/generate-icons/ticon-component-wrapper\";\n\nfunction IconComponent(props: React.SVGProps) {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\nconst IconComponentWrapped = (props: IconProps) => {\n return (\n \n \n \n );\n};\nexport default IconComponentWrapped;\n","import { IconComponentWrapper } from \"../scripts/generate-icons/icon-component-wrapper\";\nimport type { IconProps } from \"../scripts/generate-icons/ticon-component-wrapper\";\n\nfunction IconComponent(props: React.SVGProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\nconst IconComponentWrapped = (props: IconProps) => {\n return (\n \n \n \n );\n};\nexport default IconComponentWrapped;\n","import { IconComponentWrapper } from \"../scripts/generate-icons/icon-component-wrapper\";\nimport type { IconProps } from \"../scripts/generate-icons/ticon-component-wrapper\";\n\nfunction IconComponent(props: React.SVGProps) {\n return (\n \n \n \n \n \n \n \n );\n}\nconst IconComponentWrapped = (props: IconProps) => {\n return (\n \n \n \n );\n};\nexport default IconComponentWrapped;\n","import { IconComponentWrapper } from \"../scripts/generate-icons/icon-component-wrapper\";\nimport type { IconProps } from \"../scripts/generate-icons/ticon-component-wrapper\";\n\nfunction IconComponent(props: React.SVGProps) {\n return (\n \n \n \n \n \n \n \n \n );\n}\nconst IconComponentWrapped = (props: IconProps) => {\n return (\n \n \n \n );\n};\nexport default IconComponentWrapped;\n","import { IconComponentWrapper } from \"../scripts/generate-icons/icon-component-wrapper\";\nimport type { IconProps } from \"../scripts/generate-icons/ticon-component-wrapper\";\n\nfunction IconComponent(props: React.SVGProps) {\n return (\n \n \n \n \n );\n}\nconst IconComponentWrapped = (props: IconProps) => {\n return (\n \n \n \n );\n};\nexport default IconComponentWrapped;\n","import { IconComponentWrapper } from \"../scripts/generate-icons/icon-component-wrapper\";\nimport type { IconProps } from \"../scripts/generate-icons/ticon-component-wrapper\";\n\nfunction IconComponent(props: React.SVGProps) {\n return (\n \n \n \n \n \n \n \n \n );\n}\nconst IconComponentWrapped = (props: IconProps) => {\n return (\n \n \n \n );\n};\nexport default IconComponentWrapped;\n","import { ThemeColorKey, ThemeTypographyKey } from \"chameleon/lib/theme/theme\";\nimport { sharedThemeValues } from \"chameleon/lib/theme/theme-data\";\n\nimport { textClass, textStyles } from \"./text.css\";\n\ninterface TextProps {\n /**\n * ID for accessibility purposes\n */\n id?: string;\n /**\n * Wrapped content\n */\n children: React.ReactNode;\n /**\n * Used for accessibility if tag is a label\n */\n htmlFor?: string;\n /**\n * Theme Color token to display\n */\n colorVariant?: ThemeColorKey;\n /**\n * Theme Typography variant\n */\n styleVariant: ThemeTypographyKey;\n /**\n * Tag to render as\n */\n tagElement?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"label\" | \"p\" | \"span\";\n /**\n * Test id for unit tests\n */\n testId?: string;\n /**\n * Optional style subset\n */\n style?: {\n textDecoration?: \"line-through\" | \"none\";\n };\n}\n\ninterface TagProps extends Omit {\n /**\n * class name\n */\n className: string;\n}\n\nconst Tag = ({ styleVariant, tagElement, testId, ...otherProps }: TagProps) => {\n const tagString =\n tagElement || sharedThemeValues.typography.tags[styleVariant];\n\n switch (tagString) {\n case \"h1\":\n return

;\n case \"h2\":\n return

;\n case \"h3\":\n return

;\n case \"h4\":\n return

;\n case \"h5\":\n return

;\n case \"h6\":\n return
;\n case \"label\":\n return