@itcase/ui-react-native 1.10.81

package/src/components/Chips/styles/chipsSize.ts

@@ -0,0 +1,65 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const chipsSizeStyles = StyleSheet.create({
+  chips__inner_size_l: {
+    minWidth: 32,
+    minHeight: 32,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    gap: 4,
+  },
+  chips__inner_size_m: {
+    minWidth: 28,
+    minHeight: 28,
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+    gap: 4,
+  },
+  chips__inner_size_s: {
+    minWidth: 24,
+    minHeight: 24,
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    gap: 4,
+  },
+  chips__inner_size_xl: {
+    minWidth: 40,
+    minHeight: 40,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    gap: 4,
+  },
+  chips__inner_size_xs: {
+    minWidth: 20,
+    minHeight: 20,
+    paddingVertical: 2,
+    paddingHorizontal: 6,
+    gap: 4,
+  },
+  chips__inner_size_xxl: {
+    minWidth: 48,
+    minHeight: 48,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    gap: 4,
+  },
+  chips__inner_size_xxs: {
+    minWidth: 16,
+    minHeight: 16,
+    paddingVertical: 2,
+    paddingHorizontal: 4,
+    gap: 4,
+  },
+})
+
+const chipsSizeList = getVariantsPropsList(
+  chipsSizeStyles,
+  'chips__inner_size_',
+)
+
+type chipsSizePropsType = (typeof chipsSizeList)[number]
+
+export { chipsSizeList, chipsSizeStyles }
+export type { chipsSizePropsType }

package/src/components/Choice/Choice.appearance.ts

@@ -0,0 +1,22 @@
+import { choiceAppearanceDefault } from './appearance/choiceDefault'
+import { choiceAppearanceDisabled } from './appearance/choiceDisabled'
+import { choiceAppearanceError } from './appearance/choiceError'
+import { choiceAppearanceRequire } from './appearance/choiceRequire'
+import { choiceAppearanceShape } from './appearance/choiceShape'
+import { choiceAppearanceSize } from './appearance/choiceSize'
+import { choiceAppearanceStyle } from './appearance/choiceStyle'
+import { choiceAppearanceSuccess } from './appearance/choiceSuccess'
+import type { ChoiceAppearance } from './Choice.interface'
+
+const choiceAppearance = {
+  ...choiceAppearanceError,
+  ...choiceAppearanceDisabled,
+  ...choiceAppearanceDefault,
+  ...choiceAppearanceSuccess,
+  ...choiceAppearanceRequire,
+  ...choiceAppearanceStyle,
+  ...choiceAppearanceShape,
+  ...choiceAppearanceSize,
+} satisfies ChoiceAppearance
+
+export { choiceAppearance }

package/src/components/Choice/Choice.interface.ts

@@ -0,0 +1,119 @@
+import type { ReactNode } from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
+
+import type {
+  AppearanceConfig,
+  AppearanceKeysState,
+  AppearancePartialRecord,
+  AppearanceRecord,
+  AppearanceShapeKey,
+  AppearanceSizeKey,
+  AppearanceStyleKey,
+  BorderColorProps,
+  CompositeAppearanceKeys,
+  FillActiveProps,
+  FillDisabledProps,
+  FillProps,
+  ItemFillActiveProps,
+  ShapeProps,
+  TextColorProps,
+  TextSizeProps,
+  TextWeightProps,
+  WrapProps,
+} from '@itcase/types-ui'
+
+import type { SvgIconComponent } from '../Icon/Icon.interface'
+import type { iconSizePropsType } from '../Icon/styles/iconSize'
+import type { choiceSizePropsType } from './styles/choiceSize'
+
+interface ChoiceAppearanceProps {
+  borderColor?: BorderColorProps
+  fill?: FillProps
+  fillItem?: FillProps
+  fillItemActive?: FillActiveProps
+  fillItemActiveDisabled?: FillDisabledProps
+  fillItemDisabled?: FillDisabledProps
+  iconAfterFill?: ItemFillActiveProps
+  iconAfterFillActive?: ItemFillActiveProps
+  iconAfterFillDisabled?: ItemFillActiveProps
+  iconAfterSize?: iconSizePropsType
+  iconBeforeFill?: ItemFillActiveProps
+  iconBeforeFillActive?: ItemFillActiveProps
+  iconBeforeFillDisabled?: ItemFillActiveProps
+  iconBeforeSize?: iconSizePropsType
+  iconFill?: ItemFillActiveProps
+  iconFillActive?: ItemFillActiveProps
+  iconFillDisabled?: ItemFillActiveProps
+  iconSize?: iconSizePropsType
+  labelTextColor?: TextColorProps
+  labelTextColorActive?: TextColorProps
+  labelTextColorDisabled?: TextColorProps
+  labelTextSize?: TextSizeProps
+  labelTextWeight?: TextWeightProps
+  shape?: ShapeProps
+  size?: choiceSizePropsType
+  wrap?: WrapProps
+}
+
+interface ChoiceOptionsItem {
+  icon?: SvgIconComponent
+  iconActive?: SvgIconComponent
+  iconAfter?: SvgIconComponent
+  iconAfterActive?: SvgIconComponent
+  iconBefore?: SvgIconComponent
+  iconBeforeActive?: SvgIconComponent
+  label?: ReactNode
+  value: string
+}
+
+interface ChoiceActive {
+  value: ReactNode
+}
+
+type ChoiceAppearanceKey = AppearanceKeysState | CompositeAppearanceKeys
+type ChoiceConfig = AppearanceConfig<AppearanceKeysState, ChoiceAppearanceProps>
+type ChoiceAppearance = ChoiceConfig['appearance']
+type ChoiceAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  ChoiceAppearanceProps,
+  'borderColor' | 'fill'
+>
+type ChoiceAppearanceShape = AppearancePartialRecord<
+  AppearanceShapeKey,
+  ChoiceAppearanceProps,
+  'shape'
+>
+type ChoiceAppearanceSize = AppearancePartialRecord<
+  AppearanceSizeKey,
+  ChoiceAppearanceProps,
+  'iconSize' | 'labelTextSize' | 'size'
+>
+
+interface ChoiceProps extends ChoiceAppearanceProps {
+  isCheckbox?: boolean
+  isDisabled?: boolean
+  isLoading?: boolean
+  setActiveSegment?: (item: ChoiceOptionsItem, isChecked?: boolean) => void
+  active: ChoiceActive
+  after?: ReactNode
+  appearance?: ChoiceAppearanceKey
+  appearanceStyle?: AppearanceStyleKey
+  before?: ReactNode
+  itemAfter?: ReactNode
+  itemBefore?: ReactNode
+  options: ChoiceOptionsItem[]
+  style?: StyleProp<ViewStyle>
+}
+
+export type {
+  ChoiceActive,
+  ChoiceAppearance,
+  ChoiceAppearanceKey,
+  ChoiceAppearanceProps,
+  ChoiceAppearanceShape,
+  ChoiceAppearanceSize,
+  ChoiceAppearanceStyle,
+  ChoiceConfig,
+  ChoiceOptionsItem,
+  ChoiceProps,
+}

package/src/components/Choice/Choice.styles.ts

@@ -0,0 +1,13 @@
+import { choiceStyles as choiceBaseStyles } from './styles/choice'
+import { choiceShapeStyles } from './styles/choiceShape'
+import { choiceSizeStyles } from './styles/choiceSize'
+import { choiceWrapStyles } from './styles/choiceWrap'
+
+const styles = {
+  ...choiceBaseStyles,
+  ...choiceShapeStyles,
+  ...choiceSizeStyles,
+  ...choiceWrapStyles,
+}
+
+export { styles }

package/src/components/Choice/Choice.tsx

@@ -0,0 +1,258 @@
+import { useMemo } from 'react'
+import { Pressable, View } from 'react-native'
+
+import { tokens } from '../../styles/tokens'
+import { Icon } from '../Icon'
+import { Loader } from '../Loader'
+import { Text } from '../Text'
+import { choiceAppearance } from './Choice.appearance'
+import type {
+  ChoiceAppearanceProps,
+  ChoiceConfig,
+  ChoiceOptionsItem,
+  ChoiceProps,
+} from './Choice.interface'
+import { styles } from './Choice.styles'
+
+const DEFAULT_CHOICE_APPEARANCE = 'defaultPrimary'
+const DEFAULT_CHOICE_APPEARANCE_STYLE = 'solid'
+const DEFAULT_CHOICE_SIZE = 'l'
+const DEFAULT_CHOICE_SHAPE = 'rounded'
+
+const choiceConfig: ChoiceConfig = {
+  appearance: {},
+  setAppearance: (newComponent) => {
+    choiceConfig.appearance = newComponent
+  },
+}
+
+choiceConfig.setAppearance(choiceAppearance)
+
+function Choice(props: ChoiceProps) {
+  const {
+    appearance,
+    size,
+    fill,
+    fillItem,
+    fillItemActive,
+    fillItemActiveDisabled,
+    fillItemDisabled,
+    labelTextColor,
+    labelTextColorActive,
+    labelTextColorDisabled,
+    labelTextSize,
+    labelTextWeight,
+    borderColor,
+    active,
+    appearanceStyle,
+    iconAfterFill,
+    iconAfterFillActive,
+    iconAfterFillDisabled,
+    iconAfterSize,
+    iconBeforeFill,
+    iconBeforeFillActive,
+    iconBeforeFillDisabled,
+    iconBeforeSize,
+    iconFill,
+    iconFillActive,
+    iconFillDisabled,
+    iconSize,
+    itemAfter,
+    itemBefore,
+    options = [],
+    shape,
+    style,
+    wrap,
+    before,
+    after,
+    isDisabled = false,
+    isCheckbox = false,
+    isLoading = false,
+    setActiveSegment,
+  } = props
+
+  const appearanceConfig = useMemo(() => {
+    const appearanceTokens = (appearance || DEFAULT_CHOICE_APPEARANCE).split(
+      ' ',
+    )
+    const isCompositeAppearance = appearanceTokens.length > 1
+    const sizeAppearanceKey = size && `size${size.toUpperCase()}`
+    const appearanceKeys = isCompositeAppearance
+      ? appearanceTokens
+      : [
+          ...appearanceTokens,
+          appearanceStyle || DEFAULT_CHOICE_APPEARANCE_STYLE,
+          sizeAppearanceKey,
+          shape,
+        ]
+
+    return appearanceKeys.reduce<ChoiceAppearanceProps>(
+      (resultConfig, appearanceKey) => {
+        return Object.assign(
+          resultConfig,
+          appearanceKey &&
+            choiceConfig.appearance?.[
+              appearanceKey as keyof NonNullable<typeof choiceConfig.appearance>
+            ],
+        )
+      },
+      {},
+    )
+  }, [appearance, appearanceStyle, shape, size])
+
+  const sizeKey = size || appearanceConfig.size || DEFAULT_CHOICE_SIZE
+  const shapeKey = shape || appearanceConfig.shape || DEFAULT_CHOICE_SHAPE
+  const wrapKey = wrap || appearanceConfig.wrap
+  const fillKey = fill || appearanceConfig.fill
+  const borderColorKey = borderColor || appearanceConfig.borderColor
+  const resolvedIconSize = iconSize || appearanceConfig.iconSize
+  const resolvedIconBeforeSize =
+    iconBeforeSize || appearanceConfig.iconBeforeSize || resolvedIconSize
+  const resolvedIconAfterSize =
+    iconAfterSize || appearanceConfig.iconAfterSize || resolvedIconSize
+
+  function onItemPress(item: ChoiceOptionsItem, isItemActive: boolean) {
+    if (!setActiveSegment) {
+      return
+    }
+
+    const isItemChecked = isCheckbox ? !isItemActive : true
+    setActiveSegment(item, isItemChecked)
+  }
+
+  return (
+    <View
+      style={[
+        styles.choice,
+        sizeKey && styles[`choice_size_${sizeKey}`],
+        fillKey && tokens[`fill_${fillKey}`],
+        shapeKey && styles[`choice_shape_${shapeKey}`],
+        wrapKey && styles[`choice_wrap_${wrapKey}`],
+        style && style,
+      ]}
+    >
+      {before && <View style={styles.choice__before}>{before}</View>}
+      {isLoading ? (
+        <Loader fill="surfacePrimary" style={styles.choice__loader} />
+      ) : (
+        options.map((item) => {
+          const isItemActive = String(item.value) === String(active.value)
+          const hasIcon = Boolean(item.icon || item.iconActive)
+          const itemFillKey = isItemActive
+            ? isDisabled
+              ? fillItemActiveDisabled ||
+                appearanceConfig.fillItemActiveDisabled ||
+                fillItemActive ||
+                appearanceConfig.fillItemActive
+              : fillItemActive || appearanceConfig.fillItemActive
+            : isDisabled
+              ? fillItemDisabled ||
+                appearanceConfig.fillItemDisabled ||
+                fillItem ||
+                appearanceConfig.fillItem
+              : fillItem || appearanceConfig.fillItem
+          const itemLabelTextColor = isDisabled
+            ? labelTextColorDisabled ||
+              appearanceConfig.labelTextColorDisabled ||
+              appearanceConfig.labelTextColor
+            : isItemActive
+              ? labelTextColorActive ||
+                appearanceConfig.labelTextColorActive ||
+                appearanceConfig.labelTextColor
+              : labelTextColor || appearanceConfig.labelTextColor
+          const itemIconFill = isDisabled
+            ? iconFillDisabled || appearanceConfig.iconFillDisabled
+            : isItemActive
+              ? iconFillActive || appearanceConfig.iconFillActive
+              : iconFill || appearanceConfig.iconFill
+          const itemIconBeforeFill = isDisabled
+            ? iconBeforeFillDisabled || appearanceConfig.iconBeforeFillDisabled
+            : isItemActive
+              ? iconBeforeFillActive || appearanceConfig.iconBeforeFillActive
+              : iconBeforeFill || appearanceConfig.iconBeforeFill
+          const itemIconAfterFill = isDisabled
+            ? iconAfterFillDisabled || appearanceConfig.iconAfterFillDisabled
+            : isItemActive
+              ? iconAfterFillActive || appearanceConfig.iconAfterFillActive
+              : iconAfterFill || appearanceConfig.iconAfterFill
+
+          return (
+            <Pressable
+              key={item.value}
+              disabled={isDisabled}
+              style={[
+                styles.choice__item,
+                sizeKey && styles[`choice__item_size_${sizeKey}`],
+                hasIcon &&
+                  sizeKey &&
+                  styles[`choice__item_icon_size_${sizeKey}`],
+                shapeKey && styles[`choice_shape_${shapeKey}`],
+                itemFillKey && tokens[`fill_${itemFillKey}`],
+                borderColorKey && tokens[`border_color_${borderColorKey}`],
+              ]}
+              onPress={() => {
+                onItemPress(item, isItemActive)
+              }}
+            >
+              <View
+                style={[
+                  styles.choice__item_label,
+                  sizeKey && styles[`choice__item_label_size_${sizeKey}`],
+                ]}
+              >
+                {itemBefore}
+                {(item.iconBefore || item.iconBeforeActive) && (
+                  <Icon
+                    size={resolvedIconBeforeSize}
+                    iconFill={itemIconBeforeFill}
+                    iconSize={resolvedIconBeforeSize}
+                    SVGIcon={
+                      isItemActive
+                        ? item.iconBeforeActive || item.iconBefore
+                        : item.iconBefore
+                    }
+                  />
+                )}
+                {item.label && (
+                  <Text
+                    size={labelTextSize || appearanceConfig.labelTextSize}
+                    textColor={itemLabelTextColor}
+                    weight={labelTextWeight || appearanceConfig.labelTextWeight}
+                  >
+                    {item.label}
+                  </Text>
+                )}
+                {(item.icon || item.iconActive) && (
+                  <Icon
+                    size={resolvedIconSize}
+                    iconFill={itemIconFill}
+                    iconSize={resolvedIconSize}
+                    SVGIcon={
+                      isItemActive ? item.iconActive || item.icon : item.icon
+                    }
+                  />
+                )}
+                {(item.iconAfter || item.iconAfterActive) && (
+                  <Icon
+                    size={resolvedIconAfterSize}
+                    iconFill={itemIconAfterFill}
+                    iconSize={resolvedIconAfterSize}
+                    SVGIcon={
+                      isItemActive
+                        ? item.iconAfterActive || item.iconAfter
+                        : item.iconAfter
+                    }
+                  />
+                )}
+                {itemAfter}
+              </View>
+            </Pressable>
+          )
+        })
+      )}
+      {after && <View style={styles.choice__after}>{after}</View>}
+    </View>
+  )
+}
+
+export { Choice, choiceConfig }

package/src/components/Choice/appearance/choiceDefault.ts

@@ -0,0 +1,34 @@
+import type { ChoiceAppearance } from '../Choice.interface'
+
+const choiceAppearanceDefault = {
+  defaultMutedPrimary: {
+    fill: 'surfaceSecondary',
+    fillItem: 'surfaceSecondary',
+    fillItemActive: 'accentTertiary',
+    labelTextColor: 'surfaceTextPrimary',
+    labelTextColorActive: 'surfaceTextPrimary',
+    borderColor: 'surfaceBorderSecondary',
+    iconAfterFill: 'surfaceItemQuaternary',
+    iconAfterFillActive: 'surfaceItemSecondary',
+    iconBeforeFill: 'surfaceItemQuaternary',
+    iconBeforeFillActive: 'surfaceItemSecondary',
+    iconFill: 'surfaceItemQuaternary',
+    iconFillActive: 'surfaceItemSecondary',
+  },
+  defaultPrimary: {
+    fill: 'surfaceSecondary',
+    fillItem: 'surfaceSecondary',
+    fillItemActive: 'accentPrimary',
+    labelTextColor: 'surfaceTextPrimary',
+    labelTextColorActive: 'accentTextPrimary',
+    borderColor: 'surfaceBorderQuaternary',
+    iconAfterFill: 'surfaceItemQuaternary',
+    iconAfterFillActive: 'surfaceItemSecondary',
+    iconBeforeFill: 'surfaceItemQuaternary',
+    iconBeforeFillActive: 'surfaceItemSecondary',
+    iconFill: 'surfaceItemQuaternary',
+    iconFillActive: 'surfaceItemSecondary',
+  },
+} satisfies ChoiceAppearance
+
+export { choiceAppearanceDefault }

package/src/components/Choice/appearance/choiceDisabled.ts

@@ -0,0 +1,19 @@
+import type { ChoiceAppearance } from '../Choice.interface'
+
+const choiceAppearanceDisabled = {
+  disabledPrimary: {
+    fill: 'disabledTertiary',
+    fillItem: 'disabledTertiary',
+    fillItemActive: 'surfaceDisabled',
+    labelTextColor: 'surfaceTextQuaternary',
+    borderColor: 'surfaceBorderPrimary',
+    iconAfterFill: 'surfaceItemPrimary',
+    iconAfterFillActive: 'disabledItemSecondary',
+    iconBeforeFill: 'surfaceItemPrimary',
+    iconBeforeFillActive: 'disabledItemSecondary',
+    iconFill: 'surfaceItemPrimary',
+    iconFillActive: 'disabledItemSecondary',
+  },
+} satisfies ChoiceAppearance
+
+export { choiceAppearanceDisabled }

package/src/components/Choice/appearance/choiceError.ts

@@ -0,0 +1,19 @@
+import type { ChoiceAppearance } from '../Choice.interface'
+
+const choiceAppearanceError = {
+  errorPrimary: {
+    fill: 'errorTertiary',
+    fillItem: 'errorTertiary',
+    fillItemActive: 'errorPrimary',
+    labelTextColor: 'errorTextSecondary',
+    borderColor: 'errorBorderQuaternary',
+    iconAfterFill: 'errorItemSecondary',
+    iconAfterFillActive: 'errorItemTertiary',
+    iconBeforeFill: 'errorItemSecondary',
+    iconBeforeFillActive: 'errorItemTertiary',
+    iconFill: 'errorItemSecondary',
+    iconFillActive: 'errorItemTertiary',
+  },
+} satisfies ChoiceAppearance
+
+export { choiceAppearanceError }

package/src/components/Choice/appearance/choiceRequire.ts

@@ -0,0 +1,20 @@
+import type { ChoiceAppearance } from '../Choice.interface'
+
+const choiceAppearanceRequire = {
+  requirePrimary: {
+    fill: 'warningTertiary',
+    fillItem: 'warningTertiary',
+    fillItemActive: 'warningPrimary',
+    labelTextColor: 'warningTextSecondary',
+    labelTextColorActive: 'warningTextPrimary',
+    borderColor: 'warningBorderSecondary',
+    iconAfterFill: 'warningItemSecondary',
+    iconAfterFillActive: 'warningItemTertiary',
+    iconBeforeFill: 'warningItemSecondary',
+    iconBeforeFillActive: 'warningItemTertiary',
+    iconFill: 'warningItemSecondary',
+    iconFillActive: 'warningItemTertiary',
+  },
+} satisfies ChoiceAppearance
+
+export { choiceAppearanceRequire }

package/src/components/Choice/appearance/choiceShape.ts

@@ -0,0 +1,24 @@
+import type { ChoiceAppearanceShape } from '../Choice.interface'
+
+const choiceAppearanceShape = {
+  circular: {
+    shape: 'circular',
+  },
+  rounded: {
+    shape: 'rounded',
+  },
+  roundedXL: {
+    shape: 'roundedXL',
+  },
+  roundedL: {
+    shape: 'roundedL',
+  },
+  roundedM: {
+    shape: 'roundedM',
+  },
+  roundedS: {
+    shape: 'roundedS',
+  },
+} satisfies ChoiceAppearanceShape
+
+export { choiceAppearanceShape }

package/src/components/Choice/appearance/choiceSize.ts

@@ -0,0 +1,21 @@
+import type { ChoiceAppearanceSize } from '../Choice.interface'
+
+const choiceAppearanceSize = {
+  sizeL: {
+    size: 'l',
+    labelTextSize: 'm',
+    iconSize: '24',
+  },
+  sizeM: {
+    size: 'm',
+    labelTextSize: 'm',
+    iconSize: '24',
+  },
+  sizeS: {
+    size: 's',
+    labelTextSize: 's',
+    iconSize: '20',
+  },
+} satisfies ChoiceAppearanceSize
+
+export { choiceAppearanceSize }

package/src/components/Choice/appearance/choiceStyle.ts

@@ -0,0 +1,17 @@
+import type { ChoiceAppearanceStyle } from '../Choice.interface'
+
+const choiceAppearanceStyle = {
+  solid: {
+    borderColor: 'none',
+  },
+  outlined: {
+    fill: 'none',
+  },
+  full: {},
+  ghost: {
+    fill: 'none',
+    borderColor: 'none',
+  },
+} satisfies ChoiceAppearanceStyle
+
+export { choiceAppearanceStyle }

package/src/components/Choice/appearance/choiceSuccess.ts

@@ -0,0 +1,20 @@
+import type { ChoiceAppearance } from '../Choice.interface'
+
+const choiceAppearanceSuccess = {
+  successPrimary: {
+    fill: 'successTertiary',
+    fillItem: 'successTertiary',
+    fillItemActive: 'successSecondary',
+    labelTextColor: 'successTextSecondary',
+    labelTextColorActive: 'successTextPrimary',
+    borderColor: 'successBorderSecondary',
+    iconAfterFill: 'successItemSecondary',
+    iconAfterFillActive: 'successItemTertiary',
+    iconBeforeFill: 'successItemSecondary',
+    iconBeforeFillActive: 'successItemTertiary',
+    iconFill: 'successItemSecondary',
+    iconFillActive: 'successItemTertiary',
+  },
+} satisfies ChoiceAppearance
+
+export { choiceAppearanceSuccess }

package/src/components/Choice/index.ts

@@ -0,0 +1,31 @@
+import { Choice, choiceConfig } from './Choice'
+import { choiceAppearance } from './Choice.appearance'
+import type {
+  ChoiceActive,
+  ChoiceAppearance,
+  ChoiceAppearanceKey,
+  ChoiceAppearanceProps,
+  ChoiceAppearanceShape,
+  ChoiceAppearanceSize,
+  ChoiceAppearanceStyle,
+  ChoiceConfig,
+  ChoiceOptionsItem,
+  ChoiceProps,
+} from './Choice.interface'
+import { choiceSizeList } from './styles/choiceSize'
+import type { choiceSizePropsType } from './styles/choiceSize'
+
+export { Choice, choiceAppearance, choiceConfig, choiceSizeList }
+export type {
+  ChoiceActive,
+  ChoiceAppearance,
+  ChoiceAppearanceKey,
+  ChoiceAppearanceProps,
+  ChoiceAppearanceShape,
+  ChoiceAppearanceSize,
+  ChoiceAppearanceStyle,
+  ChoiceConfig,
+  ChoiceOptionsItem,
+  ChoiceProps,
+  choiceSizePropsType,
+}