@utilitywarehouse/hearth-react-native 0.27.0 → 0.27.1

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.27.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.27.1 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.27.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.27.1 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -58,15 +58,15 @@
 
 ✖ 25 problems (0 errors, 25 warnings)
 
-Rule                              | Time (ms) | Relative
-:---------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars |  1531.354 |    62.0%
-react-hooks/exhaustive-deps       |   115.862 |     4.7%
-no-global-assign                  |    82.745 |     3.3%
-react-hooks/rules-of-hooks        |    81.422 |     3.3%
-@typescript-eslint/ban-ts-comment |    54.976 |     2.2%
-no-misleading-character-class     |    43.812 |     1.8%
-no-unexpected-multiline           |    39.804 |     1.6%
-no-fallthrough                    |    33.437 |     1.4%
-no-regex-spaces                   |    28.539 |     1.2%
-no-shadow-restricted-names        |    25.451 |     1.0%
+Rule                                      | Time (ms) | Relative
+:-----------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars         |  1499.293 |    61.6%
+react-hooks/exhaustive-deps               |   127.430 |     5.2%
+react-hooks/rules-of-hooks                |    84.158 |     3.5%
+no-global-assign                          |    65.981 |     2.7%
+no-unexpected-multiline                   |    44.926 |     1.8%
+@typescript-eslint/ban-ts-comment         |    39.212 |     1.6%
+@typescript-eslint/triple-slash-reference |    36.913 |     1.5%
+no-misleading-character-class             |    36.268 |     1.5%
+no-useless-escape                         |    28.431 |     1.2%
+@typescript-eslint/no-unused-expressions  |    25.564 |     1.1%

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.27.1
+
+### Patch Changes
+
+- [#990](https://github.com/utilitywarehouse/hearth/pull/990) [`958e0e1`](https://github.com/utilitywarehouse/hearth/commit/958e0e1a9d5451d1e11fecadc69ae3c5ad9d42ca) Thanks [@declanelcocks](https://github.com/declanelcocks)! - 🐛 [FIX]: Fix `Modal` layout when `inNavModal` and `stickyFooter={false}`.
+
+  Corrects the container flex style for `inNavModal` modals with a non-sticky footer, where the UX was not great when scrolling.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes required.
+
+- [#992](https://github.com/utilitywarehouse/hearth/pull/992) [`2560b3d`](https://github.com/utilitywarehouse/hearth/commit/2560b3dcba7ed4981fad585628f96afd07d8de4f) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Add optional leading `icon` support to `SegmentedControlOption`.
+
+  This adds an optional `icon` prop to `SegmentedControlOption`, allowing icons to be displayed before option labels in segmented controls.
+
+  Docs and stories were updated to include icon usage examples.
+
+  **Components affected**:
+  - `SegmentedControlOption`
+
+  **Developer changes**:
+
+  No changes required for existing usage.
+
+  To use the new optional icon prop:
+
+  ```tsx
+  import { SegmentedControl, SegmentedControlOption } from '@utilitywarehouse/hearth-react-native';
+  import { ElectricitySmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+  <SegmentedControl defaultValue="energy">
+    <SegmentedControlOption value="energy" icon={ElectricitySmallIcon}>
+      Energy
+    </SegmentedControlOption>
+    <SegmentedControlOption value="broadband">Broadband</SegmentedControlOption>
+  </SegmentedControl>;
+  ```
+
 ## 0.27.0
 
 ### Minor Changes

package/build/components/Modal/Modal.js

@@ -120,7 +120,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     });
     const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: isBrandBackground && inNavModal, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: isBrandBackground && inNavModal, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] }));
     const InNavModalContainer = scrollable ? ScrollView : View;
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal && (_jsxs(InNavModalContainer, { style: { flexGrow: stickyFooter ? 1 : 0 }, children: [children, !stickyFooter ? _jsx(View, { style: styles.inNavModalFooterContainer, children: footer }) : null] })), !inNavModal && children, ((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons ? footer : null] })) }));
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal && (_jsxs(InNavModalContainer, { style: { flex: stickyFooter ? 1 : 0 }, children: [children, !stickyFooter ? _jsx(View, { style: styles.inNavModalFooterContainer, children: footer }) : null] })), !inNavModal && children, ((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons ? footer : null] })) }));
     const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
         onPressPrimaryButton,
         primaryButtonText,

package/build/components/SegmentedControl/SegmentedControlOption.js

@@ -5,9 +5,10 @@ import { Platform, Pressable, View } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
 import { useSegmentedControlContext } from './SegmentedControl.context';
 const AnimatedView = Animated.createAnimatedComponent(View);
-const SegmentedControlOptionRoot = ({ value, children, accessibilityLabel, disabled = false, style, states = {}, ...props }) => {
+const SegmentedControlOptionRoot = ({ value, children, icon, accessibilityLabel, disabled = false, style, states = {}, ...props }) => {
     const { value: selectedValue, select, disabled: allDisabled, size, registerOptionLayout, } = useSegmentedControlContext();
     const { active = false } = states;
     const reducedMotion = useReducedMotion();
@@ -35,7 +36,7 @@ const SegmentedControlOptionRoot = ({ value, children, accessibilityLabel, disab
     const accessibleLabel = typeof children === 'string' || typeof children === 'number' ? String(children) : value;
     return (_jsx(Pressable, { ...props, accessibilityRole: "radio", accessibilityState: { checked: selected, disabled: isDisabled }, accessibilityLabel: accessibilityLabel ?? accessibleLabel, onPress: onPress, onLayout: e => registerOptionLayout(value, e.nativeEvent.layout), disabled: isDisabled, style: [styles.option, style], ...(Platform.OS === 'web'
             ? { 'aria-label': accessibilityLabel ?? accessibleLabel }
-            : null), children: _jsxs(View, { style: styles.labelWrap, accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: [_jsx(BodyText, { size: "md", weight: "semibold", style: styles.labelSizer, accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: children }), _jsx(AnimatedView, { pointerEvents: "none", style: [styles.textLayer, regularLabelStyle], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: _jsx(BodyText, { size: "md", weight: "regular", style: styles.textRegular, children: children }) }), _jsx(AnimatedView, { pointerEvents: "none", style: [styles.textLayer, selectedLabelStyle], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: _jsx(BodyText, { size: "md", weight: "semibold", style: styles.textSelected, children: children }) })] }) }));
+            : null), children: _jsxs(View, { style: styles.contentWrap, accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: [icon ? _jsx(Icon, { as: icon, size: "sm", style: styles.icon }) : null, _jsxs(View, { style: styles.labelWrap, children: [_jsx(BodyText, { size: "md", weight: "semibold", style: styles.labelSizer, accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: children }), _jsx(AnimatedView, { pointerEvents: "none", style: [styles.textLayer, regularLabelStyle], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: _jsx(BodyText, { size: "md", weight: "regular", style: styles.textRegular, children: children }) }), _jsx(AnimatedView, { pointerEvents: "none", style: [styles.textLayer, selectedLabelStyle], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : null), children: _jsx(BodyText, { size: "md", weight: "semibold", style: styles.textSelected, children: children }) })] })] }) }));
 };
 const SegmentedControlOption = createPressable({ Root: SegmentedControlOptionRoot });
 SegmentedControlOption.displayName = 'SegmentedControlOption';
@@ -90,6 +91,12 @@ const styles = StyleSheet.create(theme => ({
             },
         },
     },
+    contentWrap: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: theme.components.segmentedControl.gap,
+    },
     labelWrap: {
         position: 'relative',
         alignItems: 'center',
@@ -105,6 +112,18 @@ const styles = StyleSheet.create(theme => ({
         alignItems: 'center',
         justifyContent: 'center',
     },
+    icon: {
+        variants: {
+            selected: {
+                true: {
+                    color: theme.color.icon.inverted,
+                },
+                false: {
+                    color: theme.color.icon.primary,
+                },
+            },
+        },
+    },
     textRegular: {
         color: theme.color.text.primary,
     },

package/build/components/SegmentedControl/SegmentedControlOption.props.d.ts

@@ -1,10 +1,12 @@
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
 export interface SegmentedControlOptionProps extends Omit<PressableProps, 'children'> {
     /** Unique option value. */
     value: string;
     /** Option label/content. */
     children: ReactNode;
+    /** Optional leading icon. */
+    icon?: ComponentType<any>;
     /** Disables only this option. */
     disabled?: boolean;
     style?: ViewProps['style'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,11 +56,11 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
+    "@utilitywarehouse/hearth-react-icons": "^0.8.0",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.3",
-    "@utilitywarehouse/hearth-react-icons": "^0.8.0"
+    "@utilitywarehouse/hearth-svg-assets": "^0.5.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",

package/src/components/Modal/Modal.tsx

@@ -292,7 +292,7 @@ const Modal = ({
             </View>
           ) : null}
           {inNavModal && (
-            <InNavModalContainer style={{ flexGrow: stickyFooter ? 1 : 0 }}>
+            <InNavModalContainer style={{ flex: stickyFooter ? 1 : 0 }}>
               {children}
               {!stickyFooter ? <View style={styles.inNavModalFooterContainer}>{footer}</View> : null}
             </InNavModalContainer>

package/src/components/SegmentedControl/SegmentedControl.docs.mdx

@@ -16,8 +16,10 @@ Each option is presented as an equal-priority segment in a single horizontal gro
 
 - [Playground](#playground)
 - [Usage](#usage)
-- [Sizes](#sizes)
 - [Props](#props)
+- [Examples](#examples)
+  - [Sizes](#sizes)
+  - [Icons](#icons)
 - [Accessibility](#accessibility)
 
 ## Playground
@@ -50,15 +52,6 @@ const Example = () => {
 };
 ```
 
-## Sizes
-
-Figma defines two size variants for Segmented Control:
-
-- `sm` maps to `SM-32`
-- `md` maps to `MD-48`
-
-<Canvas of={Stories.Sizes} />
-
 ## Props
 
 ### SegmentedControl
@@ -74,11 +67,45 @@ Figma defines two size variants for Segmented Control:
 
 ### SegmentedControlOption
 
-| Property   | Type        | Description                    | Default  |
-| ---------- | ----------- | ------------------------------ | -------- |
-| `value`    | `string`    | Unique value for this segment. | required |
-| `children` | `ReactNode` | Option label/content.          | required |
-| `disabled` | `boolean`   | Disables only this option.     | `false`  |
+| Property   | Type            | Description                    | Default  |
+| ---------- | --------------- | ------------------------------ | -------- |
+| `value`    | `string`        | Unique value for this segment. | required |
+| `children` | `ReactNode`     | Option label/content.          | required |
+| `icon`     | `ComponentType` | Optional leading icon.         | -        |
+| `disabled` | `boolean`       | Disables only this option.     | `false`  |
+
+## Examples
+
+### Sizes
+
+Figma defines two size variants for Segmented Control:
+
+- `sm` maps to `SM-32`
+- `md` maps to `MD-48`
+
+<Canvas of={Stories.Sizes} />
+
+```tsx
+<SegmentedControl size="sm">...</SegmentedControl>
+<SegmentedControl size="md">...</SegmentedControl>
+```
+
+### Icons
+
+SegmentedControlOption supports an optional leading icon.
+
+<Canvas of={Stories.WithIcons} />
+
+```tsx
+import { MobileSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+<SegmentedControl>
+  <SegmentedControlOption value="mobile" icon={MobileSmallIcon}>
+    Mobile
+  </SegmentedControlOption>
+  ...
+</SegmentedControl>;
+```
 
 ## Accessibility
 

package/src/components/SegmentedControl/SegmentedControl.figma.tsx

@@ -3,20 +3,17 @@ import { SegmentedControl, SegmentedControlOption } from '../';
 
 figma.connect(
   SegmentedControl,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6185-1021&t=c7xg5X0N2EL0t87h-4',
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6185-1021&m=dev',
   {
     props: {
       size: figma.enum('Size', {
         'SM-32': 'sm',
         'MD-48': 'md',
       }),
-      disabled: figma.enum('State', {
-        Disabled: true,
-      }),
       options: figma.children('Option'),
     },
     example: props => (
-      <SegmentedControl defaultValue="option-1" size={props.size} disabled={props.disabled}>
+      <SegmentedControl defaultValue="option-1" size={props.size}>
         {props.options}
       </SegmentedControl>
     ),
@@ -25,15 +22,17 @@ figma.connect(
 
 figma.connect(
   SegmentedControlOption,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4340-1252&t=c7xg5X0N2EL0t87h-4',
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4340-1252&m=dev',
   {
     props: {
       label: figma.string('Label'),
-      value: figma.string('Value'),
+      icon: figma.boolean('Icon?', {
+        true: figma.instance('Icon-20'),
+      }),
     },
     example: props => (
-      <SegmentedControlOption value={props.value ?? 'option'}>
-        {props.label ?? 'Option'}
+      <SegmentedControlOption value={'option'} icon={props.icon}>
+        {props.label}
       </SegmentedControlOption>
     ),
   }

package/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -1,3 +1,8 @@
+import {
+  BroadbandSmallIcon,
+  ElectricitySmallIcon,
+  MobileSmallIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
 import { useState } from 'react';
 import { BodyText, Flex, SegmentedControl, SegmentedControlOption } from '../';
 
@@ -75,3 +80,19 @@ export const Disabled = {
     </SegmentedControl>
   ),
 };
+
+export const WithIcons = {
+  render: () => (
+    <SegmentedControl defaultValue="energy" size="md">
+      <SegmentedControlOption value="energy" icon={ElectricitySmallIcon}>
+        Energy
+      </SegmentedControlOption>
+      <SegmentedControlOption value="broadband" icon={BroadbandSmallIcon}>
+        Broadband
+      </SegmentedControlOption>
+      <SegmentedControlOption value="mobile" icon={MobileSmallIcon}>
+        Mobile
+      </SegmentedControlOption>
+    </SegmentedControl>
+  ),
+};

package/src/components/SegmentedControl/SegmentedControlOption.props.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
 
 export interface SegmentedControlOptionProps extends Omit<PressableProps, 'children'> {
@@ -6,6 +6,8 @@ export interface SegmentedControlOptionProps extends Omit<PressableProps, 'child
   value: string;
   /** Option label/content. */
   children: ReactNode;
+  /** Optional leading icon. */
+  icon?: ComponentType<any>;
   /** Disables only this option. */
   disabled?: boolean;
   style?: ViewProps['style'];

package/src/components/SegmentedControl/SegmentedControlOption.tsx

@@ -10,6 +10,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
 import { useSegmentedControlContext } from './SegmentedControl.context';
 import type SegmentedControlOptionProps from './SegmentedControlOption.props';
 
@@ -18,6 +19,7 @@ const AnimatedView = Animated.createAnimatedComponent(View);
 const SegmentedControlOptionRoot = ({
   value,
   children,
+  icon,
   accessibilityLabel,
   disabled = false,
   style,
@@ -79,47 +81,50 @@ const SegmentedControlOptionRoot = ({
         : null)}
     >
       <View
-        style={styles.labelWrap}
+        style={styles.contentWrap}
         accessible={false}
         accessibilityElementsHidden
         importantForAccessibility="no-hide-descendants"
         {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
       >
-        <BodyText
-          size="md"
-          weight="semibold"
-          style={styles.labelSizer}
-          accessible={false}
-          accessibilityElementsHidden
-          importantForAccessibility="no-hide-descendants"
-          {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
-        >
-          {children}
-        </BodyText>
-        <AnimatedView
-          pointerEvents="none"
-          style={[styles.textLayer, regularLabelStyle]}
-          accessible={false}
-          accessibilityElementsHidden
-          importantForAccessibility="no-hide-descendants"
-          {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
-        >
-          <BodyText size="md" weight="regular" style={styles.textRegular}>
+        {icon ? <Icon as={icon} size="sm" style={styles.icon} /> : null}
+        <View style={styles.labelWrap}>
+          <BodyText
+            size="md"
+            weight="semibold"
+            style={styles.labelSizer}
+            accessible={false}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
+          >
             {children}
           </BodyText>
-        </AnimatedView>
-        <AnimatedView
-          pointerEvents="none"
-          style={[styles.textLayer, selectedLabelStyle]}
-          accessible={false}
-          accessibilityElementsHidden
-          importantForAccessibility="no-hide-descendants"
-          {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
-        >
-          <BodyText size="md" weight="semibold" style={styles.textSelected}>
-            {children}
-          </BodyText>
-        </AnimatedView>
+          <AnimatedView
+            pointerEvents="none"
+            style={[styles.textLayer, regularLabelStyle]}
+            accessible={false}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
+          >
+            <BodyText size="md" weight="regular" style={styles.textRegular}>
+              {children}
+            </BodyText>
+          </AnimatedView>
+          <AnimatedView
+            pointerEvents="none"
+            style={[styles.textLayer, selectedLabelStyle]}
+            accessible={false}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : null)}
+          >
+            <BodyText size="md" weight="semibold" style={styles.textSelected}>
+              {children}
+            </BodyText>
+          </AnimatedView>
+        </View>
       </View>
     </Pressable>
   );
@@ -180,6 +185,12 @@ const styles = StyleSheet.create(theme => ({
       },
     },
   },
+  contentWrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.components.segmentedControl.gap,
+  },
   labelWrap: {
     position: 'relative',
     alignItems: 'center',
@@ -195,6 +206,18 @@ const styles = StyleSheet.create(theme => ({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  icon: {
+    variants: {
+      selected: {
+        true: {
+          color: theme.color.icon.inverted,
+        },
+        false: {
+          color: theme.color.icon.primary,
+        },
+      },
+    },
+  },
   textRegular: {
     color: theme.color.text.primary,
   },

package/src/components/Select/SelectOption.figma.tsx

@@ -3,10 +3,10 @@ import { SelectOption } from '../';
 
 figma.connect(
   SelectOption,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4340%3A1252',
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3394-3663&m=dev',
   {
     props: {
-      label: figma.string('Label'),
+      label: figma.string('Text'),
       disabled: figma.enum('State', {
         Disabled: true,
       }),