@fountain-ui/core 3.0.0-alpha.10 → 3.0.0-alpha.11

package/build/commonjs/DialogTitle/BackButton.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BackButton;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+var _internal = require("../internal");
+
+var _styles = require("@fountain-ui/styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    height: 40,
+    left: 20,
+    paddingLeft: 5,
+    paddingRight: 11,
+    paddingVertical: 8,
+    position: 'absolute',
+    width: 40
+  }
+});
+
+function BackButton(props) {
+  const {
+    style: styleProp,
+    ...otherProps
+  } = props;
+  const rootStyle = (0, _styles.css)([styles.root, styleProp]);
+  return /*#__PURE__*/_react.default.createElement(_IconButton.default, _extends({
+    style: rootStyle
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_internal.ChevronLeft, {
+    color: 'strong',
+    size: 'large'
+  }));
+}
+//# sourceMappingURL=BackButton.js.map

package/build/commonjs/DialogTitle/BackButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["styles","StyleSheet","create","root","height","left","paddingLeft","paddingRight","paddingVertical","position","width","BackButton","props","style","styleProp","otherProps","rootStyle","css"],"sources":["BackButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport type { IconButtonProps } from '../IconButton';\nimport IconButton from '../IconButton';\nimport { ChevronLeft } from '../internal';\nimport { css } from '@fountain-ui/styles';\n\nconst styles = StyleSheet.create({\n    root: {\n        height: 40,\n        left: 20,\n        paddingLeft: 5,\n        paddingRight: 11,\n        paddingVertical: 8,\n        position: 'absolute',\n        width: 40,\n    },\n});\n\ninterface BackButtonProps extends Omit<IconButtonProps, 'children'> {}\n\nexport default function BackButton(props: BackButtonProps) {\n    const {\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const rootStyle = css([\n        styles.root,\n        styleProp,\n    ]);\n\n    return (\n        <IconButton\n            style={rootStyle}\n            {...otherProps}\n        >\n            <ChevronLeft\n                color={'strong'}\n                size={'large'}\n            />\n        </IconButton>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAEA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,MAAM,EAAE,EADN;IAEFC,IAAI,EAAE,EAFJ;IAGFC,WAAW,EAAE,CAHX;IAIFC,YAAY,EAAE,EAJZ;IAKFC,eAAe,EAAE,CALf;IAMFC,QAAQ,EAAE,UANR;IAOFC,KAAK,EAAE;EAPL;AADuB,CAAlB,CAAf;;AAce,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,KAAK,EAAEC,SADL;IAEF,GAAGC;EAFD,IAGFH,KAHJ;EAKA,MAAMI,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBjB,MAAM,CAACG,IADW,EAElBW,SAFkB,CAAJ,CAAlB;EAKA,oBACI,6BAAC,mBAAD;IACI,KAAK,EAAEE;EADX,GAEQD,UAFR,gBAII,6BAAC,qBAAD;IACI,KAAK,EAAE,QADX;IAEI,IAAI,EAAE;EAFV,EAJJ,CADJ;AAWH"}

package/build/commonjs/DialogTitle/CloseButton.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CloseButton;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+var _internal = require("../internal");
+
+var _styles = require("@fountain-ui/styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    height: 40,
+    left: 20,
+    padding: 8,
+    position: 'absolute',
+    width: 40
+  }
+});
+
+function CloseButton(props) {
+  const {
+    style: styleProp,
+    ...otherProps
+  } = props;
+  const rootStyle = (0, _styles.css)([styles.root, styleProp]);
+  return /*#__PURE__*/_react.default.createElement(_IconButton.default, _extends({
+    style: rootStyle
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_internal.Close, {
+    color: 'strong',
+    size: 'large'
+  }));
+}
+//# sourceMappingURL=CloseButton.js.map

package/build/commonjs/DialogTitle/CloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["styles","StyleSheet","create","root","height","left","padding","position","width","CloseButton","props","style","styleProp","otherProps","rootStyle","css"],"sources":["CloseButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport type { IconButtonProps } from '../IconButton';\nimport IconButton from '../IconButton';\nimport { Close } from '../internal';\nimport { css } from '@fountain-ui/styles';\n\nconst styles = StyleSheet.create({\n    root: {\n        height: 40,\n        left: 20,\n        padding: 8,\n        position: 'absolute',\n        width: 40,\n    },\n});\n\ninterface CloseButtonProps extends Omit<IconButtonProps, 'children'> {}\n\nexport default function CloseButton(props: CloseButtonProps) {\n    const {\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const rootStyle = css([\n        styles.root,\n        styleProp,\n    ]);\n\n    return (\n        <IconButton\n            style={rootStyle}\n            {...otherProps}\n        >\n            <Close\n                color={'strong'}\n                size={'large'}\n            />\n        </IconButton>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAEA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,MAAM,EAAE,EADN;IAEFC,IAAI,EAAE,EAFJ;IAGFC,OAAO,EAAE,CAHP;IAIFC,QAAQ,EAAE,UAJR;IAKFC,KAAK,EAAE;EALL;AADuB,CAAlB,CAAf;;AAYe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,KAAK,EAAEC,SADL;IAEF,GAAGC;EAFD,IAGFH,KAHJ;EAKA,MAAMI,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBf,MAAM,CAACG,IADW,EAElBS,SAFkB,CAAJ,CAAlB;EAKA,oBACI,6BAAC,mBAAD;IACI,KAAK,EAAEE;EADX,GAEQD,UAFR,gBAII,6BAAC,eAAD;IACI,KAAK,EAAE,QADX;IAEI,IAAI,EAAE;EAFV,EAJJ,CADJ;AAWH"}

package/build/commonjs/DialogTitle/DialogTitle.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = DialogTitle;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,6 +13,10 @@ var _Dialog = require("../Dialog");
 
 var _styles = require("../styles");
 
+var _BackButton = _interopRequireDefault(require("./BackButton"));
+
+var _CloseButton = _interopRequireDefault(require("./CloseButton"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -29,7 +33,7 @@ const useStyles = function () {
   };
 };
 
-function DialogTitle(props) {
+const DialogTitle = props => {
   const {
     children,
     style: styleProp,
@@ -49,7 +53,10 @@ function DialogTitle(props) {
   }), typeof children === 'string' ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: titleStyle
   }, children) : children);
-}
+};
 
-;
+DialogTitle.BackButton = _BackButton.default;
+DialogTitle.CloseButton = _CloseButton.default;
+var _default = DialogTitle;
+exports.default = _default;
 //# sourceMappingURL=DialogTitle.js.map

package/build/commonjs/DialogTitle/DialogTitle.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","paddingTop","spacing","title","textAlign","DialogTitle","props","children","style","styleProp","otherProps","styles","sectionStyle","useDialogSectionStyle","rootStyle","css","titleFontStyle","createFontStyle","selector","typography","header3","semiBold","color","palette","text","strong","titleStyle"],"sources":["DialogTitle.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useDialogSectionStyle } from '../Dialog';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type DialogTitleProps from './DialogTitleProps';\n\ntype DialogTitleStyles = NamedStylesStringUnion<'root' | 'title'>;\n\nconst useStyles: UseStyles<DialogTitleStyles> = function (): DialogTitleStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            paddingTop: theme.spacing(6.5),\n        },\n        title: {\n            textAlign: 'center',\n        },\n    };\n};\n\nexport default function DialogTitle(props: DialogTitleProps) {\n    const {\n        children,\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const sectionStyle = useDialogSectionStyle();\n\n    const rootStyle = css([\n        styles.root,\n        sectionStyle,\n        styleProp,\n    ]);\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.header3.semiBold,\n        color: theme.palette.text.strong,\n    });\n\n    const titleStyle = css([\n        styles.title,\n        titleFontStyle,\n    ]);\n\n    return (\n        <View\n            {...otherProps}\n            style={rootStyle}\n        >\n            {typeof children === 'string' ? (\n                <Text style={titleStyle}>\n                    {children}\n                </Text>\n            ) : (children)}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAKA,MAAMA,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAEH,KAAK,CAACI,OAAN,CAAc,GAAd;IADV,CADH;IAIHC,KAAK,EAAE;MACHC,SAAS,EAAE;IADR;EAJJ,CAAP;AAQH,CAXD;;AAae,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,QADE;IAEFC,KAAK,EAAEC,SAFL;IAGF,GAAGC;EAHD,IAIFJ,KAJJ;EAMA,MAAMR,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMY,MAAM,GAAGd,SAAS,EAAxB;EAEA,MAAMe,YAAY,GAAG,IAAAC,6BAAA,GAArB;EAEA,MAAMC,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBJ,MAAM,CAACX,IADW,EAElBY,YAFkB,EAGlBH,SAHkB,CAAJ,CAAlB;EAMA,MAAMO,cAAc,GAAG,IAAAC,uBAAA,EAAgBnB,KAAhB,EAAuB;IAC1CoB,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,OAAX,CAAmBC,QADH;IAE1CC,KAAK,EAAExB,KAAK,CAACyB,OAAN,CAAcC,IAAd,CAAmBC;EAFgB,CAAvB,CAAvB;EAKA,MAAMC,UAAU,GAAG,IAAAX,WAAA,EAAI,CACnBJ,MAAM,CAACR,KADY,EAEnBa,cAFmB,CAAJ,CAAnB;EAKA,oBACI,6BAAC,iBAAD,eACQN,UADR;IAEI,KAAK,EAAEI;EAFX,IAIK,OAAOP,QAAP,KAAoB,QAApB,gBACG,6BAAC,iBAAD;IAAM,KAAK,EAAEmB;EAAb,GACKnB,QADL,CADH,GAIIA,QART,CADJ;AAYH;;AAAA"}
+{"version":3,"names":["useStyles","theme","useTheme","root","paddingTop","spacing","title","textAlign","DialogTitle","props","children","style","styleProp","otherProps","styles","sectionStyle","useDialogSectionStyle","rootStyle","css","titleFontStyle","createFontStyle","selector","typography","header3","semiBold","color","palette","text","strong","titleStyle","BackButton","CloseButton"],"sources":["DialogTitle.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useDialogSectionStyle } from '../Dialog';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport BackButton from './BackButton';\nimport CloseButton from './CloseButton';\nimport type DialogTitleProps from './DialogTitleProps';\n\ntype DialogTitleStyles = NamedStylesStringUnion<'root' | 'title'>;\n\nconst useStyles: UseStyles<DialogTitleStyles> = function (): DialogTitleStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            paddingTop: theme.spacing(6.5),\n        },\n        title: {\n            textAlign: 'center',\n        },\n    };\n};\n\nconst DialogTitle = (props: DialogTitleProps) => {\n    const {\n        children,\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const sectionStyle = useDialogSectionStyle();\n\n    const rootStyle = css([\n        styles.root,\n        sectionStyle,\n        styleProp,\n    ]);\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.header3.semiBold,\n        color: theme.palette.text.strong,\n    });\n\n    const titleStyle = css([\n        styles.title,\n        titleFontStyle,\n    ]);\n\n    return (\n        <View\n            {...otherProps}\n            style={rootStyle}\n        >\n            {typeof children === 'string' ? (\n                <Text style={titleStyle}>\n                    {children}\n                </Text>\n            ) : (children)}\n        </View>\n    );\n};\n\nDialogTitle.BackButton = BackButton;\n\nDialogTitle.CloseButton = CloseButton;\n\nexport default DialogTitle;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAEH,KAAK,CAACI,OAAN,CAAc,GAAd;IADV,CADH;IAIHC,KAAK,EAAE;MACHC,SAAS,EAAE;IADR;EAJJ,CAAP;AAQH,CAXD;;AAaA,MAAMC,WAAW,GAAIC,KAAD,IAA6B;EAC7C,MAAM;IACFC,QADE;IAEFC,KAAK,EAAEC,SAFL;IAGF,GAAGC;EAHD,IAIFJ,KAJJ;EAMA,MAAMR,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMY,MAAM,GAAGd,SAAS,EAAxB;EAEA,MAAMe,YAAY,GAAG,IAAAC,6BAAA,GAArB;EAEA,MAAMC,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBJ,MAAM,CAACX,IADW,EAElBY,YAFkB,EAGlBH,SAHkB,CAAJ,CAAlB;EAMA,MAAMO,cAAc,GAAG,IAAAC,uBAAA,EAAgBnB,KAAhB,EAAuB;IAC1CoB,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,OAAX,CAAmBC,QADH;IAE1CC,KAAK,EAAExB,KAAK,CAACyB,OAAN,CAAcC,IAAd,CAAmBC;EAFgB,CAAvB,CAAvB;EAKA,MAAMC,UAAU,GAAG,IAAAX,WAAA,EAAI,CACnBJ,MAAM,CAACR,KADY,EAEnBa,cAFmB,CAAJ,CAAnB;EAKA,oBACI,6BAAC,iBAAD,eACQN,UADR;IAEI,KAAK,EAAEI;EAFX,IAIK,OAAOP,QAAP,KAAoB,QAApB,gBACG,6BAAC,iBAAD;IAAM,KAAK,EAAEmB;EAAb,GACKnB,QADL,CADH,GAIIA,QART,CADJ;AAYH,CAzCD;;AA2CAF,WAAW,CAACsB,UAAZ,GAAyBA,mBAAzB;AAEAtB,WAAW,CAACuB,WAAZ,GAA0BA,oBAA1B;eAEevB,W"}

package/build/commonjs/Divider/Divider.js

@@ -9,13 +9,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
-var _styles = require("../styles");
+var _styles = require("@fountain-ui/styles");
+
+var _styles2 = require("../styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const styles = _styles.StyleSheet.create({
+const styles = _styles2.StyleSheet.create({
   container: {
     alignSelf: 'stretch',
     alignItems: 'center'
@@ -39,6 +41,12 @@ function selectBorderColor(theme, variant, vertical) {
 
     case 'strong':
       return vertical ? theme.palette.border.weak : theme.palette.border.base;
+
+    case 'strongStatic':
+      return _styles.commonColors.opacity.white['13'];
+
+    case 'baseStatic':
+      return _styles.commonColors.opacity.white['10'];
   }
 }
 
@@ -54,7 +62,7 @@ function Divider(props) {
     vertical = false,
     ...otherProps
   } = props;
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _styles2.useTheme)();
   const borderWidth = borderWidthProp ?? (vertical ? 1 : 0.5);
   const fontColor = theme.palette.text.weak;
   const borderColor = selectBorderColor(theme, variant, vertical);
@@ -86,8 +94,8 @@ function Divider(props) {
   } : {
     borderBottomWidth: borderWidth
   };
-  const containerStyle = (0, _styles.css)([insetStyle, marginStyle, styles.container, vertical ? styles.column : styles.row, childrenProp ? undefined : borderColorStyle, childrenProp ? undefined : borderWidthStyle, style]);
-  const dividerStyle = (0, _styles.css)([borderColorStyle, borderWidthStyle, styles.divider]);
+  const containerStyle = (0, _styles2.css)([insetStyle, marginStyle, styles.container, vertical ? styles.column : styles.row, childrenProp ? undefined : borderColorStyle, childrenProp ? undefined : borderWidthStyle, style]);
+  const dividerStyle = (0, _styles2.css)([borderColorStyle, borderWidthStyle, styles.divider]);
   const dividerMarginSize = theme.spacing(marginBetweenChildren);
   const startDividerStyle = {
     display: elementAlign !== 'start' ? 'flex' : 'none',
@@ -105,17 +113,17 @@ function Divider(props) {
       marginLeft: dividerMarginSize
     })
   };
-  const fontStyle = (0, _styles.createFontStyle)(theme, {
+  const fontStyle = (0, _styles2.createFontStyle)(theme, {
     selector: typo => typo.caption2.medium,
     color: fontColor
   });
   const element = typeof childrenProp === 'string' ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: (0, _styles.css)(fontStyle)
+    style: (0, _styles2.css)(fontStyle)
   }, childrenProp) : childrenProp;
   const children = childrenProp ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: (0, _styles.css)([dividerStyle, startDividerStyle])
+    style: (0, _styles2.css)([dividerStyle, startDividerStyle])
   }), element, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: (0, _styles.css)([dividerStyle, endDividerStyle])
+    style: (0, _styles2.css)([dividerStyle, endDividerStyle])
   })) : null;
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
     style: containerStyle

package/build/commonjs/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","selectBorderColor","theme","variant","vertical","palette","border","weaker","weak","base","Divider","props","borderWidth","borderWidthProp","children","childrenProp","elementAlign","inset","marginBetweenChildren","style","otherProps","useTheme","fontColor","text","borderColor","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","css","undefined","dividerStyle","dividerMarginSize","startDividerStyle","display","endDividerStyle","fontStyle","createFontStyle","selector","typo","caption2","medium","color","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { ExtendedStyle } from '../types';\nimport type DividerProps from './DividerProps';\nimport type { DividerVariant } from './DividerProps';\n\nconst styles = StyleSheet.create({\n    container: {\n        alignSelf: 'stretch',\n        alignItems: 'center',\n    },\n    row: {\n        flexDirection: 'row',\n    },\n    column: {\n        flexDirection: 'column',\n    },\n    divider: {\n        flexGrow: 1,\n    },\n});\n\nfunction selectBorderColor(theme: Theme, variant: DividerVariant, vertical: boolean) {\n    switch (variant) {\n        default:\n        case 'base':\n            return vertical ? theme.palette.border.weaker : theme.palette.border.weak;\n        case 'strong':\n            return vertical ? theme.palette.border.weak : theme.palette.border.base;\n    }\n}\n\nexport default function Divider(props: DividerProps) {\n    const {\n        borderWidth: borderWidthProp,\n        children: childrenProp,\n        elementAlign = 'center',\n        inset = 0,\n        marginBetweenChildren = 2,\n        style,\n        variant = 'base' as DividerVariant,\n        vertical = false,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const borderWidth = borderWidthProp ?? (vertical ? 1 : 0.5);\n    const fontColor = theme.palette.text.weak;\n    const borderColor = selectBorderColor(theme, variant, vertical);\n    const marginSize = theme.spacing(1);\n    const insetSize = theme.spacing(inset);\n\n    const marginLeft = marginSize;\n    const marginRight = marginSize;\n    const marginTop = marginSize;\n    const marginBottom = marginSize;\n\n    const marginStyle = vertical\n        ? { marginLeft, marginRight }\n        : { marginTop, marginBottom };\n\n    const insetStyle = vertical\n        ? { marginTop: insetSize, marginBottom: insetSize }\n        : { marginLeft: insetSize, marginRight: insetSize };\n\n    const borderColorStyle = { borderColor };\n    const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });\n\n    const containerStyle = css([\n        insetStyle,\n        marginStyle,\n        styles.container,\n        vertical ? styles.column : styles.row,\n        childrenProp ? undefined : borderColorStyle,\n        childrenProp ? undefined : borderWidthStyle,\n        style,\n    ]);\n\n    const dividerStyle = css([\n        borderColorStyle,\n        borderWidthStyle,\n        styles.divider,\n    ]);\n\n    const dividerMarginSize = theme.spacing(marginBetweenChildren);\n    const startDividerStyle: ExtendedStyle = {\n        display: elementAlign !== 'start' ? 'flex' : 'none',\n        ...(vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize }),\n    };\n    const endDividerStyle: ExtendedStyle = {\n        display: elementAlign !== 'end' ? 'flex' : 'none',\n        ...(vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize }),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2.medium,\n        color: fontColor,\n    });\n\n    const element = typeof childrenProp === 'string'\n        ? <Text style={css(fontStyle)}>{childrenProp}</Text>\n        : childrenProp;\n\n    const children = childrenProp ? (\n        <React.Fragment>\n            <View style={css([dividerStyle, startDividerStyle])}/>\n            {element}\n            <View style={css([dividerStyle, endDividerStyle])}/>\n        </React.Fragment>\n    ) : null;\n\n    return (\n        <View\n            style={containerStyle}\n            {...otherProps}\n        >\n            {children}\n        </View>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["styles","StyleSheet","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","selectBorderColor","theme","variant","vertical","palette","border","weaker","weak","base","commonColors","opacity","white","Divider","props","borderWidth","borderWidthProp","children","childrenProp","elementAlign","inset","marginBetweenChildren","style","otherProps","useTheme","fontColor","text","borderColor","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","css","undefined","dividerStyle","dividerMarginSize","startDividerStyle","display","endDividerStyle","fontStyle","createFontStyle","selector","typo","caption2","medium","color","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { commonColors } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { ExtendedStyle } from '../types';\nimport type DividerProps from './DividerProps';\nimport type { DividerVariant } from './DividerProps';\n\nconst styles = StyleSheet.create({\n    container: {\n        alignSelf: 'stretch',\n        alignItems: 'center',\n    },\n    row: {\n        flexDirection: 'row',\n    },\n    column: {\n        flexDirection: 'column',\n    },\n    divider: {\n        flexGrow: 1,\n    },\n});\n\nfunction selectBorderColor(theme: Theme, variant: DividerVariant, vertical: boolean) {\n    switch (variant) {\n        default:\n        case 'base':\n            return vertical ? theme.palette.border.weaker : theme.palette.border.weak;\n        case 'strong':\n            return vertical ? theme.palette.border.weak : theme.palette.border.base;\n        case 'strongStatic':\n            return commonColors.opacity.white['13'];\n        case 'baseStatic':\n            return commonColors.opacity.white['10'];\n    }\n}\n\nexport default function Divider(props: DividerProps) {\n    const {\n        borderWidth: borderWidthProp,\n        children: childrenProp,\n        elementAlign = 'center',\n        inset = 0,\n        marginBetweenChildren = 2,\n        style,\n        variant = 'base' as DividerVariant,\n        vertical = false,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const borderWidth = borderWidthProp ?? (vertical ? 1 : 0.5);\n    const fontColor = theme.palette.text.weak;\n    const borderColor = selectBorderColor(theme, variant, vertical);\n    const marginSize = theme.spacing(1);\n    const insetSize = theme.spacing(inset);\n\n    const marginLeft = marginSize;\n    const marginRight = marginSize;\n    const marginTop = marginSize;\n    const marginBottom = marginSize;\n\n    const marginStyle = vertical\n        ? { marginLeft, marginRight }\n        : { marginTop, marginBottom };\n\n    const insetStyle = vertical\n        ? { marginTop: insetSize, marginBottom: insetSize }\n        : { marginLeft: insetSize, marginRight: insetSize };\n\n    const borderColorStyle = { borderColor };\n    const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });\n\n    const containerStyle = css([\n        insetStyle,\n        marginStyle,\n        styles.container,\n        vertical ? styles.column : styles.row,\n        childrenProp ? undefined : borderColorStyle,\n        childrenProp ? undefined : borderWidthStyle,\n        style,\n    ]);\n\n    const dividerStyle = css([\n        borderColorStyle,\n        borderWidthStyle,\n        styles.divider,\n    ]);\n\n    const dividerMarginSize = theme.spacing(marginBetweenChildren);\n    const startDividerStyle: ExtendedStyle = {\n        display: elementAlign !== 'start' ? 'flex' : 'none',\n        ...(vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize }),\n    };\n    const endDividerStyle: ExtendedStyle = {\n        display: elementAlign !== 'end' ? 'flex' : 'none',\n        ...(vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize }),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2.medium,\n        color: fontColor,\n    });\n\n    const element = typeof childrenProp === 'string'\n        ? <Text style={css(fontStyle)}>{childrenProp}</Text>\n        : childrenProp;\n\n    const children = childrenProp ? (\n        <React.Fragment>\n            <View style={css([dividerStyle, startDividerStyle])}/>\n            {element}\n            <View style={css([dividerStyle, endDividerStyle])}/>\n        </React.Fragment>\n    ) : null;\n\n    return (\n        <View\n            style={containerStyle}\n            {...otherProps}\n        >\n            {children}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAKA,MAAMA,MAAM,GAAGC,mBAAA,CAAWC,MAAX,CAAkB;EAC7BC,SAAS,EAAE;IACPC,SAAS,EAAE,SADJ;IAEPC,UAAU,EAAE;EAFL,CADkB;EAK7BC,GAAG,EAAE;IACDC,aAAa,EAAE;EADd,CALwB;EAQ7BC,MAAM,EAAE;IACJD,aAAa,EAAE;EADX,CARqB;EAW7BE,OAAO,EAAE;IACLC,QAAQ,EAAE;EADL;AAXoB,CAAlB,CAAf;;AAgBA,SAASC,iBAAT,CAA2BC,KAA3B,EAAyCC,OAAzC,EAAkEC,QAAlE,EAAqF;EACjF,QAAQD,OAAR;IACI;IACA,KAAK,MAAL;MACI,OAAOC,QAAQ,GAAGF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,MAAxB,GAAiCL,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBE,IAArE;;IACJ,KAAK,QAAL;MACI,OAAOJ,QAAQ,GAAGF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBE,IAAxB,GAA+BN,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBG,IAAnE;;IACJ,KAAK,cAAL;MACI,OAAOC,oBAAA,CAAaC,OAAb,CAAqBC,KAArB,CAA2B,IAA3B,CAAP;;IACJ,KAAK,YAAL;MACI,OAAOF,oBAAA,CAAaC,OAAb,CAAqBC,KAArB,CAA2B,IAA3B,CAAP;EATR;AAWH;;AAEc,SAASC,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,WAAW,EAAEC,eADX;IAEFC,QAAQ,EAAEC,YAFR;IAGFC,YAAY,GAAG,QAHb;IAIFC,KAAK,GAAG,CAJN;IAKFC,qBAAqB,GAAG,CALtB;IAMFC,KANE;IAOFnB,OAAO,GAAG,MAPR;IAQFC,QAAQ,GAAG,KART;IASF,GAAGmB;EATD,IAUFT,KAVJ;EAYA,MAAMZ,KAAK,GAAG,IAAAsB,iBAAA,GAAd;EAEA,MAAMT,WAAW,GAAGC,eAAe,KAAKZ,QAAQ,GAAG,CAAH,GAAO,GAApB,CAAnC;EACA,MAAMqB,SAAS,GAAGvB,KAAK,CAACG,OAAN,CAAcqB,IAAd,CAAmBlB,IAArC;EACA,MAAMmB,WAAW,GAAG1B,iBAAiB,CAACC,KAAD,EAAQC,OAAR,EAAiBC,QAAjB,CAArC;EACA,MAAMwB,UAAU,GAAG1B,KAAK,CAAC2B,OAAN,CAAc,CAAd,CAAnB;EACA,MAAMC,SAAS,GAAG5B,KAAK,CAAC2B,OAAN,CAAcT,KAAd,CAAlB;EAEA,MAAMW,UAAU,GAAGH,UAAnB;EACA,MAAMI,WAAW,GAAGJ,UAApB;EACA,MAAMK,SAAS,GAAGL,UAAlB;EACA,MAAMM,YAAY,GAAGN,UAArB;EAEA,MAAMO,WAAW,GAAG/B,QAAQ,GACtB;IAAE2B,UAAF;IAAcC;EAAd,CADsB,GAEtB;IAAEC,SAAF;IAAaC;EAAb,CAFN;EAIA,MAAME,UAAU,GAAGhC,QAAQ,GACrB;IAAE6B,SAAS,EAAEH,SAAb;IAAwBI,YAAY,EAAEJ;EAAtC,CADqB,GAErB;IAAEC,UAAU,EAAED,SAAd;IAAyBE,WAAW,EAAEF;EAAtC,CAFN;EAIA,MAAMO,gBAAgB,GAAG;IAAEV;EAAF,CAAzB;EACA,MAAMW,gBAAgB,GAAIlC,QAAQ,GAAG;IAAEmC,gBAAgB,EAAExB;EAApB,CAAH,GAAuC;IAAEyB,iBAAiB,EAAEzB;EAArB,CAAzE;EAEA,MAAM0B,cAAc,GAAG,IAAAC,YAAA,EAAI,CACvBN,UADuB,EAEvBD,WAFuB,EAGvB7C,MAAM,CAACG,SAHgB,EAIvBW,QAAQ,GAAGd,MAAM,CAACQ,MAAV,GAAmBR,MAAM,CAACM,GAJX,EAKvBsB,YAAY,GAAGyB,SAAH,GAAeN,gBALJ,EAMvBnB,YAAY,GAAGyB,SAAH,GAAeL,gBANJ,EAOvBhB,KAPuB,CAAJ,CAAvB;EAUA,MAAMsB,YAAY,GAAG,IAAAF,YAAA,EAAI,CACrBL,gBADqB,EAErBC,gBAFqB,EAGrBhD,MAAM,CAACS,OAHc,CAAJ,CAArB;EAMA,MAAM8C,iBAAiB,GAAG3C,KAAK,CAAC2B,OAAN,CAAcR,qBAAd,CAA1B;EACA,MAAMyB,iBAAgC,GAAG;IACrCC,OAAO,EAAE5B,YAAY,KAAK,OAAjB,GAA2B,MAA3B,GAAoC,MADR;IAErC,IAAIf,QAAQ,GAAG;MAAE8B,YAAY,EAAEW;IAAhB,CAAH,GAAyC;MAAEb,WAAW,EAAEa;IAAf,CAArD;EAFqC,CAAzC;EAIA,MAAMG,eAA8B,GAAG;IACnCD,OAAO,EAAE5B,YAAY,KAAK,KAAjB,GAAyB,MAAzB,GAAkC,MADR;IAEnC,IAAIf,QAAQ,GAAG;MAAE6B,SAAS,EAAEY;IAAb,CAAH,GAAsC;MAAEd,UAAU,EAAEc;IAAd,CAAlD;EAFmC,CAAvC;EAKA,MAAMI,SAAS,GAAG,IAAAC,wBAAA,EAAgBhD,KAAhB,EAAuB;IACrCiD,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,QAAL,CAAcC,MADG;IAErCC,KAAK,EAAE9B;EAF8B,CAAvB,CAAlB;EAKA,MAAM+B,OAAO,GAAG,OAAOtC,YAAP,KAAwB,QAAxB,gBACV,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAwB,YAAA,EAAIO,SAAJ;EAAb,GAA8B/B,YAA9B,CADU,GAEVA,YAFN;EAIA,MAAMD,QAAQ,GAAGC,YAAY,gBACzB,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAwB,YAAA,EAAI,CAACE,YAAD,EAAeE,iBAAf,CAAJ;EAAb,EADJ,EAEKU,OAFL,eAGI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAd,YAAA,EAAI,CAACE,YAAD,EAAeI,eAAf,CAAJ;EAAb,EAHJ,CADyB,GAMzB,IANJ;EAQA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAEP;EADX,GAEQlB,UAFR,GAIKN,QAJL,CADJ;AAQH;;AAAA"}

package/build/commonjs/Divider/DividerProps.js

@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.dividerVariants = exports.dividerElementAligns = void 0;
 const dividerElementAligns = ['start', 'center', 'end'];
 exports.dividerElementAligns = dividerElementAligns;
-const dividerVariants = ['base', 'strong'];
+const dividerVariants = ['base', 'strong', 'baseStatic', 'strongStatic'];
 exports.dividerVariants = dividerVariants;
 //# sourceMappingURL=DividerProps.js.map

package/build/commonjs/Divider/DividerProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["dividerElementAligns","dividerVariants"],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport const dividerElementAligns = ['start', 'center', 'end'] as const;\nexport type DividerElementAlign = typeof dividerElementAligns[number];\n\nexport const dividerVariants = ['base', 'strong'] as const;\nexport type DividerVariant = typeof dividerVariants[number];\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The size of the inset. It works as a multiplier factor based on spacing system.\n     * @default 0\n     */\n    inset?: number;\n\n    /**\n     * If `true`, the divider orientation is set to vertical.\n     * @default false\n     */\n    vertical?: boolean;\n\n    /**\n     * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.\n     * @default 2\n     */\n    marginBetweenChildren?: number;\n\n    /**\n     *  The size of border width. It works as an actual pixel-based border width value of a divider.\n     *  @default if vertical is true 1, otherwise 0.5\n     */\n    borderWidth?: number;\n\n    /**\n     *  Set position of children.\n     *  @default center\n     */\n    elementAlign?: DividerElementAlign;\n\n    /**\n     * Select the style of the divider based on this value.\n     *  @default base\n     */\n    variant?: DividerVariant;\n}> {}\n"],"mappings":";;;;;;AAIO,MAAMA,oBAAoB,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,KAApB,CAA7B;;AAGA,MAAMC,eAAe,GAAG,CAAC,MAAD,EAAS,QAAT,CAAxB"}
+{"version":3,"names":["dividerElementAligns","dividerVariants"],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport const dividerElementAligns = ['start', 'center', 'end'] as const;\nexport type DividerElementAlign = typeof dividerElementAligns[number];\n\nexport const dividerVariants = ['base', 'strong', 'baseStatic', 'strongStatic'] as const;\nexport type DividerVariant = typeof dividerVariants[number];\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The size of the inset. It works as a multiplier factor based on spacing system.\n     * @default 0\n     */\n    inset?: number;\n\n    /**\n     * If `true`, the divider orientation is set to vertical.\n     * @default false\n     */\n    vertical?: boolean;\n\n    /**\n     * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.\n     * @default 2\n     */\n    marginBetweenChildren?: number;\n\n    /**\n     *  The size of border width. It works as an actual pixel-based border width value of a divider.\n     *  @default if vertical is true 1, otherwise 0.5\n     */\n    borderWidth?: number;\n\n    /**\n     *  Set position of children.\n     *  @default center\n     */\n    elementAlign?: DividerElementAlign;\n\n    /**\n     * Select the style of the divider based on this value.\n     *  @default base\n     */\n    variant?: DividerVariant;\n}> {}\n"],"mappings":";;;;;;AAIO,MAAMA,oBAAoB,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,KAApB,CAA7B;;AAGA,MAAMC,eAAe,GAAG,CAAC,MAAD,EAAS,QAAT,EAAmB,YAAnB,EAAiC,cAAjC,CAAxB"}

package/build/commonjs/Pagination/Pagination.js

@@ -66,6 +66,7 @@ function Pagination(props) {
   const {
     bundleSize = 1,
     children,
+    color = 'base',
     count,
     disabled = false,
     hideIndicator = false,
@@ -123,6 +124,7 @@ function Pagination(props) {
     currentPage: page,
     maxPage: count
   }) : (0, _utils.times)(i => renderItem({
+    color,
     index: i,
     disabled,
     selected: i === page

package/build/commonjs/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","rootInline","flexDirection","alignItems","rootAnchor","items","justifyContent","marginTop","spacing","arrowContainer","prevInline","marginRight","prevAnchor","position","left","nextInline","marginLeft","nextAnchor","right","Pagination","props","bundleSize","children","count","disabled","hideIndicator","hideNextButton","hidePrevButton","infinite","onChange","page","renderItem","index","rest","style","variant","otherProps","styles","firstPage","lastPage","handleChange","nextPage","handlePrevPress","prevPage","handleNextPress","prevButton","nextButton","times","i","selected","containerProps","css"],"sources":["Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { times } from '@fountain-ui/utils';\nimport { ChevronLeft, ChevronRight } from '../internal/icons';\nimport { css, useTheme } from '../styles';\nimport IconButton from '../IconButton';\nimport PaginationItem from '../PaginationItem';\nimport NumberPagination from './NumberPagination';\nimport type PaginationProps from './PaginationProps';\nimport type { PaginationVariant } from './PaginationProps';\n\ntype PaginationStyleKeys =\n    | 'root'\n    | 'rootInline'\n    | 'rootAnchor'\n    | 'items'\n    | 'arrowContainer'\n    | 'prevInline'\n    | 'prevAnchor'\n    | 'nextInline'\n    | 'nextAnchor';\n\ntype PaginationStyles = NamedStylesStringUnion<PaginationStyleKeys>;\n\nconst useStyles: UseStyles<PaginationStyles> = function (): PaginationStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rootInline: {\n            flexDirection: 'row',\n            alignItems: 'center',\n        },\n        rootAnchor: {\n            flexDirection: 'column',\n        },\n        items: {\n            flexDirection: 'row',\n            justifyContent: 'center',\n            marginTop: theme.spacing(2),\n        },\n        arrowContainer: {\n            flexDirection: 'column',\n            justifyContent: 'center',\n        },\n        prevInline: {\n            marginRight: theme.spacing(1),\n        },\n        prevAnchor: {\n            position: 'absolute',\n            left: -24,\n        },\n        nextInline: {\n            marginLeft: theme.spacing(1),\n        },\n        nextAnchor: {\n            position: 'absolute',\n            right: -24,\n        },\n    };\n};\n\nexport default function Pagination(props: PaginationProps) {\n    const {\n        bundleSize = 1,\n        children,\n        count,\n        disabled = false,\n        hideIndicator = false,\n        hideNextButton = false,\n        hidePrevButton = false,\n        infinite = false,\n        onChange,\n        page,\n        renderItem = ({ index, ...rest }) => <PaginationItem key={`${index}`} {...rest}/>,\n        style,\n        variant = 'dot' as PaginationVariant,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const firstPage = 0;\n    const lastPage = count - 1;\n\n    const handleChange = (nextPage: number) => {\n        if (nextPage >= firstPage && nextPage <= lastPage) {\n            if (onChange) {\n                onChange(nextPage);\n            }\n        }\n    };\n\n    const handlePrevPress = () => {\n        const prevPage = page - bundleSize >= firstPage\n            ? page - bundleSize\n            : (infinite ? count - bundleSize + page : firstPage);\n\n        handleChange(prevPage);\n    };\n\n    const handleNextPress = () => {\n        const nextPage = page + bundleSize <= lastPage\n            ? page + bundleSize\n            : (infinite ? page + bundleSize - count : lastPage);\n\n        handleChange(nextPage);\n    };\n\n    const prevButton = !hidePrevButton ? (\n        <IconButton\n            disabled={disabled || (!infinite && page <= firstPage)}\n            onPress={handlePrevPress}\n            style={children ? styles.prevAnchor : styles.prevInline}\n        >\n            <ChevronLeft/>\n        </IconButton>\n    ) : null;\n\n    const nextButton = !hideNextButton ? (\n        <IconButton\n            disabled={disabled || (!infinite && page + bundleSize > lastPage)}\n            onPress={handleNextPress}\n            style={children ? styles.nextAnchor : styles.nextInline}\n        >\n            <ChevronRight/>\n        </IconButton>\n    ) : null;\n\n    const items = !hideIndicator ? (\n        variant === 'number' ? (\n            <NumberPagination\n                currentPage={page}\n                maxPage={count}\n            />\n        ) : times(i => renderItem({ index: i, disabled, selected: i === page }), count)\n    ) : null;\n\n    const containerProps = {\n        style: css([\n            styles.root,\n            children ? styles.rootAnchor : styles.rootInline,\n            style,\n        ]),\n        ...otherProps,\n    };\n\n    if (children) {\n        return (\n            <View {...containerProps}>\n                <View style={css(styles.arrowContainer)}>\n                    {children}\n                    {prevButton}\n                    {nextButton}\n                </View>\n\n                <View style={css(styles.items)}>\n                    {items}\n                </View>\n            </View>\n        );\n    }\n\n    return (\n        <View {...containerProps}>\n            {prevButton}\n            {items}\n            {nextButton}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAiBA,MAAMA,SAAsC,GAAG,YAA8B;EACzE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE,EADH;IAEHC,UAAU,EAAE;MACRC,aAAa,EAAE,KADP;MAERC,UAAU,EAAE;IAFJ,CAFT;IAMHC,UAAU,EAAE;MACRF,aAAa,EAAE;IADP,CANT;IASHG,KAAK,EAAE;MACHH,aAAa,EAAE,KADZ;MAEHI,cAAc,EAAE,QAFb;MAGHC,SAAS,EAAET,KAAK,CAACU,OAAN,CAAc,CAAd;IAHR,CATJ;IAcHC,cAAc,EAAE;MACZP,aAAa,EAAE,QADH;MAEZI,cAAc,EAAE;IAFJ,CAdb;IAkBHI,UAAU,EAAE;MACRC,WAAW,EAAEb,KAAK,CAACU,OAAN,CAAc,CAAd;IADL,CAlBT;IAqBHI,UAAU,EAAE;MACRC,QAAQ,EAAE,UADF;MAERC,IAAI,EAAE,CAAC;IAFC,CArBT;IAyBHC,UAAU,EAAE;MACRC,UAAU,EAAElB,KAAK,CAACU,OAAN,CAAc,CAAd;IADJ,CAzBT;IA4BHS,UAAU,EAAE;MACRJ,QAAQ,EAAE,UADF;MAERK,KAAK,EAAE,CAAC;IAFA;EA5BT,CAAP;AAiCH,CApCD;;AAsCe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,UAAU,GAAG,CADX;IAEFC,QAFE;IAGFC,KAHE;IAIFC,QAAQ,GAAG,KAJT;IAKFC,aAAa,GAAG,KALd;IAMFC,cAAc,GAAG,KANf;IAOFC,cAAc,GAAG,KAPf;IAQFC,QAAQ,GAAG,KART;IASFC,QATE;IAUFC,IAVE;IAWFC,UAAU,GAAG;MAAA,IAAC;QAAEC,KAAF;QAAS,GAAGC;MAAZ,CAAD;MAAA,oBAAwB,6BAAC,uBAAD;QAAgB,GAAG,EAAG,GAAED,KAAM;MAA9B,GAAqCC,IAArC,EAAxB;IAAA,CAXX;IAYFC,KAZE;IAaFC,OAAO,GAAG,KAbR;IAcF,GAAGC;EAdD,IAeFhB,KAfJ;EAiBA,MAAMiB,MAAM,GAAGxC,SAAS,EAAxB;EAEA,MAAMyC,SAAS,GAAG,CAAlB;EACA,MAAMC,QAAQ,GAAGhB,KAAK,GAAG,CAAzB;;EAEA,MAAMiB,YAAY,GAAIC,QAAD,IAAsB;IACvC,IAAIA,QAAQ,IAAIH,SAAZ,IAAyBG,QAAQ,IAAIF,QAAzC,EAAmD;MAC/C,IAAIV,QAAJ,EAAc;QACVA,QAAQ,CAACY,QAAD,CAAR;MACH;IACJ;EACJ,CAND;;EAQA,MAAMC,eAAe,GAAG,MAAM;IAC1B,MAAMC,QAAQ,GAAGb,IAAI,GAAGT,UAAP,IAAqBiB,SAArB,GACXR,IAAI,GAAGT,UADI,GAEVO,QAAQ,GAAGL,KAAK,GAAGF,UAAR,GAAqBS,IAAxB,GAA+BQ,SAF9C;IAIAE,YAAY,CAACG,QAAD,CAAZ;EACH,CAND;;EAQA,MAAMC,eAAe,GAAG,MAAM;IAC1B,MAAMH,QAAQ,GAAGX,IAAI,GAAGT,UAAP,IAAqBkB,QAArB,GACXT,IAAI,GAAGT,UADI,GAEVO,QAAQ,GAAGE,IAAI,GAAGT,UAAP,GAAoBE,KAAvB,GAA+BgB,QAF9C;IAIAC,YAAY,CAACC,QAAD,CAAZ;EACH,CAND;;EAQA,MAAMI,UAAU,GAAG,CAAClB,cAAD,gBACf,6BAAC,mBAAD;IACI,QAAQ,EAAEH,QAAQ,IAAK,CAACI,QAAD,IAAaE,IAAI,IAAIQ,SADhD;IAEI,OAAO,EAAEI,eAFb;IAGI,KAAK,EAAEpB,QAAQ,GAAGe,MAAM,CAACzB,UAAV,GAAuByB,MAAM,CAAC3B;EAHjD,gBAKI,6BAAC,kBAAD,OALJ,CADe,GAQf,IARJ;EAUA,MAAMoC,UAAU,GAAG,CAACpB,cAAD,gBACf,6BAAC,mBAAD;IACI,QAAQ,EAAEF,QAAQ,IAAK,CAACI,QAAD,IAAaE,IAAI,GAAGT,UAAP,GAAoBkB,QAD5D;IAEI,OAAO,EAAEK,eAFb;IAGI,KAAK,EAAEtB,QAAQ,GAAGe,MAAM,CAACpB,UAAV,GAAuBoB,MAAM,CAACtB;EAHjD,gBAKI,6BAAC,mBAAD,OALJ,CADe,GAQf,IARJ;EAUA,MAAMV,KAAK,GAAG,CAACoB,aAAD,GACVU,OAAO,KAAK,QAAZ,gBACI,6BAAC,yBAAD;IACI,WAAW,EAAEL,IADjB;IAEI,OAAO,EAAEP;EAFb,EADJ,GAKI,IAAAwB,YAAA,EAAMC,CAAC,IAAIjB,UAAU,CAAC;IAAEC,KAAK,EAAEgB,CAAT;IAAYxB,QAAZ;IAAsByB,QAAQ,EAAED,CAAC,KAAKlB;EAAtC,CAAD,CAArB,EAAqEP,KAArE,CANM,GAOV,IAPJ;EASA,MAAM2B,cAAc,GAAG;IACnBhB,KAAK,EAAE,IAAAiB,WAAA,EAAI,CACPd,MAAM,CAACrC,IADA,EAEPsB,QAAQ,GAAGe,MAAM,CAACjC,UAAV,GAAuBiC,MAAM,CAACpC,UAF/B,EAGPiC,KAHO,CAAJ,CADY;IAMnB,GAAGE;EANgB,CAAvB;;EASA,IAAId,QAAJ,EAAc;IACV,oBACI,6BAAC,iBAAD,EAAU4B,cAAV,eACI,6BAAC,iBAAD;MAAM,KAAK,EAAE,IAAAC,WAAA,EAAId,MAAM,CAAC5B,cAAX;IAAb,GACKa,QADL,EAEKuB,UAFL,EAGKC,UAHL,CADJ,eAOI,6BAAC,iBAAD;MAAM,KAAK,EAAE,IAAAK,WAAA,EAAId,MAAM,CAAChC,KAAX;IAAb,GACKA,KADL,CAPJ,CADJ;EAaH;;EAED,oBACI,6BAAC,iBAAD,EAAU6C,cAAV,EACKL,UADL,EAEKxC,KAFL,EAGKyC,UAHL,CADJ;AAOH;;AAAA"}
+{"version":3,"names":["useStyles","theme","useTheme","root","rootInline","flexDirection","alignItems","rootAnchor","items","justifyContent","marginTop","spacing","arrowContainer","prevInline","marginRight","prevAnchor","position","left","nextInline","marginLeft","nextAnchor","right","Pagination","props","bundleSize","children","color","count","disabled","hideIndicator","hideNextButton","hidePrevButton","infinite","onChange","page","renderItem","index","rest","style","variant","otherProps","styles","firstPage","lastPage","handleChange","nextPage","handlePrevPress","prevPage","handleNextPress","prevButton","nextButton","times","i","selected","containerProps","css"],"sources":["Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { times } from '@fountain-ui/utils';\nimport { ChevronLeft, ChevronRight } from '../internal/icons';\nimport { css, useTheme } from '../styles';\nimport IconButton from '../IconButton';\nimport PaginationItem from '../PaginationItem';\nimport NumberPagination from './NumberPagination';\nimport type PaginationProps from './PaginationProps';\nimport type { PaginationColor, PaginationVariant } from './PaginationProps';\n\ntype PaginationStyleKeys =\n    | 'root'\n    | 'rootInline'\n    | 'rootAnchor'\n    | 'items'\n    | 'arrowContainer'\n    | 'prevInline'\n    | 'prevAnchor'\n    | 'nextInline'\n    | 'nextAnchor';\n\ntype PaginationStyles = NamedStylesStringUnion<PaginationStyleKeys>;\n\nconst useStyles: UseStyles<PaginationStyles> = function (): PaginationStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rootInline: {\n            flexDirection: 'row',\n            alignItems: 'center',\n        },\n        rootAnchor: {\n            flexDirection: 'column',\n        },\n        items: {\n            flexDirection: 'row',\n            justifyContent: 'center',\n            marginTop: theme.spacing(2),\n        },\n        arrowContainer: {\n            flexDirection: 'column',\n            justifyContent: 'center',\n        },\n        prevInline: {\n            marginRight: theme.spacing(1),\n        },\n        prevAnchor: {\n            position: 'absolute',\n            left: -24,\n        },\n        nextInline: {\n            marginLeft: theme.spacing(1),\n        },\n        nextAnchor: {\n            position: 'absolute',\n            right: -24,\n        },\n    };\n};\n\nexport default function Pagination(props: PaginationProps) {\n    const {\n        bundleSize = 1,\n        children,\n        color = 'base' as PaginationColor,\n        count,\n        disabled = false,\n        hideIndicator = false,\n        hideNextButton = false,\n        hidePrevButton = false,\n        infinite = false,\n        onChange,\n        page,\n        renderItem = ({ index, ...rest }) => <PaginationItem key={`${index}`} {...rest}/>,\n        style,\n        variant = 'dot' as PaginationVariant,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const firstPage = 0;\n    const lastPage = count - 1;\n\n    const handleChange = (nextPage: number) => {\n        if (nextPage >= firstPage && nextPage <= lastPage) {\n            if (onChange) {\n                onChange(nextPage);\n            }\n        }\n    };\n\n    const handlePrevPress = () => {\n        const prevPage = page - bundleSize >= firstPage\n            ? page - bundleSize\n            : (infinite ? count - bundleSize + page : firstPage);\n\n        handleChange(prevPage);\n    };\n\n    const handleNextPress = () => {\n        const nextPage = page + bundleSize <= lastPage\n            ? page + bundleSize\n            : (infinite ? page + bundleSize - count : lastPage);\n\n        handleChange(nextPage);\n    };\n\n    const prevButton = !hidePrevButton ? (\n        <IconButton\n            disabled={disabled || (!infinite && page <= firstPage)}\n            onPress={handlePrevPress}\n            style={children ? styles.prevAnchor : styles.prevInline}\n        >\n            <ChevronLeft/>\n        </IconButton>\n    ) : null;\n\n    const nextButton = !hideNextButton ? (\n        <IconButton\n            disabled={disabled || (!infinite && page + bundleSize > lastPage)}\n            onPress={handleNextPress}\n            style={children ? styles.nextAnchor : styles.nextInline}\n        >\n            <ChevronRight/>\n        </IconButton>\n    ) : null;\n\n    const items = !hideIndicator ? (\n        variant === 'number' ? (\n            <NumberPagination\n                currentPage={page}\n                maxPage={count}\n            />\n        ) : times(i => renderItem({ color, index: i, disabled, selected: i === page }), count)\n    ) : null;\n\n    const containerProps = {\n        style: css([\n            styles.root,\n            children ? styles.rootAnchor : styles.rootInline,\n            style,\n        ]),\n        ...otherProps,\n    };\n\n    if (children) {\n        return (\n            <View {...containerProps}>\n                <View style={css(styles.arrowContainer)}>\n                    {children}\n                    {prevButton}\n                    {nextButton}\n                </View>\n\n                <View style={css(styles.items)}>\n                    {items}\n                </View>\n            </View>\n        );\n    }\n\n    return (\n        <View {...containerProps}>\n            {prevButton}\n            {items}\n            {nextButton}\n        </View>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Pagination/PaginationProps.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.paginationVariants = void 0;
+exports.paginationVariants = exports.paginationColors = void 0;
+const paginationColors = ['base', 'static'];
+exports.paginationColors = paginationColors;
 const paginationVariants = ['dot', 'number'];
 exports.paginationVariants = paginationVariants;
 //# sourceMappingURL=PaginationProps.js.map

package/build/commonjs/Pagination/PaginationProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["paginationVariants"],"sources":["PaginationProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport const paginationVariants = ['dot', 'number'] as const;\nexport type PaginationVariant = typeof paginationVariants[number];\n\nexport interface PaginationRenderItemParams {\n    /**\n     * Index of the pagination item.\n     */\n    index: number;\n\n    /**\n     * If `true`, the pagination item is disabled.\n     */\n    disabled: boolean;\n\n    /**\n     * If `true` the pagination item is selected.\n     */\n    selected: boolean;\n}\n\nexport default interface PaginationProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The Number of pages that change when the button is pressed\n     * @default 1\n     */\n    bundleSize?: number,\n\n    /**\n     * The pagination will be added relative to this node.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The total number of pages.\n     */\n    count: number,\n\n    /**\n     * If `true`, the pagination is disabled.\n     * @default false\n     */\n    disabled?: boolean;\n\n\n    /**\n     * If `true`, hide the page indicator.\n     * @default false\n     */\n    hideIndicator?: boolean,\n\n    /**\n     * If `true`, hide the next-page button.\n     * @default false\n     */\n    hideNextButton?: boolean,\n\n    /**\n     * If `true`, hide the previous-page button.\n     * @default false\n     */\n    hidePrevButton?: boolean,\n\n    /**\n     * If `true`, pagination is infinite.\n     * @default false\n     */\n    infinite?: boolean,\n\n    /**\n     * Callback fired when the page is changed.\n     */\n    onChange?: (page: number) => void,\n\n    /**\n     * The current page number.\n     */\n    page: number;\n\n    /**\n     * Render the item.\n     * @default (item) => <PaginationItem {...item} />\n     */\n    renderItem?: (params: PaginationRenderItemParams) => React.ReactNode;\n\n    /**\n     * Determines design variations of the component.\n     * @default 'dot'\n     */\n    variant?: PaginationVariant;\n}> {}\n"],"mappings":";;;;;;AAIO,MAAMA,kBAAkB,GAAG,CAAC,KAAD,EAAQ,QAAR,CAA3B"}
+{"version":3,"names":["paginationColors","paginationVariants"],"sources":["PaginationProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport const paginationColors = ['base', 'static'] as const;\nexport type PaginationColor = typeof paginationColors[number];\n\nexport const paginationVariants = ['dot', 'number'] as const;\nexport type PaginationVariant = typeof paginationVariants[number];\n\nexport interface PaginationRenderItemParams {\n    /**\n     * Set color of dot.\n     * @default 'base'\n     */\n    color?: PaginationColor;\n\n    /**\n     * Index of the pagination item.\n     */\n    index: number;\n\n    /**\n     * If `true`, the pagination item is disabled.\n     */\n    disabled: boolean;\n\n    /**\n     * If `true` the pagination item is selected.\n     */\n    selected: boolean;\n}\n\nexport default interface PaginationProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The Number of pages that change when the button is pressed\n     * @default 1\n     */\n    bundleSize?: number,\n\n    /**\n     * The pagination will be added relative to this node.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * Set color of dot.\n     * @default 'base'\n     */\n    color?: PaginationColor;\n\n    /**\n     * The total number of pages.\n     */\n    count: number,\n\n    /**\n     * If `true`, the pagination is disabled.\n     * @default false\n     */\n    disabled?: boolean;\n\n\n    /**\n     * If `true`, hide the page indicator.\n     * @default false\n     */\n    hideIndicator?: boolean,\n\n    /**\n     * If `true`, hide the next-page button.\n     * @default false\n     */\n    hideNextButton?: boolean,\n\n    /**\n     * If `true`, hide the previous-page button.\n     * @default false\n     */\n    hidePrevButton?: boolean,\n\n    /**\n     * If `true`, pagination is infinite.\n     * @default false\n     */\n    infinite?: boolean,\n\n    /**\n     * Callback fired when the page is changed.\n     */\n    onChange?: (page: number) => void,\n\n    /**\n     * The current page number.\n     */\n    page: number;\n\n    /**\n     * Render the item.\n     * @default (item) => <PaginationItem {...item} />\n     */\n    renderItem?: (params: PaginationRenderItemParams) => React.ReactNode;\n\n    /**\n     * Determines design variations of the component.\n     * @default 'dot'\n     */\n    variant?: PaginationVariant;\n}> {}\n"],"mappings":";;;;;;AAIO,MAAMA,gBAAgB,GAAG,CAAC,MAAD,EAAS,QAAT,CAAzB;;AAGA,MAAMC,kBAAkB,GAAG,CAAC,KAAD,EAAQ,QAAR,CAA3B"}

package/build/commonjs/Pagination/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "default", {
     return _Pagination.default;
   }
 });
+Object.defineProperty(exports, "paginationColors", {
+  enumerable: true,
+  get: function () {
+    return _PaginationProps.paginationColors;
+  }
+});
 Object.defineProperty(exports, "paginationVariants", {
   enumerable: true,
   get: function () {

package/build/commonjs/Pagination/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Pagination';\nexport type { default as PaginationProps } from './PaginationProps';\nexport { paginationVariants } from './PaginationProps';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AAEA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Pagination';\nexport type { default as PaginationProps, PaginationColor, PaginationVariant } from './PaginationProps';\nexport { paginationColors, paginationVariants } from './PaginationProps';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA"}

package/build/commonjs/PaginationItem/PaginationItem.js

@@ -9,41 +9,51 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
-var _styles = require("../styles");
+var _styles = require("@fountain-ui/styles");
+
+var _styles2 = require("../styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const useStyles = function () {
-  const theme = (0, _styles.useTheme)();
-  const size = 6;
-  return {
-    root: {
-      width: size,
-      height: size,
-      borderRadius: size * 0.5,
-      marginHorizontal: theme.spacing(1)
-    },
-    selected: {
-      backgroundColor: theme.palette.fill.base
-    },
-    unselected: {
-      backgroundColor: theme.palette.status.disabled
-    }
-  };
-};
+const DEFAULT_SIZE = 6;
+
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    width: DEFAULT_SIZE,
+    height: DEFAULT_SIZE,
+    borderRadius: DEFAULT_SIZE * 0.5,
+    marginHorizontal: 4
+  }
+});
+
+function getBackgroundColor(color, selected) {
+  const theme = (0, _styles2.useTheme)();
+
+  switch (color) {
+    case 'static':
+      return selected ? _styles.commonColors.static.strongInverse : _styles.commonColors.static.weakOpacityInverse;
+
+    case 'base':
+    default:
+      return selected ? theme.palette.fill.base : theme.palette.status.disabled;
+  }
+}
 
 function PaginationItem(props) {
   const {
+    color = 'base',
     disabled,
-    selected,
+    selected = false,
     style,
     ...otherProps
   } = props;
-  const styles = useStyles();
+  const backgroundColor = getBackgroundColor(color, selected);
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
-    style: (0, _styles.css)([styles.root, selected ? styles.selected : styles.unselected, style])
+    style: (0, _styles2.css)([styles.root, {
+      backgroundColor
+    }, style])
   }, otherProps));
 }
 

package/build/commonjs/PaginationItem/PaginationItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","size","root","width","height","borderRadius","marginHorizontal","spacing","selected","backgroundColor","palette","fill","base","unselected","status","disabled","PaginationItem","props","style","otherProps","styles","css","React","memo"],"sources":["PaginationItem.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type PaginationItemProps from './PaginationItemProps';\n\ntype PaginationItemStyles = NamedStylesStringUnion<'root' | 'selected' | 'unselected'>;\n\nconst useStyles: UseStyles<PaginationItemStyles> = function (): PaginationItemStyles {\n    const theme = useTheme();\n\n    const size = 6;\n\n    return {\n        root: {\n            width: size,\n            height: size,\n            borderRadius: size * 0.5,\n            marginHorizontal: theme.spacing(1),\n        },\n        selected: {\n            backgroundColor: theme.palette.fill.base,\n        },\n        unselected: {\n            backgroundColor: theme.palette.status.disabled,\n        },\n    };\n};\n\nfunction PaginationItem(props: PaginationItemProps) {\n    const {\n        disabled,\n        selected,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                selected ? styles.selected : styles.unselected,\n                style,\n            ])}\n            {...otherProps}\n        />\n    );\n}\n\nexport default React.memo(PaginationItem);\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;AAKA,MAAMA,SAA0C,GAAG,YAAkC;EACjF,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,IAAI,GAAG,CAAb;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,KAAK,EAAEF,IADL;MAEFG,MAAM,EAAEH,IAFN;MAGFI,YAAY,EAAEJ,IAAI,GAAG,GAHnB;MAIFK,gBAAgB,EAAEP,KAAK,CAACQ,OAAN,CAAc,CAAd;IAJhB,CADH;IAOHC,QAAQ,EAAE;MACNC,eAAe,EAAEV,KAAK,CAACW,OAAN,CAAcC,IAAd,CAAmBC;IAD9B,CAPP;IAUHC,UAAU,EAAE;MACRJ,eAAe,EAAEV,KAAK,CAACW,OAAN,CAAcI,MAAd,CAAqBC;IAD9B;EAVT,CAAP;AAcH,CAnBD;;AAqBA,SAASC,cAAT,CAAwBC,KAAxB,EAAoD;EAChD,MAAM;IACFF,QADE;IAEFP,QAFE;IAGFU,KAHE;IAIF,GAAGC;EAJD,IAKFF,KALJ;EAOA,MAAMG,MAAM,GAAGtB,SAAS,EAAxB;EAEA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAuB,WAAA,EAAI,CACPD,MAAM,CAAClB,IADA,EAEPM,QAAQ,GAAGY,MAAM,CAACZ,QAAV,GAAqBY,MAAM,CAACP,UAF7B,EAGPK,KAHO,CAAJ;EADX,GAMQC,UANR,EADJ;AAUH;;4BAEcG,cAAA,CAAMC,IAAN,CAAWP,cAAX,C"}
+{"version":3,"names":["DEFAULT_SIZE","styles","StyleSheet","create","root","width","height","borderRadius","marginHorizontal","getBackgroundColor","color","selected","theme","useTheme","commonColors","static","strongInverse","weakOpacityInverse","palette","fill","base","status","disabled","PaginationItem","props","style","otherProps","backgroundColor","css","React","memo"],"sources":["PaginationItem.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, View, ViewStyle } from 'react-native';\nimport { commonColors, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { PaginationColor } from '../Pagination';\nimport { css, useTheme } from '../styles';\nimport type PaginationItemProps from './PaginationItemProps';\n\nconst DEFAULT_SIZE = 6;\n\nconst styles = StyleSheet.create({\n    root: {\n        width: DEFAULT_SIZE,\n        height: DEFAULT_SIZE,\n        borderRadius: DEFAULT_SIZE * 0.5,\n        marginHorizontal: 4,\n    },\n});\n\nfunction getBackgroundColor(color: PaginationColor, selected: boolean): ViewStyle['backgroundColor'] {\n    const theme = useTheme();\n\n    switch (color) {\n        case 'static':\n            return selected\n                ? commonColors.static.strongInverse\n                : commonColors.static.weakOpacityInverse;\n        case 'base':\n        default:\n            return selected\n                ? theme.palette.fill.base\n                : theme.palette.status.disabled;\n\n    }\n}\n\nfunction PaginationItem(props: PaginationItemProps) {\n    const {\n        color = 'base' as PaginationColor,\n        disabled,\n        selected = false,\n        style,\n        ...otherProps\n    } = props;\n\n    const backgroundColor = getBackgroundColor(color, selected);\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                { backgroundColor },\n                style,\n            ])}\n            {...otherProps}\n        />\n    );\n}\n\nexport default React.memo(PaginationItem);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;AAGA,MAAMA,YAAY,GAAG,CAArB;;AAEA,MAAMC,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,KAAK,EAAEL,YADL;IAEFM,MAAM,EAAEN,YAFN;IAGFO,YAAY,EAAEP,YAAY,GAAG,GAH3B;IAIFQ,gBAAgB,EAAE;EAJhB;AADuB,CAAlB,CAAf;;AASA,SAASC,kBAAT,CAA4BC,KAA5B,EAAoDC,QAApD,EAAqG;EACjG,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;;EAEA,QAAQH,KAAR;IACI,KAAK,QAAL;MACI,OAAOC,QAAQ,GACTG,oBAAA,CAAaC,MAAb,CAAoBC,aADX,GAETF,oBAAA,CAAaC,MAAb,CAAoBE,kBAF1B;;IAGJ,KAAK,MAAL;IACA;MACI,OAAON,QAAQ,GACTC,KAAK,CAACM,OAAN,CAAcC,IAAd,CAAmBC,IADV,GAETR,KAAK,CAACM,OAAN,CAAcG,MAAd,CAAqBC,QAF3B;EAPR;AAYH;;AAED,SAASC,cAAT,CAAwBC,KAAxB,EAAoD;EAChD,MAAM;IACFd,KAAK,GAAG,MADN;IAEFY,QAFE;IAGFX,QAAQ,GAAG,KAHT;IAIFc,KAJE;IAKF,GAAGC;EALD,IAMFF,KANJ;EAQA,MAAMG,eAAe,GAAGlB,kBAAkB,CAACC,KAAD,EAAQC,QAAR,CAA1C;EAEA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAiB,YAAA,EAAI,CACP3B,MAAM,CAACG,IADA,EAEP;MAAEuB;IAAF,CAFO,EAGPF,KAHO,CAAJ;EADX,GAMQC,UANR,EADJ;AAUH;;4BAEcG,cAAA,CAAMC,IAAN,CAAWP,cAAX,C"}

package/build/commonjs/PaginationItem/PaginationItemProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["PaginationItemProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport default interface PaginationItemProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * If `true`, the pagination item is disabled.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * If `true` the pagination item is selected.\n     * @default false\n     */\n    selected?: boolean;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["PaginationItemProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport { PaginationColor } from '../Pagination';\n\nexport default interface PaginationItemProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Set color of dot.\n     * @default 'base'\n     */\n    color?: PaginationColor;\n\n    /**\n     * If `true`, the pagination item is disabled.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * If `true` the pagination item is selected.\n     * @default false\n     */\n    selected?: boolean;\n}> {}\n"],"mappings":""}

package/build/commonjs/Tabs/useTabsStyle.js

@@ -7,17 +7,20 @@ exports.default = useTabsStyle;
 
 var _react = require("react");
 
+var _hooks = require("../hooks");
+
 var _styles = require("../styles");
 
 function useTabsStyle(variant) {
   const theme = (0, _styles.useTheme)();
+  const isDesktop = (0, _hooks.useBreakpointUp)('md', true, false);
   return (0, _react.useMemo)(() => {
     switch (variant) {
       case 'circular':
         return {
           container: {
-            paddingBottom: theme.spacing(2),
-            paddingHorizontal: theme.spacing(3)
+            paddingBottom: 8,
+            paddingHorizontal: isDesktop ? 20 : 12
           }
         };
 
@@ -30,10 +33,10 @@ function useTabsStyle(variant) {
       default:
         return {
           container: {
-            paddingHorizontal: theme.spacing(1.5)
+            paddingHorizontal: isDesktop ? 14 : 6
           }
         };
     }
-  }, [theme, variant]);
+  }, [theme, variant, isDesktop]);
 }
 //# sourceMappingURL=useTabsStyle.js.map

package/build/commonjs/Tabs/useTabsStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["useTabsStyle","variant","theme","useTheme","useMemo","container","paddingBottom","spacing","paddingHorizontal"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type { TabVariant } from '../Tab';\n\ninterface TabsStyle {\n    container: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant) {\n    const theme = useTheme();\n\n    return useMemo<TabsStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingBottom: theme.spacing(2),\n                        paddingHorizontal: theme.spacing(3),\n                    },\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {},\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        paddingHorizontal: theme.spacing(1.5),\n                    },\n                };\n        }\n    }, [theme, variant]);\n}\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAOe,SAASA,YAAT,CAAsBC,OAAtB,EAA2C;EACtD,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO,IAAAC,cAAA,EAAmB,MAAM;IAC5B,QAAQH,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHI,SAAS,EAAE;YACPC,aAAa,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CADR;YAEPC,iBAAiB,EAAEN,KAAK,CAACK,OAAN,CAAc,CAAd;UAFZ;QADR,CAAP;;MAMJ,KAAK,mBAAL;QACI,OAAO;UACHF,SAAS,EAAE;QADR,CAAP;;MAGJ,KAAK,SAAL;MACA;QACI,OAAO;UACHA,SAAS,EAAE;YACPG,iBAAiB,EAAEN,KAAK,CAACK,OAAN,CAAc,GAAd;UADZ;QADR,CAAP;IAdR;EAoBH,CArBM,EAqBJ,CAACL,KAAD,EAAQD,OAAR,CArBI,CAAP;AAsBH"}
+{"version":3,"names":["useTabsStyle","variant","theme","useTheme","isDesktop","useBreakpointUp","useMemo","container","paddingBottom","paddingHorizontal"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { useTheme } from '../styles';\nimport type { TabVariant } from '../Tab';\n\ninterface TabsStyle {\n    container: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant) {\n    const theme = useTheme();\n\n    const isDesktop = useBreakpointUp('md', true, false);\n\n    return useMemo<TabsStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingBottom: 8,\n                        paddingHorizontal: isDesktop ? 20 : 12,\n                    },\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {},\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        paddingHorizontal: isDesktop ? 14 : 6,\n                    },\n                };\n        }\n    }, [theme, variant, isDesktop]);\n}\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAOe,SAASA,YAAT,CAAsBC,OAAtB,EAA2C;EACtD,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,SAAS,GAAG,IAAAC,sBAAA,EAAgB,IAAhB,EAAsB,IAAtB,EAA4B,KAA5B,CAAlB;EAEA,OAAO,IAAAC,cAAA,EAAmB,MAAM;IAC5B,QAAQL,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHM,SAAS,EAAE;YACPC,aAAa,EAAE,CADR;YAEPC,iBAAiB,EAAEL,SAAS,GAAG,EAAH,GAAQ;UAF7B;QADR,CAAP;;MAMJ,KAAK,mBAAL;QACI,OAAO;UACHG,SAAS,EAAE;QADR,CAAP;;MAGJ,KAAK,SAAL;MACA;QACI,OAAO;UACHA,SAAS,EAAE;YACPE,iBAAiB,EAAEL,SAAS,GAAG,EAAH,GAAQ;UAD7B;QADR,CAAP;IAdR;EAoBH,CArBM,EAqBJ,CAACF,KAAD,EAAQD,OAAR,EAAiBG,SAAjB,CArBI,CAAP;AAsBH"}

package/build/commonjs/Toolbar/BackButton/BackButton.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BackButton;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _IconButton = _interopRequireDefault(require("../../IconButton"));
+
+var _internal = require("../../internal");
+
+var _styles = require("@fountain-ui/styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    height: 40,
+    left: 4,
+    paddingLeft: 5,
+    paddingRight: 11,
+    paddingVertical: 8,
+    position: 'absolute',
+    width: 40
+  }
+});
+
+function BackButton(props) {
+  const {
+    style: styleProp,
+    ...otherProps
+  } = props;
+  const rootStyle = (0, _styles.css)([styles.root, styleProp]);
+  return /*#__PURE__*/_react.default.createElement(_IconButton.default, _extends({
+    style: rootStyle
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_internal.ChevronLeft, {
+    color: 'strong',
+    size: 'large'
+  }));
+}
+//# sourceMappingURL=BackButton.js.map