@planningcenter/chat-react-native 1.6.2-rc.2 → 1.7.0-rc.0

package/build/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA","sourcesContent":["export * from './session'\nexport * from './theme'\nexport * from './styles'\nexport * from './space'\nexport * from './client'\nexport * from './uri'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA","sourcesContent":["export * from './session'\nexport * from './theme'\nexport * from './styles'\nexport * from './space'\nexport * from './client'\nexport * from './uri'\nexport * from './cache'\n"]}

package/build/utils/theme.d.ts

@@ -22,6 +22,7 @@ export interface DefaultTheme {
     button: {
         borderRadius: number;
     };
+    showBadgeLogo: boolean;
 }
 export declare const defaultTheme: (colorScheme: ColorSchemeName) => ChatTheme;
 export type TemporaryDefaultColorsType = Partial<ChatColors>;
@@ -34,6 +35,21 @@ interface ChatColors {
     switchTrackFalse: string | undefined;
     switchThumbColor: string | undefined;
     testColor: string;
+    statusInfoIcon: string;
+    statusInfoText: string;
+    statusInfoBackground: string;
+    statusSuccessIcon: string;
+    statusSuccessText: string;
+    statusSuccessBackground: string;
+    statusWarningIcon: string;
+    statusWarningText: string;
+    statusWarningBackground: string;
+    statusErrorIcon: string;
+    statusErrorText: string;
+    statusErrorBackground: string;
+    statusNeutralIcon: string;
+    statusNeutralText: string;
+    statusNeutralBackground: string;
 }
 export {};
 //# sourceMappingURL=theme.d.ts.map

package/build/utils/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AAE/E,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,GAC5B,CAAC,OAAO,mBAAmB,CAAC,KAAK,GAAG,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAA;CACvE;AAED;;;;;;;;;;;;;gDAagD;AAEhD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,UAAU,CAAA;IAClB,MAAM,EAAE;QACN,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;CACF;AAED,eAAO,MAAM,YAAY,gBAAiB,eAAe,KAAG,SAc3D,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAE5D,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAA;IACnC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC,SAAS,EAAE,MAAM,CAAA;CAClB"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AAE/E,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,GAC5B,CAAC,OAAO,mBAAmB,CAAC,KAAK,GAAG,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAA;CACvE;AAED;;;;;;;;;;;;;gDAagD;AAEhD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,UAAU,CAAA;IAClB,MAAM,EAAE;QACN,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;IACD,aAAa,EAAE,OAAO,CAAA;CACvB;AAED,eAAO,MAAM,YAAY,gBAAiB,eAAe,KAAG,SAe3D,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAE5D,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAA;IACnC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC,SAAS,EAAE,MAAM,CAAA;IACjB,cAAc,EAAE,MAAM,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IACtB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,qBAAqB,EAAE,MAAM,CAAA;IAC7B,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;CAChC"}

package/build/utils/theme.js

@@ -11,6 +11,7 @@ export const defaultTheme = (colorScheme) => {
         button: {
             borderRadius: 40,
         },
+        showBadgeLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`
     };
 };
 const colorsChatLight = {
@@ -22,6 +23,21 @@ const colorsChatLight = {
     switchTrackFalse: undefined,
     switchThumbColor: undefined,
     testColor: 'hotpink',
+    statusInfoIcon: tokens.iconColorStatusInfoPrimary,
+    statusInfoText: tokens.textColorStatusInfo,
+    statusInfoBackground: tokens.fillColorStatusInfoGhost,
+    statusSuccessIcon: tokens.iconColorStatusSuccessPrimary,
+    statusSuccessText: tokens.textColorStatusSuccess,
+    statusSuccessBackground: tokens.fillColorStatusSuccessGhost,
+    statusWarningIcon: tokens.iconColorStatusWarningPrimary,
+    statusWarningText: tokens.textColorStatusWarning,
+    statusWarningBackground: tokens.fillColorStatusWarningGhost,
+    statusErrorIcon: tokens.iconColorStatusErrorPrimary,
+    statusErrorText: tokens.textColorStatusError,
+    statusErrorBackground: tokens.fillColorStatusErrorGhost,
+    statusNeutralIcon: tokens.iconColorStatusNeutralPrimary,
+    statusNeutralText: tokens.textColorStatusNeutral,
+    statusNeutralBackground: tokens.fillColorStatusNeutralGhost,
 };
 const colorsChatDark = {
     name: 'dark',
@@ -32,6 +48,21 @@ const colorsChatDark = {
     switchTrackFalse: undefined,
     switchThumbColor: undefined,
     testColor: 'pink',
+    statusInfoIcon: tokens.iconColorStatusInfoPrimaryDark,
+    statusInfoText: tokens.textColorStatusInfoDark,
+    statusInfoBackground: tokens.fillColorStatusInfoGhostDark,
+    statusSuccessIcon: tokens.iconColorStatusSuccessPrimaryDark,
+    statusSuccessText: tokens.textColorStatusSuccessDark,
+    statusSuccessBackground: tokens.fillColorStatusSuccessGhostDark,
+    statusWarningIcon: tokens.iconColorStatusWarningPrimaryDark,
+    statusWarningText: tokens.textColorStatusWarningDark,
+    statusWarningBackground: tokens.fillColorStatusWarningGhostDark,
+    statusErrorIcon: tokens.iconColorStatusErrorPrimaryDark,
+    statusErrorText: tokens.textColorStatusErrorDark,
+    statusErrorBackground: tokens.fillColorStatusErrorGhostDark,
+    statusNeutralIcon: tokens.iconColorStatusNeutralPrimaryDark,
+    statusNeutralText: tokens.textColorStatusNeutralDark,
+    statusNeutralBackground: tokens.fillColorStatusNeutralGhostDark,
 };
 const chatThemeColorMap = {
     light: colorsChatLight,

package/build/utils/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AA6B/E,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,WAA4B,EAAa,EAAE;IACtE,MAAM,MAAM,GAAG,WAAW,IAAI,OAAO,CAAA;IAErC,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;KACF,CAAA;AACH,CAAC,CAAA;AAeD,MAAM,eAAe,GAAe;IAClC,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,MAAM,CAAC,2BAA2B;IAC/C,eAAe,EAAE,SAAS;IAC1B,gBAAgB,EAAE,SAAS;IAC3B,gBAAgB,EAAE,SAAS;IAC3B,SAAS,EAAE,SAAS;CACrB,CAAA;AAED,MAAM,cAAc,GAAe;IACjC,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,MAAM,CAAC,+BAA+B;IACnD,eAAe,EAAE,SAAS;IAC1B,gBAAgB,EAAE,SAAS;IAC3B,gBAAgB,EAAE,SAAS;IAC3B,SAAS,EAAE,MAAM;CAClB,CAAA;AAED,MAAM,iBAAiB,GAAG;IACxB,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,cAAc;CACrB,CAAA","sourcesContent":["import { ColorSchemeName } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\nimport { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'\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}\n\nexport const defaultTheme = (colorScheme: ColorSchemeName): ChatTheme => {\n  const scheme = colorScheme || '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  }\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  switchTrackTrue: string | undefined\n  switchTrackFalse: string | undefined\n  switchThumbColor: string | undefined\n  testColor: string\n}\n\nconst colorsChatLight: ChatColors = {\n  name: 'light',\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefault,\n  switchTrackTrue: undefined,\n  switchTrackFalse: undefined,\n  switchThumbColor: undefined,\n  testColor: 'hotpink',\n}\n\nconst colorsChatDark: ChatColors = {\n  name: 'dark',\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefaultDark,\n  switchTrackTrue: undefined,\n  switchTrackFalse: undefined,\n  switchThumbColor: undefined,\n  testColor: 'pink',\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":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AA8B/E,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,WAA4B,EAAa,EAAE;IACtE,MAAM,MAAM,GAAG,WAAW,IAAI,OAAO,CAAA;IAErC,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,aAAa,EAAE,IAAI,EAAE,sEAAsE;KAC5F,CAAA;AACH,CAAC,CAAA;AA8BD,MAAM,eAAe,GAAe;IAClC,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,MAAM,CAAC,2BAA2B;IAC/C,eAAe,EAAE,SAAS;IAC1B,gBAAgB,EAAE,SAAS;IAC3B,gBAAgB,EAAE,SAAS;IAC3B,SAAS,EAAE,SAAS;IACpB,cAAc,EAAE,MAAM,CAAC,0BAA0B;IACjD,cAAc,EAAE,MAAM,CAAC,mBAAmB;IAC1C,oBAAoB,EAAE,MAAM,CAAC,wBAAwB;IACrD,iBAAiB,EAAE,MAAM,CAAC,6BAA6B;IACvD,iBAAiB,EAAE,MAAM,CAAC,sBAAsB;IAChD,uBAAuB,EAAE,MAAM,CAAC,2BAA2B;IAC3D,iBAAiB,EAAE,MAAM,CAAC,6BAA6B;IACvD,iBAAiB,EAAE,MAAM,CAAC,sBAAsB;IAChD,uBAAuB,EAAE,MAAM,CAAC,2BAA2B;IAC3D,eAAe,EAAE,MAAM,CAAC,2BAA2B;IACnD,eAAe,EAAE,MAAM,CAAC,oBAAoB;IAC5C,qBAAqB,EAAE,MAAM,CAAC,yBAAyB;IACvD,iBAAiB,EAAE,MAAM,CAAC,6BAA6B;IACvD,iBAAiB,EAAE,MAAM,CAAC,sBAAsB;IAChD,uBAAuB,EAAE,MAAM,CAAC,2BAA2B;CAC5D,CAAA;AAED,MAAM,cAAc,GAAe;IACjC,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,MAAM,CAAC,+BAA+B;IACnD,eAAe,EAAE,SAAS;IAC1B,gBAAgB,EAAE,SAAS;IAC3B,gBAAgB,EAAE,SAAS;IAC3B,SAAS,EAAE,MAAM;IACjB,cAAc,EAAE,MAAM,CAAC,8BAA8B;IACrD,cAAc,EAAE,MAAM,CAAC,uBAAuB;IAC9C,oBAAoB,EAAE,MAAM,CAAC,4BAA4B;IACzD,iBAAiB,EAAE,MAAM,CAAC,iCAAiC;IAC3D,iBAAiB,EAAE,MAAM,CAAC,0BAA0B;IACpD,uBAAuB,EAAE,MAAM,CAAC,+BAA+B;IAC/D,iBAAiB,EAAE,MAAM,CAAC,iCAAiC;IAC3D,iBAAiB,EAAE,MAAM,CAAC,0BAA0B;IACpD,uBAAuB,EAAE,MAAM,CAAC,+BAA+B;IAC/D,eAAe,EAAE,MAAM,CAAC,+BAA+B;IACvD,eAAe,EAAE,MAAM,CAAC,wBAAwB;IAChD,qBAAqB,EAAE,MAAM,CAAC,6BAA6B;IAC3D,iBAAiB,EAAE,MAAM,CAAC,iCAAiC;IAC3D,iBAAiB,EAAE,MAAM,CAAC,0BAA0B;IACpD,uBAAuB,EAAE,MAAM,CAAC,+BAA+B;CAChE,CAAA;AAED,MAAM,iBAAiB,GAAG;IACxB,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,cAAc;CACrB,CAAA","sourcesContent":["import { ColorSchemeName } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\nimport { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'\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  showBadgeLogo: boolean\n}\n\nexport const defaultTheme = (colorScheme: ColorSchemeName): ChatTheme => {\n  const scheme = colorScheme || '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    showBadgeLogo: 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  switchTrackTrue: string | undefined\n  switchTrackFalse: string | undefined\n  switchThumbColor: string | undefined\n  testColor: string\n  statusInfoIcon: string\n  statusInfoText: string\n  statusInfoBackground: string\n  statusSuccessIcon: string\n  statusSuccessText: string\n  statusSuccessBackground: string\n  statusWarningIcon: string\n  statusWarningText: string\n  statusWarningBackground: string\n  statusErrorIcon: string\n  statusErrorText: string\n  statusErrorBackground: string\n  statusNeutralIcon: string\n  statusNeutralText: string\n  statusNeutralBackground: string\n}\n\nconst colorsChatLight: ChatColors = {\n  name: 'light',\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefault,\n  switchTrackTrue: undefined,\n  switchTrackFalse: undefined,\n  switchThumbColor: undefined,\n  testColor: 'hotpink',\n  statusInfoIcon: tokens.iconColorStatusInfoPrimary,\n  statusInfoText: tokens.textColorStatusInfo,\n  statusInfoBackground: tokens.fillColorStatusInfoGhost,\n  statusSuccessIcon: tokens.iconColorStatusSuccessPrimary,\n  statusSuccessText: tokens.textColorStatusSuccess,\n  statusSuccessBackground: tokens.fillColorStatusSuccessGhost,\n  statusWarningIcon: tokens.iconColorStatusWarningPrimary,\n  statusWarningText: tokens.textColorStatusWarning,\n  statusWarningBackground: tokens.fillColorStatusWarningGhost,\n  statusErrorIcon: tokens.iconColorStatusErrorPrimary,\n  statusErrorText: tokens.textColorStatusError,\n  statusErrorBackground: tokens.fillColorStatusErrorGhost,\n  statusNeutralIcon: tokens.iconColorStatusNeutralPrimary,\n  statusNeutralText: tokens.textColorStatusNeutral,\n  statusNeutralBackground: tokens.fillColorStatusNeutralGhost,\n}\n\nconst colorsChatDark: ChatColors = {\n  name: 'dark',\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefaultDark,\n  switchTrackTrue: undefined,\n  switchTrackFalse: undefined,\n  switchThumbColor: undefined,\n  testColor: 'pink',\n  statusInfoIcon: tokens.iconColorStatusInfoPrimaryDark,\n  statusInfoText: tokens.textColorStatusInfoDark,\n  statusInfoBackground: tokens.fillColorStatusInfoGhostDark,\n  statusSuccessIcon: tokens.iconColorStatusSuccessPrimaryDark,\n  statusSuccessText: tokens.textColorStatusSuccessDark,\n  statusSuccessBackground: tokens.fillColorStatusSuccessGhostDark,\n  statusWarningIcon: tokens.iconColorStatusWarningPrimaryDark,\n  statusWarningText: tokens.textColorStatusWarningDark,\n  statusWarningBackground: tokens.fillColorStatusWarningGhostDark,\n  statusErrorIcon: tokens.iconColorStatusErrorPrimaryDark,\n  statusErrorText: tokens.textColorStatusErrorDark,\n  statusErrorBackground: tokens.fillColorStatusErrorGhostDark,\n  statusNeutralIcon: tokens.iconColorStatusNeutralPrimaryDark,\n  statusNeutralText: tokens.textColorStatusNeutralDark,\n  statusNeutralBackground: tokens.fillColorStatusNeutralGhostDark,\n}\n\nconst chatThemeColorMap = {\n  light: colorsChatLight,\n  dark: colorsChatDark,\n}\n"]}

package/build/vendor/tapestry/tokens.d.ts

@@ -51,6 +51,36 @@ export declare const tokens: {
     colorNeutral98: "hsl(0, 0%, 98%)";
     colorNeutral100White: "hsl(0, 0%, 100%)";
     fillColorInteractionDefault: "hsl(204, 100%, 40%)";
+    fillColorStatusNeutralGhost: "hsl(0, 0%, 93%)";
+    fillColorStatusNeutralGhostDark: "hsl(0, 0%, 18%)";
+    textColorStatusNeutral: "hsl(0, 0%, 24%)";
+    textColorStatusNeutralDark: "hsl(0, 0%, 80%)";
+    iconColorStatusNeutralPrimary: "hsl(0, 0%, 45%)";
+    iconColorStatusNeutralPrimaryDark: "hsl(0, 0%, 54%)";
+    fillColorStatusErrorGhost: "hsl(9, 59%, 93%)";
+    fillColorStatusErrorGhostDark: "hsl(8, 20%, 16%)";
+    textColorStatusError: "hsl(8, 60%, 45%)";
+    textColorStatusErrorDark: "hsl(8, 61%, 61%)";
+    iconColorStatusErrorPrimary: "hsl(8, 60%, 47%)";
+    iconColorStatusErrorPrimaryDark: "hsl(8, 60%, 55%)";
+    fillColorStatusWarningGhost: "hsl(42, 87%, 94%)";
+    fillColorStatusWarningGhostDark: "hsl(41, 18%, 17%)";
+    textColorStatusWarning: "hsl(42, 100%, 29%)";
+    textColorStatusWarningDark: "hsl(42, 84%, 55%)";
+    iconColorStatusWarningPrimary: "hsl(42, 84%, 49%)";
+    iconColorStatusWarningPrimaryDark: "hsl(42, 84%, 49%)";
+    fillColorStatusSuccessGhost: "hsl(97, 57%, 90%)";
+    fillColorStatusSuccessGhostDark: "hsl(125, 17%, 15%)";
+    textColorStatusSuccess: "hsl(97, 57%, 28%)";
+    textColorStatusSuccessDark: "hsl(97, 57%, 41%)";
+    iconColorStatusSuccessPrimary: "hsl(96, 57%, 33%)";
+    iconColorStatusSuccessPrimaryDark: "hsl(96, 57%, 41%)";
+    fillColorStatusInfoGhost: "hsl(203, 94%, 94%)";
+    fillColorStatusInfoGhostDark: "hsl(204, 32%, 15%)";
+    textColorStatusInfo: "hsl(204, 100%, 35%)";
+    textColorStatusInfoDark: "hsl(204, 68%, 55%)";
+    iconColorStatusInfoPrimary: "hsl(204, 100%, 40%)";
+    iconColorStatusInfoPrimaryDark: "hsl(204, 78%, 38%)";
     fillColorTransparencyLight010: "hsla(0, 0%, 100%, 0.1)";
     fillColorTransparencyLight020: "hsla(0, 0%, 100%, 0.2)";
     fillColorTransparencyLight030: "hsla(0, 0%, 100%, 0.3)";

package/build/vendor/tapestry/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/vendor/tapestry/tokens.ts"],"names":[],"mappings":"AAuFA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKlB,CAAA"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/vendor/tapestry/tokens.ts"],"names":[],"mappings":"AAqHA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKlB,CAAA"}

package/build/vendor/tapestry/tokens.js

@@ -21,6 +21,36 @@ const colorPrimitives = {
     colorNeutral98: 'hsl(0, 0%, 98%)',
     colorNeutral100White: 'hsl(0, 0%, 100%)',
     fillColorInteractionDefault: 'hsl(204, 100%, 40%)',
+    fillColorStatusNeutralGhost: 'hsl(0, 0%, 93%)',
+    fillColorStatusNeutralGhostDark: 'hsl(0, 0%, 18%)',
+    textColorStatusNeutral: 'hsl(0, 0%, 24%)',
+    textColorStatusNeutralDark: 'hsl(0, 0%, 80%)',
+    iconColorStatusNeutralPrimary: 'hsl(0, 0%, 45%)',
+    iconColorStatusNeutralPrimaryDark: 'hsl(0, 0%, 54%)',
+    fillColorStatusErrorGhost: 'hsl(9, 59%, 93%)',
+    fillColorStatusErrorGhostDark: 'hsl(8, 20%, 16%)',
+    textColorStatusError: 'hsl(8, 60%, 45%)',
+    textColorStatusErrorDark: 'hsl(8, 61%, 61%)',
+    iconColorStatusErrorPrimary: 'hsl(8, 60%, 47%)',
+    iconColorStatusErrorPrimaryDark: 'hsl(8, 60%, 55%)',
+    fillColorStatusWarningGhost: 'hsl(42, 87%, 94%)',
+    fillColorStatusWarningGhostDark: 'hsl(41, 18%, 17%)',
+    textColorStatusWarning: 'hsl(42, 100%, 29%)',
+    textColorStatusWarningDark: 'hsl(42, 84%, 55%)',
+    iconColorStatusWarningPrimary: 'hsl(42, 84%, 49%)',
+    iconColorStatusWarningPrimaryDark: 'hsl(42, 84%, 49%)',
+    fillColorStatusSuccessGhost: 'hsl(97, 57%, 90%)',
+    fillColorStatusSuccessGhostDark: 'hsl(125, 17%, 15%)',
+    textColorStatusSuccess: 'hsl(97, 57%, 28%)',
+    textColorStatusSuccessDark: 'hsl(97, 57%, 41%)',
+    iconColorStatusSuccessPrimary: 'hsl(96, 57%, 33%)',
+    iconColorStatusSuccessPrimaryDark: 'hsl(96, 57%, 41%)',
+    fillColorStatusInfoGhost: 'hsl(203, 94%, 94%)',
+    fillColorStatusInfoGhostDark: 'hsl(204, 32%, 15%)',
+    textColorStatusInfo: 'hsl(204, 100%, 35%)',
+    textColorStatusInfoDark: 'hsl(204, 68%, 55%)',
+    iconColorStatusInfoPrimary: 'hsl(204, 100%, 40%)',
+    iconColorStatusInfoPrimaryDark: 'hsl(204, 78%, 38%)',
     fillColorTransparencyLight010: 'hsla(0, 0%, 100%, 0.1)',
     fillColorTransparencyLight020: 'hsla(0, 0%, 100%, 0.2)',
     fillColorTransparencyLight030: 'hsla(0, 0%, 100%, 0.3)',

package/build/vendor/tapestry/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../src/vendor/tapestry/tokens.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,2FAA2F;AAC3F,0GAA0G;AAE1G,MAAM,eAAe,GAAG;IACtB,aAAa,EAAE,gBAAgB;IAC/B,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,cAAc,EAAE,iBAAiB;IACjC,oBAAoB,EAAE,kBAAkB;IACxC,2BAA2B,EAAE,qBAAqB;IAClD,6BAA6B,EAAE,wBAAwB;IACvD,6BAA6B,EAAE,wBAAwB;IACvD,6BAA6B,EAAE,wBAAwB;IACvD,6BAA6B,EAAE,wBAAwB;IACvD,6BAA6B,EAAE,wBAAwB;IACvD,6BAA6B,EAAE,wBAAwB;IACvD,6BAA6B,EAAE,wBAAwB;IACvD,6BAA6B,EAAE,wBAAwB;IACvD,6BAA6B,EAAE,wBAAwB;IACvD,4BAA4B,EAAE,sBAAsB;IACpD,4BAA4B,EAAE,sBAAsB;IACpD,4BAA4B,EAAE,sBAAsB;IACpD,4BAA4B,EAAE,sBAAsB;IACpD,4BAA4B,EAAE,sBAAsB;IACpD,4BAA4B,EAAE,sBAAsB;IACpD,4BAA4B,EAAE,sBAAsB;IACpD,4BAA4B,EAAE,sBAAsB;IACpD,4BAA4B,EAAE,sBAAsB;CAC5C,CAAA;AAEV,MAAM,gBAAgB,GAAG;IACvB,aAAa,EAAE,CAAC;IAChB,WAAW,EAAE,CAAC;IACd,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,CAAC;IACjB,cAAc,EAAE,EAAE;IAClB,iBAAiB,EAAE,EAAE;IACrB,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,CAAC;IAClB,gBAAgB,EAAE,KAAK;IACvB,gBAAgB,EAAE,KAAK;IACvB,kBAAkB,EAAE,KAAK;IACzB,cAAc,EAAE,KAAK;IACrB,WAAW,EAAE,EAAE;IACf,WAAW,EAAE,EAAE;IACf,WAAW,EAAE,EAAE;IACf,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;IACd,WAAW,EAAE,EAAE;CACP,CAAA;AAEV,MAAM,cAAc,GAAG;IACrB,mBAAmB,EAAE,gBAAgB,CAAC,cAAc;CAC5C,CAAA;AAEV,gFAAgF;AAChF,MAAM,eAAe,GAAG;IACtB,6BAA6B,EAAE,oBAAoB;IACnD,+BAA+B,EAAE,qBAAqB;IACtD,0BAA0B,EAAE,kBAAkB;CACtC,CAAA;AAEV,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,GAAG,eAAe;IAClB,GAAG,gBAAgB;IACnB,GAAG,cAAc;IACjB,GAAG,eAAe;CACnB,CAAA","sourcesContent":["// Copied from `@planningcenter/tapestry` package.\n// Defining these tokens locally is a temporary solution until the package supports mobile.\n// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs\n\nconst colorPrimitives = {\n  colorNeutral7: 'hsl(0, 0%, 7%)',\n  colorNeutral12: 'hsl(0, 0%, 12%)',\n  colorNeutral15: 'hsl(0, 0%, 15%)',\n  colorNeutral17: 'hsl(0, 0%, 17%)',\n  colorNeutral19: 'hsl(0, 0%, 19%)',\n  colorNeutral24: 'hsl(0, 0%, 24%)',\n  colorNeutral32: 'hsl(0, 0%, 32%)',\n  colorNeutral45: 'hsl(0, 0%, 45%)',\n  colorNeutral50: 'hsl(0, 0%, 50%)',\n  colorNeutral58: 'hsl(0, 0%, 58%)',\n  colorNeutral68: 'hsl(0, 0%, 68%)',\n  colorNeutral81: 'hsl(0, 0%, 81%)',\n  colorNeutral88: 'hsl(0, 0%, 88%)',\n  colorNeutral93: 'hsl(0, 0%, 93%)',\n  colorNeutral95: 'hsl(0, 0%, 95%)',\n  colorNeutral97: 'hsl(0, 0%, 97%)',\n  colorNeutral98: 'hsl(0, 0%, 98%)',\n  colorNeutral100White: 'hsl(0, 0%, 100%)',\n  fillColorInteractionDefault: 'hsl(204, 100%, 40%)',\n  fillColorTransparencyLight010: 'hsla(0, 0%, 100%, 0.1)',\n  fillColorTransparencyLight020: 'hsla(0, 0%, 100%, 0.2)',\n  fillColorTransparencyLight030: 'hsla(0, 0%, 100%, 0.3)',\n  fillColorTransparencyLight040: 'hsla(0, 0%, 100%, 0.4)',\n  fillColorTransparencyLight050: 'hsla(0, 0%, 100%, 0.5)',\n  fillColorTransparencyLight060: 'hsla(0, 0%, 100%, 0.6)',\n  fillColorTransparencyLight070: 'hsla(0, 0%, 100%, 0.7)',\n  fillColorTransparencyLight080: 'hsla(0, 0%, 100%, 0.8)',\n  fillColorTransparencyLight090: 'hsla(0, 0%, 100%, 0.9)',\n  fillColorTransparencyDark010: 'hsla(0, 0%, 0%, 0.1)',\n  fillColorTransparencyDark020: 'hsla(0, 0%, 0%, 0.2)',\n  fillColorTransparencyDark030: 'hsla(0, 0%, 0%, 0.3)',\n  fillColorTransparencyDark040: 'hsla(0, 0%, 0%, 0.4)',\n  fillColorTransparencyDark050: 'hsla(0, 0%, 0%, 0.5)',\n  fillColorTransparencyDark060: 'hsla(0, 0%, 0%, 0.6)',\n  fillColorTransparencyDark070: 'hsla(0, 0%, 0%, 0.7)',\n  fillColorTransparencyDark080: 'hsla(0, 0%, 0%, 0.8)',\n  fillColorTransparencyDark090: 'hsla(0, 0%, 0%, 0.9)',\n} as const\n\nconst numericPrimtives = {\n  spacingFourth: 2,\n  spacingHalf: 4,\n  spacing1: 8,\n  spacing2: 16,\n  spacing3: 24,\n  spacing4: 32,\n  spacing5: 40,\n  spacing6: 48,\n  spacing7: 56,\n  borderRadiusSm: 2,\n  borderRadiusMd: 4,\n  borderRadiusLg: 8,\n  borderRadiusXl: 16,\n  borderRadiusRound: 56,\n  borderSizeDefault: 1,\n  borderSizeThick: 2,\n  fontWeightNormal: '400',\n  fontWeightMedium: '500',\n  fontWeightSemiBold: '600',\n  fontWeightBold: '700',\n  fontSize4xl: 32,\n  fontSize3xl: 28,\n  fontSize2xl: 24,\n  fontSizeXl: 20,\n  fontSizeLg: 18,\n  fontSizeMd: 16,\n  fontSizeSm: 14,\n  fontSizeXs: 12,\n  fontSize2xs: 10,\n} as const\n\nconst numericAliases = {\n  borderRadiusDefault: numericPrimtives.borderRadiusMd,\n} as const\n\n// These tokens are specfic to Chat will not be replaced by the Tapestry library\nconst localChatTokens = {\n  colorInteractionOnlineDefault: 'hsl(123, 38%, 57%)',\n  fillColorInteractionDefaultDark: 'hsl(204, 100%, 40%)',\n  fillColorStatusErrorMedium: 'hsl(0, 72%, 45%)',\n} as const\n\nexport const tokens = {\n  ...colorPrimitives,\n  ...numericPrimtives,\n  ...numericAliases,\n  ...localChatTokens,\n}\n"]}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../src/vendor/tapestry/tokens.ts"],"names":[],"mappings":"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","sourcesContent":["// Copied from `@planningcenter/tapestry` package.\n// Defining these tokens locally is a temporary solution until the package supports mobile.\n// Tokens Reference: https://planningcenter.github.io/tapestry/?path=/docs/foundations-design-tokens--docs\n\nconst colorPrimitives = {\n  colorNeutral7: 'hsl(0, 0%, 7%)',\n  colorNeutral12: 'hsl(0, 0%, 12%)',\n  colorNeutral15: 'hsl(0, 0%, 15%)',\n  colorNeutral17: 'hsl(0, 0%, 17%)',\n  colorNeutral19: 'hsl(0, 0%, 19%)',\n  colorNeutral24: 'hsl(0, 0%, 24%)',\n  colorNeutral32: 'hsl(0, 0%, 32%)',\n  colorNeutral45: 'hsl(0, 0%, 45%)',\n  colorNeutral50: 'hsl(0, 0%, 50%)',\n  colorNeutral58: 'hsl(0, 0%, 58%)',\n  colorNeutral68: 'hsl(0, 0%, 68%)',\n  colorNeutral81: 'hsl(0, 0%, 81%)',\n  colorNeutral88: 'hsl(0, 0%, 88%)',\n  colorNeutral93: 'hsl(0, 0%, 93%)',\n  colorNeutral95: 'hsl(0, 0%, 95%)',\n  colorNeutral97: 'hsl(0, 0%, 97%)',\n  colorNeutral98: 'hsl(0, 0%, 98%)',\n  colorNeutral100White: 'hsl(0, 0%, 100%)',\n  fillColorInteractionDefault: 'hsl(204, 100%, 40%)',\n  fillColorStatusNeutralGhost: 'hsl(0, 0%, 93%)',\n  fillColorStatusNeutralGhostDark: 'hsl(0, 0%, 18%)',\n  textColorStatusNeutral: 'hsl(0, 0%, 24%)',\n  textColorStatusNeutralDark: 'hsl(0, 0%, 80%)',\n  iconColorStatusNeutralPrimary: 'hsl(0, 0%, 45%)',\n  iconColorStatusNeutralPrimaryDark: 'hsl(0, 0%, 54%)',\n  fillColorStatusErrorGhost: 'hsl(9, 59%, 93%)',\n  fillColorStatusErrorGhostDark: 'hsl(8, 20%, 16%)',\n  textColorStatusError: 'hsl(8, 60%, 45%)',\n  textColorStatusErrorDark: 'hsl(8, 61%, 61%)',\n  iconColorStatusErrorPrimary: 'hsl(8, 60%, 47%)',\n  iconColorStatusErrorPrimaryDark: 'hsl(8, 60%, 55%)',\n  fillColorStatusWarningGhost: 'hsl(42, 87%, 94%)',\n  fillColorStatusWarningGhostDark: 'hsl(41, 18%, 17%)',\n  textColorStatusWarning: 'hsl(42, 100%, 29%)',\n  textColorStatusWarningDark: 'hsl(42, 84%, 55%)',\n  iconColorStatusWarningPrimary: 'hsl(42, 84%, 49%)',\n  iconColorStatusWarningPrimaryDark: 'hsl(42, 84%, 49%)',\n  fillColorStatusSuccessGhost: 'hsl(97, 57%, 90%)',\n  fillColorStatusSuccessGhostDark: 'hsl(125, 17%, 15%)',\n  textColorStatusSuccess: 'hsl(97, 57%, 28%)',\n  textColorStatusSuccessDark: 'hsl(97, 57%, 41%)',\n  iconColorStatusSuccessPrimary: 'hsl(96, 57%, 33%)',\n  iconColorStatusSuccessPrimaryDark: 'hsl(96, 57%, 41%)',\n  fillColorStatusInfoGhost: 'hsl(203, 94%, 94%)',\n  fillColorStatusInfoGhostDark: 'hsl(204, 32%, 15%)',\n  textColorStatusInfo: 'hsl(204, 100%, 35%)',\n  textColorStatusInfoDark: 'hsl(204, 68%, 55%)',\n  iconColorStatusInfoPrimary: 'hsl(204, 100%, 40%)',\n  iconColorStatusInfoPrimaryDark: 'hsl(204, 78%, 38%)',\n  fillColorTransparencyLight010: 'hsla(0, 0%, 100%, 0.1)',\n  fillColorTransparencyLight020: 'hsla(0, 0%, 100%, 0.2)',\n  fillColorTransparencyLight030: 'hsla(0, 0%, 100%, 0.3)',\n  fillColorTransparencyLight040: 'hsla(0, 0%, 100%, 0.4)',\n  fillColorTransparencyLight050: 'hsla(0, 0%, 100%, 0.5)',\n  fillColorTransparencyLight060: 'hsla(0, 0%, 100%, 0.6)',\n  fillColorTransparencyLight070: 'hsla(0, 0%, 100%, 0.7)',\n  fillColorTransparencyLight080: 'hsla(0, 0%, 100%, 0.8)',\n  fillColorTransparencyLight090: 'hsla(0, 0%, 100%, 0.9)',\n  fillColorTransparencyDark010: 'hsla(0, 0%, 0%, 0.1)',\n  fillColorTransparencyDark020: 'hsla(0, 0%, 0%, 0.2)',\n  fillColorTransparencyDark030: 'hsla(0, 0%, 0%, 0.3)',\n  fillColorTransparencyDark040: 'hsla(0, 0%, 0%, 0.4)',\n  fillColorTransparencyDark050: 'hsla(0, 0%, 0%, 0.5)',\n  fillColorTransparencyDark060: 'hsla(0, 0%, 0%, 0.6)',\n  fillColorTransparencyDark070: 'hsla(0, 0%, 0%, 0.7)',\n  fillColorTransparencyDark080: 'hsla(0, 0%, 0%, 0.8)',\n  fillColorTransparencyDark090: 'hsla(0, 0%, 0%, 0.9)',\n} as const\n\nconst numericPrimtives = {\n  spacingFourth: 2,\n  spacingHalf: 4,\n  spacing1: 8,\n  spacing2: 16,\n  spacing3: 24,\n  spacing4: 32,\n  spacing5: 40,\n  spacing6: 48,\n  spacing7: 56,\n  borderRadiusSm: 2,\n  borderRadiusMd: 4,\n  borderRadiusLg: 8,\n  borderRadiusXl: 16,\n  borderRadiusRound: 56,\n  borderSizeDefault: 1,\n  borderSizeThick: 2,\n  fontWeightNormal: '400',\n  fontWeightMedium: '500',\n  fontWeightSemiBold: '600',\n  fontWeightBold: '700',\n  fontSize4xl: 32,\n  fontSize3xl: 28,\n  fontSize2xl: 24,\n  fontSizeXl: 20,\n  fontSizeLg: 18,\n  fontSizeMd: 16,\n  fontSizeSm: 14,\n  fontSizeXs: 12,\n  fontSize2xs: 10,\n} as const\n\nconst numericAliases = {\n  borderRadiusDefault: numericPrimtives.borderRadiusMd,\n} as const\n\n// These tokens are specfic to Chat will not be replaced by the Tapestry library\nconst localChatTokens = {\n  colorInteractionOnlineDefault: 'hsl(123, 38%, 57%)',\n  fillColorInteractionDefaultDark: 'hsl(204, 100%, 40%)',\n  fillColorStatusErrorMedium: 'hsl(0, 72%, 45%)',\n} as const\n\nexport const tokens = {\n  ...colorPrimitives,\n  ...numericPrimtives,\n  ...numericAliases,\n  ...localChatTokens,\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "1.6.2-rc.2",
+  "version": "1.7.0-rc.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -35,6 +35,7 @@
     "react-native": "*",
     "react-native-device-info": "*",
     "react-native-linear-gradient": "^2.8.3",
+    "react-native-safe-area-context": ">=5.0.0",
     "react-native-svg": "*"
   },
   "devDependencies": {
@@ -46,5 +47,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "356ff4aef09affa7eb67802cd6849b55adeb47af"
+  "gitHead": "45c925959fee223156aa61022952aaea6437c09a"
 }

package/src/__tests__/utils/cache/page_mutations.ts

@@ -0,0 +1,206 @@
+import { addRecordInPagesData, updateRecordInPagesData } from '../../../utils/'
+
+const data = {
+  pageParams: {},
+  pages: [
+    {
+      data: [
+        { id: '1', type: 'Message', text: 'message 1' },
+        { id: '2', type: 'Message', text: 'message 2' },
+      ],
+      included: [],
+      links: {},
+      meta: { count: 2, totalCount: 2 },
+    },
+    {
+      data: [
+        { id: '3', type: 'Message', text: 'message 3' },
+        { id: '4', type: 'Message', text: 'message 4' },
+      ],
+      included: [],
+      links: {},
+      meta: { count: 2, totalCount: 2 },
+    },
+  ],
+}
+
+describe('updateRecordInPagesData', () => {
+  it('should update the record in the pages data', () => {
+    const id = '3'
+    const record = createRecord({ id })
+    const result = updateRecordInPagesData({ data, record })
+
+    expect(result).toEqual({
+      pageParams: {},
+      pages: [
+        {
+          data: [
+            { id: '1', type: 'Message', text: 'message 1' },
+            { id: '2', type: 'Message', text: 'message 2' },
+          ],
+          included: [],
+          links: {},
+          meta: { count: 2, totalCount: 2 },
+        },
+        {
+          data: [
+            { id: '3', type: 'Message', text: 'example 3' },
+            { id: '4', type: 'Message', text: 'message 4' },
+          ],
+          included: [],
+          links: {},
+          meta: { count: 2, totalCount: 2 },
+        },
+      ],
+    })
+  })
+
+  it('should update the record in the pages data with a custom processRecord function', () => {
+    const id = '2'
+    const record = createRecord({ id })
+
+    const result = updateRecordInPagesData<typeof record>({
+      data,
+      record,
+      processRecord: r => ({ ...r, text: 'updated ' + r.text }),
+    })
+
+    expect(result).toEqual({
+      pageParams: {},
+      pages: [
+        {
+          data: [
+            { id: '1', type: 'Message', text: 'message 1' },
+            { id, type: 'Message', text: `updated example ${id}` },
+          ],
+          included: [],
+          links: {},
+          meta: { count: 2, totalCount: 2 },
+        },
+        {
+          data: [
+            { id: '3', type: 'Message', text: 'message 3' },
+            { id: '4', type: 'Message', text: 'message 4' },
+          ],
+          included: [],
+          links: {},
+          meta: { count: 2, totalCount: 2 },
+        },
+      ],
+    })
+  })
+
+  it('should add records that do not yet exist', () => {
+    const id = '5'
+    const record = createRecord({ id })
+
+    const result = updateRecordInPagesData<typeof record>({
+      data,
+      record,
+      processRecord: r => ({ ...r, text: 'updated ' + r.text }),
+    })
+
+    expect(result).toEqual({
+      pageParams: {},
+      pages: [
+        {
+          data: [
+            { id: '1', type: 'Message', text: 'message 1' },
+            { id: '2', type: 'Message', text: 'message 2' },
+          ],
+          included: [],
+          links: {},
+          meta: { count: 2, totalCount: 2 },
+        },
+        {
+          data: [
+            { id: '3', type: 'Message', text: 'message 3' },
+            { id: '4', type: 'Message', text: 'message 4' },
+            { id, type: 'Message', text: `updated example ${id}` },
+          ],
+          included: [],
+          links: {},
+          meta: { count: 2, totalCount: 2 },
+        },
+      ],
+    })
+  })
+})
+
+describe('addRecordInPagesData', () => {
+  it('should add records that do not yet exist', () => {
+    const id = '7'
+    const record = createRecord({ id })
+
+    const result = addRecordInPagesData<typeof record>({
+      data,
+      record,
+    })
+
+    expect(result).toEqual({
+      pageParams: {},
+      pages: [
+        {
+          data: [
+            { id: '1', type: 'Message', text: 'message 1' },
+            { id: '2', type: 'Message', text: 'message 2' },
+          ],
+          included: [],
+          links: {},
+          meta: { count: 2, totalCount: 2 },
+        },
+        {
+          data: [
+            { id: '3', type: 'Message', text: 'message 3' },
+            { id: '4', type: 'Message', text: 'message 4' },
+            record,
+          ],
+          included: [],
+          links: {},
+          meta: { count: 2, totalCount: 2 },
+        },
+      ],
+    })
+  })
+
+  it('should add the record in the pages data and update with a custom processRecord function', () => {
+    const id = '8'
+    const record = createRecord({ id })
+    const result = addRecordInPagesData<typeof record>({
+      data,
+      record,
+      processRecord: r => ({ ...r, text: 'updated ' + r.text }),
+    })
+
+    expect(result).toEqual({
+      pageParams: {},
+      pages: [
+        {
+          data: [
+            { id: '1', type: 'Message', text: 'message 1' },
+            { id: '2', type: 'Message', text: 'message 2' },
+          ],
+          included: [],
+          links: {},
+          meta: { count: 2, totalCount: 2 },
+        },
+        {
+          data: [
+            { id: '3', type: 'Message', text: 'message 3' },
+            { id: '4', type: 'Message', text: 'message 4' },
+            { ...record, text: `updated example ${id}` },
+          ],
+          included: [],
+          links: {},
+          meta: { count: 2, totalCount: 2 },
+        },
+      ],
+    })
+  })
+})
+
+const createRecord = ({ id }: { id: string }) => ({
+  id,
+  text: `example ${id}`,
+  type: 'Message',
+})

package/src/components/conversation/message_reaction.tsx

@@ -0,0 +1,57 @@
+import { PlatformPressable } from '@react-navigation/elements'
+import colorFunction from 'color'
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { Text } from '../../components/display'
+import { useTheme } from '../../hooks'
+import { ReactionCountResource } from '../../types/resources/reaction'
+
+export const REACTION_EMOJIS: Record<ReactionCountResource['value'], string> = {
+  thumbs_up: '👍',
+  thumbs_down: '👎',
+  pray: '🙏',
+  laugh: '😂',
+  heart: '❤️',
+}
+
+export function MessageReaction({
+  reaction,
+  onPress,
+}: {
+  reaction: ReactionCountResource
+  onPress: () => void
+}) {
+  const styles = useReactionStyles(reaction)
+
+  return (
+    <PlatformPressable key={reaction.value} style={styles.reaction} onPress={onPress}>
+      <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
+      <Text style={styles.reactionText}>{reaction.count}</Text>
+    </PlatformPressable>
+  )
+}
+
+const useReactionStyles = ({ mine }: { mine: number }) => {
+  const { colors } = useTheme()
+  const activeBorderColor = colorFunction(colors.interaction).alpha(0.8).string()
+  const activeColor = colorFunction(colors.interaction).alpha(0.2).string()
+
+  return StyleSheet.create({
+    reaction: {
+      borderWidth: 1,
+      borderColor: mine ? activeBorderColor : colors.fillColorNeutral040,
+      backgroundColor: mine ? activeColor : colors.fillColorNeutral050Base,
+      borderRadius: 16,
+      paddingVertical: 2,
+      paddingHorizontal: 12,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
+    reactionEmoji: { fontSize: 12, paddingTop: 0 },
+    reactionText: { fontSize: 12, color: colors.textColorDefaultPrimary },
+    pressed: {
+      opacity: 0.5,
+    },
+  })
+}