@ornikar/kitt-universal 4.1.0 → 4.3.1

package/dist/index-node-14.17.cjs.web.js

@@ -175,8 +175,8 @@ const StyledTypography = /*#__PURE__*/styled__default(BabelPluginStyledComponent
       /* type */
       ${!$typeForCurrentWindowSize ? '' : `
   font-family: ${$isHeader ? headers.fontFamily[$variant] : bodies.fontFamily[$variant]};
-  font-size: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize};
-  line-height: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight};
+  font-size: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].fontSize}px;
+  line-height: ${$isHeader ? headers.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight : bodies.configs[$typeForCurrentWindowSize][typeConfigKey].lineHeight}px;
     `}
 
     /* variant */
@@ -322,7 +322,7 @@ const StyledAvatarView = /*#__PURE__*/styled__default(BabelPluginStyledComponent
   $size
 }) => {
   if ($isRound) return `${$size / 2}px`;
-  return theme.kitt.avatar.borderRadius;
+  return `${theme.kitt.avatar.borderRadius}px`;
 }, ({
   theme,
   $isLight
@@ -430,7 +430,7 @@ const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react$1.styled(
     }],
     "a1vkj3mh-7": [({
       theme
-    }) => theme.kitt.button.borderRadius],
+    }) => theme.kitt.button.borderRadius, "px"],
     "a1vkj3mh-8": [({
       theme
     }) => `opacity ${theme.kitt.button.transition.duration} ${theme.kitt.button.transition.timingFunction}`],
@@ -439,20 +439,20 @@ const AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/react$1.styled(
     }) => $isDisabled ? 1 : 0],
     "a1vkj3mh-10": [({
       theme
-    }) => `-${theme.kitt.button.borderWidth.disabled}`],
+    }) => `-${theme.kitt.button.borderWidth.disabled}px`],
     "a1vkj3mh-12": [({
       theme
-    }) => `calc(100% - ${parseInt(theme.kitt.button.borderWidth.disabled, 10) * 0.5}px)`],
+    }) => `calc(100% - ${theme.kitt.button.borderWidth.disabled * 0.5}px)`],
     "a1vkj3mh-14": [({
       theme
-    }) => `${theme.kitt.button.disabled.borderColor} solid ${theme.kitt.button.borderWidth.disabled}`],
+    }) => `${theme.kitt.button.borderWidth.disabled}px solid ${theme.kitt.button.disabled.borderColor}`],
     "a1vkj3mh-15": [({
       theme,
       $type
-    }) => `${theme.kitt.button.borderWidth.focus} solid ${theme.kitt.button[$type].focusBorderColor}`],
+    }) => `${theme.kitt.button.borderWidth.focus}px solid ${theme.kitt.button[$type].focusBorderColor}`],
     "a1vkj3mh-16": [({
       theme
-    }) => `-${theme.kitt.button.borderWidth.focus}`],
+    }) => `-${theme.kitt.button.borderWidth.focus}px`],
     "a1vkj3mh-18": [({
       theme,
       $type,
@@ -503,12 +503,12 @@ const AnimatedButtonPressable = /*#__PURE__*/react.forwardRef(({
 const BaseStyledButtonPressable = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "BaseStyledButtonPressable",
   componentId: "kitt-universal__sc-4k8lse-0"
-})(["position:relative;min-width:", ";max-width:", ";width:", ";min-height:", ";border-radius:", ";flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], ({
+})(["position:relative;min-width:", "px;max-width:", ";width:", ";min-height:", "px;border-radius:", "px;flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], ({
   theme
 }) => theme.kitt.button.minWidth, ({
   theme,
   $isStretch
-}) => $isStretch ? '100%' : theme.kitt.button.maxWidth, ({
+}) => $isStretch ? '100%' : `${theme.kitt.button.maxWidth}px`, ({
   $isStretch
 }) => $isStretch ? '100%' : 'auto', ({
   theme
@@ -780,12 +780,12 @@ const Button = /*#__PURE__*/react.forwardRef(({
 const Container$3 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Card__Container",
   componentId: "kitt-universal__sc-1n9psug-0"
-})(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], ({
+})(["background-color:", ";padding:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], ({
   theme,
   type
 }) => theme.kitt.card[type].backgroundColor, ({
   theme
-}) => theme.kitt.card.padding, ({
+}) => theme.kitt.spacing * 4, ({
   theme
 }) => theme.kitt.card.borderRadius, ({
   theme
@@ -853,107 +853,7 @@ function ExternalLink({
   });
 }
 
-const getColorFromState = state => {
-  switch (state) {
-    case 'invalid':
-      return 'danger';
-
-    case 'valid':
-    default:
-      return 'black-light';
-  }
-};
-
-function InputFeedback({
-  state,
-  testID,
-  children
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-    base: "body-small",
-    color: getColorFromState(state),
-    testID: testID,
-    children: children
-  });
-}
-
-const FieldContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputField__FieldContainer",
-  componentId: "kitt-universal__sc-13fkixs-0"
-})(["padding:5px 0 10px;"]);
-const FeedbackContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputField__FeedbackContainer",
-  componentId: "kitt-universal__sc-13fkixs-1"
-})(["", ";"], ({
-  theme
-}) => theme.responsive.ifWindowSizeMatches({
-  minWidth: KittBreakpoints.SMALL
-}, 'padding-top: 10px', 'padding-top: 5px'));
-const FieldLabelContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputField__FieldLabelContainer",
-  componentId: "kitt-universal__sc-13fkixs-2"
-})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], ({
-  theme
-}) => theme.kitt.forms.inputField.labelContainerPaddingBottom);
-const LabelContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputField__LabelContainer",
-  componentId: "kitt-universal__sc-13fkixs-3"
-})(["margin-right:", "px;"], ({
-  theme
-}) => theme.kitt.forms.inputField.iconMarginLeft);
-function InputField({
-  label,
-  labelFeedback,
-  input,
-  feedback
-}) {
-  return /*#__PURE__*/jsxRuntime.jsxs(FieldContainer, {
-    children: [label ? /*#__PURE__*/jsxRuntime.jsxs(FieldLabelContainer, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(LabelContainer, {
-        children: label
-      }), labelFeedback]
-    }) : null, input, feedback ? /*#__PURE__*/jsxRuntime.jsx(FeedbackContainer, {
-      children: feedback
-    }) : null]
-  });
-}
-
-function getIconColor(state, disabled) {
-  if (disabled) return 'black-light';
-
-  switch (state) {
-    case 'invalid':
-      return 'danger';
-
-    case 'valid':
-      return 'success';
-
-    default:
-      return undefined;
-  }
-}
-
-function InputIcon({
-  icon,
-  state,
-  disabled
-}) {
-  const theme = /*#__PURE__*/styled.useTheme();
-  const color = getIconColor(state, disabled);
-  return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
-    color: color,
-    icon: icon,
-    size: theme.kitt.forms.input.icon.size
-  });
-}
-
-function InputPressable({ ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Pressable, { ...props
-  });
-}
-
-const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";border-width:", ";border-radius:", ";border-color:", ";font-size:", ";color:", ";font-family:", ";"], ({
+const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";border-width:", "px;border-radius:", "px;border-color:", ";font-size:", ";color:", ";font-family:", ";"], ({
   theme,
   $state
 }) => $state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states.default.backgroundColor, ({
@@ -967,7 +867,7 @@ const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";bor
   theme
 }) => {
   const typeConfigKey = getTypographyTypeConfigKey(theme);
-  return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize;
+  return `${theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize}px`;
 }, ({
   theme,
   $state
@@ -986,10 +886,44 @@ function getInputUIState({
   return 'default';
 }
 
+const InputTextContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
+  name: "InputTextContainer",
+  class: "i1encr9g",
+  vars: {
+    "i1encr9g-0": [({
+      $isDisabled
+    }) => $isDisabled ? 'not-allowed' : 'inherit'],
+    "i1encr9g-1": [({
+      theme
+    }) => {
+      const {
+        property,
+        duration,
+        timingFunction
+      } = theme.kitt.forms.input.transition;
+      return `${property} ${duration} ${timingFunction}`;
+    }],
+    "i1encr9g-2": [({
+      theme,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.forms.input.states.disabled.borderColor;
+      return theme.kitt.forms.input.states.hover.borderColor;
+    }],
+    "i1encr9g-3": [({
+      theme,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.forms.input.states.disabled.borderColor;
+      return theme.kitt.forms.input.states.focus.borderColor;
+    }]
+  }
+}));
+
 const StyledTextInput = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.TextInput).withConfig({
   displayName: "InputText__StyledTextInput",
   componentId: "kitt-universal__sc-uke279-0"
-})(["", " padding:", ";line-height:", ";min-height:", "px;"], styledTextInputMixin, ({
+})(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, ({
   theme,
   multiline
 }) => {
@@ -1004,17 +938,13 @@ const StyledTextInput = /*#__PURE__*/styled__default(BabelPluginStyledComponents
 }) => {
   if (!multiline && "web" === 'ios') return 0;
   const typeConfigKey = getTypographyTypeConfigKey(theme);
-  return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight;
+  return `${theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight}px`;
 }, ({
   $minHeight
 }) => $minHeight);
-const InputTextContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputText__InputTextContainer",
-  componentId: "kitt-universal__sc-uke279-1"
-})(["position:relative;"]);
 const RightInputContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "InputText__RightInputContainer",
-  componentId: "kitt-universal__sc-uke279-2"
+  componentId: "kitt-universal__sc-uke279-1"
 })(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
 const InputText = /*#__PURE__*/react.forwardRef(({
   id,
@@ -1039,6 +969,7 @@ const InputText = /*#__PURE__*/react.forwardRef(({
     formState
   });
   return /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
+    $isDisabled: disabled,
     children: [/*#__PURE__*/jsxRuntime.jsx(StyledTextInput, {
       ref: ref,
       nativeID: id,
@@ -1066,6 +997,115 @@ const InputText = /*#__PURE__*/react.forwardRef(({
   });
 });
 
+function InputEmail(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(InputText, {
+    autoCompleteType: "email",
+    keyboardType: "email-address",
+    textContentType: "emailAddress",
+    ...props
+  });
+}
+
+const getColorFromState = state => {
+  switch (state) {
+    case 'invalid':
+      return 'danger';
+
+    case 'valid':
+    default:
+      return 'black-light';
+  }
+};
+
+function InputFeedback({
+  state,
+  testID,
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+    base: "body-small",
+    color: getColorFromState(state),
+    testID: testID,
+    children: children
+  });
+}
+
+const FieldContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "InputField__FieldContainer",
+  componentId: "kitt-universal__sc-13fkixs-0"
+})(["padding:5px 0 10px;"]);
+const FeedbackContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "InputField__FeedbackContainer",
+  componentId: "kitt-universal__sc-13fkixs-1"
+})(["", ";"], ({
+  theme
+}) => theme.responsive.ifWindowSizeMatches({
+  minWidth: KittBreakpoints.SMALL
+}, 'padding-top: 10px', 'padding-top: 5px'));
+const FieldLabelContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "InputField__FieldLabelContainer",
+  componentId: "kitt-universal__sc-13fkixs-2"
+})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], ({
+  theme
+}) => theme.kitt.forms.inputField.labelContainerPaddingBottom);
+const LabelContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "InputField__LabelContainer",
+  componentId: "kitt-universal__sc-13fkixs-3"
+})(["margin-right:", "px;"], ({
+  theme
+}) => theme.kitt.forms.inputField.iconMarginLeft);
+function InputField({
+  label,
+  labelFeedback,
+  input,
+  feedback
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(FieldContainer, {
+    children: [label ? /*#__PURE__*/jsxRuntime.jsxs(FieldLabelContainer, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(LabelContainer, {
+        children: label
+      }), labelFeedback]
+    }) : null, input, feedback ? /*#__PURE__*/jsxRuntime.jsx(FeedbackContainer, {
+      children: feedback
+    }) : null]
+  });
+}
+
+function getIconColor(state, disabled) {
+  if (disabled) return 'black-light';
+
+  switch (state) {
+    case 'invalid':
+      return 'danger';
+
+    case 'valid':
+      return 'success';
+
+    default:
+      return undefined;
+  }
+}
+
+function InputIcon({
+  icon,
+  state,
+  disabled
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const color = getIconColor(state, disabled);
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+    color: color,
+    icon: icon,
+    size: theme.kitt.forms.input.icon.size
+  });
+}
+
+function InputPressable({ ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Pressable, { ...props
+  });
+}
+
 function InputPassword({
   isPasswordDefaultVisible,
   right,
@@ -1103,7 +1143,7 @@ function Label({
 const OuterRadio = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Radio__OuterRadio",
   componentId: "kitt-universal__sc-1mdgr2o-0"
-})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", ";border-color:", ";"], ({
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], ({
   theme,
   disabled
 }) => theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].backgroundColor, ({
@@ -1518,10 +1558,10 @@ const SideContainerView = /*#__PURE__*/styled__default(BabelPluginStyledComponen
 })(["flex-direction:row;margin-left:", ";margin-right:", ";"], ({
   theme,
   side
-}) => side === 'right' ? theme.kitt.listItem.innerMargin : 0, ({
+}) => side === 'right' ? `${theme.kitt.listItem.innerMargin}px` : 0, ({
   theme,
   side
-}) => side === 'left' ? theme.kitt.listItem.innerMargin : 0); // Handles the vertical alignment of the side elements of the list item
+}) => side === 'left' ? `${theme.kitt.listItem.innerMargin}px` : 0); // Handles the vertical alignment of the side elements of the list item
 
 function ListItemSideContainer({
   children,
@@ -1567,15 +1607,15 @@ const ContainerView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsRe
   } = theme.kitt.listItem;
 
   if (borders === 'top') {
-    return `border-top-width: ${borderWidth}`;
+    return `border-top-width: ${borderWidth}px`;
   }
 
   if (borders === 'bottom') {
-    return `border-bottom-width: ${borderWidth}`;
+    return `border-bottom-width: ${borderWidth}px`;
   }
 
   if (borders === 'both') {
-    return `border-top-width: ${borderWidth}; border-bottom-width: ${borderWidth}`;
+    return styled.css(["border-top-width:", "px;border-bottom-width:", "px;"], borderWidth, borderWidth);
   }
 
   return 'border: none';
@@ -1946,11 +1986,11 @@ const ModalView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactN
 const ContentView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Modal__ContentView",
   componentId: "kitt-universal__sc-1xy2w5u-1"
-})(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", ";background-color:", ";"], ({
+})(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", "px;background-color:", ";"], ({
   theme
 }) => theme.kitt.card.borderRadius, ({
   theme
-}) => theme.kitt.palettes.lateOcean.white);
+}) => theme.kitt.colors.uiBackgroundLight);
 function Modal({
   visible,
   children,
@@ -2429,7 +2469,7 @@ const StoryGrid = {
 const Container = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Tag__Container",
   componentId: "kitt-universal__sc-19jmowi-0"
-})(["background-color:", ";border-width:", ";border-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], ({
+})(["background-color:", ";border-width:", "px;border-color:", ";padding:", ";border-radius:", "px;align-self:flex-start;"], ({
   theme,
   type,
   variant
@@ -2493,6 +2533,7 @@ const lateOceanColorPalette = {
   warmEmbrace: '#F4D3CE',
   warmEmbraceLight1: '#FFEDE6',
   black1000: '#000000',
+  black800: '#2C293D',
   black555: '#737373',
   black200: '#CCCCCC',
   black100: '#E5E5E5',
@@ -2508,7 +2549,7 @@ const lateOceanColorPalette = {
   moonPurpleLight1: '#EDEBFC'
 };
 
-const colorsLateOceanTheme = {
+const colors = {
   primary: lateOceanColorPalette.lateOcean,
   primaryLight: lateOceanColorPalette.lateOceanLight1,
   accent: lateOceanColorPalette.warmEmbrace,
@@ -2533,9 +2574,9 @@ const colorsLateOceanTheme = {
 };
 
 const avatar = {
-  borderRadius: '10px',
+  borderRadius: 10,
   default: {
-    backgroundColor: colorsLateOceanTheme.primary
+    backgroundColor: colors.primary
   },
   light: {
     backgroundColor: lateOceanColorPalette.black100
@@ -2543,14 +2584,14 @@ const avatar = {
 };
 
 const button = {
-  borderRadius: '30px',
+  borderRadius: 30,
   borderWidth: {
-    disabled: '2px',
-    focus: '3px'
+    disabled: 2,
+    focus: 3
   },
-  minHeight: '40px',
-  minWidth: '40px',
-  maxWidth: '335px',
+  minHeight: 40,
+  minWidth: 40,
+  maxWidth: 335,
   scale: {
     base: {
       default: 1,
@@ -2577,9 +2618,9 @@ const button = {
     focusBorderColor: 'rgba(0, 0, 0, 0.1)'
   },
   primary: {
-    backgroundColor: colorsLateOceanTheme.primary,
-    pressedBackgroundColor: colorsLateOceanTheme.primaryLight,
-    hoverBackgroundColor: colorsLateOceanTheme.primaryLight,
+    backgroundColor: colors.primary,
+    pressedBackgroundColor: colors.primaryLight,
+    hoverBackgroundColor: colors.primaryLight,
     focusBorderColor: 'rgba(76, 52, 224, 0.2)'
   },
   white: {
@@ -2589,79 +2630,79 @@ const button = {
     focusBorderColor: 'rgba(255, 255, 255, 0.1)'
   },
   subtle: {
-    backgroundColor: colorsLateOceanTheme.transparent,
-    pressedBackgroundColor: colorsLateOceanTheme.transparent,
-    hoverBackgroundColor: colorsLateOceanTheme.transparent,
+    backgroundColor: colors.transparent,
+    pressedBackgroundColor: colors.transparent,
+    hoverBackgroundColor: colors.transparent,
     focusBorderColor: 'rgba(76, 52, 224, 0.2)',
-    color: colorsLateOceanTheme.primary,
+    color: colors.primary,
     hoverColor: 'rgba(76, 52, 224, 0.8)',
     activeColor: 'rgba(76, 52, 224, 0.8)'
   },
   'subtle-dark': {
-    backgroundColor: colorsLateOceanTheme.transparent,
-    pressedBackgroundColor: colorsLateOceanTheme.transparent,
-    hoverBackgroundColor: colorsLateOceanTheme.transparent,
+    backgroundColor: colors.transparent,
+    pressedBackgroundColor: colors.transparent,
+    hoverBackgroundColor: colors.transparent,
     focusBorderColor: 'rgba(0, 0, 0, 0.1)',
-    color: colorsLateOceanTheme.black,
+    color: colors.black,
     hoverColor: 'rgba(0, 0, 0, 0.8)',
     activeColor: 'rgba(0, 0, 0, 0.8)'
   },
   disabled: {
-    backgroundColor: colorsLateOceanTheme.disabled,
-    pressedBackgroundColor: colorsLateOceanTheme.disabled,
-    hoverBackgroundColor: colorsLateOceanTheme.disabled,
+    backgroundColor: colors.disabled,
+    pressedBackgroundColor: colors.disabled,
+    hoverBackgroundColor: colors.disabled,
     focusBorderColor: lateOceanColorPalette.black100,
     borderColor: lateOceanColorPalette.black100
   }
 };
 
-const cardLateOceanTheme = {
-  borderRadius: '20px',
-  borderWidth: '2px',
-  padding: '16px',
+const card = {
+  borderRadius: 20,
+  borderWidth: 2,
   primary: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette.lateOcean
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.primary
   },
   secondary: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette.black100
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.separator
   },
   subtle: {
     backgroundColor: lateOceanColorPalette.black50,
-    borderColor: lateOceanColorPalette.black100
+    borderColor: colors.separator
   }
 };
 
 const feedbackMessage = {
   danger: {
-    backgroundColor: colorsLateOceanTheme.danger
+    backgroundColor: colors.danger
   },
   success: {
-    backgroundColor: colorsLateOceanTheme.success
+    backgroundColor: colors.success
   },
   info: {
-    backgroundColor: colorsLateOceanTheme.info
+    backgroundColor: colors.info
   },
   warning: {
-    backgroundColor: colorsLateOceanTheme.warning
+    backgroundColor: colors.warning
   }
 };
 
 const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
 const createTypographyTypeConfig = (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) => ({
   baseAndSmall: {
-    fontSize: `${baseAndSmallFontSize}px`,
-    lineHeight: `${calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier)}px`
+    fontSize: baseAndSmallFontSize,
+    lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier)
   },
   mediumAndWide: {
-    fontSize: `${mediumAndWideFontSize}px`,
-    lineHeight: `${calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier)}px`
+    fontSize: mediumAndWideFontSize,
+    lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier)
   }
 });
-const typographyLateOceanTheme = {
+const typography = {
   colors: {
     black: lateOceanColorPalette.black1000,
+    'black-anthracite': lateOceanColorPalette.black800,
     'black-light': lateOceanColorPalette.black555,
     white: lateOceanColorPalette.white,
     'white-light': lateOceanColorPalette.white,
@@ -2721,17 +2762,17 @@ const typographyLateOceanTheme = {
 
 const inputStatesStyle = {
   default: {
-    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
-    borderColor: colorsLateOceanTheme.separator,
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.separator,
     color: 'black'
   },
   pending: {
-    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
-    borderColor: colorsLateOceanTheme.separator,
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.separator,
     color: 'black'
   },
   valid: {
-    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
+    backgroundColor: colors.uiBackgroundLight,
     borderColor: lateOceanColorPalette.black100,
     color: 'black'
   },
@@ -2740,56 +2781,61 @@ const inputStatesStyle = {
     color: 'black'
   },
   focus: {
-    borderColor: colorsLateOceanTheme.primary,
+    borderColor: colors.primary,
     color: 'black'
   },
   disabled: {
-    backgroundColor: colorsLateOceanTheme.disabled,
-    borderColor: colorsLateOceanTheme.separator,
+    backgroundColor: colors.disabled,
+    borderColor: colors.separator,
     color: 'black-light'
   },
   invalid: {
-    borderColor: colorsLateOceanTheme.danger,
+    borderColor: colors.separator,
     color: 'black'
   }
 };
 const input = {
   color: {
-    selection: colorsLateOceanTheme.primary,
-    placeholder: typographyLateOceanTheme.colors['black-light']
+    selection: colors.primary,
+    placeholder: typography.colors['black-light']
   },
-  borderWidth: '2px',
-  borderRadius: '10px',
+  borderWidth: 2,
+  borderRadius: 10,
   icon: {
     size: 20
   },
   padding: {
-    default: '7px 16px',
-    iOSSingleLine: '12px 16px'
+    default: '5px 16px',
+    iOSSingleLine: '7px 16px'
+  },
+  transition: {
+    property: 'border-color',
+    duration: '200ms',
+    timingFunction: 'ease-in-out'
   },
   states: inputStatesStyle
 };
 
-const inputFieldLateOceanTheme = {
+const inputField = {
   labelContainerPaddingBottom: 5,
   iconMarginLeft: 6
 };
 
-const radioLateOceanTheme = {
+const radio = {
   size: 18,
   unchecked: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderWidth: '2px',
+    backgroundColor: colors.uiBackgroundLight,
+    borderWidth: 2,
     borderColor: lateOceanColorPalette.black200
   },
   checked: {
-    backgroundColor: lateOceanColorPalette.lateOcean,
+    backgroundColor: colors.primary,
     innerSize: 5,
-    innerBackgroundColor: lateOceanColorPalette.white
+    innerBackgroundColor: colors.uiBackgroundLight
   },
   disabled: {
-    backgroundColor: lateOceanColorPalette.black50,
-    borderColor: lateOceanColorPalette.black100
+    backgroundColor: colors.disabled,
+    borderColor: colors.separator
   }
 };
 
@@ -2799,12 +2845,12 @@ const textArea = {
 
 const forms = {
   input,
-  radio: radioLateOceanTheme,
-  inputField: inputFieldLateOceanTheme,
+  radio,
+  inputField,
   textArea
 };
 
-const fullScreenModalLateOceanTheme = {
+const fullScreenModal = {
   header: {
     paddingVertical: 12,
     paddingHorizontal: 16,
@@ -2847,66 +2893,66 @@ const iconButton = {
   }
 };
 
-const listItemLateOceanTheme = {
+const listItem = {
   padding: '12px 16px',
-  borderColor: colorsLateOceanTheme.separator,
-  borderWidth: '1px',
-  innerMargin: '8px'
+  borderColor: colors.separator,
+  borderWidth: 1,
+  innerMargin: 8
 };
 
-const shadowsLateOceanTheme = {
+const shadows = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
 
-const skeletonTheme = {
+const skeleton = {
   backgroundColor: lateOceanColorPalette.black100,
   flareColor: lateOceanColorPalette.black200,
   animationDuration: 1000
 };
 
-const tagLateOceanTheme = {
-  borderRadius: '10px',
+const tag = {
+  borderRadius: 10,
   padding: '2px 12px',
   primary: {
     fill: {
       backgroundColor: lateOceanColorPalette.moonPurpleLight1,
-      borderWidth: '0',
-      borderColor: lateOceanColorPalette.transparent
+      borderWidth: 0,
+      borderColor: colors.transparent
     },
     outline: {
-      backgroundColor: lateOceanColorPalette.transparent,
-      borderWidth: '1px',
-      borderColor: lateOceanColorPalette.lateOcean
+      backgroundColor: colors.transparent,
+      borderWidth: 1,
+      borderColor: colors.primary
     }
   },
   default: {
     fill: {
       backgroundColor: lateOceanColorPalette.black50,
-      borderWidth: '0',
-      borderColor: lateOceanColorPalette.transparent
+      borderWidth: 0,
+      borderColor: colors.transparent
     },
     outline: {
-      backgroundColor: lateOceanColorPalette.transparent,
-      borderWidth: '1px',
-      borderColor: lateOceanColorPalette.black1000
+      backgroundColor: colors.transparent,
+      borderWidth: 1,
+      borderColor: colors.black
     }
   },
   danger: {
     fill: {
       backgroundColor: lateOceanColorPalette.warmEmbrace,
-      borderWidth: '0',
-      borderColor: lateOceanColorPalette.transparent
+      borderWidth: 0,
+      borderColor: colors.transparent
     },
     outline: {
-      backgroundColor: lateOceanColorPalette.transparent,
-      borderWidth: '1px',
-      borderColor: colorsLateOceanTheme.danger
+      backgroundColor: colors.transparent,
+      borderWidth: 1,
+      borderColor: colors.danger
     }
   }
 };
 
 const tooltip = {
-  backgroundColor: colorsLateOceanTheme.black,
+  backgroundColor: colors.black,
   borderRadius: 10,
   opacity: 0.95,
   horizontalPadding: 16,
@@ -2939,23 +2985,23 @@ const breakpoints = {
 
 const theme = {
   spacing: 4,
-  colors: colorsLateOceanTheme,
+  colors,
   palettes: {
     lateOcean: lateOceanColorPalette
   },
   avatar,
   button,
-  card: cardLateOceanTheme,
+  card,
   feedbackMessage,
   forms,
-  typography: typographyLateOceanTheme,
-  tag: tagLateOceanTheme,
-  shadows: shadowsLateOceanTheme,
-  fullScreenModal: fullScreenModalLateOceanTheme,
+  typography,
+  tag,
+  shadows,
+  fullScreenModal,
   iconButton,
-  listItem: listItemLateOceanTheme,
+  listItem,
   tooltip,
-  skeleton: skeletonTheme,
+  skeleton,
   breakpoints
 };
 
@@ -3169,13 +3215,8 @@ function TypographyEmoji({
   const {
     fontSize
   } = typeConfig[typeConfigKey];
-
-  if ((process.env.NODE_ENV !== "production")) {
-    if (!fontSize.endsWith('px')) throw new Error(`Unexpected font-size value: ${fontSize}`);
-  }
-
   return /*#__PURE__*/jsxRuntime.jsx(StyledTypographyEmoji, {
-    size: parseInt(fontSize.slice(0, -2), 10),
+    size: fontSize,
     emoji: emoji
   });
 }
@@ -3334,9 +3375,7 @@ function MatchWindowSize({
 }) {
   const match = useMatchWindowSize(matchWindowSizeOptions);
   if (!match) return null;
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: children
-  });
+  return children;
 }
 
 exports.useWindowSize = BabelPluginStyledComponentsReactNative.useWindowDimensions;
@@ -3349,6 +3388,7 @@ exports.Flex = Flex;
 exports.FullScreenModal = FullScreenModal;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
+exports.InputEmail = InputEmail;
 exports.InputFeedback = InputFeedback;
 exports.InputField = InputField;
 exports.InputIcon = InputIcon;