@tecsinapse/react-core 1.20.0 → 1.21.0

package/esm/utils/ResponsiveFontSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveFontSize.js","names":["Dimensions","Platform","StatusBar","extractNumbersFromString","isIphoneX","STANDARD_SCREEN_HEIGHT","RFPercentage","percent","OS","get","height","width","standardLength","offset","currentHeight","deviceHeight","heightPercent","Math","round","RFValue","fontSize","standardScreenHeight","RFValueStr","_fontSize"],"sources":["../../src/utils/ResponsiveFontSize.ts"],"sourcesContent":["import { Dimensions, Platform, StatusBar } from 'react-native';\nimport { extractNumbersFromString } from './extractNumbersFromString';\nimport { isIphoneX } from './IPhoneXHelper';\n\nconst STANDARD_SCREEN_HEIGHT = 680;\n\n/**\n * Use this function when you want to scale a percentage number\n * to a reasonable value that will fit better on most of devices.\n *\n * @param percent\n * @returns\n */\nexport const RFPercentage = (percent: number) => {\n  if (Platform.OS === 'web') return percent;\n  const { height, width } = Dimensions.get('window');\n  const standardLength = width > height ? width : height;\n  const offset =\n    width > height\n      ? 0\n      : Platform.OS === 'ios'\n      ? 78\n      : StatusBar.currentHeight || 0; // iPhone X style SafeAreaView size in portrait\n  const deviceHeight =\n    isIphoneX() || Platform.OS === 'android'\n      ? standardLength - offset\n      : standardLength;\n  const heightPercent = (percent * deviceHeight) / 100;\n  return Math.round(heightPercent);\n};\n\n/**\n * Use this function when you want to scale a font size based on pixel unit\n * to a reasonable value that will fit better on most of devices.\n *\n * @param fontSize\n * @param standardScreenHeight\n * @returns\n */\nexport const RFValue = (\n  fontSize: number,\n  standardScreenHeight: number = STANDARD_SCREEN_HEIGHT\n) => {\n  if (Platform.OS === 'web') return fontSize;\n  const { height, width } = Dimensions.get('window');\n  const standardLength = width > height ? width : height;\n  const offset =\n    width > height\n      ? 0\n      : Platform.OS === 'ios'\n      ? 78\n      : StatusBar.currentHeight || 0; // iPhone X style SafeAreaView size in portrait\n  const deviceHeight =\n    isIphoneX() || Platform.OS === 'android'\n      ? standardLength - offset\n      : standardLength;\n  const heightPercent = (fontSize * deviceHeight) / standardScreenHeight;\n  return Math.round(heightPercent);\n};\n\n/**\n * Same as RFValue, however you can provide string values. E.g: '10px', '-5px'.\n *\n * @param fontSize\n * @param standardScreenHeight\n * @returns\n */\nexport const RFValueStr = (fontSize: string, standardScreenHeight?: number) => {\n  const _fontSize = extractNumbersFromString(fontSize);\n  return `${RFValue(_fontSize, standardScreenHeight)}px`;\n};\n"],"mappings":"AAAA,SAASA,UAAT,EAAqBC,QAArB,EAA+BC,SAA/B,QAAgD,cAAhD;AACA,SAASC,wBAAT,QAAyC,4BAAzC;AACA,SAASC,SAAT,QAA0B,iBAA1B;AAEA,IAAMC,sBAAsB,GAAG,GAA/B;AASA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,OAAD,EAAqB;EAC/C,IAAIN,QAAQ,CAACO,EAAT,KAAgB,KAApB,EAA2B,OAAOD,OAAP;;EAC3B,sBAA0BP,UAAU,CAACS,GAAX,CAAe,QAAf,CAA1B;EAAA,IAAQC,MAAR,mBAAQA,MAAR;EAAA,IAAgBC,KAAhB,mBAAgBA,KAAhB;;EACA,IAAMC,cAAc,GAAGD,KAAK,GAAGD,MAAR,GAAiBC,KAAjB,GAAyBD,MAAhD;EACA,IAAMG,MAAM,GACVF,KAAK,GAAGD,MAAR,GACI,CADJ,GAEIT,QAAQ,CAACO,EAAT,KAAgB,KAAhB,GACA,EADA,GAEAN,SAAS,CAACY,aAAV,IAA2B,CALjC;EAMA,IAAMC,YAAY,GAChBX,SAAS,MAAMH,QAAQ,CAACO,EAAT,KAAgB,SAA/B,GACII,cAAc,GAAGC,MADrB,GAEID,cAHN;EAIA,IAAMI,aAAa,GAAIT,OAAO,GAAGQ,YAAX,GAA2B,GAAjD;EACA,OAAOE,IAAI,CAACC,KAAL,CAAWF,aAAX,CAAP;AACD,CAhBM;AA0BP,OAAO,IAAMG,OAAO,GAAG,SAAVA,OAAU,CACrBC,QADqB,EAGlB;EAAA,IADHC,oBACG,uEAD4BhB,sBAC5B;EACH,IAAIJ,QAAQ,CAACO,EAAT,KAAgB,KAApB,EAA2B,OAAOY,QAAP;;EAC3B,uBAA0BpB,UAAU,CAACS,GAAX,CAAe,QAAf,CAA1B;EAAA,IAAQC,MAAR,oBAAQA,MAAR;EAAA,IAAgBC,KAAhB,oBAAgBA,KAAhB;;EACA,IAAMC,cAAc,GAAGD,KAAK,GAAGD,MAAR,GAAiBC,KAAjB,GAAyBD,MAAhD;EACA,IAAMG,MAAM,GACVF,KAAK,GAAGD,MAAR,GACI,CADJ,GAEIT,QAAQ,CAACO,EAAT,KAAgB,KAAhB,GACA,EADA,GAEAN,SAAS,CAACY,aAAV,IAA2B,CALjC;EAMA,IAAMC,YAAY,GAChBX,SAAS,MAAMH,QAAQ,CAACO,EAAT,KAAgB,SAA/B,GACII,cAAc,GAAGC,MADrB,GAEID,cAHN;EAIA,IAAMI,aAAa,GAAII,QAAQ,GAAGL,YAAZ,GAA4BM,oBAAlD;EACA,OAAOJ,IAAI,CAACC,KAAL,CAAWF,aAAX,CAAP;AACD,CAnBM;AA4BP,OAAO,IAAMM,UAAU,GAAG,SAAbA,UAAa,CAACF,QAAD,EAAmBC,oBAAnB,EAAqD;EAC7E,IAAME,SAAS,GAAGpB,wBAAwB,CAACiB,QAAD,CAA1C;;EACA,iBAAUD,OAAO,CAACI,SAAD,EAAYF,oBAAZ,CAAjB;AACD,CAHM"}
+{"version":3,"file":"ResponsiveFontSize.js","sources":["../../src/utils/ResponsiveFontSize.ts"],"sourcesContent":["import { Dimensions, Platform, StatusBar } from 'react-native';\nimport { extractNumbersFromString } from './extractNumbersFromString';\nimport { isIphoneX } from './IPhoneXHelper';\n\nconst STANDARD_SCREEN_HEIGHT = 680;\n\n/**\n * Use this function when you want to scale a percentage number\n * to a reasonable value that will fit better on most of devices.\n *\n * @param percent\n * @returns\n */\nexport const RFPercentage = (percent: number) => {\n  if (Platform.OS === 'web') return percent;\n  const { height, width } = Dimensions.get('window');\n  const standardLength = width > height ? width : height;\n  const offset =\n    width > height\n      ? 0\n      : Platform.OS === 'ios'\n      ? 78\n      : StatusBar.currentHeight || 0; // iPhone X style SafeAreaView size in portrait\n  const deviceHeight =\n    isIphoneX() || Platform.OS === 'android'\n      ? standardLength - offset\n      : standardLength;\n  const heightPercent = (percent * deviceHeight) / 100;\n  return Math.round(heightPercent);\n};\n\n/**\n * Use this function when you want to scale a font size based on pixel unit\n * to a reasonable value that will fit better on most of devices.\n *\n * @param fontSize\n * @param standardScreenHeight\n * @returns\n */\nexport const RFValue = (\n  fontSize: number,\n  standardScreenHeight: number = STANDARD_SCREEN_HEIGHT\n) => {\n  if (Platform.OS === 'web') return fontSize;\n  const { height, width } = Dimensions.get('window');\n  const standardLength = width > height ? width : height;\n  const offset =\n    width > height\n      ? 0\n      : Platform.OS === 'ios'\n      ? 78\n      : StatusBar.currentHeight || 0; // iPhone X style SafeAreaView size in portrait\n  const deviceHeight =\n    isIphoneX() || Platform.OS === 'android'\n      ? standardLength - offset\n      : standardLength;\n  const heightPercent = (fontSize * deviceHeight) / standardScreenHeight;\n  return Math.round(heightPercent);\n};\n\n/**\n * Same as RFValue, however you can provide string values. E.g: '10px', '-5px'.\n *\n * @param fontSize\n * @param standardScreenHeight\n * @returns\n */\nexport const RFValueStr = (fontSize: string, standardScreenHeight?: number) => {\n  const _fontSize = extractNumbersFromString(fontSize);\n  return `${RFValue(_fontSize, standardScreenHeight)}px`;\n};\n"],"names":[],"mappings":";;;;AAIA,MAAM,sBAAyB,GAAA,GAAA,CAAA;AASlB,MAAA,YAAA,GAAe,CAAC,OAAoB,KAAA;AAC/C,EAAA,IAAI,SAAS,EAAO,KAAA,KAAA;AAAO,IAAO,OAAA,OAAA,CAAA;AAClC,EAAA,MAAM,EAAE,MAAQ,EAAA,KAAA,EAAU,GAAA,UAAA,CAAW,IAAI,QAAQ,CAAA,CAAA;AACjD,EAAM,MAAA,cAAA,GAAiB,KAAQ,GAAA,MAAA,GAAS,KAAQ,GAAA,MAAA,CAAA;AAChD,EAAM,MAAA,MAAA,GACJ,QAAQ,MACJ,GAAA,CAAA,GACA,SAAS,EAAO,KAAA,KAAA,GAChB,EACA,GAAA,SAAA,CAAU,aAAiB,IAAA,CAAA,CAAA;AACjC,EAAA,MAAM,eACJ,SAAU,EAAA,IAAK,SAAS,EAAO,KAAA,SAAA,GAC3B,iBAAiB,MACjB,GAAA,cAAA,CAAA;AACN,EAAM,MAAA,aAAA,GAAiB,UAAU,YAAgB,GAAA,GAAA,CAAA;AACjD,EAAO,OAAA,IAAA,CAAK,MAAM,aAAa,CAAA,CAAA;AACjC,EAAA;AAUO,MAAM,OAAU,GAAA,CACrB,QACA,EAAA,oBAAA,GAA+B,sBAC5B,KAAA;AACH,EAAA,IAAI,SAAS,EAAO,KAAA,KAAA;AAAO,IAAO,OAAA,QAAA,CAAA;AAClC,EAAA,MAAM,EAAE,MAAQ,EAAA,KAAA,EAAU,GAAA,UAAA,CAAW,IAAI,QAAQ,CAAA,CAAA;AACjD,EAAM,MAAA,cAAA,GAAiB,KAAQ,GAAA,MAAA,GAAS,KAAQ,GAAA,MAAA,CAAA;AAChD,EAAM,MAAA,MAAA,GACJ,QAAQ,MACJ,GAAA,CAAA,GACA,SAAS,EAAO,KAAA,KAAA,GAChB,EACA,GAAA,SAAA,CAAU,aAAiB,IAAA,CAAA,CAAA;AACjC,EAAA,MAAM,eACJ,SAAU,EAAA,IAAK,SAAS,EAAO,KAAA,SAAA,GAC3B,iBAAiB,MACjB,GAAA,cAAA,CAAA;AACN,EAAM,MAAA,aAAA,GAAiB,WAAW,YAAgB,GAAA,oBAAA,CAAA;AAClD,EAAO,OAAA,IAAA,CAAK,MAAM,aAAa,CAAA,CAAA;AACjC,EAAA;AASa,MAAA,UAAA,GAAa,CAAC,QAAA,EAAkB,oBAAkC,KAAA;AAC7E,EAAM,MAAA,SAAA,GAAY,yBAAyB,QAAQ,CAAA,CAAA;AACnD,EAAO,OAAA,CAAA,EAAG,OAAQ,CAAA,SAAA,EAAW,oBAAoB,CAAA,CAAA,EAAA,CAAA,CAAA;AACnD;;;;"}

package/esm/utils/extractNumbersFromString.js

@@ -1,7 +1,5 @@
-export var extractNumbersFromString = function extractNumbersFromString(value) {
-  return Number(extractDigitsFromString(value));
-};
-export var extractDigitsFromString = function extractDigitsFromString(value) {
-  return value.replace(/[^0-9]/g, '');
-};
-//# sourceMappingURL=extractNumbersFromString.js.map
+const extractNumbersFromString = (value) => Number(extractDigitsFromString(value));
+const extractDigitsFromString = (value) => value.replace(/[^0-9]/g, "");
+
+export { extractDigitsFromString, extractNumbersFromString };
+//# sourceMappingURL=extractNumbersFromString.js.map

package/esm/utils/extractNumbersFromString.js.map

@@ -1 +1 @@
-{"version":3,"file":"extractNumbersFromString.js","names":["extractNumbersFromString","value","Number","extractDigitsFromString","replace"],"sources":["../../src/utils/extractNumbersFromString.ts"],"sourcesContent":["export const extractNumbersFromString = (value: string): number =>\n  Number(extractDigitsFromString(value));\n\nexport const extractDigitsFromString = (value: string): string =>\n  value.replace(/[^0-9]/g, '');\n"],"mappings":"AAAA,OAAO,IAAMA,wBAAwB,GAAG,SAA3BA,wBAA2B,CAACC,KAAD;EAAA,OACtCC,MAAM,CAACC,uBAAuB,CAACF,KAAD,CAAxB,CADgC;AAAA,CAAjC;AAGP,OAAO,IAAME,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACF,KAAD;EAAA,OACrCA,KAAK,CAACG,OAAN,CAAc,SAAd,EAAyB,EAAzB,CADqC;AAAA,CAAhC"}
+{"version":3,"file":"extractNumbersFromString.js","sources":["../../src/utils/extractNumbersFromString.ts"],"sourcesContent":["export const extractNumbersFromString = (value: string): number =>\n  Number(extractDigitsFromString(value));\n\nexport const extractDigitsFromString = (value: string): string =>\n  value.replace(/[^0-9]/g, '');\n"],"names":[],"mappings":"AAAO,MAAM,2BAA2B,CAAC,KAAA,KACvC,MAAO,CAAA,uBAAA,CAAwB,KAAK,CAAC,EAAA;AAEhC,MAAM,0BAA0B,CAAC,KAAA,KACtC,KAAM,CAAA,OAAA,CAAQ,WAAW,EAAE;;;;"}

package/esm/utils/formatWithMask.js

@@ -1,19 +1,26 @@
-import { getMask, mergeMask, getInternalNumberAndMask } from '../components/atoms/Input';
+import 'react';
+import '../components/atoms/Text/styled.js';
+import '../components/atoms/Input/styled.js';
+import { getInternalNumberAndMask } from '../components/atoms/Input/hooks/useNumberMask.js';
+import { getMask, mergeMask } from '../components/atoms/Input/hooks/useStringMask.js';
+import '../components/atoms/Input/InputElement/InputElement.js';
+import '../components/atoms/Input/InputMaskElement/InputMaskElement.js';
+import '../components/atoms/Input/PressableInputContainer/styled.js';
 import currency from 'currency.js';
-export var formatWithMask = function formatWithMask(mask, value) {
-  if (Array.isArray(mask) || typeof mask === 'function') {
-    var selectedMask = getMask(mask, String(value));
 
-    var _mergeMask = mergeMask(String(value), selectedMask),
-        formatted = _mergeMask.formatted;
-
-    return formatted || '';
+const formatWithMask = (mask, value) => {
+  if (Array.isArray(mask) || typeof mask === "function") {
+    const selectedMask = getMask(mask, String(value));
+    const { formatted } = mergeMask(String(value), selectedMask);
+    return formatted || "";
   } else {
-    var _getInternalNumberAnd = getInternalNumberAndMask(value, mask),
-        internalNumber = _getInternalNumberAnd.internalNumber,
-        mergedOptions = _getInternalNumberAnd.mergedOptions;
-
+    const { internalNumber, mergedOptions } = getInternalNumberAndMask(
+      value,
+      mask
+    );
     return currency(internalNumber).format(mergedOptions);
   }
 };
-//# sourceMappingURL=formatWithMask.js.map
+
+export { formatWithMask };
+//# sourceMappingURL=formatWithMask.js.map

package/esm/utils/formatWithMask.js.map

@@ -1 +1 @@
-{"version":3,"file":"formatWithMask.js","names":["getMask","mergeMask","getInternalNumberAndMask","currency","formatWithMask","mask","value","Array","isArray","selectedMask","String","formatted","internalNumber","mergedOptions","format"],"sources":["../../src/utils/formatWithMask.ts"],"sourcesContent":["import {\n  MaskType,\n  CurrencyOptions,\n  getMask,\n  mergeMask,\n  getInternalNumberAndMask,\n} from '../components/atoms/Input';\nimport currency from 'currency.js';\n\nexport const formatWithMask = (\n  mask: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions,\n  value: string | number\n): string | number => {\n  if (Array.isArray(mask) || typeof mask === 'function') {\n    const selectedMask = getMask(mask, String(value));\n    const { formatted } = mergeMask(String(value), selectedMask);\n    return formatted || '';\n  } else {\n    const { internalNumber, mergedOptions } = getInternalNumberAndMask(\n      value,\n      mask\n    );\n    return currency(internalNumber).format(mergedOptions);\n  }\n};\n"],"mappings":"AAAA,SAGEA,OAHF,EAIEC,SAJF,EAKEC,wBALF,QAMO,2BANP;AAOA,OAAOC,QAAP,MAAqB,aAArB;AAEA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAC5BC,IAD4B,EAE5BC,KAF4B,EAGR;EACpB,IAAIC,KAAK,CAACC,OAAN,CAAcH,IAAd,KAAuB,OAAOA,IAAP,KAAgB,UAA3C,EAAuD;IACrD,IAAMI,YAAY,GAAGT,OAAO,CAACK,IAAD,EAAOK,MAAM,CAACJ,KAAD,CAAb,CAA5B;;IACA,iBAAsBL,SAAS,CAACS,MAAM,CAACJ,KAAD,CAAP,EAAgBG,YAAhB,CAA/B;IAAA,IAAQE,SAAR,cAAQA,SAAR;;IACA,OAAOA,SAAS,IAAI,EAApB;EACD,CAJD,MAIO;IACL,4BAA0CT,wBAAwB,CAChEI,KADgE,EAEhED,IAFgE,CAAlE;IAAA,IAAQO,cAAR,yBAAQA,cAAR;IAAA,IAAwBC,aAAxB,yBAAwBA,aAAxB;;IAIA,OAAOV,QAAQ,CAACS,cAAD,CAAR,CAAyBE,MAAzB,CAAgCD,aAAhC,CAAP;EACD;AACF,CAfM"}
+{"version":3,"file":"formatWithMask.js","sources":["../../src/utils/formatWithMask.ts"],"sourcesContent":["import {\n  MaskType,\n  CurrencyOptions,\n  getMask,\n  mergeMask,\n  getInternalNumberAndMask,\n} from '../components/atoms/Input';\nimport currency from 'currency.js';\n\nexport const formatWithMask = (\n  mask: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions,\n  value: string | number\n): string | number => {\n  if (Array.isArray(mask) || typeof mask === 'function') {\n    const selectedMask = getMask(mask, String(value));\n    const { formatted } = mergeMask(String(value), selectedMask);\n    return formatted || '';\n  } else {\n    const { internalNumber, mergedOptions } = getInternalNumberAndMask(\n      value,\n      mask\n    );\n    return currency(internalNumber).format(mergedOptions);\n  }\n};\n"],"names":[],"mappings":";;;;;;;;;;AASa,MAAA,cAAA,GAAiB,CAC5B,IAAA,EACA,KACoB,KAAA;AACpB,EAAA,IAAI,MAAM,OAAQ,CAAA,IAAI,CAAK,IAAA,OAAO,SAAS,UAAY,EAAA;AACrD,IAAA,MAAM,YAAe,GAAA,OAAA,CAAQ,IAAM,EAAA,MAAA,CAAO,KAAK,CAAC,CAAA,CAAA;AAChD,IAAA,MAAM,EAAE,SAAU,EAAA,GAAI,UAAU,MAAO,CAAA,KAAK,GAAG,YAAY,CAAA,CAAA;AAC3D,IAAA,OAAO,SAAa,IAAA,EAAA,CAAA;AAAA,GACf,MAAA;AACL,IAAM,MAAA,EAAE,cAAgB,EAAA,aAAA,EAAkB,GAAA,wBAAA;AAAA,MACxC,KAAA;AAAA,MACA,IAAA;AAAA,KACF,CAAA;AACA,IAAA,OAAO,QAAS,CAAA,cAAc,CAAE,CAAA,MAAA,CAAO,aAAa,CAAA,CAAA;AAAA,GACtD;AACF;;;;"}

package/esm/utils/lightenDarkenColor.js

@@ -1,18 +1,27 @@
-export var lightenDarkenColor = function lightenDarkenColor(color, variation) {
-  var usePound = false;
-
-  if (color[0] == '#') {
+const lightenDarkenColor = (color, variation) => {
+  let usePound = false;
+  if (color[0] == "#") {
     color = color.slice(1);
     usePound = true;
   }
-
-  var num = parseInt(color, 16);
-  var r = (num >> 16) + variation;
-  if (r > 255) r = 255;else if (r < 0) r = 0;
-  var b = (num >> 8 & 0x00ff) + variation;
-  if (b > 255) b = 255;else if (b < 0) b = 0;
-  var g = (num & 0x0000ff) + variation;
-  if (g > 255) g = 255;else if (g < 0) g = 0;
-  return (usePound ? '#' : '') + (g | b << 8 | r << 16).toString(16);
+  const num = parseInt(color, 16);
+  let r = (num >> 16) + variation;
+  if (r > 255)
+    r = 255;
+  else if (r < 0)
+    r = 0;
+  let b = (num >> 8 & 255) + variation;
+  if (b > 255)
+    b = 255;
+  else if (b < 0)
+    b = 0;
+  let g = (num & 255) + variation;
+  if (g > 255)
+    g = 255;
+  else if (g < 0)
+    g = 0;
+  return (usePound ? "#" : "") + (g | b << 8 | r << 16).toString(16);
 };
-//# sourceMappingURL=lightenDarkenColor.js.map
+
+export { lightenDarkenColor };
+//# sourceMappingURL=lightenDarkenColor.js.map

package/esm/utils/lightenDarkenColor.js.map

@@ -1 +1 @@
-{"version":3,"file":"lightenDarkenColor.js","names":["lightenDarkenColor","color","variation","usePound","slice","num","parseInt","r","b","g","toString"],"sources":["../../src/utils/lightenDarkenColor.ts"],"sourcesContent":["export const lightenDarkenColor = (color: string, variation: number) => {\n  let usePound = false;\n\n  if (color[0] == '#') {\n    color = color.slice(1);\n    usePound = true;\n  }\n\n  const num = parseInt(color, 16);\n\n  let r = (num >> 16) + variation;\n  if (r > 255) r = 255;\n  else if (r < 0) r = 0;\n\n  let b = ((num >> 8) & 0x00ff) + variation;\n  if (b > 255) b = 255;\n  else if (b < 0) b = 0;\n\n  let g = (num & 0x0000ff) + variation;\n  if (g > 255) g = 255;\n  else if (g < 0) g = 0;\n\n  return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16);\n};\n"],"mappings":"AAAA,OAAO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgBC,SAAhB,EAAsC;EACtE,IAAIC,QAAQ,GAAG,KAAf;;EAEA,IAAIF,KAAK,CAAC,CAAD,CAAL,IAAY,GAAhB,EAAqB;IACnBA,KAAK,GAAGA,KAAK,CAACG,KAAN,CAAY,CAAZ,CAAR;IACAD,QAAQ,GAAG,IAAX;EACD;;EAED,IAAME,GAAG,GAAGC,QAAQ,CAACL,KAAD,EAAQ,EAAR,CAApB;EAEA,IAAIM,CAAC,GAAG,CAACF,GAAG,IAAI,EAAR,IAAcH,SAAtB;EACA,IAAIK,CAAC,GAAG,GAAR,EAAaA,CAAC,GAAG,GAAJ,CAAb,KACK,IAAIA,CAAC,GAAG,CAAR,EAAWA,CAAC,GAAG,CAAJ;EAEhB,IAAIC,CAAC,GAAG,CAAEH,GAAG,IAAI,CAAR,GAAa,MAAd,IAAwBH,SAAhC;EACA,IAAIM,CAAC,GAAG,GAAR,EAAaA,CAAC,GAAG,GAAJ,CAAb,KACK,IAAIA,CAAC,GAAG,CAAR,EAAWA,CAAC,GAAG,CAAJ;EAEhB,IAAIC,CAAC,GAAG,CAACJ,GAAG,GAAG,QAAP,IAAmBH,SAA3B;EACA,IAAIO,CAAC,GAAG,GAAR,EAAaA,CAAC,GAAG,GAAJ,CAAb,KACK,IAAIA,CAAC,GAAG,CAAR,EAAWA,CAAC,GAAG,CAAJ;EAEhB,OAAO,CAACN,QAAQ,GAAG,GAAH,GAAS,EAAlB,IAAwB,CAACM,CAAC,GAAID,CAAC,IAAI,CAAV,GAAgBD,CAAC,IAAI,EAAtB,EAA2BG,QAA3B,CAAoC,EAApC,CAA/B;AACD,CAvBM"}
+{"version":3,"file":"lightenDarkenColor.js","sources":["../../src/utils/lightenDarkenColor.ts"],"sourcesContent":["export const lightenDarkenColor = (color: string, variation: number) => {\n  let usePound = false;\n\n  if (color[0] == '#') {\n    color = color.slice(1);\n    usePound = true;\n  }\n\n  const num = parseInt(color, 16);\n\n  let r = (num >> 16) + variation;\n  if (r > 255) r = 255;\n  else if (r < 0) r = 0;\n\n  let b = ((num >> 8) & 0x00ff) + variation;\n  if (b > 255) b = 255;\n  else if (b < 0) b = 0;\n\n  let g = (num & 0x0000ff) + variation;\n  if (g > 255) g = 255;\n  else if (g < 0) g = 0;\n\n  return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16);\n};\n"],"names":[],"mappings":"AAAa,MAAA,kBAAA,GAAqB,CAAC,KAAA,EAAe,SAAsB,KAAA;AACtE,EAAA,IAAI,QAAW,GAAA,KAAA,CAAA;AAEf,EAAI,IAAA,KAAA,CAAM,MAAM,GAAK,EAAA;AACnB,IAAQ,KAAA,GAAA,KAAA,CAAM,MAAM,CAAC,CAAA,CAAA;AACrB,IAAW,QAAA,GAAA,IAAA,CAAA;AAAA,GACb;AAEA,EAAM,MAAA,GAAA,GAAM,QAAS,CAAA,KAAA,EAAO,EAAE,CAAA,CAAA;AAE9B,EAAI,IAAA,CAAA,GAAA,CAAK,OAAO,EAAM,IAAA,SAAA,CAAA;AACtB,EAAA,IAAI,CAAI,GAAA,GAAA;AAAK,IAAI,CAAA,GAAA,GAAA,CAAA;AAAA,OAAA,IACR,CAAI,GAAA,CAAA;AAAG,IAAI,CAAA,GAAA,CAAA,CAAA;AAEpB,EAAI,IAAA,CAAA,GAAA,CAAM,GAAO,IAAA,CAAA,GAAK,GAAU,IAAA,SAAA,CAAA;AAChC,EAAA,IAAI,CAAI,GAAA,GAAA;AAAK,IAAI,CAAA,GAAA,GAAA,CAAA;AAAA,OAAA,IACR,CAAI,GAAA,CAAA;AAAG,IAAI,CAAA,GAAA,CAAA,CAAA;AAEpB,EAAI,IAAA,CAAA,GAAA,CAAK,MAAM,GAAY,IAAA,SAAA,CAAA;AAC3B,EAAA,IAAI,CAAI,GAAA,GAAA;AAAK,IAAI,CAAA,GAAA,GAAA,CAAA;AAAA,OAAA,IACR,CAAI,GAAA,CAAA;AAAG,IAAI,CAAA,GAAA,CAAA,CAAA;AAEpB,EAAQ,OAAA,CAAA,QAAA,GAAW,MAAM,EAAO,IAAA,CAAA,CAAA,GAAK,KAAK,CAAM,GAAA,CAAA,IAAK,EAAK,EAAA,QAAA,CAAS,EAAE,CAAA,CAAA;AACvE;;;;"}

package/esm/utils/masks.js

@@ -1,19 +1,20 @@
-import { extractDigitsFromString } from './extractNumbersFromString';
-export var Masks = {
-  CPF: ['999.999.999-99'],
-  CNPJ: ['99.999.999/9999-99'],
-  DATE: ['99/99/9999'],
-  MONTH_YEAR: ['99/9999'],
-  CEP: ['99999-999'],
-  PHONE: ['(99) 9999-9999'],
-  PHONE_EXTENDED: ['(99) 99999-9999'],
-  COMBINED_PHONE: function COMBINED_PHONE(value) {
-    var onlyNumbers = extractDigitsFromString(value);
-    var isCellPhoneExtended = onlyNumbers.length === 11;
-    return (value === null || value === void 0 ? void 0 : value.length) <= 14 && !isCellPhoneExtended ? Masks.PHONE : Masks.PHONE_EXTENDED;
+import { extractDigitsFromString } from './extractNumbersFromString.js';
+
+const Masks = {
+  CPF: ["999.999.999-99"],
+  CNPJ: ["99.999.999/9999-99"],
+  DATE: ["99/99/9999"],
+  MONTH_YEAR: ["99/9999"],
+  CEP: ["99999-999"],
+  PHONE: ["(99) 9999-9999"],
+  PHONE_EXTENDED: ["(99) 99999-9999"],
+  COMBINED_PHONE: (value) => {
+    const onlyNumbers = extractDigitsFromString(value);
+    const isCellPhoneExtended = onlyNumbers.length === 11;
+    return (value == null ? void 0 : value.length) <= 14 && !isCellPhoneExtended ? Masks.PHONE : Masks.PHONE_EXTENDED;
   },
-  COMBINED_CPF_CNPJ: function COMBINED_CPF_CNPJ(value) {
-    return (value === null || value === void 0 ? void 0 : value.length) <= 14 ? Masks.CPF : Masks.CNPJ;
-  }
+  COMBINED_CPF_CNPJ: (value) => (value == null ? void 0 : value.length) <= 14 ? Masks.CPF : Masks.CNPJ
 };
-//# sourceMappingURL=masks.js.map
+
+export { Masks };
+//# sourceMappingURL=masks.js.map

package/esm/utils/masks.js.map

@@ -1 +1 @@
-{"version":3,"file":"masks.js","names":["extractDigitsFromString","Masks","CPF","CNPJ","DATE","MONTH_YEAR","CEP","PHONE","PHONE_EXTENDED","COMBINED_PHONE","value","onlyNumbers","isCellPhoneExtended","length","COMBINED_CPF_CNPJ"],"sources":["../../src/utils/masks.ts"],"sourcesContent":["// NOTE: Add here all individually utils, then you can use it on input components everywhere.\nimport { extractDigitsFromString } from './extractNumbersFromString';\n\nexport const Masks = {\n  CPF: ['999.999.999-99'],\n  CNPJ: ['99.999.999/9999-99'],\n  DATE: ['99/99/9999'],\n  MONTH_YEAR: ['99/9999'],\n  CEP: ['99999-999'],\n  PHONE: ['(99) 9999-9999'],\n  PHONE_EXTENDED: ['(99) 99999-9999'],\n  COMBINED_PHONE: (value: string) => {\n    const onlyNumbers = extractDigitsFromString(value);\n    // Value is number extended, but without mask.\n    const isCellPhoneExtended = onlyNumbers.length === 11;\n\n    // Value in formatted mode\n    return value?.length <= 14 && !isCellPhoneExtended\n      ? Masks.PHONE\n      : Masks.PHONE_EXTENDED;\n  },\n  COMBINED_CPF_CNPJ: (value: string) =>\n    value?.length <= 14 ? Masks.CPF : Masks.CNPJ,\n};\n"],"mappings":"AACA,SAASA,uBAAT,QAAwC,4BAAxC;AAEA,OAAO,IAAMC,KAAK,GAAG;EACnBC,GAAG,EAAE,CAAC,gBAAD,CADc;EAEnBC,IAAI,EAAE,CAAC,oBAAD,CAFa;EAGnBC,IAAI,EAAE,CAAC,YAAD,CAHa;EAInBC,UAAU,EAAE,CAAC,SAAD,CAJO;EAKnBC,GAAG,EAAE,CAAC,WAAD,CALc;EAMnBC,KAAK,EAAE,CAAC,gBAAD,CANY;EAOnBC,cAAc,EAAE,CAAC,iBAAD,CAPG;EAQnBC,cAAc,EAAE,wBAACC,KAAD,EAAmB;IACjC,IAAMC,WAAW,GAAGX,uBAAuB,CAACU,KAAD,CAA3C;IAEA,IAAME,mBAAmB,GAAGD,WAAW,CAACE,MAAZ,KAAuB,EAAnD;IAGA,OAAO,CAAAH,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEG,MAAP,KAAiB,EAAjB,IAAuB,CAACD,mBAAxB,GACHX,KAAK,CAACM,KADH,GAEHN,KAAK,CAACO,cAFV;EAGD,CAjBkB;EAkBnBM,iBAAiB,EAAE,2BAACJ,KAAD;IAAA,OACjB,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEG,MAAP,KAAiB,EAAjB,GAAsBZ,KAAK,CAACC,GAA5B,GAAkCD,KAAK,CAACE,IADvB;EAAA;AAlBA,CAAd"}
+{"version":3,"file":"masks.js","sources":["../../src/utils/masks.ts"],"sourcesContent":["// NOTE: Add here all individually utils, then you can use it on input components everywhere.\nimport { extractDigitsFromString } from './extractNumbersFromString';\n\nexport const Masks = {\n  CPF: ['999.999.999-99'],\n  CNPJ: ['99.999.999/9999-99'],\n  DATE: ['99/99/9999'],\n  MONTH_YEAR: ['99/9999'],\n  CEP: ['99999-999'],\n  PHONE: ['(99) 9999-9999'],\n  PHONE_EXTENDED: ['(99) 99999-9999'],\n  COMBINED_PHONE: (value: string) => {\n    const onlyNumbers = extractDigitsFromString(value);\n    // Value is number extended, but without mask.\n    const isCellPhoneExtended = onlyNumbers.length === 11;\n\n    // Value in formatted mode\n    return value?.length <= 14 && !isCellPhoneExtended\n      ? Masks.PHONE\n      : Masks.PHONE_EXTENDED;\n  },\n  COMBINED_CPF_CNPJ: (value: string) =>\n    value?.length <= 14 ? Masks.CPF : Masks.CNPJ,\n};\n"],"names":[],"mappings":";;AAGO,MAAM,KAAQ,GAAA;AAAA,EACnB,GAAA,EAAK,CAAC,gBAAgB,CAAA;AAAA,EACtB,IAAA,EAAM,CAAC,oBAAoB,CAAA;AAAA,EAC3B,IAAA,EAAM,CAAC,YAAY,CAAA;AAAA,EACnB,UAAA,EAAY,CAAC,SAAS,CAAA;AAAA,EACtB,GAAA,EAAK,CAAC,WAAW,CAAA;AAAA,EACjB,KAAA,EAAO,CAAC,gBAAgB,CAAA;AAAA,EACxB,cAAA,EAAgB,CAAC,iBAAiB,CAAA;AAAA,EAClC,cAAA,EAAgB,CAAC,KAAkB,KAAA;AACjC,IAAM,MAAA,WAAA,GAAc,wBAAwB,KAAK,CAAA,CAAA;AAEjD,IAAM,MAAA,mBAAA,GAAsB,YAAY,MAAW,KAAA,EAAA,CAAA;AAGnD,IAAA,OAAA,CAAO,+BAAO,MAAU,KAAA,EAAA,IAAM,CAAC,mBAC3B,GAAA,KAAA,CAAM,QACN,KAAM,CAAA,cAAA,CAAA;AAAA,GACZ;AAAA,EACA,iBAAA,EAAmB,CAAC,KAClB,KAAA,CAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAO,WAAU,EAAK,GAAA,KAAA,CAAM,MAAM,KAAM,CAAA,IAAA;AAC5C;;;;"}

package/esm/utils/variantComplement.js

@@ -1,26 +1,28 @@
-export var fontColorVC = {
-  filled: 'light',
-  outlined: 'orange',
-  text: 'orange'
+const fontColorVC = {
+  filled: "light",
+  outlined: "orange",
+  text: "orange"
 };
-export var colorVC = {
-  filled: 'primary',
-  outlined: 'primary',
-  text: 'primary'
+const colorVC = {
+  filled: "primary",
+  outlined: "primary",
+  text: "primary"
 };
-export var colorGradationVC = {
-  filled: 'dark',
-  outlined: 'dark',
-  text: 'dark'
+const colorGradationVC = {
+  filled: "dark",
+  outlined: "dark",
+  text: "dark"
 };
-export var borderColorVC = {
-  filled: 'primary',
-  outlined: 'primary',
-  text: 'primary'
+const borderColorVC = {
+  filled: "primary",
+  outlined: "primary",
+  text: "primary"
 };
-export var borderColorGradationVC = {
-  filled: 'dark',
-  outlined: 'dark',
-  text: 'dark'
+const borderColorGradationVC = {
+  filled: "dark",
+  outlined: "dark",
+  text: "dark"
 };
-//# sourceMappingURL=variantComplement.js.map
+
+export { borderColorGradationVC, borderColorVC, colorGradationVC, colorVC, fontColorVC };
+//# sourceMappingURL=variantComplement.js.map

package/esm/utils/variantComplement.js.map

@@ -1 +1 @@
-{"version":3,"file":"variantComplement.js","names":["fontColorVC","filled","outlined","text","colorVC","colorGradationVC","borderColorVC","borderColorGradationVC"],"sources":["../../src/utils/variantComplement.ts"],"sourcesContent":["import {\n  ColorGradationType,\n  ColorType,\n  FontColorType,\n  VariantType,\n} from '../types/defaults';\n\nexport const fontColorVC: Record<VariantType, FontColorType> = {\n  filled: 'light',\n  outlined: 'orange',\n  text: 'orange',\n};\n\nexport const colorVC: Record<VariantType, ColorType> = {\n  filled: 'primary',\n  outlined: 'primary',\n  text: 'primary',\n};\n\nexport const colorGradationVC: Record<VariantType, ColorGradationType> = {\n  filled: 'dark',\n  outlined: 'dark',\n  text: 'dark',\n};\n\nexport const borderColorVC: Record<VariantType, ColorType> = {\n  filled: 'primary',\n  outlined: 'primary',\n  text: 'primary',\n};\n\nexport const borderColorGradationVC: Record<VariantType, ColorGradationType> = {\n  filled: 'dark',\n  outlined: 'dark',\n  text: 'dark',\n};\n"],"mappings":"AAOA,OAAO,IAAMA,WAA+C,GAAG;EAC7DC,MAAM,EAAE,OADqD;EAE7DC,QAAQ,EAAE,QAFmD;EAG7DC,IAAI,EAAE;AAHuD,CAAxD;AAMP,OAAO,IAAMC,OAAuC,GAAG;EACrDH,MAAM,EAAE,SAD6C;EAErDC,QAAQ,EAAE,SAF2C;EAGrDC,IAAI,EAAE;AAH+C,CAAhD;AAMP,OAAO,IAAME,gBAAyD,GAAG;EACvEJ,MAAM,EAAE,MAD+D;EAEvEC,QAAQ,EAAE,MAF6D;EAGvEC,IAAI,EAAE;AAHiE,CAAlE;AAMP,OAAO,IAAMG,aAA6C,GAAG;EAC3DL,MAAM,EAAE,SADmD;EAE3DC,QAAQ,EAAE,SAFiD;EAG3DC,IAAI,EAAE;AAHqD,CAAtD;AAMP,OAAO,IAAMI,sBAA+D,GAAG;EAC7EN,MAAM,EAAE,MADqE;EAE7EC,QAAQ,EAAE,MAFmE;EAG7EC,IAAI,EAAE;AAHuE,CAAxE"}
+{"version":3,"file":"variantComplement.js","sources":["../../src/utils/variantComplement.ts"],"sourcesContent":["import {\n  ColorGradationType,\n  ColorType,\n  FontColorType,\n  VariantType,\n} from '../types/defaults';\n\nexport const fontColorVC: Record<VariantType, FontColorType> = {\n  filled: 'light',\n  outlined: 'orange',\n  text: 'orange',\n};\n\nexport const colorVC: Record<VariantType, ColorType> = {\n  filled: 'primary',\n  outlined: 'primary',\n  text: 'primary',\n};\n\nexport const colorGradationVC: Record<VariantType, ColorGradationType> = {\n  filled: 'dark',\n  outlined: 'dark',\n  text: 'dark',\n};\n\nexport const borderColorVC: Record<VariantType, ColorType> = {\n  filled: 'primary',\n  outlined: 'primary',\n  text: 'primary',\n};\n\nexport const borderColorGradationVC: Record<VariantType, ColorGradationType> = {\n  filled: 'dark',\n  outlined: 'dark',\n  text: 'dark',\n};\n"],"names":[],"mappings":"AAOO,MAAM,WAAkD,GAAA;AAAA,EAC7D,MAAQ,EAAA,OAAA;AAAA,EACR,QAAU,EAAA,QAAA;AAAA,EACV,IAAM,EAAA,QAAA;AACR,EAAA;AAEO,MAAM,OAA0C,GAAA;AAAA,EACrD,MAAQ,EAAA,SAAA;AAAA,EACR,QAAU,EAAA,SAAA;AAAA,EACV,IAAM,EAAA,SAAA;AACR,EAAA;AAEO,MAAM,gBAA4D,GAAA;AAAA,EACvE,MAAQ,EAAA,MAAA;AAAA,EACR,QAAU,EAAA,MAAA;AAAA,EACV,IAAM,EAAA,MAAA;AACR,EAAA;AAEO,MAAM,aAAgD,GAAA;AAAA,EAC3D,MAAQ,EAAA,SAAA;AAAA,EACR,QAAU,EAAA,SAAA;AAAA,EACV,IAAM,EAAA,SAAA;AACR,EAAA;AAEO,MAAM,sBAAkE,GAAA;AAAA,EAC7E,MAAQ,EAAA,MAAA;AAAA,EACR,QAAU,EAAA,MAAA;AAAA,EACV,IAAM,EAAA,MAAA;AACR;;;;"}

package/package.json

@@ -1,17 +1,15 @@
 {
   "name": "@tecsinapse/react-core",
   "description": "TecSinapse hybrid React components",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "start": "yarn build:es --watch",
-    "build:es": "yarn build:cjs && yarn build:esm",
-    "build:cjs": "cross-env BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
-    "build:esm": "cross-env BABEL_ENV=build babel src --root-mode upward --out-dir esm --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments --config-file ./babel.config.esm.js",
-    "build:declaration": "yarn build:declaration:cjs && yarn build:declaration:esm",
+    "build:es": "yarn rollup --config",
+    "build:declaration": "run-p build:declaration:cjs build:declaration:esm",
     "build:declaration:cjs": "tsc --project tsconfig.build.json",
     "build:declaration:esm": "tsc --project tsconfig.build.esm.json",
     "build:declaration:watch": "tsc --project tsconfig.build.json --watch",
@@ -35,9 +33,8 @@
   "homepage": "https://tecsinapse.github.io/design-system/",
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": "^0.64.0",
     "react-native-vector-icons": "^8.1.0 || ^9.0.0"
   },
-  "gitHead": "46fe5778b52031a04bcb217c86cf363d6ae45b54"
+  "gitHead": "92debfcee6bd043a295edc3697e3795dccabf8f6"
 }

package/rollup.config.js

@@ -0,0 +1,36 @@
+import esbuild from 'rollup-plugin-esbuild';
+
+const outputDefaultConfig = {
+  preserveModules: true,
+  preserveModulesRoot: 'src',
+  sourcemap: true,
+};
+
+export default [
+  {
+    input: ['./src/index.ts'],
+    output: [
+      {
+        dir: 'esm',
+        format: 'esm',
+        ...outputDefaultConfig,
+      },
+      {
+        dir: 'dist',
+        format: 'cjs',
+        exports: 'auto',
+        ...outputDefaultConfig,
+      },
+    ],
+    plugins: [esbuild({ tsconfig: 'tsconfig.build.json' })],
+    external: [
+      'react',
+      'react-native',
+      'react-native-vector-icons',
+      '@emotion/native',
+      '@emotion/react',
+      'currency.js',
+      'date-fns',
+    ],
+  },
+];

package/src/components/atoms/Avatar/Avatar.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Avatar, AvatarProps } from './Avatar';
+import { default as Avatar, AvatarProps } from './Avatar';
 import { Story } from '@storybook/react';
 
 export default {
@@ -13,8 +13,7 @@ export const Base = Template.bind({});
 
 Base.args = {
   source: {
-    uri:
-      'https://www.shareicon.net/data/512x512/2016/05/24/770117_people_512x512.png',
+    uri: 'https://www.shareicon.net/data/512x512/2016/05/24/770117_people_512x512.png',
   },
   name: 'João',
   onPress: () => alert('onPress callback'),

package/src/components/atoms/Avatar/Avatar.tsx

@@ -22,7 +22,7 @@ export interface AvatarProps {
   TextComponent?: FC<TextProps>;
 }
 
-export const Avatar: React.FC<AvatarProps> = ({
+const Avatar: React.FC<AvatarProps> = ({
   source,
   name,
   onPress,

package/src/components/atoms/Button/States/BaseState.tsx

@@ -12,7 +12,7 @@ export interface BaseStateProps extends ButtonStateProps {
   icon: string;
 }
 
-export const BaseState: FC<BaseStateProps> = ({
+const BaseState: FC<BaseStateProps> = ({
   textComponent = Text,
   buttonSize = 'default',
   fontColor = 'light',

package/src/components/atoms/Button/States/Error.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from 'react';
 import { ButtonStateProps } from '../Button';
-import { BaseState } from './BaseState';
+import { default as BaseState } from './BaseState';
 
-export const Error: FC<ButtonStateProps> = props => {
+const Error: FC<ButtonStateProps> = props => {
   return <BaseState {...props} icon="close-circle-outline" />;
 };
 

package/src/components/atoms/Button/States/Loading.tsx

@@ -5,7 +5,7 @@ import { Text } from '../../Text';
 import { ButtonStateProps } from '../Button';
 import { getStyledTextButton, StyledIndicator } from './styled';
 
-export const Loading: FC<ButtonStateProps> = ({
+const Loading: FC<ButtonStateProps> = ({
   text,
   textComponent = Text,
   fontColor = 'light',

package/src/components/atoms/Button/States/Success.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from 'react';
 import { ButtonStateProps } from '../Button';
-import { BaseState } from './BaseState';
+import { default as BaseState } from './BaseState';
 
-export const Success: FC<ButtonStateProps> = props => {
+const Success: FC<ButtonStateProps> = props => {
   return <BaseState {...props} icon="checkmark-circle-outline" />;
 };
 

package/src/components/atoms/Icon/Icon.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { StyleProp, TextStyle } from 'react-native';
+import { StyleProp, TextStyle, Text } from 'react-native';
 import { useTheme } from '@emotion/react';
 import {
   ColorGradationType,
@@ -42,7 +42,11 @@ const Icon: FC<IconProps> = ({
   const color = getIconColor(colorVariant, colorTone, fontColor, theme);
   const RNVIcon = getIconComponent(type, size);
 
-  return <RNVIcon {...rest} style={style} name={name} color={color} />;
+  return (
+    <React.Suspense fallback={<Text> </Text>}>
+      <RNVIcon {...rest} style={style} name={name} color={color} />
+    </React.Suspense>
+  );
 };
 
 export default Icon;

package/src/components/atoms/Icon/helpers.ts

@@ -1,3 +1,4 @@
+import { lazy } from 'react';
 import {
   ColorGradationType,
   ColorType,
@@ -24,74 +25,75 @@ export const getIconComponent = (type: IconType, size: IconSizeType): any => {
   switch (type) {
     case 'zocial':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/Zocial').default,
+        lazy(() => import('react-native-vector-icons/dist/Zocial')),
         size
       );
     case 'octicon':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/Octicons').default,
+        lazy(() => import('react-native-vector-icons/dist/Octicons')),
         size
       );
     case 'material':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/MaterialIcons').default,
+        lazy(() => import('react-native-vector-icons/dist/MaterialIcons')),
         size
       );
     case 'material-community':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/MaterialCommunityIcons')
-          .default,
+        lazy(
+          () => import('react-native-vector-icons/dist/MaterialCommunityIcons')
+        ),
         size
       );
     case 'ionicon':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/Ionicons').default,
+        lazy(() => import('react-native-vector-icons/dist/Ionicons')),
         size
       );
     case 'foundation':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/Foundation').default,
+        lazy(() => import('react-native-vector-icons/dist/Foundation')),
         size
       );
     case 'evilicon':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/EvilIcons').default,
+        lazy(() => import('react-native-vector-icons/dist/EvilIcons')),
         size
       );
     case 'entypo':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/Entypo').default,
+        lazy(() => import('react-native-vector-icons/dist/Entypo')),
         size
       );
     case 'font-awesome':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/FontAwesome').default,
+        lazy(() => import('react-native-vector-icons/dist/FontAwesome')),
         size
       );
     case 'font-awesome-5':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/FontAwesome5').default,
+        lazy(() => import('react-native-vector-icons/dist/FontAwesome5')),
         size
       );
     case 'simple-line-icon':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/SimpleLineIcons').default,
+        lazy(() => import('react-native-vector-icons/dist/SimpleLineIcons')),
         size
       );
     case 'feather':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/Feather').default,
+        lazy(() => import('react-native-vector-icons/dist/Feather')),
         size
       );
     case 'antdesign':
     case 'ant-design':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/AntDesign').default,
+        lazy(() => import('react-native-vector-icons/dist/AntDesign')),
         size
       );
     case 'fontisto':
       return getStyledIcon(
-        require('react-native-vector-icons/dist/Fontisto').default,
+        lazy(() => import('react-native-vector-icons/dist/Fontisto')),
         size
       );
     default:
@@ -99,7 +101,7 @@ export const getIconComponent = (type: IconType, size: IconSizeType): any => {
         return getStyledIcon(customIcons[type], size);
       }
       return getStyledIcon(
-        require('react-native-vector-icons/dist/MaterialIcons').default,
+        lazy(() => import('react-native-vector-icons/dist/MaterialIcons')),
         size
       );
   }

package/src/components/molecules/Grid/functions.ts

@@ -1,9 +1,5 @@
-import {
-  extractNumbersFromString,
-  GridSpacing,
-  PaddingPosition,
-  Spacing,
-} from '@tecsinapse/react-core';
+import { GridSpacing, PaddingPosition, Spacing } from '@tecsinapse/react-core';
+import { extractNumbersFromString } from '../../../utils';
 
 export const getGridItemPadding = (
   pos: PaddingPosition,

package/src/components/molecules/IconTextButton/IconComponent.tsx

@@ -1,10 +1,6 @@
-import {
-  ButtonSizeType,
-  FontColor,
-  Icon,
-  IconProps,
-} from '@tecsinapse/react-core';
+import { ButtonSizeType, FontColor, IconProps } from '@tecsinapse/react-core';
 import React, { FC } from 'react';
+import { Icon } from '../../atoms/Icon';
 
 interface IconComponentProps {
   iconProps?: IconProps;

package/src/components/molecules/Snackbar/Snackbar.tsx

@@ -31,7 +31,7 @@ export interface SnackbarProps {
   style?: StyleProp<ViewStyle>;
 }
 
-export const Snackbar: React.FC<SnackbarProps> = ({
+const Snackbar: React.FC<SnackbarProps> = ({
   children,
   open = true,
   onClose,

package/tsconfig.build.json

@@ -6,5 +6,6 @@
     "rootDir": "./src",
     "baseUrl": "./"
   },
-  "include": ["./src"]
+  "include": ["./src"],
+  "exclude": ["node_modules", "dist", "esm"]
 }