@tecsinapse/react-core 1.19.0 → 1.21.0-beta.13

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.20.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.19.0...@tecsinapse/react-core@1.20.0) (2022-09-05)
+
+
+### Features
+
+* export core as esm ([d4879b3](https://github.com/tecsinapse/design-system/commit/d4879b3f4e2e6bc74d9eaea0ccb00adc0f39b1d7))
+
+
+
+
+
 # [1.19.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.18.0...@tecsinapse/react-core@1.19.0) (2022-09-02)
 
 

package/dist/components/atoms/Avatar/Avatar.d.ts

@@ -10,5 +10,5 @@ export interface AvatarProps {
     size?: keyof SizeAvatar;
     TextComponent?: FC<TextProps>;
 }
-export declare const Avatar: React.FC<AvatarProps>;
+declare const Avatar: React.FC<AvatarProps>;
 export default Avatar;

package/dist/components/atoms/Avatar/Avatar.js

@@ -1,46 +1,38 @@
-"use strict";
+'use strict';
 
-exports.__esModule = true;
-exports.default = exports.Avatar = void 0;
+var React = require('react');
+var Text = require('../Text/Text.js');
+var helpers = require('./helpers.js');
+var styled = require('./styled.js');
 
-var _react = _interopRequireDefault(require("react"));
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _Text = require("../Text");
-
-var _helpers = require("./helpers");
-
-var _styled = require("./styled");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const Avatar = ({
   source,
   name,
   onPress,
-  size = 'mega',
-  TextComponent = _Text.Text
+  size = "mega",
+  TextComponent = Text
 }) => {
-  const [hasError, setHasError] = _react.default.useState(false);
-
-  _react.default.useEffect(() => {
+  const [hasError, setHasError] = React__default["default"].useState(false);
+  React__default["default"].useEffect(() => {
     setHasError(false);
   }, [source]);
-
-  const StyledText = (0, _styled.getStyledTextComponent)(TextComponent);
-  return _react.default.createElement(_styled.ContainerButtonAvatar, {
+  const StyledText = styled.getStyledTextComponent(TextComponent);
+  return /* @__PURE__ */ React__default["default"].createElement(styled.ContainerButtonAvatar, {
     effect: "none",
-    onPress: onPress,
-    size: size
-  }, source && !hasError ? _react.default.createElement(_styled.StyledAvatar, {
-    source: source,
+    onPress,
+    size
+  }, source && !hasError ? /* @__PURE__ */ React__default["default"].createElement(styled.StyledAvatar, {
+    source,
     onError: () => setHasError(true)
-  }) : _react.default.createElement(_styled.StyledBackground, null, _react.default.createElement(StyledText, {
+  }) : /* @__PURE__ */ React__default["default"].createElement(styled.StyledBackground, null, /* @__PURE__ */ React__default["default"].createElement(StyledText, {
     fontWeight: "bold",
     fontColor: "light"
-  }, (0, _helpers.getIniciais)(name))));
+  }, helpers.getIniciais(name))));
 };
 
-exports.Avatar = Avatar;
-var _default = Avatar;
-exports.default = _default;
-//# sourceMappingURL=Avatar.js.map
+module.exports = Avatar;
+//# sourceMappingURL=Avatar.js.map

package/dist/components/atoms/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["Avatar","source","name","onPress","size","TextComponent","Text","hasError","setHasError","React","useState","useEffect","StyledText","getStyledTextComponent","getIniciais"],"sources":["../../../../src/components/atoms/Avatar/Avatar.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { ImageSourcePropType } from 'react-native';\nimport { IconSize } from '../../../types/defaults';\nimport { Text, TextProps } from '../Text';\nimport { getIniciais } from './helpers';\nimport {\n  ContainerButtonAvatar,\n  getStyledTextComponent,\n  StyledAvatar,\n  StyledBackground,\n} from './styled';\n\nexport type SizeAvatar = Omit<IconSize, 'centi' | 'deca'>;\n\nexport interface AvatarProps {\n  /** This property should follow react-native spec. If the asset is remote, use `{ uri: 'https://example.com/logo.png' }`.\n   * For local assets, you shold use `require('./logo.png')`. */\n  source?: ImageSourcePropType;\n  name: string;\n  onPress?: () => void;\n  size?: keyof SizeAvatar;\n  TextComponent?: FC<TextProps>;\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({\n  source,\n  name,\n  onPress,\n  size = 'mega',\n  TextComponent = Text,\n}) => {\n  const [hasError, setHasError] = React.useState<boolean>(false);\n\n  // If the source changes in runtime, this prevents error from being true always (fallback)\n  React.useEffect(() => {\n    setHasError(false);\n  }, [source]);\n\n  const StyledText = getStyledTextComponent(TextComponent);\n\n  return (\n    <ContainerButtonAvatar effect=\"none\" onPress={onPress} size={size}>\n      {source && !hasError ? (\n        <StyledAvatar source={source} onError={() => setHasError(true)} />\n      ) : (\n        <StyledBackground>\n          <StyledText fontWeight=\"bold\" fontColor=\"light\">\n            {getIniciais(name)}\n          </StyledText>\n        </StyledBackground>\n      )}\n    </ContainerButtonAvatar>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;AAAA;;AAGA;;AACA;;AACA;;;;AAmBO,MAAMA,MAA6B,GAAG,CAAC;EAC5CC,MAD4C;EAE5CC,IAF4C;EAG5CC,OAH4C;EAI5CC,IAAI,GAAG,MAJqC;EAK5CC,aAAa,GAAGC;AAL4B,CAAD,KAMvC;EACJ,MAAM,CAACC,QAAD,EAAWC,WAAX,IAA0BC,cAAA,CAAMC,QAAN,CAAwB,KAAxB,CAAhC;;EAGAD,cAAA,CAAME,SAAN,CAAgB,MAAM;IACpBH,WAAW,CAAC,KAAD,CAAX;EACD,CAFD,EAEG,CAACP,MAAD,CAFH;;EAIA,MAAMW,UAAU,GAAG,IAAAC,8BAAA,EAAuBR,aAAvB,CAAnB;EAEA,OACE,6BAAC,6BAAD;IAAuB,MAAM,EAAC,MAA9B;IAAqC,OAAO,EAAEF,OAA9C;IAAuD,IAAI,EAAEC;EAA7D,GACGH,MAAM,IAAI,CAACM,QAAX,GACC,6BAAC,oBAAD;IAAc,MAAM,EAAEN,MAAtB;IAA8B,OAAO,EAAE,MAAMO,WAAW,CAAC,IAAD;EAAxD,EADD,GAGC,6BAAC,wBAAD,QACE,6BAAC,UAAD;IAAY,UAAU,EAAC,MAAvB;IAA8B,SAAS,EAAC;EAAxC,GACG,IAAAM,oBAAA,EAAYZ,IAAZ,CADH,CADF,CAJJ,CADF;AAaD,CA7BM;;;eA+BQF,M"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/atoms/Avatar/Avatar.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { ImageSourcePropType } from 'react-native';\nimport { IconSize } from '../../../types/defaults';\nimport { Text, TextProps } from '../Text';\nimport { getIniciais } from './helpers';\nimport {\n  ContainerButtonAvatar,\n  getStyledTextComponent,\n  StyledAvatar,\n  StyledBackground,\n} from './styled';\n\nexport type SizeAvatar = Omit<IconSize, 'centi' | 'deca'>;\n\nexport interface AvatarProps {\n  /** This property should follow react-native spec. If the asset is remote, use `{ uri: 'https://example.com/logo.png' }`.\n   * For local assets, you shold use `require('./logo.png')`. */\n  source?: ImageSourcePropType;\n  name: string;\n  onPress?: () => void;\n  size?: keyof SizeAvatar;\n  TextComponent?: FC<TextProps>;\n}\n\nconst Avatar: React.FC<AvatarProps> = ({\n  source,\n  name,\n  onPress,\n  size = 'mega',\n  TextComponent = Text,\n}) => {\n  const [hasError, setHasError] = React.useState<boolean>(false);\n\n  // If the source changes in runtime, this prevents error from being true always (fallback)\n  React.useEffect(() => {\n    setHasError(false);\n  }, [source]);\n\n  const StyledText = getStyledTextComponent(TextComponent);\n\n  return (\n    <ContainerButtonAvatar effect=\"none\" onPress={onPress} size={size}>\n      {source && !hasError ? (\n        <StyledAvatar source={source} onError={() => setHasError(true)} />\n      ) : (\n        <StyledBackground>\n          <StyledText fontWeight=\"bold\" fontColor=\"light\">\n            {getIniciais(name)}\n          </StyledText>\n        </StyledBackground>\n      )}\n    </ContainerButtonAvatar>\n  );\n};\n\nexport default Avatar;\n"],"names":["React","getStyledTextComponent","ContainerButtonAvatar","StyledAvatar","StyledBackground","getIniciais"],"mappings":";;;;;;;;;;;AAwBA,MAAM,SAAgC,CAAC;AAAA,EACrC,MAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAO,GAAA,MAAA;AAAA,EACP,aAAgB,GAAA,IAAA;AAClB,CAAM,KAAA;AACJ,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAAA,yBAAA,CAAM,SAAkB,KAAK,CAAA,CAAA;AAG7D,EAAAA,yBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,GACnB,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAM,MAAA,UAAA,GAAaC,8BAAuB,aAAa,CAAA,CAAA;AAEvD,EAAA,uBACGD,yBAAA,CAAA,aAAA,CAAAE,4BAAA,EAAA;AAAA,IAAsB,MAAO,EAAA,MAAA;AAAA,IAAO,OAAA;AAAA,IAAkB,IAAA;AAAA,GACpD,EAAA,MAAA,IAAU,CAAC,QAAA,mBACTF,yBAAA,CAAA,aAAA,CAAAG,mBAAA,EAAA;AAAA,IAAa,MAAA;AAAA,IAAgB,OAAA,EAAS,MAAM,WAAA,CAAY,IAAI,CAAA;AAAA,GAAG,CAAA,mBAE/DH,yBAAA,CAAA,aAAA,CAAAI,uBAAA,EAAA,IAAA,kBACEJ,yBAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IAAW,UAAW,EAAA,MAAA;AAAA,IAAO,SAAU,EAAA,OAAA;AAAA,GAAA,EACrCK,mBAAY,CAAA,IAAI,CACnB,CACF,CAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/atoms/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { AvatarProps } from './Avatar';
+import { Story } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: React.FC<AvatarProps>;
+};
+export default _default;
+export declare const Base: Story<AvatarProps>;

package/dist/components/atoms/Avatar/helpers.js

@@ -1,17 +1,14 @@
-"use strict";
+'use strict';
 
-exports.__esModule = true;
-exports.getIniciais = void 0;
-
-const getIniciais = name => {
-  const nameSplit = name.split(' ');
+Object.defineProperty(exports, '__esModule', { value: true });
 
+const getIniciais = (name) => {
+  const nameSplit = name.split(" ");
   if (nameSplit.length > 1) {
-    return nameSplit.slice(0, 2).map(name => name[0]).join('');
+    return nameSplit.slice(0, 2).map((name2) => name2[0]).join("");
   }
-
   return name[0];
 };
 
 exports.getIniciais = getIniciais;
-//# sourceMappingURL=helpers.js.map
+//# sourceMappingURL=helpers.js.map

package/dist/components/atoms/Avatar/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":["getIniciais","name","nameSplit","split","length","slice","map","join"],"sources":["../../../../src/components/atoms/Avatar/helpers.ts"],"sourcesContent":["export const getIniciais = (name: string): string => {\n  const nameSplit = name.split(' ');\n  if (nameSplit.length > 1) {\n    return nameSplit\n      .slice(0, 2)\n      .map(name => name[0])\n      .join('');\n  }\n  return name[0];\n};\n"],"mappings":";;;;;AAAO,MAAMA,WAAW,GAAIC,IAAD,IAA0B;EACnD,MAAMC,SAAS,GAAGD,IAAI,CAACE,KAAL,CAAW,GAAX,CAAlB;;EACA,IAAID,SAAS,CAACE,MAAV,GAAmB,CAAvB,EAA0B;IACxB,OAAOF,SAAS,CACbG,KADI,CACE,CADF,EACK,CADL,EAEJC,GAFI,CAEAL,IAAI,IAAIA,IAAI,CAAC,CAAD,CAFZ,EAGJM,IAHI,CAGC,EAHD,CAAP;EAID;;EACD,OAAON,IAAI,CAAC,CAAD,CAAX;AACD,CATM"}
+{"version":3,"file":"helpers.js","sources":["../../../../src/components/atoms/Avatar/helpers.ts"],"sourcesContent":["export const getIniciais = (name: string): string => {\n  const nameSplit = name.split(' ');\n  if (nameSplit.length > 1) {\n    return nameSplit\n      .slice(0, 2)\n      .map(name => name[0])\n      .join('');\n  }\n  return name[0];\n};\n"],"names":["name"],"mappings":";;;;AAAa,MAAA,WAAA,GAAc,CAAC,IAAyB,KAAA;AACnD,EAAM,MAAA,SAAA,GAAY,IAAK,CAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AAChC,EAAI,IAAA,SAAA,CAAU,SAAS,CAAG,EAAA;AACxB,IAAA,OAAO,SACJ,CAAA,KAAA,CAAM,CAAG,EAAA,CAAC,CACV,CAAA,GAAA,CAAI,CAAAA,KAAAA,KAAQA,KAAK,CAAA,CAAA,CAAE,CACnB,CAAA,IAAA,CAAK,EAAE,CAAA,CAAA;AAAA,GACZ;AACA,EAAA,OAAO,IAAK,CAAA,CAAA,CAAA,CAAA;AACd;;;;"}

package/dist/components/atoms/Avatar/index.d.ts

@@ -1 +1,2 @@
-export { default as Avatar, AvatarProps } from './Avatar';
+export { default as Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';

package/dist/components/atoms/Avatar/styled.js

@@ -1,43 +1,28 @@
-"use strict";
+'use strict';
 
-exports.__esModule = true;
-exports.getStyledTextComponent = exports.StyledBackground = exports.StyledAvatar = exports.ContainerButtonAvatar = void 0;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _native = _interopRequireDefault(require("@emotion/native"));
+var styled = require('@emotion/native');
+var reactNative = require('react-native');
+var PressableSurface = require('../PressableSurface/PressableSurface.js');
 
-var _reactNative = require("react-native");
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _PressableSurface = require("../PressableSurface");
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const ContainerButtonAvatar = (0, _native.default)(_PressableSurface.PressableSurface)`
-  width: ${({
-  theme,
-  size = 'mega'
-}) => theme.iconSize[size]};
-  height: ${({
-  theme,
-  size = 'mega'
-}) => theme.iconSize[size]};
+const ContainerButtonAvatar = styled__default["default"](PressableSurface)`
+  width: ${({ theme, size = "mega" }) => theme.iconSize[size]};
+  height: ${({ theme, size = "mega" }) => theme.iconSize[size]};
 `;
-exports.ContainerButtonAvatar = ContainerButtonAvatar;
-const StyledAvatar = (0, _native.default)(_reactNative.Image)`
-  border-radius: ${({
-  theme
-}) => theme.borderRadius.pill};
+const StyledAvatar = styled__default["default"](reactNative.Image)`
+  border-radius: ${({ theme }) => theme.borderRadius.pill};
   overflow: hidden;
   width: 100%;
   height: 100%;
 `;
-exports.StyledAvatar = StyledAvatar;
-const StyledBackground = (0, _native.default)(_reactNative.View)`
-  border-radius: ${({
-  theme
-}) => theme.borderRadius.pill};
-  background-color: ${({
-  theme
-}) => theme.color.secondary.dark};
+const StyledBackground = styled__default["default"](reactNative.View)`
+  border-radius: ${({ theme }) => theme.borderRadius.pill};
+  background-color: ${({ theme }) => theme.color.secondary.dark};
   width: 100%;
   height: 100%;
   display: flex;
@@ -45,10 +30,8 @@ const StyledBackground = (0, _native.default)(_reactNative.View)`
   justify-content: center;
   flex-direction: row;
 `;
-exports.StyledBackground = StyledBackground;
-
-const getStyledTextComponent = component => {
-  return (0, _native.default)(component)`
+const getStyledTextComponent = (component) => {
+  return styled__default["default"](component)`
     text-transform: uppercase;
     text-align: center;
     align-self: center;
@@ -56,5 +39,8 @@ const getStyledTextComponent = component => {
   `;
 };
 
+exports.ContainerButtonAvatar = ContainerButtonAvatar;
+exports.StyledAvatar = StyledAvatar;
+exports.StyledBackground = StyledBackground;
 exports.getStyledTextComponent = getStyledTextComponent;
-//# sourceMappingURL=styled.js.map
+//# sourceMappingURL=styled.js.map

package/dist/components/atoms/Avatar/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["ContainerButtonAvatar","styled","PressableSurface","theme","size","iconSize","StyledAvatar","Image","borderRadius","pill","StyledBackground","View","color","secondary","dark","getStyledTextComponent","component"],"sources":["../../../../src/components/atoms/Avatar/styled.ts"],"sourcesContent":["import styled from '@emotion/native';\nimport { FC } from 'react';\nimport { Image, View } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { PressableSurface } from '../PressableSurface';\nimport { TextProps } from '../Text';\nimport { AvatarProps } from './Avatar';\n\nexport const ContainerButtonAvatar = styled(PressableSurface)<\n  Partial<StyleProps & AvatarProps>\n>`\n  width: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>\n    theme.iconSize[size]};\n  height: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>\n    theme.iconSize[size]};\n`;\n\nexport const StyledAvatar = styled(Image)<Partial<StyleProps>>`\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const StyledBackground = styled(View)<Partial<StyleProps>>`\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n  background-color: ${({ theme }: StyleProps) => theme.color.secondary.dark};\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n`;\n\nexport const getStyledTextComponent = (component: FC<TextProps>) => {\n  return styled(component)`\n    text-transform: uppercase;\n    text-align: center;\n    align-self: center;\n    flex: 1;\n  `;\n};\n"],"mappings":";;;;;AAAA;;AAEA;;AAEA;;;;AAIO,MAAMA,qBAAqB,GAAG,IAAAC,eAAA,EAAOC,kCAAP,CAEnC;AACF,WAAW,CAAC;EAAEC,KAAF;EAASC,IAAI,GAAG;AAAhB,CAAD,KACPD,KAAK,CAACE,QAAN,CAAeD,IAAf,CAAqB;AACzB,YAAY,CAAC;EAAED,KAAF;EAASC,IAAI,GAAG;AAAhB,CAAD,KACRD,KAAK,CAACE,QAAN,CAAeD,IAAf,CAAqB;AACzB,CAPO;;AASA,MAAME,YAAY,GAAG,IAAAL,eAAA,EAAOM,kBAAP,CAAmC;AAC/D,mBAAmB,CAAC;EAAEJ;AAAF,CAAD,KAA2BA,KAAK,CAACK,YAAN,CAAmBC,IAAK;AACtE;AACA;AACA;AACA,CALO;;AAOA,MAAMC,gBAAgB,GAAG,IAAAT,eAAA,EAAOU,iBAAP,CAAkC;AAClE,mBAAmB,CAAC;EAAER;AAAF,CAAD,KAA2BA,KAAK,CAACK,YAAN,CAAmBC,IAAK;AACtE,sBAAsB,CAAC;EAAEN;AAAF,CAAD,KAA2BA,KAAK,CAACS,KAAN,CAAYC,SAAZ,CAAsBC,IAAK;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA,CATO;;;AAWA,MAAMC,sBAAsB,GAAIC,SAAD,IAA8B;EAClE,OAAO,IAAAf,eAAA,EAAOe,SAAP,CAAkB;AAC3B;AACA;AACA;AACA;AACA,GALE;AAMD,CAPM"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/atoms/Avatar/styled.ts"],"sourcesContent":["import styled from '@emotion/native';\nimport { FC } from 'react';\nimport { Image, View } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { PressableSurface } from '../PressableSurface';\nimport { TextProps } from '../Text';\nimport { AvatarProps } from './Avatar';\n\nexport const ContainerButtonAvatar = styled(PressableSurface)<\n  Partial<StyleProps & AvatarProps>\n>`\n  width: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>\n    theme.iconSize[size]};\n  height: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>\n    theme.iconSize[size]};\n`;\n\nexport const StyledAvatar = styled(Image)<Partial<StyleProps>>`\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const StyledBackground = styled(View)<Partial<StyleProps>>`\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n  background-color: ${({ theme }: StyleProps) => theme.color.secondary.dark};\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n`;\n\nexport const getStyledTextComponent = (component: FC<TextProps>) => {\n  return styled(component)`\n    text-transform: uppercase;\n    text-align: center;\n    align-self: center;\n    flex: 1;\n  `;\n};\n"],"names":["styled","Image","View"],"mappings":";;;;;;;;;;;;AAQa,MAAA,qBAAA,GAAwBA,2BAAO,gBAAgB,CAAA,CAAA;AAAA,SAAA,EAGjD,CAAC,EAAE,KAAA,EAAO,OAAO,MAAO,EAAA,KAC/B,MAAM,QAAS,CAAA,IAAA,CAAA,CAAA;AAAA,UAAA,EACP,CAAC,EAAE,KAAA,EAAO,OAAO,MAAO,EAAA,KAChC,MAAM,QAAS,CAAA,IAAA,CAAA,CAAA;AAAA,EAAA;AAGN,MAAA,YAAA,GAAeA,2BAAOC,iBAAK,CAAA,CAAA;AAAA,iBAAA,EACrB,CAAC,EAAE,KAAM,EAAA,KAAkB,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMpD,MAAA,gBAAA,GAAmBD,2BAAOE,gBAAI,CAAA,CAAA;AAAA,iBAAA,EACxB,CAAC,EAAE,KAAM,EAAA,KAAkB,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA,oBAAA,EAC3C,CAAC,EAAE,KAAA,EAAwB,KAAA,KAAA,CAAM,MAAM,SAAU,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAS1D,MAAA,sBAAA,GAAyB,CAAC,SAA6B,KAAA;AAClE,EAAA,OAAOF,2BAAO,SAAS,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA,CAAA;AAMzB;;;;;;;"}

package/dist/components/atoms/Badge/Badge.js

@@ -1,28 +1,25 @@
-"use strict";
+'use strict';
 
-exports.__esModule = true;
-exports.default = void 0;
+var React = require('react');
+var styled = require('./styled.js');
 
-var _react = _interopRequireDefault(require("react"));
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _styled = require("./styled");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const Badge = ({
   children,
   style,
-  color = 'primary',
-  tone = 'medium',
+  color = "primary",
+  tone = "medium",
   value
 }) => {
-  return _react.default.createElement(_styled.ViewStyled, null, children, _react.default.createElement(_styled.BadgeStyle, {
-    style: style,
-    color: color,
-    tone: tone
+  return /* @__PURE__ */ React__default["default"].createElement(styled.ViewStyled, null, children, /* @__PURE__ */ React__default["default"].createElement(styled.BadgeStyle, {
+    style,
+    color,
+    tone
   }, value));
 };
 
-var _default = Badge;
-exports.default = _default;
-//# sourceMappingURL=Badge.js.map
+module.exports = Badge;
+//# sourceMappingURL=Badge.js.map

package/dist/components/atoms/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["Badge","children","style","color","tone","value"],"sources":["../../../../src/components/atoms/Badge/Badge.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { StyleProp, ViewStyle } from 'react-native';\nimport { ColorGradationType, ColorType } from '@tecsinapse/react-core';\nimport { BadgeStyle, ViewStyled } from './styled';\n\nexport interface BadgeProps {\n  color: ColorType;\n  tone?: ColorGradationType;\n  style?: StyleProp<ViewStyle>;\n  value: React.ReactNode;\n}\n\nconst Badge: FC<BadgeProps> = ({\n  children,\n  style,\n  color = 'primary',\n  tone = 'medium',\n  value,\n}): JSX.Element => {\n  return (\n    <ViewStyled>\n      {children}\n      <BadgeStyle style={style} color={color} tone={tone}>\n        {value}\n      </BadgeStyle>\n    </ViewStyled>\n  );\n};\n\nexport default Badge;\n"],"mappings":";;;;;AAAA;;AAGA;;;;AASA,MAAMA,KAAqB,GAAG,CAAC;EAC7BC,QAD6B;EAE7BC,KAF6B;EAG7BC,KAAK,GAAG,SAHqB;EAI7BC,IAAI,GAAG,QAJsB;EAK7BC;AAL6B,CAAD,KAMX;EACjB,OACE,6BAAC,kBAAD,QACGJ,QADH,EAEE,6BAAC,kBAAD;IAAY,KAAK,EAAEC,KAAnB;IAA0B,KAAK,EAAEC,KAAjC;IAAwC,IAAI,EAAEC;EAA9C,GACGC,KADH,CAFF,CADF;AAQD,CAfD;;eAiBeL,K"}
+{"version":3,"file":"Badge.js","sources":["../../../../src/components/atoms/Badge/Badge.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { StyleProp, ViewStyle } from 'react-native';\nimport { ColorGradationType, ColorType } from '@tecsinapse/react-core';\nimport { BadgeStyle, ViewStyled } from './styled';\n\nexport interface BadgeProps {\n  color: ColorType;\n  tone?: ColorGradationType;\n  style?: StyleProp<ViewStyle>;\n  value: React.ReactNode;\n}\n\nconst Badge: FC<BadgeProps> = ({\n  children,\n  style,\n  color = 'primary',\n  tone = 'medium',\n  value,\n}): JSX.Element => {\n  return (\n    <ViewStyled>\n      {children}\n      <BadgeStyle style={style} color={color} tone={tone}>\n        {value}\n      </BadgeStyle>\n    </ViewStyled>\n  );\n};\n\nexport default Badge;\n"],"names":["React","ViewStyled","BadgeStyle"],"mappings":";;;;;;;;;AAYA,MAAM,QAAwB,CAAC;AAAA,EAC7B,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,IAAO,GAAA,QAAA;AAAA,EACP,KAAA;AACF,CAAmB,KAAA;AACjB,EACE,uBAAAA,yBAAA,CAAA,aAAA,CAACC,iBACE,EAAA,IAAA,EAAA,QAAA,kBACAD,yBAAA,CAAA,aAAA,CAAAE,iBAAA,EAAA;AAAA,IAAW,KAAA;AAAA,IAAc,KAAA;AAAA,IAAc,IAAA;AAAA,GAAA,EACrC,KACH,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/atoms/Badge/index.d.ts

@@ -1 +1,2 @@
-export { default as Badge, BadgeProps } from './Badge';
+export { default as Badge } from './Badge';
+export type { BadgeProps } from './Badge';

package/dist/components/atoms/Badge/styled.js

@@ -1,24 +1,28 @@
-"use strict";
+'use strict';
 
-exports.__esModule = true;
-exports.ViewStyled = exports.BadgeStyle = void 0;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _native = _interopRequireWildcard(require("@emotion/native"));
+var styled = require('@emotion/native');
+var reactNative = require('react-native');
+require('react');
+require('../Text/styled.js');
+require('../Input/styled.js');
+require('currency.js');
+require('../Input/InputElement/InputElement.js');
+require('../Input/InputMaskElement/InputMaskElement.js');
+require('../Input/PressableInputContainer/styled.js');
+var ResponsiveFontSize = require('../../../utils/ResponsiveFontSize.js');
 
-var _reactNative = require("react-native");
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _utils = require("../../../utils");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const baseStyle = ({
   theme,
-  color = 'primary',
-  tone = 'medium'
+  color = "primary",
+  tone = "medium"
 }) => {
-  return (0, _native.css)`
+  return styled.css`
     border-radius: ${theme.borderRadius.pill};
     background-color: ${theme.color[color][tone]};
     position: absolute;
@@ -27,18 +31,18 @@ const baseStyle = ({
     justify-content: center;
     height: ${theme.iconSize.centi};
     width: ${theme.iconSize.centi};
-    top: ${`${(0, _utils.RFValue)(-4)}px`};
-    right: ${`${(0, _utils.RFValue)(-4)}px`};
+    top: ${`${ResponsiveFontSize.RFValue(-4)}px`};
+    right: ${`${ResponsiveFontSize.RFValue(-4)}px`};
   `;
 };
-
-const BadgeStyle = (0, _native.default)(_reactNative.View)(baseStyle);
-exports.BadgeStyle = BadgeStyle;
-const ViewStyled = (0, _native.default)(_reactNative.View)`
+const BadgeStyle = styled__default["default"](reactNative.View)(baseStyle);
+const ViewStyled = styled__default["default"](reactNative.View)`
   align-items: center;
   justify-content: center;
   position: relative;
   align-self: center;
 `;
+
+exports.BadgeStyle = BadgeStyle;
 exports.ViewStyled = ViewStyled;
-//# sourceMappingURL=styled.js.map
+//# sourceMappingURL=styled.js.map

package/dist/components/atoms/Badge/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["baseStyle","theme","color","tone","css","borderRadius","pill","iconSize","centi","RFValue","BadgeStyle","styled","View","ViewStyled"],"sources":["../../../../src/components/atoms/Badge/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { View } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValue } from '../../../utils';\nimport { BadgeProps } from './Badge';\n\nconst baseStyle = ({\n  theme,\n  color = 'primary',\n  tone = 'medium',\n}: StyleProps & Partial<BadgeProps>) => {\n  return css`\n    border-radius: ${theme.borderRadius.pill};\n    background-color: ${theme.color[color][tone]};\n    position: absolute;\n    align-items: center;\n    display: flex;\n    justify-content: center;\n    height: ${theme.iconSize.centi};\n    width: ${theme.iconSize.centi};\n    top: ${`${RFValue(-4)}px`};\n    right: ${`${RFValue(-4)}px`};\n  `;\n};\n\nexport const BadgeStyle =\n  styled(View)<Partial<StyleProps & BadgeProps>>(baseStyle);\n\nexport const ViewStyled = styled(View)<Partial<StyleProps & BadgeProps>>`\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  align-self: center;\n`;\n"],"mappings":";;;;;AAAA;;AACA;;AAEA;;;;;;AAGA,MAAMA,SAAS,GAAG,CAAC;EACjBC,KADiB;EAEjBC,KAAK,GAAG,SAFS;EAGjBC,IAAI,GAAG;AAHU,CAAD,KAIsB;EACtC,OAAO,IAAAC,WAAA,CAAI;AACb,qBAAqBH,KAAK,CAACI,YAAN,CAAmBC,IAAK;AAC7C,wBAAwBL,KAAK,CAACC,KAAN,CAAYA,KAAZ,EAAmBC,IAAnB,CAAyB;AACjD;AACA;AACA;AACA;AACA,cAAcF,KAAK,CAACM,QAAN,CAAeC,KAAM;AACnC,aAAaP,KAAK,CAACM,QAAN,CAAeC,KAAM;AAClC,WAAY,GAAE,IAAAC,cAAA,EAAQ,CAAC,CAAT,CAAY,IAAI;AAC9B,aAAc,GAAE,IAAAA,cAAA,EAAQ,CAAC,CAAT,CAAY,IAAI;AAChC,GAXE;AAYD,CAjBD;;AAmBO,MAAMC,UAAU,GACrB,IAAAC,eAAA,EAAOC,iBAAP,EAA+CZ,SAA/C,CADK;;AAGA,MAAMa,UAAU,GAAG,IAAAF,eAAA,EAAOC,iBAAP,CAA+C;AACzE;AACA;AACA;AACA;AACA,CALO"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/atoms/Badge/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { View } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValue } from '../../../utils';\nimport { BadgeProps } from './Badge';\n\nconst baseStyle = ({\n  theme,\n  color = 'primary',\n  tone = 'medium',\n}: StyleProps & Partial<BadgeProps>) => {\n  return css`\n    border-radius: ${theme.borderRadius.pill};\n    background-color: ${theme.color[color][tone]};\n    position: absolute;\n    align-items: center;\n    display: flex;\n    justify-content: center;\n    height: ${theme.iconSize.centi};\n    width: ${theme.iconSize.centi};\n    top: ${`${RFValue(-4)}px`};\n    right: ${`${RFValue(-4)}px`};\n  `;\n};\n\nexport const BadgeStyle =\n  styled(View)<Partial<StyleProps & BadgeProps>>(baseStyle);\n\nexport const ViewStyled = styled(View)<Partial<StyleProps & BadgeProps>>`\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  align-self: center;\n`;\n"],"names":["css","RFValue","styled","View"],"mappings":";;;;;;;;;;;;;;;;;;;AAMA,MAAM,YAAY,CAAC;AAAA,EACjB,KAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,IAAO,GAAA,QAAA;AACT,CAAwC,KAAA;AACtC,EAAO,OAAAA,UAAA,CAAA;AAAA,mBAAA,EACY,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA,sBAChB,EAAA,KAAA,CAAM,MAAM,KAAO,CAAA,CAAA,IAAA,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAA,EAK7B,MAAM,QAAS,CAAA,KAAA,CAAA;AAAA,WAAA,EAChB,MAAM,QAAS,CAAA,KAAA,CAAA;AAAA,SACjB,EAAA,CAAA,EAAGC,2BAAQ,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA;AAAA,WACX,EAAA,CAAA,EAAGA,2BAAQ,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA;AAAA,EAAA,CAAA,CAAA;AAE1B,CAAA,CAAA;AAEO,MAAM,UACX,GAAAC,0BAAA,CAAOC,gBAAI,CAAA,CAAoC,SAAS,EAAA;AAE7C,MAAA,UAAA,GAAaD,2BAAOC,gBAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;"}

package/dist/components/atoms/BoxContent/BoxContent.js

@@ -1,21 +1,44 @@
-"use strict";
+'use strict';
 
-exports.__esModule = true;
-exports.default = void 0;
+var React = require('react');
+var styled = require('./styled.js');
 
-var _react = _interopRequireDefault(require("react"));
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _styled = require("./styled");
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const BoxContent = ({
-  children,
-  ...rest
-}) => {
-  return _react.default.createElement(_styled.StyledBoxContent, rest, children);
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const BoxContent = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ React__default["default"].createElement(styled.StyledBoxContent, __spreadValues({}, rest), children);
 };
 
-var _default = BoxContent;
-exports.default = _default;
-//# sourceMappingURL=BoxContent.js.map
+module.exports = BoxContent;
+//# sourceMappingURL=BoxContent.js.map

package/dist/components/atoms/BoxContent/BoxContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"BoxContent.js","names":["BoxContent","children","rest"],"sources":["../../../../src/components/atoms/BoxContent/BoxContent.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { ViewProps } from 'react-native';\nimport { StyledBoxContent } from './styled';\n\nexport interface BoxContentProps extends ViewProps {\n  variant: 'top' | 'bottom' | 'left' | 'right';\n}\n\nconst BoxContent: FC<BoxContentProps> = ({ children, ...rest }) => {\n  return <StyledBoxContent {...rest}>{children}</StyledBoxContent>;\n};\n\nexport default BoxContent;\n"],"mappings":";;;;;AAAA;;AAEA;;;;AAMA,MAAMA,UAA+B,GAAG,CAAC;EAAEC,QAAF;EAAY,GAAGC;AAAf,CAAD,KAA2B;EACjE,OAAO,6BAAC,wBAAD,EAAsBA,IAAtB,EAA6BD,QAA7B,CAAP;AACD,CAFD;;eAIeD,U"}
+{"version":3,"file":"BoxContent.js","sources":["../../../../src/components/atoms/BoxContent/BoxContent.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { ViewProps } from 'react-native';\nimport { StyledBoxContent } from './styled';\n\nexport interface BoxContentProps extends ViewProps {\n  variant: 'top' | 'bottom' | 'left' | 'right';\n}\n\nconst BoxContent: FC<BoxContentProps> = ({ children, ...rest }) => {\n  return <StyledBoxContent {...rest}>{children}</StyledBoxContent>;\n};\n\nexport default BoxContent;\n"],"names":["React","StyledBoxContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQM,MAAA,UAAA,GAAkC,CAAC,EAA0B,KAAA;AAA1B,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAR3C,QAAA,EAAA,GAQyC,EAAe,EAAA,IAAA,GAAA,SAAA,CAAf,IAAe,CAAb,UAAA,CAAA,CAAA,CAAA;AACzC,EAAO,uBAAAA,yBAAA,CAAA,aAAA,CAACC,uBAAqB,EAAA,cAAA,CAAA,EAAA,EAAA,IAAA,CAAA,EAAO,QAAS,CAAA,CAAA;AAC/C;;;;"}

package/dist/components/atoms/BoxContent/BoxContent.stories.d.ts

@@ -0,0 +1,9 @@
+import { Story } from '@storybook/react';
+import React from 'react';
+import { BoxContentProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<BoxContentProps>;
+};
+export default _default;
+export declare const Base: Story<BoxContentProps>;

package/dist/components/atoms/BoxContent/index.d.ts

@@ -1 +1,2 @@
-export { default as BoxContent, BoxContentProps } from './BoxContent';
+export { default as BoxContent } from './BoxContent';
+export type { BoxContentProps } from './BoxContent';

package/dist/components/atoms/BoxContent/styled.js

@@ -1,78 +1,63 @@
-"use strict";
+'use strict';
 
-exports.__esModule = true;
-exports.elevatedStyles = exports.StyledBoxContent = void 0;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _native = _interopRequireWildcard(require("@emotion/native"));
+var styled = require('@emotion/native');
+var reactNative = require('react-native');
 
-var _reactNative = require("react-native");
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const elevatedStyles = ({
-  theme
-}) => [(0, _native.css)({
-  shadowColor: theme == null ? void 0 : theme.miscellaneous.shadow,
-  shadowOffset: {
-    width: 0,
-    height: 2
-  },
-  shadowOpacity: 0.25,
-  shadowRadius: 3.84,
-  elevation: 5
-})];
-
-exports.elevatedStyles = elevatedStyles;
-
-const topStyles = ({
-  theme,
-  variant
-}) => variant === 'top' && (0, _native.css)`
+const elevatedStyles = ({ theme }) => [
+  styled.css({
+    shadowColor: theme == null ? void 0 : theme.miscellaneous.shadow,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5
+  })
+];
+const topStyles = ({ theme, variant }) => variant === "top" && styled.css`
     border-bottom-left-radius: ${theme.borderRadius.deca};
     border-bottom-right-radius: ${theme.borderRadius.deca};
   `;
-
 const bottomStyles = ({
   theme,
   variant
-}) => variant === 'bottom' && (0, _native.css)`
+}) => variant === "bottom" && styled.css`
     border-top-left-radius: ${theme.borderRadius.deca};
     border-top-right-radius: ${theme.borderRadius.deca};
   `;
-
 const leftStyles = ({
   theme,
   variant
-}) => variant === 'left' && (0, _native.css)`
+}) => variant === "left" && styled.css`
     border-top-right-radius: ${theme.borderRadius.deca};
     border-bottom-right-radius: ${theme.borderRadius.deca};
   `;
-
 const rightStyles = ({
   theme,
   variant
-}) => variant === 'right' && (0, _native.css)`
+}) => variant === "right" && styled.css`
     border-top-left-radius: ${theme.borderRadius.deca};
     border-bottom-left-radius: ${theme.borderRadius.deca};
   `;
-
-const StyledBoxContentBase = (0, _native.default)(_reactNative.View)`
-  background-color: ${({
-  theme
-}) => theme.miscellaneous.surfaceColor};
-  min-height: ${({
-  theme
-}) => theme.spacing.kilo};
+const StyledBoxContentBase = styled__default["default"](reactNative.View)`
+  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+  min-height: ${({ theme }) => theme.spacing.kilo};
   overflow: hidden;
 `;
-const StyledBoxContent = (0, _native.default)(StyledBoxContentBase)(props => (0, _native.css)`
+const StyledBoxContent = styled__default["default"](StyledBoxContentBase)(
+  (props) => styled.css`
     ${elevatedStyles(props)}
     ${topStyles(props)}
   ${bottomStyles(props)}
   ${leftStyles(props)}
   ${rightStyles(props)}
-  `);
+  `
+);
+
 exports.StyledBoxContent = StyledBoxContent;
-//# sourceMappingURL=styled.js.map
+exports.elevatedStyles = elevatedStyles;
+//# sourceMappingURL=styled.js.map