@fountain-ui/core 2.0.0-beta.3 → 2.0.0-beta.6

package/build/commonjs/AppBar/AppBar.js

@@ -23,15 +23,6 @@ const useStyles = function () {
       flexShrink: 0,
       width: '100%',
       zIndex: theme.zIndex.appBar
-    },
-    colorDefault: {
-      backgroundColor: theme.palette.background.default
-    },
-    colorPrimary: {
-      backgroundColor: theme.palette.primary.main
-    },
-    colorTransparent: {
-      backgroundColor: 'transparent'
     }
   };
 };
@@ -42,14 +33,18 @@ const AppBar = /*#__PURE__*/_react.default.forwardRef(function AppBar(props, ref
     style,
     ...otherProps
   } = props;
+  const theme = (0, _styles.useTheme)();
   const styles = useStyles();
-  const colorStyle = color === 'default' ? styles.colorDefault : color === 'primary' ? styles.colorPrimary : styles.colorTransparent;
-  const paperStyle = (0, _styles.css)([styles.root, colorStyle, style]);
+  const backgroundColor = color === 'default' ? theme.palette.background.default : color === 'paper' ? theme.palette.paper.default : color === 'primary' ? theme.palette.primary.main : 'transparent';
+  const paperStyle = (0, _styles.css)([styles.root, {
+    backgroundColor
+  }, style]);
   return /*#__PURE__*/_react.default.createElement(_Paper.default, _extends({
     ref: ref,
-    square: true,
+    colorValue: backgroundColor,
     elevation: 0,
-    style: paperStyle
+    style: paperStyle,
+    square: true
   }, otherProps));
 });
 

package/build/commonjs/AppBar/AppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AppBar.tsx"],"names":["useStyles","theme","root","flexDirection","flexShrink","width","zIndex","appBar","colorDefault","backgroundColor","palette","background","default","colorPrimary","primary","main","colorTransparent","AppBar","React","forwardRef","props","ref","color","style","otherProps","styles","colorStyle","paperStyle"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;;;;;AAWA,MAAMA,SAAkC,GAAG,YAA0B;AACjE,QAAMC,KAAK,GAAG,uBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,aAAa,EAAE,QADb;AAEFC,MAAAA,UAAU,EAAE,CAFV;AAGFC,MAAAA,KAAK,EAAE,MAHL;AAIFC,MAAAA,MAAM,EAAEL,KAAK,CAACK,MAAN,CAAaC;AAJnB,KADH;AAOHC,IAAAA,YAAY,EAAE;AACVC,MAAAA,eAAe,EAAER,KAAK,CAACS,OAAN,CAAcC,UAAd,CAAyBC;AADhC,KAPX;AAUHC,IAAAA,YAAY,EAAE;AACVJ,MAAAA,eAAe,EAAER,KAAK,CAACS,OAAN,CAAcI,OAAd,CAAsBC;AAD7B,KAVX;AAaHC,IAAAA,gBAAgB,EAAE;AACdP,MAAAA,eAAe,EAAE;AADH;AAbf,GAAP;AAiBH,CApBD;;AAsBA,MAAMQ,MAAM,gBAAGC,eAAMC,UAAN,CAAoC,SAASF,MAAT,CAAgBG,KAAhB,EAAuBC,GAAvB,EAA4B;AAC3E,QAAM;AACFC,IAAAA,KAAK,GAAG,SADN;AAEFC,IAAAA,KAFE;AAGF,OAAGC;AAHD,MAIFJ,KAJJ;AAMA,QAAMK,MAAM,GAAGzB,SAAS,EAAxB;AAEA,QAAM0B,UAAU,GAAGJ,KAAK,KAAK,SAAV,GACbG,MAAM,CAACjB,YADM,GAEbc,KAAK,KAAK,SAAV,GACIG,MAAM,CAACZ,YADX,GAEIY,MAAM,CAACT,gBAJjB;AAMA,QAAMW,UAAU,GAAG,iBAAI,CACnBF,MAAM,CAACvB,IADY,EAEnBwB,UAFmB,EAGnBH,KAHmB,CAAJ,CAAnB;AAMA,sBACI,6BAAC,cAAD;AACI,IAAA,GAAG,EAAEF,GADT;AAEI,IAAA,MAAM,MAFV;AAGI,IAAA,SAAS,EAAE,CAHf;AAII,IAAA,KAAK,EAAEM;AAJX,KAKQH,UALR,EADJ;AASH,CA9Bc,CAAf;;eAgCeP,M","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Paper from '../Paper';\nimport { css, useTheme } from '../styles';\nimport type AppBarProps from './AppBarProps';\n\ntype AppBarStyleKeys =\n    | 'root'\n    | 'colorDefault'\n    | 'colorPrimary'\n    | 'colorTransparent';\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        colorDefault: {\n            backgroundColor: theme.palette.background.default,\n        },\n        colorPrimary: {\n            backgroundColor: theme.palette.primary.main,\n        },\n        colorTransparent: {\n            backgroundColor: 'transparent',\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 styles = useStyles();\n\n    const colorStyle = color === 'default'\n        ? styles.colorDefault\n        : color === 'primary'\n            ? styles.colorPrimary\n            : styles.colorTransparent;\n\n    const paperStyle = css([\n        styles.root,\n        colorStyle,\n        style,\n    ]);\n\n    return (\n        <Paper\n            ref={ref}\n            square\n            elevation={0}\n            style={paperStyle}\n            {...otherProps}\n        />\n    );\n});\n\nexport default AppBar;\n"]}
+{"version":3,"sources":["AppBar.tsx"],"names":["useStyles","theme","root","flexDirection","flexShrink","width","zIndex","appBar","AppBar","React","forwardRef","props","ref","color","style","otherProps","styles","backgroundColor","palette","background","default","paper","primary","main","paperStyle"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;;;;;AAOA,MAAMA,SAAkC,GAAG,YAA0B;AACjE,QAAMC,KAAK,GAAG,uBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,aAAa,EAAE,QADb;AAEFC,MAAAA,UAAU,EAAE,CAFV;AAGFC,MAAAA,KAAK,EAAE,MAHL;AAIFC,MAAAA,MAAM,EAAEL,KAAK,CAACK,MAAN,CAAaC;AAJnB;AADH,GAAP;AAQH,CAXD;;AAaA,MAAMC,MAAM,gBAAGC,eAAMC,UAAN,CAAoC,SAASF,MAAT,CAAgBG,KAAhB,EAAuBC,GAAvB,EAA4B;AAC3E,QAAM;AACFC,IAAAA,KAAK,GAAG,SADN;AAEFC,IAAAA,KAFE;AAGF,OAAGC;AAHD,MAIFJ,KAJJ;AAMA,QAAMV,KAAK,GAAG,uBAAd;AAEA,QAAMe,MAAM,GAAGhB,SAAS,EAAxB;AAEA,QAAMiB,eAAe,GAAGJ,KAAK,KAAK,SAAV,GAClBZ,KAAK,CAACiB,OAAN,CAAcC,UAAd,CAAyBC,OADP,GAElBP,KAAK,KAAK,OAAV,GACIZ,KAAK,CAACiB,OAAN,CAAcG,KAAd,CAAoBD,OADxB,GAEIP,KAAK,KAAK,SAAV,GACIZ,KAAK,CAACiB,OAAN,CAAcI,OAAd,CAAsBC,IAD1B,GAEI,aANd;AAQA,QAAMC,UAAU,GAAG,iBAAI,CACnBR,MAAM,CAACd,IADY,EAEnB;AAAEe,IAAAA;AAAF,GAFmB,EAGnBH,KAHmB,CAAJ,CAAnB;AAMA,sBACI,6BAAC,cAAD;AACI,IAAA,GAAG,EAAEF,GADT;AAEI,IAAA,UAAU,EAAEK,eAFhB;AAGI,IAAA,SAAS,EAAE,CAHf;AAII,IAAA,KAAK,EAAEO,UAJX;AAKI,IAAA,MAAM,EAAE;AALZ,KAMQT,UANR,EADJ;AAUH,CAnCc,CAAf;;eAqCeP,M","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Paper from '../Paper';\nimport { css, useTheme } from '../styles';\nimport type AppBarProps 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 backgroundColor = color === 'default'\n        ? theme.palette.background.default\n        : color === 'paper'\n            ? theme.palette.paper.default\n            : color === 'primary'\n                ? theme.palette.primary.main\n                : 'transparent';\n\n    const paperStyle = css([\n        styles.root,\n        { backgroundColor },\n        style,\n    ]);\n\n    return (\n        <Paper\n            ref={ref}\n            colorValue={backgroundColor}\n            elevation={0}\n            style={paperStyle}\n            square={true}\n            {...otherProps}\n        />\n    );\n});\n\nexport default AppBar;\n"]}

package/build/commonjs/Paper/Paper.js

@@ -13,6 +13,8 @@ var _styles = require("../styles");
 
 var _hooks = require("../hooks");
 
+var _PaperStylesProvider = _interopRequireDefault(require("./PaperStylesProvider"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || 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); }
@@ -20,6 +22,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const Paper = /*#__PURE__*/_react.default.forwardRef(function Paper(props, ref) {
   const {
     color = 'default',
+    colorValue,
     elevation = 1,
     style: styleProp,
     square = false,
@@ -27,8 +30,9 @@ const Paper = /*#__PURE__*/_react.default.forwardRef(function Paper(props, ref)
     ...otherProps
   } = props;
   const theme = (0, _styles.useTheme)();
+  const backgroundColor = colorValue !== null && colorValue !== void 0 ? colorValue : theme.palette.paper[color];
   const rootStyle = {
-    backgroundColor: theme.palette.paper[color]
+    backgroundColor
   };
   const roundedStyle = {
     borderRadius: theme.shape.roundness
@@ -40,10 +44,14 @@ const Paper = /*#__PURE__*/_react.default.forwardRef(function Paper(props, ref)
     borderColor: theme.palette.divider
   };
   const style = (0, _styles.css)([rootStyle, variant === 'elevation' ? elevationStyle : outlinedStyle, !square ? roundedStyle : undefined, styleProp]);
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
+  return /*#__PURE__*/_react.default.createElement(_PaperStylesProvider.default, {
+    value: {
+      backgroundColor
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
     ref: ref,
     style: style
-  }, otherProps));
+  }, otherProps)));
 });
 
 var _default = Paper;

package/build/commonjs/Paper/Paper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Paper.tsx"],"names":["Paper","React","forwardRef","props","ref","color","elevation","style","styleProp","square","variant","otherProps","theme","rootStyle","backgroundColor","palette","paper","roundedStyle","borderRadius","shape","roundness","elevationStyle","outlinedStyle","borderWidth","StyleSheet","hairlineWidth","borderStyle","borderColor","divider","undefined"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAGA,MAAMA,KAAK,gBAAGC,eAAMC,UAAN,CAAmC,SAASF,KAAT,CAAeG,KAAf,EAAsBC,GAAtB,EAA2B;AACxE,QAAM;AACFC,IAAAA,KAAK,GAAG,SADN;AAEFC,IAAAA,SAAS,GAAG,CAFV;AAGFC,IAAAA,KAAK,EAAEC,SAHL;AAIFC,IAAAA,MAAM,GAAG,KAJP;AAKFC,IAAAA,OAAO,GAAG,WALR;AAMF,OAAGC;AAND,MAOFR,KAPJ;AASA,QAAMS,KAAK,GAAG,uBAAd;AAEA,QAAMC,SAAS,GAAG;AACdC,IAAAA,eAAe,EAAEF,KAAK,CAACG,OAAN,CAAcC,KAAd,CAAoBX,KAApB;AADH,GAAlB;AAIA,QAAMY,YAAY,GAAG;AACjBC,IAAAA,YAAY,EAAEN,KAAK,CAACO,KAAN,CAAYC;AADT,GAArB;AAIA,QAAMC,cAAc,GAAG,8BAAkBf,SAAlB,CAAvB;AAEA,QAAMgB,aAAa,GAAG;AAClBC,IAAAA,WAAW,EAAEC,mBAAWC,aADN;AAElBC,IAAAA,WAAW,EAAE,OAFK;AAGlBC,IAAAA,WAAW,EAAEf,KAAK,CAACG,OAAN,CAAca;AAHT,GAAtB;AAMA,QAAMrB,KAAK,GAAG,iBAAI,CACdM,SADc,EAEdH,OAAO,KAAK,WAAZ,GAA0BW,cAA1B,GAA2CC,aAF7B,EAGd,CAACb,MAAD,GAAUQ,YAAV,GAAyBY,SAHX,EAIdrB,SAJc,CAAJ,CAAd;AAOA,sBACI,6BAAC,iBAAD;AACI,IAAA,GAAG,EAAEJ,GADT;AAEI,IAAA,KAAK,EAAEG;AAFX,KAGQI,UAHR,EADJ;AAOH,CA1Ca,CAAd;;eA4CeX,K","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type PaperProps from './PaperProps';\n\nconst Paper = React.forwardRef<View, PaperProps>(function Paper(props, ref) {\n    const {\n        color = 'default',\n        elevation = 1,\n        style: styleProp,\n        square = false,\n        variant = 'elevation',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const rootStyle = {\n        backgroundColor: theme.palette.paper[color],\n    };\n\n    const roundedStyle = {\n        borderRadius: theme.shape.roundness,\n    };\n\n    const elevationStyle = useElevationStyle(elevation);\n\n    const outlinedStyle = {\n        borderWidth: StyleSheet.hairlineWidth,\n        borderStyle: 'solid',\n        borderColor: theme.palette.divider,\n    };\n\n    const style = css([\n        rootStyle,\n        variant === 'elevation' ? elevationStyle : outlinedStyle,\n        !square ? roundedStyle : undefined,\n        styleProp,\n    ]);\n\n    return (\n        <View\n            ref={ref}\n            style={style}\n            {...otherProps}\n        />\n    );\n});\n\nexport default Paper;\n"]}
+{"version":3,"sources":["Paper.tsx"],"names":["Paper","React","forwardRef","props","ref","color","colorValue","elevation","style","styleProp","square","variant","otherProps","theme","backgroundColor","palette","paper","rootStyle","roundedStyle","borderRadius","shape","roundness","elevationStyle","outlinedStyle","borderWidth","StyleSheet","hairlineWidth","borderStyle","borderColor","divider","undefined"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAEA,MAAMA,KAAK,gBAAGC,eAAMC,UAAN,CAAmC,SAASF,KAAT,CAAeG,KAAf,EAAsBC,GAAtB,EAA2B;AACxE,QAAM;AACFC,IAAAA,KAAK,GAAG,SADN;AAEFC,IAAAA,UAFE;AAGFC,IAAAA,SAAS,GAAG,CAHV;AAIFC,IAAAA,KAAK,EAAEC,SAJL;AAKFC,IAAAA,MAAM,GAAG,KALP;AAMFC,IAAAA,OAAO,GAAG,WANR;AAOF,OAAGC;AAPD,MAQFT,KARJ;AAUA,QAAMU,KAAK,GAAG,uBAAd;AAEA,QAAMC,eAAe,GAAGR,UAAH,aAAGA,UAAH,cAAGA,UAAH,GAAiBO,KAAK,CAACE,OAAN,CAAcC,KAAd,CAAoBX,KAApB,CAAtC;AAEA,QAAMY,SAAS,GAAG;AAAEH,IAAAA;AAAF,GAAlB;AAEA,QAAMI,YAAY,GAAG;AACjBC,IAAAA,YAAY,EAAEN,KAAK,CAACO,KAAN,CAAYC;AADT,GAArB;AAIA,QAAMC,cAAc,GAAG,8BAAkBf,SAAlB,CAAvB;AAEA,QAAMgB,aAAa,GAAG;AAClBC,IAAAA,WAAW,EAAEC,mBAAWC,aADN;AAElBC,IAAAA,WAAW,EAAE,OAFK;AAGlBC,IAAAA,WAAW,EAAEf,KAAK,CAACE,OAAN,CAAcc;AAHT,GAAtB;AAMA,QAAMrB,KAAK,GAAG,iBAAI,CACdS,SADc,EAEdN,OAAO,KAAK,WAAZ,GAA0BW,cAA1B,GAA2CC,aAF7B,EAGd,CAACb,MAAD,GAAUQ,YAAV,GAAyBY,SAHX,EAIdrB,SAJc,CAAJ,CAAd;AAOA,sBACI,6BAAC,4BAAD;AACI,IAAA,KAAK,EAAE;AAAEK,MAAAA;AAAF;AADX,kBAGI,6BAAC,iBAAD;AACI,IAAA,GAAG,EAAEV,GADT;AAEI,IAAA,KAAK,EAAEI;AAFX,KAGQI,UAHR,EAHJ,CADJ;AAWH,CA/Ca,CAAd;;eAiDeZ,K","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type PaperProps from './PaperProps';\nimport PaperStylesProvider from './PaperStylesProvider';\n\nconst Paper = React.forwardRef<View, PaperProps>(function Paper(props, ref) {\n    const {\n        color = 'default',\n        colorValue,\n        elevation = 1,\n        style: styleProp,\n        square = false,\n        variant = 'elevation',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const backgroundColor = colorValue ?? theme.palette.paper[color];\n\n    const rootStyle = { backgroundColor };\n\n    const roundedStyle = {\n        borderRadius: theme.shape.roundness,\n    };\n\n    const elevationStyle = useElevationStyle(elevation);\n\n    const outlinedStyle = {\n        borderWidth: StyleSheet.hairlineWidth,\n        borderStyle: 'solid',\n        borderColor: theme.palette.divider,\n    };\n\n    const style = css([\n        rootStyle,\n        variant === 'elevation' ? elevationStyle : outlinedStyle,\n        !square ? roundedStyle : undefined,\n        styleProp,\n    ]);\n\n    return (\n        <PaperStylesProvider\n            value={{ backgroundColor }}\n        >\n            <View\n                ref={ref}\n                style={style}\n                {...otherProps}\n            />\n        </PaperStylesProvider>\n    );\n});\n\nexport default Paper;\n"]}

package/build/commonjs/Paper/PaperStylesProvider.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PaperStylesContext = void 0;
+
+var _react = require("react");
+
+const PaperStylesContext = /*#__PURE__*/(0, _react.createContext)(null);
+exports.PaperStylesContext = PaperStylesContext;
+var _default = PaperStylesContext.Provider;
+exports.default = _default;
+//# sourceMappingURL=PaperStylesProvider.js.map

package/build/commonjs/Paper/PaperStylesProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PaperStylesProvider.tsx"],"names":["PaperStylesContext","Provider"],"mappings":";;;;;;;AAAA;;AAMO,MAAMA,kBAAkB,gBAAG,0BAAkC,IAAlC,CAA3B;;eAEQA,kBAAkB,CAACC,Q","sourcesContent":["import { createContext } from 'react';\n\nexport type PaperStyles = {\n    backgroundColor: string;\n}\n\nexport const PaperStylesContext = createContext<PaperStyles | null>(null);\n\nexport default PaperStylesContext.Provider;\n"]}

package/build/commonjs/Paper/usePaperStyles.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = usePaperStyles;
+
+var _react = require("react");
+
+var _PaperStylesProvider = require("./PaperStylesProvider");
+
+function usePaperStyles() {
+  return (0, _react.useContext)(_PaperStylesProvider.PaperStylesContext);
+}
+
+;
+//# sourceMappingURL=usePaperStyles.js.map

package/build/commonjs/Paper/usePaperStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePaperStyles.ts"],"names":["usePaperStyles","PaperStylesContext"],"mappings":";;;;;;;AAAA;;AACA;;AAEe,SAASA,cAAT,GAA0B;AACrC,SAAO,uBAAWC,uCAAX,CAAP;AACH;;AAAA","sourcesContent":["import { useContext } from 'react';\nimport { PaperStylesContext } from './PaperStylesProvider';\n\nexport default function usePaperStyles() {\n    return useContext(PaperStylesContext);\n};\n"]}

package/build/commonjs/TextField/InputLabel.js

@@ -11,12 +11,13 @@ var _reactNative = require("react-native");
 
 var _styles = require("../styles");
 
+var _usePaperStyles = _interopRequireDefault(require("../Paper/usePaperStyles"));
+
 var _utils = require("./utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const useStyles = function () {
-  const theme = (0, _styles.useTheme)();
   return {
     background: {
       position: 'absolute',
@@ -25,15 +26,13 @@ const useStyles = function () {
       bottom: 0,
       right: 0,
       width: 8,
-      height: 2,
-      backgroundColor: theme.palette.background.default
+      height: 4
     },
     backgroundText: {
       position: 'absolute',
       left: 18,
       paddingHorizontal: 0,
-      color: 'transparent',
-      backgroundColor: theme.palette.background.default
+      color: 'transparent'
     },
     placeholder: {
       position: 'absolute',
@@ -44,6 +43,8 @@ const useStyles = function () {
 };
 
 const InputLabel = props => {
+  var _paperStyles$backgrou;
+
   const {
     activeColor,
     animatedError,
@@ -65,7 +66,12 @@ const InputLabel = props => {
     topPosition,
     value
   } = props;
+  const theme = (0, _styles.useTheme)();
   const styles = useStyles();
+  const paperStyles = (0, _usePaperStyles.default)();
+  const backgroundStyle = {
+    backgroundColor: (_paperStyles$backgrou = paperStyles === null || paperStyles === void 0 ? void 0 : paperStyles.backgroundColor) !== null && _paperStyles$backgrou !== void 0 ? _paperStyles$backgrou : theme.palette.background.default
+  };
   const hasFocus = hasActiveOutline || value;
   const opacity = animatedLabel.interpolate({
     inputRange: [0, 1],
@@ -106,7 +112,7 @@ const InputLabel = props => {
   }, [/*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
     key: 'labelBackground-view',
     pointerEvents: 'none',
-    style: [styles.background, {
+    style: [styles.background, backgroundStyle, {
       opacity,
       transform: [{
         translateX: animatedLabel.interpolate({
@@ -117,7 +123,7 @@ const InputLabel = props => {
     }]
   }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.Text, {
     key: 'labelBackground-text',
-    style: [styles.placeholder, styles.backgroundText, labelStyle, {
+    style: [styles.placeholder, styles.backgroundText, backgroundStyle, labelStyle, {
       top: topPosition + 1,
       opacity,
       transform: [...labelStyle.transform, {

package/build/commonjs/TextField/InputLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InputLabel.tsx"],"names":["useStyles","theme","background","position","top","left","bottom","right","width","height","backgroundColor","palette","default","backgroundText","paddingHorizontal","color","placeholder","inputPaddingHorizontal","InputLabel","props","activeColor","animatedError","animatedLabel","error","errorColor","focused","fontSize","hasActiveOutline","label","labelLayout","labelScale","labelTranslateX","labelTranslateY","onLayoutAnimatedText","paddingOffset","placeholderColor","placeholderOpacity","topPosition","value","styles","hasFocus","opacity","interpolate","inputRange","outputRange","labelTranslationX","transform","translateX","labelStyle","translateY","scale","StyleSheet","absoluteFill","measured","scaleY","textAlign"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, StyleSheet } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { inputPaddingHorizontal } from './utils';\n\ninterface LabelProps {\n    activeColor: string;\n    animatedError: Animated.Value;\n    animatedLabel: Animated.Value;\n    error?: boolean;\n    errorColor?: string;\n    focused?: boolean;\n    fontSize?: number;\n    hasActiveOutline?: boolean;\n    label?: string;\n    labelLayout: { measured: boolean; width: number; height: number };\n    labelScale: number;\n    labelTranslateX: number;\n    labelTranslateY: number;\n    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;\n    paddingOffset?: { paddingLeft: number; paddingRight: number };\n    placeholder?: string;\n    placeholderColor?: string;\n    placeholderOpacity: number | Animated.AnimatedInterpolation;\n    topPosition: number;\n    value?: string;\n}\n\ntype InputLabelStyles = NamedStylesStringUnion<'background' | 'backgroundText' | 'placeholder'>;\n\nconst useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {\n    const theme = useTheme();\n\n    return {\n        background: {\n            position: 'absolute',\n            top: 6,\n            left: 10,\n            bottom: 0,\n            right: 0,\n            width: 8,\n            height: 2,\n            backgroundColor: theme.palette.background.default,\n        },\n        backgroundText: {\n            position: 'absolute',\n            left: 18,\n            paddingHorizontal: 0,\n            color: 'transparent',\n            backgroundColor: theme.palette.background.default,\n        },\n        placeholder: {\n            position: 'absolute',\n            left: 0,\n            paddingHorizontal: inputPaddingHorizontal,\n        },\n    };\n};\n\nconst InputLabel = (props: LabelProps) => {\n    const {\n        activeColor,\n        animatedError,\n        animatedLabel,\n        error = false,\n        errorColor,\n        focused,\n        fontSize,\n        hasActiveOutline,\n        label,\n        labelLayout,\n        labelScale,\n        labelTranslateX,\n        labelTranslateY,\n        onLayoutAnimatedText,\n        paddingOffset,\n        placeholderColor,\n        placeholderOpacity,\n        topPosition,\n        value,\n    } = props;\n\n    const styles = useStyles();\n\n    const hasFocus = hasActiveOutline || value;\n    const opacity = animatedLabel.interpolate({\n        inputRange: [0, 1],\n        outputRange: [hasFocus ? 1 : 0, 0],\n    });\n\n    const labelTranslationX = {\n        transform: [\n            {\n                translateX: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelTranslateX, 0 || 0],\n                }),\n            },\n        ],\n    };\n\n    const labelStyle = {\n        fontSize,\n        transform: [\n            {\n                translateX: animatedError.interpolate({\n                    inputRange: [0, 0.5, 1],\n                    outputRange: [0, value && error ? 4 : 0, 0],\n                }),\n            },\n            {\n                translateY: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelTranslateY, 0],\n                }),\n            },\n            {\n                scale: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelScale, 1],\n                }),\n            },\n        ],\n    };\n\n    return (label ? (\n        <Animated.View\n            pointerEvents={'none'}\n            style={[\n                StyleSheet.absoluteFill,\n                {\n                    opacity: value || focused ? (labelLayout.measured ? 1 : 0) : 1,\n                },\n                labelTranslationX,\n            ]}\n        >\n            {[\n                <Animated.View\n                    key={'labelBackground-view'}\n                    pointerEvents={'none'}\n                    style={[\n                        styles.background,\n                        {\n                            opacity,\n                            transform: [\n                                {\n                                    translateX: animatedLabel.interpolate({\n                                        inputRange: [0, 1],\n                                        outputRange: [-labelTranslateX, 0],\n                                    }),\n                                },\n                            ],\n                        },\n                    ]}\n                />,\n                <Animated.Text\n                    key={'labelBackground-text'}\n                    style={[\n                        styles.placeholder,\n                        styles.backgroundText,\n                        labelStyle,\n                        {\n                            top: topPosition + 1,\n                            opacity,\n                            transform: [\n                                ...labelStyle.transform,\n                                {\n                                    scaleY: animatedLabel.interpolate({\n                                        inputRange: [0, 1],\n                                        outputRange: [0.2, 1],\n                                    }),\n                                },\n                            ],\n                        },\n                    ]}\n                    numberOfLines={1}\n                >\n                    {label}\n                </Animated.Text>,\n            ]}\n            <Animated.Text\n                onLayout={onLayoutAnimatedText}\n                style={[\n                    styles.placeholder,\n                    labelStyle,\n                    paddingOffset,\n                    {\n                        textAlign: 'left',\n                        top: topPosition,\n                        color: error && errorColor ? errorColor : activeColor,\n                        opacity: animatedLabel.interpolate({\n                            inputRange: [0, 1],\n                            outputRange: [hasActiveOutline ? 1 : 0, 0],\n                        }),\n                    },\n                ]}\n                numberOfLines={1}\n            >\n                {label}\n            </Animated.Text>\n            <Animated.Text\n                style={[\n                    styles.placeholder,\n                    labelStyle,\n                    paddingOffset,\n                    {\n                        textAlign: 'left',\n                        top: topPosition,\n                        color: error && errorColor ? errorColor : placeholderColor,\n                        opacity: placeholderOpacity,\n                    },\n                ]}\n                numberOfLines={1}\n            >\n                {label}\n            </Animated.Text>\n        </Animated.View>\n    ) : null);\n};\n\nexport default InputLabel;\n"]}
+{"version":3,"sources":["InputLabel.tsx"],"names":["useStyles","background","position","top","left","bottom","right","width","height","backgroundText","paddingHorizontal","color","placeholder","inputPaddingHorizontal","InputLabel","props","activeColor","animatedError","animatedLabel","error","errorColor","focused","fontSize","hasActiveOutline","label","labelLayout","labelScale","labelTranslateX","labelTranslateY","onLayoutAnimatedText","paddingOffset","placeholderColor","placeholderOpacity","topPosition","value","theme","styles","paperStyles","backgroundStyle","backgroundColor","palette","default","hasFocus","opacity","interpolate","inputRange","outputRange","labelTranslationX","transform","translateX","labelStyle","translateY","scale","StyleSheet","absoluteFill","measured","scaleY","textAlign"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;AA2BA,MAAMA,SAAsC,GAAG,YAA8B;AACzE,SAAO;AACHC,IAAAA,UAAU,EAAE;AACRC,MAAAA,QAAQ,EAAE,UADF;AAERC,MAAAA,GAAG,EAAE,CAFG;AAGRC,MAAAA,IAAI,EAAE,EAHE;AAIRC,MAAAA,MAAM,EAAE,CAJA;AAKRC,MAAAA,KAAK,EAAE,CALC;AAMRC,MAAAA,KAAK,EAAE,CANC;AAORC,MAAAA,MAAM,EAAE;AAPA,KADT;AAUHC,IAAAA,cAAc,EAAE;AACZP,MAAAA,QAAQ,EAAE,UADE;AAEZE,MAAAA,IAAI,EAAE,EAFM;AAGZM,MAAAA,iBAAiB,EAAE,CAHP;AAIZC,MAAAA,KAAK,EAAE;AAJK,KAVb;AAgBHC,IAAAA,WAAW,EAAE;AACTV,MAAAA,QAAQ,EAAE,UADD;AAETE,MAAAA,IAAI,EAAE,CAFG;AAGTM,MAAAA,iBAAiB,EAAEG;AAHV;AAhBV,GAAP;AAsBH,CAvBD;;AAyBA,MAAMC,UAAU,GAAIC,KAAD,IAAuB;AAAA;;AACtC,QAAM;AACFC,IAAAA,WADE;AAEFC,IAAAA,aAFE;AAGFC,IAAAA,aAHE;AAIFC,IAAAA,KAAK,GAAG,KAJN;AAKFC,IAAAA,UALE;AAMFC,IAAAA,OANE;AAOFC,IAAAA,QAPE;AAQFC,IAAAA,gBARE;AASFC,IAAAA,KATE;AAUFC,IAAAA,WAVE;AAWFC,IAAAA,UAXE;AAYFC,IAAAA,eAZE;AAaFC,IAAAA,eAbE;AAcFC,IAAAA,oBAdE;AAeFC,IAAAA,aAfE;AAgBFC,IAAAA,gBAhBE;AAiBFC,IAAAA,kBAjBE;AAkBFC,IAAAA,WAlBE;AAmBFC,IAAAA;AAnBE,MAoBFnB,KApBJ;AAsBA,QAAMoB,KAAK,GAAG,uBAAd;AAEA,QAAMC,MAAM,GAAGpC,SAAS,EAAxB;AAEA,QAAMqC,WAAW,GAAG,8BAApB;AAEA,QAAMC,eAAe,GAAG;AACpBC,IAAAA,eAAe,2BAAEF,WAAF,aAAEA,WAAF,uBAAEA,WAAW,CAAEE,eAAf,yEAAkCJ,KAAK,CAACK,OAAN,CAAcvC,UAAd,CAAyBwC;AADtD,GAAxB;AAIA,QAAMC,QAAQ,GAAGnB,gBAAgB,IAAIW,KAArC;AACA,QAAMS,OAAO,GAAGzB,aAAa,CAAC0B,WAAd,CAA0B;AACtCC,IAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CAD0B;AAEtCC,IAAAA,WAAW,EAAE,CAACJ,QAAQ,GAAG,CAAH,GAAO,CAAhB,EAAmB,CAAnB;AAFyB,GAA1B,CAAhB;AAKA,QAAMK,iBAAiB,GAAG;AACtBC,IAAAA,SAAS,EAAE,CACP;AACIC,MAAAA,UAAU,EAAE/B,aAAa,CAAC0B,WAAd,CAA0B;AAClCC,QAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADsB;AAElCC,QAAAA,WAAW,EAAE,CAACnB,eAAD,EAAkB,KAAK,CAAvB;AAFqB,OAA1B;AADhB,KADO;AADW,GAA1B;AAWA,QAAMuB,UAAU,GAAG;AACf5B,IAAAA,QADe;AAEf0B,IAAAA,SAAS,EAAE,CACP;AACIC,MAAAA,UAAU,EAAEhC,aAAa,CAAC2B,WAAd,CAA0B;AAClCC,QAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,GAAJ,EAAS,CAAT,CADsB;AAElCC,QAAAA,WAAW,EAAE,CAAC,CAAD,EAAIZ,KAAK,IAAIf,KAAT,GAAiB,CAAjB,GAAqB,CAAzB,EAA4B,CAA5B;AAFqB,OAA1B;AADhB,KADO,EAOP;AACIgC,MAAAA,UAAU,EAAEjC,aAAa,CAAC0B,WAAd,CAA0B;AAClCC,QAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADsB;AAElCC,QAAAA,WAAW,EAAE,CAAClB,eAAD,EAAkB,CAAlB;AAFqB,OAA1B;AADhB,KAPO,EAaP;AACIwB,MAAAA,KAAK,EAAElC,aAAa,CAAC0B,WAAd,CAA0B;AAC7BC,QAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADiB;AAE7BC,QAAAA,WAAW,EAAE,CAACpB,UAAD,EAAa,CAAb;AAFgB,OAA1B;AADX,KAbO;AAFI,GAAnB;AAwBA,SAAQF,KAAK,gBACT,6BAAC,qBAAD,CAAU,IAAV;AACI,IAAA,aAAa,EAAE,MADnB;AAEI,IAAA,KAAK,EAAE,CACH6B,wBAAWC,YADR,EAEH;AACIX,MAAAA,OAAO,EAAET,KAAK,IAAIb,OAAT,GAAoBI,WAAW,CAAC8B,QAAZ,GAAuB,CAAvB,GAA2B,CAA/C,GAAoD;AADjE,KAFG,EAKHR,iBALG;AAFX,KAUK,cACG,6BAAC,qBAAD,CAAU,IAAV;AACI,IAAA,GAAG,EAAE,sBADT;AAEI,IAAA,aAAa,EAAE,MAFnB;AAGI,IAAA,KAAK,EAAE,CACHX,MAAM,CAACnC,UADJ,EAEHqC,eAFG,EAGH;AACIK,MAAAA,OADJ;AAEIK,MAAAA,SAAS,EAAE,CACP;AACIC,QAAAA,UAAU,EAAE/B,aAAa,CAAC0B,WAAd,CAA0B;AAClCC,UAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADsB;AAElCC,UAAAA,WAAW,EAAE,CAAC,CAACnB,eAAF,EAAmB,CAAnB;AAFqB,SAA1B;AADhB,OADO;AAFf,KAHG;AAHX,IADH,eAoBG,6BAAC,qBAAD,CAAU,IAAV;AACI,IAAA,GAAG,EAAE,sBADT;AAEI,IAAA,KAAK,EAAE,CACHS,MAAM,CAACxB,WADJ,EAEHwB,MAAM,CAAC3B,cAFJ,EAGH6B,eAHG,EAIHY,UAJG,EAKH;AACI/C,MAAAA,GAAG,EAAE8B,WAAW,GAAG,CADvB;AAEIU,MAAAA,OAFJ;AAGIK,MAAAA,SAAS,EAAE,CACP,GAAGE,UAAU,CAACF,SADP,EAEP;AACIQ,QAAAA,MAAM,EAAEtC,aAAa,CAAC0B,WAAd,CAA0B;AAC9BC,UAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADkB;AAE9BC,UAAAA,WAAW,EAAE,CAAC,GAAD,EAAM,CAAN;AAFiB,SAA1B;AADZ,OAFO;AAHf,KALG,CAFX;AAqBI,IAAA,aAAa,EAAE;AArBnB,KAuBKtB,KAvBL,CApBH,CAVL,eAwDI,6BAAC,qBAAD,CAAU,IAAV;AACI,IAAA,QAAQ,EAAEK,oBADd;AAEI,IAAA,KAAK,EAAE,CACHO,MAAM,CAACxB,WADJ,EAEHsC,UAFG,EAGHpB,aAHG,EAIH;AACI2B,MAAAA,SAAS,EAAE,MADf;AAEItD,MAAAA,GAAG,EAAE8B,WAFT;AAGItB,MAAAA,KAAK,EAAEQ,KAAK,IAAIC,UAAT,GAAsBA,UAAtB,GAAmCJ,WAH9C;AAII2B,MAAAA,OAAO,EAAEzB,aAAa,CAAC0B,WAAd,CAA0B;AAC/BC,QAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADmB;AAE/BC,QAAAA,WAAW,EAAE,CAACvB,gBAAgB,GAAG,CAAH,GAAO,CAAxB,EAA2B,CAA3B;AAFkB,OAA1B;AAJb,KAJG,CAFX;AAgBI,IAAA,aAAa,EAAE;AAhBnB,KAkBKC,KAlBL,CAxDJ,eA4EI,6BAAC,qBAAD,CAAU,IAAV;AACI,IAAA,KAAK,EAAE,CACHY,MAAM,CAACxB,WADJ,EAEHsC,UAFG,EAGHpB,aAHG,EAIH;AACI2B,MAAAA,SAAS,EAAE,MADf;AAEItD,MAAAA,GAAG,EAAE8B,WAFT;AAGItB,MAAAA,KAAK,EAAEQ,KAAK,IAAIC,UAAT,GAAsBA,UAAtB,GAAmCW,gBAH9C;AAIIY,MAAAA,OAAO,EAAEX;AAJb,KAJG,CADX;AAYI,IAAA,aAAa,EAAE;AAZnB,KAcKR,KAdL,CA5EJ,CADS,GA8FT,IA9FJ;AA+FH,CAzKD;;eA2KeV,U","sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, StyleSheet } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport usePaperStyles from '../Paper/usePaperStyles';\nimport { inputPaddingHorizontal } from './utils';\n\ninterface LabelProps {\n    activeColor: string;\n    animatedError: Animated.Value;\n    animatedLabel: Animated.Value;\n    error?: boolean;\n    errorColor?: string;\n    focused?: boolean;\n    fontSize?: number;\n    hasActiveOutline?: boolean;\n    label?: string;\n    labelLayout: { measured: boolean; width: number; height: number };\n    labelScale: number;\n    labelTranslateX: number;\n    labelTranslateY: number;\n    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;\n    paddingOffset?: { paddingLeft: number; paddingRight: number };\n    placeholder?: string;\n    placeholderColor?: string;\n    placeholderOpacity: number | Animated.AnimatedInterpolation;\n    topPosition: number;\n    value?: string;\n}\n\ntype InputLabelStyles = NamedStylesStringUnion<'background' | 'backgroundText' | 'placeholder'>;\n\nconst useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {\n    return {\n        background: {\n            position: 'absolute',\n            top: 6,\n            left: 10,\n            bottom: 0,\n            right: 0,\n            width: 8,\n            height: 4,\n        },\n        backgroundText: {\n            position: 'absolute',\n            left: 18,\n            paddingHorizontal: 0,\n            color: 'transparent',\n        },\n        placeholder: {\n            position: 'absolute',\n            left: 0,\n            paddingHorizontal: inputPaddingHorizontal,\n        },\n    };\n};\n\nconst InputLabel = (props: LabelProps) => {\n    const {\n        activeColor,\n        animatedError,\n        animatedLabel,\n        error = false,\n        errorColor,\n        focused,\n        fontSize,\n        hasActiveOutline,\n        label,\n        labelLayout,\n        labelScale,\n        labelTranslateX,\n        labelTranslateY,\n        onLayoutAnimatedText,\n        paddingOffset,\n        placeholderColor,\n        placeholderOpacity,\n        topPosition,\n        value,\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const paperStyles = usePaperStyles();\n\n    const backgroundStyle = {\n        backgroundColor: paperStyles?.backgroundColor ?? theme.palette.background.default,\n    };\n\n    const hasFocus = hasActiveOutline || value;\n    const opacity = animatedLabel.interpolate({\n        inputRange: [0, 1],\n        outputRange: [hasFocus ? 1 : 0, 0],\n    });\n\n    const labelTranslationX = {\n        transform: [\n            {\n                translateX: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelTranslateX, 0 || 0],\n                }),\n            },\n        ],\n    };\n\n    const labelStyle = {\n        fontSize,\n        transform: [\n            {\n                translateX: animatedError.interpolate({\n                    inputRange: [0, 0.5, 1],\n                    outputRange: [0, value && error ? 4 : 0, 0],\n                }),\n            },\n            {\n                translateY: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelTranslateY, 0],\n                }),\n            },\n            {\n                scale: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelScale, 1],\n                }),\n            },\n        ],\n    };\n\n    return (label ? (\n        <Animated.View\n            pointerEvents={'none'}\n            style={[\n                StyleSheet.absoluteFill,\n                {\n                    opacity: value || focused ? (labelLayout.measured ? 1 : 0) : 1,\n                },\n                labelTranslationX,\n            ]}\n        >\n            {[\n                <Animated.View\n                    key={'labelBackground-view'}\n                    pointerEvents={'none'}\n                    style={[\n                        styles.background,\n                        backgroundStyle,\n                        {\n                            opacity,\n                            transform: [\n                                {\n                                    translateX: animatedLabel.interpolate({\n                                        inputRange: [0, 1],\n                                        outputRange: [-labelTranslateX, 0],\n                                    }),\n                                },\n                            ],\n                        },\n                    ]}\n                />,\n                <Animated.Text\n                    key={'labelBackground-text'}\n                    style={[\n                        styles.placeholder,\n                        styles.backgroundText,\n                        backgroundStyle,\n                        labelStyle,\n                        {\n                            top: topPosition + 1,\n                            opacity,\n                            transform: [\n                                ...labelStyle.transform,\n                                {\n                                    scaleY: animatedLabel.interpolate({\n                                        inputRange: [0, 1],\n                                        outputRange: [0.2, 1],\n                                    }),\n                                },\n                            ],\n                        },\n                    ]}\n                    numberOfLines={1}\n                >\n                    {label}\n                </Animated.Text>,\n            ]}\n            <Animated.Text\n                onLayout={onLayoutAnimatedText}\n                style={[\n                    styles.placeholder,\n                    labelStyle,\n                    paddingOffset,\n                    {\n                        textAlign: 'left',\n                        top: topPosition,\n                        color: error && errorColor ? errorColor : activeColor,\n                        opacity: animatedLabel.interpolate({\n                            inputRange: [0, 1],\n                            outputRange: [hasActiveOutline ? 1 : 0, 0],\n                        }),\n                    },\n                ]}\n                numberOfLines={1}\n            >\n                {label}\n            </Animated.Text>\n            <Animated.Text\n                style={[\n                    styles.placeholder,\n                    labelStyle,\n                    paddingOffset,\n                    {\n                        textAlign: 'left',\n                        top: topPosition,\n                        color: error && errorColor ? errorColor : placeholderColor,\n                        opacity: placeholderOpacity,\n                    },\n                ]}\n                numberOfLines={1}\n            >\n                {label}\n            </Animated.Text>\n        </Animated.View>\n    ) : null);\n};\n\nexport default InputLabel;\n"]}

package/build/commonjs/TextField/OutlinedTextField.js

@@ -29,7 +29,6 @@ const useStyles = function () {
       left: 0,
       right: 0,
       bottom: 0,
-      backgroundColor: theme.palette.background.default,
       borderRadius: theme.shape.roundness
     },
     input: {

package/build/commonjs/TextField/OutlinedTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["OutlinedTextField.tsx"],"names":["useStyles","theme","outline","position","left","right","bottom","backgroundColor","palette","background","default","borderRadius","shape","roundness","input","flexGrow","paddingHorizontal","inputPaddingHorizontal","textAlignVertical","textAlign","zIndex","textField","iconContainer","width","height","justifyContent","alignItems","OutlinedTextField","React","forwardRef","props","ref","animatedError","animatedLabel","disabled","error","focused","forceFocus","icon","keyboardType","label","labelLayout","onBlur","onChangeText","onFocus","onIconPress","onLayoutAnimatedText","onSubmitEditing","placeholder","secureTextEntry","style","value","styles","hasActiveOutline","inputTextColor","tertiary","main","primary","activeColor","warning","accent","placeholderColor","text","hint","outlineColor","border","errorColor","typography","body2","fontSize","unitless","labelScale","labelFontSize","labelWidth","labelHeight","labelHalfWidth","labelHalfHeight","labelTranslateX","minInputHeight","defaultHeight","labelPaddingTop","inputHeight","topPosition","Math","floor","iconTopPosition","iconSize","labelYOffset","labelTranslateY","placeholderOpacity","interpolate","inputRange","outputRange","measured","labelProps","outlineStyle","borderWidth","borderColor","top","textInputStyle","color","marginRight","paddingRight","Platform","OS","outlineWidth","containerStyle","paddingTop","minHeight","iconContainerStyle","onIconButtonPress"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, Platform, TextInput, View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport IconButton from '../IconButton';\nimport TextFieldProps from './TextFieldProps';\nimport InputLabel from './InputLabel';\nimport {\n    defaultHeight,\n    iconSize,\n    inputPaddingHorizontal,\n    labelFontSize,\n    labelPaddingTop,\n    labelYOffset,\n} from './utils';\n\ninterface OutlinedTextFieldProps extends TextFieldProps {\n    animatedError: Animated.Value;\n    animatedLabel: Animated.Value;\n    focused: boolean;\n    forceFocus: () => void;\n    labelLayout: { measured: boolean; width: number; height: number };\n    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;\n}\n\ntype OutlinedTextFieldStyles = NamedStylesStringUnion<'outline' | 'input' | 'iconContainer'>;\n\nconst useStyles: UseStyles<OutlinedTextFieldStyles> = function (): OutlinedTextFieldStyles {\n    const theme = useTheme();\n\n    return {\n        outline: {\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: 0,\n            backgroundColor: theme.palette.background.default,\n            borderRadius: theme.shape.roundness,\n        },\n        input: {\n            flexGrow: 1,\n            paddingHorizontal: inputPaddingHorizontal,\n            textAlignVertical: 'center',\n            textAlign: 'left',\n            zIndex: theme.zIndex.textField,\n        },\n        iconContainer: {\n            position: 'absolute',\n            width: 24,\n            height: 24,\n            justifyContent: 'center',\n            alignItems: 'center',\n            right: 12,\n        },\n    };\n};\n\nconst OutlinedTextField = React.forwardRef<TextInput, OutlinedTextFieldProps>(function OutlinedTextField(props, ref) {\n    const {\n        animatedError,\n        animatedLabel,\n        disabled,\n        error,\n        focused,\n        forceFocus,\n        icon,\n        keyboardType,\n        label,\n        labelLayout,\n        onBlur,\n        onChangeText,\n        onFocus,\n        onIconPress,\n        onLayoutAnimatedText,\n        onSubmitEditing,\n        placeholder,\n        secureTextEntry,\n        style,\n        value,\n    } = props;\n\n    const theme = useTheme();\n    const styles = useStyles();\n\n    const hasActiveOutline = focused || error;\n    const inputTextColor = disabled ? theme.palette.tertiary.main : theme.palette.primary.main;\n    const activeColor = error\n        ? theme.palette.warning.main\n        : disabled\n            ? theme.palette.tertiary.main\n            : theme.palette.accent.main;\n    const placeholderColor = disabled ? theme.palette.tertiary.main : theme.palette.text.hint;\n    const outlineColor = disabled ? theme.palette.border : theme.palette.border;\n    const errorColor = disabled ? theme.palette.tertiary.main : theme.palette.warning.main;\n\n    const typography = theme.typography.body2;\n    const fontSize = typography.fontSize.unitless;\n\n    const labelScale = labelFontSize / fontSize;\n    const labelWidth = labelLayout.width;\n    const labelHeight = labelLayout.height;\n    const labelHalfWidth = labelWidth / 2;\n    const labelHalfHeight = labelHeight / 2;\n\n    const labelTranslateX = -1 * (labelHalfWidth - (labelScale * labelWidth) / 2 - (fontSize - labelFontSize) * labelScale);\n    const minInputHeight = defaultHeight - labelPaddingTop;\n    const inputHeight = labelHeight < minInputHeight ? minInputHeight : labelHeight;\n    const topPosition = Math.floor(((inputHeight > 0 ? inputHeight : 0) - labelHeight) / 2 + labelPaddingTop);\n    const iconTopPosition = (defaultHeight - (label ? 0 : labelPaddingTop) - iconSize - (label ? labelYOffset : 0)) / 2;\n    const labelTranslateY = -labelHalfHeight - (topPosition + labelYOffset);\n\n    const placeholderOpacity = hasActiveOutline\n        ? animatedLabel.interpolate({\n            inputRange: [0, 1],\n            outputRange: [hasActiveOutline ? 0 : 1, 1],\n        })\n        : labelLayout.measured ? 1 : 0;\n\n    const labelProps = {\n        activeColor,\n        error,\n        errorColor,\n        fontSize,\n        hasActiveOutline,\n        label,\n        labelScale,\n        labelTranslateX,\n        labelTranslateY,\n        onLayoutAnimatedText,\n        placeholderColor,\n        placeholderOpacity,\n        topPosition,\n    };\n\n    const outlineStyle = css([\n        styles.outline,\n        {\n            borderWidth: hasActiveOutline ? 2 : 1,\n            borderColor: error ? errorColor : (hasActiveOutline ? activeColor : outlineColor),\n            top: label ? 6 : 0,\n        },\n    ]);\n\n    const textInputStyle = css([\n        styles.input,\n        {\n            fontSize,\n            color: inputTextColor,\n            height: inputHeight,\n        },\n        icon && {\n            marginRight: iconSize + 20,\n            paddingRight: 0,\n        },\n        Platform.OS === 'web' && {\n            //@ts-ignore\n            outlineWidth: 0,\n        },\n    ]);\n\n    const containerStyle = css([\n        {\n            paddingTop: label ? labelPaddingTop : 0,\n            minHeight: label ? defaultHeight : defaultHeight + labelYOffset,\n        },\n    ]);\n\n    const iconContainerStyle = css([\n        styles.iconContainer,\n        { top: iconTopPosition },\n    ]);\n\n    const onIconButtonPress = () => {\n        forceFocus();\n        onIconPress?.();\n    };\n\n    return (\n        <View style={style}>\n            <View\n                pointerEvents={'none'}\n                style={outlineStyle}\n            />\n            <View style={containerStyle}>\n                {label ? (\n                    <InputLabel\n                        animatedLabel={animatedLabel}\n                        animatedError={animatedError}\n                        focused={focused}\n                        labelLayout={labelLayout}\n                        placeholder={placeholder}\n                        value={value}\n                        {...labelProps}\n                    />\n                ) : null}\n                <TextInput\n                    autoCapitalize={'none'}\n                    autoCorrect={false}\n                    disableFullscreenUI={true}\n                    ref={ref}\n                    onChangeText={onChangeText}\n                    placeholder={placeholder}\n                    placeholderTextColor={placeholderColor}\n                    editable={!disabled}\n                    selectionColor={activeColor}\n                    onFocus={onFocus}\n                    onBlur={onBlur}\n                    onSubmitEditing={onSubmitEditing}\n                    keyboardType={keyboardType}\n                    secureTextEntry={secureTextEntry}\n                    underlineColorAndroid={'transparent'}\n                    style={textInputStyle}\n                    value={value}\n                />\n            </View>\n            {icon ? (\n                <View style={iconContainerStyle}>\n                    <IconButton\n                        children={icon}\n                        onPress={onIconButtonPress}\n                    />\n                </View>\n            ) : null}\n        </View>\n    );\n});\n\nexport default OutlinedTextField;\n"]}
+{"version":3,"sources":["OutlinedTextField.tsx"],"names":["useStyles","theme","outline","position","left","right","bottom","borderRadius","shape","roundness","input","flexGrow","paddingHorizontal","inputPaddingHorizontal","textAlignVertical","textAlign","zIndex","textField","iconContainer","width","height","justifyContent","alignItems","OutlinedTextField","React","forwardRef","props","ref","animatedError","animatedLabel","disabled","error","focused","forceFocus","icon","keyboardType","label","labelLayout","onBlur","onChangeText","onFocus","onIconPress","onLayoutAnimatedText","onSubmitEditing","placeholder","secureTextEntry","style","value","styles","hasActiveOutline","inputTextColor","palette","tertiary","main","primary","activeColor","warning","accent","placeholderColor","text","hint","outlineColor","border","errorColor","typography","body2","fontSize","unitless","labelScale","labelFontSize","labelWidth","labelHeight","labelHalfWidth","labelHalfHeight","labelTranslateX","minInputHeight","defaultHeight","labelPaddingTop","inputHeight","topPosition","Math","floor","iconTopPosition","iconSize","labelYOffset","labelTranslateY","placeholderOpacity","interpolate","inputRange","outputRange","measured","labelProps","outlineStyle","borderWidth","borderColor","top","textInputStyle","color","marginRight","paddingRight","Platform","OS","outlineWidth","containerStyle","paddingTop","minHeight","iconContainerStyle","onIconButtonPress"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, Platform, TextInput, View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport IconButton from '../IconButton';\nimport TextFieldProps from './TextFieldProps';\nimport InputLabel from './InputLabel';\nimport {\n    defaultHeight,\n    iconSize,\n    inputPaddingHorizontal,\n    labelFontSize,\n    labelPaddingTop,\n    labelYOffset,\n} from './utils';\n\ninterface OutlinedTextFieldProps extends TextFieldProps {\n    animatedError: Animated.Value;\n    animatedLabel: Animated.Value;\n    focused: boolean;\n    forceFocus: () => void;\n    labelLayout: { measured: boolean; width: number; height: number };\n    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;\n}\n\ntype OutlinedTextFieldStyles = NamedStylesStringUnion<'outline' | 'input' | 'iconContainer'>;\n\nconst useStyles: UseStyles<OutlinedTextFieldStyles> = function (): OutlinedTextFieldStyles {\n    const theme = useTheme();\n\n    return {\n        outline: {\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: 0,\n            borderRadius: theme.shape.roundness,\n        },\n        input: {\n            flexGrow: 1,\n            paddingHorizontal: inputPaddingHorizontal,\n            textAlignVertical: 'center',\n            textAlign: 'left',\n            zIndex: theme.zIndex.textField,\n        },\n        iconContainer: {\n            position: 'absolute',\n            width: 24,\n            height: 24,\n            justifyContent: 'center',\n            alignItems: 'center',\n            right: 12,\n        },\n    };\n};\n\nconst OutlinedTextField = React.forwardRef<TextInput, OutlinedTextFieldProps>(function OutlinedTextField(props, ref) {\n    const {\n        animatedError,\n        animatedLabel,\n        disabled,\n        error,\n        focused,\n        forceFocus,\n        icon,\n        keyboardType,\n        label,\n        labelLayout,\n        onBlur,\n        onChangeText,\n        onFocus,\n        onIconPress,\n        onLayoutAnimatedText,\n        onSubmitEditing,\n        placeholder,\n        secureTextEntry,\n        style,\n        value,\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const hasActiveOutline = focused || error;\n    const inputTextColor = disabled ? theme.palette.tertiary.main : theme.palette.primary.main;\n    const activeColor = error\n        ? theme.palette.warning.main\n        : disabled\n            ? theme.palette.tertiary.main\n            : theme.palette.accent.main;\n    const placeholderColor = disabled ? theme.palette.tertiary.main : theme.palette.text.hint;\n    const outlineColor = disabled ? theme.palette.border : theme.palette.border;\n    const errorColor = disabled ? theme.palette.tertiary.main : theme.palette.warning.main;\n\n    const typography = theme.typography.body2;\n    const fontSize = typography.fontSize.unitless;\n\n    const labelScale = labelFontSize / fontSize;\n    const labelWidth = labelLayout.width;\n    const labelHeight = labelLayout.height;\n    const labelHalfWidth = labelWidth / 2;\n    const labelHalfHeight = labelHeight / 2;\n\n    const labelTranslateX = -1 * (labelHalfWidth - (labelScale * labelWidth) / 2 - (fontSize - labelFontSize) * labelScale);\n    const minInputHeight = defaultHeight - labelPaddingTop;\n    const inputHeight = labelHeight < minInputHeight ? minInputHeight : labelHeight;\n    const topPosition = Math.floor(((inputHeight > 0 ? inputHeight : 0) - labelHeight) / 2 + labelPaddingTop);\n    const iconTopPosition = (defaultHeight - (label ? 0 : labelPaddingTop) - iconSize - (label ? labelYOffset : 0)) / 2;\n    const labelTranslateY = -labelHalfHeight - (topPosition + labelYOffset);\n\n    const placeholderOpacity = hasActiveOutline\n        ? animatedLabel.interpolate({\n            inputRange: [0, 1],\n            outputRange: [hasActiveOutline ? 0 : 1, 1],\n        })\n        : labelLayout.measured ? 1 : 0;\n\n    const labelProps = {\n        activeColor,\n        error,\n        errorColor,\n        fontSize,\n        hasActiveOutline,\n        label,\n        labelScale,\n        labelTranslateX,\n        labelTranslateY,\n        onLayoutAnimatedText,\n        placeholderColor,\n        placeholderOpacity,\n        topPosition,\n    };\n\n    const outlineStyle = css([\n        styles.outline,\n        {\n            borderWidth: hasActiveOutline ? 2 : 1,\n            borderColor: error ? errorColor : (hasActiveOutline ? activeColor : outlineColor),\n            top: label ? 6 : 0,\n        },\n    ]);\n\n    const textInputStyle = css([\n        styles.input,\n        {\n            fontSize,\n            color: inputTextColor,\n            height: inputHeight,\n        },\n        icon && {\n            marginRight: iconSize + 20,\n            paddingRight: 0,\n        },\n        Platform.OS === 'web' && {\n            //@ts-ignore\n            outlineWidth: 0,\n        },\n    ]);\n\n    const containerStyle = css([\n        {\n            paddingTop: label ? labelPaddingTop : 0,\n            minHeight: label ? defaultHeight : defaultHeight + labelYOffset,\n        },\n    ]);\n\n    const iconContainerStyle = css([\n        styles.iconContainer,\n        { top: iconTopPosition },\n    ]);\n\n    const onIconButtonPress = () => {\n        forceFocus();\n        onIconPress?.();\n    };\n\n    return (\n        <View style={style}>\n            <View\n                pointerEvents={'none'}\n                style={outlineStyle}\n            />\n            <View style={containerStyle}>\n                {label ? (\n                    <InputLabel\n                        animatedLabel={animatedLabel}\n                        animatedError={animatedError}\n                        focused={focused}\n                        labelLayout={labelLayout}\n                        placeholder={placeholder}\n                        value={value}\n                        {...labelProps}\n                    />\n                ) : null}\n                <TextInput\n                    autoCapitalize={'none'}\n                    autoCorrect={false}\n                    disableFullscreenUI={true}\n                    ref={ref}\n                    onChangeText={onChangeText}\n                    placeholder={placeholder}\n                    placeholderTextColor={placeholderColor}\n                    editable={!disabled}\n                    selectionColor={activeColor}\n                    onFocus={onFocus}\n                    onBlur={onBlur}\n                    onSubmitEditing={onSubmitEditing}\n                    keyboardType={keyboardType}\n                    secureTextEntry={secureTextEntry}\n                    underlineColorAndroid={'transparent'}\n                    style={textInputStyle}\n                    value={value}\n                />\n            </View>\n            {icon ? (\n                <View style={iconContainerStyle}>\n                    <IconButton\n                        children={icon}\n                        onPress={onIconButtonPress}\n                    />\n                </View>\n            ) : null}\n        </View>\n    );\n});\n\nexport default OutlinedTextField;\n"]}

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

@@ -13,14 +13,9 @@ var _utils = require("../../utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _default = (0, _utils.createSvgIcon)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M3 7C3 4.79086 4.79086 3 7 3H13C15.2091 3 17 4.79086 17 7V13C17 15.2091 15.2091 17 13 17H7C4.79086 17 3 15.2091 3 13V7Z"
-}), /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
-  d: "M14.8303 7.53033L8.32856 14.0321L4.96967 10.6732L6.03033 9.61252L8.32856 11.9108L13.7697 6.46967L14.8303 7.53033Z",
-  fill: "#FFFFFF"
-})), 'CheckboxChecked');
+var _default = (0, _utils.createSvgIcon)( /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
+  d: "M7 3C4.79086 3 3 4.79086 3 7V13C3 15.2091 4.79086 17 7 17H13C15.2091 17 17 15.2091 17 13V7C17 4.79086 15.2091 3 13 3H7ZM8.8589 13.5018L8.32857 14.0321L7.79824 13.5018L4.96967 10.6732L6.03033 9.61252L8.32857 11.9108L13.7697 6.46967L14.8303 7.53033L8.8589 13.5018Z"
+}), 'CheckboxChecked');
 
 exports.default = _default;
 //# sourceMappingURL=CheckboxChecked.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["CheckboxChecked.tsx"],"names":[],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,wCACX,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,oBAAD;AACI,EAAA,QAAQ,EAAC,SADb;AAEI,EAAA,QAAQ,EAAC,SAFb;AAGI,EAAA,CAAC,EAAC;AAHN,EADJ,eAMI,6BAAC,oBAAD;AACI,EAAA,CAAC,EAAC,mHADN;AAEI,EAAA,IAAI,EAAC;AAFT,EANJ,CADW,EAYX,iBAZW,C","sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n    <React.Fragment>\n        <Path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M3 7C3 4.79086 4.79086 3 7 3H13C15.2091 3 17 4.79086 17 7V13C17 15.2091 15.2091 17 13 17H7C4.79086 17 3 15.2091 3 13V7Z\"\n        />\n        <Path\n            d=\"M14.8303 7.53033L8.32856 14.0321L4.96967 10.6732L6.03033 9.61252L8.32856 11.9108L13.7697 6.46967L14.8303 7.53033Z\"\n            fill=\"#FFFFFF\"\n        />\n    </React.Fragment>,\n    'CheckboxChecked',\n);\n"]}
+{"version":3,"sources":["CheckboxChecked.tsx"],"names":[],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,wCACX,6BAAC,oBAAD;AACI,EAAA,CAAC,EAAC;AADN,EADW,EAIX,iBAJW,C","sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n    <Path\n        d=\"M7 3C4.79086 3 3 4.79086 3 7V13C3 15.2091 4.79086 17 7 17H13C15.2091 17 17 15.2091 17 13V7C17 4.79086 15.2091 3 13 3H7ZM8.8589 13.5018L8.32857 14.0321L7.79824 13.5018L4.96967 10.6732L6.03033 9.61252L8.32857 11.9108L13.7697 6.46967L14.8303 7.53033L8.8589 13.5018Z\"\n    />,\n    'CheckboxChecked',\n);\n"]}

package/build/module/AppBar/AppBar.js

@@ -12,15 +12,6 @@ const useStyles = function () {
       flexShrink: 0,
       width: '100%',
       zIndex: theme.zIndex.appBar
-    },
-    colorDefault: {
-      backgroundColor: theme.palette.background.default
-    },
-    colorPrimary: {
-      backgroundColor: theme.palette.primary.main
-    },
-    colorTransparent: {
-      backgroundColor: 'transparent'
     }
   };
 };
@@ -31,14 +22,18 @@ const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(props, ref) {
     style,
     ...otherProps
   } = props;
+  const theme = useTheme();
   const styles = useStyles();
-  const colorStyle = color === 'default' ? styles.colorDefault : color === 'primary' ? styles.colorPrimary : styles.colorTransparent;
-  const paperStyle = css([styles.root, colorStyle, style]);
+  const backgroundColor = color === 'default' ? theme.palette.background.default : color === 'paper' ? theme.palette.paper.default : color === 'primary' ? theme.palette.primary.main : 'transparent';
+  const paperStyle = css([styles.root, {
+    backgroundColor
+  }, style]);
   return /*#__PURE__*/React.createElement(Paper, _extends({
     ref: ref,
-    square: true,
+    colorValue: backgroundColor,
     elevation: 0,
-    style: paperStyle
+    style: paperStyle,
+    square: true
   }, otherProps));
 });
 export default AppBar;

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

@@ -1 +1 @@
-{"version":3,"sources":["AppBar.tsx"],"names":["React","Paper","css","useTheme","useStyles","theme","root","flexDirection","flexShrink","width","zIndex","appBar","colorDefault","backgroundColor","palette","background","default","colorPrimary","primary","main","colorTransparent","AppBar","forwardRef","props","ref","color","style","otherProps","styles","colorStyle","paperStyle"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,OAAOC,KAAP,MAAkB,UAAlB;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;AAWA,MAAMC,SAAkC,GAAG,YAA0B;AACjE,QAAMC,KAAK,GAAGF,QAAQ,EAAtB;AAEA,SAAO;AACHG,IAAAA,IAAI,EAAE;AACFC,MAAAA,aAAa,EAAE,QADb;AAEFC,MAAAA,UAAU,EAAE,CAFV;AAGFC,MAAAA,KAAK,EAAE,MAHL;AAIFC,MAAAA,MAAM,EAAEL,KAAK,CAACK,MAAN,CAAaC;AAJnB,KADH;AAOHC,IAAAA,YAAY,EAAE;AACVC,MAAAA,eAAe,EAAER,KAAK,CAACS,OAAN,CAAcC,UAAd,CAAyBC;AADhC,KAPX;AAUHC,IAAAA,YAAY,EAAE;AACVJ,MAAAA,eAAe,EAAER,KAAK,CAACS,OAAN,CAAcI,OAAd,CAAsBC;AAD7B,KAVX;AAaHC,IAAAA,gBAAgB,EAAE;AACdP,MAAAA,eAAe,EAAE;AADH;AAbf,GAAP;AAiBH,CApBD;;AAsBA,MAAMQ,MAAM,gBAAGrB,KAAK,CAACsB,UAAN,CAAoC,SAASD,MAAT,CAAgBE,KAAhB,EAAuBC,GAAvB,EAA4B;AAC3E,QAAM;AACFC,IAAAA,KAAK,GAAG,SADN;AAEFC,IAAAA,KAFE;AAGF,OAAGC;AAHD,MAIFJ,KAJJ;AAMA,QAAMK,MAAM,GAAGxB,SAAS,EAAxB;AAEA,QAAMyB,UAAU,GAAGJ,KAAK,KAAK,SAAV,GACbG,MAAM,CAAChB,YADM,GAEba,KAAK,KAAK,SAAV,GACIG,MAAM,CAACX,YADX,GAEIW,MAAM,CAACR,gBAJjB;AAMA,QAAMU,UAAU,GAAG5B,GAAG,CAAC,CACnB0B,MAAM,CAACtB,IADY,EAEnBuB,UAFmB,EAGnBH,KAHmB,CAAD,CAAtB;AAMA,sBACI,oBAAC,KAAD;AACI,IAAA,GAAG,EAAEF,GADT;AAEI,IAAA,MAAM,MAFV;AAGI,IAAA,SAAS,EAAE,CAHf;AAII,IAAA,KAAK,EAAEM;AAJX,KAKQH,UALR,EADJ;AASH,CA9Bc,CAAf;AAgCA,eAAeN,MAAf","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Paper from '../Paper';\nimport { css, useTheme } from '../styles';\nimport type AppBarProps from './AppBarProps';\n\ntype AppBarStyleKeys =\n    | 'root'\n    | 'colorDefault'\n    | 'colorPrimary'\n    | 'colorTransparent';\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        colorDefault: {\n            backgroundColor: theme.palette.background.default,\n        },\n        colorPrimary: {\n            backgroundColor: theme.palette.primary.main,\n        },\n        colorTransparent: {\n            backgroundColor: 'transparent',\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 styles = useStyles();\n\n    const colorStyle = color === 'default'\n        ? styles.colorDefault\n        : color === 'primary'\n            ? styles.colorPrimary\n            : styles.colorTransparent;\n\n    const paperStyle = css([\n        styles.root,\n        colorStyle,\n        style,\n    ]);\n\n    return (\n        <Paper\n            ref={ref}\n            square\n            elevation={0}\n            style={paperStyle}\n            {...otherProps}\n        />\n    );\n});\n\nexport default AppBar;\n"]}
+{"version":3,"sources":["AppBar.tsx"],"names":["React","Paper","css","useTheme","useStyles","theme","root","flexDirection","flexShrink","width","zIndex","appBar","AppBar","forwardRef","props","ref","color","style","otherProps","styles","backgroundColor","palette","background","default","paper","primary","main","paperStyle"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,OAAOC,KAAP,MAAkB,UAAlB;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;AAOA,MAAMC,SAAkC,GAAG,YAA0B;AACjE,QAAMC,KAAK,GAAGF,QAAQ,EAAtB;AAEA,SAAO;AACHG,IAAAA,IAAI,EAAE;AACFC,MAAAA,aAAa,EAAE,QADb;AAEFC,MAAAA,UAAU,EAAE,CAFV;AAGFC,MAAAA,KAAK,EAAE,MAHL;AAIFC,MAAAA,MAAM,EAAEL,KAAK,CAACK,MAAN,CAAaC;AAJnB;AADH,GAAP;AAQH,CAXD;;AAaA,MAAMC,MAAM,gBAAGZ,KAAK,CAACa,UAAN,CAAoC,SAASD,MAAT,CAAgBE,KAAhB,EAAuBC,GAAvB,EAA4B;AAC3E,QAAM;AACFC,IAAAA,KAAK,GAAG,SADN;AAEFC,IAAAA,KAFE;AAGF,OAAGC;AAHD,MAIFJ,KAJJ;AAMA,QAAMT,KAAK,GAAGF,QAAQ,EAAtB;AAEA,QAAMgB,MAAM,GAAGf,SAAS,EAAxB;AAEA,QAAMgB,eAAe,GAAGJ,KAAK,KAAK,SAAV,GAClBX,KAAK,CAACgB,OAAN,CAAcC,UAAd,CAAyBC,OADP,GAElBP,KAAK,KAAK,OAAV,GACIX,KAAK,CAACgB,OAAN,CAAcG,KAAd,CAAoBD,OADxB,GAEIP,KAAK,KAAK,SAAV,GACIX,KAAK,CAACgB,OAAN,CAAcI,OAAd,CAAsBC,IAD1B,GAEI,aANd;AAQA,QAAMC,UAAU,GAAGzB,GAAG,CAAC,CACnBiB,MAAM,CAACb,IADY,EAEnB;AAAEc,IAAAA;AAAF,GAFmB,EAGnBH,KAHmB,CAAD,CAAtB;AAMA,sBACI,oBAAC,KAAD;AACI,IAAA,GAAG,EAAEF,GADT;AAEI,IAAA,UAAU,EAAEK,eAFhB;AAGI,IAAA,SAAS,EAAE,CAHf;AAII,IAAA,KAAK,EAAEO,UAJX;AAKI,IAAA,MAAM,EAAE;AALZ,KAMQT,UANR,EADJ;AAUH,CAnCc,CAAf;AAqCA,eAAeN,MAAf","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Paper from '../Paper';\nimport { css, useTheme } from '../styles';\nimport type AppBarProps 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 backgroundColor = color === 'default'\n        ? theme.palette.background.default\n        : color === 'paper'\n            ? theme.palette.paper.default\n            : color === 'primary'\n                ? theme.palette.primary.main\n                : 'transparent';\n\n    const paperStyle = css([\n        styles.root,\n        { backgroundColor },\n        style,\n    ]);\n\n    return (\n        <Paper\n            ref={ref}\n            colorValue={backgroundColor}\n            elevation={0}\n            style={paperStyle}\n            square={true}\n            {...otherProps}\n        />\n    );\n});\n\nexport default AppBar;\n"]}

package/build/module/Paper/Paper.js

@@ -4,9 +4,11 @@ import React from 'react';
 import { View } from 'react-native';
 import { css, StyleSheet, useTheme } from '../styles';
 import { useElevationStyle } from '../hooks';
+import PaperStylesProvider from './PaperStylesProvider';
 const Paper = /*#__PURE__*/React.forwardRef(function Paper(props, ref) {
   const {
     color = 'default',
+    colorValue,
     elevation = 1,
     style: styleProp,
     square = false,
@@ -14,8 +16,9 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(props, ref) {
     ...otherProps
   } = props;
   const theme = useTheme();
+  const backgroundColor = colorValue !== null && colorValue !== void 0 ? colorValue : theme.palette.paper[color];
   const rootStyle = {
-    backgroundColor: theme.palette.paper[color]
+    backgroundColor
   };
   const roundedStyle = {
     borderRadius: theme.shape.roundness
@@ -27,10 +30,14 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(props, ref) {
     borderColor: theme.palette.divider
   };
   const style = css([rootStyle, variant === 'elevation' ? elevationStyle : outlinedStyle, !square ? roundedStyle : undefined, styleProp]);
-  return /*#__PURE__*/React.createElement(View, _extends({
+  return /*#__PURE__*/React.createElement(PaperStylesProvider, {
+    value: {
+      backgroundColor
+    }
+  }, /*#__PURE__*/React.createElement(View, _extends({
     ref: ref,
     style: style
-  }, otherProps));
+  }, otherProps)));
 });
 export default Paper;
 //# sourceMappingURL=Paper.js.map

package/build/module/Paper/Paper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Paper.tsx"],"names":["React","View","css","StyleSheet","useTheme","useElevationStyle","Paper","forwardRef","props","ref","color","elevation","style","styleProp","square","variant","otherProps","theme","rootStyle","backgroundColor","palette","paper","roundedStyle","borderRadius","shape","roundness","elevationStyle","outlinedStyle","borderWidth","hairlineWidth","borderStyle","borderColor","divider","undefined"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,GAAT,EAAcC,UAAd,EAA0BC,QAA1B,QAA0C,WAA1C;AACA,SAASC,iBAAT,QAAkC,UAAlC;AAGA,MAAMC,KAAK,gBAAGN,KAAK,CAACO,UAAN,CAAmC,SAASD,KAAT,CAAeE,KAAf,EAAsBC,GAAtB,EAA2B;AACxE,QAAM;AACFC,IAAAA,KAAK,GAAG,SADN;AAEFC,IAAAA,SAAS,GAAG,CAFV;AAGFC,IAAAA,KAAK,EAAEC,SAHL;AAIFC,IAAAA,MAAM,GAAG,KAJP;AAKFC,IAAAA,OAAO,GAAG,WALR;AAMF,OAAGC;AAND,MAOFR,KAPJ;AASA,QAAMS,KAAK,GAAGb,QAAQ,EAAtB;AAEA,QAAMc,SAAS,GAAG;AACdC,IAAAA,eAAe,EAAEF,KAAK,CAACG,OAAN,CAAcC,KAAd,CAAoBX,KAApB;AADH,GAAlB;AAIA,QAAMY,YAAY,GAAG;AACjBC,IAAAA,YAAY,EAAEN,KAAK,CAACO,KAAN,CAAYC;AADT,GAArB;AAIA,QAAMC,cAAc,GAAGrB,iBAAiB,CAACM,SAAD,CAAxC;AAEA,QAAMgB,aAAa,GAAG;AAClBC,IAAAA,WAAW,EAAEzB,UAAU,CAAC0B,aADN;AAElBC,IAAAA,WAAW,EAAE,OAFK;AAGlBC,IAAAA,WAAW,EAAEd,KAAK,CAACG,OAAN,CAAcY;AAHT,GAAtB;AAMA,QAAMpB,KAAK,GAAGV,GAAG,CAAC,CACdgB,SADc,EAEdH,OAAO,KAAK,WAAZ,GAA0BW,cAA1B,GAA2CC,aAF7B,EAGd,CAACb,MAAD,GAAUQ,YAAV,GAAyBW,SAHX,EAIdpB,SAJc,CAAD,CAAjB;AAOA,sBACI,oBAAC,IAAD;AACI,IAAA,GAAG,EAAEJ,GADT;AAEI,IAAA,KAAK,EAAEG;AAFX,KAGQI,UAHR,EADJ;AAOH,CA1Ca,CAAd;AA4CA,eAAeV,KAAf","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type PaperProps from './PaperProps';\n\nconst Paper = React.forwardRef<View, PaperProps>(function Paper(props, ref) {\n    const {\n        color = 'default',\n        elevation = 1,\n        style: styleProp,\n        square = false,\n        variant = 'elevation',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const rootStyle = {\n        backgroundColor: theme.palette.paper[color],\n    };\n\n    const roundedStyle = {\n        borderRadius: theme.shape.roundness,\n    };\n\n    const elevationStyle = useElevationStyle(elevation);\n\n    const outlinedStyle = {\n        borderWidth: StyleSheet.hairlineWidth,\n        borderStyle: 'solid',\n        borderColor: theme.palette.divider,\n    };\n\n    const style = css([\n        rootStyle,\n        variant === 'elevation' ? elevationStyle : outlinedStyle,\n        !square ? roundedStyle : undefined,\n        styleProp,\n    ]);\n\n    return (\n        <View\n            ref={ref}\n            style={style}\n            {...otherProps}\n        />\n    );\n});\n\nexport default Paper;\n"]}
+{"version":3,"sources":["Paper.tsx"],"names":["React","View","css","StyleSheet","useTheme","useElevationStyle","PaperStylesProvider","Paper","forwardRef","props","ref","color","colorValue","elevation","style","styleProp","square","variant","otherProps","theme","backgroundColor","palette","paper","rootStyle","roundedStyle","borderRadius","shape","roundness","elevationStyle","outlinedStyle","borderWidth","hairlineWidth","borderStyle","borderColor","divider","undefined"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,GAAT,EAAcC,UAAd,EAA0BC,QAA1B,QAA0C,WAA1C;AACA,SAASC,iBAAT,QAAkC,UAAlC;AAEA,OAAOC,mBAAP,MAAgC,uBAAhC;AAEA,MAAMC,KAAK,gBAAGP,KAAK,CAACQ,UAAN,CAAmC,SAASD,KAAT,CAAeE,KAAf,EAAsBC,GAAtB,EAA2B;AACxE,QAAM;AACFC,IAAAA,KAAK,GAAG,SADN;AAEFC,IAAAA,UAFE;AAGFC,IAAAA,SAAS,GAAG,CAHV;AAIFC,IAAAA,KAAK,EAAEC,SAJL;AAKFC,IAAAA,MAAM,GAAG,KALP;AAMFC,IAAAA,OAAO,GAAG,WANR;AAOF,OAAGC;AAPD,MAQFT,KARJ;AAUA,QAAMU,KAAK,GAAGf,QAAQ,EAAtB;AAEA,QAAMgB,eAAe,GAAGR,UAAH,aAAGA,UAAH,cAAGA,UAAH,GAAiBO,KAAK,CAACE,OAAN,CAAcC,KAAd,CAAoBX,KAApB,CAAtC;AAEA,QAAMY,SAAS,GAAG;AAAEH,IAAAA;AAAF,GAAlB;AAEA,QAAMI,YAAY,GAAG;AACjBC,IAAAA,YAAY,EAAEN,KAAK,CAACO,KAAN,CAAYC;AADT,GAArB;AAIA,QAAMC,cAAc,GAAGvB,iBAAiB,CAACQ,SAAD,CAAxC;AAEA,QAAMgB,aAAa,GAAG;AAClBC,IAAAA,WAAW,EAAE3B,UAAU,CAAC4B,aADN;AAElBC,IAAAA,WAAW,EAAE,OAFK;AAGlBC,IAAAA,WAAW,EAAEd,KAAK,CAACE,OAAN,CAAca;AAHT,GAAtB;AAMA,QAAMpB,KAAK,GAAGZ,GAAG,CAAC,CACdqB,SADc,EAEdN,OAAO,KAAK,WAAZ,GAA0BW,cAA1B,GAA2CC,aAF7B,EAGd,CAACb,MAAD,GAAUQ,YAAV,GAAyBW,SAHX,EAIdpB,SAJc,CAAD,CAAjB;AAOA,sBACI,oBAAC,mBAAD;AACI,IAAA,KAAK,EAAE;AAAEK,MAAAA;AAAF;AADX,kBAGI,oBAAC,IAAD;AACI,IAAA,GAAG,EAAEV,GADT;AAEI,IAAA,KAAK,EAAEI;AAFX,KAGQI,UAHR,EAHJ,CADJ;AAWH,CA/Ca,CAAd;AAiDA,eAAeX,KAAf","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type PaperProps from './PaperProps';\nimport PaperStylesProvider from './PaperStylesProvider';\n\nconst Paper = React.forwardRef<View, PaperProps>(function Paper(props, ref) {\n    const {\n        color = 'default',\n        colorValue,\n        elevation = 1,\n        style: styleProp,\n        square = false,\n        variant = 'elevation',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const backgroundColor = colorValue ?? theme.palette.paper[color];\n\n    const rootStyle = { backgroundColor };\n\n    const roundedStyle = {\n        borderRadius: theme.shape.roundness,\n    };\n\n    const elevationStyle = useElevationStyle(elevation);\n\n    const outlinedStyle = {\n        borderWidth: StyleSheet.hairlineWidth,\n        borderStyle: 'solid',\n        borderColor: theme.palette.divider,\n    };\n\n    const style = css([\n        rootStyle,\n        variant === 'elevation' ? elevationStyle : outlinedStyle,\n        !square ? roundedStyle : undefined,\n        styleProp,\n    ]);\n\n    return (\n        <PaperStylesProvider\n            value={{ backgroundColor }}\n        >\n            <View\n                ref={ref}\n                style={style}\n                {...otherProps}\n            />\n        </PaperStylesProvider>\n    );\n});\n\nexport default Paper;\n"]}

package/build/module/Paper/PaperStylesProvider.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+export const PaperStylesContext = /*#__PURE__*/createContext(null);
+export default PaperStylesContext.Provider;
+//# sourceMappingURL=PaperStylesProvider.js.map

package/build/module/Paper/PaperStylesProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PaperStylesProvider.tsx"],"names":["createContext","PaperStylesContext","Provider"],"mappings":"AAAA,SAASA,aAAT,QAA8B,OAA9B;AAMA,OAAO,MAAMC,kBAAkB,gBAAGD,aAAa,CAAqB,IAArB,CAAxC;AAEP,eAAeC,kBAAkB,CAACC,QAAlC","sourcesContent":["import { createContext } from 'react';\n\nexport type PaperStyles = {\n    backgroundColor: string;\n}\n\nexport const PaperStylesContext = createContext<PaperStyles | null>(null);\n\nexport default PaperStylesContext.Provider;\n"]}

package/build/module/Paper/usePaperStyles.js

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import { PaperStylesContext } from './PaperStylesProvider';
+export default function usePaperStyles() {
+  return useContext(PaperStylesContext);
+}
+;
+//# sourceMappingURL=usePaperStyles.js.map

package/build/module/Paper/usePaperStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePaperStyles.ts"],"names":["useContext","PaperStylesContext","usePaperStyles"],"mappings":"AAAA,SAASA,UAAT,QAA2B,OAA3B;AACA,SAASC,kBAAT,QAAmC,uBAAnC;AAEA,eAAe,SAASC,cAAT,GAA0B;AACrC,SAAOF,UAAU,CAACC,kBAAD,CAAjB;AACH;AAAA","sourcesContent":["import { useContext } from 'react';\nimport { PaperStylesContext } from './PaperStylesProvider';\n\nexport default function usePaperStyles() {\n    return useContext(PaperStylesContext);\n};\n"]}

package/build/module/TextField/InputLabel.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Animated, StyleSheet } from 'react-native';
 import { useTheme } from '../styles';
+import usePaperStyles from '../Paper/usePaperStyles';
 import { inputPaddingHorizontal } from './utils';
 
 const useStyles = function () {
-  const theme = useTheme();
   return {
     background: {
       position: 'absolute',
@@ -13,15 +13,13 @@ const useStyles = function () {
       bottom: 0,
       right: 0,
       width: 8,
-      height: 2,
-      backgroundColor: theme.palette.background.default
+      height: 4
     },
     backgroundText: {
       position: 'absolute',
       left: 18,
       paddingHorizontal: 0,
-      color: 'transparent',
-      backgroundColor: theme.palette.background.default
+      color: 'transparent'
     },
     placeholder: {
       position: 'absolute',
@@ -32,6 +30,8 @@ const useStyles = function () {
 };
 
 const InputLabel = props => {
+  var _paperStyles$backgrou;
+
   const {
     activeColor,
     animatedError,
@@ -53,7 +53,12 @@ const InputLabel = props => {
     topPosition,
     value
   } = props;
+  const theme = useTheme();
   const styles = useStyles();
+  const paperStyles = usePaperStyles();
+  const backgroundStyle = {
+    backgroundColor: (_paperStyles$backgrou = paperStyles === null || paperStyles === void 0 ? void 0 : paperStyles.backgroundColor) !== null && _paperStyles$backgrou !== void 0 ? _paperStyles$backgrou : theme.palette.background.default
+  };
   const hasFocus = hasActiveOutline || value;
   const opacity = animatedLabel.interpolate({
     inputRange: [0, 1],
@@ -94,7 +99,7 @@ const InputLabel = props => {
   }, [/*#__PURE__*/React.createElement(Animated.View, {
     key: 'labelBackground-view',
     pointerEvents: 'none',
-    style: [styles.background, {
+    style: [styles.background, backgroundStyle, {
       opacity,
       transform: [{
         translateX: animatedLabel.interpolate({
@@ -105,7 +110,7 @@ const InputLabel = props => {
     }]
   }), /*#__PURE__*/React.createElement(Animated.Text, {
     key: 'labelBackground-text',
-    style: [styles.placeholder, styles.backgroundText, labelStyle, {
+    style: [styles.placeholder, styles.backgroundText, backgroundStyle, labelStyle, {
       top: topPosition + 1,
       opacity,
       transform: [...labelStyle.transform, {

package/build/module/TextField/InputLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InputLabel.tsx"],"names":["React","Animated","StyleSheet","useTheme","inputPaddingHorizontal","useStyles","theme","background","position","top","left","bottom","right","width","height","backgroundColor","palette","default","backgroundText","paddingHorizontal","color","placeholder","InputLabel","props","activeColor","animatedError","animatedLabel","error","errorColor","focused","fontSize","hasActiveOutline","label","labelLayout","labelScale","labelTranslateX","labelTranslateY","onLayoutAnimatedText","paddingOffset","placeholderColor","placeholderOpacity","topPosition","value","styles","hasFocus","opacity","interpolate","inputRange","outputRange","labelTranslationX","transform","translateX","labelStyle","translateY","scale","absoluteFill","measured","scaleY","textAlign"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, StyleSheet } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { inputPaddingHorizontal } from './utils';\n\ninterface LabelProps {\n    activeColor: string;\n    animatedError: Animated.Value;\n    animatedLabel: Animated.Value;\n    error?: boolean;\n    errorColor?: string;\n    focused?: boolean;\n    fontSize?: number;\n    hasActiveOutline?: boolean;\n    label?: string;\n    labelLayout: { measured: boolean; width: number; height: number };\n    labelScale: number;\n    labelTranslateX: number;\n    labelTranslateY: number;\n    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;\n    paddingOffset?: { paddingLeft: number; paddingRight: number };\n    placeholder?: string;\n    placeholderColor?: string;\n    placeholderOpacity: number | Animated.AnimatedInterpolation;\n    topPosition: number;\n    value?: string;\n}\n\ntype InputLabelStyles = NamedStylesStringUnion<'background' | 'backgroundText' | 'placeholder'>;\n\nconst useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {\n    const theme = useTheme();\n\n    return {\n        background: {\n            position: 'absolute',\n            top: 6,\n            left: 10,\n            bottom: 0,\n            right: 0,\n            width: 8,\n            height: 2,\n            backgroundColor: theme.palette.background.default,\n        },\n        backgroundText: {\n            position: 'absolute',\n            left: 18,\n            paddingHorizontal: 0,\n            color: 'transparent',\n            backgroundColor: theme.palette.background.default,\n        },\n        placeholder: {\n            position: 'absolute',\n            left: 0,\n            paddingHorizontal: inputPaddingHorizontal,\n        },\n    };\n};\n\nconst InputLabel = (props: LabelProps) => {\n    const {\n        activeColor,\n        animatedError,\n        animatedLabel,\n        error = false,\n        errorColor,\n        focused,\n        fontSize,\n        hasActiveOutline,\n        label,\n        labelLayout,\n        labelScale,\n        labelTranslateX,\n        labelTranslateY,\n        onLayoutAnimatedText,\n        paddingOffset,\n        placeholderColor,\n        placeholderOpacity,\n        topPosition,\n        value,\n    } = props;\n\n    const styles = useStyles();\n\n    const hasFocus = hasActiveOutline || value;\n    const opacity = animatedLabel.interpolate({\n        inputRange: [0, 1],\n        outputRange: [hasFocus ? 1 : 0, 0],\n    });\n\n    const labelTranslationX = {\n        transform: [\n            {\n                translateX: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelTranslateX, 0 || 0],\n                }),\n            },\n        ],\n    };\n\n    const labelStyle = {\n        fontSize,\n        transform: [\n            {\n                translateX: animatedError.interpolate({\n                    inputRange: [0, 0.5, 1],\n                    outputRange: [0, value && error ? 4 : 0, 0],\n                }),\n            },\n            {\n                translateY: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelTranslateY, 0],\n                }),\n            },\n            {\n                scale: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelScale, 1],\n                }),\n            },\n        ],\n    };\n\n    return (label ? (\n        <Animated.View\n            pointerEvents={'none'}\n            style={[\n                StyleSheet.absoluteFill,\n                {\n                    opacity: value || focused ? (labelLayout.measured ? 1 : 0) : 1,\n                },\n                labelTranslationX,\n            ]}\n        >\n            {[\n                <Animated.View\n                    key={'labelBackground-view'}\n                    pointerEvents={'none'}\n                    style={[\n                        styles.background,\n                        {\n                            opacity,\n                            transform: [\n                                {\n                                    translateX: animatedLabel.interpolate({\n                                        inputRange: [0, 1],\n                                        outputRange: [-labelTranslateX, 0],\n                                    }),\n                                },\n                            ],\n                        },\n                    ]}\n                />,\n                <Animated.Text\n                    key={'labelBackground-text'}\n                    style={[\n                        styles.placeholder,\n                        styles.backgroundText,\n                        labelStyle,\n                        {\n                            top: topPosition + 1,\n                            opacity,\n                            transform: [\n                                ...labelStyle.transform,\n                                {\n                                    scaleY: animatedLabel.interpolate({\n                                        inputRange: [0, 1],\n                                        outputRange: [0.2, 1],\n                                    }),\n                                },\n                            ],\n                        },\n                    ]}\n                    numberOfLines={1}\n                >\n                    {label}\n                </Animated.Text>,\n            ]}\n            <Animated.Text\n                onLayout={onLayoutAnimatedText}\n                style={[\n                    styles.placeholder,\n                    labelStyle,\n                    paddingOffset,\n                    {\n                        textAlign: 'left',\n                        top: topPosition,\n                        color: error && errorColor ? errorColor : activeColor,\n                        opacity: animatedLabel.interpolate({\n                            inputRange: [0, 1],\n                            outputRange: [hasActiveOutline ? 1 : 0, 0],\n                        }),\n                    },\n                ]}\n                numberOfLines={1}\n            >\n                {label}\n            </Animated.Text>\n            <Animated.Text\n                style={[\n                    styles.placeholder,\n                    labelStyle,\n                    paddingOffset,\n                    {\n                        textAlign: 'left',\n                        top: topPosition,\n                        color: error && errorColor ? errorColor : placeholderColor,\n                        opacity: placeholderOpacity,\n                    },\n                ]}\n                numberOfLines={1}\n            >\n                {label}\n            </Animated.Text>\n        </Animated.View>\n    ) : null);\n};\n\nexport default InputLabel;\n"]}
+{"version":3,"sources":["InputLabel.tsx"],"names":["React","Animated","StyleSheet","useTheme","usePaperStyles","inputPaddingHorizontal","useStyles","background","position","top","left","bottom","right","width","height","backgroundText","paddingHorizontal","color","placeholder","InputLabel","props","activeColor","animatedError","animatedLabel","error","errorColor","focused","fontSize","hasActiveOutline","label","labelLayout","labelScale","labelTranslateX","labelTranslateY","onLayoutAnimatedText","paddingOffset","placeholderColor","placeholderOpacity","topPosition","value","theme","styles","paperStyles","backgroundStyle","backgroundColor","palette","default","hasFocus","opacity","interpolate","inputRange","outputRange","labelTranslationX","transform","translateX","labelStyle","translateY","scale","absoluteFill","measured","scaleY","textAlign"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, StyleSheet } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport usePaperStyles from '../Paper/usePaperStyles';\nimport { inputPaddingHorizontal } from './utils';\n\ninterface LabelProps {\n    activeColor: string;\n    animatedError: Animated.Value;\n    animatedLabel: Animated.Value;\n    error?: boolean;\n    errorColor?: string;\n    focused?: boolean;\n    fontSize?: number;\n    hasActiveOutline?: boolean;\n    label?: string;\n    labelLayout: { measured: boolean; width: number; height: number };\n    labelScale: number;\n    labelTranslateX: number;\n    labelTranslateY: number;\n    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;\n    paddingOffset?: { paddingLeft: number; paddingRight: number };\n    placeholder?: string;\n    placeholderColor?: string;\n    placeholderOpacity: number | Animated.AnimatedInterpolation;\n    topPosition: number;\n    value?: string;\n}\n\ntype InputLabelStyles = NamedStylesStringUnion<'background' | 'backgroundText' | 'placeholder'>;\n\nconst useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {\n    return {\n        background: {\n            position: 'absolute',\n            top: 6,\n            left: 10,\n            bottom: 0,\n            right: 0,\n            width: 8,\n            height: 4,\n        },\n        backgroundText: {\n            position: 'absolute',\n            left: 18,\n            paddingHorizontal: 0,\n            color: 'transparent',\n        },\n        placeholder: {\n            position: 'absolute',\n            left: 0,\n            paddingHorizontal: inputPaddingHorizontal,\n        },\n    };\n};\n\nconst InputLabel = (props: LabelProps) => {\n    const {\n        activeColor,\n        animatedError,\n        animatedLabel,\n        error = false,\n        errorColor,\n        focused,\n        fontSize,\n        hasActiveOutline,\n        label,\n        labelLayout,\n        labelScale,\n        labelTranslateX,\n        labelTranslateY,\n        onLayoutAnimatedText,\n        paddingOffset,\n        placeholderColor,\n        placeholderOpacity,\n        topPosition,\n        value,\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const paperStyles = usePaperStyles();\n\n    const backgroundStyle = {\n        backgroundColor: paperStyles?.backgroundColor ?? theme.palette.background.default,\n    };\n\n    const hasFocus = hasActiveOutline || value;\n    const opacity = animatedLabel.interpolate({\n        inputRange: [0, 1],\n        outputRange: [hasFocus ? 1 : 0, 0],\n    });\n\n    const labelTranslationX = {\n        transform: [\n            {\n                translateX: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelTranslateX, 0 || 0],\n                }),\n            },\n        ],\n    };\n\n    const labelStyle = {\n        fontSize,\n        transform: [\n            {\n                translateX: animatedError.interpolate({\n                    inputRange: [0, 0.5, 1],\n                    outputRange: [0, value && error ? 4 : 0, 0],\n                }),\n            },\n            {\n                translateY: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelTranslateY, 0],\n                }),\n            },\n            {\n                scale: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelScale, 1],\n                }),\n            },\n        ],\n    };\n\n    return (label ? (\n        <Animated.View\n            pointerEvents={'none'}\n            style={[\n                StyleSheet.absoluteFill,\n                {\n                    opacity: value || focused ? (labelLayout.measured ? 1 : 0) : 1,\n                },\n                labelTranslationX,\n            ]}\n        >\n            {[\n                <Animated.View\n                    key={'labelBackground-view'}\n                    pointerEvents={'none'}\n                    style={[\n                        styles.background,\n                        backgroundStyle,\n                        {\n                            opacity,\n                            transform: [\n                                {\n                                    translateX: animatedLabel.interpolate({\n                                        inputRange: [0, 1],\n                                        outputRange: [-labelTranslateX, 0],\n                                    }),\n                                },\n                            ],\n                        },\n                    ]}\n                />,\n                <Animated.Text\n                    key={'labelBackground-text'}\n                    style={[\n                        styles.placeholder,\n                        styles.backgroundText,\n                        backgroundStyle,\n                        labelStyle,\n                        {\n                            top: topPosition + 1,\n                            opacity,\n                            transform: [\n                                ...labelStyle.transform,\n                                {\n                                    scaleY: animatedLabel.interpolate({\n                                        inputRange: [0, 1],\n                                        outputRange: [0.2, 1],\n                                    }),\n                                },\n                            ],\n                        },\n                    ]}\n                    numberOfLines={1}\n                >\n                    {label}\n                </Animated.Text>,\n            ]}\n            <Animated.Text\n                onLayout={onLayoutAnimatedText}\n                style={[\n                    styles.placeholder,\n                    labelStyle,\n                    paddingOffset,\n                    {\n                        textAlign: 'left',\n                        top: topPosition,\n                        color: error && errorColor ? errorColor : activeColor,\n                        opacity: animatedLabel.interpolate({\n                            inputRange: [0, 1],\n                            outputRange: [hasActiveOutline ? 1 : 0, 0],\n                        }),\n                    },\n                ]}\n                numberOfLines={1}\n            >\n                {label}\n            </Animated.Text>\n            <Animated.Text\n                style={[\n                    styles.placeholder,\n                    labelStyle,\n                    paddingOffset,\n                    {\n                        textAlign: 'left',\n                        top: topPosition,\n                        color: error && errorColor ? errorColor : placeholderColor,\n                        opacity: placeholderOpacity,\n                    },\n                ]}\n                numberOfLines={1}\n            >\n                {label}\n            </Animated.Text>\n        </Animated.View>\n    ) : null);\n};\n\nexport default InputLabel;\n"]}

package/build/module/TextField/OutlinedTextField.js

@@ -15,7 +15,6 @@ const useStyles = function () {
       left: 0,
       right: 0,
       bottom: 0,
-      backgroundColor: theme.palette.background.default,
       borderRadius: theme.shape.roundness
     },
     input: {

package/build/module/TextField/OutlinedTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["OutlinedTextField.tsx"],"names":["React","Platform","TextInput","View","css","useTheme","IconButton","InputLabel","defaultHeight","iconSize","inputPaddingHorizontal","labelFontSize","labelPaddingTop","labelYOffset","useStyles","theme","outline","position","left","right","bottom","backgroundColor","palette","background","default","borderRadius","shape","roundness","input","flexGrow","paddingHorizontal","textAlignVertical","textAlign","zIndex","textField","iconContainer","width","height","justifyContent","alignItems","OutlinedTextField","forwardRef","props","ref","animatedError","animatedLabel","disabled","error","focused","forceFocus","icon","keyboardType","label","labelLayout","onBlur","onChangeText","onFocus","onIconPress","onLayoutAnimatedText","onSubmitEditing","placeholder","secureTextEntry","style","value","styles","hasActiveOutline","inputTextColor","tertiary","main","primary","activeColor","warning","accent","placeholderColor","text","hint","outlineColor","border","errorColor","typography","body2","fontSize","unitless","labelScale","labelWidth","labelHeight","labelHalfWidth","labelHalfHeight","labelTranslateX","minInputHeight","inputHeight","topPosition","Math","floor","iconTopPosition","labelTranslateY","placeholderOpacity","interpolate","inputRange","outputRange","measured","labelProps","outlineStyle","borderWidth","borderColor","top","textInputStyle","color","marginRight","paddingRight","OS","outlineWidth","containerStyle","paddingTop","minHeight","iconContainerStyle","onIconButtonPress"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, Platform, TextInput, View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport IconButton from '../IconButton';\nimport TextFieldProps from './TextFieldProps';\nimport InputLabel from './InputLabel';\nimport {\n    defaultHeight,\n    iconSize,\n    inputPaddingHorizontal,\n    labelFontSize,\n    labelPaddingTop,\n    labelYOffset,\n} from './utils';\n\ninterface OutlinedTextFieldProps extends TextFieldProps {\n    animatedError: Animated.Value;\n    animatedLabel: Animated.Value;\n    focused: boolean;\n    forceFocus: () => void;\n    labelLayout: { measured: boolean; width: number; height: number };\n    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;\n}\n\ntype OutlinedTextFieldStyles = NamedStylesStringUnion<'outline' | 'input' | 'iconContainer'>;\n\nconst useStyles: UseStyles<OutlinedTextFieldStyles> = function (): OutlinedTextFieldStyles {\n    const theme = useTheme();\n\n    return {\n        outline: {\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: 0,\n            backgroundColor: theme.palette.background.default,\n            borderRadius: theme.shape.roundness,\n        },\n        input: {\n            flexGrow: 1,\n            paddingHorizontal: inputPaddingHorizontal,\n            textAlignVertical: 'center',\n            textAlign: 'left',\n            zIndex: theme.zIndex.textField,\n        },\n        iconContainer: {\n            position: 'absolute',\n            width: 24,\n            height: 24,\n            justifyContent: 'center',\n            alignItems: 'center',\n            right: 12,\n        },\n    };\n};\n\nconst OutlinedTextField = React.forwardRef<TextInput, OutlinedTextFieldProps>(function OutlinedTextField(props, ref) {\n    const {\n        animatedError,\n        animatedLabel,\n        disabled,\n        error,\n        focused,\n        forceFocus,\n        icon,\n        keyboardType,\n        label,\n        labelLayout,\n        onBlur,\n        onChangeText,\n        onFocus,\n        onIconPress,\n        onLayoutAnimatedText,\n        onSubmitEditing,\n        placeholder,\n        secureTextEntry,\n        style,\n        value,\n    } = props;\n\n    const theme = useTheme();\n    const styles = useStyles();\n\n    const hasActiveOutline = focused || error;\n    const inputTextColor = disabled ? theme.palette.tertiary.main : theme.palette.primary.main;\n    const activeColor = error\n        ? theme.palette.warning.main\n        : disabled\n            ? theme.palette.tertiary.main\n            : theme.palette.accent.main;\n    const placeholderColor = disabled ? theme.palette.tertiary.main : theme.palette.text.hint;\n    const outlineColor = disabled ? theme.palette.border : theme.palette.border;\n    const errorColor = disabled ? theme.palette.tertiary.main : theme.palette.warning.main;\n\n    const typography = theme.typography.body2;\n    const fontSize = typography.fontSize.unitless;\n\n    const labelScale = labelFontSize / fontSize;\n    const labelWidth = labelLayout.width;\n    const labelHeight = labelLayout.height;\n    const labelHalfWidth = labelWidth / 2;\n    const labelHalfHeight = labelHeight / 2;\n\n    const labelTranslateX = -1 * (labelHalfWidth - (labelScale * labelWidth) / 2 - (fontSize - labelFontSize) * labelScale);\n    const minInputHeight = defaultHeight - labelPaddingTop;\n    const inputHeight = labelHeight < minInputHeight ? minInputHeight : labelHeight;\n    const topPosition = Math.floor(((inputHeight > 0 ? inputHeight : 0) - labelHeight) / 2 + labelPaddingTop);\n    const iconTopPosition = (defaultHeight - (label ? 0 : labelPaddingTop) - iconSize - (label ? labelYOffset : 0)) / 2;\n    const labelTranslateY = -labelHalfHeight - (topPosition + labelYOffset);\n\n    const placeholderOpacity = hasActiveOutline\n        ? animatedLabel.interpolate({\n            inputRange: [0, 1],\n            outputRange: [hasActiveOutline ? 0 : 1, 1],\n        })\n        : labelLayout.measured ? 1 : 0;\n\n    const labelProps = {\n        activeColor,\n        error,\n        errorColor,\n        fontSize,\n        hasActiveOutline,\n        label,\n        labelScale,\n        labelTranslateX,\n        labelTranslateY,\n        onLayoutAnimatedText,\n        placeholderColor,\n        placeholderOpacity,\n        topPosition,\n    };\n\n    const outlineStyle = css([\n        styles.outline,\n        {\n            borderWidth: hasActiveOutline ? 2 : 1,\n            borderColor: error ? errorColor : (hasActiveOutline ? activeColor : outlineColor),\n            top: label ? 6 : 0,\n        },\n    ]);\n\n    const textInputStyle = css([\n        styles.input,\n        {\n            fontSize,\n            color: inputTextColor,\n            height: inputHeight,\n        },\n        icon && {\n            marginRight: iconSize + 20,\n            paddingRight: 0,\n        },\n        Platform.OS === 'web' && {\n            //@ts-ignore\n            outlineWidth: 0,\n        },\n    ]);\n\n    const containerStyle = css([\n        {\n            paddingTop: label ? labelPaddingTop : 0,\n            minHeight: label ? defaultHeight : defaultHeight + labelYOffset,\n        },\n    ]);\n\n    const iconContainerStyle = css([\n        styles.iconContainer,\n        { top: iconTopPosition },\n    ]);\n\n    const onIconButtonPress = () => {\n        forceFocus();\n        onIconPress?.();\n    };\n\n    return (\n        <View style={style}>\n            <View\n                pointerEvents={'none'}\n                style={outlineStyle}\n            />\n            <View style={containerStyle}>\n                {label ? (\n                    <InputLabel\n                        animatedLabel={animatedLabel}\n                        animatedError={animatedError}\n                        focused={focused}\n                        labelLayout={labelLayout}\n                        placeholder={placeholder}\n                        value={value}\n                        {...labelProps}\n                    />\n                ) : null}\n                <TextInput\n                    autoCapitalize={'none'}\n                    autoCorrect={false}\n                    disableFullscreenUI={true}\n                    ref={ref}\n                    onChangeText={onChangeText}\n                    placeholder={placeholder}\n                    placeholderTextColor={placeholderColor}\n                    editable={!disabled}\n                    selectionColor={activeColor}\n                    onFocus={onFocus}\n                    onBlur={onBlur}\n                    onSubmitEditing={onSubmitEditing}\n                    keyboardType={keyboardType}\n                    secureTextEntry={secureTextEntry}\n                    underlineColorAndroid={'transparent'}\n                    style={textInputStyle}\n                    value={value}\n                />\n            </View>\n            {icon ? (\n                <View style={iconContainerStyle}>\n                    <IconButton\n                        children={icon}\n                        onPress={onIconButtonPress}\n                    />\n                </View>\n            ) : null}\n        </View>\n    );\n});\n\nexport default OutlinedTextField;\n"]}
+{"version":3,"sources":["OutlinedTextField.tsx"],"names":["React","Platform","TextInput","View","css","useTheme","IconButton","InputLabel","defaultHeight","iconSize","inputPaddingHorizontal","labelFontSize","labelPaddingTop","labelYOffset","useStyles","theme","outline","position","left","right","bottom","borderRadius","shape","roundness","input","flexGrow","paddingHorizontal","textAlignVertical","textAlign","zIndex","textField","iconContainer","width","height","justifyContent","alignItems","OutlinedTextField","forwardRef","props","ref","animatedError","animatedLabel","disabled","error","focused","forceFocus","icon","keyboardType","label","labelLayout","onBlur","onChangeText","onFocus","onIconPress","onLayoutAnimatedText","onSubmitEditing","placeholder","secureTextEntry","style","value","styles","hasActiveOutline","inputTextColor","palette","tertiary","main","primary","activeColor","warning","accent","placeholderColor","text","hint","outlineColor","border","errorColor","typography","body2","fontSize","unitless","labelScale","labelWidth","labelHeight","labelHalfWidth","labelHalfHeight","labelTranslateX","minInputHeight","inputHeight","topPosition","Math","floor","iconTopPosition","labelTranslateY","placeholderOpacity","interpolate","inputRange","outputRange","measured","labelProps","outlineStyle","borderWidth","borderColor","top","textInputStyle","color","marginRight","paddingRight","OS","outlineWidth","containerStyle","paddingTop","minHeight","iconContainerStyle","onIconButtonPress"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, Platform, TextInput, View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport IconButton from '../IconButton';\nimport TextFieldProps from './TextFieldProps';\nimport InputLabel from './InputLabel';\nimport {\n    defaultHeight,\n    iconSize,\n    inputPaddingHorizontal,\n    labelFontSize,\n    labelPaddingTop,\n    labelYOffset,\n} from './utils';\n\ninterface OutlinedTextFieldProps extends TextFieldProps {\n    animatedError: Animated.Value;\n    animatedLabel: Animated.Value;\n    focused: boolean;\n    forceFocus: () => void;\n    labelLayout: { measured: boolean; width: number; height: number };\n    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;\n}\n\ntype OutlinedTextFieldStyles = NamedStylesStringUnion<'outline' | 'input' | 'iconContainer'>;\n\nconst useStyles: UseStyles<OutlinedTextFieldStyles> = function (): OutlinedTextFieldStyles {\n    const theme = useTheme();\n\n    return {\n        outline: {\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: 0,\n            borderRadius: theme.shape.roundness,\n        },\n        input: {\n            flexGrow: 1,\n            paddingHorizontal: inputPaddingHorizontal,\n            textAlignVertical: 'center',\n            textAlign: 'left',\n            zIndex: theme.zIndex.textField,\n        },\n        iconContainer: {\n            position: 'absolute',\n            width: 24,\n            height: 24,\n            justifyContent: 'center',\n            alignItems: 'center',\n            right: 12,\n        },\n    };\n};\n\nconst OutlinedTextField = React.forwardRef<TextInput, OutlinedTextFieldProps>(function OutlinedTextField(props, ref) {\n    const {\n        animatedError,\n        animatedLabel,\n        disabled,\n        error,\n        focused,\n        forceFocus,\n        icon,\n        keyboardType,\n        label,\n        labelLayout,\n        onBlur,\n        onChangeText,\n        onFocus,\n        onIconPress,\n        onLayoutAnimatedText,\n        onSubmitEditing,\n        placeholder,\n        secureTextEntry,\n        style,\n        value,\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const hasActiveOutline = focused || error;\n    const inputTextColor = disabled ? theme.palette.tertiary.main : theme.palette.primary.main;\n    const activeColor = error\n        ? theme.palette.warning.main\n        : disabled\n            ? theme.palette.tertiary.main\n            : theme.palette.accent.main;\n    const placeholderColor = disabled ? theme.palette.tertiary.main : theme.palette.text.hint;\n    const outlineColor = disabled ? theme.palette.border : theme.palette.border;\n    const errorColor = disabled ? theme.palette.tertiary.main : theme.palette.warning.main;\n\n    const typography = theme.typography.body2;\n    const fontSize = typography.fontSize.unitless;\n\n    const labelScale = labelFontSize / fontSize;\n    const labelWidth = labelLayout.width;\n    const labelHeight = labelLayout.height;\n    const labelHalfWidth = labelWidth / 2;\n    const labelHalfHeight = labelHeight / 2;\n\n    const labelTranslateX = -1 * (labelHalfWidth - (labelScale * labelWidth) / 2 - (fontSize - labelFontSize) * labelScale);\n    const minInputHeight = defaultHeight - labelPaddingTop;\n    const inputHeight = labelHeight < minInputHeight ? minInputHeight : labelHeight;\n    const topPosition = Math.floor(((inputHeight > 0 ? inputHeight : 0) - labelHeight) / 2 + labelPaddingTop);\n    const iconTopPosition = (defaultHeight - (label ? 0 : labelPaddingTop) - iconSize - (label ? labelYOffset : 0)) / 2;\n    const labelTranslateY = -labelHalfHeight - (topPosition + labelYOffset);\n\n    const placeholderOpacity = hasActiveOutline\n        ? animatedLabel.interpolate({\n            inputRange: [0, 1],\n            outputRange: [hasActiveOutline ? 0 : 1, 1],\n        })\n        : labelLayout.measured ? 1 : 0;\n\n    const labelProps = {\n        activeColor,\n        error,\n        errorColor,\n        fontSize,\n        hasActiveOutline,\n        label,\n        labelScale,\n        labelTranslateX,\n        labelTranslateY,\n        onLayoutAnimatedText,\n        placeholderColor,\n        placeholderOpacity,\n        topPosition,\n    };\n\n    const outlineStyle = css([\n        styles.outline,\n        {\n            borderWidth: hasActiveOutline ? 2 : 1,\n            borderColor: error ? errorColor : (hasActiveOutline ? activeColor : outlineColor),\n            top: label ? 6 : 0,\n        },\n    ]);\n\n    const textInputStyle = css([\n        styles.input,\n        {\n            fontSize,\n            color: inputTextColor,\n            height: inputHeight,\n        },\n        icon && {\n            marginRight: iconSize + 20,\n            paddingRight: 0,\n        },\n        Platform.OS === 'web' && {\n            //@ts-ignore\n            outlineWidth: 0,\n        },\n    ]);\n\n    const containerStyle = css([\n        {\n            paddingTop: label ? labelPaddingTop : 0,\n            minHeight: label ? defaultHeight : defaultHeight + labelYOffset,\n        },\n    ]);\n\n    const iconContainerStyle = css([\n        styles.iconContainer,\n        { top: iconTopPosition },\n    ]);\n\n    const onIconButtonPress = () => {\n        forceFocus();\n        onIconPress?.();\n    };\n\n    return (\n        <View style={style}>\n            <View\n                pointerEvents={'none'}\n                style={outlineStyle}\n            />\n            <View style={containerStyle}>\n                {label ? (\n                    <InputLabel\n                        animatedLabel={animatedLabel}\n                        animatedError={animatedError}\n                        focused={focused}\n                        labelLayout={labelLayout}\n                        placeholder={placeholder}\n                        value={value}\n                        {...labelProps}\n                    />\n                ) : null}\n                <TextInput\n                    autoCapitalize={'none'}\n                    autoCorrect={false}\n                    disableFullscreenUI={true}\n                    ref={ref}\n                    onChangeText={onChangeText}\n                    placeholder={placeholder}\n                    placeholderTextColor={placeholderColor}\n                    editable={!disabled}\n                    selectionColor={activeColor}\n                    onFocus={onFocus}\n                    onBlur={onBlur}\n                    onSubmitEditing={onSubmitEditing}\n                    keyboardType={keyboardType}\n                    secureTextEntry={secureTextEntry}\n                    underlineColorAndroid={'transparent'}\n                    style={textInputStyle}\n                    value={value}\n                />\n            </View>\n            {icon ? (\n                <View style={iconContainerStyle}>\n                    <IconButton\n                        children={icon}\n                        onPress={onIconButtonPress}\n                    />\n                </View>\n            ) : null}\n        </View>\n    );\n});\n\nexport default OutlinedTextField;\n"]}

package/build/module/internal/icons/CheckboxChecked.js

@@ -1,12 +1,7 @@
 import React from 'react';
 import { Path } from 'react-native-svg';
 import { createSvgIcon } from '../../utils';
-export default createSvgIcon( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Path, {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M3 7C3 4.79086 4.79086 3 7 3H13C15.2091 3 17 4.79086 17 7V13C17 15.2091 15.2091 17 13 17H7C4.79086 17 3 15.2091 3 13V7Z"
-}), /*#__PURE__*/React.createElement(Path, {
-  d: "M14.8303 7.53033L8.32856 14.0321L4.96967 10.6732L6.03033 9.61252L8.32856 11.9108L13.7697 6.46967L14.8303 7.53033Z",
-  fill: "#FFFFFF"
-})), 'CheckboxChecked');
+export default createSvgIcon( /*#__PURE__*/React.createElement(Path, {
+  d: "M7 3C4.79086 3 3 4.79086 3 7V13C3 15.2091 4.79086 17 7 17H13C15.2091 17 17 15.2091 17 13V7C17 4.79086 15.2091 3 13 3H7ZM8.8589 13.5018L8.32857 14.0321L7.79824 13.5018L4.96967 10.6732L6.03033 9.61252L8.32857 11.9108L13.7697 6.46967L14.8303 7.53033L8.8589 13.5018Z"
+}), 'CheckboxChecked');
 //# sourceMappingURL=CheckboxChecked.js.map

package/build/module/internal/icons/CheckboxChecked.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CheckboxChecked.tsx"],"names":["React","Path","createSvgIcon"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,aAAT,QAA8B,aAA9B;AAEA,eAAeA,aAAa,eACxB,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,IAAD;AACI,EAAA,QAAQ,EAAC,SADb;AAEI,EAAA,QAAQ,EAAC,SAFb;AAGI,EAAA,CAAC,EAAC;AAHN,EADJ,eAMI,oBAAC,IAAD;AACI,EAAA,CAAC,EAAC,mHADN;AAEI,EAAA,IAAI,EAAC;AAFT,EANJ,CADwB,EAYxB,iBAZwB,CAA5B","sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n    <React.Fragment>\n        <Path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M3 7C3 4.79086 4.79086 3 7 3H13C15.2091 3 17 4.79086 17 7V13C17 15.2091 15.2091 17 13 17H7C4.79086 17 3 15.2091 3 13V7Z\"\n        />\n        <Path\n            d=\"M14.8303 7.53033L8.32856 14.0321L4.96967 10.6732L6.03033 9.61252L8.32856 11.9108L13.7697 6.46967L14.8303 7.53033Z\"\n            fill=\"#FFFFFF\"\n        />\n    </React.Fragment>,\n    'CheckboxChecked',\n);\n"]}
+{"version":3,"sources":["CheckboxChecked.tsx"],"names":["React","Path","createSvgIcon"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,aAAT,QAA8B,aAA9B;AAEA,eAAeA,aAAa,eACxB,oBAAC,IAAD;AACI,EAAA,CAAC,EAAC;AADN,EADwB,EAIxB,iBAJwB,CAA5B","sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n    <Path\n        d=\"M7 3C4.79086 3 3 4.79086 3 7V13C3 15.2091 4.79086 17 7 17H13C15.2091 17 17 15.2091 17 13V7C17 4.79086 15.2091 3 13 3H7ZM8.8589 13.5018L8.32857 14.0321L7.79824 13.5018L4.96967 10.6732L6.03033 9.61252L8.32857 11.9108L13.7697 6.46967L14.8303 7.53033L8.8589 13.5018Z\"\n    />,\n    'CheckboxChecked',\n);\n"]}

package/build/typescript/AppBar/AppBarProps.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { OverridableComponentProps } from '../types';
 import type { PaperProps } from '../Paper';
-export declare type AppBarColor = 'default' | 'primary' | 'transparent';
+export declare type AppBarColor = 'default' | 'paper' | 'primary' | 'transparent';
 export default interface AppBarProps extends OverridableComponentProps<PaperProps, {
     /**
      * The content of the component.

package/build/typescript/Paper/PaperProps.d.ts

@@ -14,6 +14,11 @@ export default interface PaperProps extends OverridableComponentProps<ViewProps,
      * @default 'default'
      */
     color?: PaperColor;
+    /**
+     * The hex color value of Paper.
+     * It has higher priority than `color` prop.
+     */
+    colorValue?: string;
     /**
      * Shadow depth, corresponds to `dp` in the spec.
      * It accepts values between 0 and 24 inclusive.

package/build/typescript/Paper/PaperStylesProvider.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare type PaperStyles = {
+    backgroundColor: string;
+};
+export declare const PaperStylesContext: import("react").Context<PaperStyles | null>;
+declare const _default: import("react").Provider<PaperStyles | null>;
+export default _default;

package/build/typescript/Paper/usePaperStyles.d.ts

@@ -0,0 +1 @@
+export default function usePaperStyles(): import("./PaperStylesProvider").PaperStyles | null;

package/package.json

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

package/src/AppBar/AppBar.tsx

@@ -5,11 +5,7 @@ import Paper from '../Paper';
 import { css, useTheme } from '../styles';
 import type AppBarProps from './AppBarProps';
 
-type AppBarStyleKeys =
-    | 'root'
-    | 'colorDefault'
-    | 'colorPrimary'
-    | 'colorTransparent';
+type AppBarStyleKeys = 'root';
 
 type AppBarStyles = NamedStylesStringUnion<AppBarStyleKeys>;
 
@@ -23,15 +19,6 @@ const useStyles: UseStyles<AppBarStyles> = function (): AppBarStyles {
             width: '100%',
             zIndex: theme.zIndex.appBar,
         },
-        colorDefault: {
-            backgroundColor: theme.palette.background.default,
-        },
-        colorPrimary: {
-            backgroundColor: theme.palette.primary.main,
-        },
-        colorTransparent: {
-            backgroundColor: 'transparent',
-        },
     };
 };
 
@@ -42,26 +29,31 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
         ...otherProps
     } = props;
 
+    const theme = useTheme();
+
     const styles = useStyles();
 
-    const colorStyle = color === 'default'
-        ? styles.colorDefault
-        : color === 'primary'
-            ? styles.colorPrimary
-            : styles.colorTransparent;
+    const backgroundColor = color === 'default'
+        ? theme.palette.background.default
+        : color === 'paper'
+            ? theme.palette.paper.default
+            : color === 'primary'
+                ? theme.palette.primary.main
+                : 'transparent';
 
     const paperStyle = css([
         styles.root,
-        colorStyle,
+        { backgroundColor },
         style,
     ]);
 
     return (
         <Paper
             ref={ref}
-            square
+            colorValue={backgroundColor}
             elevation={0}
             style={paperStyle}
+            square={true}
             {...otherProps}
         />
     );

package/src/AppBar/AppBarProps.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { OverridableComponentProps } from '../types';
 import type { PaperProps } from '../Paper';
 
-export type AppBarColor = 'default' | 'primary' | 'transparent';
+export type AppBarColor = 'default' | 'paper' | 'primary' | 'transparent';
 
 export default interface AppBarProps extends OverridableComponentProps<PaperProps, {
     /**

package/src/Paper/Paper.tsx

@@ -3,10 +3,12 @@ import { View } from 'react-native';
 import { css, StyleSheet, useTheme } from '../styles';
 import { useElevationStyle } from '../hooks';
 import type PaperProps from './PaperProps';
+import PaperStylesProvider from './PaperStylesProvider';
 
 const Paper = React.forwardRef<View, PaperProps>(function Paper(props, ref) {
     const {
         color = 'default',
+        colorValue,
         elevation = 1,
         style: styleProp,
         square = false,
@@ -16,9 +18,9 @@ const Paper = React.forwardRef<View, PaperProps>(function Paper(props, ref) {
 
     const theme = useTheme();
 
-    const rootStyle = {
-        backgroundColor: theme.palette.paper[color],
-    };
+    const backgroundColor = colorValue ?? theme.palette.paper[color];
+
+    const rootStyle = { backgroundColor };
 
     const roundedStyle = {
         borderRadius: theme.shape.roundness,
@@ -40,11 +42,15 @@ const Paper = React.forwardRef<View, PaperProps>(function Paper(props, ref) {
     ]);
 
     return (
-        <View
-            ref={ref}
-            style={style}
-            {...otherProps}
-        />
+        <PaperStylesProvider
+            value={{ backgroundColor }}
+        >
+            <View
+                ref={ref}
+                style={style}
+                {...otherProps}
+            />
+        </PaperStylesProvider>
     );
 });
 

package/src/Paper/PaperProps.ts

@@ -19,6 +19,12 @@ export default interface PaperProps extends OverridableComponentProps<ViewProps,
      */
     color?: PaperColor;
 
+    /**
+     * The hex color value of Paper.
+     * It has higher priority than `color` prop.
+     */
+    colorValue?: string;
+
     /**
      * Shadow depth, corresponds to `dp` in the spec.
      * It accepts values between 0 and 24 inclusive.

package/src/Paper/PaperStylesProvider.tsx

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+export type PaperStyles = {
+    backgroundColor: string;
+}
+
+export const PaperStylesContext = createContext<PaperStyles | null>(null);
+
+export default PaperStylesContext.Provider;

package/src/Paper/usePaperStyles.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { PaperStylesContext } from './PaperStylesProvider';
+
+export default function usePaperStyles() {
+    return useContext(PaperStylesContext);
+};

package/src/TextField/InputLabel.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Animated, LayoutChangeEvent, StyleSheet } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
+import usePaperStyles from '../Paper/usePaperStyles';
 import { inputPaddingHorizontal } from './utils';
 
 interface LabelProps {
@@ -30,8 +31,6 @@ interface LabelProps {
 type InputLabelStyles = NamedStylesStringUnion<'background' | 'backgroundText' | 'placeholder'>;
 
 const useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {
-    const theme = useTheme();
-
     return {
         background: {
             position: 'absolute',
@@ -40,15 +39,13 @@ const useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {
             bottom: 0,
             right: 0,
             width: 8,
-            height: 2,
-            backgroundColor: theme.palette.background.default,
+            height: 4,
         },
         backgroundText: {
             position: 'absolute',
             left: 18,
             paddingHorizontal: 0,
             color: 'transparent',
-            backgroundColor: theme.palette.background.default,
         },
         placeholder: {
             position: 'absolute',
@@ -81,8 +78,16 @@ const InputLabel = (props: LabelProps) => {
         value,
     } = props;
 
+    const theme = useTheme();
+
     const styles = useStyles();
 
+    const paperStyles = usePaperStyles();
+
+    const backgroundStyle = {
+        backgroundColor: paperStyles?.backgroundColor ?? theme.palette.background.default,
+    };
+
     const hasFocus = hasActiveOutline || value;
     const opacity = animatedLabel.interpolate({
         inputRange: [0, 1],
@@ -141,6 +146,7 @@ const InputLabel = (props: LabelProps) => {
                     pointerEvents={'none'}
                     style={[
                         styles.background,
+                        backgroundStyle,
                         {
                             opacity,
                             transform: [
@@ -159,6 +165,7 @@ const InputLabel = (props: LabelProps) => {
                     style={[
                         styles.placeholder,
                         styles.backgroundText,
+                        backgroundStyle,
                         labelStyle,
                         {
                             top: topPosition + 1,

package/src/TextField/OutlinedTextField.tsx

@@ -34,7 +34,6 @@ const useStyles: UseStyles<OutlinedTextFieldStyles> = function (): OutlinedTextF
             left: 0,
             right: 0,
             bottom: 0,
-            backgroundColor: theme.palette.background.default,
             borderRadius: theme.shape.roundness,
         },
         input: {
@@ -80,6 +79,7 @@ const OutlinedTextField = React.forwardRef<TextInput, OutlinedTextFieldProps>(fu
     } = props;
 
     const theme = useTheme();
+
     const styles = useStyles();
 
     const hasActiveOutline = focused || error;

package/src/internal/icons/CheckboxChecked.tsx

@@ -3,16 +3,8 @@ import { Path } from 'react-native-svg';
 import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
-    <React.Fragment>
-        <Path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M3 7C3 4.79086 4.79086 3 7 3H13C15.2091 3 17 4.79086 17 7V13C17 15.2091 15.2091 17 13 17H7C4.79086 17 3 15.2091 3 13V7Z"
-        />
-        <Path
-            d="M14.8303 7.53033L8.32856 14.0321L4.96967 10.6732L6.03033 9.61252L8.32856 11.9108L13.7697 6.46967L14.8303 7.53033Z"
-            fill="#FFFFFF"
-        />
-    </React.Fragment>,
+    <Path
+        d="M7 3C4.79086 3 3 4.79086 3 7V13C3 15.2091 4.79086 17 7 17H13C15.2091 17 17 15.2091 17 13V7C17 4.79086 15.2091 3 13 3H7ZM8.8589 13.5018L8.32857 14.0321L7.79824 13.5018L4.96967 10.6732L6.03033 9.61252L8.32857 11.9108L13.7697 6.46967L14.8303 7.53033L8.8589 13.5018Z"
+    />,
     'CheckboxChecked',
 );