@hero-design/rn 8.134.0 → 8.135.0

package/package.json

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

package/src/components/List/BasicListItem.tsx

@@ -12,7 +12,7 @@ import {
 import type { IconName } from '../Icon';
 import { useTheme } from '../../theme';
 
-interface ListItemProps {
+export interface BasicListItemProps {
   /**
    * Name of Icon or component to render on the left side of title.
    */
@@ -61,7 +61,7 @@ const BasicListItem = ({
   selected = false,
   disabled = false,
   onPress,
-}: ListItemProps): ReactElement => {
+}: BasicListItemProps): ReactElement => {
   const theme = useTheme();
 
   return (

package/src/components/List/index.tsx

@@ -1,6 +1,9 @@
 import ListItem from './ListItem';
 import BasicListItem from './BasicListItem';
 
+export type { ListItemProps } from './ListItem';
+export type { BasicListItemProps } from './BasicListItem';
+
 interface ListType {
   Item: typeof ListItem;
   BasicItem: typeof BasicListItem;

package/src/components/SectionList/SectionList.tsx

@@ -0,0 +1,181 @@
+import React, { useMemo } from 'react';
+
+import type { ReactElement } from 'react';
+import type {
+  SectionListProps as RNSectionListPropsType,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { SectionList as RNSectionList } from 'react-native';
+import Divider from '../Divider';
+import List from '../List';
+import type { BasicListItemProps } from '../List/BasicListItem';
+import type { ListItemProps } from '../List/ListItem';
+import type { SectionHeadingProps } from '../SectionHeading';
+import type { MarginHorizontal, RowPosition } from './StyledSectionList';
+import {
+  StyledDividerWrapper,
+  StyledRow,
+  StyledSectionHeading,
+  StyledSectionSpacer,
+} from './StyledSectionList';
+
+type SectionHeadingConfig = Pick<
+  SectionHeadingProps,
+  'text' | 'icon' | 'rightChildren' | 'intent' | 'size'
+>;
+
+/**
+ * A single row inside a section. `type` is a discriminant that selects the row component:
+ * - `'basic-item'` renders `List.BasicItem` (icon/text, no children)
+ * - `'list-item'` renders `List.Item` (supports subtitle, children, leading status)
+ *
+ * `variant` is omitted from `list-item` — rows always render full-width inside a section group.
+ * `key` is an optional stable identifier for use with a custom `keyExtractor`.
+ * Mix both types freely within the same `data` array.
+ */
+export type SectionListRow =
+  | ({ type: 'basic-item'; key?: string } & BasicListItemProps)
+  | ({ type: 'list-item'; key?: string } & Omit<ListItemProps, 'variant'>);
+
+export interface SectionData extends Omit<SectionHeadingConfig, 'text'> {
+  /**
+   * Unique key for this section.
+   */
+  key: string;
+  /**
+   * Rows to render. Each row is a `basic-item` or `list-item` variant; mix freely, in any order.
+   */
+  data: SectionListRow[];
+  /**
+   * Heading text. Required unless `hideHeading` is `true`.
+   */
+  text?: SectionHeadingConfig['text'];
+  /**
+   * When true, the section heading is not rendered. Rows are still shown. Defaults to false.
+   */
+  hideHeading?: boolean;
+}
+
+type RNSectionListProps = RNSectionListPropsType<SectionListRow, SectionData>;
+
+// Layout (dividers, headers, corner rounding, spacing) is owned by this component, so these
+// RN props are not user-configurable — everything else on RN's SectionList passes through.
+type OmittedRNSectionListProps =
+  | 'sections'
+  | 'renderSectionHeader'
+  | 'renderItem'
+  | 'ItemSeparatorComponent'
+  | 'SectionSeparatorComponent'
+  | 'stickySectionHeadersEnabled';
+
+export interface SectionListProps
+  extends Omit<RNSectionListProps, OmittedRNSectionListProps> {
+  /**
+   * Sections to render. Each section carries SectionHeading props plus a `data` array,
+   * mirroring React Native's SectionList section shape.
+   */
+  sections: SectionData[];
+  /**
+   * Horizontal margin applied to each row group and its dividers, preventing content from
+   * rendering flush against the screen edge. Defaults to `'medium'` (16 px).
+   * Pass `'none'` when the parent screen already applies its own side gutter.
+   */
+  marginHorizontal?: MarginHorizontal;
+  /**
+   * Additional style on the underlying RN SectionList.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const positionOf = (index: number, count: number): RowPosition => {
+  if (count === 1) return 'single';
+  if (index === 0) return 'top';
+  if (index === count - 1) return 'bottom';
+  return 'middle';
+};
+
+// StyledRow already clips corners via overflow:hidden + its own borderRadius, so the
+// inner list items must not add their own rounding on top of it.
+const NO_RADIUS = { borderRadius: 0 } as const;
+
+const renderRow = (row: SectionListRow): ReactElement =>
+  row.type === 'basic-item' ? (
+    <List.BasicItem {...row} style={[NO_RADIUS, row.style]} />
+  ) : (
+    <List.Item {...row} style={[NO_RADIUS, row.style]} />
+  );
+
+// Factory lives at module scope — satisfies react/no-unstable-nested-components.
+// RN only renders ItemSeparatorComponent between adjacent items (never after the
+// last), which is exactly the desired divider placement for a bounded group.
+const createRowDivider = (margin: MarginHorizontal | undefined) => () =>
+  (
+    <StyledDividerWrapper
+      testID="section-list-divider-wrapper"
+      themeMarginHorizontal={margin}
+    >
+      <Divider testID="section-list-divider" />
+    </StyledDividerWrapper>
+  );
+
+const SectionSpacer: NonNullable<
+  RNSectionListProps['SectionSeparatorComponent']
+> = ({ leadingItem, trailingSection }) =>
+  leadingItem && trailingSection ? (
+    <StyledSectionSpacer
+      themeCompact={!!trailingSection.hideHeading}
+      testID="section-list-spacer"
+    />
+  ) : null;
+
+function SectionList({
+  sections,
+  marginHorizontal = 'medium',
+  style,
+  testID,
+  ...rest
+}: SectionListProps): ReactElement {
+  const RowDivider = useMemo(
+    () => createRowDivider(marginHorizontal),
+    [marginHorizontal]
+  );
+
+  return (
+    <RNSectionList<SectionListRow, SectionData>
+      {...rest}
+      style={style}
+      testID={testID}
+      sections={sections}
+      stickySectionHeadersEnabled={false}
+      ItemSeparatorComponent={RowDivider}
+      renderSectionHeader={({ section }) =>
+        section.hideHeading ? null : (
+          <StyledSectionHeading
+            text={section.text ?? ''}
+            icon={section.icon}
+            rightChildren={section.rightChildren}
+            intent={section.intent}
+            size={section.size}
+          />
+        )
+      }
+      renderItem={({ item, index, section }) => (
+        <StyledRow
+          testID="section-list-row"
+          themePosition={positionOf(index, section.data.length)}
+          themeMarginHorizontal={marginHorizontal}
+        >
+          {renderRow(item)}
+        </StyledRow>
+      )}
+      SectionSeparatorComponent={SectionSpacer}
+    />
+  );
+}
+
+export default SectionList;

package/src/components/SectionList/StyledSectionList.tsx

@@ -0,0 +1,65 @@
+import { View } from 'react-native';
+import styled from '@emotion/native';
+import SectionHeading from '../SectionHeading';
+
+export type RowPosition = 'top' | 'bottom' | 'middle' | 'single';
+
+export type MarginHorizontal =
+  | 'xsmall'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'xlarge'
+  | 'none';
+
+const isTop = (position: RowPosition) =>
+  position === 'top' || position === 'single';
+const isBottom = (position: RowPosition) =>
+  position === 'bottom' || position === 'single';
+
+const StyledRow = styled(View)<{
+  themePosition: RowPosition;
+  themeMarginHorizontal?: MarginHorizontal;
+}>(({ theme, themePosition, themeMarginHorizontal = 'medium' }) => {
+  const radius = theme.__hd__.sectionList.radii.group;
+  const marginHorizontal =
+    theme.__hd__.sectionList.space.marginHorizontal[themeMarginHorizontal];
+
+  return {
+    marginHorizontal,
+    backgroundColor: theme.__hd__.sectionList.colors.groupBackground,
+    borderTopLeftRadius: isTop(themePosition) ? radius : 0,
+    borderTopRightRadius: isTop(themePosition) ? radius : 0,
+    borderBottomLeftRadius: isBottom(themePosition) ? radius : 0,
+    borderBottomRightRadius: isBottom(themePosition) ? radius : 0,
+    overflow: 'hidden',
+  };
+});
+
+const StyledDividerWrapper = styled(View)<{
+  themeMarginHorizontal?: MarginHorizontal;
+}>(({ theme, themeMarginHorizontal = 'medium' }) => ({
+  marginHorizontal:
+    theme.__hd__.sectionList.space.marginHorizontal[themeMarginHorizontal],
+  backgroundColor: theme.__hd__.sectionList.colors.groupBackground,
+}));
+
+const StyledSectionSpacer = styled(View)<{ themeCompact: boolean }>(
+  ({ theme, themeCompact }) => ({
+    height: themeCompact
+      ? theme.__hd__.sectionList.space.sectionSpacingCompact
+      : theme.__hd__.sectionList.space.sectionSpacing,
+  })
+);
+
+const StyledSectionHeading = styled(SectionHeading)(({ theme }) => ({
+  paddingLeft: theme.__hd__.sectionList.space.headingPaddingLeft,
+  marginBottom: 0,
+}));
+
+export {
+  StyledRow,
+  StyledDividerWrapper,
+  StyledSectionSpacer,
+  StyledSectionHeading,
+};

package/src/components/SectionList/index.tsx

@@ -0,0 +1,4 @@
+import SectionList from './SectionList';
+
+export default SectionList;
+export type { SectionListProps } from './SectionList';

package/src/index.ts

@@ -63,6 +63,7 @@ import Spinner from './components/Spinner';
 import Swipeable from './components/Swipeable';
 import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
+import SectionList from './components/SectionList';
 import Select from './components/Select';
 import Skeleton from './components/Skeleton';
 import Success from './components/StatusScreens/Success';
@@ -162,6 +163,7 @@ export {
   SegmentedControl,
   ScrollViewWithFAB,
   SectionHeading,
+  SectionList,
   SectionListWithFAB,
   Select,
   Success,

package/src/theme/components/sectionList.ts

@@ -0,0 +1,31 @@
+import type { GlobalTheme } from '../global';
+
+const getSectionListTheme = (theme: GlobalTheme) => {
+  const colors = {
+    groupBackground: theme.colors.defaultGlobalSurface,
+  };
+
+  const radii = {
+    group: theme.radii.xlarge,
+  };
+
+  const marginHorizontalValues = {
+    none: 0,
+    xsmall: theme.space.xsmall,
+    small: theme.space.small,
+    medium: theme.space.medium,
+    large: theme.space.large,
+    xlarge: theme.space.xlarge,
+  };
+
+  const space = {
+    marginHorizontal: marginHorizontalValues,
+    sectionSpacing: theme.space.medium,
+    sectionSpacingCompact: theme.space.small,
+    headingPaddingLeft: theme.space.small,
+  };
+
+  return { colors, radii, space };
+};
+
+export default getSectionListTheme;

package/src/theme/getTheme.ts

@@ -41,6 +41,7 @@ import getRateTheme from './components/rate';
 import getRefreshControlTheme from './components/refreshControl';
 import getRichTextEditorTheme from './components/richTextEditor';
 import getSectionHeadingTheme from './components/sectionHeading';
+import getSectionListTheme from './components/sectionList';
 import getSelectTheme from './components/select';
 import getSkeletonTheme from './components/skeleton';
 import getSliderTheme from './components/slider';
@@ -115,6 +116,7 @@ type Theme = GlobalTheme & {
     richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
     search: ReturnType<typeof getSearchTheme>;
     sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
+    sectionList: ReturnType<typeof getSectionListTheme>;
     select: ReturnType<typeof getSelectTheme>;
     skeleton: ReturnType<typeof getSkeletonTheme>;
     slider: ReturnType<typeof getSliderTheme>;
@@ -183,6 +185,7 @@ const getTheme = (
       richTextEditor: getRichTextEditorTheme(globalTheme),
       search: getSearchTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
+      sectionList: getSectionListTheme(globalTheme),
       select: getSelectTheme(globalTheme),
       skeleton: getSkeletonTheme(globalTheme),
       slider: getSliderTheme(globalTheme),

package/src/types.ts

@@ -117,3 +117,4 @@ export type { SkeletonProps } from './components/Skeleton';
 export type { SpinnerProps } from './components/Spinner';
 export type { SwitchProps } from './components/Switch';
 export type { TagProps } from './components/Tag';
+export type { SectionListProps } from './components/SectionList';

package/types/components/List/BasicListItem.d.ts

@@ -2,7 +2,7 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
-interface ListItemProps {
+export interface BasicListItemProps {
     /**
      * Name of Icon or component to render on the left side of title.
      */
@@ -40,5 +40,5 @@ interface ListItemProps {
      */
     onPress?: () => void;
 }
-declare const BasicListItem: ({ prefix, suffix, title, subtitle, style, testID, selected, disabled, onPress, }: ListItemProps) => ReactElement;
+declare const BasicListItem: ({ prefix, suffix, title, subtitle, style, testID, selected, disabled, onPress, }: BasicListItemProps) => ReactElement;
 export default BasicListItem;

package/types/components/List/index.d.ts

@@ -1,5 +1,7 @@
 import ListItem from './ListItem';
 import BasicListItem from './BasicListItem';
+export type { ListItemProps } from './ListItem';
+export type { BasicListItemProps } from './BasicListItem';
 interface ListType {
     Item: typeof ListItem;
     BasicItem: typeof BasicListItem;

package/types/components/Radio/StyledRadio.d.ts

@@ -20,7 +20,7 @@ declare const Spacer: import("@emotion/native").StyledComponent<import("react-na
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledRadio: import("@emotion/native").StyledComponent<import("../..").ListItemProps & {
+declare const StyledRadio: import("@emotion/native").StyledComponent<import("../List").ListItemProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {

package/types/components/SectionList/SectionList.d.ts

@@ -0,0 +1,66 @@
+import type { ReactElement } from 'react';
+import type { SectionListProps as RNSectionListPropsType, StyleProp, ViewStyle } from 'react-native';
+import type { BasicListItemProps } from '../List/BasicListItem';
+import type { ListItemProps } from '../List/ListItem';
+import type { SectionHeadingProps } from '../SectionHeading';
+import type { MarginHorizontal } from './StyledSectionList';
+type SectionHeadingConfig = Pick<SectionHeadingProps, 'text' | 'icon' | 'rightChildren' | 'intent' | 'size'>;
+/**
+ * A single row inside a section. `type` is a discriminant that selects the row component:
+ * - `'basic-item'` renders `List.BasicItem` (icon/text, no children)
+ * - `'list-item'` renders `List.Item` (supports subtitle, children, leading status)
+ *
+ * `variant` is omitted from `list-item` — rows always render full-width inside a section group.
+ * `key` is an optional stable identifier for use with a custom `keyExtractor`.
+ * Mix both types freely within the same `data` array.
+ */
+export type SectionListRow = ({
+    type: 'basic-item';
+    key?: string;
+} & BasicListItemProps) | ({
+    type: 'list-item';
+    key?: string;
+} & Omit<ListItemProps, 'variant'>);
+export interface SectionData extends Omit<SectionHeadingConfig, 'text'> {
+    /**
+     * Unique key for this section.
+     */
+    key: string;
+    /**
+     * Rows to render. Each row is a `basic-item` or `list-item` variant; mix freely, in any order.
+     */
+    data: SectionListRow[];
+    /**
+     * Heading text. Required unless `hideHeading` is `true`.
+     */
+    text?: SectionHeadingConfig['text'];
+    /**
+     * When true, the section heading is not rendered. Rows are still shown. Defaults to false.
+     */
+    hideHeading?: boolean;
+}
+type RNSectionListProps = RNSectionListPropsType<SectionListRow, SectionData>;
+type OmittedRNSectionListProps = 'sections' | 'renderSectionHeader' | 'renderItem' | 'ItemSeparatorComponent' | 'SectionSeparatorComponent' | 'stickySectionHeadersEnabled';
+export interface SectionListProps extends Omit<RNSectionListProps, OmittedRNSectionListProps> {
+    /**
+     * Sections to render. Each section carries SectionHeading props plus a `data` array,
+     * mirroring React Native's SectionList section shape.
+     */
+    sections: SectionData[];
+    /**
+     * Horizontal margin applied to each row group and its dividers, preventing content from
+     * rendering flush against the screen edge. Defaults to `'medium'` (16 px).
+     * Pass `'none'` when the parent screen already applies its own side gutter.
+     */
+    marginHorizontal?: MarginHorizontal;
+    /**
+     * Additional style on the underlying RN SectionList.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare function SectionList({ sections, marginHorizontal, style, testID, ...rest }: SectionListProps): ReactElement;
+export default SectionList;

package/types/components/SectionList/StyledSectionList.d.ts

@@ -0,0 +1,33 @@
+import { View } from 'react-native';
+export type RowPosition = 'top' | 'bottom' | 'middle' | 'single';
+export type MarginHorizontal = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'none';
+declare const StyledRow: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themePosition: RowPosition;
+    themeMarginHorizontal?: MarginHorizontal;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledDividerWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeMarginHorizontal?: MarginHorizontal;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledSectionSpacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    themeCompact: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledSectionHeading: import("@emotion/native").StyledComponent<import("../SectionHeading").SectionHeadingProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+export { StyledRow, StyledDividerWrapper, StyledSectionSpacer, StyledSectionHeading, };

package/types/components/SectionList/index.d.ts

@@ -0,0 +1,3 @@
+import SectionList from './SectionList';
+export default SectionList;
+export type { SectionListProps } from './SectionList';

package/types/index.d.ts

@@ -39,6 +39,7 @@ import Spinner from './components/Spinner';
 import Swipeable from './components/Swipeable';
 import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
+import SectionList from './components/SectionList';
 import Select from './components/Select';
 import Skeleton from './components/Skeleton';
 import Success from './components/StatusScreens/Success';
@@ -62,6 +63,6 @@ import FloatingIsland from './components/FloatingIsland';
 import LocaleProvider from './components/LocaleProvider';
 import FilterTrigger from './components/FilterTrigger';
 import InlineLoader, { type InlineLoaderProps } from './components/InlineLoader';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagLightSystemPalette, swagLightJobsSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, ehJobsSystemPalette, ehWorkShadowPalette, ehJobsShadowPalette, ehWorkDarkShadowPalette, Accordion, Alert, AppCue, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Chart, Carousel, Chip, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, FlatListWithFAB, Icon, Illustration, type IllustrationName, IllustrationList, Image, HeroDesignProvider, MapPin, List, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, Search, SegmentedControl, ScrollViewWithFAB, SectionHeading, SectionListWithFAB, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, FloatingIsland, LocaleProvider, FilterTrigger, InlineLoader, type InlineLoaderProps, styled, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagLightSystemPalette, swagLightJobsSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, ehJobsSystemPalette, ehWorkShadowPalette, ehJobsShadowPalette, ehWorkDarkShadowPalette, Accordion, Alert, AppCue, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Chart, Carousel, Chip, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, FlatListWithFAB, Icon, Illustration, type IllustrationName, IllustrationList, Image, HeroDesignProvider, MapPin, List, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, Search, SegmentedControl, ScrollViewWithFAB, SectionHeading, SectionList, SectionListWithFAB, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, FloatingIsland, LocaleProvider, FilterTrigger, InlineLoader, type InlineLoaderProps, styled, };
 export * from './types';
 export type { ShadowPalette };

package/types/theme/components/sectionList.d.ts

@@ -0,0 +1,23 @@
+import type { GlobalTheme } from '../global';
+declare const getSectionListTheme: (theme: GlobalTheme) => {
+    colors: {
+        groupBackground: string;
+    };
+    radii: {
+        group: number;
+    };
+    space: {
+        marginHorizontal: {
+            none: number;
+            xsmall: number;
+            small: number;
+            medium: number;
+            large: number;
+            xlarge: number;
+        };
+        sectionSpacing: number;
+        sectionSpacingCompact: number;
+        headingPaddingLeft: number;
+    };
+};
+export default getSectionListTheme;

package/types/theme/getTheme.d.ts

@@ -32,6 +32,7 @@ import getRateTheme from './components/rate';
 import getRefreshControlTheme from './components/refreshControl';
 import getRichTextEditorTheme from './components/richTextEditor';
 import getSectionHeadingTheme from './components/sectionHeading';
+import getSectionListTheme from './components/sectionList';
 import getSelectTheme from './components/select';
 import getSkeletonTheme from './components/skeleton';
 import getSliderTheme from './components/slider';
@@ -97,6 +98,7 @@ type Theme = GlobalTheme & {
         richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
         search: ReturnType<typeof getSearchTheme>;
         sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
+        sectionList: ReturnType<typeof getSectionListTheme>;
         select: ReturnType<typeof getSelectTheme>;
         skeleton: ReturnType<typeof getSkeletonTheme>;
         slider: ReturnType<typeof getSliderTheme>;

package/types/types.d.ts

@@ -87,3 +87,4 @@ export type { SkeletonProps } from './components/Skeleton';
 export type { SpinnerProps } from './components/Spinner';
 export type { SwitchProps } from './components/Switch';
 export type { TagProps } from './components/Tag';
+export type { SectionListProps } from './components/SectionList';