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

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/Tab/Tab.js

@@ -68,12 +68,20 @@ function Tab(props) {
   const tabElement = typeof children !== 'string' ? (0, _utils.cloneElementSafely)(children, {
     selected
   }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconElement ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Badge.default, {
-    invisible: !badgeVisible
+    horizontalOffset: -6,
+    invisible: !badgeVisible,
+    verticalOffset: -4.5
   }, iconElement), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
     size: 1.25
-  })) : null, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: (0, _styles.css)(labelStyle)
-  }, children));
+  }, children)) : /*#__PURE__*/_react.default.createElement(_Badge.default, {
+    horizontalOffset: -7,
+    invisible: !badgeVisible,
+    verticalOffset: 3
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: (0, _styles.css)(labelStyle)
+  }, children)));
   return /*#__PURE__*/_react.default.createElement(_TabBase.default, _extends({
     pressEffect: pressEffect,
     style: tabBaseStyle,

package/build/commonjs/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","variant","style","styleProp","onTabInnerLayout","otherProps","theme","useTheme","vertical","container","containerStyle","inner","innerStyle","label","labelStyle","useVariantStyleMap","tabBaseStyle","css","tabInnerStyle","pressEffect","iconColor","palette","strong","base","iconElement","cloneElementSafely","fill","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport Spacer from '../Spacer';\nimport TabBase from '../TabBase';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { TabVariant } from './TabProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n    },\n    filledInner: {\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator = false,\n        icon: defaultIcon,\n        selected = false,\n        selectedIcon,\n        variant = 'default' as TabVariant,\n        style: styleProp,\n        onTabInnerLayout,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const vertical = variant === 'bottom-navigation';\n\n    const {\n        container: containerStyle,\n        inner: innerStyle,\n        label: labelStyle,\n    } = useVariantStyleMap(variant, selected);\n\n    const tabBaseStyle = css([\n        styles.root,\n        containerStyle,\n        styleProp,\n    ]);\n\n    const tabInnerStyle = css([\n        styles.filledInner,\n        innerStyle,\n    ]);\n\n    const pressEffect = selected ? 'none' : 'opacity';\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconColor = selected ? theme.palette.icon.strong : theme.palette.icon.base;\n    const iconElement = cloneElementSafely(icon, { fill: iconColor });\n\n    const tabElement = typeof children !== 'string' ? (\n        cloneElementSafely(children, {\n            selected,\n        })\n    ) : (\n        <React.Fragment>\n            {iconElement ? (\n                <React.Fragment>\n                    <Badge invisible={!badgeVisible}>\n                        {iconElement}\n                    </Badge>\n\n                    <Spacer size={1.25}/>\n                </React.Fragment>\n            ) : null}\n\n            <Text style={css(labelStyle)}>\n                {children}\n            </Text>\n        </React.Fragment>\n    );\n\n    return (\n        <TabBase\n            pressEffect={pressEffect}\n            style={tabBaseStyle}\n            vertical={vertical}\n            {...otherProps}\n        >\n            <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n                {tabElement}\n            </View>\n        </TabBase>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;AAEA,MAAMA,MAAM,GAAGC,kBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB;MAAEC,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE,CADuB;EAK7BC,WAAW,EAAE;IACTC,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP;AALgB,CAAlB,CAAf;;AAWe,SAASC,GAAT,CAAaC,KAAb,EAA8B;EACzC,MAAM;IACFC,YAAY,GAAG,KADb;IAEFC,QAFE;IAGFC,eAAe,GAAG,KAHhB;IAIFC,IAAI,EAAEC,WAJJ;IAKFC,QAAQ,GAAG,KALT;IAMFC,YANE;IAOFC,OAAO,GAAG,SAPR;IAQFC,KAAK,EAAEC,SARL;IASFC,gBATE;IAUF,GAAGC;EAVD,IAWFZ,KAXJ;EAaA,MAAMa,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,QAAQ,GAAGP,OAAO,KAAK,mBAA7B;EAEA,MAAM;IACFQ,SAAS,EAAEC,cADT;IAEFC,KAAK,EAAEC,UAFL;IAGFC,KAAK,EAAEC;EAHL,IAIF,IAAAC,2BAAA,EAAmBd,OAAnB,EAA4BF,QAA5B,CAJJ;EAMA,MAAMiB,YAAY,GAAG,IAAAC,WAAA,EAAI,CACrBnC,MAAM,CAACG,IADc,EAErByB,cAFqB,EAGrBP,SAHqB,CAAJ,CAArB;EAMA,MAAMe,aAAa,GAAG,IAAAD,WAAA,EAAI,CACtBnC,MAAM,CAACO,WADe,EAEtBuB,UAFsB,CAAJ,CAAtB;EAKA,MAAMO,WAAW,GAAGpB,QAAQ,GAAG,MAAH,GAAY,SAAxC;EAEA,MAAMF,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;EACA,MAAMsB,SAAS,GAAGrB,QAAQ,GAAGO,KAAK,CAACe,OAAN,CAAcxB,IAAd,CAAmByB,MAAtB,GAA+BhB,KAAK,CAACe,OAAN,CAAcxB,IAAd,CAAmB0B,IAA5E;EACA,MAAMC,WAAW,GAAG,IAAAC,yBAAA,EAAmB5B,IAAnB,EAAyB;IAAE6B,IAAI,EAAEN;EAAR,CAAzB,CAApB;EAEA,MAAMO,UAAU,GAAG,OAAOhC,QAAP,KAAoB,QAApB,GACf,IAAA8B,yBAAA,EAAmB9B,QAAnB,EAA6B;IACzBI;EADyB,CAA7B,CADe,gBAKf,6BAAC,cAAD,CAAO,QAAP,QACKyB,WAAW,gBACR,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD;IAAO,SAAS,EAAE,CAAC9B;EAAnB,GACK8B,WADL,CADJ,eAKI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EALJ,CADQ,GAQR,IATR,eAWI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAP,WAAA,EAAIH,UAAJ;EAAb,GACKnB,QADL,CAXJ,CALJ;EAsBA,oBACI,6BAAC,gBAAD;IACI,WAAW,EAAEwB,WADjB;IAEI,KAAK,EAAEH,YAFX;IAGI,QAAQ,EAAER;EAHd,GAIQH,UAJR,gBAMI,6BAAC,iBAAD;IAAM,QAAQ,EAAED,gBAAhB;IAAkC,KAAK,EAAEc;EAAzC,GACKS,UADL,CANJ,CADJ;AAYH;;AAAA"}
+{"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","variant","style","styleProp","onTabInnerLayout","otherProps","theme","useTheme","vertical","container","containerStyle","inner","innerStyle","label","labelStyle","useVariantStyleMap","tabBaseStyle","css","tabInnerStyle","pressEffect","iconColor","palette","strong","base","iconElement","cloneElementSafely","fill","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport Spacer from '../Spacer';\nimport TabBase from '../TabBase';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { TabVariant } from './TabProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n    },\n    filledInner: {\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator = false,\n        icon: defaultIcon,\n        selected = false,\n        selectedIcon,\n        variant = 'default' as TabVariant,\n        style: styleProp,\n        onTabInnerLayout,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const vertical = variant === 'bottom-navigation';\n\n    const {\n        container: containerStyle,\n        inner: innerStyle,\n        label: labelStyle,\n    } = useVariantStyleMap(variant, selected);\n\n    const tabBaseStyle = css([\n        styles.root,\n        containerStyle,\n        styleProp,\n    ]);\n\n    const tabInnerStyle = css([\n        styles.filledInner,\n        innerStyle,\n    ]);\n\n    const pressEffect = selected ? 'none' : 'opacity';\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconColor = selected ? theme.palette.icon.strong : theme.palette.icon.base;\n    const iconElement = cloneElementSafely(icon, { fill: iconColor });\n\n    const tabElement = typeof children !== 'string' ? (\n        cloneElementSafely(children, {\n            selected,\n        })\n    ) : (\n        <React.Fragment>\n            {iconElement ? (\n                <React.Fragment>\n                    <Badge\n                        horizontalOffset={-6}\n                        invisible={!badgeVisible}\n                        verticalOffset={-4.5}\n                    >\n                        {iconElement}\n                    </Badge>\n\n                    <Spacer size={1.25}/>\n\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </React.Fragment>\n            ) : (\n                <Badge\n                    horizontalOffset={-7}\n                    invisible={!badgeVisible}\n                    verticalOffset={3}\n                >\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </Badge>\n            )}\n        </React.Fragment>\n    );\n\n    return (\n        <TabBase\n            pressEffect={pressEffect}\n            style={tabBaseStyle}\n            vertical={vertical}\n            {...otherProps}\n        >\n            <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n                {tabElement}\n            </View>\n        </TabBase>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;AAEA,MAAMA,MAAM,GAAGC,kBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB;MAAEC,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE,CADuB;EAK7BC,WAAW,EAAE;IACTC,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP;AALgB,CAAlB,CAAf;;AAWe,SAASC,GAAT,CAAaC,KAAb,EAA8B;EACzC,MAAM;IACFC,YAAY,GAAG,KADb;IAEFC,QAFE;IAGFC,eAAe,GAAG,KAHhB;IAIFC,IAAI,EAAEC,WAJJ;IAKFC,QAAQ,GAAG,KALT;IAMFC,YANE;IAOFC,OAAO,GAAG,SAPR;IAQFC,KAAK,EAAEC,SARL;IASFC,gBATE;IAUF,GAAGC;EAVD,IAWFZ,KAXJ;EAaA,MAAMa,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,QAAQ,GAAGP,OAAO,KAAK,mBAA7B;EAEA,MAAM;IACFQ,SAAS,EAAEC,cADT;IAEFC,KAAK,EAAEC,UAFL;IAGFC,KAAK,EAAEC;EAHL,IAIF,IAAAC,2BAAA,EAAmBd,OAAnB,EAA4BF,QAA5B,CAJJ;EAMA,MAAMiB,YAAY,GAAG,IAAAC,WAAA,EAAI,CACrBnC,MAAM,CAACG,IADc,EAErByB,cAFqB,EAGrBP,SAHqB,CAAJ,CAArB;EAMA,MAAMe,aAAa,GAAG,IAAAD,WAAA,EAAI,CACtBnC,MAAM,CAACO,WADe,EAEtBuB,UAFsB,CAAJ,CAAtB;EAKA,MAAMO,WAAW,GAAGpB,QAAQ,GAAG,MAAH,GAAY,SAAxC;EAEA,MAAMF,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;EACA,MAAMsB,SAAS,GAAGrB,QAAQ,GAAGO,KAAK,CAACe,OAAN,CAAcxB,IAAd,CAAmByB,MAAtB,GAA+BhB,KAAK,CAACe,OAAN,CAAcxB,IAAd,CAAmB0B,IAA5E;EACA,MAAMC,WAAW,GAAG,IAAAC,yBAAA,EAAmB5B,IAAnB,EAAyB;IAAE6B,IAAI,EAAEN;EAAR,CAAzB,CAApB;EAEA,MAAMO,UAAU,GAAG,OAAOhC,QAAP,KAAoB,QAApB,GACf,IAAA8B,yBAAA,EAAmB9B,QAAnB,EAA6B;IACzBI;EADyB,CAA7B,CADe,gBAKf,6BAAC,cAAD,CAAO,QAAP,QACKyB,WAAW,gBACR,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAAC9B,YAFhB;IAGI,cAAc,EAAE,CAAC;EAHrB,GAKK8B,WALL,CADJ,eASI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EATJ,eAWI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAP,WAAA,EAAIH,UAAJ;EAAb,GACKnB,QADL,CAXJ,CADQ,gBAiBR,6BAAC,cAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACD,YAFhB;IAGI,cAAc,EAAE;EAHpB,gBAKI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAuB,WAAA,EAAIH,UAAJ;EAAb,GACKnB,QADL,CALJ,CAlBR,CALJ;EAoCA,oBACI,6BAAC,gBAAD;IACI,WAAW,EAAEwB,WADjB;IAEI,KAAK,EAAEH,YAFX;IAGI,QAAQ,EAAER;EAHd,GAIQH,UAJR,gBAMI,6BAAC,iBAAD;IAAM,QAAQ,EAAED,gBAAhB;IAAkC,KAAK,EAAEc;EAAzC,GACKS,UADL,CANJ,CADJ;AAYH;;AAAA"}

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

package/build/commonjs/Toolbar/BackButton/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 IconButton from '../../IconButton';\nimport { ChevronLeft } from '../../internal';\nimport type BackButtonProps from './BackButtonProps';\nimport { css } from '@fountain-ui/styles';\n\nconst styles = StyleSheet.create({\n    root: {\n        height: 40,\n        left: 4,\n        paddingLeft: 5,\n        paddingRight: 11,\n        paddingVertical: 8,\n        position: 'absolute',\n        width: 40,\n    },\n});\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;;AACA;;AACA;;AAEA;;;;;;AAEA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,MAAM,EAAE,EADN;IAEFC,IAAI,EAAE,CAFJ;IAGFC,WAAW,EAAE,CAHX;IAIFC,YAAY,EAAE,EAJZ;IAKFC,eAAe,EAAE,CALf;IAMFC,QAAQ,EAAE,UANR;IAOFC,KAAK,EAAE;EAPL;AADuB,CAAlB,CAAf;;AAYe,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/Toolbar/BackButton/BackButtonProps.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["BackButtonProps.ts"],"sourcesContent":["import type { IconButtonProps } from '../../IconButton';\nimport type { OverridableComponentProps } from '../../types';\n\nexport default interface BackButtonProps extends OverridableComponentProps<Omit<IconButtonProps, 'children'>, {}> {}\n"],"mappings":""}

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _BackButton.default;
+  }
+});
+
+var _BackButton = _interopRequireDefault(require("./BackButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

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

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

package/build/commonjs/Toolbar/Toolbar.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Toolbar;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,6 +11,8 @@ var _Row = _interopRequireDefault(require("../Row"));
 
 var _styles = require("../styles");
 
+var _BackButton = _interopRequireDefault(require("./BackButton"));
+
 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); }
@@ -40,7 +42,7 @@ const sizeMap = {
   }
 };
 
-function Toolbar(props) {
+const Toolbar = props => {
   const {
     disableGutters = false,
     size = 'medium',
@@ -51,7 +53,9 @@ function Toolbar(props) {
   return /*#__PURE__*/_react.default.createElement(_Row.default, _extends({
     style: (0, _styles.css)([styles.root, !disableGutters ? styles.gutters : undefined, sizeMap[size], style])
   }, otherProps));
-}
+};
 
-;
+Toolbar.BackButton = _BackButton.default;
+var _default = Toolbar;
+exports.default = _default;
 //# sourceMappingURL=Toolbar.js.map

package/build/commonjs/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","flexWrap","gutters","paddingHorizontal","spacing","sizeMap","small","height","medium","large","Toolbar","props","disableGutters","size","style","otherProps","styles","css","undefined"],"sources":["Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Row from '../Row';\nimport { css, useTheme } from '../styles';\nimport type ToolbarProps from './ToolbarProps';\nimport type { ToolbarSize } from './ToolbarProps';\n\ntype ToolbarStyles = NamedStylesStringUnion<'root' | 'gutters'>;\n\nconst useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            flexWrap: 'nowrap',\n        },\n        gutters: {\n            paddingHorizontal: theme.spacing(4),\n        },\n    };\n};\n\nconst sizeMap: Record<ToolbarSize, FountainUiStyle> = {\n    small: { height: 48 },\n    medium: { height: 50 },\n    large: { height: 56 },\n};\n\nexport default function Toolbar(props: ToolbarProps) {\n    const {\n        disableGutters = false,\n        size = 'medium',\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <Row\n            style={css([\n                styles.root,\n                !disableGutters ? styles.gutters : undefined,\n                sizeMap[size],\n                style,\n            ])}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;;;;;AAMA,MAAMA,SAAmC,GAAG,YAA2B;EACnE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,QAAQ,EAAE;IAFR,CADH;IAKHC,OAAO,EAAE;MACLC,iBAAiB,EAAEN,KAAK,CAACO,OAAN,CAAc,CAAd;IADd;EALN,CAAP;AASH,CAZD;;AAcA,MAAMC,OAA6C,GAAG;EAClDC,KAAK,EAAE;IAAEC,MAAM,EAAE;EAAV,CAD2C;EAElDC,MAAM,EAAE;IAAED,MAAM,EAAE;EAAV,CAF0C;EAGlDE,KAAK,EAAE;IAAEF,MAAM,EAAE;EAAV;AAH2C,CAAtD;;AAMe,SAASG,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,cAAc,GAAG,KADf;IAEFC,IAAI,GAAG,QAFL;IAGFC,KAHE;IAIF,GAAGC;EAJD,IAKFJ,KALJ;EAOA,MAAMK,MAAM,GAAGpB,SAAS,EAAxB;EAEA,oBACI,6BAAC,YAAD;IACI,KAAK,EAAE,IAAAqB,WAAA,EAAI,CACPD,MAAM,CAACjB,IADA,EAEP,CAACa,cAAD,GAAkBI,MAAM,CAACd,OAAzB,GAAmCgB,SAF5B,EAGPb,OAAO,CAACQ,IAAD,CAHA,EAIPC,KAJO,CAAJ;EADX,GAOQC,UAPR,EADJ;AAWH;;AAAA"}
+{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","flexWrap","gutters","paddingHorizontal","spacing","sizeMap","small","height","medium","large","Toolbar","props","disableGutters","size","style","otherProps","styles","css","undefined","BackButton"],"sources":["Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Row from '../Row';\nimport { css, useTheme } from '../styles';\nimport BackButton from './BackButton';\nimport type ToolbarProps from './ToolbarProps';\nimport type { ToolbarSize } from './ToolbarProps';\n\ntype ToolbarStyles = NamedStylesStringUnion<'root' | 'gutters'>;\n\nconst useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            flexWrap: 'nowrap',\n        },\n        gutters: {\n            paddingHorizontal: theme.spacing(4),\n        },\n    };\n};\n\nconst sizeMap: Record<ToolbarSize, FountainUiStyle> = {\n    small: { height: 48 },\n    medium: { height: 50 },\n    large: { height: 56 },\n};\n\nconst Toolbar = (props: ToolbarProps) => {\n    const {\n        disableGutters = false,\n        size = 'medium',\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <Row\n            style={css([\n                styles.root,\n                !disableGutters ? styles.gutters : undefined,\n                sizeMap[size],\n                style,\n            ])}\n            {...otherProps}\n        />\n    );\n};\n\nToolbar.BackButton = BackButton;\n\nexport default Toolbar;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;;;AAMA,MAAMA,SAAmC,GAAG,YAA2B;EACnE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,QAAQ,EAAE;IAFR,CADH;IAKHC,OAAO,EAAE;MACLC,iBAAiB,EAAEN,KAAK,CAACO,OAAN,CAAc,CAAd;IADd;EALN,CAAP;AASH,CAZD;;AAcA,MAAMC,OAA6C,GAAG;EAClDC,KAAK,EAAE;IAAEC,MAAM,EAAE;EAAV,CAD2C;EAElDC,MAAM,EAAE;IAAED,MAAM,EAAE;EAAV,CAF0C;EAGlDE,KAAK,EAAE;IAAEF,MAAM,EAAE;EAAV;AAH2C,CAAtD;;AAMA,MAAMG,OAAO,GAAIC,KAAD,IAAyB;EACrC,MAAM;IACFC,cAAc,GAAG,KADf;IAEFC,IAAI,GAAG,QAFL;IAGFC,KAHE;IAIF,GAAGC;EAJD,IAKFJ,KALJ;EAOA,MAAMK,MAAM,GAAGpB,SAAS,EAAxB;EAEA,oBACI,6BAAC,YAAD;IACI,KAAK,EAAE,IAAAqB,WAAA,EAAI,CACPD,MAAM,CAACjB,IADA,EAEP,CAACa,cAAD,GAAkBI,MAAM,CAACd,OAAzB,GAAmCgB,SAF5B,EAGPb,OAAO,CAACQ,IAAD,CAHA,EAIPC,KAJO,CAAJ;EADX,GAOQC,UAPR,EADJ;AAWH,CArBD;;AAuBAL,OAAO,CAACS,UAAR,GAAqBA,mBAArB;eAEeT,O"}

package/build/commonjs/internal/icons/ChevronLeft.js

@@ -14,8 +14,10 @@ var _utils = require("../../utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = (0, _utils.createSvgIcon)( /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
-  d: "M7.58594 12L14.293 18.7071C14.6836 19.0976 15.3167 19.0976 15.7073 18.7071C16.0978 18.3166 16.0978 17.6834 15.7073 17.2929L10.4144 12L15.7073 6.70711C16.0978 6.31658 16.0978 5.68342 15.7073 5.29289C15.3167 4.90237 14.6836 4.90237 14.293 5.29289L7.58594 12Z"
-}), 'ChevronLeft');
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M0 12C3.16267e-09 11.7348 0.105357 11.4804 0.292893 11.2929L6.29289 5.29289C6.68342 4.90237 7.31658 4.90237 7.70711 5.29289C8.09763 5.68342 8.09763 6.31658 7.70711 6.70711L2.41421 12L7.70711 17.2929C8.09763 17.6834 8.09763 18.3166 7.70711 18.7071C7.31658 19.0976 6.68342 19.0976 6.29289 18.7071L0.292893 12.7071C0.105357 12.5196 -3.16267e-09 12.2652 0 12Z"
+}), 'ChevronLeft', '0 0 8 24');
 
 exports.default = _default;
 //# sourceMappingURL=ChevronLeft.js.map

package/build/commonjs/internal/icons/ChevronLeft.js.map

@@ -1 +1 @@
-{"version":3,"names":["createSvgIcon"],"sources":["ChevronLeft.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n    <Path\n        d=\"M7.58594 12L14.293 18.7071C14.6836 19.0976 15.3167 19.0976 15.7073 18.7071C16.0978 18.3166 16.0978 17.6834 15.7073 17.2929L10.4144 12L15.7073 6.70711C16.0978 6.31658 16.0978 5.68342 15.7073 5.29289C15.3167 4.90237 14.6836 4.90237 14.293 5.29289L7.58594 12Z\"\n    />,\n    'ChevronLeft',\n);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,IAAAA,oBAAA,gBACX,6BAAC,oBAAD;EACI,CAAC,EAAC;AADN,EADW,EAIX,aAJW,C"}
+{"version":3,"names":["createSvgIcon"],"sources":["ChevronLeft.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n    <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M0 12C3.16267e-09 11.7348 0.105357 11.4804 0.292893 11.2929L6.29289 5.29289C6.68342 4.90237 7.31658 4.90237 7.70711 5.29289C8.09763 5.68342 8.09763 6.31658 7.70711 6.70711L2.41421 12L7.70711 17.2929C8.09763 17.6834 8.09763 18.3166 7.70711 18.7071C7.31658 19.0976 6.68342 19.0976 6.29289 18.7071L0.292893 12.7071C0.105357 12.5196 -3.16267e-09 12.2652 0 12Z\"\n    />,\n    'ChevronLeft',\n    '0 0 8 24',\n);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,IAAAA,oBAAA,gBACX,6BAAC,oBAAD;EACI,QAAQ,EAAC,SADb;EAEI,QAAQ,EAAC,SAFb;EAGI,CAAC,EAAC;AAHN,EADW,EAMX,aANW,EAOX,UAPW,C"}

package/build/commonjs/internal/icons/ChevronRight.js

@@ -14,8 +14,10 @@ var _utils = require("../../utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = (0, _utils.createSvgIcon)( /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
-  d: "M16.4141 12L9.70696 18.7071C9.31643 19.0976 8.68327 19.0976 8.29274 18.7071C7.90222 18.3166 7.90222 17.6834 8.29274 17.2929L13.5856 12L8.29274 6.70711C7.90222 6.31658 7.90222 5.68342 8.29274 5.29289C8.68327 4.90237 9.31643 4.90237 9.70696 5.29289L16.4141 12Z"
-}), 'ChevronRight');
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M8 12C8 12.2652 7.89464 12.5196 7.70711 12.7071L1.70711 18.7071C1.31658 19.0976 0.683417 19.0976 0.292892 18.7071C-0.0976309 18.3166 -0.0976309 17.6834 0.292893 17.2929L5.58579 12L0.292894 6.70711C-0.0976304 6.31658 -0.0976304 5.68342 0.292895 5.29289C0.683418 4.90237 1.31658 4.90237 1.70711 5.29289L7.70711 11.2929C7.89464 11.4804 8 11.7348 8 12Z"
+}), 'ChevronRight', '0 0 8 24');
 
 exports.default = _default;
 //# sourceMappingURL=ChevronRight.js.map

package/build/commonjs/internal/icons/ChevronRight.js.map

@@ -1 +1 @@
-{"version":3,"names":["createSvgIcon"],"sources":["ChevronRight.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n    <Path\n        d=\"M16.4141 12L9.70696 18.7071C9.31643 19.0976 8.68327 19.0976 8.29274 18.7071C7.90222 18.3166 7.90222 17.6834 8.29274 17.2929L13.5856 12L8.29274 6.70711C7.90222 6.31658 7.90222 5.68342 8.29274 5.29289C8.68327 4.90237 9.31643 4.90237 9.70696 5.29289L16.4141 12Z\"\n    />,\n    'ChevronRight',\n);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,IAAAA,oBAAA,gBACX,6BAAC,oBAAD;EACI,CAAC,EAAC;AADN,EADW,EAIX,cAJW,C"}
+{"version":3,"names":["createSvgIcon"],"sources":["ChevronRight.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n    <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M8 12C8 12.2652 7.89464 12.5196 7.70711 12.7071L1.70711 18.7071C1.31658 19.0976 0.683417 19.0976 0.292892 18.7071C-0.0976309 18.3166 -0.0976309 17.6834 0.292893 17.2929L5.58579 12L0.292894 6.70711C-0.0976304 6.31658 -0.0976304 5.68342 0.292895 5.29289C0.683418 4.90237 1.31658 4.90237 1.70711 5.29289L7.70711 11.2929C7.89464 11.4804 8 11.7348 8 12Z\"\n    />,\n    'ChevronRight',\n    '0 0 8 24',\n);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,IAAAA,oBAAA,gBACX,6BAAC,oBAAD;EACI,QAAQ,EAAC,SADb;EAEI,QAAQ,EAAC,SAFb;EAGI,CAAC,EAAC;AAHN,EADW,EAMX,cANW,EAOX,UAPW,C"}

package/build/commonjs/internal/icons/Close.js

@@ -14,8 +14,10 @@ var _utils = require("../../utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = (0, _utils.createSvgIcon)( /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
-  d: "M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L12 10.5858L5.70711 4.29292C5.31658 3.9024 4.68342 3.9024 4.29289 4.29292C3.90237 4.68345 3.90237 5.31661 4.29289 5.70714L10.5858 12L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L12 13.4142L18.2929 19.7071C18.6834 20.0977 19.3166 20.0977 19.7071 19.7071C20.0976 19.3166 20.0976 18.6834 19.7071 18.2929L13.4142 12L19.7071 5.70711Z"
-}), 'Close');
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L7 10.5858L12.2929 5.29289C12.6834 4.90237 13.3166 4.90237 13.7071 5.29289C14.0976 5.68342 14.0976 6.31658 13.7071 6.70711L8.41421 12L13.7071 17.2929C14.0976 17.6834 14.0976 18.3166 13.7071 18.7071C13.3166 19.0976 12.6834 19.0976 12.2929 18.7071L7 13.4142L1.70711 18.7071C1.31658 19.0976 0.683417 19.0976 0.292893 18.7071C-0.0976311 18.3166 -0.0976311 17.6834 0.292893 17.2929L5.58579 12L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289Z"
+}), 'Close', '0 0 14 24');
 
 exports.default = _default;
 //# sourceMappingURL=Close.js.map

package/build/commonjs/internal/icons/Close.js.map

@@ -1 +1 @@
-{"version":3,"names":["createSvgIcon"],"sources":["Close.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n    <Path\n        d=\"M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L12 10.5858L5.70711 4.29292C5.31658 3.9024 4.68342 3.9024 4.29289 4.29292C3.90237 4.68345 3.90237 5.31661 4.29289 5.70714L10.5858 12L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L12 13.4142L18.2929 19.7071C18.6834 20.0977 19.3166 20.0977 19.7071 19.7071C20.0976 19.3166 20.0976 18.6834 19.7071 18.2929L13.4142 12L19.7071 5.70711Z\"\n    />,\n    'Close',\n);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,IAAAA,oBAAA,gBACX,6BAAC,oBAAD;EACI,CAAC,EAAC;AADN,EADW,EAIX,OAJW,C"}
+{"version":3,"names":["createSvgIcon"],"sources":["Close.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n    <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L7 10.5858L12.2929 5.29289C12.6834 4.90237 13.3166 4.90237 13.7071 5.29289C14.0976 5.68342 14.0976 6.31658 13.7071 6.70711L8.41421 12L13.7071 17.2929C14.0976 17.6834 14.0976 18.3166 13.7071 18.7071C13.3166 19.0976 12.6834 19.0976 12.2929 18.7071L7 13.4142L1.70711 18.7071C1.31658 19.0976 0.683417 19.0976 0.292893 18.7071C-0.0976311 18.3166 -0.0976311 17.6834 0.292893 17.2929L5.58579 12L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289Z\"\n    />,\n    'Close',\n    '0 0 14 24',\n);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,IAAAA,oBAAA,gBACX,6BAAC,oBAAD;EACI,QAAQ,EAAC,SADb;EAEI,QAAQ,EAAC,SAFb;EAGI,CAAC,EAAC;AAHN,EADW,EAMX,OANW,EAOX,WAPW,C"}

package/build/module/AppBar/AppBar.js

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React from 'react';
 import { View } from 'react-native';
+import { useBreakpointUp } from '../hooks';
 import { css, useTheme } from '../styles';
 
 const useStyles = function () {
@@ -23,6 +24,7 @@ const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(props, ref) {
     ...otherProps
   } = props;
   const theme = useTheme();
+  const isDesktop = useBreakpointUp('md', true, false);
   const styles = useStyles();
   const backgroundColorMap = {
     default: theme.palette.background.default,
@@ -30,7 +32,9 @@ const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(props, ref) {
   };
   const paperStyle = css([styles.root, {
     backgroundColor: backgroundColorMap[color]
-  }, style]);
+  }, isDesktop ? {
+    paddingHorizontal: 8
+  } : undefined, style]);
   return /*#__PURE__*/React.createElement(View, _extends({
     ref: ref,
     style: paperStyle

package/build/module/AppBar/AppBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","css","useTheme","useStyles","theme","root","flexDirection","flexShrink","width","zIndex","appBar","AppBar","forwardRef","props","ref","color","style","otherProps","styles","backgroundColorMap","default","palette","background","alt","paperStyle","backgroundColor"],"sources":["AppBar.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 AppBarProps from './AppBarProps';\nimport type { AppBarColor } from './AppBarProps';\n\ntype AppBarStyleKeys = 'root';\n\ntype AppBarStyles = NamedStylesStringUnion<AppBarStyleKeys>;\n\nconst useStyles: UseStyles<AppBarStyles> = function (): AppBarStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'column',\n            flexShrink: 0,\n            width: '100%',\n            zIndex: theme.zIndex.appBar,\n        },\n    };\n};\n\nconst AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {\n    const {\n        color = 'default',\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const backgroundColorMap: Record<AppBarColor, string> = {\n        default: theme.palette.background.default,\n        alt: theme.palette.background.alt,\n    };\n\n    const paperStyle = css([\n        styles.root,\n        { backgroundColor: backgroundColorMap[color] },\n        style,\n    ]);\n\n    return (\n        <View\n            ref={ref}\n            style={paperStyle}\n            {...otherProps}\n        />\n    );\n});\n\nexport default AppBar;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;AAQA,MAAMC,SAAkC,GAAG,YAA0B;EACjE,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,aAAa,EAAE,QADb;MAEFC,UAAU,EAAE,CAFV;MAGFC,KAAK,EAAE,MAHL;MAIFC,MAAM,EAAEL,KAAK,CAACK,MAAN,CAAaC;IAJnB;EADH,CAAP;AAQH,CAXD;;AAaA,MAAMC,MAAM,gBAAGZ,KAAK,CAACa,UAAN,CAAoC,SAASD,MAAT,CAAgBE,KAAhB,EAAuBC,GAAvB,EAA4B;EAC3E,MAAM;IACFC,KAAK,GAAG,SADN;IAEFC,KAFE;IAGF,GAAGC;EAHD,IAIFJ,KAJJ;EAMA,MAAMT,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAMgB,MAAM,GAAGf,SAAS,EAAxB;EAEA,MAAMgB,kBAA+C,GAAG;IACpDC,OAAO,EAAEhB,KAAK,CAACiB,OAAN,CAAcC,UAAd,CAAyBF,OADkB;IAEpDG,GAAG,EAAEnB,KAAK,CAACiB,OAAN,CAAcC,UAAd,CAAyBC;EAFsB,CAAxD;EAKA,MAAMC,UAAU,GAAGvB,GAAG,CAAC,CACnBiB,MAAM,CAACb,IADY,EAEnB;IAAEoB,eAAe,EAAEN,kBAAkB,CAACJ,KAAD;EAArC,CAFmB,EAGnBC,KAHmB,CAAD,CAAtB;EAMA,oBACI,oBAAC,IAAD;IACI,GAAG,EAAEF,GADT;IAEI,KAAK,EAAEU;EAFX,GAGQP,UAHR,EADJ;AAOH,CA7Bc,CAAf;AA+BA,eAAeN,MAAf"}
+{"version":3,"names":["React","View","useBreakpointUp","css","useTheme","useStyles","theme","root","flexDirection","flexShrink","width","zIndex","appBar","AppBar","forwardRef","props","ref","color","style","otherProps","isDesktop","styles","backgroundColorMap","default","palette","background","alt","paperStyle","backgroundColor","paddingHorizontal","undefined"],"sources":["AppBar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { css, useTheme } from '../styles';\nimport type AppBarProps from './AppBarProps';\nimport type { AppBarColor } from './AppBarProps';\n\ntype AppBarStyleKeys = 'root';\n\ntype AppBarStyles = NamedStylesStringUnion<AppBarStyleKeys>;\n\nconst useStyles: UseStyles<AppBarStyles> = function (): AppBarStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'column',\n            flexShrink: 0,\n            width: '100%',\n            zIndex: theme.zIndex.appBar,\n        },\n    };\n};\n\nconst AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {\n    const {\n        color = 'default',\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const isDesktop = useBreakpointUp('md', true, false);\n\n    const styles = useStyles();\n\n    const backgroundColorMap: Record<AppBarColor, string> = {\n        default: theme.palette.background.default,\n        alt: theme.palette.background.alt,\n    };\n\n    const paperStyle = css([\n        styles.root,\n        { backgroundColor: backgroundColorMap[color] },\n        isDesktop ? { paddingHorizontal: 8 } : undefined,\n        style,\n    ]);\n\n    return (\n        <View\n            ref={ref}\n            style={paperStyle}\n            {...otherProps}\n        />\n    );\n});\n\nexport default AppBar;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,eAAT,QAAgC,UAAhC;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;AAQA,MAAMC,SAAkC,GAAG,YAA0B;EACjE,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,aAAa,EAAE,QADb;MAEFC,UAAU,EAAE,CAFV;MAGFC,KAAK,EAAE,MAHL;MAIFC,MAAM,EAAEL,KAAK,CAACK,MAAN,CAAaC;IAJnB;EADH,CAAP;AAQH,CAXD;;AAaA,MAAMC,MAAM,gBAAGb,KAAK,CAACc,UAAN,CAAoC,SAASD,MAAT,CAAgBE,KAAhB,EAAuBC,GAAvB,EAA4B;EAC3E,MAAM;IACFC,KAAK,GAAG,SADN;IAEFC,KAFE;IAGF,GAAGC;EAHD,IAIFJ,KAJJ;EAMA,MAAMT,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAMgB,SAAS,GAAGlB,eAAe,CAAC,IAAD,EAAO,IAAP,EAAa,KAAb,CAAjC;EAEA,MAAMmB,MAAM,GAAGhB,SAAS,EAAxB;EAEA,MAAMiB,kBAA+C,GAAG;IACpDC,OAAO,EAAEjB,KAAK,CAACkB,OAAN,CAAcC,UAAd,CAAyBF,OADkB;IAEpDG,GAAG,EAAEpB,KAAK,CAACkB,OAAN,CAAcC,UAAd,CAAyBC;EAFsB,CAAxD;EAKA,MAAMC,UAAU,GAAGxB,GAAG,CAAC,CACnBkB,MAAM,CAACd,IADY,EAEnB;IAAEqB,eAAe,EAAEN,kBAAkB,CAACL,KAAD;EAArC,CAFmB,EAGnBG,SAAS,GAAG;IAAES,iBAAiB,EAAE;EAArB,CAAH,GAA8BC,SAHpB,EAInBZ,KAJmB,CAAD,CAAtB;EAOA,oBACI,oBAAC,IAAD;IACI,GAAG,EAAEF,GADT;IAEI,KAAK,EAAEW;EAFX,GAGQR,UAHR,EADJ;AAOH,CAhCc,CAAf;AAkCA,eAAeN,MAAf"}

package/build/module/Badge/Badge.js

@@ -13,12 +13,13 @@ export default function Badge(props) {
     children,
     color = 'accent',
     content,
+    horizontalOffset = 0,
     invisible = false,
     position = defaultPosition,
     size = 'medium',
     style: styleProp,
-    offset = 0,
     variant = 'dot',
+    verticalOffset = 0,
     ...otherProps
   } = props;
   const {
@@ -27,8 +28,8 @@ export default function Badge(props) {
   } = useVariantStyleMap(variant, size, color);
   const rootStyle = css([styleProp]);
   const badgeStyle = css([baseBadgeStyle, {
-    [position.vertical]: offset,
-    [position.horizontal]: offset
+    [position.vertical]: verticalOffset,
+    [position.horizontal]: horizontalOffset
   }]);
   return /*#__PURE__*/React.createElement(View, _extends({
     style: rootStyle

package/build/module/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","css","useVariantStyleMap","defaultPosition","vertical","horizontal","Badge","props","children","color","content","invisible","position","size","style","styleProp","offset","variant","otherProps","badge","baseBadgeStyle","contentFont","contentFontStyle","rootStyle","badgeStyle","undefined"],"sources":["Badge.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { css } from '../styles';\nimport type BadgeProps from './BadgeProps';\nimport type { BadgeColor, BadgePosition, BadgeSize, BadgeVariant } from './BadgeProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst defaultPosition: BadgePosition = {\n    vertical: 'top',\n    horizontal: 'right',\n};\n\nexport default function Badge(props: BadgeProps) {\n    const {\n        children,\n        color = 'accent' as BadgeColor,\n        content,\n        invisible = false,\n        position = defaultPosition,\n        size = 'medium' as BadgeSize,\n        style: styleProp,\n        offset = 0,\n        variant = 'dot' as BadgeVariant,\n        ...otherProps\n    } = props;\n\n    const {\n        badge: baseBadgeStyle,\n        contentFont: contentFontStyle,\n    } = useVariantStyleMap(variant, size, color);\n\n    const rootStyle = css([\n        styleProp,\n    ]);\n\n    const badgeStyle = css([\n        baseBadgeStyle,\n        {\n            [position.vertical]: offset,\n            [position.horizontal]: offset,\n        },\n    ]);\n\n    return (\n        <View\n            style={rootStyle}\n            {...otherProps}\n        >\n            {children}\n\n            {!invisible ? (\n                <View style={badgeStyle}>\n                    {content !== undefined && content !== null ? (\n                        <Text style={contentFontStyle}>{content}</Text>\n                    ) : null}\n                </View>\n            ) : null}\n        </View>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AACA,SAASC,GAAT,QAAoB,WAApB;AAGA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,MAAMC,eAA8B,GAAG;EACnCC,QAAQ,EAAE,KADyB;EAEnCC,UAAU,EAAE;AAFuB,CAAvC;AAKA,eAAe,SAASC,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,QADE;IAEFC,KAAK,GAAG,QAFN;IAGFC,OAHE;IAIFC,SAAS,GAAG,KAJV;IAKFC,QAAQ,GAAGT,eALT;IAMFU,IAAI,GAAG,QANL;IAOFC,KAAK,EAAEC,SAPL;IAQFC,MAAM,GAAG,CARP;IASFC,OAAO,GAAG,KATR;IAUF,GAAGC;EAVD,IAWFX,KAXJ;EAaA,MAAM;IACFY,KAAK,EAAEC,cADL;IAEFC,WAAW,EAAEC;EAFX,IAGFpB,kBAAkB,CAACe,OAAD,EAAUJ,IAAV,EAAgBJ,KAAhB,CAHtB;EAKA,MAAMc,SAAS,GAAGtB,GAAG,CAAC,CAClBc,SADkB,CAAD,CAArB;EAIA,MAAMS,UAAU,GAAGvB,GAAG,CAAC,CACnBmB,cADmB,EAEnB;IACI,CAACR,QAAQ,CAACR,QAAV,GAAqBY,MADzB;IAEI,CAACJ,QAAQ,CAACP,UAAV,GAAuBW;EAF3B,CAFmB,CAAD,CAAtB;EAQA,oBACI,oBAAC,IAAD;IACI,KAAK,EAAEO;EADX,GAEQL,UAFR,GAIKV,QAJL,EAMK,CAACG,SAAD,gBACG,oBAAC,IAAD;IAAM,KAAK,EAAEa;EAAb,GACKd,OAAO,KAAKe,SAAZ,IAAyBf,OAAO,KAAK,IAArC,gBACG,oBAAC,IAAD;IAAM,KAAK,EAAEY;EAAb,GAAgCZ,OAAhC,CADH,GAEG,IAHR,CADH,GAMG,IAZR,CADJ;AAgBH;AAAA"}
+{"version":3,"names":["React","Text","View","css","useVariantStyleMap","defaultPosition","vertical","horizontal","Badge","props","children","color","content","horizontalOffset","invisible","position","size","style","styleProp","variant","verticalOffset","otherProps","badge","baseBadgeStyle","contentFont","contentFontStyle","rootStyle","badgeStyle","undefined"],"sources":["Badge.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { css } from '../styles';\nimport type BadgeProps from './BadgeProps';\nimport type { BadgeColor, BadgePosition, BadgeSize, BadgeVariant } from './BadgeProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst defaultPosition: BadgePosition = {\n    vertical: 'top',\n    horizontal: 'right',\n};\n\nexport default function Badge(props: BadgeProps) {\n    const {\n        children,\n        color = 'accent' as BadgeColor,\n        content,\n        horizontalOffset = 0,\n        invisible = false,\n        position = defaultPosition,\n        size = 'medium' as BadgeSize,\n        style: styleProp,\n        variant = 'dot' as BadgeVariant,\n        verticalOffset = 0,\n        ...otherProps\n    } = props;\n\n    const {\n        badge: baseBadgeStyle,\n        contentFont: contentFontStyle,\n    } = useVariantStyleMap(variant, size, color);\n\n    const rootStyle = css([\n        styleProp,\n    ]);\n\n    const badgeStyle = css([\n        baseBadgeStyle,\n        {\n            [position.vertical]: verticalOffset,\n            [position.horizontal]: horizontalOffset,\n        },\n    ]);\n\n    return (\n        <View\n            style={rootStyle}\n            {...otherProps}\n        >\n            {children}\n\n            {!invisible ? (\n                <View style={badgeStyle}>\n                    {content !== undefined && content !== null ? (\n                        <Text style={contentFontStyle}>{content}</Text>\n                    ) : null}\n                </View>\n            ) : null}\n        </View>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AACA,SAASC,GAAT,QAAoB,WAApB;AAGA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,MAAMC,eAA8B,GAAG;EACnCC,QAAQ,EAAE,KADyB;EAEnCC,UAAU,EAAE;AAFuB,CAAvC;AAKA,eAAe,SAASC,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,QADE;IAEFC,KAAK,GAAG,QAFN;IAGFC,OAHE;IAIFC,gBAAgB,GAAG,CAJjB;IAKFC,SAAS,GAAG,KALV;IAMFC,QAAQ,GAAGV,eANT;IAOFW,IAAI,GAAG,QAPL;IAQFC,KAAK,EAAEC,SARL;IASFC,OAAO,GAAG,KATR;IAUFC,cAAc,GAAG,CAVf;IAWF,GAAGC;EAXD,IAYFZ,KAZJ;EAcA,MAAM;IACFa,KAAK,EAAEC,cADL;IAEFC,WAAW,EAAEC;EAFX,IAGFrB,kBAAkB,CAACe,OAAD,EAAUH,IAAV,EAAgBL,KAAhB,CAHtB;EAKA,MAAMe,SAAS,GAAGvB,GAAG,CAAC,CAClBe,SADkB,CAAD,CAArB;EAIA,MAAMS,UAAU,GAAGxB,GAAG,CAAC,CACnBoB,cADmB,EAEnB;IACI,CAACR,QAAQ,CAACT,QAAV,GAAqBc,cADzB;IAEI,CAACL,QAAQ,CAACR,UAAV,GAAuBM;EAF3B,CAFmB,CAAD,CAAtB;EAQA,oBACI,oBAAC,IAAD;IACI,KAAK,EAAEa;EADX,GAEQL,UAFR,GAIKX,QAJL,EAMK,CAACI,SAAD,gBACG,oBAAC,IAAD;IAAM,KAAK,EAAEa;EAAb,GACKf,OAAO,KAAKgB,SAAZ,IAAyBhB,OAAO,KAAK,IAArC,gBACG,oBAAC,IAAD;IAAM,KAAK,EAAEa;EAAb,GAAgCb,OAAhC,CADH,GAEG,IAHR,CADH,GAMG,IAZR,CADJ;AAgBH;AAAA"}

package/build/module/Badge/BadgeProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["badgeHorizontalPositions","badgeVerticalPositions","badgeColors","badgeSizes","badgeVariants"],"sources":["BadgeProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport const badgeHorizontalPositions = ['right', 'left'] as const;\nexport type BadgeHorizontalPosition = typeof badgeHorizontalPositions[number];\n\nexport const badgeVerticalPositions = ['top', 'bottom'] as const;\nexport type BadgeVerticalPosition = typeof badgeVerticalPositions[number];\n\nexport interface BadgePosition {\n    vertical: BadgeVerticalPosition;\n    horizontal: BadgeHorizontalPosition;\n}\n\nexport const badgeColors = ['accent', 'danger'] as const;\nexport type BadgeColor = typeof badgeColors[number];\n\nexport const badgeSizes = ['large', 'medium'] as const;\nexport type BadgeSize = typeof badgeSizes[number];\n\nexport const badgeVariants = ['dot', 'number'] as const;\nexport type BadgeVariant = typeof badgeVariants[number];\n\nexport default interface BadgeProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The badge will be added relative to this node.\n     */\n    children?: React.ReactNode;\n\n    /**\n     *\n     * @default 'accent'\n     */\n    color?: BadgeColor;\n\n    /**\n     * (only number variant)\n     */\n    content?: number;\n\n    /**\n     * If `true`, the badge is invisible.\n     * @default false\n     */\n    invisible?: boolean;\n\n    /**\n     * The position of the badge.\n     * @default {\n     *     vertical: 'top',\n     *     horizontal: 'right',\n     * }\n     */\n    position?: BadgePosition;\n\n    /**\n     * The offset of the badge.\n     * @default 0\n     */\n    offset?: number;\n\n    /**\n     *\n     */\n    size?: BadgeSize;\n\n    /**\n     *\n     * @default 'dot'\n     */\n    variant?: BadgeVariant;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,wBAAwB,GAAG,CAAC,OAAD,EAAU,MAAV,CAAjC;AAGP,OAAO,MAAMC,sBAAsB,GAAG,CAAC,KAAD,EAAQ,QAAR,CAA/B;AAQP,OAAO,MAAMC,WAAW,GAAG,CAAC,QAAD,EAAW,QAAX,CAApB;AAGP,OAAO,MAAMC,UAAU,GAAG,CAAC,OAAD,EAAU,QAAV,CAAnB;AAGP,OAAO,MAAMC,aAAa,GAAG,CAAC,KAAD,EAAQ,QAAR,CAAtB"}
+{"version":3,"names":["badgeHorizontalPositions","badgeVerticalPositions","badgeColors","badgeSizes","badgeVariants"],"sources":["BadgeProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport const badgeHorizontalPositions = ['right', 'left'] as const;\nexport type BadgeHorizontalPosition = typeof badgeHorizontalPositions[number];\n\nexport const badgeVerticalPositions = ['top', 'bottom'] as const;\nexport type BadgeVerticalPosition = typeof badgeVerticalPositions[number];\n\nexport interface BadgePosition {\n    vertical: BadgeVerticalPosition;\n    horizontal: BadgeHorizontalPosition;\n}\n\nexport const badgeColors = ['accent', 'danger'] as const;\nexport type BadgeColor = typeof badgeColors[number];\n\nexport const badgeSizes = ['large', 'medium'] as const;\nexport type BadgeSize = typeof badgeSizes[number];\n\nexport const badgeVariants = ['dot', 'number'] as const;\nexport type BadgeVariant = typeof badgeVariants[number];\n\nexport default interface BadgeProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The badge will be added relative to this node.\n     */\n    children?: React.ReactNode;\n\n    /**\n     *\n     * @default 'accent'\n     */\n    color?: BadgeColor;\n\n    /**\n     * (only number variant)\n     */\n    content?: number;\n\n    /**\n     * The horizontal offset of the badge.\n     * @default 0\n     */\n    horizontalOffset?: number;\n\n    /**\n     * If `true`, the badge is invisible.\n     * @default false\n     */\n    invisible?: boolean;\n\n    /**\n     * The position of the badge.\n     * @default {\n     *     vertical: 'top',\n     *     horizontal: 'right',\n     * }\n     */\n    position?: BadgePosition;\n\n    /**\n     *\n     */\n    size?: BadgeSize;\n\n    /**\n     *\n     * @default 'dot'\n     */\n    variant?: BadgeVariant;\n\n    /**\n     * The vertical offset of the badge.\n     * @default 0\n     */\n    verticalOffset?: number;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,wBAAwB,GAAG,CAAC,OAAD,EAAU,MAAV,CAAjC;AAGP,OAAO,MAAMC,sBAAsB,GAAG,CAAC,KAAD,EAAQ,QAAR,CAA/B;AAQP,OAAO,MAAMC,WAAW,GAAG,CAAC,QAAD,EAAW,QAAX,CAApB;AAGP,OAAO,MAAMC,UAAU,GAAG,CAAC,OAAD,EAAU,QAAV,CAAnB;AAGP,OAAO,MAAMC,aAAa,GAAG,CAAC,KAAD,EAAQ,QAAR,CAAtB"}

package/build/module/ButtonBase/index.js

@@ -1,2 +1,2 @@
-export { default } from './LegacyButtonBase';
+export { default } from './ButtonBase';
 //# sourceMappingURL=index.js.map

package/build/module/ButtonBase/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacyButtonBase';\nexport type { default as ButtonBaseProps } from './ButtonBaseProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,oBAAxB"}
+{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './ButtonBase';\nexport type { default as ButtonBaseProps } from './ButtonBaseProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB"}

package/build/module/Chip/Chip.js

@@ -2,16 +2,18 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React from 'react';
 import { Text, View } from 'react-native';
+import ButtonBase from '../ButtonBase';
+import { Close } from '../internal';
 import { css } from '../styles';
 import { cloneElementSafely } from '../utils';
-import ButtonBase from '../ButtonBase/ButtonBase';
 import useChipStyle from './useChipStyle';
 export default function Chip(props) {
   const {
     children,
-    endElement: endElementProp,
+    color = 'default',
     numberOfLines,
     onPress,
+    selected = false,
     size = 'small',
     startElement: startElementProp,
     startElementVariant = 'default',
@@ -20,26 +22,28 @@ export default function Chip(props) {
   } = props;
   const {
     container: containerStyle,
-    endElement: endElementStyle,
+    closeButton: closeButtonStyle,
     label: labelStyle,
-    startElement: startElementStyle
-  } = useChipStyle(size, startElementVariant, !!endElementProp);
+    startElement: startElementStyle,
+    startElementContainer: startElementContainerStyle
+  } = useChipStyle(size, startElementVariant, color, selected);
   const chipStyle = css([containerStyle, styleProp]);
-  const startElement = startElementVariant === 'icon' ? /*#__PURE__*/React.createElement(View, {
+  const startElement = /*#__PURE__*/React.createElement(View, {
+    style: startElementContainerStyle
+  }, cloneElementSafely(startElementProp, {
     style: startElementStyle
-  }, cloneElementSafely(startElementProp)) : cloneElementSafely(startElementProp, {
-    style: startElementStyle
-  });
-  const endElement = cloneElementSafely(endElementProp, {
-    style: endElementStyle
-  });
+  }));
   return /*#__PURE__*/React.createElement(ButtonBase, _extends({
+    disabled: !onPress,
     onPress: onPress,
     style: chipStyle
   }, otherProps), startElement, /*#__PURE__*/React.createElement(Text, {
     children: children,
     numberOfLines: numberOfLines,
     style: labelStyle
-  }), endElement);
+  }), selected ? /*#__PURE__*/React.createElement(Close, {
+    color: 'baseInverse',
+    style: closeButtonStyle
+  }) : null);
 }
 //# sourceMappingURL=Chip.js.map