@fountain-ui/core 3.0.0-alpha.4 → 3.0.0-alpha.6

package/build/module/hooks/useContentContainerStyle.js

@@ -1,44 +1,43 @@
-import { useTheme } from '../styles';
-import useBreakpointUp from './useBreakpointUp';
-const defaultConfig = {
-  breakpoint: 'lg',
-  maxWidth: 'md',
-  styleProvider: () => undefined
-}; // TODO: Needs to refactor
+import { useBreakpointByWidth } from '@fountain-ui/styles';
+import { css, useTheme } from '../styles';
 
 function getMaxWidth(theme, breakpoint) {
   switch (breakpoint) {
-    case 'xs':
-      return theme.breakpoints.values['sm'];
-
-    case 'sm':
-      return theme.breakpoints.values['md'];
+    case 'lg':
+      return theme.breakpoints.values['lg'];
 
     case 'md':
-      return theme.breakpoints.values['lg'];
+      return theme.breakpoints.values['md'];
 
-    case 'lg':
+    default:
       return 'none';
   }
 }
 
-export default function useContentContainerStyle() {
-  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultConfig;
+function getPaddingHorizontal(theme, breakpoint) {
+  switch (breakpoint) {
+    case 'sm':
+      return theme.spacing(6);
+
+    default:
+      return theme.spacing(4);
+  }
+}
+
+export default function useContentContainerStyle(config) {
   const {
-    breakpoint,
     maxWidth,
     styleProvider
-  } = { ...defaultConfig,
-    ...config
-  };
+  } = config;
   const theme = useTheme();
+  const currentBreakpoint = useBreakpointByWidth();
   const additionalStyle = styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider(theme);
-  const yesStyle = [{
+  return css([{
     alignSelf: 'center',
-    maxWidth: getMaxWidth(theme, maxWidth),
+    maxWidth: maxWidth ?? getMaxWidth(theme, currentBreakpoint),
+    paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),
     width: '100%'
-  }, additionalStyle];
-  return useBreakpointUp(breakpoint, yesStyle, additionalStyle);
+  }, additionalStyle]);
 }
 ;
 //# sourceMappingURL=useContentContainerStyle.js.map

package/build/module/hooks/useContentContainerStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["useTheme","useBreakpointUp","defaultConfig","breakpoint","maxWidth","styleProvider","undefined","getMaxWidth","theme","breakpoints","values","useContentContainerStyle","config","additionalStyle","yesStyle","alignSelf","width"],"sources":["useContentContainerStyle.ts"],"sourcesContent":["import type { ScrollViewProps, ViewStyle } from 'react-native';\nimport type { Theme } from '../types';\nimport { useTheme } from '../styles';\nimport useBreakpointUp from './useBreakpointUp';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\ntype ContentContainerStyle = ScrollViewProps['contentContainerStyle'];\n\nexport interface Config {\n    breakpoint?: Breakpoint;\n    maxWidth?: Breakpoint;\n    styleProvider?: (theme: Theme) => ContentContainerStyle;\n}\n\nconst defaultConfig: Required<Config> = {\n    breakpoint: 'lg',\n    maxWidth: 'md',\n    styleProvider: () => undefined,\n};\n\n// TODO: Needs to refactor\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint): ViewStyle['maxWidth'] {\n    switch (breakpoint) {\n        case 'xs':\n            return theme.breakpoints.values['sm'];\n        case 'sm':\n            return theme.breakpoints.values['md'];\n        case 'md':\n            return theme.breakpoints.values['lg'];\n        case 'lg':\n            return 'none';\n    }\n}\n\nexport default function useContentContainerStyle(config: Config = defaultConfig): ContentContainerStyle {\n    const {\n        breakpoint,\n        maxWidth,\n        styleProvider,\n    } = {\n        ...defaultConfig,\n        ...config,\n    };\n\n    const theme = useTheme();\n\n    const additionalStyle = styleProvider?.(theme);\n\n    const yesStyle: ContentContainerStyle = [\n        {\n            alignSelf: 'center',\n            maxWidth: getMaxWidth(theme, maxWidth),\n            width: '100%',\n        },\n        additionalStyle,\n    ];\n\n    return useBreakpointUp(breakpoint, yesStyle, additionalStyle);\n};\n"],"mappings":"AAEA,SAASA,QAAT,QAAyB,WAAzB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAYA,MAAMC,aAA+B,GAAG;EACpCC,UAAU,EAAE,IADwB;EAEpCC,QAAQ,EAAE,IAF0B;EAGpCC,aAAa,EAAE,MAAMC;AAHe,CAAxC,C,CAMA;;AACA,SAASC,WAAT,CAAqBC,KAArB,EAAmCL,UAAnC,EAAkF;EAC9E,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOK,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;IACJ,KAAK,IAAL;MACI,OAAOF,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;IACJ,KAAK,IAAL;MACI,OAAOF,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;IACJ,KAAK,IAAL;MACI,OAAO,MAAP;EARR;AAUH;;AAED,eAAe,SAASC,wBAAT,GAAyF;EAAA,IAAvDC,MAAuD,uEAAtCV,aAAsC;EACpG,MAAM;IACFC,UADE;IAEFC,QAFE;IAGFC;EAHE,IAIF,EACA,GAAGH,aADH;IAEA,GAAGU;EAFH,CAJJ;EASA,MAAMJ,KAAK,GAAGR,QAAQ,EAAtB;EAEA,MAAMa,eAAe,GAAGR,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGG,KAAH,CAArC;EAEA,MAAMM,QAA+B,GAAG,CACpC;IACIC,SAAS,EAAE,QADf;IAEIX,QAAQ,EAAEG,WAAW,CAACC,KAAD,EAAQJ,QAAR,CAFzB;IAGIY,KAAK,EAAE;EAHX,CADoC,EAMpCH,eANoC,CAAxC;EASA,OAAOZ,eAAe,CAACE,UAAD,EAAaW,QAAb,EAAuBD,eAAvB,CAAtB;AACH;AAAA"}
+{"version":3,"names":["useBreakpointByWidth","css","useTheme","getMaxWidth","theme","breakpoint","breakpoints","values","getPaddingHorizontal","spacing","useContentContainerStyle","config","maxWidth","styleProvider","currentBreakpoint","additionalStyle","alignSelf","paddingHorizontal","width"],"sources":["useContentContainerStyle.ts"],"sourcesContent":["import type { ViewStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointByWidth } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type { Theme } from '../types';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport interface Config {\n    maxWidth?: number;\n    styleProvider?: (theme: Theme) => FountainUiStyle;\n}\n\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint): ViewStyle['maxWidth'] {\n    switch (breakpoint) {\n        case 'lg':\n            return theme.breakpoints.values['lg'];\n        case 'md':\n            return theme.breakpoints.values['md'];\n        default:\n            return 'none';\n    }\n}\n\nfunction getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): ViewStyle['paddingHorizontal'] {\n    switch (breakpoint) {\n        case 'sm':\n            return theme.spacing(6);\n        default:\n            return theme.spacing(4);\n    }\n}\n\nexport default function useContentContainerStyle(config: Config): FountainUiStyle {\n    const {\n        maxWidth,\n        styleProvider,\n    } = config;\n\n    const theme = useTheme();\n\n    const currentBreakpoint = useBreakpointByWidth();\n\n    const additionalStyle = styleProvider?.(theme);\n\n    return css([\n        {\n            alignSelf: 'center',\n            maxWidth: maxWidth ?? getMaxWidth(theme, currentBreakpoint),\n            paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),\n            width: '100%',\n        },\n        additionalStyle,\n    ]);\n};\n"],"mappings":"AAEA,SAASA,oBAAT,QAAqC,qBAArC;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;AAUA,SAASC,WAAT,CAAqBC,KAArB,EAAmCC,UAAnC,EAAkF;EAC9E,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOD,KAAK,CAACE,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;IACJ,KAAK,IAAL;MACI,OAAOH,KAAK,CAACE,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;IACJ;MACI,OAAO,MAAP;EANR;AAQH;;AAED,SAASC,oBAAT,CAA8BJ,KAA9B,EAA4CC,UAA5C,EAAoG;EAChG,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOD,KAAK,CAACK,OAAN,CAAc,CAAd,CAAP;;IACJ;MACI,OAAOL,KAAK,CAACK,OAAN,CAAc,CAAd,CAAP;EAJR;AAMH;;AAED,eAAe,SAASC,wBAAT,CAAkCC,MAAlC,EAAmE;EAC9E,MAAM;IACFC,QADE;IAEFC;EAFE,IAGFF,MAHJ;EAKA,MAAMP,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAMY,iBAAiB,GAAGd,oBAAoB,EAA9C;EAEA,MAAMe,eAAe,GAAGF,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGT,KAAH,CAArC;EAEA,OAAOH,GAAG,CAAC,CACP;IACIe,SAAS,EAAE,QADf;IAEIJ,QAAQ,EAAEA,QAAQ,IAAIT,WAAW,CAACC,KAAD,EAAQU,iBAAR,CAFrC;IAGIG,iBAAiB,EAAET,oBAAoB,CAACJ,KAAD,EAAQU,iBAAR,CAH3C;IAIII,KAAK,EAAE;EAJX,CADO,EAOPH,eAPO,CAAD,CAAV;AASH;AAAA"}

package/build/module/index.js

@@ -96,6 +96,8 @@ export { default as RadioGroup } from './RadioGroup';
 export * from './RadioGroup';
 export { default as Row } from './Row';
 export * from './Row';
+export { default as Section } from './Section';
+export * from './Section';
 export { default as ShadowView } from './ShadowView';
 export * from './ShadowView';
 export { default as Slide } from './Slide';

package/build/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","Accordion","AppBar","AspectRatio","Avatar","Badge","BottomSheetActions","BottomSheetContent","BottomSheetTitle","Button","ButtonBase","ButtonSet","Card","CardActions","CardContent","CardMedia","Checkbox","Chip","CircularProgress","Column","Dialog","DialogActions","DialogContent","DialogMedia","DialogTitle","Divider","Empty","Fab","IconButton","Image","Link","List","ListItem","ListItemIcon","ListItemSecondaryAction","ListItemText","ListSubheader","Menu","MenuItem","Modal","createModalCloseEvent","Pagination","PaginationItem","Paper","Portal","Radio","RadioGroup","Row","ShadowView","Slide","Slider","Snackbar","SnackbarContent","Spacer","SvgIcon","Switch","Tab","TabBase","Tabs","TextField","Toggle","Toolbar","Tooltip","Typography"],"sources":["index.ts"],"sourcesContent":["export * from './styles';\n\nexport * from './types';\n\nexport * from './hooks';\n\nexport * from './utils';\n\nexport * from './store';\n\nexport { default as Accordion } from './Accordion';\nexport * from './Accordion';\n\nexport { default as AppBar } from './AppBar';\nexport * from './AppBar';\n\nexport { default as AspectRatio } from './AspectRatio';\nexport * from './AspectRatio';\n\nexport { default as Avatar } from './Avatar';\nexport * from './Avatar';\n\nexport { default as Badge } from './Badge';\nexport * from './Badge';\n\nexport { default as BottomSheetActions } from './BottomSheetActions';\nexport * from './BottomSheetActions';\n\nexport { default as BottomSheetContent } from './BottomSheetContent';\nexport * from './BottomSheetContent';\n\nexport { default as BottomSheetTitle } from './BottomSheetTitle';\nexport * from './BottomSheetTitle';\n\nexport { default as Button } from './Button';\nexport * from './Button';\n\nexport { default as ButtonBase } from './ButtonBase';\nexport * from './ButtonBase';\n\nexport { default as ButtonSet } from './ButtonSet';\nexport * from './ButtonSet';\n\nexport { default as Card } from './Card';\nexport * from './Card';\n\nexport { default as CardActions } from './CardActions';\nexport * from './CardActions';\n\nexport { default as CardContent } from './CardContent';\nexport * from './CardContent';\n\nexport { default as CardMedia } from './CardMedia';\nexport * from './CardMedia';\n\nexport { default as Checkbox } from './Checkbox';\nexport * from './Checkbox';\n\nexport { default as Chip } from './Chip';\nexport * from './Chip';\n\nexport { default as CircularProgress } from './CircularProgress';\nexport * from './CircularProgress';\n\nexport { default as Column } from './Column';\nexport * from './Column';\n\nexport { default as Dialog } from './Dialog';\nexport * from './Dialog';\n\nexport { default as DialogActions } from './DialogActions';\nexport * from './DialogActions';\n\nexport { default as DialogContent } from './DialogContent';\nexport * from './DialogContent';\n\nexport { default as DialogMedia } from './DialogMedia';\nexport * from './DialogMedia';\n\nexport { default as DialogTitle } from './DialogTitle';\nexport * from './DialogTitle';\n\nexport { default as Divider } from './Divider';\nexport * from './Divider';\n\nexport { default as Empty } from './Empty';\nexport * from './Empty';\n\nexport { default as Fab } from './Fab';\nexport * from './Fab';\n\nexport { default as IconButton } from './IconButton';\nexport * from './IconButton';\n\nexport { default as Image } from './Image';\nexport * from './Image';\n\nexport * from './ImageCore';\n\nexport { default as Link } from './Link';\nexport * from './Link';\n\nexport { default as List } from './List';\nexport * from './List';\n\nexport { default as ListItem } from './ListItem';\nexport * from './ListItem';\n\nexport { default as ListItemIcon } from './ListItemIcon';\nexport * from './ListItemIcon';\n\nexport { default as ListItemSecondaryAction } from './ListItemSecondaryAction';\nexport * from './ListItemSecondaryAction';\n\nexport { default as ListItemText } from './ListItemText';\nexport * from './ListItemText';\n\nexport { default as ListSubheader } from './ListSubheader';\nexport * from './ListSubheader';\n\nexport { default as Menu } from './Menu';\nexport * from './Menu';\n\nexport { default as MenuItem } from './MenuItem';\nexport * from './MenuItem';\n\nexport { default as Modal, createModalCloseEvent } from './Modal';\nexport type { ModalCloseEvent } from './Modal';\nexport * from './Modal';\n\nexport { default as Pagination } from './Pagination';\nexport * from './Pagination';\n\nexport { default as PaginationItem } from './PaginationItem';\nexport * from './PaginationItem';\n\nexport { default as Paper } from './Paper';\nexport * from './Paper';\n\nexport { default as Portal } from './Portal';\nexport * from './Portal';\n\nexport { default as Radio } from './Radio';\nexport * from './Radio';\n\nexport { default as RadioGroup } from './RadioGroup';\nexport * from './RadioGroup';\n\nexport { default as Row } from './Row';\nexport * from './Row';\n\nexport { default as ShadowView } from './ShadowView';\nexport * from './ShadowView';\n\nexport { default as Slide } from './Slide';\nexport * from './Slide';\n\nexport { default as Slider } from './Slider';\nexport * from './Slider';\n\nexport { default as Snackbar } from './Snackbar';\nexport * from './Snackbar';\n\nexport { default as SnackbarContent } from './SnackbarContent';\nexport * from './SnackbarContent';\n\nexport { default as Spacer } from './Spacer';\nexport * from './Spacer';\n\nexport { default as SvgIcon } from './SvgIcon';\nexport * from './SvgIcon';\n\nexport { default as Switch } from './Switch';\nexport * from './Switch';\n\nexport { default as Tab } from './Tab';\nexport * from './Tab';\n\nexport { default as TabBase } from './TabBase';\nexport * from './TabBase';\n\nexport { default as Tabs } from './Tabs';\nexport * from './Tabs';\n\nexport { default as TextField } from './TextField';\nexport * from './TextField';\n\nexport { default as Toggle } from './Toggle';\nexport * from './Toggle';\n\nexport { default as Toolbar } from './Toolbar';\nexport * from './Toolbar';\n\nexport { default as Tooltip } from './Tooltip';\nexport * from './Tooltip';\n\nexport { default as Typography } from './Typography';\nexport * from './Typography';\n\nexport * from './animated';\n"],"mappings":"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"}
+{"version":3,"names":["default","Accordion","AppBar","AspectRatio","Avatar","Badge","BottomSheetActions","BottomSheetContent","BottomSheetTitle","Button","ButtonBase","ButtonSet","Card","CardActions","CardContent","CardMedia","Checkbox","Chip","CircularProgress","Column","Dialog","DialogActions","DialogContent","DialogMedia","DialogTitle","Divider","Empty","Fab","IconButton","Image","Link","List","ListItem","ListItemIcon","ListItemSecondaryAction","ListItemText","ListSubheader","Menu","MenuItem","Modal","createModalCloseEvent","Pagination","PaginationItem","Paper","Portal","Radio","RadioGroup","Row","Section","ShadowView","Slide","Slider","Snackbar","SnackbarContent","Spacer","SvgIcon","Switch","Tab","TabBase","Tabs","TextField","Toggle","Toolbar","Tooltip","Typography"],"sources":["index.ts"],"sourcesContent":["export * from './styles';\n\nexport * from './types';\n\nexport * from './hooks';\n\nexport * from './utils';\n\nexport * from './store';\n\nexport { default as Accordion } from './Accordion';\nexport * from './Accordion';\n\nexport { default as AppBar } from './AppBar';\nexport * from './AppBar';\n\nexport { default as AspectRatio } from './AspectRatio';\nexport * from './AspectRatio';\n\nexport { default as Avatar } from './Avatar';\nexport * from './Avatar';\n\nexport { default as Badge } from './Badge';\nexport * from './Badge';\n\nexport { default as BottomSheetActions } from './BottomSheetActions';\nexport * from './BottomSheetActions';\n\nexport { default as BottomSheetContent } from './BottomSheetContent';\nexport * from './BottomSheetContent';\n\nexport { default as BottomSheetTitle } from './BottomSheetTitle';\nexport * from './BottomSheetTitle';\n\nexport { default as Button } from './Button';\nexport * from './Button';\n\nexport { default as ButtonBase } from './ButtonBase';\nexport * from './ButtonBase';\n\nexport { default as ButtonSet } from './ButtonSet';\nexport * from './ButtonSet';\n\nexport { default as Card } from './Card';\nexport * from './Card';\n\nexport { default as CardActions } from './CardActions';\nexport * from './CardActions';\n\nexport { default as CardContent } from './CardContent';\nexport * from './CardContent';\n\nexport { default as CardMedia } from './CardMedia';\nexport * from './CardMedia';\n\nexport { default as Checkbox } from './Checkbox';\nexport * from './Checkbox';\n\nexport { default as Chip } from './Chip';\nexport * from './Chip';\n\nexport { default as CircularProgress } from './CircularProgress';\nexport * from './CircularProgress';\n\nexport { default as Column } from './Column';\nexport * from './Column';\n\nexport { default as Dialog } from './Dialog';\nexport * from './Dialog';\n\nexport { default as DialogActions } from './DialogActions';\nexport * from './DialogActions';\n\nexport { default as DialogContent } from './DialogContent';\nexport * from './DialogContent';\n\nexport { default as DialogMedia } from './DialogMedia';\nexport * from './DialogMedia';\n\nexport { default as DialogTitle } from './DialogTitle';\nexport * from './DialogTitle';\n\nexport { default as Divider } from './Divider';\nexport * from './Divider';\n\nexport { default as Empty } from './Empty';\nexport * from './Empty';\n\nexport { default as Fab } from './Fab';\nexport * from './Fab';\n\nexport { default as IconButton } from './IconButton';\nexport * from './IconButton';\n\nexport { default as Image } from './Image';\nexport * from './Image';\n\nexport * from './ImageCore';\n\nexport { default as Link } from './Link';\nexport * from './Link';\n\nexport { default as List } from './List';\nexport * from './List';\n\nexport { default as ListItem } from './ListItem';\nexport * from './ListItem';\n\nexport { default as ListItemIcon } from './ListItemIcon';\nexport * from './ListItemIcon';\n\nexport { default as ListItemSecondaryAction } from './ListItemSecondaryAction';\nexport * from './ListItemSecondaryAction';\n\nexport { default as ListItemText } from './ListItemText';\nexport * from './ListItemText';\n\nexport { default as ListSubheader } from './ListSubheader';\nexport * from './ListSubheader';\n\nexport { default as Menu } from './Menu';\nexport * from './Menu';\n\nexport { default as MenuItem } from './MenuItem';\nexport * from './MenuItem';\n\nexport { default as Modal, createModalCloseEvent } from './Modal';\nexport type { ModalCloseEvent } from './Modal';\nexport * from './Modal';\n\nexport { default as Pagination } from './Pagination';\nexport * from './Pagination';\n\nexport { default as PaginationItem } from './PaginationItem';\nexport * from './PaginationItem';\n\nexport { default as Paper } from './Paper';\nexport * from './Paper';\n\nexport { default as Portal } from './Portal';\nexport * from './Portal';\n\nexport { default as Radio } from './Radio';\nexport * from './Radio';\n\nexport { default as RadioGroup } from './RadioGroup';\nexport * from './RadioGroup';\n\nexport { default as Row } from './Row';\nexport * from './Row';\n\nexport { default as Section } from './Section';\nexport * from './Section';\n\nexport { default as ShadowView } from './ShadowView';\nexport * from './ShadowView';\n\nexport { default as Slide } from './Slide';\nexport * from './Slide';\n\nexport { default as Slider } from './Slider';\nexport * from './Slider';\n\nexport { default as Snackbar } from './Snackbar';\nexport * from './Snackbar';\n\nexport { default as SnackbarContent } from './SnackbarContent';\nexport * from './SnackbarContent';\n\nexport { default as Spacer } from './Spacer';\nexport * from './Spacer';\n\nexport { default as SvgIcon } from './SvgIcon';\nexport * from './SvgIcon';\n\nexport { default as Switch } from './Switch';\nexport * from './Switch';\n\nexport { default as Tab } from './Tab';\nexport * from './Tab';\n\nexport { default as TabBase } from './TabBase';\nexport * from './TabBase';\n\nexport { default as Tabs } from './Tabs';\nexport * from './Tabs';\n\nexport { default as TextField } from './TextField';\nexport * from './TextField';\n\nexport { default as Toggle } from './Toggle';\nexport * from './Toggle';\n\nexport { default as Toolbar } from './Toolbar';\nexport * from './Toolbar';\n\nexport { default as Tooltip } from './Tooltip';\nexport * from './Tooltip';\n\nexport { default as Typography } from './Typography';\nexport * from './Typography';\n\nexport * from './animated';\n"],"mappings":"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"}

package/build/typescript/Accordion/useVariantStyleMap.d.ts

@@ -5,6 +5,7 @@ interface VariantStyle {
     container: FountainUiStyle;
     content: FountainUiStyle;
     contentFont: TextStyle;
+    iconContainer?: FountainUiStyle;
     subTitleFont?: TextStyle;
     title: FountainUiStyle;
     titleFont: TextStyle;

package/build/typescript/ListItem/ListItem.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import ListItemProps from './ListItemProps';
+import type ListItemProps from './ListItemProps';
 export default function ListItem(props: ListItemProps): JSX.Element;

package/build/typescript/ListItem/ListItemProps.d.ts

@@ -13,6 +13,10 @@ export default interface ListItemProps extends OverridableComponentProps<React.P
      * @default false
      */
     button?: boolean;
+    /**
+     * Displays a description in this item.
+     */
+    description?: string;
     /**
      * Whether to prevent interaction with the ButtonBase.
      * @default false

package/build/typescript/ListItemText/ListItemTextProps.d.ts

@@ -1,16 +1,9 @@
-import type { TypographyProps } from '../Typography';
 import type { OverridableComponentProps } from '../types';
 import type { ColumnProps } from '../Column';
-declare type BaseProps = Omit<ColumnProps, 'children'>;
-export default interface ListItemTextProps extends OverridableComponentProps<BaseProps, {
+export default interface ListItemTextProps extends OverridableComponentProps<ColumnProps, {
     /**
      * The main content element.
      */
-    primary?: TypographyProps['children'];
-    /**
-     * The secondary content element.
-     */
-    secondary?: TypographyProps['children'];
+    children: string;
 }> {
 }
-export {};

package/build/typescript/Section/Section.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type SectionProps from './SectionProps';
+export default function Section(props: SectionProps): JSX.Element;

package/build/typescript/Section/SectionProps.d.ts

@@ -0,0 +1,6 @@
+import type { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../types';
+export default interface SectionProps extends OverridableComponentProps<ViewProps, {
+    maxWidth?: number;
+}> {
+}

package/build/typescript/Section/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Section';
+export type { default as SectionProps } from './SectionProps';

package/build/typescript/Tabs/useTabsStyle.d.ts

@@ -0,0 +1,7 @@
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import type { TabVariant } from '../Tab';
+interface TabsStyle {
+    container: FountainUiStyle;
+}
+export default function useTabsStyle(variant: TabVariant): TabsStyle;
+export {};

package/build/typescript/hooks/useContentContainerStyle.d.ts

@@ -1,11 +1,7 @@
-import type { ScrollViewProps } from 'react-native';
+import type { FountainUiStyle } from '@fountain-ui/styles';
 import type { Theme } from '../types';
-declare type Breakpoint = keyof Theme['breakpoints']['values'];
-declare type ContentContainerStyle = ScrollViewProps['contentContainerStyle'];
 export interface Config {
-    breakpoint?: Breakpoint;
-    maxWidth?: Breakpoint;
-    styleProvider?: (theme: Theme) => ContentContainerStyle;
+    maxWidth?: number;
+    styleProvider?: (theme: Theme) => FountainUiStyle;
 }
-export default function useContentContainerStyle(config?: Config): ContentContainerStyle;
-export {};
+export default function useContentContainerStyle(config: Config): FountainUiStyle;

package/build/typescript/index.d.ts

@@ -97,6 +97,8 @@ export { default as RadioGroup } from './RadioGroup';
 export * from './RadioGroup';
 export { default as Row } from './Row';
 export * from './Row';
+export { default as Section } from './Section';
+export * from './Section';
 export { default as ShadowView } from './ShadowView';
 export * from './ShadowView';
 export { default as Slide } from './Slide';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "3.0.0-alpha.4",
+  "version": "3.0.0-alpha.6",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -14,7 +14,7 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@fountain-ui/styles": "^3.0.0-alpha.3",
+    "@fountain-ui/styles": "^3.0.0-alpha.5",
     "@fountain-ui/utils": "^3.0.0-alpha.1"
   },
   "peerDependencies": {
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a03af7392fbee12024911322bbdacdd14a1e398d"
+  "gitHead": "548815f22e2a9f858f3f95f442f885a0207f813e"
 }

package/src/Accordion/Accordion.tsx

@@ -62,6 +62,7 @@ export default function Accordion(props: AccordionProps) {
         container: containerStyle,
         content: contentStyle,
         contentFont: contentFontStyle,
+        iconContainer: iconContainerStyle,
         subTitleFont: subTitleFontStyle,
         title: titleStyle,
         titleFont: titleFontStyle,
@@ -123,7 +124,9 @@ export default function Accordion(props: AccordionProps) {
                         <Row alignItems={'center'}>
                             {LeftComponent ? (
                                 <React.Fragment>
-                                    {LeftComponent}
+                                    <View style={iconContainerStyle}>
+                                        {LeftComponent}
+                                    </View>
 
                                     <Spacer size={1.5}/>
                                 </React.Fragment>

package/src/Accordion/useVariantStyleMap.ts

@@ -9,6 +9,7 @@ interface VariantStyle {
     container: FountainUiStyle;
     content: FountainUiStyle;
     contentFont: TextStyle;
+    iconContainer?: FountainUiStyle;
     subTitleFont?: TextStyle;
     title: FountainUiStyle;
     titleFont: TextStyle;
@@ -50,9 +51,9 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                     },
                     titleFont: createFontStyle(theme, {
                         selector: (_) => typographyOf({
-                            fontSize: 15,
-                            lineHeight: 19.5,
-                            fontFamily: 'Pretendard-SemiBold',
+                            fontSize: 16,
+                            lineHeight: 20.8,
+                            fontFamily: 'PretendardStd-SemiBold',
                             letterSpacing: 0,
                         }),
                         color: theme.palette.text.strong,
@@ -77,6 +78,9 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                         selector: (typography) => typography.caption2.regular,
                         color: theme.palette.text.base,
                     }),
+                    iconContainer: {
+                        paddingTop: 1,
+                    },
                     title: {
                         alignItems: 'center',
                         paddingBottom: theme.spacing(1),
@@ -114,9 +118,9 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                     },
                     titleFont: createFontStyle(theme, {
                         selector: (_) => typographyOf({
-                            fontSize: 15,
-                            lineHeight: 19.5,
-                            fontFamily: 'Pretendard-SemiBold',
+                            fontSize: 16,
+                            lineHeight: 20.8,
+                            fontFamily: 'PretendardStd-SemiBold',
                             letterSpacing: 0,
                         }),
                         color: theme.palette.text.strong,

package/src/Badge/useVariantStyleMap.ts

@@ -49,13 +49,13 @@ export default function useVariantStyleMap(variant: BadgeVariant, size: BadgeSiz
             large: typographyOf({
                 fontSize: 14,
                 lineHeight: 14,
-                fontFamily: 'Pretendard-Bold',
+                fontFamily: 'PretendardStd-Bold',
                 letterSpacing: -0.7,
             }),
             medium: typographyOf({
                 fontSize: 12,
                 lineHeight: 12,
-                fontFamily: 'Pretendard-Bold',
+                fontFamily: 'PretendardStd-Bold',
                 letterSpacing: -0.6,
             }),
         };

package/src/BottomSheetTitle/BottomSheetTitle.tsx

@@ -74,6 +74,7 @@ export default function BottomSheetTitle(props: BottomSheetTitleProps) {
                     color={'accent'}
                     disableMinWidth={true}
                     onPress={actionButtonProps.onPress}
+                    size={'large'}
                     style={styles.actionButton}
                     variant={'text'}
                 />

package/src/Checkbox/useVariantStyleMap.ts

@@ -40,6 +40,7 @@ export default function useVariantStyleMap(variant: CheckboxVariant, checked: bo
                     alignItems: 'center',
                     flexDirection: 'row',
                     gap: theme.spacing(3),
+                    paddingVertical: theme.spacing(2),
                 },
                 iconColor: theme.palette.fill.baseAlt,
             };

package/src/Empty/Empty.tsx

@@ -55,7 +55,7 @@ export default function Empty(props: EmptyProps) {
     });
 
     const descriptionFontStyle = createFontStyle(theme, {
-        selector: (typography) => typography.body2.regular,
+        selector: (typography) => typography.body3.regular,
         color: theme.palette.text.base,
     });
 

package/src/ListItem/ListItem.tsx

@@ -1,36 +1,52 @@
 import React from 'react';
-import { Platform, View } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import type { FlexStyle } from 'react-native';
+import { Platform, Text, View } from 'react-native';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { typographyOf } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
-import { css, useTheme } from '../styles';
-import ListItemProps from './ListItemProps';
+import Row from '../Row';
+import { createFontStyle, css, useTheme } from '../styles';
+import type ListItemProps from './ListItemProps';
 
-type ListItemStyles = NamedStylesStringUnion<'root'>;
+type ListItemStyles = NamedStylesStringUnion<'content' | 'description' | 'divider' | 'dividerWrapper'>;
 
 const useStyles: UseStyles<ListItemStyles> = function (): ListItemStyles {
     const theme = useTheme();
 
     return {
-        root: {
-            flexDirection: 'row',
-            paddingVertical: theme.spacing(3),
+        content: {
+            gap: theme.spacing(2),
+            paddingVertical: theme.spacing(3.75),
             paddingHorizontal: theme.spacing(4),
             width: '100%',
         },
+        description: {
+            paddingRight: theme.spacing(20),
+        },
+        divider: {
+            borderBottomColor: theme.palette.border.weak,
+            borderBottomWidth: 0.5,
+        },
+        dividerWrapper: {
+            paddingHorizontal: theme.spacing(4),
+        },
     };
 };
 
 export default function ListItem(props: ListItemProps) {
     const {
-        alignItems = 'center',
+        alignItems = 'center' as FlexStyle['alignItems'],
         button = false,
         children,
+        description,
         disabled = false,
         onPress,
         style,
         ...otherProps
     } = props;
 
+    const theme = useTheme();
+
     const styles = useStyles();
 
     const rootComponentProps = {
@@ -38,33 +54,58 @@ export default function ListItem(props: ListItemProps) {
         ...otherProps,
     };
 
-    const rootStyle = css([
-        styles.root,
-        { alignItems },
+    const contentWrapperStyle = css([
+        styles.content,
         style,
     ]);
 
-    if (button) {
-        return (
-            // @ts-ignore
-            <View {...rootComponentProps}>
+    const descriptionFontStyle = createFontStyle(theme, {
+        selector: (_) => typographyOf({
+            fontSize: 14,
+            lineHeight: 19.6,
+            fontFamily: 'PretendardStd-Regular',
+            letterSpacing: 0,
+        }),
+        color: theme.palette.text.base,
+    });
+
+    const content = (
+        <React.Fragment>
+            <Row alignItems={alignItems}>
+                {children}
+            </Row>
+
+            {description ? (
+                <Text style={css([
+                    styles.description,
+                    descriptionFontStyle,
+                ])}>
+                    {description}
+                </Text>
+            ) : null}
+        </React.Fragment>
+    );
+
+    return (
+        // @ts-ignore
+        <View {...rootComponentProps}>
+            {button ? (
                 <ButtonBase
                     disabled={disabled}
                     onPress={onPress}
-                    style={rootStyle}
+                    style={contentWrapperStyle}
                 >
-                    {children}
+                    {content}
                 </ButtonBase>
-            </View>
-        );
-    }
+            ) : (
+                <View style={contentWrapperStyle}>
+                    {content}
+                </View>
+            )}
 
-    return (
-        // @ts-ignore
-        <View
-            children={children}
-            style={rootStyle}
-            {...rootComponentProps}
-        />
+            <View style={styles.dividerWrapper}>
+                <View style={styles.divider}/>
+            </View>
+        </View>
     );
 };

package/src/ListItem/ListItemProps.ts

@@ -16,6 +16,11 @@ export default interface ListItemProps extends OverridableComponentProps<React.P
      */
     button?: boolean;
 
+    /**
+     * Displays a description in this item.
+     */
+    description?: string;
+
     /**
      * Whether to prevent interaction with the ButtonBase.
      * @default false

package/src/ListItemIcon/ListItemIcon.tsx

@@ -11,8 +11,7 @@ const useStyles: UseStyles<ListItemIconStyles> = function (): ListItemIconStyles
 
     return {
         root: {
-            marginRight: theme.spacing(2),
-            minWidth: 24,
+            marginRight: theme.spacing(3),
             flexShrink: 0,
         },
     };

package/src/ListItemSecondaryAction/ListItemSecondaryAction.tsx

@@ -9,6 +9,8 @@ type ListItemSecondaryActionStyles = NamedStylesStringUnion<'root'>;
 const useStyles: UseStyles<ListItemSecondaryActionStyles> = function (): ListItemSecondaryActionStyles {
     return {
         root: {
+            alignItems: 'center',
+            flexDirection: 'row',
             flexShrink: 0,
             marginLeft: 'auto',
         },