@hero-design/rn-work-uikit 1.13.9 → 1.13.10

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @hero-design/rn-work-uikit
 
+## 1.13.10
+
+### Patch Changes
+
+- Updated dependencies [[`8a8a649b3d2ad1fa030be516afb94841ac4d7fa9`](https://github.com/Thinkei/hero-design/commit/8a8a649b3d2ad1fa030be516afb94841ac4d7fa9), [`850eafeaec709444144e6cbe3cc15d53653c2088`](https://github.com/Thinkei/hero-design/commit/850eafeaec709444144e6cbe3cc15d53653c2088), [`16e0cb317529452f5a10523c10b60f66fcba6ee4`](https://github.com/Thinkei/hero-design/commit/16e0cb317529452f5a10523c10b60f66fcba6ee4)]:
+  - @hero-design/rn@8.128.1
+
 ## 1.13.9
 
 ### Patch Changes

package/CLAUDE.md

@@ -28,7 +28,7 @@ Work-specific React Native component library extending `@hero-design/rn` with wo
 ## Commands
 
 ```bash
-yarn turbo run test --filter=@hero-design/rn-work-uikit -- -- ComponentName [--watch|--updateSnapshot]
+yarn turbo run test --filter=@hero-design/rn-work-uikit -- ComponentName [--watch|--updateSnapshot]
 yarn workspace @hero-design/rn-work-uikit lint
 yarn workspace @hero-design/rn-work-uikit type-check
 ```

package/es/index.js

@@ -5283,7 +5283,7 @@ var swagLightGlobalPalette = _objectSpread2(_objectSpread2({}, globalPalette$1),
 });
 
 var ehWorkBrandSystemPalette = {
-  primary: '#460078',
+  primary: '#7622d7',
   onPrimary: '#fdfbff',
   secondary: '#b382fd',
   onSecondary: palette$4.white,
@@ -5312,6 +5312,7 @@ var swagSystemPalette = _objectSpread2(_objectSpread2({}, ehWorkSystemPalette),
 
 var ehJobsSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), {}, {
   name: 'ehJobs',
+  primary: '#7622d7',
   secondary: '#40d1ff',
   onSecondary: '#460078',
   secondaryHighlightedSurface: '#ecfaff',
@@ -6684,19 +6685,19 @@ var getErrorTheme = function getErrorTheme(theme) {
 
 var getFABTheme = function getFABTheme(theme) {
   var colors = {
-    buttonBackground: theme.colors.overlayGlobalSurface,
-    buttonPressedBackground: theme.colors.overlayGlobalSurface,
-    buttonActiveBackground: theme.colors.overlayGlobalSurface,
+    buttonBackground: theme.colors.primary,
+    buttonPressedBackground: theme.colors.primary,
+    buttonActiveBackground: theme.colors.primary,
     icon: theme.colors.onDarkGlobalSurface,
-    actionItemBackground: theme.colors.overlayGlobalSurface,
-    actionItemPressedBackground: theme.colors.overlayGlobalSurface,
+    actionItemBackground: theme.colors.defaultGlobalSurface,
+    actionItemPressedBackground: theme.colors.defaultGlobalSurface,
     backdropBackground: theme.colors.black,
     titleText: theme.colors.onDarkGlobalSurface,
-    actionItemText: theme.colors.onDarkGlobalSurface
+    actionItemText: theme.colors.onDefaultGlobalSurface
   };
   var sizes = {
-    width: theme.sizes.xxxxxlarge,
-    height: theme.sizes.xxxxxlarge,
+    width: theme.sizes.xxxlarge,
+    height: theme.sizes.xxxlarge,
     iconContainerWidth: theme.sizes.large,
     iconContainerHeight: theme.sizes.large,
     fabPairHeight: theme.sizes.xxxlarge,
@@ -6704,11 +6705,11 @@ var getFABTheme = function getFABTheme(theme) {
   };
   var fonts = {
     actionItemText: theme.fonts.neutral.regular,
-    title: theme.fonts.neutral.semiBold
+    title: theme.fonts.neutral.regular
   };
   var fontSizes = {
     actionItemText: theme.fontSizes.large,
-    title: theme.fontSizes.large
+    title: theme.fontSizes.medium
   };
   var lineHeights = {
     actionItemText: theme.lineHeights.medium,
@@ -6725,7 +6726,7 @@ var getFABTheme = function getFABTheme(theme) {
     actionItemTextPaddingLeft: theme.space.xsmall,
     buttonMarginTop: theme.space.large,
     buttonMarginRight: theme.space.large,
-    containerPadding: theme.space.large - theme.space.xsmall,
+    containerPadding: theme.space.smallMedium,
     titleMarginHorizontal: theme.space.small,
     fabPairMarginRight: theme.space.small
   };
@@ -24856,21 +24857,14 @@ var StyledErrorButtonContainer = index$c(View)(function (_ref3) {
     paddingVertical: theme.__hd__.error.space.button.wrapperVerticalPadding
   };
 });
-var StyledErrorButtonPrimary = index$c(CompoundButton)(function (_ref4) {
+var StyledErrorButtonSecondary = index$c(CompoundButton)(function (_ref4) {
   var theme = _ref4.theme;
   return {
-    padding: theme.__hd__.error.space.button.padding
+    marginTop: theme.__hd__.error.space.button.margin
   };
 });
-var StyledErrorButtonSecondary = index$c(CompoundButton)(function (_ref5) {
+var StyledErrorImageContainer = index$c(View)(function (_ref5) {
   var theme = _ref5.theme;
-  return {
-    marginTop: theme.__hd__.error.space.button.margin,
-    padding: theme.__hd__.error.space.button.padding
-  };
-});
-var StyledErrorImageContainer = index$c(View)(function (_ref6) {
-  var theme = _ref6.theme;
   return {
     marginBottom: theme.__hd__.error.space.imageMarginBottom,
     width: theme.__hd__.error.sizes.image,
@@ -24878,8 +24872,8 @@ var StyledErrorImageContainer = index$c(View)(function (_ref6) {
     alignItems: 'center'
   };
 });
-var StyledErrorIconContainer = index$c(View)(function (_ref7) {
-  var theme = _ref7.theme;
+var StyledErrorIconContainer = index$c(View)(function (_ref6) {
+  var theme = _ref6.theme;
   return {
     marginBottom: theme.__hd__.error.space.imageMarginBottom,
     width: theme.__hd__.error.sizes.icon,
@@ -24887,8 +24881,8 @@ var StyledErrorIconContainer = index$c(View)(function (_ref7) {
     alignItems: 'center'
   };
 });
-var StyledErrorImage = index$c(Image)(function (_ref8) {
-  var theme = _ref8.theme;
+var StyledErrorImage = index$c(Image)(function (_ref7) {
+  var theme = _ref7.theme;
   return {
     marginBottom: theme.__hd__.error.space.imageMarginBottom,
     width: theme.__hd__.error.sizes.image,
@@ -24896,16 +24890,16 @@ var StyledErrorImage = index$c(Image)(function (_ref8) {
     resizeMode: 'contain'
   };
 });
-var StyledErrorTitle = index$c(Typography.Title)(function (_ref9) {
-  var theme = _ref9.theme;
+var StyledErrorTitle = index$c(Typography.Title)(function (_ref8) {
+  var theme = _ref8.theme;
   return {
     textAlign: 'center',
     marginBottom: theme.__hd__.error.space.titleMarginBottom,
     color: theme.__hd__.error.colors.title
   };
 });
-var StyledErrorDescription = index$c(Typography.Body)(function (_ref10) {
-  var theme = _ref10.theme;
+var StyledErrorDescription = index$c(Typography.Body)(function (_ref9) {
+  var theme = _ref9.theme;
   return {
     textAlign: 'center',
     color: theme.__hd__.error.colors.description
@@ -24968,7 +24962,7 @@ var ErrorPage = function ErrorPage(_ref2) {
     typeface: "playful"
   }, title), description && /*#__PURE__*/React__default.createElement(StyledErrorDescription, {
     typeface: "playful"
-  }, description)), showButtonContainer && /*#__PURE__*/React__default.createElement(StyledErrorButtonContainer, null, showCta && /*#__PURE__*/React__default.createElement(StyledErrorButtonPrimary, {
+  }, description)), showButtonContainer && /*#__PURE__*/React__default.createElement(StyledErrorButtonContainer, null, showCta && /*#__PURE__*/React__default.createElement(CompoundButton, {
     variant: "filled",
     text: ctaText,
     onPress: onCtaPress
@@ -25100,8 +25094,9 @@ var StyledIcon$3 = index$c(Icon)(function (_ref3) {
 var AnimatedTouchableHighlight = Animated.createAnimatedComponent(TouchableOpacity);
 var StyledFAB$2 = index$c(AnimatedTouchableHighlight)(function (_ref) {
   var theme = _ref.theme,
-    themeActive = _ref.themeActive;
-  return _objectSpread2({
+    themeActive = _ref.themeActive,
+    themeIconOnly = _ref.themeIconOnly;
+  return _objectSpread2(_objectSpread2({
     backgroundColor: themeActive ? theme.__hd__.fab.colors.buttonActiveBackground : theme.__hd__.fab.colors.buttonBackground,
     borderRadius: theme.radii.rounded,
     alignItems: 'center',
@@ -25110,7 +25105,9 @@ var StyledFAB$2 = index$c(AnimatedTouchableHighlight)(function (_ref) {
     padding: theme.__hd__.fab.space.containerPadding,
     flexDirection: 'row',
     height: theme.__hd__.fab.sizes.height
-  }, theme.__hd__.fab.shadows["default"]);
+  }, themeIconOnly && {
+    width: theme.__hd__.fab.sizes.width
+  }), theme.__hd__.fab.shadows["default"]);
 });
 var StyledFABIcon = index$c(Icon)(function (_ref2) {
   var theme = _ref2.theme;
@@ -25218,6 +25215,9 @@ if (Platform.OS === 'android') {
     UIManager.setLayoutAnimationEnabledExperimental(true);
   }
 }
+
+// Extends FABProps with internal-only props. Not part of the public API.
+
 var IconOnlyContent = function IconOnlyContent(_ref) {
   var icon = _ref.icon,
     animated = _ref.animated,
@@ -25238,12 +25238,15 @@ var IconOnlyContent = function IconOnlyContent(_ref) {
 };
 var IconWithTextContent = function IconWithTextContent(_ref2) {
   var icon = _ref2.icon,
-    title = _ref2.title;
+    title = _ref2.title,
+    titleStyle = _ref2.titleStyle;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledIconContainer$1, null, /*#__PURE__*/React__default.createElement(StyledFABIcon, {
     size: "xsmall",
     icon: icon,
     testID: "styled-fab-icon"
-  })), /*#__PURE__*/React__default.createElement(StyledFABText, null, title));
+  })), /*#__PURE__*/React__default.createElement(StyledFABText, {
+    style: titleStyle
+  }, title));
 };
 var animateWidth = function animateWidth() {
   LayoutAnimation.configureNext({
@@ -25254,7 +25257,10 @@ var animateWidth = function animateWidth() {
     }
   });
 };
-var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+
+// Full implementation — accepts InternalFABProps including titleStyle.
+// Exported as FABInternal for use by sibling HD components (e.g. FAB.Pair).
+var FABWithTitleStyle = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   var _StyleSheet$flatten, _StyleSheet$flatten2;
   var onPress = _ref3.onPress,
     title = _ref3.title,
@@ -25262,7 +25268,8 @@ var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     iconAnimated = _ref3.animated,
     testID = _ref3.testID,
     active = _ref3.active,
-    style = _ref3.style;
+    style = _ref3.style,
+    titleStyle = _ref3.titleStyle;
   var theme = useTheme();
   var _React$useState = React__default.useState({
       hideTitle: false,
@@ -25367,6 +25374,7 @@ var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     },
     activeOpacity: 0.8,
     onPress: onPress,
+    themeIconOnly: isIconOnly,
     style: [style, {
       bottom: displayState.hideButton ? -(marginBottom + theme.__hd__.fab.sizes.height * 2) : (_StyleSheet$flatten2 = StyleSheet$1.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.bottom,
       transform: [{
@@ -25392,9 +25400,19 @@ var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     icon: active ? 'add' : icon
   }) : /*#__PURE__*/React__default.createElement(IconWithTextContent, {
     icon: icon,
-    title: title
+    title: title,
+    titleStyle: titleStyle
   })));
 });
+FABWithTitleStyle.displayName = 'FAB';
+
+// Public export — clean FABProps, no internal props exposed.
+// Docgen reads this component and sees only FABProps.
+var FAB$1 = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(FABWithTitleStyle, _extends$1({}, props, {
+    ref: ref
+  }));
+});
 FAB$1.displayName = 'FAB';
 
 var StyledContainer$6 = index$c(View)({
@@ -25563,7 +25581,7 @@ var StyledFABPairWrapper = index$c(Box)({
   justifyContent: 'center',
   alignItems: 'center'
 });
-var StyledFAB = index$c(FAB$1)(function (_ref) {
+var StyledFAB = index$c(FABWithTitleStyle)(function (_ref) {
   var theme = _ref.theme,
     _ref$iconOnly = _ref.iconOnly,
     iconOnly = _ref$iconOnly === void 0 ? false : _ref$iconOnly,
@@ -25585,6 +25603,7 @@ var Pair = function Pair(_ref) {
     title = fabConfig.title,
     onPress = fabConfig.onPress,
     testID = fabConfig.testID;
+  var theme = useTheme();
   return /*#__PURE__*/React__default.createElement(StyledFABPairWrapper, props, /*#__PURE__*/React__default.createElement(StyledFAB, {
     icon: "cancel",
     onPress: onCancel,
@@ -25596,7 +25615,11 @@ var Pair = function Pair(_ref) {
     onPress: onPress,
     testID: testID,
     iconOnly: !title,
-    isLast: true
+    isLast: true,
+    titleStyle: {
+      fontSize: theme.fontSizes.medium,
+      fontFamily: theme.fonts.neutral.regular
+    }
   }));
 };
 
@@ -27862,16 +27885,9 @@ var StyledSuccessButtonContainer = index$c(View)(function (_ref8) {
     paddingVertical: theme.__hd__.success.space.button.wrapperVerticalPadding
   };
 });
-var StyledSuccessButtonPrimary = index$c(CompoundButton)(function (_ref9) {
+var StyledSuccessButtonSecondary = index$c(CompoundButton)(function (_ref9) {
   var theme = _ref9.theme;
   return {
-    padding: theme.__hd__.success.space.button.padding
-  };
-});
-var StyledSuccessButtonSecondary = index$c(CompoundButton)(function (_ref10) {
-  var theme = _ref10.theme;
-  return {
-    padding: theme.__hd__.success.space.button.padding,
     marginTop: theme.__hd__.success.space.button.secondaryCTAMarginTop
   };
 });
@@ -27932,7 +27948,7 @@ var SuccessPage = function SuccessPage(_ref2) {
   }), /*#__PURE__*/React__default.createElement(StyledSuccessTitle, {
     level: "h4",
     typeface: "playful"
-  }, title), typeof description === 'string' ? /*#__PURE__*/React__default.createElement(StyledSuccessDescription, null, description) : description), !!ctaText && /*#__PURE__*/React__default.createElement(StyledSuccessButtonContainer, null, /*#__PURE__*/React__default.createElement(StyledSuccessButtonPrimary, {
+  }, title), typeof description === 'string' ? /*#__PURE__*/React__default.createElement(StyledSuccessDescription, null, description) : description), !!ctaText && /*#__PURE__*/React__default.createElement(StyledSuccessButtonContainer, null, /*#__PURE__*/React__default.createElement(CompoundButton, {
     text: ctaText,
     onPress: onCtaPress
   }), !!showSecondaryButton && /*#__PURE__*/React__default.createElement(StyledSuccessButtonSecondary, {

package/lib/index.js

@@ -5313,7 +5313,7 @@ var swagLightGlobalPalette = _objectSpread2(_objectSpread2({}, globalPalette$1),
 });
 
 var ehWorkBrandSystemPalette = {
-  primary: '#460078',
+  primary: '#7622d7',
   onPrimary: '#fdfbff',
   secondary: '#b382fd',
   onSecondary: palette$4.white,
@@ -5342,6 +5342,7 @@ var swagSystemPalette = _objectSpread2(_objectSpread2({}, ehWorkSystemPalette),
 
 var ehJobsSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), {}, {
   name: 'ehJobs',
+  primary: '#7622d7',
   secondary: '#40d1ff',
   onSecondary: '#460078',
   secondaryHighlightedSurface: '#ecfaff',
@@ -6714,19 +6715,19 @@ var getErrorTheme = function getErrorTheme(theme) {
 
 var getFABTheme = function getFABTheme(theme) {
   var colors = {
-    buttonBackground: theme.colors.overlayGlobalSurface,
-    buttonPressedBackground: theme.colors.overlayGlobalSurface,
-    buttonActiveBackground: theme.colors.overlayGlobalSurface,
+    buttonBackground: theme.colors.primary,
+    buttonPressedBackground: theme.colors.primary,
+    buttonActiveBackground: theme.colors.primary,
     icon: theme.colors.onDarkGlobalSurface,
-    actionItemBackground: theme.colors.overlayGlobalSurface,
-    actionItemPressedBackground: theme.colors.overlayGlobalSurface,
+    actionItemBackground: theme.colors.defaultGlobalSurface,
+    actionItemPressedBackground: theme.colors.defaultGlobalSurface,
     backdropBackground: theme.colors.black,
     titleText: theme.colors.onDarkGlobalSurface,
-    actionItemText: theme.colors.onDarkGlobalSurface
+    actionItemText: theme.colors.onDefaultGlobalSurface
   };
   var sizes = {
-    width: theme.sizes.xxxxxlarge,
-    height: theme.sizes.xxxxxlarge,
+    width: theme.sizes.xxxlarge,
+    height: theme.sizes.xxxlarge,
     iconContainerWidth: theme.sizes.large,
     iconContainerHeight: theme.sizes.large,
     fabPairHeight: theme.sizes.xxxlarge,
@@ -6734,11 +6735,11 @@ var getFABTheme = function getFABTheme(theme) {
   };
   var fonts = {
     actionItemText: theme.fonts.neutral.regular,
-    title: theme.fonts.neutral.semiBold
+    title: theme.fonts.neutral.regular
   };
   var fontSizes = {
     actionItemText: theme.fontSizes.large,
-    title: theme.fontSizes.large
+    title: theme.fontSizes.medium
   };
   var lineHeights = {
     actionItemText: theme.lineHeights.medium,
@@ -6755,7 +6756,7 @@ var getFABTheme = function getFABTheme(theme) {
     actionItemTextPaddingLeft: theme.space.xsmall,
     buttonMarginTop: theme.space.large,
     buttonMarginRight: theme.space.large,
-    containerPadding: theme.space.large - theme.space.xsmall,
+    containerPadding: theme.space.smallMedium,
     titleMarginHorizontal: theme.space.small,
     fabPairMarginRight: theme.space.small
   };
@@ -24886,21 +24887,14 @@ var StyledErrorButtonContainer = index$c(reactNative.View)(function (_ref3) {
     paddingVertical: theme.__hd__.error.space.button.wrapperVerticalPadding
   };
 });
-var StyledErrorButtonPrimary = index$c(CompoundButton)(function (_ref4) {
+var StyledErrorButtonSecondary = index$c(CompoundButton)(function (_ref4) {
   var theme = _ref4.theme;
   return {
-    padding: theme.__hd__.error.space.button.padding
+    marginTop: theme.__hd__.error.space.button.margin
   };
 });
-var StyledErrorButtonSecondary = index$c(CompoundButton)(function (_ref5) {
+var StyledErrorImageContainer = index$c(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme;
-  return {
-    marginTop: theme.__hd__.error.space.button.margin,
-    padding: theme.__hd__.error.space.button.padding
-  };
-});
-var StyledErrorImageContainer = index$c(reactNative.View)(function (_ref6) {
-  var theme = _ref6.theme;
   return {
     marginBottom: theme.__hd__.error.space.imageMarginBottom,
     width: theme.__hd__.error.sizes.image,
@@ -24908,8 +24902,8 @@ var StyledErrorImageContainer = index$c(reactNative.View)(function (_ref6) {
     alignItems: 'center'
   };
 });
-var StyledErrorIconContainer = index$c(reactNative.View)(function (_ref7) {
-  var theme = _ref7.theme;
+var StyledErrorIconContainer = index$c(reactNative.View)(function (_ref6) {
+  var theme = _ref6.theme;
   return {
     marginBottom: theme.__hd__.error.space.imageMarginBottom,
     width: theme.__hd__.error.sizes.icon,
@@ -24917,8 +24911,8 @@ var StyledErrorIconContainer = index$c(reactNative.View)(function (_ref7) {
     alignItems: 'center'
   };
 });
-var StyledErrorImage = index$c(Image)(function (_ref8) {
-  var theme = _ref8.theme;
+var StyledErrorImage = index$c(Image)(function (_ref7) {
+  var theme = _ref7.theme;
   return {
     marginBottom: theme.__hd__.error.space.imageMarginBottom,
     width: theme.__hd__.error.sizes.image,
@@ -24926,16 +24920,16 @@ var StyledErrorImage = index$c(Image)(function (_ref8) {
     resizeMode: 'contain'
   };
 });
-var StyledErrorTitle = index$c(Typography.Title)(function (_ref9) {
-  var theme = _ref9.theme;
+var StyledErrorTitle = index$c(Typography.Title)(function (_ref8) {
+  var theme = _ref8.theme;
   return {
     textAlign: 'center',
     marginBottom: theme.__hd__.error.space.titleMarginBottom,
     color: theme.__hd__.error.colors.title
   };
 });
-var StyledErrorDescription = index$c(Typography.Body)(function (_ref10) {
-  var theme = _ref10.theme;
+var StyledErrorDescription = index$c(Typography.Body)(function (_ref9) {
+  var theme = _ref9.theme;
   return {
     textAlign: 'center',
     color: theme.__hd__.error.colors.description
@@ -24998,7 +24992,7 @@ var ErrorPage = function ErrorPage(_ref2) {
     typeface: "playful"
   }, title), description && /*#__PURE__*/React__namespace.default.createElement(StyledErrorDescription, {
     typeface: "playful"
-  }, description)), showButtonContainer && /*#__PURE__*/React__namespace.default.createElement(StyledErrorButtonContainer, null, showCta && /*#__PURE__*/React__namespace.default.createElement(StyledErrorButtonPrimary, {
+  }, description)), showButtonContainer && /*#__PURE__*/React__namespace.default.createElement(StyledErrorButtonContainer, null, showCta && /*#__PURE__*/React__namespace.default.createElement(CompoundButton, {
     variant: "filled",
     text: ctaText,
     onPress: onCtaPress
@@ -25130,8 +25124,9 @@ var StyledIcon$3 = index$c(Icon)(function (_ref3) {
 var AnimatedTouchableHighlight = reactNative.Animated.createAnimatedComponent(reactNative.TouchableOpacity);
 var StyledFAB$2 = index$c(AnimatedTouchableHighlight)(function (_ref) {
   var theme = _ref.theme,
-    themeActive = _ref.themeActive;
-  return _objectSpread2({
+    themeActive = _ref.themeActive,
+    themeIconOnly = _ref.themeIconOnly;
+  return _objectSpread2(_objectSpread2({
     backgroundColor: themeActive ? theme.__hd__.fab.colors.buttonActiveBackground : theme.__hd__.fab.colors.buttonBackground,
     borderRadius: theme.radii.rounded,
     alignItems: 'center',
@@ -25140,7 +25135,9 @@ var StyledFAB$2 = index$c(AnimatedTouchableHighlight)(function (_ref) {
     padding: theme.__hd__.fab.space.containerPadding,
     flexDirection: 'row',
     height: theme.__hd__.fab.sizes.height
-  }, theme.__hd__.fab.shadows["default"]);
+  }, themeIconOnly && {
+    width: theme.__hd__.fab.sizes.width
+  }), theme.__hd__.fab.shadows["default"]);
 });
 var StyledFABIcon = index$c(Icon)(function (_ref2) {
   var theme = _ref2.theme;
@@ -25248,6 +25245,9 @@ if (reactNative.Platform.OS === 'android') {
     reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
   }
 }
+
+// Extends FABProps with internal-only props. Not part of the public API.
+
 var IconOnlyContent = function IconOnlyContent(_ref) {
   var icon = _ref.icon,
     animated = _ref.animated,
@@ -25268,12 +25268,15 @@ var IconOnlyContent = function IconOnlyContent(_ref) {
 };
 var IconWithTextContent = function IconWithTextContent(_ref2) {
   var icon = _ref2.icon,
-    title = _ref2.title;
+    title = _ref2.title,
+    titleStyle = _ref2.titleStyle;
   return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(StyledIconContainer$1, null, /*#__PURE__*/React__namespace.default.createElement(StyledFABIcon, {
     size: "xsmall",
     icon: icon,
     testID: "styled-fab-icon"
-  })), /*#__PURE__*/React__namespace.default.createElement(StyledFABText, null, title));
+  })), /*#__PURE__*/React__namespace.default.createElement(StyledFABText, {
+    style: titleStyle
+  }, title));
 };
 var animateWidth = function animateWidth() {
   reactNative.LayoutAnimation.configureNext({
@@ -25284,7 +25287,10 @@ var animateWidth = function animateWidth() {
     }
   });
 };
-var FAB$1 = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+
+// Full implementation — accepts InternalFABProps including titleStyle.
+// Exported as FABInternal for use by sibling HD components (e.g. FAB.Pair).
+var FABWithTitleStyle = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   var _StyleSheet$flatten, _StyleSheet$flatten2;
   var onPress = _ref3.onPress,
     title = _ref3.title,
@@ -25292,7 +25298,8 @@ var FAB$1 = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     iconAnimated = _ref3.animated,
     testID = _ref3.testID,
     active = _ref3.active,
-    style = _ref3.style;
+    style = _ref3.style,
+    titleStyle = _ref3.titleStyle;
   var theme = useTheme();
   var _React$useState = React__namespace.default.useState({
       hideTitle: false,
@@ -25397,6 +25404,7 @@ var FAB$1 = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     },
     activeOpacity: 0.8,
     onPress: onPress,
+    themeIconOnly: isIconOnly,
     style: [style, {
       bottom: displayState.hideButton ? -(marginBottom + theme.__hd__.fab.sizes.height * 2) : (_StyleSheet$flatten2 = reactNative.StyleSheet.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.bottom,
       transform: [{
@@ -25422,9 +25430,19 @@ var FAB$1 = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     icon: active ? 'add' : icon
   }) : /*#__PURE__*/React__namespace.default.createElement(IconWithTextContent, {
     icon: icon,
-    title: title
+    title: title,
+    titleStyle: titleStyle
   })));
 });
+FABWithTitleStyle.displayName = 'FAB';
+
+// Public export — clean FABProps, no internal props exposed.
+// Docgen reads this component and sees only FABProps.
+var FAB$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__namespace.default.createElement(FABWithTitleStyle, _extends$1({}, props, {
+    ref: ref
+  }));
+});
 FAB$1.displayName = 'FAB';
 
 var StyledContainer$6 = index$c(reactNative.View)({
@@ -25593,7 +25611,7 @@ var StyledFABPairWrapper = index$c(Box)({
   justifyContent: 'center',
   alignItems: 'center'
 });
-var StyledFAB = index$c(FAB$1)(function (_ref) {
+var StyledFAB = index$c(FABWithTitleStyle)(function (_ref) {
   var theme = _ref.theme,
     _ref$iconOnly = _ref.iconOnly,
     iconOnly = _ref$iconOnly === void 0 ? false : _ref$iconOnly,
@@ -25615,6 +25633,7 @@ var Pair = function Pair(_ref) {
     title = fabConfig.title,
     onPress = fabConfig.onPress,
     testID = fabConfig.testID;
+  var theme = useTheme();
   return /*#__PURE__*/React__namespace.default.createElement(StyledFABPairWrapper, props, /*#__PURE__*/React__namespace.default.createElement(StyledFAB, {
     icon: "cancel",
     onPress: onCancel,
@@ -25626,7 +25645,11 @@ var Pair = function Pair(_ref) {
     onPress: onPress,
     testID: testID,
     iconOnly: !title,
-    isLast: true
+    isLast: true,
+    titleStyle: {
+      fontSize: theme.fontSizes.medium,
+      fontFamily: theme.fonts.neutral.regular
+    }
   }));
 };
 
@@ -27892,16 +27915,9 @@ var StyledSuccessButtonContainer = index$c(reactNative.View)(function (_ref8) {
     paddingVertical: theme.__hd__.success.space.button.wrapperVerticalPadding
   };
 });
-var StyledSuccessButtonPrimary = index$c(CompoundButton)(function (_ref9) {
+var StyledSuccessButtonSecondary = index$c(CompoundButton)(function (_ref9) {
   var theme = _ref9.theme;
   return {
-    padding: theme.__hd__.success.space.button.padding
-  };
-});
-var StyledSuccessButtonSecondary = index$c(CompoundButton)(function (_ref10) {
-  var theme = _ref10.theme;
-  return {
-    padding: theme.__hd__.success.space.button.padding,
     marginTop: theme.__hd__.success.space.button.secondaryCTAMarginTop
   };
 });
@@ -27962,7 +27978,7 @@ var SuccessPage = function SuccessPage(_ref2) {
   }), /*#__PURE__*/React__namespace.default.createElement(StyledSuccessTitle, {
     level: "h4",
     typeface: "playful"
-  }, title), typeof description === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledSuccessDescription, null, description) : description), !!ctaText && /*#__PURE__*/React__namespace.default.createElement(StyledSuccessButtonContainer, null, /*#__PURE__*/React__namespace.default.createElement(StyledSuccessButtonPrimary, {
+  }, title), typeof description === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledSuccessDescription, null, description) : description), !!ctaText && /*#__PURE__*/React__namespace.default.createElement(StyledSuccessButtonContainer, null, /*#__PURE__*/React__namespace.default.createElement(CompoundButton, {
     text: ctaText,
     onPress: onCtaPress
   }), !!showSecondaryButton && /*#__PURE__*/React__namespace.default.createElement(StyledSuccessButtonSecondary, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.13.9",
+  "version": "1.13.10",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "8.128.0",
+    "@hero-design/rn": "8.128.1",
     "hero-editor": "^1.17.0"
   },
   "peerDependencies": {