@hero-design/rn 8.91.0 → 8.91.3

package/lib/index.js

@@ -2014,10 +2014,10 @@ var swagDarkSystemPalette = _objectSpread2(_objectSpread2(_objectSpread2({}, glo
 
 var swagLightGlobalPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), {}, {
   onDefaultGlobalSurface: palette$3.offBlack,
-  mutedOnDefaultGlobalSurface: palette$3.offBlackLight30,
-  inactiveOnDefaultGlobalSurface: palette$3.offBlackLight50,
+  mutedOnDefaultGlobalSurface: '#4d6265',
+  inactiveOnDefaultGlobalSurface: '#808f91',
   primaryOutline: palette$3.offBlack,
-  inactiveOutline: palette$3.offBlackLight50
+  inactiveOutline: '#808f91'
 });
 
 var swagBrandSystemPallete = {
@@ -2033,9 +2033,12 @@ var swagBrandSystemPallete = {
   decorativeSecondary: '#fdfbff',
   decorativeSecondarySurface: '#f0e6ff'
 };
-var swagSystemPalette = _objectSpread2(_objectSpread2({}, swagLightGlobalPalette), swagBrandSystemPallete);
+var swagSystemPalette = _objectSpread2(_objectSpread2(_objectSpread2({}, swagLightGlobalPalette), swagBrandSystemPallete), {}, {
+  name: 'swagLight'
+});
 
 var swagLightJobsSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), {}, {
+  name: 'swagLightJobs',
   secondary: '#40d1ff',
   onSecondary: '#460078',
   secondaryHighlightedSurface: '#ecfaff',
@@ -2152,7 +2155,8 @@ var ehWorkDarkSystemPalette = {
   decorativeSecondary: '#280541',
   decorativeSecondarySurface: '#4c1d95',
   // Theme Mode
-  themeMode: 'dark'
+  themeMode: 'dark',
+  name: 'ehWorkDark'
 };
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
@@ -2317,19 +2321,116 @@ var getRadii = function getRadii(baseRadius) {
   };
 };
 
-var getShadows = function getShadows(systemPalette) {
-  return {
-    "default": {
-      shadowOffset: {
-        width: 0,
-        height: 2
-      },
-      shadowColor: systemPalette.primaryOutline,
-      shadowOpacity: 0.12,
-      shadowRadius: 4,
-      elevation: 3
-    }
-  };
+var swagLightShadowPalette = {
+  "default": {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: swagSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.12,
+    shadowRadius: 2,
+    elevation: 6
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10
+  }
+};
+
+var swagLightJobsShadowPalette = {
+  "default": {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: swagLightJobsSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.12,
+    shadowRadius: 2,
+    elevation: 6
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10
+  }
+};
+
+var ehWorkDarkShadowPalette = {
+  "default": {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: ehWorkDarkSystemPalette.primaryOutline,
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 3
+  },
+  cardDrawer: {
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.56,
+    shadowRadius: 2,
+    elevation: 6
+  },
+  tabBar: {
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.24,
+    shadowRadius: 6,
+    elevation: 10
+  }
+};
+
+var getShadows = function getShadows(palette) {
+  switch (palette.name) {
+    case 'swagLight':
+      return swagLightShadowPalette;
+    case 'swagLightJobs':
+      return swagLightJobsShadowPalette;
+    case 'ehWorkDark':
+      return ehWorkDarkShadowPalette;
+    default:
+      return swagLightShadowPalette;
+  }
 };
 
 var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
@@ -2415,7 +2516,7 @@ var getAlertTheme = function getAlertTheme(theme) {
 
 var getAttachmentTheme = function getAttachmentTheme(theme) {
   var colors = {
-    highlightedBackground: theme.colors.highlightedSurface
+    highlightedBackground: theme.colors.decorativeSecondarySurface
   };
   var sizes = {
     imageHeight: theme.sizes.xxxlarge,
@@ -2836,8 +2937,15 @@ var getCheckboxTheme = function getCheckboxTheme(theme) {
   var colors = {
     borders: {
       "default": theme.colors.primaryOutline,
+      checked: theme.colors.primaryOutline,
       disabled: theme.colors.disabledOutline,
       readonly: theme.colors.inactiveOutline
+    },
+    checkboxBorder: {
+      "default": theme.colors.primaryOutline,
+      checked: theme.colors.primary,
+      disabled: theme.colors.disabledOutline,
+      readonly: theme.colors.mutedOnDefaultGlobalSurface
     }
   };
   var space = {
@@ -3567,7 +3675,7 @@ var getSuccessTheme = function getSuccessTheme(theme) {
   var colors = {
     title: theme.colors.onDefaultGlobalSurface,
     description: theme.colors.mutedOnDefaultGlobalSurface,
-    fullScreenBackground: theme.colors.decorativePrimarySurface,
+    fullScreenBackground: theme.colors.defaultGlobalSurface,
     inPageBackground: theme.colors.neutralGlobalSurface
   };
   var fontSizes = {
@@ -3610,14 +3718,14 @@ var getSwipeableTheme = function getSwipeableTheme(theme) {
 var getSwitchTheme = function getSwitchTheme(theme) {
   var colors = {
     backgroundColors: {
-      checked: theme.colors.primary,
+      checked: theme.colors.pressedSurface,
       unchecked: theme.colors.inactiveOnDefaultGlobalSurface,
-      'disabled-checked': theme.colors.highlightedSurface,
-      'disabled-unchecked': theme.colors.mutedOnDefaultGlobalSurface
+      'disabled-checked': theme.colors.inactiveOnDefaultGlobalSurface,
+      'disabled-unchecked': theme.colors.inactiveOnDefaultGlobalSurface
     },
-    thumb: theme.colors.onDarkGlobalSurface,
+    thumb: theme.colors.white,
     selector: {
-      background: theme.colors.defaultGlobalSurface,
+      background: theme.colors.neutralGlobalSurface,
       textBackground: theme.colors.decorativePrimarySurface
     }
   };
@@ -3773,7 +3881,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
       readonly: theme.colors.inactiveOnDefaultGlobalSurface,
       filled: theme.colors.onDefaultGlobalSurface
-    }
+    },
+    placeholder: theme.colors.mutedOnDefaultGlobalSurface
   };
   var space = {
     containerPadding: theme.space.medium,
@@ -14380,7 +14489,7 @@ var StyledCheckbox = index$a(reactNative.View)(function (_ref4) {
     flex: 1,
     borderRadius: theme.__hd__.checkbox.radii.icon,
     borderWidth: theme.__hd__.checkbox.borderWidths.icon,
-    borderColor: theme.__hd__.checkbox.colors.borders[themeState]
+    borderColor: theme.__hd__.checkbox.colors.checkboxBorder[themeState]
   };
 });
 var StyledCheckMark = index$a(Icon)(function (_ref5) {
@@ -14389,19 +14498,23 @@ var StyledCheckMark = index$a(Icon)(function (_ref5) {
   return {
     position: 'absolute',
     top: theme.__hd__.checkbox.space.iconTop,
-    color: theme.__hd__.checkbox.colors.borders[themeState]
+    color: theme.__hd__.checkbox.colors.checkboxBorder[themeState]
   };
 });
 
 var getThemeState = function getThemeState(_ref) {
   var disabled = _ref.disabled,
-    readonly = _ref.readonly;
+    readonly = _ref.readonly,
+    checked = _ref.checked;
   if (disabled) {
     return 'disabled';
   }
   if (readonly) {
     return 'readonly';
   }
+  if (checked) {
+    return 'checked';
+  }
   return 'default';
 };
 var Checkbox = function Checkbox(_ref2) {
@@ -14419,7 +14532,8 @@ var Checkbox = function Checkbox(_ref2) {
   useDeprecation("Checkbox's withBorder prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.", withBorder === true);
   var themeState = getThemeState({
     disabled: disabled,
-    readonly: readonly
+    readonly: readonly,
+    checked: checked
   });
   return /*#__PURE__*/React__namespace.default.createElement(StyledWrapper$8, {
     onPress: onPress,
@@ -14612,11 +14726,13 @@ var renderInput$1 = function renderInput(_ref3) {
   var variant = _ref3.variant,
     nativeInputProps = _ref3.nativeInputProps,
     renderInputValue = _ref3.renderInputValue,
-    ref = _ref3.ref;
+    ref = _ref3.ref,
+    theme = _ref3.theme;
   return renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__namespace.default.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
     themeVariant: variant,
     multiline: variant === 'textarea' || nativeInputProps.multiline,
-    ref: ref
+    ref: ref,
+    placeholderTextColor: theme.__hd__.textInput.colors.placeholder
   }));
 };
 var renderSuffix$1 = function renderSuffix(_ref4) {
@@ -14871,13 +14987,14 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     },
     themeState: state,
     testID: "input-label-asterisk"
-  }, "*"), label)), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
+  }, "*"), /*#__PURE__*/React__namespace.default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
     variant: variant,
     nativeInputProps: nativeInputProps,
     renderInputValue: renderInputValue,
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;
-    }
+    },
+    theme: theme
   })), renderSuffix$1({
     state: state,
     loading: loading,
@@ -19487,7 +19604,8 @@ var StyledWrapper$2 = index$a(reactNative.View)(function (_ref) {
     borderRadius: theme.__hd__["switch"].radii.rounded,
     backgroundColor: theme.__hd__["switch"].colors.backgroundColors[themeVariant],
     display: 'flex',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    opacity: themeVariant.includes('disabled') ? 0.4 : 1
   };
 });
 var StyledKnot = index$a(reactNative.Animated.View)(function (_ref2) {
@@ -39842,7 +39960,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
       backgroundColor: theme.__hd__.textInput.colors.labelBackground
     },
     themeState: state
-  }, "*"), label)), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputContainer, {
+  }, "*"), /*#__PURE__*/React__namespace.default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputContainer, {
     onLayout: onLayout
   }, /*#__PURE__*/React__namespace.default.createElement(StyledBorderBackDrop, {
     themeState: state,
@@ -40237,6 +40355,7 @@ var SearchOneLine = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isFocused = _React$useState2[0],
     setIsFocused = _React$useState2[1];
+  var theme = useTheme();
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var state = getState({
@@ -40321,7 +40440,8 @@ var SearchOneLine = /*#__PURE__*/React.forwardRef(function (props, ref) {
       maxLength: maxLength,
       value: value,
       defaultValue: defaultValue,
-      placeholder: placeholder
+      placeholder: placeholder,
+      placeholderTextColor: theme.__hd__.textInput.colors.placeholder
     }),
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.91.0",
+  "version": "8.91.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/AnimatedScroller/__tests__/__snapshots__/ScrollablesWithFAB.spec.tsx.snap

@@ -815,7 +815,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
             "marginTop": 24,
             "opacity": 1,
             "padding": 20,
-            "shadowColor": "#001f23",
+            "shadowColor": "#121214",
             "shadowOffset": {
               "height": 2,
               "width": 0,
@@ -1727,7 +1727,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
         "justifyContent": "center",
         "opacity": 1,
         "padding": 20,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -1999,7 +1999,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
             "marginTop": 24,
             "opacity": 1,
             "padding": 20,
-            "shadowColor": "#001f23",
+            "shadowColor": "#121214",
             "shadowOffset": {
               "height": 2,
               "width": 0,
@@ -2251,7 +2251,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
         "justifyContent": "center",
         "opacity": 1,
         "padding": 20,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -2830,7 +2830,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
             "marginTop": 24,
             "opacity": 1,
             "padding": 20,
-            "shadowColor": "#001f23",
+            "shadowColor": "#121214",
             "shadowOffset": {
               "height": 2,
               "width": 0,
@@ -3389,7 +3389,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
         "justifyContent": "center",
         "opacity": 1,
         "padding": 20,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,

package/src/components/Checkbox/StyledCheckbox.tsx

@@ -3,7 +3,7 @@ import { TouchableOpacity, View } from 'react-native';
 import HeroIcon from '../Icon';
 import Typography from '../Typography';
 
-type CheckboxThemeState = 'default' | 'disabled' | 'readonly';
+type CheckboxThemeState = 'default' | 'checked' | 'disabled' | 'readonly';
 
 export const StyledWrapper = styled(TouchableOpacity)<{
   themeState: CheckboxThemeState;
@@ -32,7 +32,7 @@ export const StyledCheckbox = styled(View)<{
   flex: 1,
   borderRadius: theme.__hd__.checkbox.radii.icon,
   borderWidth: theme.__hd__.checkbox.borderWidths.icon,
-  borderColor: theme.__hd__.checkbox.colors.borders[themeState],
+  borderColor: theme.__hd__.checkbox.colors.checkboxBorder[themeState],
 }));
 
 export const StyledCheckMark = styled(HeroIcon)<{
@@ -40,5 +40,5 @@ export const StyledCheckMark = styled(HeroIcon)<{
 }>(({ theme, themeState }) => ({
   position: 'absolute',
   top: theme.__hd__.checkbox.space.iconTop,
-  color: theme.__hd__.checkbox.colors.borders[themeState],
+  color: theme.__hd__.checkbox.colors.checkboxBorder[themeState],
 }));

package/src/components/Checkbox/__tests__/__snapshots__/StyledCheckbox.spec.tsx.snap

@@ -57,7 +57,7 @@ exports[`StyledCheckbox renders correctly when disabled is false and readonly is
     style={
       [
         {
-          "borderColor": "#808f91",
+          "borderColor": "#4d6265",
           "borderRadius": 4,
           "borderWidth": 2,
           "flex": 1,

package/src/components/Checkbox/__tests__/__snapshots__/index.spec.tsx.snap

@@ -167,7 +167,7 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
             },
             [
               {
-                "color": "#001f23",
+                "color": "#401960",
                 "position": "absolute",
                 "top": 0,
               },
@@ -183,7 +183,7 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
         style={
           [
             {
-              "borderColor": "#001f23",
+              "borderColor": "#401960",
               "borderRadius": 4,
               "borderWidth": 2,
               "flex": 1,
@@ -191,7 +191,7 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
             undefined,
           ]
         }
-        themeState="default"
+        themeState="checked"
       />
     </View>
   </View>
@@ -431,7 +431,7 @@ exports[`Checkbox renders correctly when disabled is false and readonly is true
         style={
           [
             {
-              "borderColor": "#808f91",
+              "borderColor": "#4d6265",
               "borderRadius": 4,
               "borderWidth": 2,
               "flex": 1,

package/src/components/Checkbox/__tests__/index.spec.tsx

@@ -6,15 +6,19 @@ import Checkbox, { getThemeState } from '..';
 
 describe('getThemeState', () => {
   it.each`
-    disabled | readonly | expected
-    ${false} | ${false} | ${'default'}
-    ${false} | ${true}  | ${'readonly'}
-    ${true}  | ${false} | ${'disabled'}
-    ${true}  | ${true}  | ${'disabled'}
+    disabled | readonly | checked  | expected
+    ${false} | ${false} | ${false} | ${'default'}
+    ${false} | ${false} | ${true}  | ${'checked'}
+    ${false} | ${true}  | ${false} | ${'readonly'}
+    ${false} | ${true}  | ${true}  | ${'readonly'}
+    ${true}  | ${false} | ${false} | ${'disabled'}
+    ${true}  | ${false} | ${true}  | ${'disabled'}
+    ${true}  | ${true}  | ${false} | ${'disabled'}
+    ${true}  | ${true}  | ${true}  | ${'disabled'}
   `(
     `should return correctly if disabled is $disabled and readonly is $readonly`,
-    ({ disabled, readonly, expected }) => {
-      expect(getThemeState({ disabled, readonly })).toBe(expected);
+    ({ disabled, readonly, checked, expected }) => {
+      expect(getThemeState({ disabled, readonly, checked })).toBe(expected);
     }
   );
 });

package/src/components/Checkbox/index.tsx

@@ -48,9 +48,14 @@ export interface CheckboxProps {
 type getStateType = {
   disabled: boolean;
   readonly: boolean;
+  checked?: boolean;
 };
 
-export const getThemeState = ({ disabled, readonly }: getStateType) => {
+export const getThemeState = ({
+  disabled,
+  readonly,
+  checked,
+}: getStateType) => {
   if (disabled) {
     return 'disabled';
   }
@@ -59,6 +64,10 @@ export const getThemeState = ({ disabled, readonly }: getStateType) => {
     return 'readonly';
   }
 
+  if (checked) {
+    return 'checked';
+  }
+
   return 'default';
 };
 
@@ -77,7 +86,7 @@ const Checkbox = ({
     withBorder === true
   );
 
-  const themeState = getThemeState({ disabled, readonly });
+  const themeState = getThemeState({ disabled, readonly, checked });
 
   return (
     <StyledWrapper

package/src/components/Chip/__tests__/__snapshots__/index.spec.tsx.snap

@@ -369,7 +369,7 @@ exports[`Chip renders correctly with custom icon 1`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -505,7 +505,7 @@ exports[`Chip renders correctly with custom icon 2`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -867,7 +867,7 @@ exports[`Chip renders correctly with variant compact and selected false 1`] = `
         "opacity": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -971,7 +971,7 @@ exports[`Chip renders correctly with variant compact and selected true 1`] = `
         "opacity": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -1301,7 +1301,7 @@ exports[`Chip renders correctly with variant filled and selected false 1`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -1405,7 +1405,7 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -1509,7 +1509,7 @@ exports[`Chip renders correctly with variant filter and selected false 1`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -1613,7 +1613,7 @@ exports[`Chip renders correctly with variant filter and selected true 1`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,