@rpg-engine/long-bow 0.8.11 → 0.8.13

package/dist/utils/colorUtils.d.ts

@@ -0,0 +1 @@
+export declare const toUppercaseHexColor: (color: string | undefined) => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.11",
+  "version": "0.8.13",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/shared/SpriteFromAtlas.tsx

@@ -1,6 +1,7 @@
 import { GRID_HEIGHT, GRID_WIDTH } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
+import { toUppercaseHexColor } from '../../utils/colorUtils';
 
 interface IProps {
   atlasJSON: any;
@@ -51,6 +52,8 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
     return null;
   }
 
+  const normalizedTintColor = toUppercaseHexColor(tintColor);
+
   return (
     <Container
       width={width}
@@ -69,7 +72,7 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
         style={imgStyle}
         centered={centered}
         borderRadius={borderRadius}
-        tintColor={tintColor}
+        tintColor={normalizedTintColor}
       />
     </Container>
   );

package/src/index.tsx

@@ -18,6 +18,7 @@ export * from './components/Friends/FriendList';
 export * from './components/HistoryDialog';
 export * from './components/ImageCarousel/ImageCarousel';
 export * from './components/ImageCarousel/SimpleImageCarousel';
+export * from './components/InformationCenter/InformationCenter';
 export * from './components/Input';
 export * from './components/InternalTabs/InternalTabs';
 export { ErrorBoundary } from './components/Item/Inventory/ErrorBoundary';

package/src/utils/colorUtils.ts

@@ -0,0 +1,11 @@
+export const toUppercaseHexColor = (
+  color: string | undefined
+): string | undefined => {
+  if (!color) return undefined;
+
+  // Check if it's a valid hex color
+  const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+  if (!hexRegex.test(color)) return color;
+
+  return color.toUpperCase();
+};