@fountain-ui/core 2.0.0-beta.92 → 2.0.0-beta.94

package/build/commonjs/IconButton/IconButton.js

@@ -9,9 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
+var _styles = require("@fountain-ui/styles");
+
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 
-var _styles = require("../styles");
+var _styles2 = require("../styles");
 
 var _utils = require("../utils");
 
@@ -19,69 +21,64 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 iconSizes = {
-  tiny: 16,
-  small: 20,
-  medium: 24,
-  large: 28
-};
-
-const useStyles = function () {
-  const theme = (0, _styles.useTheme)();
-  return {
-    root: {
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      padding: theme.spacing(1)
-    }
-  };
-};
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    height: 32,
+    justifyContent: 'center',
+    width: 32
+  }
+});
+
+function selectIconColor(theme, color) {
+  switch (color) {
+    default:
+    case 'strong':
+      return theme.palette.icon.strong;
+
+    case 'base':
+      return theme.palette.icon.base;
+
+    case 'staticStrongInverse':
+      return _styles.commonColors.static.strongInverse;
+
+    case 'disabled':
+      return theme.palette.status.disabled;
+  }
+}
 
 function IconButton(props) {
   const {
     children,
-    color = 'primary',
+    color = 'strong',
     disabled = false,
-    label,
     onPress,
-    size = 'medium',
+    iconSize = 'medium',
     style,
     ...otherProps
   } = props;
-  const theme = (0, _styles.useTheme)();
-  const styles = useStyles();
+  const theme = (0, _styles2.useTheme)();
+  const iconColor = selectIconColor(theme, color);
   const icon = (0, _utils.cloneElementSafely)(children, {
-    width: iconSizes[size],
-    height: iconSizes[size],
-    color: color
+    enableV2: true,
+    fill: iconColor,
+    size: iconSize
   });
-  const fontStyle = (0, _styles.createFontStyle)(theme, {
-    selector: typo => typo.caption1,
-    color: theme.palette[color].main
-  });
-  const labelStyle = (0, _styles.css)([fontStyle]);
-  const rootStyle = (0, _styles.css)([styles.root, style]);
+  const rootStyle = (0, _styles2.css)([styles.root, style]);
 
-  const handlePress = async () => {
+  const handlePress = () => {
     if (disabled) {
       return;
     }
 
-    if (onPress) {
-      onPress();
-      return;
-    }
+    onPress === null || onPress === void 0 ? void 0 : onPress();
   };
 
   return /*#__PURE__*/_react.default.createElement(_ButtonBase.default, _extends({
     disabled: disabled,
     onPress: handlePress,
     style: rootStyle
-  }, otherProps), icon, label ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    children: label,
-    style: labelStyle
-  }) : null);
+  }, otherProps), icon);
 }
 
 ;

package/build/commonjs/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["iconSizes","tiny","small","medium","large","useStyles","theme","useTheme","root","flexDirection","justifyContent","alignItems","padding","spacing","IconButton","props","children","color","disabled","label","onPress","size","style","otherProps","styles","icon","cloneElementSafely","width","height","fontStyle","createFontStyle","selector","typo","caption1","palette","main","labelStyle","css","rootStyle","handlePress"],"sources":["IconButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type IconButtonProps from './IconButtonProps';\nimport type { IconButtonSize } from './IconButtonProps';\n\ntype IconButtonStyles = NamedStylesStringUnion<'root'>;\n\ntype IconSizes = { [n in IconButtonSize]: number };\n\nconst iconSizes: IconSizes = {\n    tiny: 16,\n    small: 20,\n    medium: 24,\n    large: 28,\n};\n\nconst useStyles: UseStyles<IconButtonStyles> = function (): IconButtonStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'center',\n            padding: theme.spacing(1),\n        },\n    };\n};\n\nexport default function IconButton(props: IconButtonProps) {\n    const {\n        children,\n        color = 'primary',\n        disabled = false,\n        label,\n        onPress,\n        size = 'medium',\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n    const styles = useStyles();\n\n    const icon = cloneElementSafely(children, {\n        width: iconSizes[size],\n        height: iconSizes[size],\n        color: color,\n    });\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption1,\n        color: theme.palette[color].main,\n    });\n\n    const labelStyle = css([\n        fontStyle,\n    ]);\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const handlePress = async () => {\n        if (disabled) {\n            return;\n        }\n        if (onPress) {\n            onPress();\n            return;\n        }\n    };\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {icon}\n\n            {label ? (\n                <Text\n                    children={label}\n                    style={labelStyle}\n                />\n            ) : null}\n        </ButtonBase>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAQA,MAAMA,SAAoB,GAAG;EACzBC,IAAI,EAAE,EADmB;EAEzBC,KAAK,EAAE,EAFkB;EAGzBC,MAAM,EAAE,EAHiB;EAIzBC,KAAK,EAAE;AAJkB,CAA7B;;AAOA,MAAMC,SAAsC,GAAG,YAA8B;EACzE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,aAAa,EAAE,QADb;MAEFC,cAAc,EAAE,QAFd;MAGFC,UAAU,EAAE,QAHV;MAIFC,OAAO,EAAEN,KAAK,CAACO,OAAN,CAAc,CAAd;IAJP;EADH,CAAP;AAQH,CAXD;;AAae,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,QADE;IAEFC,KAAK,GAAG,SAFN;IAGFC,QAAQ,GAAG,KAHT;IAIFC,KAJE;IAKFC,OALE;IAMFC,IAAI,GAAG,QANL;IAOFC,KAPE;IAQF,GAAGC;EARD,IASFR,KATJ;EAWA,MAAMT,KAAK,GAAG,IAAAC,gBAAA,GAAd;EACA,MAAMiB,MAAM,GAAGnB,SAAS,EAAxB;EAEA,MAAMoB,IAAI,GAAG,IAAAC,yBAAA,EAAmBV,QAAnB,EAA6B;IACtCW,KAAK,EAAE3B,SAAS,CAACqB,IAAD,CADsB;IAEtCO,MAAM,EAAE5B,SAAS,CAACqB,IAAD,CAFqB;IAGtCJ,KAAK,EAAEA;EAH+B,CAA7B,CAAb;EAMA,MAAMY,SAAS,GAAG,IAAAC,uBAAA,EAAgBxB,KAAhB,EAAuB;IACrCyB,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,QADY;IAErChB,KAAK,EAAEX,KAAK,CAAC4B,OAAN,CAAcjB,KAAd,EAAqBkB;EAFS,CAAvB,CAAlB;EAKA,MAAMC,UAAU,GAAG,IAAAC,WAAA,EAAI,CACnBR,SADmB,CAAJ,CAAnB;EAIA,MAAMS,SAAS,GAAG,IAAAD,WAAA,EAAI,CAClBb,MAAM,CAAChB,IADW,EAElBc,KAFkB,CAAJ,CAAlB;;EAKA,MAAMiB,WAAW,GAAG,YAAY;IAC5B,IAAIrB,QAAJ,EAAc;MACV;IACH;;IACD,IAAIE,OAAJ,EAAa;MACTA,OAAO;MACP;IACH;EACJ,CARD;;EAUA,oBACI,6BAAC,mBAAD;IACI,QAAQ,EAAEF,QADd;IAEI,OAAO,EAAEqB,WAFb;IAGI,KAAK,EAAED;EAHX,GAIQf,UAJR,GAMKE,IANL,EAQKN,KAAK,gBACF,6BAAC,iBAAD;IACI,QAAQ,EAAEA,KADd;IAEI,KAAK,EAAEiB;EAFX,EADE,GAKF,IAbR,CADJ;AAiBH;;AAAA"}
+{"version":3,"names":["styles","StyleSheet","create","root","alignItems","height","justifyContent","width","selectIconColor","theme","color","palette","icon","strong","base","commonColors","static","strongInverse","status","disabled","IconButton","props","children","onPress","iconSize","style","otherProps","useTheme","iconColor","cloneElementSafely","enableV2","fill","size","rootStyle","css","handlePress"],"sources":["IconButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { commonColors, Theme } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { css, useTheme } from '../styles';\nimport type { SvgIconSize } from '../SvgIcon/SvgIconProps';\nimport { cloneElementSafely } from '../utils';\nimport type IconButtonProps from './IconButtonProps';\nimport type { IconButtonColor } from './IconButtonProps';\n\nconst styles = StyleSheet.create({\n    root: {\n        alignItems: 'center',\n        height: 32,\n        justifyContent: 'center',\n        width: 32,\n    },\n});\n\nfunction selectIconColor(theme: Theme, color: IconButtonColor) {\n    switch (color) {\n        default:\n        case 'strong':\n            return theme.palette.icon.strong;\n        case 'base':\n            return theme.palette.icon.base;\n        case 'staticStrongInverse':\n            return commonColors.static.strongInverse;\n        case 'disabled':\n            return theme.palette.status.disabled;\n    }\n}\n\nexport default function IconButton(props: IconButtonProps) {\n    const {\n        children,\n        color = 'strong' as IconButtonColor,\n        disabled = false,\n        onPress,\n        iconSize = 'medium' as SvgIconSize,\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const iconColor = selectIconColor(theme, color);\n\n    const icon = cloneElementSafely(children, {\n        enableV2: true,\n        fill: iconColor,\n        size: iconSize,\n    });\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const handlePress = () => {\n        if (disabled) {\n            return;\n        }\n\n        onPress?.();\n    };\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {icon}\n        </ButtonBase>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAIA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,UAAU,EAAE,QADV;IAEFC,MAAM,EAAE,EAFN;IAGFC,cAAc,EAAE,QAHd;IAIFC,KAAK,EAAE;EAJL;AADuB,CAAlB,CAAf;;AASA,SAASC,eAAT,CAAyBC,KAAzB,EAAuCC,KAAvC,EAA+D;EAC3D,QAAQA,KAAR;IACI;IACA,KAAK,QAAL;MACI,OAAOD,KAAK,CAACE,OAAN,CAAcC,IAAd,CAAmBC,MAA1B;;IACJ,KAAK,MAAL;MACI,OAAOJ,KAAK,CAACE,OAAN,CAAcC,IAAd,CAAmBE,IAA1B;;IACJ,KAAK,qBAAL;MACI,OAAOC,oBAAA,CAAaC,MAAb,CAAoBC,aAA3B;;IACJ,KAAK,UAAL;MACI,OAAOR,KAAK,CAACE,OAAN,CAAcO,MAAd,CAAqBC,QAA5B;EATR;AAWH;;AAEc,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,QADE;IAEFZ,KAAK,GAAG,QAFN;IAGFS,QAAQ,GAAG,KAHT;IAIFI,OAJE;IAKFC,QAAQ,GAAG,QALT;IAMFC,KANE;IAOF,GAAGC;EAPD,IAQFL,KARJ;EAUA,MAAMZ,KAAK,GAAG,IAAAkB,iBAAA,GAAd;EAEA,MAAMC,SAAS,GAAGpB,eAAe,CAACC,KAAD,EAAQC,KAAR,CAAjC;EAEA,MAAME,IAAI,GAAG,IAAAiB,yBAAA,EAAmBP,QAAnB,EAA6B;IACtCQ,QAAQ,EAAE,IAD4B;IAEtCC,IAAI,EAAEH,SAFgC;IAGtCI,IAAI,EAAER;EAHgC,CAA7B,CAAb;EAMA,MAAMS,SAAS,GAAG,IAAAC,YAAA,EAAI,CAClBlC,MAAM,CAACG,IADW,EAElBsB,KAFkB,CAAJ,CAAlB;;EAKA,MAAMU,WAAW,GAAG,MAAM;IACtB,IAAIhB,QAAJ,EAAc;MACV;IACH;;IAEDI,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO;EACV,CAND;;EAQA,oBACI,6BAAC,mBAAD;IACI,QAAQ,EAAEJ,QADd;IAEI,OAAO,EAAEgB,WAFb;IAGI,KAAK,EAAEF;EAHX,GAIQP,UAJR,GAMKd,IANL,CADJ;AAUH;;AAAA"}

package/build/commonjs/IconButton/IconButtonProps.js

@@ -1,2 +1,9 @@
 "use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconButtonColors = void 0;
+const iconButtonColors = ['strong', 'base', 'staticStrongInverse', 'disabled'];
+exports.iconButtonColors = iconButtonColors;
 //# sourceMappingURL=IconButtonProps.js.map

package/build/commonjs/IconButton/IconButtonProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["IconButtonProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ButtonBaseProps } from '../ButtonBase';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type IconButtonColor = CommonComponentColor;\n\nexport type IconButtonSize = 'medium' | 'large' | 'small' | 'tiny';\n\nexport default interface IconButtonProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * The icon element.\n     */\n    children: React.ReactElement;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'primary'\n     */\n    color?: IconButtonColor;\n\n    /**\n     *  If present, this is typography displayed at the bottom of the icon.\n     */\n    label?: string;\n\n    /**\n     * The size of the button.\n     * @default 'medium'\n     */\n    size?: IconButtonSize;\n}> {}\n"],"mappings":""}
+{"version":3,"names":["iconButtonColors"],"sources":["IconButtonProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ButtonBaseProps } from '../ButtonBase';\nimport type { SvgIconSize } from '../SvgIcon/SvgIconProps';\nimport type { OverridableComponentProps } from '../types';\n\nexport const iconButtonColors = [\n    'strong',\n    'base',\n    'staticStrongInverse',\n    'disabled',\n] as const;\nexport type IconButtonColor = typeof iconButtonColors[number];\n\nexport default interface IconButtonProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * The icon element.\n     */\n    children: React.ReactElement;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'strong'\n     */\n    color?: IconButtonColor;\n\n    /**\n     * Determines the size of the icon that goes inside the button.\n     * @default 'medium'\n     */\n    iconSize?: SvgIconSize;\n}> {}\n"],"mappings":";;;;;;AAKO,MAAMA,gBAAgB,GAAG,CAC5B,QAD4B,EAE5B,MAF4B,EAG5B,qBAH4B,EAI5B,UAJ4B,CAAzB"}

package/build/commonjs/IconButton/LegacyIconButton.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IconButton;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
+
+var _styles = require("../styles");
+
+var _utils = require("../utils");
+
+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 iconSizes = {
+  tiny: 16,
+  small: 20,
+  medium: 24,
+  large: 28
+};
+
+const useStyles = function () {
+  const theme = (0, _styles.useTheme)();
+  return {
+    root: {
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: theme.spacing(1)
+    }
+  };
+};
+
+function IconButton(props) {
+  const {
+    children,
+    color = 'primary',
+    disabled = false,
+    label,
+    onPress,
+    size = 'medium',
+    style,
+    iconSize,
+    ...otherProps
+  } = props;
+  const theme = (0, _styles.useTheme)();
+  const styles = useStyles();
+  const icon = (0, _utils.cloneElementSafely)(children, {
+    width: iconSize ?? iconSizes[size],
+    height: iconSize ?? iconSizes[size],
+    color: color
+  });
+  const fontStyle = (0, _styles.createFontStyle)(theme, {
+    selector: typo => typo.caption1,
+    color: theme.palette[color].main
+  });
+  const labelStyle = (0, _styles.css)([fontStyle]);
+  const rootStyle = (0, _styles.css)([styles.root, style]);
+
+  const handlePress = async () => {
+    if (disabled) {
+      return;
+    }
+
+    if (onPress) {
+      onPress();
+      return;
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_ButtonBase.default, _extends({
+    disabled: disabled,
+    onPress: handlePress,
+    style: rootStyle
+  }, otherProps), icon, label ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    children: label,
+    style: labelStyle
+  }) : null);
+}
+
+;
+//# sourceMappingURL=LegacyIconButton.js.map

package/build/commonjs/IconButton/LegacyIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["iconSizes","tiny","small","medium","large","useStyles","theme","useTheme","root","flexDirection","justifyContent","alignItems","padding","spacing","IconButton","props","children","color","disabled","label","onPress","size","style","iconSize","otherProps","styles","icon","cloneElementSafely","width","height","fontStyle","createFontStyle","selector","typo","caption1","palette","main","labelStyle","css","rootStyle","handlePress"],"sources":["LegacyIconButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type IconButtonProps from './LegacyIconButtonProps';\nimport type { IconButtonSize } from './LegacyIconButtonProps';\n\ntype IconButtonStyles = NamedStylesStringUnion<'root'>;\n\ntype IconSizes = { [n in IconButtonSize]: number };\n\nconst iconSizes: IconSizes = {\n    tiny: 16,\n    small: 20,\n    medium: 24,\n    large: 28,\n};\n\nconst useStyles: UseStyles<IconButtonStyles> = function (): IconButtonStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'center',\n            padding: theme.spacing(1),\n        },\n    };\n};\n\nexport default function IconButton(props: IconButtonProps) {\n    const {\n        children,\n        color = 'primary',\n        disabled = false,\n        label,\n        onPress,\n        size = 'medium',\n        style,\n        iconSize,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n    const styles = useStyles();\n\n    const icon = cloneElementSafely(children, {\n        width: iconSize ?? iconSizes[size],\n        height: iconSize ?? iconSizes[size],\n        color: color,\n    });\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption1,\n        color: theme.palette[color].main,\n    });\n\n    const labelStyle = css([\n        fontStyle,\n    ]);\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const handlePress = async () => {\n        if (disabled) {\n            return;\n        }\n        if (onPress) {\n            onPress();\n            return;\n        }\n    };\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {icon}\n\n            {label ? (\n                <Text\n                    children={label}\n                    style={labelStyle}\n                />\n            ) : null}\n        </ButtonBase>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAQA,MAAMA,SAAoB,GAAG;EACzBC,IAAI,EAAE,EADmB;EAEzBC,KAAK,EAAE,EAFkB;EAGzBC,MAAM,EAAE,EAHiB;EAIzBC,KAAK,EAAE;AAJkB,CAA7B;;AAOA,MAAMC,SAAsC,GAAG,YAA8B;EACzE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,aAAa,EAAE,QADb;MAEFC,cAAc,EAAE,QAFd;MAGFC,UAAU,EAAE,QAHV;MAIFC,OAAO,EAAEN,KAAK,CAACO,OAAN,CAAc,CAAd;IAJP;EADH,CAAP;AAQH,CAXD;;AAae,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,QADE;IAEFC,KAAK,GAAG,SAFN;IAGFC,QAAQ,GAAG,KAHT;IAIFC,KAJE;IAKFC,OALE;IAMFC,IAAI,GAAG,QANL;IAOFC,KAPE;IAQFC,QARE;IASF,GAAGC;EATD,IAUFT,KAVJ;EAYA,MAAMT,KAAK,GAAG,IAAAC,gBAAA,GAAd;EACA,MAAMkB,MAAM,GAAGpB,SAAS,EAAxB;EAEA,MAAMqB,IAAI,GAAG,IAAAC,yBAAA,EAAmBX,QAAnB,EAA6B;IACtCY,KAAK,EAAEL,QAAQ,IAAIvB,SAAS,CAACqB,IAAD,CADU;IAEtCQ,MAAM,EAAEN,QAAQ,IAAIvB,SAAS,CAACqB,IAAD,CAFS;IAGtCJ,KAAK,EAAEA;EAH+B,CAA7B,CAAb;EAMA,MAAMa,SAAS,GAAG,IAAAC,uBAAA,EAAgBzB,KAAhB,EAAuB;IACrC0B,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,QADY;IAErCjB,KAAK,EAAEX,KAAK,CAAC6B,OAAN,CAAclB,KAAd,EAAqBmB;EAFS,CAAvB,CAAlB;EAKA,MAAMC,UAAU,GAAG,IAAAC,WAAA,EAAI,CACnBR,SADmB,CAAJ,CAAnB;EAIA,MAAMS,SAAS,GAAG,IAAAD,WAAA,EAAI,CAClBb,MAAM,CAACjB,IADW,EAElBc,KAFkB,CAAJ,CAAlB;;EAKA,MAAMkB,WAAW,GAAG,YAAY;IAC5B,IAAItB,QAAJ,EAAc;MACV;IACH;;IACD,IAAIE,OAAJ,EAAa;MACTA,OAAO;MACP;IACH;EACJ,CARD;;EAUA,oBACI,6BAAC,mBAAD;IACI,QAAQ,EAAEF,QADd;IAEI,OAAO,EAAEsB,WAFb;IAGI,KAAK,EAAED;EAHX,GAIQf,UAJR,GAMKE,IANL,EAQKP,KAAK,gBACF,6BAAC,iBAAD;IACI,QAAQ,EAAEA,KADd;IAEI,KAAK,EAAEkB;EAFX,EADE,GAKF,IAbR,CADJ;AAiBH;;AAAA"}

package/build/commonjs/IconButton/LegacyIconButtonProps.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=LegacyIconButtonProps.js.map

package/build/commonjs/IconButton/LegacyIconButtonProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["LegacyIconButtonProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ButtonBaseProps } from '../ButtonBase';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type IconButtonColor = CommonComponentColor;\n\nexport type IconButtonSize = 'medium' | 'large' | 'small' | 'tiny';\n\nexport default interface IconButtonProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * The icon element.\n     */\n    children: React.ReactElement;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'primary'\n     */\n    color?: IconButtonColor;\n\n    /**\n     *  If present, this is typography displayed at the bottom of the icon.\n     */\n    label?: string;\n\n    /**\n     * The size of the button.\n     * @default 'medium'\n     */\n    size?: IconButtonSize;\n\n    /**\n     * The custom size of the Icon. Not preDefined.\n     */\n    iconSize?: number;\n}> {}\n"],"mappings":""}

package/build/commonjs/IconButton/index.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _IconButton.default;
+    return _LegacyIconButton.default;
   }
 });
 
-var _IconButton = _interopRequireDefault(require("./IconButton"));
+var _LegacyIconButton = _interopRequireDefault(require("./LegacyIconButton"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './IconButton';\nexport type { default as IconButtonProps } from './IconButtonProps';"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacyIconButton';\nexport type { default as IconButtonProps } from './LegacyIconButtonProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/build/commonjs/Pagination/LegacyPagination.js

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Pagination;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _utils = require("@fountain-ui/utils");
+
+var _icons = require("../internal/icons");
+
+var _styles = require("../styles");
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+var _LegacyPaginationItem = _interopRequireDefault(require("../PaginationItem/LegacyPaginationItem"));
+
+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)();
+  return {
+    root: {},
+    rootInline: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    rootAnchor: {
+      flexDirection: 'column'
+    },
+    items: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      marginTop: theme.spacing(2)
+    },
+    arrowContainer: {
+      flexDirection: 'column',
+      justifyContent: 'center'
+    },
+    prevInline: {
+      marginRight: theme.spacing(1)
+    },
+    prevAnchor: {
+      position: 'absolute',
+      left: -24
+    },
+    nextInline: {
+      marginLeft: theme.spacing(1)
+    },
+    nextAnchor: {
+      position: 'absolute',
+      right: -24
+    }
+  };
+};
+
+function Pagination(props) {
+  const {
+    bundleSize = 1,
+    children,
+    count,
+    disabled = false,
+    hideIndicator = false,
+    hideNextButton = false,
+    hidePrevButton = false,
+    infinite = false,
+    onChange,
+    page,
+    renderItem = _ref => {
+      let {
+        index,
+        ...rest
+      } = _ref;
+      return /*#__PURE__*/_react.default.createElement(_LegacyPaginationItem.default, _extends({
+        key: `${index}`
+      }, rest));
+    },
+    style,
+    ...otherProps
+  } = props;
+  const styles = useStyles();
+  const firstPage = 0;
+  const lastPage = count - 1;
+
+  const handleChange = nextPage => {
+    if (nextPage >= firstPage && nextPage <= lastPage) {
+      if (onChange) {
+        onChange(nextPage);
+      }
+    }
+  };
+
+  const handlePrevPress = () => {
+    const prevPage = page - bundleSize >= firstPage ? page - bundleSize : infinite ? count - bundleSize + page : firstPage;
+    handleChange(prevPage);
+  };
+
+  const handleNextPress = () => {
+    const nextPage = page + bundleSize <= lastPage ? page + bundleSize : infinite ? page + bundleSize - count : lastPage;
+    handleChange(nextPage);
+  };
+
+  const prevButton = !hidePrevButton ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    color: 'tertiary',
+    disabled: disabled || !infinite && page <= firstPage,
+    onPress: handlePrevPress,
+    size: 'small',
+    style: children ? styles.prevAnchor : styles.prevInline
+  }, /*#__PURE__*/_react.default.createElement(_icons.ChevronLeft, null)) : null;
+  const nextButton = !hideNextButton ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    color: 'tertiary',
+    disabled: disabled || !infinite && page + bundleSize > lastPage,
+    onPress: handleNextPress,
+    size: 'small',
+    style: children ? styles.nextAnchor : styles.nextInline
+  }, /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, null)) : null;
+  const items = !hideIndicator ? (0, _utils.times)(i => renderItem({
+    index: i,
+    disabled,
+    selected: i === page
+  }), count) : null;
+  const containerProps = {
+    style: (0, _styles.css)([styles.root, children ? styles.rootAnchor : styles.rootInline, style]),
+    ...otherProps
+  };
+
+  if (children) {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, containerProps, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: (0, _styles.css)(styles.arrowContainer)
+    }, children, prevButton, nextButton), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: (0, _styles.css)(styles.items)
+    }, items));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, containerProps, prevButton, items, nextButton);
+}
+
+;
+//# sourceMappingURL=LegacyPagination.js.map

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

@@ -0,0 +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","otherProps","styles","firstPage","lastPage","handleChange","nextPage","handlePrevPress","prevPage","handleNextPress","prevButton","nextButton","times","i","selected","containerProps","css"],"sources":["LegacyPagination.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/LegacyPaginationItem';\nimport type PaginationProps from './LegacyPaginationProps';\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        ...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            color={'tertiary'}\n            disabled={disabled || (!infinite && page <= firstPage)}\n            onPress={handlePrevPress}\n            size={'small'}\n            style={children ? styles.prevAnchor : styles.prevInline}\n        >\n            <ChevronLeft/>\n        </IconButton>\n    ) : null;\n\n    const nextButton = !hideNextButton ? (\n        <IconButton\n            color={'tertiary'}\n            disabled={disabled || (!infinite && page + bundleSize > lastPage)}\n            onPress={handleNextPress}\n            size={'small'}\n            style={children ? styles.nextAnchor : styles.nextInline}\n        >\n            <ChevronRight/>\n        </IconButton>\n    ) : null;\n\n    const items = !hideIndicator ? (\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":"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"}

package/build/commonjs/Pagination/LegacyPaginationProps.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=LegacyPaginationProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["LegacyPaginationProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\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"],"mappings":""}

package/build/commonjs/Pagination/NumberPagination.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NumberPagination;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _styles = require("@fountain-ui/styles");
+
+var _Divider = _interopRequireDefault(require("../Divider"));
+
+var _Row = _interopRequireDefault(require("../Row"));
+
+var _styles2 = require("../styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const useStyles = function () {
+  const theme = (0, _styles2.useTheme)();
+  return {
+    root: {
+      backgroundColor: _styles.commonColors.static.weakOpacity,
+      borderRadius: theme.shape.radius.full,
+      paddingHorizontal: theme.spacing(1.25),
+      paddingVertical: theme.spacing(0.5)
+    },
+    divider: {
+      alignSelf: 'center',
+      borderColor: _styles.commonColors.static.weakOpacityInverse,
+      height: 6
+    }
+  };
+};
+
+function NumberPagination(props) {
+  const {
+    currentPage,
+    maxPage
+  } = props;
+  const styles = useStyles();
+  const theme = (0, _styles2.useTheme)();
+  const typography = (0, _styles.typographyOf)({
+    fontSize: 9.5,
+    lineHeight: 11.4,
+    fontFamily: 'Pretendard-SemiBold',
+    letterSpacing: -0.19
+  });
+  const currentFontStyle = (0, _styles2.createFontStyle)(theme, {
+    selector: _ => typography,
+    color: _styles.commonColors.static.strongInverse
+  });
+  const countFontStyle = (0, _styles2.createFontStyle)(theme, {
+    selector: _ => typography,
+    color: _styles.commonColors.static.baseOpacityInverse
+  });
+  return /*#__PURE__*/_react.default.createElement(_Row.default, {
+    style: styles.root
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: currentFontStyle
+  }, currentPage + 1), /*#__PURE__*/_react.default.createElement(_Divider.default, {
+    style: styles.divider,
+    vertical: true
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: countFontStyle
+  }, maxPage));
+}
+//# sourceMappingURL=NumberPagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useStyles","theme","useTheme","root","backgroundColor","commonColors","static","weakOpacity","borderRadius","shape","radius","full","paddingHorizontal","spacing","paddingVertical","divider","alignSelf","borderColor","weakOpacityInverse","height","NumberPagination","props","currentPage","maxPage","styles","typography","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","currentFontStyle","createFontStyle","selector","_","color","strongInverse","countFontStyle","baseOpacityInverse"],"sources":["NumberPagination.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { commonColors, typographyOf } from '@fountain-ui/styles';\nimport Divider from '../Divider';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type PaginationProps from './PaginationProps';\n\ntype NumberPaginationStyles = NamedStylesStringUnion<'root' | 'divider'>;\n\nconst useStyles: UseStyles<NumberPaginationStyles> = function (): NumberPaginationStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: commonColors.static.weakOpacity,\n            borderRadius: theme.shape.radius.full,\n            paddingHorizontal: theme.spacing(1.25),\n            paddingVertical: theme.spacing(0.5),\n        },\n        divider: {\n            alignSelf: 'center',\n            borderColor: commonColors.static.weakOpacityInverse,\n            height: 6,\n        },\n    };\n};\n\ninterface NumberPaginationProps {\n    currentPage: PaginationProps['page'];\n    maxPage: PaginationProps['count'];\n}\n\nexport default function NumberPagination(props: NumberPaginationProps) {\n    const {\n        currentPage,\n        maxPage,\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const typography = typographyOf({\n        fontSize: 9.5,\n        lineHeight: 11.4,\n        fontFamily: 'Pretendard-SemiBold',\n        letterSpacing: -0.19,\n    });\n\n    const currentFontStyle = createFontStyle(theme, {\n        selector: (_) => typography,\n        color: commonColors.static.strongInverse,\n    });\n\n    const countFontStyle = createFontStyle(theme, {\n        selector: (_) => typography,\n        color: commonColors.static.baseOpacityInverse,\n    });\n\n    return (\n        <Row style={styles.root}>\n            <Text style={currentFontStyle}>\n                {currentPage + 1}\n            </Text>\n\n            <Divider\n                style={styles.divider}\n                vertical={true}\n            />\n\n            <Text style={countFontStyle}>\n                {maxPage}\n            </Text>\n        </Row>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAKA,MAAMA,SAA4C,GAAG,YAAoC;EACrF,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,eAAe,EAAEC,oBAAA,CAAaC,MAAb,CAAoBC,WADnC;MAEFC,YAAY,EAAEP,KAAK,CAACQ,KAAN,CAAYC,MAAZ,CAAmBC,IAF/B;MAGFC,iBAAiB,EAAEX,KAAK,CAACY,OAAN,CAAc,IAAd,CAHjB;MAIFC,eAAe,EAAEb,KAAK,CAACY,OAAN,CAAc,GAAd;IAJf,CADH;IAOHE,OAAO,EAAE;MACLC,SAAS,EAAE,QADN;MAELC,WAAW,EAAEZ,oBAAA,CAAaC,MAAb,CAAoBY,kBAF5B;MAGLC,MAAM,EAAE;IAHH;EAPN,CAAP;AAaH,CAhBD;;AAuBe,SAASC,gBAAT,CAA0BC,KAA1B,EAAwD;EACnE,MAAM;IACFC,WADE;IAEFC;EAFE,IAGFF,KAHJ;EAKA,MAAMG,MAAM,GAAGxB,SAAS,EAAxB;EAEA,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,MAAMuB,UAAU,GAAG,IAAAC,oBAAA,EAAa;IAC5BC,QAAQ,EAAE,GADkB;IAE5BC,UAAU,EAAE,IAFgB;IAG5BC,UAAU,EAAE,qBAHgB;IAI5BC,aAAa,EAAE,CAAC;EAJY,CAAb,CAAnB;EAOA,MAAMC,gBAAgB,GAAG,IAAAC,wBAAA,EAAgB/B,KAAhB,EAAuB;IAC5CgC,QAAQ,EAAGC,CAAD,IAAOT,UAD2B;IAE5CU,KAAK,EAAE9B,oBAAA,CAAaC,MAAb,CAAoB8B;EAFiB,CAAvB,CAAzB;EAKA,MAAMC,cAAc,GAAG,IAAAL,wBAAA,EAAgB/B,KAAhB,EAAuB;IAC1CgC,QAAQ,EAAGC,CAAD,IAAOT,UADyB;IAE1CU,KAAK,EAAE9B,oBAAA,CAAaC,MAAb,CAAoBgC;EAFe,CAAvB,CAAvB;EAKA,oBACI,6BAAC,YAAD;IAAK,KAAK,EAAEd,MAAM,CAACrB;EAAnB,gBACI,6BAAC,iBAAD;IAAM,KAAK,EAAE4B;EAAb,GACKT,WAAW,GAAG,CADnB,CADJ,eAKI,6BAAC,gBAAD;IACI,KAAK,EAAEE,MAAM,CAACT,OADlB;IAEI,QAAQ,EAAE;EAFd,EALJ,eAUI,6BAAC,iBAAD;IAAM,KAAK,EAAEsB;EAAb,GACKd,OADL,CAVJ,CADJ;AAgBH"}

package/build/commonjs/Pagination/Pagination.js

@@ -19,6 +19,8 @@ var _IconButton = _interopRequireDefault(require("../IconButton"));
 
 var _PaginationItem = _interopRequireDefault(require("../PaginationItem"));
 
+var _NumberPagination = _interopRequireDefault(require("./NumberPagination"));
+
 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); }
@@ -82,6 +84,7 @@ function Pagination(props) {
       }, rest));
     },
     style,
+    variant = 'dot',
     ...otherProps
   } = props;
   const styles = useStyles();
@@ -107,22 +110,23 @@ function Pagination(props) {
   };
 
   const prevButton = !hidePrevButton ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    children: /*#__PURE__*/_react.default.createElement(_icons.ChevronLeft, null),
     color: 'tertiary',
     disabled: disabled || !infinite && page <= firstPage,
     onPress: handlePrevPress,
     size: 'small',
     style: children ? styles.prevAnchor : styles.prevInline
-  }) : null;
+  }, /*#__PURE__*/_react.default.createElement(_icons.ChevronLeft, null)) : null;
   const nextButton = !hideNextButton ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    children: /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, null),
     color: 'tertiary',
     disabled: disabled || !infinite && page + bundleSize > lastPage,
     onPress: handleNextPress,
     size: 'small',
     style: children ? styles.nextAnchor : styles.nextInline
-  }) : null;
-  const items = !hideIndicator ? (0, _utils.times)(i => renderItem({
+  }, /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, null)) : null;
+  const items = !hideIndicator ? variant === 'number' ? /*#__PURE__*/_react.default.createElement(_NumberPagination.default, {
+    currentPage: page,
+    maxPage: count
+  }) : (0, _utils.times)(i => renderItem({
     index: i,
     disabled,
     selected: i === page