@hero-design/rn 8.72.0 → 8.73.1

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -384,6 +384,7 @@ exports[`theme returns correct theme object 1`] = `
     "chip": {
       "borderWidths": {
         "icon": 2,
+        "outlinedDefaultBorder": 1,
         "wrapper": 1,
       },
       "colors": {
@@ -412,15 +413,10 @@ exports[`theme returns correct theme object 1`] = `
           "shadowRadius": 4,
         },
       },
-      "sizes": {
-        "outlinedDefaultBorder": 1,
-        "outlinedSelectedBorder": 2,
-      },
       "space": {
         "compactWrapperHorizontalPadding": 8,
         "compactWrapperVerticalPadding": 4,
         "iconWrapperHorizontalMargin": 8,
-        "outlinedSelectedMarginTop": -2,
         "wrapperHorizontalPadding": 12,
         "wrapperVerticalPadding": 8,
       },
@@ -664,6 +660,43 @@ exports[`theme returns correct theme object 1`] = `
         "leadingStatus": 8,
       },
     },
+    "mapPin": {
+      "borderWidths": {
+        "default": 4,
+      },
+      "colors": {
+        "background": "#ffffff",
+        "badge": "#795e90",
+        "border": {
+          "applied": "#795e90",
+          "idle": "#ffffff",
+          "selected": "#795e90",
+        },
+      },
+      "fontSizes": {
+        "icon": 42,
+      },
+      "radii": {
+        "default": 12,
+      },
+      "shadows": {
+        "color": "#001f23",
+        "elevation": 3,
+        "offset": {
+          "height": 2,
+          "width": 0,
+        },
+        "opacity": 0.12,
+        "radius": 4,
+      },
+      "sizes": {
+        "default": 42,
+      },
+      "space": {
+        "iconRight": -8,
+        "iconTop": -8,
+      },
+    },
     "pageControl": {
       "colors": {
         "paginatorBackgroundColor": "#401960",

package/src/theme/components/chip.ts

@@ -19,12 +19,6 @@ const getChipTheme = (theme: GlobalTheme) => {
     compactWrapperHorizontalPadding: theme.space.small,
     compactWrapperVerticalPadding: theme.space.xsmall,
     iconWrapperHorizontalMargin: theme.space.small,
-    outlinedSelectedMarginTop: -theme.space.xxsmall,
-  };
-
-  const sizes = {
-    outlinedDefaultBorder: theme.borderWidths.base,
-    outlinedSelectedBorder: theme.borderWidths.medium,
   };
 
   const radii = {
@@ -34,6 +28,7 @@ const getChipTheme = (theme: GlobalTheme) => {
   const borderWidths = {
     wrapper: theme.borderWidths.base,
     icon: theme.borderWidths.medium,
+    outlinedDefaultBorder: theme.borderWidths.base,
   };
 
   const shadows = {
@@ -43,7 +38,6 @@ const getChipTheme = (theme: GlobalTheme) => {
   return {
     colors,
     space,
-    sizes,
     radii,
     borderWidths,
     shadows,

package/src/theme/components/mapPin.ts

@@ -0,0 +1,46 @@
+import type { GlobalTheme } from '../global';
+
+const getMapPinTheme = (theme: GlobalTheme) => {
+  const sizes = {
+    default: 42,
+  };
+
+  const fontSizes = {
+    icon: 42,
+  };
+
+  const borderWidths = {
+    default: theme.borderWidths.medium * 2,
+  };
+
+  const colors = {
+    border: {
+      idle: theme.colors.defaultGlobalSurface,
+      selected: theme.colors.secondary,
+      applied: theme.colors.secondary,
+    },
+    badge: theme.colors.secondary,
+    background: theme.colors.defaultGlobalSurface,
+  };
+
+  const radii = {
+    default: theme.radii.large,
+  };
+
+  const space = {
+    iconTop: -theme.space.small,
+    iconRight: -theme.space.small,
+  };
+
+  const shadows = {
+    offset: theme.shadows.default.shadowOffset,
+    opacity: theme.shadows.default.shadowOpacity,
+    radius: theme.shadows.default.shadowRadius,
+    elevation: theme.shadows.default.elevation,
+    color: theme.shadows.default.shadowColor,
+  };
+
+  return { sizes, colors, borderWidths, radii, shadows, space, fontSizes };
+};
+
+export default getMapPinTheme;

package/src/theme/getTheme.ts

@@ -49,6 +49,7 @@ import getTypographyTheme from './components/typography';
 
 import type { GlobalTheme, Scale, SystemPalette } from './global';
 import getSearchTheme from './components/search';
+import getMapPinTheme from './components/mapPin';
 
 type Theme = GlobalTheme & {
   __hd__: {
@@ -76,6 +77,7 @@ type Theme = GlobalTheme & {
     icon: ReturnType<typeof getIconTheme>;
     image: ReturnType<typeof getImageTheme>;
     list: ReturnType<typeof getListTheme>;
+    mapPin: ReturnType<typeof getMapPinTheme>;
     pageControl: ReturnType<typeof getPageControlTheme>;
     pinInput: PinInputThemeType;
     progress: ReturnType<typeof getProgressTheme>;
@@ -134,6 +136,7 @@ const getTheme = (
       icon: getIconTheme(globalTheme),
       image: getImageTheme(globalTheme),
       list: getListTheme(globalTheme),
+      mapPin: getMapPinTheme(globalTheme),
       pageControl: getPageControlTheme(globalTheme),
       pinInput: getPinInputTheme(globalTheme),
       progress: getProgressTheme(globalTheme),