@controleonline/ui-default 1.0.277 → 1.0.278

package/docs/compact-order-history-1047.md

@@ -0,0 +1,25 @@
+# DefaultTable compact pilot — app-community #1047
+
+The compact appearance is opt-in. Order History is the pilot; default consumers retain their existing appearance and actions. Search, controlled filters, accessible card sorting, column visibility, table/cards, numbered pagination and report totals reuse the shared table and order services.
+
+Theme authority remains the main company/domain. Theme tokens override status colors; registered status.color follows; neutral theme text is last. Franchise switching does not override domain authority. No database writes or staging Theme bindings are shipped. Business permissions, payment/cancellation eligibility and request/security filters are preserved.
+
+Header logos send authentication only to the exact API origin; external images use Image without headers. Inline row/card navigation stays blocked during editing/saving, preserving existing store save callbacks. Provider extraction preserves hook order and unrelated bootstrap dependencies, checked by ordered AST fingerprints.
+
+Pre-existing published dependencies are merged by their exact gitHeads rather than importing latest dev:
+- ui-default 1.0.276 f0083eb73074f402e81f4e0c832af0bb829c2047; published patch277 1dff39dc32be3320cd4a786baf5621e8a2d3ac00.
+- ui-orders 1.3.42 bfe2f013dc9bcaf033ba0db80894f021bfb2fbfb.
+- ui-layout 1.0.15 37f1dff3fecf1f08bc8846a319af83c9fcbff502.
+- ui-common 1.2.89 4919724c04f3d6e66280db4c9e2a66db65c47cc0; published patch90 e19f14d4afefb89a0700d63753785815364af835.
+
+Patch90 Connections.js had an unterminated searchKey quote. Only that quote is repaired to make the retained published fixes compilable. Existing DefaultTable tests are split without discarding cases; fixtures now model reactive stores, company-scoped preferences, route context and CSS sticky positioning. Legacy toolbar tests isolate the inactive compact branch; dedicated compact suites cover its controls.
+
+Validation: 135 assertions in 22 suites, 591 React files parsed, and isolated Expo web export (5492 modules). These are source/composition checks; authenticated staging validation remains a separate promotion gate. Isolation used source-module copies; final released-package pins must be verified again by release validation.
+
+From app-community with installed release packages:
+```sh
+node scripts/validate-compact-sources.cjs
+node node_modules/jest/bin/jest.js --config jest.compact.config.cjs --maxWorkers=2 --testPathPattern='compact|Compact|headerLogoProtocol|DefaultCompanyHeaderLogo|useDefaultTableStoreSync|providerEffects|DefaultProviderAuthority|deviceConfigBootstrap|mercadoLivreIntegrationHelpers|DefaultTable\.(group[123]\.)?test.js|OrderHistoryPage.test.js|DefaultTableCards.layout|DefaultTableToolbar.waiter'
+```
+
+For isolated sibling source clones, set CONTROLEONLINE_MODULES_ROOT to their common directory. The committed configuration has no machine-specific absolute path. Published versions planned: ui-default1.0.278, ui-orders1.3.43, ui-layout1.0.16, ui-common1.2.91.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@controleonline/ui-default",
-  "version": "1.0.277",
+  "version": "1.0.278",
   "author": "ControleOnline",
   "description": "ControleOnline Default Quasar UI Component",
   "license": "MIT",

package/src/react/components/filters/CompactFilterSelector.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useMemo, useState } from 'react';
 import {
   Image,
   Modal,
@@ -19,7 +19,9 @@ import {
 } from '@controleonline/ui-common/src/react/utils/storeColumns';
 import { isValidFeatherIcon } from '../inputs/defaultInputUtils';
 import createStyles from './CompactFilterSelector.styles';
-
+import {DefaultTableThemeContext} from '../table/useDefaultTableTheme';
+import DefaultCompactFilterPicker from './DefaultCompactFilterPicker';
+
 const buildTheme = ({ accentColor, themeColors = {} }) => ({
   accentColor: accentColor,
   activeBackgroundColor:
@@ -30,68 +32,68 @@ const buildTheme = ({ accentColor, themeColors = {} }) => ({
     themeColors.activeChevronColor ||
     themeColors.activeIconColor ||
     accentColor,
-  activeIconColor: themeColors.activeIconColor || accentColor,
-  activeTextColor: themeColors.activeTextColor || accentColor,
-  backgroundColor: themeColors.backgroundColor || '#F8FAFC',
-  borderColor: themeColors.borderColor || '#E2E8F0',
-  captionColor: themeColors.captionColor || '#94A3B8',
-  chevronColor: themeColors.chevronColor || '#94A3B8',
-  closeIconColor: themeColors.closeIconColor || '#64748B',
-  iconBackgroundColor: themeColors.iconBackgroundColor || '#E2E8F0',
-  iconColor: themeColors.iconColor || '#64748B',
-  modalBackgroundColor: themeColors.modalBackgroundColor || '#FFFFFF',
-  modalOverlayColor:
-    themeColors.modalOverlayColor || 'rgba(15, 23, 42, 0.35)',
-  modalTitleColor: themeColors.modalTitleColor || '#0F172A',
-  optionBackgroundColor: themeColors.optionBackgroundColor || '#F8FAFC',
-  optionBorderColor: themeColors.optionBorderColor || '#E2E8F0',
+  activeIconColor: themeColors.activeIconColor || accentColor,
+  activeTextColor: themeColors.activeTextColor || accentColor,
+  backgroundColor: themeColors.backgroundColor || '#F8FAFC',
+  borderColor: themeColors.borderColor || '#E2E8F0',
+  captionColor: themeColors.captionColor || '#94A3B8',
+  chevronColor: themeColors.chevronColor || '#94A3B8',
+  closeIconColor: themeColors.closeIconColor || '#64748B',
+  iconBackgroundColor: themeColors.iconBackgroundColor || '#E2E8F0',
+  iconColor: themeColors.iconColor || '#64748B',
+  modalBackgroundColor: themeColors.modalBackgroundColor || '#FFFFFF',
+  modalOverlayColor:
+    themeColors.modalOverlayColor || 'rgba(15, 23, 42, 0.35)',
+  modalTitleColor: themeColors.modalTitleColor || '#0F172A',
+  optionBackgroundColor: themeColors.optionBackgroundColor || '#F8FAFC',
+  optionBorderColor: themeColors.optionBorderColor || '#E2E8F0',
   optionSelectedTextColor:
     themeColors.optionSelectedTextColor || accentColor,
   textColor: themeColors.textColor || '#0F172A',
 });
-
-const noop = () => {};
-
-const normalizeText = value => String(value || '').trim();
-
-const resolveStoreName = store => {
-  if (typeof store === 'string') return normalizeText(store);
-  return normalizeText(store?.storeName || store?.name || '');
-};
-
-const resolveStoreFieldLabel = ({ fallbackLabel = '', field = '', store = '' }) => {
-  const storeName = resolveStoreName(store);
-  const fieldName = normalizeText(field);
-  if (!storeName || !fieldName) return fallbackLabel;
-
-  const { columns } = resolveStoreConfigByName(storeName);
-  const column = resolveStoreColumn(columns, fieldName);
-  const labelKey = normalizeText(column?.label || fieldName);
-  const translatedLabel =
-    global.t?.t(storeName, 'label', labelKey) ||
-    global.t?.t(storeName, 'input', labelKey);
-
-  return (
-    translatedLabel ||
-    formatStoreColumnLabel({
-      columns,
-      fallbackLabel: fallbackLabel || labelKey,
-      fieldName,
-      storeName,
-    }) ||
-    fallbackLabel
-  );
-};
-
+
+const noop = () => {};
+
+const normalizeText = value => String(value || '').trim();
+
+const resolveStoreName = store => {
+  if (typeof store === 'string') return normalizeText(store);
+  return normalizeText(store?.storeName || store?.name || '');
+};
+
+const resolveStoreFieldLabel = ({ fallbackLabel = '', field = '', store = '' }) => {
+  const storeName = resolveStoreName(store);
+  const fieldName = normalizeText(field);
+  if (!storeName || !fieldName) return fallbackLabel;
+
+  const { columns } = resolveStoreConfigByName(storeName);
+  const column = resolveStoreColumn(columns, fieldName);
+  const labelKey = normalizeText(column?.label || fieldName);
+  const translatedLabel =
+    global.t?.t(storeName, 'label', labelKey) ||
+    global.t?.t(storeName, 'input', labelKey);
+
+  return (
+    translatedLabel ||
+    formatStoreColumnLabel({
+      columns,
+      fallbackLabel: fallbackLabel || labelKey,
+      fieldName,
+      storeName,
+    }) ||
+    fallbackLabel
+  );
+};
+
 const CompactFilterSelector = ({
   accentColor = null,
   active = false,
   children = null,
   dense = false,
   disabled = false,
-  icon = 'sliders',
-  label = '',
-  labelCaption = '',
+  icon = 'sliders',
+  label = '',
+  labelCaption = '',
   onClose = null,
   onBeforeOpen = null,
   onSearchChange = null,
@@ -104,6 +106,7 @@ const CompactFilterSelector = ({
   themeColors = {},
   title = '',
 }) => {
+  const compactTheme = useContext(DefaultTableThemeContext);
   const themeStore = useStore('theme');
   const [visible, setVisible] = useState(false);
   const [searchText, setSearchText] = useState('');
@@ -126,15 +129,15 @@ const CompactFilterSelector = ({
     }),
     [resolvedAccentColor, themeColors, themeStoreColors],
   );
-  const styles = useMemo(
-    () => createStyles(resolvedTheme, dense, windowWidth),
-    [dense, resolvedTheme, windowWidth],
-  );
-  const storeFieldLabel = resolveStoreFieldLabel({
-    fallbackLabel: labelCaption || title,
-    field,
-    store,
-  });
+  const styles = useMemo(
+    () => createStyles(resolvedTheme, dense, windowWidth),
+    [dense, resolvedTheme, windowWidth],
+  );
+  const storeFieldLabel = resolveStoreFieldLabel({
+    fallbackLabel: labelCaption || title,
+    field,
+    store,
+  });
   const resolvedLabelCaption = labelCaption || storeFieldLabel;
   const resolvedTitle = title || storeFieldLabel;
   const selectedOption = useMemo(
@@ -152,35 +155,35 @@ const CompactFilterSelector = ({
   const triggerIconColor = active
     ? selectedOptionColor || resolvedTheme.activeIconColor
     : resolvedTheme.iconColor;
-
+
   const closeModal = useCallback(() => {
     setVisible(false);
     setSearchText('');
     onClose?.();
   }, [onClose]);
-
+
   const openModal = useCallback(() => {
-    if (disabled) {
-      return;
-    }
-
-    try {
-      const maybePromise = onBeforeOpen?.();
-      if (maybePromise && typeof maybePromise.then === 'function') {
-        maybePromise
-          .then(() => {
-            setVisible(true);
-          })
-          .catch(() => {
-            // Keep the modal closed if the lazy load fails.
-          });
-        return;
-      }
-    } catch (error) {
-      return;
-    }
-
-    setVisible(true);
+    if (disabled) {
+      return;
+    }
+
+    try {
+      const maybePromise = onBeforeOpen?.();
+      if (maybePromise && typeof maybePromise.then === 'function') {
+        maybePromise
+          .then(() => {
+            setVisible(true);
+          })
+          .catch(() => {
+            // Keep the modal closed if the lazy load fails.
+          });
+        return;
+      }
+    } catch (error) {
+      return;
+    }
+
+    setVisible(true);
   }, [disabled, onBeforeOpen]);
 
   /*
@@ -203,37 +206,43 @@ const CompactFilterSelector = ({
       normalizeText(option?.key).toLowerCase().includes(normalizedSearch),
     );
   }, [onSearchChange, options, searchable, searchText]);
-
-  const handleSelect = useCallback(optionKey => {
-    const shouldClose = onSelect?.(optionKey, {
-      close: closeModal,
-      open: openModal,
-    });
-
-    if (shouldClose !== false) {
-      closeModal();
-    }
-  }, [closeModal, onSelect, openModal]);
-
-  const resolvedChildren = useMemo(() => {
-    if (typeof children === 'function') {
-      return children({ close: closeModal, open: openModal });
-    }
-
-    return children;
-  }, [children, closeModal, openModal]);
-
-  return (
-    <>
-      <TouchableOpacity
-        style={[
-          styles.trigger,
-          active ? styles.triggerActive : null,
-        ]}
-        activeOpacity={0.9}
-        disabled={disabled}
-        onPress={openModal}
-      >
+
+  const handleSelect = useCallback(optionKey => {
+    const shouldClose = onSelect?.(optionKey, {
+      close: closeModal,
+      open: openModal,
+    });
+
+    if (shouldClose !== false) {
+      closeModal();
+    }
+  }, [closeModal, onSelect, openModal]);
+
+  const resolvedChildren = useMemo(() => {
+    if (typeof children === 'function') {
+      return children({ close: closeModal, open: openModal });
+    }
+
+    return children;
+  }, [children, closeModal, openModal]);
+
+  if (compactTheme?.compact) return <DefaultCompactFilterPicker visible={visible} disabled={disabled}
+    label={label} title={resolvedTitle} selectedKey={selectedKey} options={filteredOptions} searchText={searchText}
+    searchable={searchable} onSearch={handleSearchChange} onOpen={openModal} onClose={closeModal} onSelect={handleSelect}>
+    {resolvedChildren}
+  </DefaultCompactFilterPicker>;
+
+  return (
+    <>
+      <TouchableOpacity
+        style={[
+          styles.trigger,
+          active ? styles.triggerActive : null,
+        ]}
+        activeOpacity={0.9}
+        disabled={disabled}
+        onPress={openModal}
+      >
         <View style={[styles.iconWrap, active ? styles.iconWrapActive : null]}>
           {active && selectedOption?.image ? (
             <Image
@@ -249,58 +258,58 @@ const CompactFilterSelector = ({
             />
           )}
         </View>
-
-        <View style={styles.textWrap}>
-          {!!resolvedLabelCaption && (
-            <Text
-              numberOfLines={1}
-              style={[
+
+        <View style={styles.textWrap}>
+          {!!resolvedLabelCaption && (
+            <Text
+              numberOfLines={1}
+              style={[
                 styles.triggerCaption,
                 active ? styles.triggerCaptionActive : null,
                 active && selectedOptionColor ? { color: selectedOptionColor } : null,
               ]}
-            >
-              {resolvedLabelCaption}
-            </Text>
-          )}
-
-          <Text
-            numberOfLines={1}
+            >
+              {resolvedLabelCaption}
+            </Text>
+          )}
+
+          <Text
+            numberOfLines={1}
             style={[
               styles.triggerText,
               active ? styles.triggerTextActive : null,
               active && selectedOptionColor ? { color: selectedOptionColor } : null,
             ]}
-          >
-            {label}
-          </Text>
-        </View>
-
-        <Icon
-          name="chevron-down"
-          size={dense ? 14 : 16}
-          color={active ? resolvedTheme.activeChevronColor : resolvedTheme.chevronColor}
-        />
-      </TouchableOpacity>
-
-      <Modal
-        transparent
-        visible={visible}
-        animationType="fade"
-        onRequestClose={closeModal}
-      >
-        <TouchableWithoutFeedback onPress={closeModal}>
-          <View style={styles.modalOverlay}>
-            <TouchableWithoutFeedback onPress={noop}>
-              <View style={styles.modalCard}>
-                <View style={styles.modalHeader}>
-                  <Text style={styles.modalTitle}>{resolvedTitle}</Text>
-
-                  <TouchableOpacity onPress={closeModal} activeOpacity={0.8}>
-                    <Icon name="x" size={20} color={resolvedTheme.closeIconColor} />
-                  </TouchableOpacity>
-                </View>
-
+          >
+            {label}
+          </Text>
+        </View>
+
+        <Icon
+          name="chevron-down"
+          size={dense ? 14 : 16}
+          color={active ? resolvedTheme.activeChevronColor : resolvedTheme.chevronColor}
+        />
+      </TouchableOpacity>
+
+      <Modal
+        transparent
+        visible={visible}
+        animationType="fade"
+        onRequestClose={closeModal}
+      >
+        <TouchableWithoutFeedback onPress={closeModal}>
+          <View style={styles.modalOverlay}>
+            <TouchableWithoutFeedback onPress={noop}>
+              <View style={styles.modalCard}>
+                <View style={styles.modalHeader}>
+                  <Text style={styles.modalTitle}>{resolvedTitle}</Text>
+
+                  <TouchableOpacity onPress={closeModal} activeOpacity={0.8}>
+                    <Icon name="x" size={20} color={resolvedTheme.closeIconColor} />
+                  </TouchableOpacity>
+                </View>
+
                 <ScrollView
                   style={styles.modalScroll}
                   contentContainerStyle={styles.modalContent}
@@ -331,12 +340,12 @@ const CompactFilterSelector = ({
                     const hasOptionVisual = Boolean(option?.image || optionIconName || shouldRenderOptionFallbackText);
 
                     return (
-                      <TouchableOpacity
-                        key={option.key}
-                        style={[
-                          styles.modalOption,
-                          isSelected ? styles.modalOptionActive : null,
-                        ]}
+                      <TouchableOpacity
+                        key={option.key}
+                        style={[
+                          styles.modalOption,
+                          isSelected ? styles.modalOptionActive : null,
+                        ]}
                         activeOpacity={0.9}
                         onPress={() => handleSelect(option.key)}
                       >
@@ -377,27 +386,27 @@ const CompactFilterSelector = ({
                             {option.label}
                           </Text>
                         )}
-
-                        {isSelected ? (
+
+                        {isSelected ? (
                           <Icon
                             name="check"
                             size={16}
                             color={optionColor || resolvedTheme.activeIconColor}
                           />
-                        ) : null}
-                      </TouchableOpacity>
-                    );
-                  })}
-
-                  {resolvedChildren}
-                </ScrollView>
-              </View>
-            </TouchableWithoutFeedback>
-          </View>
-        </TouchableWithoutFeedback>
-      </Modal>
-    </>
-  );
-};
-
-export default CompactFilterSelector;
+                        ) : null}
+                      </TouchableOpacity>
+                    );
+                  })}
+
+                  {resolvedChildren}
+                </ScrollView>
+              </View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </>
+  );
+};
+
+export default CompactFilterSelector;

package/src/react/components/filters/DefaultColumnFilter.js

@@ -42,7 +42,7 @@ const DefaultColumnFilter = ({
   const store = useStore(storeName);
   const peopleStore = useStore('people');
   const configs = store?.getters?.configs || {};
-  const { resolvedAccentColor } = useDefaultTableTheme(accentColor);
+  const { resolvedAccentColor, themeColors } = useDefaultTableTheme(accentColor);
   const [loadedItems, setLoadedItems] = useState([]);
   const [loadedKey, setLoadedKey] = useState('');
   const fieldName = getColumnKey(column);
@@ -168,7 +168,7 @@ const DefaultColumnFilter = ({
           dense
           store={storeName}
           field={fieldName}
-          labelCaption={global.t?.t(storeName, 'label', column?.label || fieldName)}
+          labelCaption={themeColors.compact ? column?.compactLabel || fieldName : global.t?.t(storeName, 'label', column?.label || fieldName)}
           value={filterValue.shortcut || 'all'}
           customRange={filterValue.customRange || { from: '', to: '' }}
           onChange={optionKey =>
@@ -196,9 +196,9 @@ const DefaultColumnFilter = ({
     const explicitOptions = resolveOptions(column);
     const rawOptions = Array.isArray(explicitOptions)
       ? mapOptions(column, explicitOptions, storeName)
-      : mapOptions(column, loadedItems, storeName);
+      : Array.isArray(column.list) ? buildOptionsFromColumn(column, null, storeName) : mapOptions(column, loadedItems, storeName);
     const options = [
-      { key: '', label: global.t?.t(storeName, 'label', 'select') },
+      { key: '', label: themeColors.compact ? 'Todos' : global.t?.t(storeName, 'label', 'select') },
       ...rawOptions,
     ];
     const selectedKey = normalizeOptionKey(filters?.[fieldName]);
@@ -208,11 +208,12 @@ const DefaultColumnFilter = ({
       <View style={[style, styles.filterCell]}>
         <CompactFilterSelector
           dense
+          title={themeColors.compact ? column?.compactLabel || fieldName : undefined}
           store={storeName}
           field={fieldName}
           icon="filter"
           onBeforeOpen={onBeforeOpen || (() => loadListOptions())}
-          onSearchChange={onSearchChange || (value => loadListOptions(value))}
+          onSearchChange={onSearchChange || (Array.isArray(column.list) || Array.isArray(explicitOptions) ? undefined : value => loadListOptions(value))}
           accentColor={resolvedAccentColor}
           active={Boolean(selectedKey)}
           label={selected?.label || options[0]?.label || ''}
@@ -231,7 +232,8 @@ const DefaultColumnFilter = ({
   return (
     <View style={[style, styles.filterCell]}>
       <TextInput
-        style={styles.filterInput}
+        accessibilityLabel={column?.compactLabel || fieldName}
+        style={[styles.filterInput, themeColors.compact ? {minHeight: 46, borderRadius: 9, fontSize: 14, borderColor: themeColors.inputBorder, color: themeColors.inputText, backgroundColor: themeColors.inputBackground} : null]}
         value={normalizeText(filters?.[fieldName])}
         placeholder={global.t?.t(storeName, 'input', column?.label || fieldName)}
         onChangeText={value => requestChange(fieldName, value)}

package/src/react/components/filters/DefaultCompactFilterPicker.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {Image, StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import DefaultCompactDialog from '../table/DefaultCompactDialog';
+import useDefaultTableTheme from '../table/useDefaultTableTheme';
+
+// Presentation only: loading, scoped options and date validation stay in the existing selector.
+export default function DefaultCompactFilterPicker({visible, disabled, label, title, selectedKey, options, searchText, searchable, onSearch, onOpen, onClose, onSelect, children}) {
+  const {themeColors: c} = useDefaultTableTheme();
+  return <>
+    <TouchableOpacity accessibilityRole="button" accessibilityLabel={`Selecionar ${title}`} accessibilityState={{expanded: visible, disabled}}
+      disabled={disabled} onPress={onOpen} style={[s.trigger, {borderColor: c.inputBorder, backgroundColor: c.inputBackground}]}>
+      <Text numberOfLines={1} style={{flex: 1, color: c.inputText, fontSize: 14}}>{label || 'Todos'}</Text><Icon name="chevron-down" size={17} color={c.textSecondary} />
+    </TouchableOpacity>
+    <DefaultCompactDialog visible={visible} title={title} onClose={onClose} bodyHeight={Math.min(460, 40 + options.length * 48 + (searchable ? 60 : 0) + (children ? 220 : 0))}>
+      {searchable ? <TextInput accessibilityLabel={`Buscar em ${title}`} placeholder="Buscar opções" placeholderTextColor={c.inputPlaceholderText}
+        value={searchText} onChangeText={onSearch} style={[s.search, {borderColor: c.inputBorder, color: c.inputText, backgroundColor: c.inputBackground}]} /> : null}
+      {options.length === 0 ? <Text style={{color: c.textSecondary}}>Nenhuma opção encontrada.</Text> : null}
+      {options.map(option => <TouchableOpacity key={option.key} accessibilityRole="radio" accessibilityLabel={option.label || 'Todos'} accessibilityState={{selected: option.key === selectedKey}}
+        onPress={() => onSelect(option.key)} style={[s.option, {backgroundColor: option.key === selectedKey ? c.chipSelectedBackground : 'transparent', borderColor: c.tableRowBorder}]}>
+        {option.image ? <Image source={option.image} style={{width: 24, height: 24}} resizeMode="contain" /> : null}
+        {option.color ? <View style={[s.dot, {backgroundColor: option.color}]} /> : null}
+        <Text style={{flex: 1, color: c.textPrimary, fontSize: 14}}>{option.label || 'Todos'}</Text>
+        {option.key === selectedKey ? <Icon name="check" size={17} color={c.primary} /> : null}
+      </TouchableOpacity>)}
+      {children}
+    </DefaultCompactDialog>
+  </>;
+}
+const s = StyleSheet.create({
+  trigger: {minHeight: 46, width: '100%', borderWidth: 1, borderRadius: 9, paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center', gap: 8},
+  search: {minHeight: 44, borderWidth: 1, borderRadius: 9, paddingHorizontal: 12, fontSize: 16},
+  option: {minHeight: 46, borderRadius: 8, paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center', gap: 10, borderBottomWidth: 1},
+  dot: {width: 9, height: 9, borderRadius: 5},
+});