@planningcenter/chat-react-native 3.44.5-rc.0 → 3.45.1-qa-897.0

package/build/utils/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAEtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AA8BlD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,WAAmC,EAAa,EAAE;IAC7E,MAAM,MAAM,GAAqB,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA;IAE1E,MAAM,aAAa,GAAG;QACpB,GAAG,iBAAiB,CAAC,MAAM,CAAC;QAC5B,GAAG,mBAAmB,CAAC,MAAM,CAAC;KAC/B,CAAA;IAED,OAAO;QACL,MAAM,EAAE,aAAa;QACrB,MAAM,EAAE;YACN,YAAY,EAAE,EAAE;SACjB;QACD,oBAAoB,EAAE,IAAI,EAAE,sEAAsE;KACnG,CAAA;AACH,CAAC,CAAA;AA+CD,4EAA4E;AAC5E,gFAAgF;AAChF,MAAM,YAAY,GAAG,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;AAE9E,MAAM,eAAe,GAAe;IAClC,IAAI,EAAE,OAAO;IACb,iCAAiC,EAAE,MAAM,CAAC,2BAA2B;IACrE,6BAA6B,EAAE,YAAY;IAC3C,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,MAAM,CAAC,2BAA2B;IAC/C,uBAAuB,EAAE,SAAS;IAClC,6BAA6B,EAAE,MAAM,CAAC,oBAAoB;IAC1D,SAAS,EAAE,SAAS;IACpB,cAAc,EAAE,MAAM,CAAC,0BAA0B;IACjD,cAAc,EAAE,MAAM,CAAC,mBAAmB;IAC1C,gBAAgB,EAAE,MAAM,CAAC,qBAAqB;IAC9C,cAAc,EAAE,MAAM,CAAC,wBAAwB;IAC/C,iBAAiB,EAAE,MAAM,CAAC,6BAA6B;IACvD,iBAAiB,EAAE,MAAM,CAAC,sBAAsB;IAChD,mBAAmB,EAAE,MAAM,CAAC,wBAAwB;IACpD,iBAAiB,EAAE,MAAM,CAAC,2BAA2B;IACrD,iBAAiB,EAAE,MAAM,CAAC,6BAA6B;IACvD,iBAAiB,EAAE,MAAM,CAAC,sBAAsB;IAChD,mBAAmB,EAAE,MAAM,CAAC,wBAAwB;IACpD,iBAAiB,EAAE,MAAM,CAAC,2BAA2B;IACrD,eAAe,EAAE,MAAM,CAAC,2BAA2B;IACnD,eAAe,EAAE,MAAM,CAAC,oBAAoB;IAC5C,iBAAiB,EAAE,MAAM,CAAC,sBAAsB;IAChD,eAAe,EAAE,MAAM,CAAC,yBAAyB;IACjD,sBAAsB,EAAE,MAAM,CAAC,0BAA0B;IACzD,sBAAsB,EAAE,MAAM,CAAC,mBAAmB;IAClD,4BAA4B,EAAE,MAAM,CAAC,wBAAwB;IAC7D,yBAAyB,EAAE,MAAM,CAAC,6BAA6B;IAC/D,yBAAyB,EAAE,MAAM,CAAC,sBAAsB;IACxD,+BAA+B,EAAE,MAAM,CAAC,2BAA2B;IACnE,yBAAyB,EAAE,MAAM,CAAC,6BAA6B;IAC/D,yBAAyB,EAAE,MAAM,CAAC,sBAAsB;IACxD,+BAA+B,EAAE,MAAM,CAAC,2BAA2B;IACnE,uBAAuB,EAAE,MAAM,CAAC,2BAA2B;IAC3D,uBAAuB,EAAE,MAAM,CAAC,oBAAoB;IACpD,6BAA6B,EAAE,MAAM,CAAC,yBAAyB;IAC/D,yBAAyB,EAAE,MAAM,CAAC,6BAA6B;IAC/D,yBAAyB,EAAE,MAAM,CAAC,sBAAsB;IACxD,+BAA+B,EAAE,MAAM,CAAC,2BAA2B;CACpE,CAAA;AAED,MAAM,cAAc,GAAe;IACjC,IAAI,EAAE,MAAM;IACZ,iCAAiC,EAAE,MAAM,CAAC,+BAA+B;IACzE,6BAA6B,EAAE,YAAY;IAC3C,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,MAAM,CAAC,+BAA+B;IACnD,uBAAuB,EAAE,SAAS;IAClC,6BAA6B,EAAE,MAAM,CAAC,aAAa;IACnD,SAAS,EAAE,MAAM;IACjB,cAAc,EAAE,MAAM,CAAC,8BAA8B;IACrD,cAAc,EAAE,MAAM,CAAC,uBAAuB;IAC9C,gBAAgB,EAAE,MAAM,CAAC,yBAAyB;IAClD,cAAc,EAAE,MAAM,CAAC,4BAA4B;IACnD,iBAAiB,EAAE,MAAM,CAAC,iCAAiC;IAC3D,iBAAiB,EAAE,MAAM,CAAC,0BAA0B;IACpD,mBAAmB,EAAE,MAAM,CAAC,4BAA4B;IACxD,iBAAiB,EAAE,MAAM,CAAC,+BAA+B;IACzD,iBAAiB,EAAE,MAAM,CAAC,iCAAiC;IAC3D,iBAAiB,EAAE,MAAM,CAAC,0BAA0B;IACpD,mBAAmB,EAAE,MAAM,CAAC,4BAA4B;IACxD,iBAAiB,EAAE,MAAM,CAAC,+BAA+B;IACzD,eAAe,EAAE,MAAM,CAAC,+BAA+B;IACvD,eAAe,EAAE,MAAM,CAAC,wBAAwB;IAChD,iBAAiB,EAAE,MAAM,CAAC,0BAA0B;IACpD,eAAe,EAAE,MAAM,CAAC,6BAA6B;IAErD,wDAAwD;IACxD,sBAAsB,EAAE,MAAM,CAAC,8BAA8B;IAC7D,sBAAsB,EAAE,MAAM,CAAC,uBAAuB;IACtD,4BAA4B,EAAE,MAAM,CAAC,4BAA4B;IACjE,yBAAyB,EAAE,MAAM,CAAC,iCAAiC;IACnE,yBAAyB,EAAE,MAAM,CAAC,0BAA0B;IAC5D,+BAA+B,EAAE,MAAM,CAAC,+BAA+B;IACvE,yBAAyB,EAAE,MAAM,CAAC,iCAAiC;IACnE,yBAAyB,EAAE,MAAM,CAAC,0BAA0B;IAC5D,+BAA+B,EAAE,MAAM,CAAC,+BAA+B;IACvE,uBAAuB,EAAE,MAAM,CAAC,+BAA+B;IAC/D,uBAAuB,EAAE,MAAM,CAAC,wBAAwB;IACxD,6BAA6B,EAAE,MAAM,CAAC,6BAA6B;IACnE,yBAAyB,EAAE,MAAM,CAAC,iCAAiC;IACnE,yBAAyB,EAAE,MAAM,CAAC,0BAA0B;IAC5D,+BAA+B,EAAE,MAAM,CAAC,+BAA+B;CACxE,CAAA;AAED,MAAM,iBAAiB,GAAG;IACxB,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,cAAc;CACrB,CAAA","sourcesContent":["import { Platform, PlatformColor } from 'react-native'\nimport type { ColorSchemeName, ColorValue, OpaqueColorValue } from 'react-native'\nimport { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'\nimport { tokens } from '../vendor/tapestry/tokens'\n\nexport interface ChatTheme extends DefaultTheme {\n  colors: DefaultTheme['colors'] &\n    (typeof aliasTokensColorMap.light | typeof aliasTokensColorMap.dark)\n}\n\n/** =============================================\n  NOTE: The specific values for `colors` and the `productBadge` are temporary examples that can be replaced once we start building out UI. This line's comment can be removed at that time too.\n\n  The default theme is intended to support two types of customizations:\n  1. Specific color properties for a chat component (eg. `primaryButtonBackgroundColor`)\n  2. Any styles for a specific component. (Use only one level of nesting.)\n    ```\n      primaryButton: {\n        borderRadius: number\n        container: ViewStyle\n        text: TextStyle\n      }\n    ```\n============================================= */\n\nexport interface DefaultTheme {\n  colors: ChatColors\n  button: {\n    borderRadius: number\n  }\n  showBadgeProductLogo: boolean\n}\n\nexport const defaultTheme = (colorScheme: ColorSchemeName | null): ChatTheme => {\n  const scheme: 'light' | 'dark' = colorScheme === 'dark' ? 'dark' : 'light'\n\n  const defaultColors = {\n    ...chatThemeColorMap[scheme],\n    ...aliasTokensColorMap[scheme],\n  }\n\n  return {\n    colors: defaultColors,\n    button: {\n      borderRadius: 40,\n    },\n    showBadgeProductLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`\n  }\n}\n\nexport type TemporaryDefaultColorsType = Partial<ChatColors>\n\ninterface ChatColors {\n  name: string\n  buttonStart: string | undefined\n  buttonEnd: string | undefined\n  interaction: string\n  androidModalHeaderButtonTextColor: ColorValue | string | undefined\n  iOSModalHeaderButtonTextColor: OpaqueColorValue | string | undefined\n  androidSwitchThumbColor: string | undefined\n  conversationActionsBackground: string\n  testColor: string\n  statusSuccessIcon: string\n  statusSuccessText: string\n  statusSuccessBorder: string\n  statusSuccessFill: string\n  statusInfoIcon: string\n  statusInfoText: string\n  statusInfoBorder: string\n  statusInfoFill: string\n  statusWarningIcon: string\n  statusWarningText: string\n  statusWarningBorder: string\n  statusWarningFill: string\n  statusErrorIcon: string\n  statusErrorText: string\n  statusErrorBorder: string\n  statusErrorFill: string\n  statusSuccessComposedIcon: string\n  statusSuccessComposedText: string\n  statusSuccessComposedBackground: string\n  statusInfoComposedIcon: string\n  statusInfoComposedText: string\n  statusInfoComposedBackground: string\n  statusWarningComposedIcon: string\n  statusWarningComposedText: string\n  statusWarningComposedBackground: string\n  statusErrorComposedIcon: string\n  statusErrorComposedText: string\n  statusErrorComposedBackground: string\n  statusNeutralComposedIcon: string\n  statusNeutralComposedText: string\n  statusNeutralComposedBackground: string\n}\n\n// 'link' is an iOS-only semantic color name — constructing it on Android is\n// undefined behavior, so only build it when the code is actually running on iOS\nconst iOSLinkColor = Platform.OS === 'ios' ? PlatformColor('link') : undefined\n\nconst colorsChatLight: ChatColors = {\n  name: 'light',\n  androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefault,\n  iOSModalHeaderButtonTextColor: iOSLinkColor,\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefault,\n  androidSwitchThumbColor: undefined,\n  conversationActionsBackground: tokens.colorNeutral100White,\n  testColor: 'hotpink',\n  statusInfoIcon: tokens.iconColorStatusInfoPrimary,\n  statusInfoText: tokens.textColorStatusInfo,\n  statusInfoBorder: tokens.borderColorStatusInfo,\n  statusInfoFill: tokens.fillColorStatusInfoSolid,\n  statusSuccessIcon: tokens.iconColorStatusSuccessPrimary,\n  statusSuccessText: tokens.textColorStatusSuccess,\n  statusSuccessBorder: tokens.borderColorStatusSuccess,\n  statusSuccessFill: tokens.fillColorStatusSuccessSolid,\n  statusWarningIcon: tokens.iconColorStatusWarningPrimary,\n  statusWarningText: tokens.textColorStatusWarning,\n  statusWarningBorder: tokens.borderColorStatusWarning,\n  statusWarningFill: tokens.fillColorStatusWarningSolid,\n  statusErrorIcon: tokens.iconColorStatusErrorPrimary,\n  statusErrorText: tokens.textColorStatusError,\n  statusErrorBorder: tokens.borderColorStatusError,\n  statusErrorFill: tokens.fillColorStatusErrorSolid,\n  statusInfoComposedIcon: tokens.iconColorStatusInfoPrimary,\n  statusInfoComposedText: tokens.textColorStatusInfo,\n  statusInfoComposedBackground: tokens.fillColorStatusInfoGhost,\n  statusSuccessComposedIcon: tokens.iconColorStatusSuccessPrimary,\n  statusSuccessComposedText: tokens.textColorStatusSuccess,\n  statusSuccessComposedBackground: tokens.fillColorStatusSuccessGhost,\n  statusWarningComposedIcon: tokens.iconColorStatusWarningPrimary,\n  statusWarningComposedText: tokens.textColorStatusWarning,\n  statusWarningComposedBackground: tokens.fillColorStatusWarningGhost,\n  statusErrorComposedIcon: tokens.iconColorStatusErrorPrimary,\n  statusErrorComposedText: tokens.textColorStatusError,\n  statusErrorComposedBackground: tokens.fillColorStatusErrorGhost,\n  statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimary,\n  statusNeutralComposedText: tokens.textColorStatusNeutral,\n  statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhost,\n}\n\nconst colorsChatDark: ChatColors = {\n  name: 'dark',\n  androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefaultDark,\n  iOSModalHeaderButtonTextColor: iOSLinkColor,\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefaultDark,\n  androidSwitchThumbColor: undefined,\n  conversationActionsBackground: tokens.colorNeutral7,\n  testColor: 'pink',\n  statusInfoIcon: tokens.iconColorStatusInfoPrimaryDark,\n  statusInfoText: tokens.textColorStatusInfoDark,\n  statusInfoBorder: tokens.borderColorStatusInfoDark,\n  statusInfoFill: tokens.fillColorStatusInfoSolidDark,\n  statusSuccessIcon: tokens.iconColorStatusSuccessPrimaryDark,\n  statusSuccessText: tokens.textColorStatusSuccessDark,\n  statusSuccessBorder: tokens.borderColorStatusSuccessDark,\n  statusSuccessFill: tokens.fillColorStatusSuccessSolidDark,\n  statusWarningIcon: tokens.iconColorStatusWarningPrimaryDark,\n  statusWarningText: tokens.textColorStatusWarningDark,\n  statusWarningBorder: tokens.borderColorStatusWarningDark,\n  statusWarningFill: tokens.fillColorStatusWarningSolidDark,\n  statusErrorIcon: tokens.iconColorStatusErrorPrimaryDark,\n  statusErrorText: tokens.textColorStatusErrorDark,\n  statusErrorBorder: tokens.borderColorStatusErrorDark,\n  statusErrorFill: tokens.fillColorStatusErrorSolidDark,\n\n  // Note: CCA inverts composed status colors in dark mode\n  statusInfoComposedIcon: tokens.iconColorStatusInfoPrimaryDark,\n  statusInfoComposedText: tokens.textColorStatusInfoDark,\n  statusInfoComposedBackground: tokens.fillColorStatusInfoGhostDark,\n  statusSuccessComposedIcon: tokens.iconColorStatusSuccessPrimaryDark,\n  statusSuccessComposedText: tokens.textColorStatusSuccessDark,\n  statusSuccessComposedBackground: tokens.fillColorStatusSuccessGhostDark,\n  statusWarningComposedIcon: tokens.iconColorStatusWarningPrimaryDark,\n  statusWarningComposedText: tokens.textColorStatusWarningDark,\n  statusWarningComposedBackground: tokens.fillColorStatusWarningGhostDark,\n  statusErrorComposedIcon: tokens.iconColorStatusErrorPrimaryDark,\n  statusErrorComposedText: tokens.textColorStatusErrorDark,\n  statusErrorComposedBackground: tokens.fillColorStatusErrorGhostDark,\n  statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimaryDark,\n  statusNeutralComposedText: tokens.textColorStatusNeutralDark,\n  statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhostDark,\n}\n\nconst chatThemeColorMap = {\n  light: colorsChatLight,\n  dark: colorsChatDark,\n}\n"]}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"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","sourcesContent":["import { Platform, PlatformColor } from 'react-native'\nimport type { ColorSchemeName, ColorValue, OpaqueColorValue } from 'react-native'\nimport { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'\nimport { tokens } from '../vendor/tapestry/tokens'\n\nexport interface ChatTheme extends DefaultTheme {\n  colors: DefaultTheme['colors'] &\n    (typeof aliasTokensColorMap.light | typeof aliasTokensColorMap.dark)\n}\n\n/** =============================================\n  NOTE: The specific values for `colors` and the `productBadge` are temporary examples that can be replaced once we start building out UI. This line's comment can be removed at that time too.\n\n  The default theme is intended to support two types of customizations:\n  1. Specific color properties for a chat component (eg. `primaryButtonBackgroundColor`)\n  2. Any styles for a specific component. (Use only one level of nesting.)\n    ```\n      primaryButton: {\n        borderRadius: number\n        container: ViewStyle\n        text: TextStyle\n      }\n    ```\n============================================= */\n\nexport interface DefaultTheme {\n  colors: ChatColors\n  button: {\n    borderRadius: number\n  }\n  chip: {\n    hslLightnessChipSelected: number\n  }\n  showBadgeProductLogo: boolean\n}\n\nexport const defaultTheme = (colorScheme: ColorSchemeName | null): ChatTheme => {\n  const scheme: 'light' | 'dark' = colorScheme === 'dark' ? 'dark' : 'light'\n\n  const defaultColors = {\n    ...chatThemeColorMap[scheme],\n    ...aliasTokensColorMap[scheme],\n  }\n\n  return {\n    colors: defaultColors,\n    button: {\n      borderRadius: 40,\n    },\n    chip: {\n      hslLightnessChipSelected: scheme === 'dark' ? 12 : 92,\n    },\n    showBadgeProductLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`\n  }\n}\n\nexport type TemporaryDefaultColorsType = Partial<ChatColors>\n\ninterface ChatColors {\n  name: string\n  buttonStart: string | undefined\n  buttonEnd: string | undefined\n  interaction: string\n  androidModalHeaderButtonTextColor: ColorValue | string | undefined\n  iOSModalHeaderButtonTextColor: OpaqueColorValue | string | undefined\n  androidSwitchThumbColor: string | undefined\n  conversationActionsBackground: string\n  testColor: string\n  statusSuccessIcon: string\n  statusSuccessText: string\n  statusSuccessBorder: string\n  statusSuccessFill: string\n  statusInfoIcon: string\n  statusInfoText: string\n  statusInfoBorder: string\n  statusInfoFill: string\n  statusWarningIcon: string\n  statusWarningText: string\n  statusWarningBorder: string\n  statusWarningFill: string\n  statusErrorIcon: string\n  statusErrorText: string\n  statusErrorBorder: string\n  statusErrorFill: string\n  statusSuccessComposedIcon: string\n  statusSuccessComposedText: string\n  statusSuccessComposedBackground: string\n  statusInfoComposedIcon: string\n  statusInfoComposedText: string\n  statusInfoComposedBackground: string\n  statusWarningComposedIcon: string\n  statusWarningComposedText: string\n  statusWarningComposedBackground: string\n  statusErrorComposedIcon: string\n  statusErrorComposedText: string\n  statusErrorComposedBackground: string\n  statusNeutralComposedIcon: string\n  statusNeutralComposedText: string\n  statusNeutralComposedBackground: string\n  borderColorChip: string\n  fillColorChip: string\n  textColorChip: string\n  /**\n   * Selected-chip colors (border/fill/text). Never assign a static default\n   * directly — these stay optional so they always fall back to\n   * `colors.interaction` via `??` at the read site. Every current consumer\n   * overrides `interaction` at runtime, and a seeded default here could win\n   * over that override depending on merge order.\n   */\n  borderColorChipSelected?: string\n  fillColorChipSelected?: string\n  textColorChipSelected?: string\n}\n\n// 'link' is an iOS-only semantic color name — constructing it on Android is\n// undefined behavior, so only build it when the code is actually running on iOS\nconst iOSLinkColor = Platform.OS === 'ios' ? PlatformColor('link') : undefined\n\nconst colorsChatLight: ChatColors = {\n  name: 'light',\n  androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefault,\n  iOSModalHeaderButtonTextColor: iOSLinkColor,\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefault,\n  androidSwitchThumbColor: undefined,\n  conversationActionsBackground: tokens.colorNeutral100White,\n  testColor: 'hotpink',\n  statusInfoIcon: tokens.iconColorStatusInfoPrimary,\n  statusInfoText: tokens.textColorStatusInfo,\n  statusInfoBorder: tokens.borderColorStatusInfo,\n  statusInfoFill: tokens.fillColorStatusInfoSolid,\n  statusSuccessIcon: tokens.iconColorStatusSuccessPrimary,\n  statusSuccessText: tokens.textColorStatusSuccess,\n  statusSuccessBorder: tokens.borderColorStatusSuccess,\n  statusSuccessFill: tokens.fillColorStatusSuccessSolid,\n  statusWarningIcon: tokens.iconColorStatusWarningPrimary,\n  statusWarningText: tokens.textColorStatusWarning,\n  statusWarningBorder: tokens.borderColorStatusWarning,\n  statusWarningFill: tokens.fillColorStatusWarningSolid,\n  statusErrorIcon: tokens.iconColorStatusErrorPrimary,\n  statusErrorText: tokens.textColorStatusError,\n  statusErrorBorder: tokens.borderColorStatusError,\n  statusErrorFill: tokens.fillColorStatusErrorSolid,\n  statusInfoComposedIcon: tokens.iconColorStatusInfoPrimary,\n  statusInfoComposedText: tokens.textColorStatusInfo,\n  statusInfoComposedBackground: tokens.fillColorStatusInfoGhost,\n  statusSuccessComposedIcon: tokens.iconColorStatusSuccessPrimary,\n  statusSuccessComposedText: tokens.textColorStatusSuccess,\n  statusSuccessComposedBackground: tokens.fillColorStatusSuccessGhost,\n  statusWarningComposedIcon: tokens.iconColorStatusWarningPrimary,\n  statusWarningComposedText: tokens.textColorStatusWarning,\n  statusWarningComposedBackground: tokens.fillColorStatusWarningGhost,\n  statusErrorComposedIcon: tokens.iconColorStatusErrorPrimary,\n  statusErrorComposedText: tokens.textColorStatusError,\n  statusErrorComposedBackground: tokens.fillColorStatusErrorGhost,\n  statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimary,\n  statusNeutralComposedText: tokens.textColorStatusNeutral,\n  statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhost,\n  borderColorChip: tokens.colorNeutral88,\n  fillColorChip: 'transparent',\n  textColorChip: tokens.colorNeutral45,\n}\n\nconst colorsChatDark: ChatColors = {\n  name: 'dark',\n  androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefaultDark,\n  iOSModalHeaderButtonTextColor: iOSLinkColor,\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefaultDark,\n  androidSwitchThumbColor: undefined,\n  conversationActionsBackground: tokens.colorNeutral7,\n  testColor: 'pink',\n  statusInfoIcon: tokens.iconColorStatusInfoPrimaryDark,\n  statusInfoText: tokens.textColorStatusInfoDark,\n  statusInfoBorder: tokens.borderColorStatusInfoDark,\n  statusInfoFill: tokens.fillColorStatusInfoSolidDark,\n  statusSuccessIcon: tokens.iconColorStatusSuccessPrimaryDark,\n  statusSuccessText: tokens.textColorStatusSuccessDark,\n  statusSuccessBorder: tokens.borderColorStatusSuccessDark,\n  statusSuccessFill: tokens.fillColorStatusSuccessSolidDark,\n  statusWarningIcon: tokens.iconColorStatusWarningPrimaryDark,\n  statusWarningText: tokens.textColorStatusWarningDark,\n  statusWarningBorder: tokens.borderColorStatusWarningDark,\n  statusWarningFill: tokens.fillColorStatusWarningSolidDark,\n  statusErrorIcon: tokens.iconColorStatusErrorPrimaryDark,\n  statusErrorText: tokens.textColorStatusErrorDark,\n  statusErrorBorder: tokens.borderColorStatusErrorDark,\n  statusErrorFill: tokens.fillColorStatusErrorSolidDark,\n\n  // Note: CCA inverts composed status colors in dark mode\n  statusInfoComposedIcon: tokens.iconColorStatusInfoPrimaryDark,\n  statusInfoComposedText: tokens.textColorStatusInfoDark,\n  statusInfoComposedBackground: tokens.fillColorStatusInfoGhostDark,\n  statusSuccessComposedIcon: tokens.iconColorStatusSuccessPrimaryDark,\n  statusSuccessComposedText: tokens.textColorStatusSuccessDark,\n  statusSuccessComposedBackground: tokens.fillColorStatusSuccessGhostDark,\n  statusWarningComposedIcon: tokens.iconColorStatusWarningPrimaryDark,\n  statusWarningComposedText: tokens.textColorStatusWarningDark,\n  statusWarningComposedBackground: tokens.fillColorStatusWarningGhostDark,\n  statusErrorComposedIcon: tokens.iconColorStatusErrorPrimaryDark,\n  statusErrorComposedText: tokens.textColorStatusErrorDark,\n  statusErrorComposedBackground: tokens.fillColorStatusErrorGhostDark,\n  statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimaryDark,\n  statusNeutralComposedText: tokens.textColorStatusNeutralDark,\n  statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhostDark,\n  borderColorChip: tokens.colorNeutral24,\n  fillColorChip: 'transparent',\n  textColorChip: tokens.colorNeutral68,\n}\n\nconst chatThemeColorMap = {\n  light: colorsChatLight,\n  dark: colorsChatDark,\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.44.5-rc.0",
+  "version": "3.45.1-qa-897.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
-    "@planningcenter/emoji-keyboard": "3.44.1",
+    "@planningcenter/emoji-keyboard": "3.45.1-qa-897.0",
     "lodash-inflection": "^1.5.0",
     "react-compiler-runtime": "^1.0.0"
   },
@@ -78,5 +78,5 @@
     "sf-symbols-typescript": "^2.2.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "5a39c0743737de93c1052fa502479851ea1bf424"
+  "gitHead": "a293c586d6b282819a63d71cc443157d59d5ea24"
 }

package/src/__tests__/hooks/use_selected_chip_background_color.test.tsx

@@ -0,0 +1,78 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import { ChatProvider, CreateChatThemeProps } from '../../contexts/chat_context'
+import { useSelectedChipBackgroundColor } from '../../hooks'
+
+let themeProps: CreateChatThemeProps
+let queryClient: QueryClient
+
+beforeEach(() => {
+  queryClient = buildTestQueryClient({
+    defaultOptions: {
+      queries: {
+        refetchInterval: false,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+      },
+    },
+  })
+})
+
+afterEach(() => {
+  queryClient.clear()
+  queryClient.cancelQueries()
+  queryClient.removeQueries()
+})
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ChatProvider value={{ onUnauthorizedResponse: () => {}, theme: themeProps }}>
+        {children}
+      </ChatProvider>
+    </QueryClientProvider>
+  )
+}
+
+describe('useSelectedChipBackgroundColor', () => {
+  test('falls back to colors.interaction when fillColorChipSelected is absent', () => {
+    themeProps = { theme: { colors: { interaction: 'rgb(0, 255, 0)' } } }
+
+    const { result } = renderHook(() => useSelectedChipBackgroundColor(), {
+      wrapper: Wrapper,
+    })
+
+    expect(result.current).toBe('hsl(120, 100%, 92%)')
+  })
+
+  test('prefers fillColorChipSelected over colors.interaction when supplied', () => {
+    themeProps = {
+      theme: {
+        colors: { interaction: 'rgb(0, 255, 0)', fillColorChipSelected: 'rgb(255, 0, 0)' },
+      },
+    }
+
+    const { result } = renderHook(() => useSelectedChipBackgroundColor(), {
+      wrapper: Wrapper,
+    })
+
+    expect(result.current).toBe('hsl(0, 100%, 92%)')
+  })
+
+  test('respects a custom hslLightnessChipSelected', () => {
+    themeProps = {
+      theme: {
+        colors: { interaction: 'rgb(0, 255, 0)' },
+        chip: { hslLightnessChipSelected: 50 },
+      },
+    }
+
+    const { result } = renderHook(() => useSelectedChipBackgroundColor(), {
+      wrapper: Wrapper,
+    })
+
+    expect(result.current).toBe('hsl(120, 100%, 50%)')
+  })
+})

package/src/__tests__/utils/theme.ts

@@ -20,4 +20,27 @@ describe('defaultTheme', () => {
     // render an unstyled or misthemed UI.
     expect(defaultTheme('unspecified').colors).toMatchObject(aliasTokensColorMap.light)
   })
+
+  describe('chip tokens', () => {
+    test('seeds static defaults for the non-selected chip trio in both schemes', () => {
+      const light = defaultTheme('light').colors
+      const dark = defaultTheme('dark').colors
+
+      expect(light.borderColorChip).toBe('hsl(0, 0%, 88%)')
+      expect(light.fillColorChip).toBe('transparent')
+      expect(light.textColorChip).toBe('hsl(0, 0%, 45%)')
+
+      expect(dark.borderColorChip).toBe('hsl(0, 0%, 24%)')
+      expect(dark.fillColorChip).toBe('transparent')
+      expect(dark.textColorChip).toBe('hsl(0, 0%, 68%)')
+    })
+
+    test('never seeds a static default for the selected chip trio', () => {
+      const { colors } = defaultTheme('light')
+
+      expect(colors.borderColorChipSelected).toBeUndefined()
+      expect(colors.fillColorChipSelected).toBeUndefined()
+      expect(colors.textColorChipSelected).toBeUndefined()
+    })
+  })
 })

package/src/components/conversation/message.tsx

@@ -13,7 +13,7 @@ import { MessageReaction } from '../../components/conversation/message_reaction'
 import { Avatar, Icon, Spinner, Text, TextButton, TextInlineButton } from '../../components/display'
 import {
   useAnimatedMessageBackgroundColor,
-  useInteractionGhostBackgroundColor,
+  useInteractionTintedBackgroundColor,
   useTheme,
 } from '../../hooks'
 import { useDeletingIds } from '../../hooks'
@@ -342,7 +342,7 @@ export function Message({
 
 const useMessageStyles = (mine: boolean, isDeleting: boolean) => {
   const { colors } = useTheme()
-  const myMessageBackgroundColor = useInteractionGhostBackgroundColor()
+  const myMessageBackgroundColor = useInteractionTintedBackgroundColor()
   const { width } = useWindowDimensions()
   const tabletWidth = width >= 744 // Smallest iPad Mini's width
 

package/src/components/conversation/message_form.tsx

@@ -17,7 +17,7 @@ import { ChatContext } from '../../contexts/chat_context'
 import {
   useCreateAndroidRippleColor,
   useTheme,
-  useInteractionGhostBackgroundColor,
+  useInteractionTintedBackgroundColor,
   useScalableNumberOfLines,
   useFontScale,
 } from '../../hooks'
@@ -784,7 +784,7 @@ const useMessageFormStyles = () => {
   const navigationTheme = useNavigationTheme()
   const buttonSize = 38
 
-  const giphyBadgeBackgroundColor = useInteractionGhostBackgroundColor()
+  const giphyBadgeBackgroundColor = useInteractionTintedBackgroundColor()
 
   return StyleSheet.create({
     container: {

package/src/components/conversation/message_reaction.tsx

@@ -3,7 +3,7 @@ import colorFunction from 'color'
 import React, { useMemo } from 'react'
 import { StyleSheet } from 'react-native'
 import { Text } from '../../components/display'
-import { useInteractionGhostBackgroundColor, useTheme } from '../../hooks'
+import { useSelectedChipBackgroundColor, useTheme } from '../../hooks'
 import { useCreateAndroidRippleColor } from '../../hooks/use_create_android_ripple_color'
 import { useMessageReactionToggle } from '../../hooks/use_message_reaction_toggle'
 import { MessageResource } from '../../types'
@@ -58,12 +58,12 @@ export function MessageReaction({
 export const useReactionStyles = ({ mine }: { mine: number }) => {
   const { colors } = useTheme()
   const activeBorderColor = useMemo(() => {
-    return colorFunction(colors.interaction)
+    return colorFunction(colors.borderColorChipSelected ?? colors.interaction)
       .hsl()
       .lightness(colors.name === 'dark' ? 20 : 80)
       .string()
-  }, [colors.interaction, colors.name])
-  const activeBackgroundColor = useInteractionGhostBackgroundColor()
+  }, [colors.borderColorChipSelected, colors.interaction, colors.name])
+  const activeBackgroundColor = useSelectedChipBackgroundColor()
 
   return StyleSheet.create({
     reaction: {

package/src/components/display/__tests__/toggle_button.test.tsx

@@ -0,0 +1,135 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../../__utils__/query_client'
+import { ChatProvider, CreateChatThemeProps } from '../../../contexts/chat_context'
+import { ToggleButton } from '../toggle_button'
+
+let themeProps: CreateChatThemeProps
+let queryClient: QueryClient
+
+beforeEach(() => {
+  queryClient = buildTestQueryClient({
+    defaultOptions: {
+      queries: {
+        refetchInterval: false,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+      },
+    },
+  })
+})
+
+afterEach(() => {
+  queryClient.clear()
+  queryClient.cancelQueries()
+  queryClient.removeQueries()
+})
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ChatProvider
+        value={{
+          token: {
+            access_token: '',
+            created_at: 0,
+            expires_in: 0,
+            scope: '',
+            refresh_token: '',
+            token_type: '',
+          },
+          onUnauthorizedResponse: () => {},
+          theme: themeProps,
+        }}
+      >
+        {children}
+      </ChatProvider>
+    </QueryClientProvider>
+  )
+}
+
+const renderToggleButton = (active: boolean) => {
+  const view = render(<ToggleButton active={active} accessibilityLabel="Filter" title="Filter" />, {
+    wrapper: Wrapper,
+  })
+
+  return {
+    button: view.getByLabelText('Filter'),
+    text: view.getByText('Filter'),
+  }
+}
+
+describe('ToggleButton chip colors', () => {
+  describe('backward compatibility (Services / sandbox pass only colors.interaction)', () => {
+    const distinctiveGreen = 'rgb(0, 255, 0)'
+
+    beforeEach(() => {
+      themeProps = {
+        theme: {
+          colors: {
+            interaction: distinctiveGreen,
+          },
+        },
+      }
+    })
+
+    test('active state derives border, fill, and text color from colors.interaction', () => {
+      const { button, text } = renderToggleButton(true)
+
+      expect(button).toHaveStyle({ borderColor: distinctiveGreen })
+      // The active fill is the green interaction color lightened via the
+      // chip-background hook (hsl lightness 92 in the light scheme), not
+      // the raw interaction color — pins the hook's transform in place.
+      expect(button).toHaveStyle({ backgroundColor: 'hsl(120, 100%, 92%)' })
+      expect(text).toHaveStyle({ color: distinctiveGreen })
+    })
+
+    test.each([
+      ['light', undefined, 'hsl(0, 0%, 88%)', 'hsl(0, 0%, 45%)'],
+      ['dark', 'dark' as const, 'hsl(0, 0%, 24%)', 'hsl(0, 0%, 68%)'],
+    ])(
+      'inactive state uses the static chip defaults in the %s scheme',
+      (_label, colorScheme, borderColor, color) => {
+        themeProps = {
+          theme: { colors: { interaction: distinctiveGreen } },
+          colorScheme,
+        }
+
+        const { button, text } = renderToggleButton(false)
+
+        expect(button).toHaveStyle({ borderColor })
+        expect(text).toHaveStyle({ color })
+      }
+    )
+  })
+
+  describe('explicit chip token overrides', () => {
+    const explicitBorder = 'rgb(1, 2, 3)'
+    const explicitFill = 'rgb(4, 5, 6)'
+    const explicitText = 'rgb(7, 8, 9)'
+
+    beforeEach(() => {
+      themeProps = {
+        theme: {
+          colors: {
+            interaction: 'rgb(0, 255, 0)',
+            borderColorChipSelected: explicitBorder,
+            fillColorChipSelected: explicitFill,
+            textColorChipSelected: explicitText,
+          },
+        },
+      }
+    })
+
+    test('active state prefers explicit chip tokens over colors.interaction', () => {
+      const { button, text } = renderToggleButton(true)
+
+      expect(button).toHaveStyle({ borderColor: explicitBorder })
+      // fillColorChipSelected still passes through the chip-background hook's
+      // lightness transform, so the rendered fill isn't the raw override.
+      expect(button).toHaveStyle({ backgroundColor: 'hsl(210, 20%, 92%)' })
+      expect(text).toHaveStyle({ color: explicitText })
+    })
+  })
+})

package/src/components/display/toggle_button.tsx

@@ -5,7 +5,7 @@ import {
   useTheme,
   useFontScale,
   useCreateAndroidRippleColor,
-  useInteractionGhostBackgroundColor,
+  useSelectedChipBackgroundColor,
 } from '../../hooks'
 import {
   MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
@@ -164,16 +164,20 @@ const useStyles = ({ active, maxFontSizeMultiplier }: Partial<ToggleButtonProps>
   const { colors, button } = useTheme()
   const fontScale = useFontScale({ maxFontSizeMultiplier })
 
-  const activeBackgroundColor = useInteractionGhostBackgroundColor()
+  const activeBackgroundColor = useSelectedChipBackgroundColor()
 
-  const color = active ? colors.interaction : colors.textColorDefaultSecondary
+  const borderColor = active
+    ? (colors.borderColorChipSelected ?? colors.interaction)
+    : colors.borderColorChip
+  const fillColor = active ? activeBackgroundColor : colors.fillColorChip
+  const color = active ? (colors.textColorChipSelected ?? colors.interaction) : colors.textColorChip
 
   return StyleSheet.create({
     pressable: {
       borderRadius: button.borderRadius * fontScale,
       borderWidth: 1,
-      borderColor: active ? colors.interaction : colors.borderColorDefaultBase,
-      backgroundColor: active ? activeBackgroundColor : 'transparent',
+      borderColor,
+      backgroundColor: fillColor,
       paddingHorizontal: 16 * fontScale,
       flexDirection: 'row',
       alignItems: 'center',

package/src/hooks/index.ts

@@ -13,7 +13,8 @@ export * from './use_font_scale'
 export * from './use_has_direct_messages'
 export * from './use_groups_groups'
 export * from './use_groups'
-export * from './use_interaction_ghost_color'
+export * from './use_selected_chip_background_color'
+export * from './use_interaction_tinted_background_color'
 export * from './use_message_reaction_toggle'
 export * from './use_new_conversation_entry'
 export * from './use_organization'

package/src/hooks/use_interaction_tinted_background_color.ts

@@ -0,0 +1,16 @@
+import colorFunction from 'color'
+import { useMemo } from 'react'
+import { useTheme } from './use_theme'
+
+export function useInteractionTintedBackgroundColor() {
+  const { colors } = useTheme()
+
+  return useMemo(
+    () =>
+      colorFunction(colors.interaction)
+        .hsl()
+        .lightness(colors.name === 'dark' ? 12 : 92)
+        .string(),
+    [colors.interaction, colors.name]
+  )
+}

package/src/hooks/use_selected_chip_background_color.ts

@@ -0,0 +1,16 @@
+import colorFunction from 'color'
+import { useMemo } from 'react'
+import { useTheme } from './use_theme'
+
+export function useSelectedChipBackgroundColor() {
+  const { colors, chip } = useTheme()
+
+  return useMemo(
+    () =>
+      colorFunction(colors.fillColorChipSelected ?? colors.interaction)
+        .hsl()
+        .lightness(chip.hslLightnessChipSelected)
+        .string(),
+    [colors.fillColorChipSelected, colors.interaction, chip.hslLightnessChipSelected]
+  )
+}

package/src/screens/design_system_screen.tsx

@@ -29,7 +29,7 @@ import {
 import { VideoAttachmentPreview } from '../components/display/video_attachment_preview'
 import BannerPrimitive from '../components/primitive/banner_primitive'
 import BlankState from '../components/primitive/blank_state_primitive'
-import { useInteractionGhostBackgroundColor, useTheme } from '../hooks'
+import { useSelectedChipBackgroundColor, useTheme } from '../hooks'
 import {
   MAX_FONT_SIZE_MULTIPLIER,
   platformPressedOpacityStyle,
@@ -1325,7 +1325,7 @@ function HapticButton({ title, onPress }: { title: string; onPress: () => void }
 
 const useStyles = () => {
   const { colors } = useTheme()
-  const interactionGhostBackgroundColor = useInteractionGhostBackgroundColor()
+  const selectedChipBackgroundColor = useSelectedChipBackgroundColor()
 
   return StyleSheet.create({
     hapticButton: {
@@ -1334,7 +1334,7 @@ const useStyles = () => {
       padding: 16,
       alignItems: 'center',
       justifyContent: 'center',
-      backgroundColor: interactionGhostBackgroundColor,
+      backgroundColor: selectedChipBackgroundColor,
       borderWidth: 1,
       borderColor: colors.interaction,
       borderRadius: 8,

package/src/utils/theme.ts

@@ -28,6 +28,9 @@ export interface DefaultTheme {
   button: {
     borderRadius: number
   }
+  chip: {
+    hslLightnessChipSelected: number
+  }
   showBadgeProductLogo: boolean
 }
 
@@ -44,6 +47,9 @@ export const defaultTheme = (colorScheme: ColorSchemeName | null): ChatTheme =>
     button: {
       borderRadius: 40,
     },
+    chip: {
+      hslLightnessChipSelected: scheme === 'dark' ? 12 : 92,
+    },
     showBadgeProductLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`
   }
 }
@@ -91,6 +97,19 @@ interface ChatColors {
   statusNeutralComposedIcon: string
   statusNeutralComposedText: string
   statusNeutralComposedBackground: string
+  borderColorChip: string
+  fillColorChip: string
+  textColorChip: string
+  /**
+   * Selected-chip colors (border/fill/text). Never assign a static default
+   * directly — these stay optional so they always fall back to
+   * `colors.interaction` via `??` at the read site. Every current consumer
+   * overrides `interaction` at runtime, and a seeded default here could win
+   * over that override depending on merge order.
+   */
+  borderColorChipSelected?: string
+  fillColorChipSelected?: string
+  textColorChipSelected?: string
 }
 
 // 'link' is an iOS-only semantic color name — constructing it on Android is
@@ -138,6 +157,9 @@ const colorsChatLight: ChatColors = {
   statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimary,
   statusNeutralComposedText: tokens.textColorStatusNeutral,
   statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhost,
+  borderColorChip: tokens.colorNeutral88,
+  fillColorChip: 'transparent',
+  textColorChip: tokens.colorNeutral45,
 }
 
 const colorsChatDark: ChatColors = {
@@ -183,6 +205,9 @@ const colorsChatDark: ChatColors = {
   statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimaryDark,
   statusNeutralComposedText: tokens.textColorStatusNeutralDark,
   statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhostDark,
+  borderColorChip: tokens.colorNeutral24,
+  fillColorChip: 'transparent',
+  textColorChip: tokens.colorNeutral68,
 }
 
 const chatThemeColorMap = {

package/build/hooks/use_interaction_ghost_color.d.ts

@@ -1,2 +0,0 @@
-export declare function useInteractionGhostBackgroundColor(): string;
-//# sourceMappingURL=use_interaction_ghost_color.d.ts.map

package/build/hooks/use_interaction_ghost_color.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use_interaction_ghost_color.d.ts","sourceRoot":"","sources":["../../src/hooks/use_interaction_ghost_color.ts"],"names":[],"mappings":"AAIA,wBAAgB,kCAAkC,WAUjD"}

package/build/hooks/use_interaction_ghost_color.js

@@ -1,14 +0,0 @@
-import colorFunction from 'color';
-import { useMemo } from 'react';
-import { useTheme } from './use_theme';
-export function useInteractionGhostBackgroundColor() {
-    const { colors } = useTheme();
-    const interactionGhostColor = useMemo(() => {
-        return colorFunction(colors.interaction)
-            .hsl()
-            .lightness(colors.name === 'dark' ? 12 : 92)
-            .string();
-    }, [colors.interaction, colors.name]);
-    return interactionGhostColor;
-}
-//# sourceMappingURL=use_interaction_ghost_color.js.map

package/build/hooks/use_interaction_ghost_color.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use_interaction_ghost_color.js","sourceRoot":"","sources":["../../src/hooks/use_interaction_ghost_color.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,MAAM,UAAU,kCAAkC;IAChD,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,OAAO,aAAa,CAAC,MAAM,CAAC,WAAW,CAAC;aACrC,GAAG,EAAE;aACL,SAAS,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;aAC3C,MAAM,EAAE,CAAA;IACb,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAErC,OAAO,qBAAqB,CAAA;AAC9B,CAAC","sourcesContent":["import colorFunction from 'color'\nimport { useMemo } from 'react'\nimport { useTheme } from './use_theme'\n\nexport function useInteractionGhostBackgroundColor() {\n  const { colors } = useTheme()\n  const interactionGhostColor = useMemo(() => {\n    return colorFunction(colors.interaction)\n      .hsl()\n      .lightness(colors.name === 'dark' ? 12 : 92)\n      .string()\n  }, [colors.interaction, colors.name])\n\n  return interactionGhostColor\n}\n"]}

package/src/hooks/use_interaction_ghost_color.ts

@@ -1,15 +0,0 @@
-import colorFunction from 'color'
-import { useMemo } from 'react'
-import { useTheme } from './use_theme'
-
-export function useInteractionGhostBackgroundColor() {
-  const { colors } = useTheme()
-  const interactionGhostColor = useMemo(() => {
-    return colorFunction(colors.interaction)
-      .hsl()
-      .lightness(colors.name === 'dark' ? 12 : 92)
-      .string()
-  }, [colors.interaction, colors.name])
-
-  return interactionGhostColor
-}