@tecsinapse/react-core 1.12.7 → 1.13.0

package/dist/components/molecules/DatePicker/styled.js

@@ -3,63 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CalendarIcon = exports.getStyledTextComponent = exports.ModalContent = exports.Backdrop = void 0;
+exports.CalendarIcon = exports.getStyledTextComponent = void 0;
 
 var _native = _interopRequireWildcard(require("@emotion/native"));
 
-var _reactNative = require("react-native");
-
-var _definitions = require("../../../styles/definitions");
-
-var _utils = require("../../../utils");
-
 var _Icon = require("../../atoms/Icon");
 
 var _Input = require("../../atoms/Input");
 
-var _PressableSurface = require("../../atoms/PressableSurface");
-
 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; }
 
-const isWeb = _reactNative.Platform.OS === 'web';
-const Backdrop = (0, _native.default)(_PressableSurface.PressableSurface)`
-  ${({
-  theme
-}) => isWeb ? (0, _native.css)`
-          justify-content: center;
-          align-items: center;
-          background-color: ${(0, _definitions.hex2rgba)(theme.miscellaneous.overlay, 0.5)};
-          height: 100vh;
-        ` : (0, _native.css)`
-          justify-content: flex-end;
-          background-color: ${(0, _definitions.hex2rgba)(theme.miscellaneous.overlay, 0.5)};
-          height: 100%;
-        `}
-`;
-exports.Backdrop = Backdrop;
-const ModalContent = _native.default.View`
-  background-color: transparent;
-  padding-bottom: ${({
-  offset
-}) => `${(0, _utils.RFValue)(offset)}px`};
-  ${({
-  theme: {
-    borderRadius
-  }
-}) => (0, _native.css)`
-    ${isWeb ? `
-      border-radius: ${borderRadius.micro};
-    ` : `
-      border-top-left-radius: ${borderRadius.deca};
-      border-top-right-radius: ${borderRadius.deca};
-    `}
-  `}
-  overflow: hidden;
-`;
-exports.ModalContent = ModalContent;
-
 const getStyledTextComponent = component => {
   return (0, _native.default)(component)(props => {
     var _props$theme;

package/dist/components/molecules/DatePicker/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DatePicker/styled.ts"],"names":["isWeb","Platform","OS","Backdrop","PressableSurface","theme","miscellaneous","overlay","ModalContent","styled","View","offset","borderRadius","micro","deca","getStyledTextComponent","component","props","typography","h5","lineHeight","CalendarIcon","Icon","spacing","centi","color","secondary","medium"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAGA,MAAMA,KAAK,GAAGC,sBAASC,EAAT,KAAgB,KAA9B;AAEO,MAAMC,QAAQ,GAAG,qBAAOC,kCAAP,CAA8C;AACtE,IAAI,CAAC;AAAEC,EAAAA;AAAF,CAAD,KACAL,KAAK,GACD,gBAAI;AACZ;AACA;AACA,8BAA8B,2BAASK,KAAK,CAACC,aAAN,CAAoBC,OAA7B,EAAsC,GAAtC,CAA2C;AACzE;AACA,SANS,GAOD,gBAAI;AACZ;AACA,8BAA8B,2BAASF,KAAK,CAACC,aAAN,CAAoBC,OAA7B,EAAsC,GAAtC,CAA2C;AACzE;AACA,SAAU;AACV,CAdO;;AAgBA,MAAMC,YAAY,GAAGC,gBAAOC,IAEjC;AACF;AACA,oBAAoB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAiB,GAAE,oBAAQA,MAAR,CAAgB,IAAI;AAC3D,IAAI,CAAC;AAAEN,EAAAA,KAAK,EAAE;AAAEO,IAAAA;AAAF;AAAT,CAAD,KAAiC,gBAAI;AACzC,MAAMZ,KAAK,GACF;AACT,uBAAuBY,YAAY,CAACC,KAAM;AAC1C,KAHW,GAIF;AACT,gCAAgCD,YAAY,CAACE,IAAK;AAClD,iCAAiCF,YAAY,CAACE,IAAK;AACnD,KAAM;AACN,GAAI;AACJ;AACA,CAhBO;;;AAkBA,MAAMC,sBAAsB,GAAIC,SAAD,IAA8B;AAClE,SAAO,qBAAOA,SAAP,EACJC,KAAD;AAAA;;AAAA,WAA+D,gBAAI;AACvE,qBADsE,gBACjDA,KAAK,CAACZ,KAD2C,iDACjD,aAAaa,UAAb,CAAwBC,EAAxB,CAA2BC,UAAW;AAC3D,QAAQ,gCAAoBH,KAApB,CAA2B;AACnC,KAHI;AAAA,GADK,CAAP;AAMD,CAPM;;;AASA,MAAMI,YAAY,GAAG,qBAAOC,UAAP,CAAkC;AAC9D,aAAa,CAAC;AAAEjB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACkB,OAAN,CAAcC,KAAM;AAChD,WAAW,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACoB,KAAN,CAAYC,SAAZ,CAAsBC,MAAO;AACvD,CAHO","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { Platform } from 'react-native';\nimport { hex2rgba } from '../../../styles/definitions';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValue } from '../../../utils';\nimport { Icon } from '../../atoms/Icon';\nimport { disabledInputStyles, InputContainerProps } from '../../atoms/Input';\nimport { PressableSurface } from '../../atoms/PressableSurface';\nimport { TextProps } from '../../atoms/Text';\n\nconst isWeb = Platform.OS === 'web';\n\nexport const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`\n  ${({ theme }) =>\n    isWeb\n      ? css`\n          justify-content: center;\n          align-items: center;\n          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};\n          height: 100vh;\n        `\n      : css`\n          justify-content: flex-end;\n          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};\n          height: 100%;\n        `}\n`;\n\nexport const ModalContent = styled.View<\n  { offset: number } & Partial<StyleProps>\n>`\n  background-color: transparent;\n  padding-bottom: ${({ offset }) => `${RFValue(offset)}px`};\n  ${({ theme: { borderRadius } }) => css`\n    ${isWeb\n      ? `\n      border-radius: ${borderRadius.micro};\n    `\n      : `\n      border-top-left-radius: ${borderRadius.deca};\n      border-top-right-radius: ${borderRadius.deca};\n    `}\n  `}\n  overflow: hidden;\n`;\n\nexport const getStyledTextComponent = (component: FC<TextProps>) => {\n  return styled(component)(\n    (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`\n      line-height: ${props.theme?.typography.h5.lineHeight};\n      ${disabledInputStyles(props)}\n    `\n  );\n};\n\nexport const CalendarIcon = styled(Icon)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi};\n  color: ${({ theme }) => theme.color.secondary.medium};\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/styled.ts"],"names":["getStyledTextComponent","component","props","theme","typography","h5","lineHeight","CalendarIcon","Icon","spacing","centi","color","secondary","medium"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;;;;;AAGO,MAAMA,sBAAsB,GAAIC,SAAD,IAA8B;AAClE,SAAO,qBAAOA,SAAP,EACJC,KAAD;AAAA;;AAAA,WAA+D,gBAAI;AACvE,qBADsE,gBACjDA,KAAK,CAACC,KAD2C,iDACjD,aAAaC,UAAb,CAAwBC,EAAxB,CAA2BC,UAAW;AAC3D,QAAQ,gCAAoBJ,KAApB,CAA2B;AACnC,KAHI;AAAA,GADK,CAAP;AAMD,CAPM;;;AASA,MAAMK,YAAY,GAAG,qBAAOC,UAAP,CAAkC;AAC9D,aAAa,CAAC;AAAEL,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACM,OAAN,CAAcC,KAAM;AAChD,WAAW,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACQ,KAAN,CAAYC,SAAZ,CAAsBC,MAAO;AACvD,CAHO","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { StyleProps } from '../../../types/defaults';\nimport { Icon } from '../../atoms/Icon';\nimport { disabledInputStyles, InputContainerProps } from '../../atoms/Input';\nimport { TextProps } from '../../atoms/Text';\n\nexport const getStyledTextComponent = (component: FC<TextProps>) => {\n  return styled(component)(\n    (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`\n      line-height: ${props.theme?.typography.h5.lineHeight};\n      ${disabledInputStyles(props)}\n    `\n  );\n};\n\nexport const CalendarIcon = styled(Icon)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi};\n  color: ${({ theme }) => theme.color.secondary.medium};\n`;\n"],"file":"styled.js"}

package/dist/components/molecules/DateTimePicker/DateTimePicker.d.ts

@@ -1,16 +1,17 @@
 import * as React from 'react';
-import { ModalBaseProps } from 'react-native';
 import { InputContainerProps } from '../../atoms/Input';
 import { TextProps } from '../../atoms/Text';
 import { DateTimeSelectorProps } from '../DateTimeSelector';
-import { DateTimePickerModalProps } from './Modal';
-export interface DateTimePickerProps extends InputContainerProps, DateTimePickerModalProps, Omit<DateTimeSelectorProps, 'style'> {
+export interface DateTimePickerProps extends InputContainerProps, Omit<DateTimeSelectorProps, 'style'> {
     controlComponent?: (onPress: () => void, displayValue?: string) => JSX.Element;
     TextComponent?: React.FC<TextProps>;
-    animationType?: ModalBaseProps['animationType'];
+    DateTimeSelectorComponent: React.FC<DateTimeSelectorProps>;
     placeholder?: string;
     onFocus?: () => void | never;
     onBlur?: () => void | never;
+    renderSelector: (selector: React.ReactElement, blur?: () => void) => JSX.Element | null;
+    requestShowSelector: () => void;
+    requestCloseSelector: () => void;
 }
 declare const DateTimePicker: React.FC<DateTimePickerProps>;
 export default DateTimePicker;

package/dist/components/molecules/DateTimePicker/DateTimePicker.js

@@ -15,10 +15,12 @@ var _Text = require("../../atoms/Text");
 
 var _styled = require("../DatePicker/styled");
 
-var _Modal = require("./Modal");
+var _DateTimeSelector = require("../DateTimeSelector");
 
 var _HintInputContainer = require("../HintInputContainer");
 
+var _styled2 = require("./styled");
+
 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; }
@@ -54,11 +56,12 @@ const DateTimePicker = ({
   hint,
   variant = 'default',
   TextComponent = _Text.Text,
-  DateTimeSelectorComponent,
-  bottomOffset,
+  DateTimeSelectorComponent = _DateTimeSelector.DateTimeSelector,
   rightComponent,
-  animationType = 'fade',
   style,
+  renderSelector,
+  requestShowSelector,
+  requestCloseSelector,
   ...rest
 }) => {
   const {
@@ -66,47 +69,23 @@ const DateTimePicker = ({
     handleBlur,
     handleFocus
   } = (0, _Input.useInputFocus)(onFocus, onBlur, !disabled);
-  const [modalVisible, setModalVisible] = React.useState(false);
 
-  const handlePressInput = () => {
-    setModalVisible(true);
+  const handleShowSelector = () => {
+    requestShowSelector();
     handleFocus();
   };
 
-  const handleCloseModal = () => {
-    setModalVisible(false);
-    handleBlur();
+  const handleChoosing = value => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    requestCloseSelector();
   };
 
   const StyledText = (0, _styled.getStyledTextComponent)(TextComponent);
   const displayValue = (value ? (0, _dateFns.format)(value, format, {
     locale: locale
   }) : placeholder) || ' ';
-  return React.createElement(React.Fragment, null, controlComponent ? controlComponent(handlePressInput, displayValue) : React.createElement(_HintInputContainer.HintInputContainer, _extends({
-    focused: focused,
-    viewStyle: style,
-    onPress: handlePressInput,
-    disabled: disabled,
-    LabelComponent: TextComponent,
-    variant: variant,
-    hint: hint,
-    hintComponent: hintComponent,
-    rightComponent: React.createElement(React.Fragment, null, React.createElement(_styled.CalendarIcon, {
-      name: "calendar-sharp",
-      type: "ionicon",
-      size: "centi"
-    }), rightComponent)
-  }, rest), React.createElement(StyledText, {
-    fontWeight: "bold",
-    disabled: disabled
-  }, displayValue)), React.createElement(_Modal.Modal, {
-    DateTimeSelectorComponent: DateTimeSelectorComponent,
-    bottomOffset: bottomOffset,
-    visible: modalVisible,
-    onRequestClose: handleCloseModal,
-    animated: true,
-    animationType: animationType,
-    onChange: onChange,
+  const StyledDateTimeSelector = (0, _styled2.getStyledDateTimeSelector)(DateTimeSelectorComponent);
+  const dateTimeSelector = React.createElement(StyledDateTimeSelector, {
     value: value,
     mode: mode,
     format: format,
@@ -124,8 +103,27 @@ const DateTimePicker = ({
     monthLabel: monthLabel,
     yearLabel: yearLabel,
     hourLabel: hourLabel,
-    minuteLabel: minuteLabel
-  }));
+    minuteLabel: minuteLabel,
+    onChange: handleChoosing
+  });
+  return React.createElement(React.Fragment, null, controlComponent ? controlComponent(handleShowSelector, displayValue) : React.createElement(_HintInputContainer.HintInputContainer, _extends({
+    focused: focused,
+    viewStyle: style,
+    onPress: handleShowSelector,
+    disabled: disabled,
+    LabelComponent: TextComponent,
+    variant: variant,
+    hint: hint,
+    hintComponent: hintComponent,
+    rightComponent: React.createElement(React.Fragment, null, React.createElement(_styled.CalendarIcon, {
+      name: "calendar-sharp",
+      type: "ionicon",
+      size: "centi"
+    }), rightComponent)
+  }, rest), React.createElement(StyledText, {
+    fontWeight: "bold",
+    disabled: disabled
+  }, displayValue)), renderSelector(dateTimeSelector, handleBlur));
 };
 
 var _default = DateTimePicker;

package/dist/components/molecules/DateTimePicker/DateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","onChange","value","mode","format","locale","upperDateThreshold","lowerDateThreshold","offsetThreshold","upperOffsetThreshold","lowerOffsetThreshold","dateModalTitle","timeModalTitle","dateConfirmButtonText","timeConfirmButtonText","dayLabel","monthLabel","yearLabel","hourLabel","minuteLabel","placeholder","onFocus","onBlur","disabled","controlComponent","hintComponent","hint","variant","TextComponent","Text","DateTimeSelectorComponent","bottomOffset","rightComponent","animationType","style","rest","focused","handleBlur","handleFocus","modalVisible","setModalVisible","React","useState","handlePressInput","handleCloseModal","StyledText","displayValue"],"mappings":"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","sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { ModalBaseProps } from 'react-native';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarIcon, getStyledTextComponent } from '../DatePicker/styled';\nimport { DateTimeSelectorProps } from '../DateTimeSelector';\nimport { DateTimePickerModalProps, Modal } from './Modal';\nimport { HintInputContainer } from '../HintInputContainer';\n\nexport interface DateTimePickerProps\n  extends InputContainerProps,\n    DateTimePickerModalProps,\n    Omit<DateTimeSelectorProps, 'style'> {\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  TextComponent?: React.FC<TextProps>;\n  animationType?: ModalBaseProps['animationType'];\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n}\n\nconst DateTimePicker: React.FC<DateTimePickerProps> = ({\n  onChange,\n  value,\n  mode = 'date',\n  format = 'yyyy-MM-dd hh:mm:ss',\n  locale,\n  upperDateThreshold,\n  lowerDateThreshold,\n  offsetThreshold,\n  upperOffsetThreshold,\n  lowerOffsetThreshold,\n\n  dateModalTitle,\n  timeModalTitle,\n  dateConfirmButtonText,\n  timeConfirmButtonText,\n  dayLabel,\n  monthLabel,\n  yearLabel,\n  hourLabel,\n  minuteLabel,\n\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  controlComponent,\n  hintComponent,\n  hint,\n  variant = 'default',\n  TextComponent = Text,\n  DateTimeSelectorComponent,\n  bottomOffset,\n  rightComponent,\n  animationType = 'fade',\n  style,\n  ...rest\n}) => {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const [modalVisible, setModalVisible] = React.useState(false);\n\n  const handlePressInput = () => {\n    setModalVisible(true);\n    handleFocus();\n  };\n\n  const handleCloseModal = () => {\n    setModalVisible(false);\n    handleBlur();\n  };\n\n  const StyledText = getStyledTextComponent(TextComponent);\n  const displayValue =\n    (value ? formatDate(value, format, { locale: locale }) : placeholder) ||\n    ' ';\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handlePressInput, displayValue)\n      ) : (\n        <HintInputContainer\n          focused={focused}\n          viewStyle={style}\n          onPress={handlePressInput}\n          disabled={disabled}\n          LabelComponent={TextComponent}\n          variant={variant}\n          hint={hint}\n          hintComponent={hintComponent}\n          rightComponent={\n            <>\n              <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledText fontWeight=\"bold\" disabled={disabled}>\n            {displayValue}\n          </StyledText>\n        </HintInputContainer>\n      )}\n      <Modal\n        DateTimeSelectorComponent={DateTimeSelectorComponent}\n        bottomOffset={bottomOffset}\n        visible={modalVisible}\n        onRequestClose={handleCloseModal}\n        animated\n        animationType={animationType}\n        onChange={onChange}\n        value={value}\n        mode={mode}\n        format={format}\n        locale={locale}\n        upperDateThreshold={upperDateThreshold}\n        lowerDateThreshold={lowerDateThreshold}\n        offsetThreshold={offsetThreshold}\n        upperOffsetThreshold={upperOffsetThreshold}\n        lowerOffsetThreshold={lowerOffsetThreshold}\n        dateModalTitle={dateModalTitle}\n        timeModalTitle={timeModalTitle}\n        dateConfirmButtonText={dateConfirmButtonText}\n        timeConfirmButtonText={timeConfirmButtonText}\n        dayLabel={dayLabel}\n        monthLabel={monthLabel}\n        yearLabel={yearLabel}\n        hourLabel={hourLabel}\n        minuteLabel={minuteLabel}\n      />\n    </>\n  );\n};\n\nexport default DateTimePicker;\n"],"file":"DateTimePicker.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","onChange","value","mode","format","locale","upperDateThreshold","lowerDateThreshold","offsetThreshold","upperOffsetThreshold","lowerOffsetThreshold","dateModalTitle","timeModalTitle","dateConfirmButtonText","timeConfirmButtonText","dayLabel","monthLabel","yearLabel","hourLabel","minuteLabel","placeholder","onFocus","onBlur","disabled","controlComponent","hintComponent","hint","variant","TextComponent","Text","DateTimeSelectorComponent","DateTimeSelector","rightComponent","style","renderSelector","requestShowSelector","requestCloseSelector","rest","focused","handleBlur","handleFocus","handleShowSelector","handleChoosing","StyledText","displayValue","StyledDateTimeSelector","dateTimeSelector"],"mappings":"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","sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarIcon, getStyledTextComponent } from '../DatePicker/styled';\nimport { DateTimeSelector, DateTimeSelectorProps } from '../DateTimeSelector';\nimport { HintInputContainer } from '../HintInputContainer';\nimport { getStyledDateTimeSelector } from './styled';\n\nexport interface DateTimePickerProps extends InputContainerProps, Omit<DateTimeSelectorProps, 'style'> {\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  TextComponent?: React.FC<TextProps>;\n  DateTimeSelectorComponent: React.FC<DateTimeSelectorProps>;\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n  renderSelector: (selector: React.ReactElement, blur?: () => void) => JSX.Element|null\n  requestShowSelector: () => void\n  requestCloseSelector: () => void\n}\n\nconst DateTimePicker: React.FC<DateTimePickerProps> = ({\n  onChange,\n  value,\n  mode = 'date',\n  format = 'yyyy-MM-dd hh:mm:ss',\n  locale,\n  upperDateThreshold,\n  lowerDateThreshold,\n  offsetThreshold,\n  upperOffsetThreshold,\n  lowerOffsetThreshold,\n  dateModalTitle,\n  timeModalTitle,\n  dateConfirmButtonText,\n  timeConfirmButtonText,\n  dayLabel,\n  monthLabel,\n  yearLabel,\n  hourLabel,\n  minuteLabel,\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  controlComponent,\n  hintComponent,\n  hint,\n  variant = 'default',\n  TextComponent = Text,\n  DateTimeSelectorComponent = DateTimeSelector,\n  rightComponent,\n  style,\n  renderSelector,\n  requestShowSelector,\n  requestCloseSelector,\n  ...rest\n}) => {\n  \n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const handleShowSelector = () => {\n    requestShowSelector()\n    handleFocus();\n  };\n\n  const handleChoosing = (value: Date) => {\n    onChange?.(value)\n    requestCloseSelector()\n  };\n\n  const StyledText = getStyledTextComponent(TextComponent);\n  const displayValue = (value ? formatDate(value, format, { locale: locale }) : placeholder) || ' ';\n  const StyledDateTimeSelector = getStyledDateTimeSelector(DateTimeSelectorComponent)\n\n  const dateTimeSelector = (\n    <StyledDateTimeSelector\n      value={value}\n      mode={mode}\n      format={format}\n      locale={locale}\n      upperDateThreshold={upperDateThreshold}\n      lowerDateThreshold={lowerDateThreshold}\n      offsetThreshold={offsetThreshold}\n      upperOffsetThreshold={upperOffsetThreshold}\n      lowerOffsetThreshold={lowerOffsetThreshold}\n      dateModalTitle={dateModalTitle}\n      timeModalTitle={timeModalTitle}\n      dateConfirmButtonText={dateConfirmButtonText}\n      timeConfirmButtonText={timeConfirmButtonText}\n      dayLabel={dayLabel}\n      monthLabel={monthLabel}\n      yearLabel={yearLabel}\n      hourLabel={hourLabel}\n      minuteLabel={minuteLabel}\n      onChange={handleChoosing}\n    />\n  )\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handleShowSelector, displayValue)\n      ) : (\n        <HintInputContainer\n          focused={focused}\n          viewStyle={style}\n          onPress={handleShowSelector}\n          disabled={disabled}\n          LabelComponent={TextComponent}\n          variant={variant}\n          hint={hint}\n          hintComponent={hintComponent}\n          rightComponent={\n            <>\n              <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledText fontWeight=\"bold\" disabled={disabled}>\n            {displayValue}\n          </StyledText>\n        </HintInputContainer>\n      )}\n      {renderSelector(dateTimeSelector, handleBlur)}\n    </>\n  );\n};\n\nexport default DateTimePicker;\n"],"file":"DateTimePicker.js"}

package/dist/components/molecules/DateTimePicker/styled.d.ts

@@ -1,26 +1,5 @@
 import { FC } from 'react';
-import { PressableSurfaceProps } from '../../atoms/PressableSurface';
 import { DateTimeSelectorProps } from '../DateTimeSelector';
-export declare const StyledPressableSurface: import("@emotion/native").StyledComponent<PressableSurfaceProps & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {}>;
-export declare const Backdrop: import("@emotion/native").StyledComponent<PressableSurfaceProps & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {}>;
-export declare const ModalContent: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    offset: number;
-} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
-    ref?: import("react").Ref<import("react-native").View> | undefined;
-}>;
 export declare const getStyledDateTimeSelector: (component: FC<DateTimeSelectorProps>) => import("@emotion/native").StyledComponent<DateTimeSelectorProps & {
     children?: import("react").ReactNode;
 } & {

package/dist/components/molecules/DateTimePicker/styled.js

@@ -3,59 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getStyledDateTimeSelector = exports.ModalContent = exports.Backdrop = exports.StyledPressableSurface = void 0;
+exports.getStyledDateTimeSelector = void 0;
 
-var _native = _interopRequireWildcard(require("@emotion/native"));
+var _native = _interopRequireDefault(require("@emotion/native"));
 
-var _reactNative = require("react-native");
-
-var _utils = require("../../../utils");
-
-var _PressableSurface = require("../../atoms/PressableSurface");
-
-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; }
-
-const isWeb = _reactNative.Platform.OS === 'web';
-const StyledPressableSurface = (0, _native.default)(_PressableSurface.PressableSurface)`
-  width: 100%;
-`;
-exports.StyledPressableSurface = StyledPressableSurface;
-const Backdrop = (0, _native.default)(_PressableSurface.PressableSurface)`
-  ${isWeb ? (0, _native.css)`
-        justify-content: center;
-        align-items: center;
-        background-color: rgba(0, 0, 0, 0.5);
-        height: 100vh;
-      ` : (0, _native.css)`
-        justify-content: flex-end;
-        background-color: rgba(0, 0, 0, 0.5);
-        height: 100%;
-      `}
-`;
-exports.Backdrop = Backdrop;
-const ModalContent = _native.default.View`
-  background-color: transparent;
-  padding-bottom: ${({
-  offset
-}) => `${(0, _utils.RFValue)(offset)}px`};
-  ${({
-  theme: {
-    borderRadius
-  }
-}) => (0, _native.css)`
-    ${isWeb ? `
-      width: ${(0, _utils.RFValueStr)('375px')};
-      border-radius: ${borderRadius.micro};
-    ` : `
-      border-top-left-radius: ${borderRadius.deca};
-      border-top-right-radius: ${borderRadius.deca};
-    `}
-  `}
-  overflow: hidden;
-`;
-exports.ModalContent = ModalContent;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const getStyledDateTimeSelector = component => {
   return (0, _native.default)(component)`

package/dist/components/molecules/DateTimePicker/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/styled.ts"],"names":["isWeb","Platform","OS","StyledPressableSurface","PressableSurface","Backdrop","ModalContent","styled","View","offset","theme","borderRadius","micro","deca","getStyledDateTimeSelector","component","spacing"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AACA;;;;;;AAMA,MAAMA,KAAK,GAAGC,sBAASC,EAAT,KAAgB,KAA9B;AAEO,MAAMC,sBAAsB,GAAG,qBACpCC,kCADoC,CAEb;AACzB;AACA,CAJO;;AAMA,MAAMC,QAAQ,GAAG,qBAAOD,kCAAP,CAA8C;AACtE,IAAIJ,KAAK,GACH,gBAAI;AACV;AACA;AACA;AACA;AACA,OANS,GAOH,gBAAI;AACV;AACA;AACA;AACA,OAAQ;AACR,CAbO;;AAeA,MAAMM,YAAY,GAAGC,gBAAOC,IAEjC;AACF;AACA,oBAAoB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAiB,GAAE,oBAAQA,MAAR,CAAgB,IAAI;AAC3D,IAAI,CAAC;AAAEC,EAAAA,KAAK,EAAE;AAAEC,IAAAA;AAAF;AAAT,CAAD,KAAiC,gBAAI;AACzC,MAAMX,KAAK,GACF;AACT,eAAe,uBAAW,OAAX,CAAoB;AACnC,uBAAuBW,YAAY,CAACC,KAAM;AAC1C,KAJW,GAKF;AACT,gCAAgCD,YAAY,CAACE,IAAK;AAClD,iCAAiCF,YAAY,CAACE,IAAK;AACnD,KAAM;AACN,GAAI;AACJ;AACA,CAjBO;;;AAmBA,MAAMC,yBAAyB,GACpCC,SADuC,IAEpC;AACH,SAAO,qBAAOA,SAAP,CAAuC;AAChD,eAAe,CAAC;AAAEL,IAAAA;AAAF,GAAD,KAAeA,KAAK,CAACM,OAAN,CAAcH,IAAK;AACjD,GAFE;AAGD,CANM","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { Platform } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValue, RFValueStr } from '../../../utils';\nimport {\n  PressableSurface,\n  PressableSurfaceProps\n} from '../../atoms/PressableSurface';\nimport { DateTimeSelectorProps } from '../DateTimeSelector';\n\nconst isWeb = Platform.OS === 'web';\n\nexport const StyledPressableSurface = styled(\n  PressableSurface\n)<PressableSurfaceProps>`\n  width: 100%;\n`;\n\nexport const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`\n  ${isWeb\n    ? css`\n        justify-content: center;\n        align-items: center;\n        background-color: rgba(0, 0, 0, 0.5);\n        height: 100vh;\n      `\n    : css`\n        justify-content: flex-end;\n        background-color: rgba(0, 0, 0, 0.5);\n        height: 100%;\n      `}\n`;\n\nexport const ModalContent = styled.View<\n  { offset: number } & Partial<StyleProps>\n>`\n  background-color: transparent;\n  padding-bottom: ${({ offset }) => `${RFValue(offset)}px`};\n  ${({ theme: { borderRadius } }) => css`\n    ${isWeb\n      ? `\n      width: ${RFValueStr('375px')};\n      border-radius: ${borderRadius.micro};\n    `\n      : `\n      border-top-left-radius: ${borderRadius.deca};\n      border-top-right-radius: ${borderRadius.deca};\n    `}\n  `}\n  overflow: hidden;\n`;\n\nexport const getStyledDateTimeSelector = (\n  component: FC<DateTimeSelectorProps>\n) => {\n  return styled(component)<Partial<StyleProps>>`\n    padding: ${({ theme }) => theme.spacing.deca};\n  `;\n};\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/styled.ts"],"names":["getStyledDateTimeSelector","component","theme","spacing","deca"],"mappings":";;;;;;;AAAA;;;;AAKO,MAAMA,yBAAyB,GACpCC,SADuC,IAEpC;AACH,SAAO,qBAAOA,SAAP,CAAuC;AAChD,eAAe,CAAC;AAAEC,IAAAA;AAAF,GAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACjD,GAFE;AAGD,CANM","sourcesContent":["import styled from '@emotion/native';\nimport { FC } from 'react';\nimport { StyleProps } from '../../../types/defaults';\nimport { DateTimeSelectorProps } from '../DateTimeSelector';\n\nexport const getStyledDateTimeSelector = (\n  component: FC<DateTimeSelectorProps>\n) => {\n  return styled(component)<Partial<StyleProps>>`\n    padding: ${({ theme }) => theme.spacing.deca};\n  `;\n};\n"],"file":"styled.js"}

package/dist/components/molecules/Grid/Item/Item.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SpacingType } from '@tecsinapse/react-core';
+import { SpacingType } from '../../../../types/defaults';
 declare type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
 declare type FlexAlignBase = FlexPositioning | 'stretch';
 declare type FlexAlignType = FlexAlignBase | 'baseline';

package/dist/components/molecules/Grid/Item/Item.js

@@ -7,10 +7,12 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactCore = require("@tecsinapse/react-core");
-
 var _reactNative = require("react-native");
 
+var _hooks = require("../../../../hooks");
+
+var _utils = require("../../../../utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const GridItem = ({
@@ -25,7 +27,7 @@ const GridItem = ({
 }) => {
   const {
     spacing
-  } = (0, _reactCore.useTheme)();
+  } = (0, _hooks.useTheme)();
 
   if (!_react.default.Children.only(children)) {
     throw new Error('The number of children in GridItem should be one');
@@ -37,8 +39,8 @@ const GridItem = ({
 
   const getPadding = pos => {
     if (_spacing) {
-      if (typeof _spacing === 'string') return (0, _reactCore.extractNumbersFromString)(spacing[_spacing]);else if (typeof _spacing === 'object' && _spacing[pos]) {
-        return (0, _reactCore.extractNumbersFromString)(spacing[_spacing[pos]]);
+      if (typeof _spacing === 'string') return (0, _utils.extractNumbersFromString)(spacing[_spacing]);else if (typeof _spacing === 'object' && _spacing[pos]) {
+        return (0, _utils.extractNumbersFromString)(spacing[_spacing[pos]]);
       } else return undefined;
     } else return undefined;
   };

package/dist/components/molecules/Grid/Item/Item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/molecules/Grid/Item/Item.tsx"],"names":["GridItem","children","span","columns","loadingComponent","loading","spacing","_spacing","wrapper","rest","React","Children","only","Error","getPadding","pos","undefined","style","boxSizing","flexBasis","paddingTop","paddingBottom","paddingRight","paddingLeft","clone","cloneElement","props"],"mappings":";;;;;;;AAAA;;AACA;;AAKA;;;;AAwCA,MAAMA,QAAQ,GAAG,CAAC;AAChBC,EAAAA,QADgB;AAEhBC,EAAAA,IAFgB;AAGhBC,EAAAA,OAAO,GAAG,EAHM;AAIhBC,EAAAA,gBAJgB;AAKhBC,EAAAA,OAAO,GAAG,KALM;AAMhBC,EAAAA,OAAO,EAAEC,QANO;AAOhBC,EAAAA,OAAO,GAAG,KAPM;AAQhB,KAAGC;AARa,CAAD,KASA;AACf,QAAM;AAAEH,IAAAA;AAAF,MAAc,0BAApB;;AACA,MAAI,CAACI,eAAMC,QAAN,CAAeC,IAAf,CAAoBX,QAApB,CAAL,EAAoC;AAClC,UAAM,IAAIY,KAAJ,CAAU,kDAAV,CAAN;AACD;;AACD,MAAIT,gBAAgB,IAAIC,OAAxB,EAAiC;AAC/B,WAAOD,gBAAP;AACD;;AAED,QAAMU,UAAU,GAAIC,GAAD,IAA0B;AAC3C,QAAIR,QAAJ,EAAc;AACZ,UAAI,OAAOA,QAAP,KAAoB,QAAxB,EACE,OAAO,yCAAyBD,OAAO,CAACC,QAAD,CAAhC,CAAP,CADF,KAEK,IAAI,OAAOA,QAAP,KAAoB,QAApB,IAAgCA,QAAQ,CAACQ,GAAD,CAA5C,EAAmD;AACtD,eAAO,yCAAyBT,OAAO,CAACC,QAAQ,CAACQ,GAAD,CAAT,CAAhC,CAAP;AACD,OAFI,MAEE,OAAOC,SAAP;AACR,KAND,MAMO,OAAOA,SAAP;AACR,GARD;;AAUA,QAAMC,KAAK,GAAG,EACZ,GAAGR,IADS;AAEZS,IAAAA,SAAS,EAAE,YAFC;AAGZC,IAAAA,SAAS,EAAG,GAAE,OAAOhB,OAAO,GAAGD,IAAjB,CAAuB,GAHzB;AAIZkB,IAAAA,UAAU,EAAEN,UAAU,CAAC,KAAD,CAJV;AAKZO,IAAAA,aAAa,EAAEP,UAAU,CAAC,QAAD,CALb;AAMZQ,IAAAA,YAAY,EAAER,UAAU,CAAC,OAAD,CANZ;AAOZS,IAAAA,WAAW,EAAET,UAAU,CAAC,MAAD;AAPX,GAAd;;AAUA,QAAMU,KAAK,GAAGd,eAAMe,YAAN,CAAmBxB,QAAnB,EAA6B,EACzC,IAAGA,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEyB,KAAb,CADyC;AAEzCT,IAAAA,KAAK,EAAET,OAAO,GACVP,QADU,aACVA,QADU,uBACVA,QAAQ,CAAEyB,KAAV,CAAgBT,KADN,GAEV,EAAE,GAAGA,KAAL;AAAY,UAAGhB,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEyB,KAAV,CAAgBT,KAAnB;AAAZ;AAJqC,GAA7B,CAAd;;AAOA,SAAOT,OAAO,GAAG,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAES;AAAb,KAAqBO,KAArB,CAAH,GAAwCA,KAAtD;AACD,CA9CD;;eAgDexB,Q","sourcesContent":["import React from 'react';\nimport {\n  extractNumbersFromString,\n  SpacingType,\n  useTheme,\n} from '@tecsinapse/react-core';\nimport { View } from 'react-native';\n\ntype FlexPositioning = 'flex-start' | 'flex-end' | 'center';\ntype FlexAlignBase = FlexPositioning | 'stretch';\ntype FlexAlignType = FlexAlignBase | 'baseline';\ntype FlexSpacing = 'space-between' | 'space-around';\n\ntype PaddingPosition = 'top' | 'right' | 'bottom' | 'left';\n\nexport interface IGridItem {\n  children: React.ReactElement;\n  /** Number of columns to fill */\n  span: number;\n  /** You don't have to give this property since is inherited from Grid */\n  columns?: number;\n  loading?: boolean;\n  /** If your GridItem has a loading state, specify the component here (Skeleton) */\n  loadingComponent?: React.ReactElement;\n  /** Flex properties below */\n  alignContent?: FlexAlignBase | FlexSpacing;\n  alignItems?: FlexAlignType;\n  alignSelf?: 'auto' | FlexAlignType;\n  flex?: number;\n  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';\n  flexGrow?: number;\n  flexShrink?: number;\n  justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';\n  /** You don't have to give this property since is inherited from Grid */\n  spacing?:\n    | SpacingType\n    | {\n        top?: SpacingType;\n        right?: SpacingType;\n        bottom?: SpacingType;\n        left?: SpacingType;\n      };\n  /** Used to wrap children in a View when its style extrapolates the dimensions*/\n  wrapper?: boolean;\n}\n\nconst GridItem = ({\n  children,\n  span,\n  columns = 12,\n  loadingComponent,\n  loading = false,\n  spacing: _spacing,\n  wrapper = false,\n  ...rest\n}: IGridItem) => {\n  const { spacing } = useTheme();\n  if (!React.Children.only(children)) {\n    throw new Error('The number of children in GridItem should be one');\n  }\n  if (loadingComponent && loading) {\n    return loadingComponent;\n  }\n\n  const getPadding = (pos: PaddingPosition) => {\n    if (_spacing) {\n      if (typeof _spacing === 'string')\n        return extractNumbersFromString(spacing[_spacing]);\n      else if (typeof _spacing === 'object' && _spacing[pos]) {\n        return extractNumbersFromString(spacing[_spacing[pos]!]);\n      } else return undefined;\n    } else return undefined;\n  };\n\n  const style = {\n    ...rest,\n    boxSizing: 'border-box',\n    flexBasis: `${100 / (columns / span)}%`,\n    paddingTop: getPadding('top'),\n    paddingBottom: getPadding('bottom'),\n    paddingRight: getPadding('right'),\n    paddingLeft: getPadding('left'),\n  };\n\n  const clone = React.cloneElement(children, {\n    ...children?.props,\n    style: wrapper\n      ? children?.props.style\n      : { ...style, ...children?.props.style },\n  });\n\n  return wrapper ? <View style={style}>{clone}</View> : clone;\n};\n\nexport default GridItem;\n"],"file":"Item.js"}
+{"version":3,"sources":["../../../../../src/components/molecules/Grid/Item/Item.tsx"],"names":["GridItem","children","span","columns","loadingComponent","loading","spacing","_spacing","wrapper","rest","React","Children","only","Error","getPadding","pos","undefined","style","boxSizing","flexBasis","paddingTop","paddingBottom","paddingRight","paddingLeft","clone","cloneElement","props"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;AAwCA,MAAMA,QAAQ,GAAG,CAAC;AAChBC,EAAAA,QADgB;AAEhBC,EAAAA,IAFgB;AAGhBC,EAAAA,OAAO,GAAG,EAHM;AAIhBC,EAAAA,gBAJgB;AAKhBC,EAAAA,OAAO,GAAG,KALM;AAMhBC,EAAAA,OAAO,EAAEC,QANO;AAOhBC,EAAAA,OAAO,GAAG,KAPM;AAQhB,KAAGC;AARa,CAAD,KASA;AACf,QAAM;AAAEH,IAAAA;AAAF,MAAc,sBAApB;;AACA,MAAI,CAACI,eAAMC,QAAN,CAAeC,IAAf,CAAoBX,QAApB,CAAL,EAAoC;AAClC,UAAM,IAAIY,KAAJ,CAAU,kDAAV,CAAN;AACD;;AACD,MAAIT,gBAAgB,IAAIC,OAAxB,EAAiC;AAC/B,WAAOD,gBAAP;AACD;;AAED,QAAMU,UAAU,GAAIC,GAAD,IAA0B;AAC3C,QAAIR,QAAJ,EAAc;AACZ,UAAI,OAAOA,QAAP,KAAoB,QAAxB,EACE,OAAO,qCAAyBD,OAAO,CAACC,QAAD,CAAhC,CAAP,CADF,KAEK,IAAI,OAAOA,QAAP,KAAoB,QAApB,IAAgCA,QAAQ,CAACQ,GAAD,CAA5C,EAAmD;AACtD,eAAO,qCAAyBT,OAAO,CAACC,QAAQ,CAACQ,GAAD,CAAT,CAAhC,CAAP;AACD,OAFI,MAEE,OAAOC,SAAP;AACR,KAND,MAMO,OAAOA,SAAP;AACR,GARD;;AAUA,QAAMC,KAAK,GAAG,EACZ,GAAGR,IADS;AAEZS,IAAAA,SAAS,EAAE,YAFC;AAGZC,IAAAA,SAAS,EAAG,GAAE,OAAOhB,OAAO,GAAGD,IAAjB,CAAuB,GAHzB;AAIZkB,IAAAA,UAAU,EAAEN,UAAU,CAAC,KAAD,CAJV;AAKZO,IAAAA,aAAa,EAAEP,UAAU,CAAC,QAAD,CALb;AAMZQ,IAAAA,YAAY,EAAER,UAAU,CAAC,OAAD,CANZ;AAOZS,IAAAA,WAAW,EAAET,UAAU,CAAC,MAAD;AAPX,GAAd;;AAUA,QAAMU,KAAK,GAAGd,eAAMe,YAAN,CAAmBxB,QAAnB,EAA6B,EACzC,IAAGA,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEyB,KAAb,CADyC;AAEzCT,IAAAA,KAAK,EAAET,OAAO,GACVP,QADU,aACVA,QADU,uBACVA,QAAQ,CAAEyB,KAAV,CAAgBT,KADN,GAEV,EAAE,GAAGA,KAAL;AAAY,UAAGhB,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEyB,KAAV,CAAgBT,KAAnB;AAAZ;AAJqC,GAA7B,CAAd;;AAOA,SAAOT,OAAO,GAAG,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAES;AAAb,KAAqBO,KAArB,CAAH,GAAwCA,KAAtD;AACD,CA9CD;;eAgDexB,Q","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { useTheme } from '../../../../hooks';\nimport { SpacingType } from '../../../../types/defaults';\nimport { extractNumbersFromString } from '../../../../utils';\n\ntype FlexPositioning = 'flex-start' | 'flex-end' | 'center';\ntype FlexAlignBase = FlexPositioning | 'stretch';\ntype FlexAlignType = FlexAlignBase | 'baseline';\ntype FlexSpacing = 'space-between' | 'space-around';\n\ntype PaddingPosition = 'top' | 'right' | 'bottom' | 'left';\n\nexport interface IGridItem {\n  children: React.ReactElement;\n  /** Number of columns to fill */\n  span: number;\n  /** You don't have to give this property since is inherited from Grid */\n  columns?: number;\n  loading?: boolean;\n  /** If your GridItem has a loading state, specify the component here (Skeleton) */\n  loadingComponent?: React.ReactElement;\n  /** Flex properties below */\n  alignContent?: FlexAlignBase | FlexSpacing;\n  alignItems?: FlexAlignType;\n  alignSelf?: 'auto' | FlexAlignType;\n  flex?: number;\n  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';\n  flexGrow?: number;\n  flexShrink?: number;\n  justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';\n  /** You don't have to give this property since is inherited from Grid */\n  spacing?:\n    | SpacingType\n    | {\n        top?: SpacingType;\n        right?: SpacingType;\n        bottom?: SpacingType;\n        left?: SpacingType;\n      };\n  /** Used to wrap children in a View when its style extrapolates the dimensions*/\n  wrapper?: boolean;\n}\n\nconst GridItem = ({\n  children,\n  span,\n  columns = 12,\n  loadingComponent,\n  loading = false,\n  spacing: _spacing,\n  wrapper = false,\n  ...rest\n}: IGridItem) => {\n  const { spacing } = useTheme();\n  if (!React.Children.only(children)) {\n    throw new Error('The number of children in GridItem should be one');\n  }\n  if (loadingComponent && loading) {\n    return loadingComponent;\n  }\n\n  const getPadding = (pos: PaddingPosition) => {\n    if (_spacing) {\n      if (typeof _spacing === 'string')\n        return extractNumbersFromString(spacing[_spacing]);\n      else if (typeof _spacing === 'object' && _spacing[pos]) {\n        return extractNumbersFromString(spacing[_spacing[pos]!]);\n      } else return undefined;\n    } else return undefined;\n  };\n\n  const style = {\n    ...rest,\n    boxSizing: 'border-box',\n    flexBasis: `${100 / (columns / span)}%`,\n    paddingTop: getPadding('top'),\n    paddingBottom: getPadding('bottom'),\n    paddingRight: getPadding('right'),\n    paddingLeft: getPadding('left'),\n  };\n\n  const clone = React.cloneElement(children, {\n    ...children?.props,\n    style: wrapper\n      ? children?.props.style\n      : { ...style, ...children?.props.style },\n  });\n\n  return wrapper ? <View style={style}>{clone}</View> : clone;\n};\n\nexport default GridItem;\n"],"file":"Item.js"}

package/dist/components/molecules/HintInputContainer/HintInputContainer.d.ts

@@ -1,6 +1,7 @@
-import { InputVariantType, PressableInputContainerProps, TextProps } from '@tecsinapse/react-core';
-import { StyleProp, ViewStyle } from 'react-native';
 import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { InputVariantType, PressableInputContainerProps } from '../../atoms/Input';
+import { TextProps } from '../../atoms/Text';
 export interface HintInputContainerProps extends PressableInputContainerProps {
     viewStyle?: StyleProp<ViewStyle>;
     focused: boolean;

package/dist/components/molecules/HintInputContainer/HintInputContainer.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _reactCore = require("@tecsinapse/react-core");
+var React = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-var React = _interopRequireWildcard(require("react"));
+var _Input = require("../../atoms/Input");
 
 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); }
 
@@ -30,7 +30,7 @@ const HintInputContainer = ({
   hintComponent,
   ...rest
 }) => {
-  const _hint = hintComponent || React.createElement(_reactCore.Hint, {
+  const _hint = hintComponent || React.createElement(_Input.Hint, {
     TextComponent: LabelComponent,
     text: hint,
     variant: variant
@@ -38,7 +38,7 @@ const HintInputContainer = ({
 
   return React.createElement(_reactNative.View, {
     style: viewStyle
-  }, React.createElement(_reactCore.PressableInputContainer, _extends({
+  }, React.createElement(_Input.PressableInputContainer, _extends({
     onPress: onPress,
     focused: focused,
     disabled: disabled,

package/dist/components/molecules/HintInputContainer/HintInputContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/HintInputContainer/HintInputContainer.tsx"],"names":["HintInputContainer","viewStyle","onPress","focused","disabled","LabelComponent","variant","rightComponent","children","hint","hintComponent","rest","_hint"],"mappings":";;;;;;;AAAA;;AAOA;;AACA;;;;;;;;AAcA,MAAMA,kBAAqD,GAAG,CAAC;AAC7DC,EAAAA,SAD6D;AAE7DC,EAAAA,OAF6D;AAG7DC,EAAAA,OAH6D;AAI7DC,EAAAA,QAJ6D;AAK7DC,EAAAA,cAL6D;AAM7DC,EAAAA,OAAO,GAAG,SANmD;AAO7DC,EAAAA,cAP6D;AAQ7DC,EAAAA,QAR6D;AAS7DC,EAAAA,IAT6D;AAU7DC,EAAAA,aAV6D;AAW7D,KAAGC;AAX0D,CAAD,KAYxD;AACJ,QAAMC,KAAK,GAAGF,aAAa,IACzB,oBAAC,eAAD;AAAM,IAAA,aAAa,EAAEL,cAArB;AAAqC,IAAA,IAAI,EAAEI,IAA3C;AAAiD,IAAA,OAAO,EAAEH;AAA1D,IADF;;AAIA,SACE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAEL;AAAb,KACE,oBAAC,kCAAD;AACE,IAAA,OAAO,EAAEC,OADX;AAEE,IAAA,OAAO,EAAEC,OAFX;AAGE,IAAA,QAAQ,EAAEC,QAHZ;AAIE,IAAA,cAAc,EAAEC,cAJlB;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,cAAc,EAAEC;AANlB,KAOMI,IAPN,GASGH,QATH,CADF,EAYGC,IAAI,IAAIG,KAZX,CADF;AAgBD,CAjCD;;eAmCeZ,kB","sourcesContent":["import {\n  Hint,\n  InputVariantType,\n  PressableInputContainer,\n  PressableInputContainerProps,\n  TextProps,\n} from '@tecsinapse/react-core';\nimport { StyleProp, View, ViewStyle } from 'react-native';\nimport * as React from 'react';\n\nexport interface HintInputContainerProps extends PressableInputContainerProps {\n  viewStyle?: StyleProp<ViewStyle>;\n  focused: boolean;\n  LabelComponent?: React.FC<TextProps>;\n  onPress?: () => void | never;\n  disabled?: boolean;\n  hint?: string;\n  hintComponent?: JSX.Element;\n  variant?: InputVariantType;\n  rightComponent?: JSX.Element;\n}\n\nconst HintInputContainer: React.FC<HintInputContainerProps> = ({\n  viewStyle,\n  onPress,\n  focused,\n  disabled,\n  LabelComponent,\n  variant = 'default',\n  rightComponent,\n  children,\n  hint,\n  hintComponent,\n  ...rest\n}) => {\n  const _hint = hintComponent || (\n    <Hint TextComponent={LabelComponent} text={hint} variant={variant} />\n  );\n\n  return (\n    <View style={viewStyle}>\n      <PressableInputContainer\n        onPress={onPress}\n        focused={focused}\n        disabled={disabled}\n        LabelComponent={LabelComponent}\n        variant={variant}\n        rightComponent={rightComponent}\n        {...rest}\n      >\n        {children}\n      </PressableInputContainer>\n      {hint && _hint}\n    </View>\n  );\n};\n\nexport default HintInputContainer;\n"],"file":"HintInputContainer.js"}
+{"version":3,"sources":["../../../../src/components/molecules/HintInputContainer/HintInputContainer.tsx"],"names":["HintInputContainer","viewStyle","onPress","focused","disabled","LabelComponent","variant","rightComponent","children","hint","hintComponent","rest","_hint"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAeA,MAAMA,kBAAqD,GAAG,CAAC;AAC7DC,EAAAA,SAD6D;AAE7DC,EAAAA,OAF6D;AAG7DC,EAAAA,OAH6D;AAI7DC,EAAAA,QAJ6D;AAK7DC,EAAAA,cAL6D;AAM7DC,EAAAA,OAAO,GAAG,SANmD;AAO7DC,EAAAA,cAP6D;AAQ7DC,EAAAA,QAR6D;AAS7DC,EAAAA,IAT6D;AAU7DC,EAAAA,aAV6D;AAW7D,KAAGC;AAX0D,CAAD,KAYxD;AACJ,QAAMC,KAAK,GAAGF,aAAa,IACzB,oBAAC,WAAD;AAAM,IAAA,aAAa,EAAEL,cAArB;AAAqC,IAAA,IAAI,EAAEI,IAA3C;AAAiD,IAAA,OAAO,EAAEH;AAA1D,IADF;;AAIA,SACE,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAEL;AAAb,KACE,oBAAC,8BAAD;AACE,IAAA,OAAO,EAAEC,OADX;AAEE,IAAA,OAAO,EAAEC,OAFX;AAGE,IAAA,QAAQ,EAAEC,QAHZ;AAIE,IAAA,cAAc,EAAEC,cAJlB;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,cAAc,EAAEC;AANlB,KAOMI,IAPN,GASGH,QATH,CADF,EAYGC,IAAI,IAAIG,KAZX,CADF;AAgBD,CAjCD;;eAmCeZ,kB","sourcesContent":["import * as React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\nimport { Hint, InputVariantType, PressableInputContainer, PressableInputContainerProps } from '../../atoms/Input';\nimport { TextProps } from '../../atoms/Text';\n\nexport interface HintInputContainerProps extends PressableInputContainerProps {\n  viewStyle?: StyleProp<ViewStyle>;\n  focused: boolean;\n  LabelComponent?: React.FC<TextProps>;\n  onPress?: () => void | never;\n  disabled?: boolean;\n  hint?: string;\n  hintComponent?: JSX.Element;\n  variant?: InputVariantType;\n  rightComponent?: JSX.Element;\n}\n\nconst HintInputContainer: React.FC<HintInputContainerProps> = ({\n  viewStyle,\n  onPress,\n  focused,\n  disabled,\n  LabelComponent,\n  variant = 'default',\n  rightComponent,\n  children,\n  hint,\n  hintComponent,\n  ...rest\n}) => {\n  const _hint = hintComponent || (\n    <Hint TextComponent={LabelComponent} text={hint} variant={variant} />\n  );\n\n  return (\n    <View style={viewStyle}>\n      <PressableInputContainer\n        onPress={onPress}\n        focused={focused}\n        disabled={disabled}\n        LabelComponent={LabelComponent}\n        variant={variant}\n        rightComponent={rightComponent}\n        {...rest}\n      >\n        {children}\n      </PressableInputContainer>\n      {hint && _hint}\n    </View>\n  );\n};\n\nexport default HintInputContainer;\n"],"file":"HintInputContainer.js"}

package/dist/components/molecules/TextArea/TextArea.d.ts

@@ -1,5 +1,7 @@
 import { FC } from 'react';
-import { FontStackType, FontWeightType, InputContainerProps, InputElementProps, TextProps } from '@tecsinapse/react-core';
+import { FontStackType, FontWeightType } from '../../../types/defaults';
+import { InputContainerProps, InputElementProps } from '../../atoms/Input';
+import { TextProps } from '../../atoms/Text';
 export interface TextAreaProps extends Omit<InputElementProps, 'style' | 'multiline' | 'value'>, InputContainerProps {
     inputFontStack?: FontStackType;
     inputFontWeight?: FontWeightType;

package/dist/components/molecules/TextArea/TextArea.js

@@ -7,14 +7,14 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactCore = require("@tecsinapse/react-core");
-
 var _reactNative = require("react-native");
 
-var _styled = require("./styled");
+var _Input = require("../../atoms/Input");
 
 var _Text = require("../../atoms/Text");
 
+var _styled = require("./styled");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const TextArea = ({
@@ -48,7 +48,7 @@ const TextArea = ({
     length = maxLength;
   }
 
-  const _hint = hintComponent || _react.default.createElement(_reactCore.Hint, {
+  const _hint = hintComponent || _react.default.createElement(_Input.Hint, {
     TextComponent: TextComponent,
     text: hint,
     variant: variant

package/dist/components/molecules/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/TextArea/TextArea.tsx"],"names":["TextArea","label","labelColor","labelColorVariant","labelColorTone","labelTypography","labelStack","labelWeight","leftComponent","rightComponent","disabled","style","borderColor","borderColorGradation","inputContainerStyle","variant","hintComponent","hint","TextComponent","Text","focused","children","maxLength","_maxLenght","value","_value","length","_hint","textAlign"],"mappings":";;;;;;;AAAA;;AACA;;AAQA;;AACA;;AACA;;;;AAcA,MAAMA,QAA2B,GAAG,CAAC;AACnCC,EAAAA,KADmC;AAEnCC,EAAAA,UAFmC;AAGnCC,EAAAA,iBAHmC;AAInCC,EAAAA,cAJmC;AAKnCC,EAAAA,eALmC;AAMnCC,EAAAA,UANmC;AAOnCC,EAAAA,WAPmC;AAQnCC,EAAAA,aARmC;AASnCC,EAAAA,cATmC;AAUnCC,EAAAA,QAVmC;AAWnCC,EAAAA,KAXmC;AAYnCC,EAAAA,WAZmC;AAanCC,EAAAA,oBAbmC;AAcnCC,EAAAA,mBAdmC;AAenCC,EAAAA,OAAO,GAAG,SAfyB;AAgBnCC,EAAAA,aAhBmC;AAiBnCC,EAAAA,IAjBmC;AAkBnCC,EAAAA,aAAa,GAAGC,UAlBmB;AAmBnCC,EAAAA,OAnBmC;AAoBnCC,EAAAA,QApBmC;AAqBnCC,EAAAA,SAAS,EAAEC,UArBwB;AAsBnCC,EAAAA,KAAK,EAAEC;AAtB4B,CAAD,KAuB9B;AACJ,MAAIC,MAAM,GAAGD,MAAM,CAACC,MAApB;AACA,QAAMJ,SAAS,GAAGC,UAAlB;;AACA,MAAID,SAAS,IAAII,MAAM,GAAGJ,SAA1B,EAAqC;AACnCI,IAAAA,MAAM,GAAGJ,SAAT;AACD;;AAED,QAAMK,KAAK,GAAGX,aAAa,IACzB,6BAAC,eAAD;AAAM,IAAA,aAAa,EAAEE,aAArB;AAAoC,IAAA,IAAI,EAAED,IAA1C;AAAgD,IAAA,OAAO,EAAEF;AAAzD,IADF;;AAIA,SACE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEJ;AAAb,KACE,6BAAC,4BAAD;AACE,IAAA,KAAK,EAAEV,KADT;AAEE,IAAA,UAAU,EAAEC,UAFd;AAGE,IAAA,iBAAiB,EAAEC,iBAHrB;AAIE,IAAA,cAAc,EAAEC,cAJlB;AAKE,IAAA,eAAe,EAAEC,eALnB;AAME,IAAA,UAAU,EAAEC,UANd;AAOE,IAAA,WAAW,EAAEC,WAPf;AAQE,IAAA,cAAc,EAAEW,aARlB;AASE,IAAA,aAAa,EAAEV,aATjB;AAUE,IAAA,cAAc,EAAEC,cAVlB;AAWE,IAAA,WAAW,EAAEG,WAXf;AAYE,IAAA,oBAAoB,EAAEC,oBAZxB;AAaE,IAAA,mBAAmB,EAAEC,mBAbvB;AAcE,IAAA,OAAO,EAAEM,OAdX;AAeE,IAAA,QAAQ,EAAEV,QAfZ;AAgBE,IAAA,OAAO,EAAEK;AAhBX,KAkBGM,QAlBH,EAmBGC,SAAS,IACR,6BAAC,aAAD;AACE,IAAA,YAAY,EAAE,WADhB;AAEE,IAAA,SAAS,EAAE,QAFb;AAGE,IAAA,UAAU,EAAE,OAHd;AAIE,IAAA,SAAS,EAAE,SAJb;AAKE,IAAA,UAAU,EAAE,MALd;AAME,IAAA,KAAK,EAAE;AAAEM,MAAAA,SAAS,EAAE;AAAb;AANT,KAQI,GAAEF,MAAO,IAAGJ,SAAU,EAR1B,CApBJ,CADF,EAiCGL,IAAI,IAAIU,KAjCX,CADF;AAqCD,CAvED;;eAyEe3B,Q","sourcesContent":["import React, { FC } from 'react';\nimport {\n  FontStackType,\n  FontWeightType,\n  Hint,\n  InputContainerProps,\n  InputElementProps,\n  TextProps,\n} from '@tecsinapse/react-core';\nimport { View } from 'react-native';\nimport { StyledInputContainer } from './styled';\nimport { Text } from '../../atoms/Text';\n\nexport interface TextAreaProps\n  extends Omit<InputElementProps, 'style' | 'multiline' | 'value'>,\n    InputContainerProps {\n  inputFontStack?: FontStackType;\n  inputFontWeight?: FontWeightType;\n  maxCharCount?: number;\n  value: string;\n  // Omit below\n  TextComponent?: FC<TextProps>;\n  focused?: boolean;\n}\n\nconst TextArea: FC<TextAreaProps> = ({\n  label,\n  labelColor,\n  labelColorVariant,\n  labelColorTone,\n  labelTypography,\n  labelStack,\n  labelWeight,\n  leftComponent,\n  rightComponent,\n  disabled,\n  style,\n  borderColor,\n  borderColorGradation,\n  inputContainerStyle,\n  variant = 'default',\n  hintComponent,\n  hint,\n  TextComponent = Text,\n  focused,\n  children,\n  maxLength: _maxLenght,\n  value: _value,\n}) => {\n  let length = _value.length;\n  const maxLength = _maxLenght;\n  if (maxLength && length > maxLength) {\n    length = maxLength;\n  }\n\n  const _hint = hintComponent || (\n    <Hint TextComponent={TextComponent} text={hint} variant={variant} />\n  );\n\n  return (\n    <View style={style}>\n      <StyledInputContainer\n        label={label}\n        labelColor={labelColor}\n        labelColorVariant={labelColorVariant}\n        labelColorTone={labelColorTone}\n        labelTypography={labelTypography}\n        labelStack={labelStack}\n        labelWeight={labelWeight}\n        LabelComponent={TextComponent}\n        leftComponent={leftComponent}\n        rightComponent={rightComponent}\n        borderColor={borderColor}\n        borderColorGradation={borderColorGradation}\n        inputContainerStyle={inputContainerStyle}\n        focused={focused}\n        disabled={disabled}\n        variant={variant}\n      >\n        {children}\n        {maxLength && (\n          <TextComponent\n            colorVariant={'secondary'}\n            colorTone={'medium'}\n            typography={'label'}\n            fontStack={'default'}\n            fontWeight={'bold'}\n            style={{ textAlign: 'right' }}\n          >\n            {`${length}/${maxLength}`}\n          </TextComponent>\n        )}\n      </StyledInputContainer>\n      {hint && _hint}\n    </View>\n  );\n};\n\nexport default TextArea;\n"],"file":"TextArea.js"}
+{"version":3,"sources":["../../../../src/components/molecules/TextArea/TextArea.tsx"],"names":["TextArea","label","labelColor","labelColorVariant","labelColorTone","labelTypography","labelStack","labelWeight","leftComponent","rightComponent","disabled","style","borderColor","borderColorGradation","inputContainerStyle","variant","hintComponent","hint","TextComponent","Text","focused","children","maxLength","_maxLenght","value","_value","length","_hint","textAlign"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;AAcA,MAAMA,QAA2B,GAAG,CAAC;AACnCC,EAAAA,KADmC;AAEnCC,EAAAA,UAFmC;AAGnCC,EAAAA,iBAHmC;AAInCC,EAAAA,cAJmC;AAKnCC,EAAAA,eALmC;AAMnCC,EAAAA,UANmC;AAOnCC,EAAAA,WAPmC;AAQnCC,EAAAA,aARmC;AASnCC,EAAAA,cATmC;AAUnCC,EAAAA,QAVmC;AAWnCC,EAAAA,KAXmC;AAYnCC,EAAAA,WAZmC;AAanCC,EAAAA,oBAbmC;AAcnCC,EAAAA,mBAdmC;AAenCC,EAAAA,OAAO,GAAG,SAfyB;AAgBnCC,EAAAA,aAhBmC;AAiBnCC,EAAAA,IAjBmC;AAkBnCC,EAAAA,aAAa,GAAGC,UAlBmB;AAmBnCC,EAAAA,OAnBmC;AAoBnCC,EAAAA,QApBmC;AAqBnCC,EAAAA,SAAS,EAAEC,UArBwB;AAsBnCC,EAAAA,KAAK,EAAEC;AAtB4B,CAAD,KAuB9B;AACJ,MAAIC,MAAM,GAAGD,MAAM,CAACC,MAApB;AACA,QAAMJ,SAAS,GAAGC,UAAlB;;AACA,MAAID,SAAS,IAAII,MAAM,GAAGJ,SAA1B,EAAqC;AACnCI,IAAAA,MAAM,GAAGJ,SAAT;AACD;;AAED,QAAMK,KAAK,GAAGX,aAAa,IACzB,6BAAC,WAAD;AAAM,IAAA,aAAa,EAAEE,aAArB;AAAoC,IAAA,IAAI,EAAED,IAA1C;AAAgD,IAAA,OAAO,EAAEF;AAAzD,IADF;;AAIA,SACE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEJ;AAAb,KACE,6BAAC,4BAAD;AACE,IAAA,KAAK,EAAEV,KADT;AAEE,IAAA,UAAU,EAAEC,UAFd;AAGE,IAAA,iBAAiB,EAAEC,iBAHrB;AAIE,IAAA,cAAc,EAAEC,cAJlB;AAKE,IAAA,eAAe,EAAEC,eALnB;AAME,IAAA,UAAU,EAAEC,UANd;AAOE,IAAA,WAAW,EAAEC,WAPf;AAQE,IAAA,cAAc,EAAEW,aARlB;AASE,IAAA,aAAa,EAAEV,aATjB;AAUE,IAAA,cAAc,EAAEC,cAVlB;AAWE,IAAA,WAAW,EAAEG,WAXf;AAYE,IAAA,oBAAoB,EAAEC,oBAZxB;AAaE,IAAA,mBAAmB,EAAEC,mBAbvB;AAcE,IAAA,OAAO,EAAEM,OAdX;AAeE,IAAA,QAAQ,EAAEV,QAfZ;AAgBE,IAAA,OAAO,EAAEK;AAhBX,KAkBGM,QAlBH,EAmBGC,SAAS,IACR,6BAAC,aAAD;AACE,IAAA,YAAY,EAAE,WADhB;AAEE,IAAA,SAAS,EAAE,QAFb;AAGE,IAAA,UAAU,EAAE,OAHd;AAIE,IAAA,SAAS,EAAE,SAJb;AAKE,IAAA,UAAU,EAAE,MALd;AAME,IAAA,KAAK,EAAE;AAAEM,MAAAA,SAAS,EAAE;AAAb;AANT,KAQI,GAAEF,MAAO,IAAGJ,SAAU,EAR1B,CApBJ,CADF,EAiCGL,IAAI,IAAIU,KAjCX,CADF;AAqCD,CAvED;;eAyEe3B,Q","sourcesContent":["import React, { FC } from 'react';\nimport { View } from 'react-native';\nimport { FontStackType, FontWeightType } from '../../../types/defaults';\nimport { Hint, InputContainerProps, InputElementProps } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { StyledInputContainer } from './styled';\n\nexport interface TextAreaProps\n  extends Omit<InputElementProps, 'style' | 'multiline' | 'value'>,\n    InputContainerProps {\n  inputFontStack?: FontStackType;\n  inputFontWeight?: FontWeightType;\n  maxCharCount?: number;\n  value: string;\n  // Omit below\n  TextComponent?: FC<TextProps>;\n  focused?: boolean;\n}\n\nconst TextArea: FC<TextAreaProps> = ({\n  label,\n  labelColor,\n  labelColorVariant,\n  labelColorTone,\n  labelTypography,\n  labelStack,\n  labelWeight,\n  leftComponent,\n  rightComponent,\n  disabled,\n  style,\n  borderColor,\n  borderColorGradation,\n  inputContainerStyle,\n  variant = 'default',\n  hintComponent,\n  hint,\n  TextComponent = Text,\n  focused,\n  children,\n  maxLength: _maxLenght,\n  value: _value,\n}) => {\n  let length = _value.length;\n  const maxLength = _maxLenght;\n  if (maxLength && length > maxLength) {\n    length = maxLength;\n  }\n\n  const _hint = hintComponent || (\n    <Hint TextComponent={TextComponent} text={hint} variant={variant} />\n  );\n\n  return (\n    <View style={style}>\n      <StyledInputContainer\n        label={label}\n        labelColor={labelColor}\n        labelColorVariant={labelColorVariant}\n        labelColorTone={labelColorTone}\n        labelTypography={labelTypography}\n        labelStack={labelStack}\n        labelWeight={labelWeight}\n        LabelComponent={TextComponent}\n        leftComponent={leftComponent}\n        rightComponent={rightComponent}\n        borderColor={borderColor}\n        borderColorGradation={borderColorGradation}\n        inputContainerStyle={inputContainerStyle}\n        focused={focused}\n        disabled={disabled}\n        variant={variant}\n      >\n        {children}\n        {maxLength && (\n          <TextComponent\n            colorVariant={'secondary'}\n            colorTone={'medium'}\n            typography={'label'}\n            fontStack={'default'}\n            fontWeight={'bold'}\n            style={{ textAlign: 'right' }}\n          >\n            {`${length}/${maxLength}`}\n          </TextComponent>\n        )}\n      </StyledInputContainer>\n      {hint && _hint}\n    </View>\n  );\n};\n\nexport default TextArea;\n"],"file":"TextArea.js"}

package/dist/index.d.ts

@@ -17,7 +17,7 @@ export { RadioButton, RadioButtonProps } from './components/atoms/RadioButton';
 export { Switch, SwitchProps } from './components/atoms/Switch';
 export { Tag, TagProps } from './components/atoms/Tag';
 export { Text, TextProps } from './components/atoms/Text';
-export { Calendar, CalendarProps, DateRange, SelectionType, } from './components/molecules/Calendar';
+export { Calendar, CalendarProps, DateRange, SelectionType, Value } from './components/molecules/Calendar';
 export { DatePicker, DatePickerProps } from './components/molecules/DatePicker';
 export { DateTimePicker, DateTimePickerProps, } from './components/molecules/DateTimePicker';
 export { DateTimeSelector, DateTimeSelectorMode, DateTimeSelectorProps, } from './components/molecules/DateTimeSelector';

package/dist/index.js

@@ -69,6 +69,7 @@ var _exportNames = {
   CalendarProps: true,
   DateRange: true,
   SelectionType: true,
+  Value: true,
   DatePicker: true,
   DatePickerProps: true,
   DateTimePicker: true,
@@ -480,6 +481,12 @@ Object.defineProperty(exports, "SelectionType", {
     return _Calendar.SelectionType;
   }
 });
+Object.defineProperty(exports, "Value", {
+  enumerable: true,
+  get: function () {
+    return _Calendar.Value;
+  }
+});
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
   get: function () {