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

package/build/commonjs/SnackbarContent/SnackbarContent.js

@@ -11,94 +11,104 @@ var _reactNative = require("react-native");
 
 var _styles = require("@fountain-ui/styles");
 
-var _utils = require("@fountain-ui/utils");
-
 var _styles2 = require("../styles");
 
-var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
+var _ButtonBase = _interopRequireDefault(require("../ButtonBase/ButtonBase"));
 
 var _Column = _interopRequireDefault(require("../Column"));
 
-var _Paper = _interopRequireDefault(require("../Paper"));
-
 var _Spacer = _interopRequireDefault(require("../Spacer"));
 
 var _Typography = _interopRequireDefault(require("../Typography"));
 
+var _StatusIcon = _interopRequireDefault(require("./StatusIcon"));
+
 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, _styles2.useTheme)();
-  const backgroundColor = theme.palette.primary.main;
-
-  const [r, g, b] = _react.default.useMemo(() => (0, _utils.rgb)(backgroundColor), [backgroundColor]);
-
   return {
     root: {
       flexDirection: 'row',
       alignItems: 'center',
-      backgroundColor: `rgba(${r}, ${g}, ${b}, .9)`,
-      borderRadius: theme.shape.roundness,
+      backgroundColor: theme.palette.surface.accent,
+      borderRadius: 22,
+      paddingBottom: theme.spacing(2.25),
       paddingHorizontal: theme.spacing(4),
-      paddingVertical: theme.spacing(3)
-    },
-    action: {
-      paddingVertical: theme.spacing(2)
+      paddingTop: theme.spacing(2)
     }
   };
 };
 
 function SnackbarContent(props) {
   const {
-    actionLabel,
+    actionContent,
     message,
     title,
-    onActionPress,
-    style,
+    onPress,
+    style: styleProp,
+    status = 'info',
     startIcon,
     ...otherProps
   } = props;
   const styles = useStyles();
   const theme = (0, _styles2.useTheme)();
   const titleFontStyle = (0, _styles2.createFontStyle)(theme, {
-    selector: typo => typo.subtitle2,
-    color: theme.mode === 'light' ? _styles.lightTheme.palette.primary.contrastTextColor : _styles.lightTheme.palette.primary.main
+    selector: _ => (0, _styles.typographyOf)({
+      fontSize: 14,
+      lineHeight: 18.2,
+      fontFamily: 'Pretendard-SemiBold',
+      letterSpacing: 0
+    }),
+    color: theme.palette.text.strongInverse
   });
   const messageFontStyle = (0, _styles2.createFontStyle)(theme, {
-    selector: typo => typo.body2,
-    color: title ? theme.mode === 'light' ? _styles.darkTheme.palette.text.secondary : _styles.lightTheme.palette.text.secondary : theme.palette.primary.contrastTextColor
+    selector: _ => (0, _styles.typographyOf)({
+      fontSize: 13,
+      lineHeight: 16.9,
+      fontFamily: 'Pretendard-Regular',
+      letterSpacing: 0
+    }),
+    color: theme.palette.text.strongInverse
   });
   const labelFontStyle = (0, _styles2.createFontStyle)(theme, {
-    selector: typo => typo.button2,
-    color: theme.palette.primary.contrastTextColor
+    selector: _ => (0, _styles.typographyOf)({
+      fontSize: 13,
+      lineHeight: 16.25,
+      fontFamily: 'LexendDeca-SemiBold',
+      letterSpacing: -0.26
+    }),
+    color: theme.palette.text.accent
   });
-  const labelStyle = (0, _styles2.css)([labelFontStyle, {
-    padding: theme.spacing(2)
-  }]);
-  return /*#__PURE__*/_react.default.createElement(_Paper.default, _extends({
-    elevation: 0,
-    style: (0, _styles2.css)([styles.root, actionLabel ? styles.action : undefined, style])
+  const rootStyle = (0, _styles2.css)([styles.root, startIcon ? {
+    borderRadius: theme.shape.radius.xl
+  } : undefined, styleProp]);
+  return /*#__PURE__*/_react.default.createElement(_ButtonBase.default, _extends({
+    disabled: !onPress,
+    onPress: onPress,
+    style: rootStyle
   }, otherProps), startIcon ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, startIcon, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
     size: 3
+  })) : status !== 'info' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StatusIcon.default, {
+    status: status
+  }), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
+    size: 1.5
   })) : null, /*#__PURE__*/_react.default.createElement(_Column.default, null, title ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
     children: title,
     style: (0, _styles2.css)([titleFontStyle])
   }) : null, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     children: message,
     style: (0, _styles2.css)([messageFontStyle])
-  })), actionLabel ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
+  })), actionContent ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
     flex: 1
   }), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
     size: 1
-  }), /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
-    onPress: onActionPress,
-    pressEffect: 'none'
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    children: actionLabel,
-    style: labelStyle
-  }))) : null);
+  }), typeof actionContent === 'string' ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    children: actionContent,
+    style: labelFontStyle
+  }) : actionContent) : null);
 }
 
 ;

package/build/commonjs/SnackbarContent/SnackbarContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","backgroundColor","palette","primary","main","r","g","b","React","useMemo","rgb","root","flexDirection","alignItems","borderRadius","shape","roundness","paddingHorizontal","spacing","paddingVertical","action","SnackbarContent","props","actionLabel","message","title","onActionPress","style","startIcon","otherProps","styles","titleFontStyle","createFontStyle","selector","typo","subtitle2","color","mode","lightTheme","contrastTextColor","messageFontStyle","body2","darkTheme","text","secondary","labelFontStyle","button2","labelStyle","css","padding","undefined"],"sources":["SnackbarContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { lightTheme, darkTheme } from '@fountain-ui/styles';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { rgb } from '@fountain-ui/utils';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Paper from '../Paper';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport type SnackbarContentProps from './SnackbarContentProps';\n\ntype SnackBarContentStyles = NamedStylesStringUnion<'root' | 'action'>;\n\nconst useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {\n    const theme = useTheme();\n\n    const backgroundColor = theme.palette.primary.main;\n    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n    return {\n        root: {\n            flexDirection: 'row',\n            alignItems: 'center',\n            backgroundColor: `rgba(${r}, ${g}, ${b}, .9)`,\n            borderRadius: theme.shape.roundness,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: theme.spacing(3),\n        },\n        action: {\n            paddingVertical: theme.spacing(2),\n        },\n    };\n};\n\nexport default function SnackbarContent(props: SnackbarContentProps) {\n    const {\n        actionLabel,\n        message,\n        title,\n        onActionPress,\n        style,\n        startIcon,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.subtitle2,\n        color: theme.mode === 'light'\n            ? lightTheme.palette.primary.contrastTextColor\n            : lightTheme.palette.primary.main,\n    });\n\n    const messageFontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.body2,\n        color: title\n            ? theme.mode === 'light'\n                ? darkTheme.palette.text.secondary\n                : lightTheme.palette.text.secondary\n            : theme.palette.primary.contrastTextColor,\n    });\n\n    const labelFontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.button2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const labelStyle = css([\n        labelFontStyle,\n        { padding: theme.spacing(2) },\n    ]);\n\n    return (\n        <Paper\n            elevation={0}\n            style={css([\n                styles.root,\n                actionLabel ? styles.action : undefined,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {startIcon ? (\n                <React.Fragment>\n                    {startIcon}\n\n                    <Spacer size={3}/>\n                </React.Fragment>\n            ) : null}\n\n            <Column>\n                {title ? (\n                    <Typography\n                        children={title}\n                        style={css([titleFontStyle])}\n                    />\n                ) : null}\n\n                <Text\n                    children={message}\n                    style={css([messageFontStyle])}\n                />\n            </Column>\n\n            {actionLabel ? (\n                <React.Fragment>\n                    <Spacer flex={1}/>\n\n                    <Spacer size={1}/>\n\n                    <ButtonBase\n                        onPress={onActionPress}\n                        pressEffect={'none'}\n                    >\n                        <Text\n                            children={actionLabel}\n                            style={labelStyle}\n                        />\n                    </ButtonBase>\n                </React.Fragment>\n            ) : null}\n        </Paper>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","flexDirection","alignItems","backgroundColor","palette","surface","accent","borderRadius","paddingBottom","spacing","paddingHorizontal","paddingTop","SnackbarContent","props","actionContent","message","title","onPress","style","styleProp","status","startIcon","otherProps","styles","titleFontStyle","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","messageFontStyle","labelFontStyle","rootStyle","css","shape","radius","xl","undefined"],"sources":["SnackbarContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { typographyOf } from '@fountain-ui/styles';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport Column from '../Column';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport type SnackbarContentProps from './SnackbarContentProps';\nimport StatusIcon from './StatusIcon';\n\ntype SnackBarContentStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            alignItems: 'center',\n            backgroundColor: theme.palette.surface.accent,\n            borderRadius: 22,\n            paddingBottom: theme.spacing(2.25),\n            paddingHorizontal: theme.spacing(4),\n            paddingTop: theme.spacing(2),\n        },\n    };\n};\n\nexport default function SnackbarContent(props: SnackbarContentProps) {\n    const {\n        actionContent,\n        message,\n        title,\n        onPress,\n        style: styleProp,\n        status = 'info',\n        startIcon,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (_) => typographyOf({\n            fontSize: 14,\n            lineHeight: 18.2,\n            fontFamily: 'Pretendard-SemiBold',\n            letterSpacing: 0,\n        }),\n        color: theme.palette.text.strongInverse,\n    });\n\n    const messageFontStyle = createFontStyle(theme, {\n        selector: (_) => typographyOf({\n            fontSize: 13,\n            lineHeight: 16.9,\n            fontFamily: 'Pretendard-Regular',\n            letterSpacing: 0,\n        }),\n        color: theme.palette.text.strongInverse,\n    });\n\n    const labelFontStyle = createFontStyle(theme, {\n        selector: (_) => typographyOf({\n            fontSize: 13,\n            lineHeight: 16.25,\n            fontFamily: 'LexendDeca-SemiBold',\n            letterSpacing: -0.26,\n        }),\n        color: theme.palette.text.accent,\n    });\n\n    const rootStyle = css([\n        styles.root,\n        startIcon ? { borderRadius: theme.shape.radius.xl } : undefined,\n        styleProp,\n    ]);\n\n    return (\n        <ButtonBase\n            disabled={!onPress}\n            onPress={onPress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {startIcon ? (\n                <React.Fragment>\n                    {startIcon}\n\n                    <Spacer size={3}/>\n                </React.Fragment>\n            ) : status !== 'info' ? (\n                <React.Fragment>\n                    <StatusIcon status={status}/>\n\n                    <Spacer size={1.5}/>\n                </React.Fragment>\n            ) : null}\n\n            <Column>\n                {title ? (\n                    <Typography\n                        children={title}\n                        style={css([titleFontStyle])}\n                    />\n                ) : null}\n\n                <Text\n                    children={message}\n                    style={css([messageFontStyle])}\n                />\n            </Column>\n\n            {actionContent ? (\n                <React.Fragment>\n                    <Spacer flex={1}/>\n\n                    <Spacer size={1}/>\n\n                    {typeof actionContent === 'string' ? (\n                        <Text\n                            children={actionContent}\n                            style={labelFontStyle}\n                        />\n                    ) : (actionContent)}\n                </React.Fragment>\n            ) : null}\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/SnackbarContent/SnackbarContentProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["SnackbarContentProps.ts"],"sourcesContent":["import React from 'react';\nimport type { OverridableComponentProps } from '../types';\nimport type { PaperProps } from '../Paper';\n\nexport default interface SnackbarContentProps extends OverridableComponentProps<PaperProps, {\n    /**\n     * The text to use for the action component.\n     */\n    actionLabel?: string;\n\n    /**\n     * The message to display.\n     */\n    message?: string;\n\n    /**\n     * Callback fired when the action component pressed.\n     */\n    onActionPress?: () => void;\n\n    /**\n     * Element placed before the title and message.\n     */\n    startIcon?: React.ReactElement;\n\n    /**\n     * The title to display.\n     */\n    title?: string;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["SnackbarContentProps.ts"],"sourcesContent":["import type { ButtonBaseProps } from '../ButtonBase';\nimport type SnackbarProps from '../Snackbar/SnackbarProps';\nimport type { OverridableComponentProps } from '../types';\n\ntype SnackbarContentBaseProps = Pick<SnackbarProps,\n    | 'actionContent'\n    | 'message'\n    | 'onPress'\n    | 'startIcon'\n    | 'status'\n    | 'title'>\n\nexport default interface SnackbarContentProps extends OverridableComponentProps<Omit<ButtonBaseProps, 'children'>, SnackbarContentBaseProps> {}\n"],"mappings":""}

package/build/commonjs/SnackbarContent/StatusIcon.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = StatusIcon;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icons = require("../internal/icons");
+
+var _styles = require("../styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function StatusIcon(props) {
+  const {
+    status
+  } = props;
+  const theme = (0, _styles.useTheme)();
+
+  switch (status) {
+    case 'success':
+      return /*#__PURE__*/_react.default.createElement(_icons.CheckCircle, {
+        color: 'accent',
+        enableV2: true,
+        height: 17,
+        width: 14
+      });
+
+    case 'fail':
+      return /*#__PURE__*/_react.default.createElement(_icons.InfoCircle, {
+        enableV2: true,
+        fill: theme.palette.status.danger,
+        height: 17,
+        width: 14
+      });
+
+    default:
+      return null;
+  }
+}
+//# sourceMappingURL=StatusIcon.js.map

package/build/commonjs/SnackbarContent/StatusIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StatusIcon","props","status","theme","useTheme","palette","danger"],"sources":["StatusIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { CheckCircle, InfoCircle } from '../internal/icons';\nimport { useTheme } from '../styles';\nimport type SnackbarContentProps from './SnackbarContentProps';\n\ninterface StatusIconProps {\n    status: SnackbarContentProps['status'];\n}\n\nexport default function StatusIcon(props: StatusIconProps) {\n    const { status } = props;\n\n    const theme = useTheme();\n\n    switch (status) {\n        case 'success':\n            return (\n                <CheckCircle\n                    color={'accent'}\n                    enableV2={true}\n                    height={17}\n                    width={14}\n                />\n            );\n        case 'fail':\n            return (\n                <InfoCircle\n                    enableV2={true}\n                    fill={theme.palette.status.danger}\n                    height={17}\n                    width={14}\n                />\n            );\n        default:\n            return null;\n    }\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAOe,SAASA,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IAAEC;EAAF,IAAaD,KAAnB;EAEA,MAAME,KAAK,GAAG,IAAAC,gBAAA,GAAd;;EAEA,QAAQF,MAAR;IACI,KAAK,SAAL;MACI,oBACI,6BAAC,kBAAD;QACI,KAAK,EAAE,QADX;QAEI,QAAQ,EAAE,IAFd;QAGI,MAAM,EAAE,EAHZ;QAII,KAAK,EAAE;MAJX,EADJ;;IAQJ,KAAK,MAAL;MACI,oBACI,6BAAC,iBAAD;QACI,QAAQ,EAAE,IADd;QAEI,IAAI,EAAEC,KAAK,CAACE,OAAN,CAAcH,MAAd,CAAqBI,MAF/B;QAGI,MAAM,EAAE,EAHZ;QAII,KAAK,EAAE;MAJX,EADJ;;IAQJ;MACI,OAAO,IAAP;EApBR;AAsBH"}

package/build/commonjs/SnackbarContent/index.js

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

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

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

package/build/commonjs/SvgIcon/LegacySvgIcon.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SvgIcon;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNativeSvg = _interopRequireDefault(require("react-native-svg"));
+
+var _styles = 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); }
+
+function SvgIcon(props) {
+  const {
+    color: colorProp = 'primary',
+    height = 24,
+    style: styleProp,
+    viewBox = '0 0 24 24',
+    width = 24,
+    ...otherProps
+  } = props;
+  const theme = (0, _styles.useTheme)();
+  const color = theme.palette[colorProp].main;
+  const style = (0, _styles.css)([{
+    flexShrink: 0
+  }, styleProp]);
+  return /*#__PURE__*/_react.default.createElement(_reactNativeSvg.default, _extends({
+    color: color,
+    fill: 'currentColor',
+    height: height,
+    style: style,
+    viewBox: viewBox,
+    width: width
+  }, otherProps));
+}
+
+;
+//# sourceMappingURL=LegacySvgIcon.js.map

package/build/commonjs/SvgIcon/LegacySvgIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SvgIcon","props","color","colorProp","height","style","styleProp","viewBox","width","otherProps","theme","useTheme","palette","main","css","flexShrink"],"sources":["LegacySvgIcon.tsx"],"sourcesContent":["import React from 'react';\nimport Svg from 'react-native-svg';\nimport { css, useTheme } from '../styles';\nimport type SvgIconProps from './LegacySvgIconProps';\n\nexport default function SvgIcon(props: SvgIconProps) {\n    const {\n        color: colorProp = 'primary',\n        height = 24,\n        style: styleProp,\n        viewBox = '0 0 24 24',\n        width = 24,\n        ...otherProps\n    }: SvgIconProps = props;\n\n    const theme = useTheme();\n\n    const color = theme.palette[colorProp].main;\n\n    const style = css([\n        { flexShrink: 0 },\n        styleProp,\n    ]);\n\n    return (\n        <Svg\n            color={color}\n            fill={'currentColor'}\n            height={height}\n            style={style}\n            viewBox={viewBox}\n            width={width}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAGe,SAASA,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,KAAK,EAAEC,SAAS,GAAG,SADjB;IAEFC,MAAM,GAAG,EAFP;IAGFC,KAAK,EAAEC,SAHL;IAIFC,OAAO,GAAG,WAJR;IAKFC,KAAK,GAAG,EALN;IAMF,GAAGC;EAND,IAOYR,KAPlB;EASA,MAAMS,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMT,KAAK,GAAGQ,KAAK,CAACE,OAAN,CAAcT,SAAd,EAAyBU,IAAvC;EAEA,MAAMR,KAAK,GAAG,IAAAS,WAAA,EAAI,CACd;IAAEC,UAAU,EAAE;EAAd,CADc,EAEdT,SAFc,CAAJ,CAAd;EAKA,oBACI,6BAAC,uBAAD;IACI,KAAK,EAAEJ,KADX;IAEI,IAAI,EAAE,cAFV;IAGI,MAAM,EAAEE,MAHZ;IAII,KAAK,EAAEC,KAJX;IAKI,OAAO,EAAEE,OALb;IAMI,KAAK,EAAEC;EANX,GAOQC,UAPR,EADJ;AAWH;;AAAA"}

package/build/commonjs/SvgIcon/LegacySvgIconProps.js

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

package/build/commonjs/SvgIcon/LegacySvgIconProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["LegacySvgIconProps.ts"],"sourcesContent":["import React from 'react';\nimport type { SvgProps } from 'react-native-svg';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type SvgIconColor = CommonComponentColor;\n\nexport default interface SvgIconProps extends OverridableComponentProps<SvgProps, {\n    /**\n     * Node passed into the SVG element.\n     */\n    children: React.ReactNode;\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?: SvgIconColor;\n\n    /**\n     * The color of the component. It is treated as higher priority than `color` prop if provided.\n     */\n    fill?: SvgProps['fill'];\n\n    /**\n     * The height applied to the icon.\n     * @default 24\n     */\n    height?: SvgProps['height'];\n\n    /**\n     * Allows you to redefine what the coordinates without units mean inside an SVG element.\n     * @default '0 0 20 20'\n     */\n    viewBox?: SvgProps['viewBox'];\n\n    /**\n     * The width applied to the icon.\n     * @default 24\n     */\n    width?: SvgProps['width'];\n}> {}\n"],"mappings":""}

package/build/commonjs/SvgIcon/SvgIcon.js

@@ -11,21 +11,30 @@ var _reactNativeSvg = _interopRequireDefault(require("react-native-svg"));
 
 var _styles = require("../styles");
 
+var _SvgIconProps = require("./SvgIconProps");
+
 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); }
 
 function SvgIcon(props) {
   const {
-    color: colorProp = 'primary',
-    height = 24,
+    color: colorProp = 'strong',
+    height: heightProp,
+    scale = 1,
+    size = 'medium',
     style: styleProp,
+    translateX = 0,
+    translateY = 0,
     viewBox = '0 0 24 24',
-    width = 24,
+    width: widthProp,
     ...otherProps
   } = props;
   const theme = (0, _styles.useTheme)();
-  const color = theme.palette[colorProp].main;
+  const color = theme.palette.icon[colorProp];
+  const iconSize = _SvgIconProps.svgIconSizeMap[size];
+  const height = heightProp ?? iconSize;
+  const width = widthProp ?? iconSize;
   const style = (0, _styles.css)([{
     flexShrink: 0
   }, styleProp]);
@@ -33,7 +42,10 @@ function SvgIcon(props) {
     color: color,
     fill: 'currentColor',
     height: height,
+    scale: scale,
     style: style,
+    translateX: translateX,
+    translateY: translateY,
     viewBox: viewBox,
     width: width
   }, otherProps));

package/build/commonjs/SvgIcon/SvgIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["SvgIcon","props","color","colorProp","height","style","styleProp","viewBox","width","otherProps","theme","useTheme","palette","main","css","flexShrink"],"sources":["SvgIcon.tsx"],"sourcesContent":["import React from 'react';\nimport Svg from 'react-native-svg';\nimport { css, useTheme } from '../styles';\nimport type SvgIconProps from './SvgIconProps';\n\nexport default function SvgIcon(props: SvgIconProps) {\n    const {\n        color: colorProp = 'primary',\n        height = 24,\n        style: styleProp,\n        viewBox = '0 0 24 24',\n        width = 24,\n        ...otherProps\n    }: SvgIconProps = props;\n\n    const theme = useTheme();\n\n    const color = theme.palette[colorProp].main;\n\n    const style = css([\n        { flexShrink: 0 },\n        styleProp,\n    ]);\n\n    return (\n        <Svg\n            color={color}\n            fill={'currentColor'}\n            height={height}\n            style={style}\n            viewBox={viewBox}\n            width={width}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAGe,SAASA,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,KAAK,EAAEC,SAAS,GAAG,SADjB;IAEFC,MAAM,GAAG,EAFP;IAGFC,KAAK,EAAEC,SAHL;IAIFC,OAAO,GAAG,WAJR;IAKFC,KAAK,GAAG,EALN;IAMF,GAAGC;EAND,IAOYR,KAPlB;EASA,MAAMS,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMT,KAAK,GAAGQ,KAAK,CAACE,OAAN,CAAcT,SAAd,EAAyBU,IAAvC;EAEA,MAAMR,KAAK,GAAG,IAAAS,WAAA,EAAI,CACd;IAAEC,UAAU,EAAE;EAAd,CADc,EAEdT,SAFc,CAAJ,CAAd;EAKA,oBACI,6BAAC,uBAAD;IACI,KAAK,EAAEJ,KADX;IAEI,IAAI,EAAE,cAFV;IAGI,MAAM,EAAEE,MAHZ;IAII,KAAK,EAAEC,KAJX;IAKI,OAAO,EAAEE,OALb;IAMI,KAAK,EAAEC;EANX,GAOQC,UAPR,EADJ;AAWH;;AAAA"}
+{"version":3,"names":["SvgIcon","props","color","colorProp","height","heightProp","scale","size","style","styleProp","translateX","translateY","viewBox","width","widthProp","otherProps","theme","useTheme","palette","icon","iconSize","svgIconSizeMap","css","flexShrink"],"sources":["SvgIcon.tsx"],"sourcesContent":["import React from 'react';\nimport Svg from 'react-native-svg';\nimport { css, useTheme } from '../styles';\nimport type SvgIconProps from './SvgIconProps';\nimport type { SvgIconColor, SvgIconSize } from './SvgIconProps';\nimport { svgIconSizeMap } from './SvgIconProps';\n\nexport default function SvgIcon(props: SvgIconProps) {\n    const {\n        color: colorProp = 'strong' as SvgIconColor,\n        height: heightProp,\n        scale = 1,\n        size = 'medium' as SvgIconSize,\n        style: styleProp,\n        translateX = 0,\n        translateY = 0,\n        viewBox = '0 0 24 24',\n        width: widthProp,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const color = theme.palette.icon[colorProp];\n\n    const iconSize = svgIconSizeMap[size];\n\n    const height = heightProp ?? iconSize;\n    const width = widthProp ?? iconSize;\n\n    const style = css([\n        { flexShrink: 0 },\n        styleProp,\n    ]);\n\n    return (\n        <Svg\n            color={color}\n            fill={'currentColor'}\n            height={height}\n            scale={scale}\n            style={style}\n            translateX={translateX}\n            translateY={translateY}\n            viewBox={viewBox}\n            width={width}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAGA;;;;;;AAEe,SAASA,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,KAAK,EAAEC,SAAS,GAAG,QADjB;IAEFC,MAAM,EAAEC,UAFN;IAGFC,KAAK,GAAG,CAHN;IAIFC,IAAI,GAAG,QAJL;IAKFC,KAAK,EAAEC,SALL;IAMFC,UAAU,GAAG,CANX;IAOFC,UAAU,GAAG,CAPX;IAQFC,OAAO,GAAG,WARR;IASFC,KAAK,EAAEC,SATL;IAUF,GAAGC;EAVD,IAWFd,KAXJ;EAaA,MAAMe,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMf,KAAK,GAAGc,KAAK,CAACE,OAAN,CAAcC,IAAd,CAAmBhB,SAAnB,CAAd;EAEA,MAAMiB,QAAQ,GAAGC,4BAAA,CAAed,IAAf,CAAjB;EAEA,MAAMH,MAAM,GAAGC,UAAU,IAAIe,QAA7B;EACA,MAAMP,KAAK,GAAGC,SAAS,IAAIM,QAA3B;EAEA,MAAMZ,KAAK,GAAG,IAAAc,WAAA,EAAI,CACd;IAAEC,UAAU,EAAE;EAAd,CADc,EAEdd,SAFc,CAAJ,CAAd;EAKA,oBACI,6BAAC,uBAAD;IACI,KAAK,EAAEP,KADX;IAEI,IAAI,EAAE,cAFV;IAGI,MAAM,EAAEE,MAHZ;IAII,KAAK,EAAEE,KAJX;IAKI,KAAK,EAAEE,KALX;IAMI,UAAU,EAAEE,UANhB;IAOI,UAAU,EAAEC,UAPhB;IAQI,OAAO,EAAEC,OARb;IASI,KAAK,EAAEC;EATX,GAUQE,UAVR,EADJ;AAcH;;AAAA"}

package/build/commonjs/SvgIcon/SvgIconProps.js

@@ -1,2 +1,17 @@
 "use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.svgIconSizes = exports.svgIconSizeMap = exports.svgIconColors = void 0;
+const svgIconColors = ['strong', 'strongInverse', 'base', 'baseInverse', 'baseOpacity', 'baseOpacityInverse', 'weak', 'weakInverse', 'weakOpacity', 'weakOpacityInverse', 'accent', 'accentAlt'];
+exports.svgIconColors = svgIconColors;
+const svgIconSizeMap = {
+  small: 16,
+  medium: 20,
+  large: 24
+};
+exports.svgIconSizeMap = svgIconSizeMap;
+const svgIconSizes = Object.keys(svgIconSizeMap);
+exports.svgIconSizes = svgIconSizes;
 //# sourceMappingURL=SvgIconProps.js.map

package/build/commonjs/SvgIcon/SvgIconProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["SvgIconProps.ts"],"sourcesContent":["import React from 'react';\nimport type { SvgProps } from 'react-native-svg';\nimport type { CommonComponentColor, OverridableComponentProps } from '../types';\n\nexport type SvgIconColor = CommonComponentColor;\n\nexport default interface SvgIconProps extends OverridableComponentProps<SvgProps, {\n    /**\n     * Node passed into the SVG element.\n     */\n    children: React.ReactNode;\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?: SvgIconColor;\n\n    /**\n     * The color of the component. It is treated as higher priority than `color` prop if provided.\n     */\n    fill?: SvgProps['fill'];\n\n    /**\n     * The height applied to the icon.\n     * @default 24\n     */\n    height?: SvgProps['height'];\n\n    /**\n     * Allows you to redefine what the coordinates without units mean inside an SVG element.\n     * @default '0 0 20 20'\n     */\n    viewBox?: SvgProps['viewBox'];\n\n    /**\n     * The width applied to the icon.\n     * @default 24\n     */\n    width?: SvgProps['width'];\n}> {}\n"],"mappings":""}
+{"version":3,"names":["svgIconColors","svgIconSizeMap","small","medium","large","svgIconSizes","Object","keys"],"sources":["SvgIconProps.ts"],"sourcesContent":["import React from 'react';\nimport type { SvgProps } from 'react-native-svg';\nimport type { OverridableComponentProps } from '../types';\n\nexport const svgIconColors = [\n    'strong',\n    'strongInverse',\n    'base',\n    'baseInverse',\n    'baseOpacity',\n    'baseOpacityInverse',\n    'weak',\n    'weakInverse',\n    'weakOpacity',\n    'weakOpacityInverse',\n    'accent',\n    'accentAlt',\n] as const;\nexport type SvgIconColor = typeof svgIconColors[number];\n\nexport const svgIconSizeMap = {\n    small: 16,\n    medium: 20,\n    large: 24,\n} as const;\n\nexport type SvgIconSize = keyof typeof svgIconSizeMap;\nexport const svgIconSizes = Object.keys(svgIconSizeMap) as SvgIconSize[];\n\nexport default interface SvgIconProps extends OverridableComponentProps<SvgProps, {\n    /**\n     * Node passed into the SVG element.\n     */\n    children: React.ReactNode;\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?: SvgIconColor;\n\n    /**\n     * The color of the component. It is treated as higher priority than `color` prop if provided.\n     */\n    fill?: SvgProps['fill'];\n\n    /**\n     * The height applied to the icon.\n     */\n    height?: SvgProps['height'];\n\n    /**\n     * Determines the size of the viewport.\n     * @default 'medium'\n     */\n    size?: SvgIconSize;\n\n    /**\n     * Allows you to redefine what the coordinates without units mean inside an SVG element.\n     * @default '0 0 24 24'\n     */\n    viewBox?: SvgProps['viewBox'];\n\n    /**\n     * The width applied to the icon.\n     */\n    width?: SvgProps['width'];\n}> {}\n"],"mappings":";;;;;;AAIO,MAAMA,aAAa,GAAG,CACzB,QADyB,EAEzB,eAFyB,EAGzB,MAHyB,EAIzB,aAJyB,EAKzB,aALyB,EAMzB,oBANyB,EAOzB,MAPyB,EAQzB,aARyB,EASzB,aATyB,EAUzB,oBAVyB,EAWzB,QAXyB,EAYzB,WAZyB,CAAtB;;AAgBA,MAAMC,cAAc,GAAG;EAC1BC,KAAK,EAAE,EADmB;EAE1BC,MAAM,EAAE,EAFkB;EAG1BC,KAAK,EAAE;AAHmB,CAAvB;;AAOA,MAAMC,YAAY,GAAGC,MAAM,CAACC,IAAP,CAAYN,cAAZ,CAArB"}

package/build/commonjs/SvgIcon/index.js

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

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

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

package/build/commonjs/Tab/LegacyTab.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Tab;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _Badge = _interopRequireDefault(require("../Badge"));
+
+var _TabBase = _interopRequireDefault(require("../TabBase"));
+
+var _styles = require("../styles");
+
+var _TabIndicator = _interopRequireDefault(require("./TabIndicator"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const styles = _styles.StyleSheet.create({
+  root: { // TODO: Remove redundant platform checking
+    ...(_reactNative.Platform.OS === 'web' ? {
+      minWidth: 'auto'
+    } : {}),
+    minHeight: 40
+  },
+  bottomNavigation: {
+    minHeight: 56
+  },
+  filledInner: {
+    justifyContent: 'center'
+  },
+  tertiary: {
+    minHeight: 44
+  }
+});
+
+function Tab(props) {
+  const {
+    badgeVisible = false,
+    children,
+    enableIndicator = false,
+    icon: defaultIcon,
+    indicatorColor = 'primary',
+    indicatorSize = 'full',
+    selected = false,
+    selectedIcon,
+    variant = 'primary',
+    style,
+    onTabInnerLayout,
+    ...otherProps
+  } = props;
+  const theme = (0, _styles.useTheme)();
+  const vertical = variant === 'bottom-navigation';
+  const color = selected ? theme.palette.text.primary : variant === 'contained' ? theme.palette.text.secondary : theme.palette.text.hint;
+  const containedStyle = {
+    borderColor: selected ? theme.palette.primary.main : theme.palette.border.default,
+    borderRadius: theme.shape.roundnessExtra,
+    borderWidth: selected ? 1.5 : 1,
+    minHeight: 'auto',
+    paddingHorizontal: theme.spacing(3),
+    paddingVertical: theme.spacing(1.5)
+  };
+  const tabBaseStyle = (0, _styles.css)([styles.root, variant === 'bottom-navigation' && styles.bottomNavigation, variant === 'contained' && containedStyle, variant === 'tertiary' && styles.tertiary, style]);
+  const tabInnerStyle = (0, _styles.css)([styles.root, styles.filledInner]);
+  const fontStyle = (0, _styles.createFontStyle)(theme, {
+    selector: typo => {
+      switch (variant) {
+        case 'primary':
+          return typo.h2;
+
+        case 'secondary':
+          return typo.button2;
+
+        case 'tertiary':
+          return typo.h3;
+
+        case 'contained':
+          return selected ? { ...typo.subtitle2,
+            fontWeight: typo.fontWeight.medium
+          } : typo.body2;
+
+        default:
+          return typo.flag;
+      }
+    },
+    color
+  });
+  const pressEffect = selected ? 'none' : 'opacity';
+  const icon = selected ? selectedIcon || defaultIcon : defaultIcon;
+  const iconElement = icon ? /*#__PURE__*/(0, _react.cloneElement)(icon, {
+    fill: color
+  }) : null;
+  const tabElement = typeof children !== 'string' ? /*#__PURE__*/_react.default.cloneElement(children, {
+    selected
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Badge.default, {
+    children: iconElement,
+    invisible: !badgeVisible
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    children: children,
+    style: (0, _styles.css)(fontStyle)
+  }));
+  const tabIndicator = enableIndicator && selected ? /*#__PURE__*/_react.default.createElement(_TabIndicator.default, {
+    indicatorSize: indicatorSize,
+    color: indicatorColor
+  }) : null;
+  return /*#__PURE__*/_react.default.createElement(_TabBase.default, _extends({
+    pressEffect: pressEffect,
+    style: tabBaseStyle,
+    vertical: vertical
+  }, otherProps), indicatorSize === 'fit-content' ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    onLayout: onTabInnerLayout,
+    style: tabInnerStyle
+  }, tabElement, tabIndicator) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tabElement, tabIndicator));
+}
+
+;
+//# sourceMappingURL=LegacyTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","minHeight","bottomNavigation","filledInner","justifyContent","tertiary","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","indicatorColor","indicatorSize","selected","selectedIcon","variant","style","onTabInnerLayout","otherProps","theme","useTheme","vertical","color","palette","text","primary","secondary","hint","containedStyle","borderColor","main","border","default","borderRadius","shape","roundnessExtra","borderWidth","paddingHorizontal","spacing","paddingVertical","tabBaseStyle","css","tabInnerStyle","fontStyle","createFontStyle","selector","typo","h2","button2","h3","subtitle2","fontWeight","medium","body2","flag","pressEffect","iconElement","cloneElement","fill","tabElement","React","tabIndicator"],"sources":["LegacyTab.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type TabProps from './LegacyTabProps';\nimport TabIndicator from './TabIndicator';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n        minHeight: 40,\n    },\n    bottomNavigation: {\n        minHeight: 56,\n    },\n    filledInner: {\n        justifyContent: 'center',\n    },\n    tertiary: {\n        minHeight: 44,\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator = false,\n        icon: defaultIcon,\n        indicatorColor = 'primary',\n        indicatorSize = 'full',\n        selected = false,\n        selectedIcon,\n        variant = 'primary',\n        style,\n        onTabInnerLayout,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const vertical = variant === 'bottom-navigation';\n\n    const color = selected\n        ? theme.palette.text.primary\n        : variant === 'contained'\n            ? theme.palette.text.secondary\n            : theme.palette.text.hint;\n\n    const containedStyle = {\n        borderColor: selected ? theme.palette.primary.main : theme.palette.border.default,\n        borderRadius: theme.shape.roundnessExtra,\n        borderWidth: selected ? 1.5 : 1,\n        minHeight: 'auto',\n        paddingHorizontal: theme.spacing(3),\n        paddingVertical: theme.spacing(1.5),\n    };\n\n    const tabBaseStyle = css([\n        styles.root,\n        variant === 'bottom-navigation' && styles.bottomNavigation,\n        variant === 'contained' && containedStyle,\n        variant === 'tertiary' && styles.tertiary,\n        style,\n    ]);\n\n    const tabInnerStyle = css([\n        styles.root,\n        styles.filledInner,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => {\n            switch (variant) {\n                case 'primary':\n                    return typo.h2;\n                case 'secondary':\n                    return typo.button2;\n                case 'tertiary':\n                    return typo.h3;\n                case 'contained':\n                    return selected\n                        ? { ...typo.subtitle2, fontWeight: typo.fontWeight.medium }\n                        : typo.body2;\n                default:\n                    return typo.flag;\n            }\n        },\n        color,\n    });\n    const pressEffect = selected ? 'none' : 'opacity';\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = icon ? cloneElement(icon, { fill: color }) : null;\n\n    const tabElement = typeof children !== 'string' ? (\n        React.cloneElement(children, {\n            selected,\n        })\n    ) : (\n        <React.Fragment>\n            <Badge\n                children={iconElement}\n                invisible={!badgeVisible}\n            />\n\n            <Text\n                children={children}\n                style={css(fontStyle)}\n            />\n        </React.Fragment>\n    );\n    const tabIndicator = (enableIndicator && selected)\n        ? <TabIndicator indicatorSize={indicatorSize} color={indicatorColor}/>\n        : null;\n\n    return (\n        <TabBase\n            pressEffect={pressEffect}\n            style={tabBaseStyle}\n            vertical={vertical}\n            {...otherProps}\n        >\n            {indicatorSize === 'fit-content' ? (\n                <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n                    {tabElement}\n\n                    {tabIndicator}\n                </View>\n            ) : (\n                <React.Fragment>\n                    {tabElement}\n\n                    {tabIndicator}\n                </React.Fragment>\n            )}\n        </TabBase>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Tab/LegacyTabProps.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["LegacyTabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport type TabVariant = 'primary' | 'secondary' | 'tertiary' | 'bottom-navigation' | 'contained';\nexport type TabIndicatorColor = 'primary' | 'secondary';\nexport type TabIndicatorSize = 'full' | 'fit-content';\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n    /**\n     * If `true`, the badge is visible.\n     * @default false\n     */\n    badgeVisible?: boolean;\n\n    /**\n     * The label of the Tab.\n     */\n    children: string | React.ReactElement;\n\n    /**\n     * If `true`, the indicator is enabled.\n     * @default false\n     */\n    enableIndicator?: boolean;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Element placed before the children.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * Tab indicator color\n     * @default 'primary'\n     */\n    indicatorColor?: TabIndicatorColor;\n\n    /**\n     * The size of tab indicator.\n     * 'full' adjusts the indicator to the size of the Tab,\n     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.\n     * @default 'full'\n     */\n    indicatorSize?: TabIndicatorSize;\n\n    /**\n     * If supplied, use this icon on selected state.\n     */\n    selectedIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Function to be passed to the child component's onLayout prop.\n     */\n    onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n}> {}\n"],"mappings":""}