@ornikar/kitt-universal 9.8.0 → 9.9.0

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

@@ -1,6 +1,6 @@
 .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh{width:auto;display:var(--a1vkj3mh-0);-webkit-align-self:var(--a1vkj3mh-1);-ms-flex-item-align:var(--a1vkj3mh-1);align-self:var(--a1vkj3mh-1);outline:none;}@media (min-width:768px){.kitt-hover .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:hover > * > *{-webkit-transform:scale(var(--a1vkj3mh-3));-ms-transform:scale(var(--a1vkj3mh-3));transform:scale(var(--a1vkj3mh-3));}}.kitt-active .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:active > * > *{-webkit-transform:var(--a1vkj3mh-4);-ms-transform:var(--a1vkj3mh-4);transform:var(--a1vkj3mh-4);}.kitt-active .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:active > * > *,.kitt-hover .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:hover > * > *{background:var(--a1vkj3mh-5);}.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *{-webkit-transform:scale(1) translateZ(0);-ms-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:var(--a1vkj3mh-6);transition:var(--a1vkj3mh-6);}.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *::after,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *::before{content:'';position:absolute;border-radius:var(--a1vkj3mh-7);-webkit-transition:var(--a1vkj3mh-8);transition:var(--a1vkj3mh-8);}.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *::after{opacity:var(--a1vkj3mh-9);top:var(--a1vkj3mh-10);left:var(--a1vkj3mh-10);width:var(--a1vkj3mh-12);height:var(--a1vkj3mh-12);border:var(--a1vkj3mh-14);}.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *::before{opacity:0;border:var(--a1vkj3mh-15);width:100%;height:100%;top:var(--a1vkj3mh-16);left:var(--a1vkj3mh-16);}.kitt-focus .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > *,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:focus > *,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > [data-focusvisible-polyfill]{outline:none;}.kitt-focus .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *::before,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:focus > * > *::before,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > [data-focusvisible-polyfill] > *::before{opacity:1;}.kitt-hover .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *::before,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:hover > * > *::before,.kitt-active .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > * > *::before,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:active > * > *::before{opacity:0;}.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > *{color:var(--a1vkj3mh-18);}.kitt-hover .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > *,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:hover > *{color:var(--a1vkj3mh-19);}.kitt-active .kitt-u_AnimatedButtonPressableContainer_a1vkj3mh > *,.kitt-u_AnimatedButtonPressableContainer_a1vkj3mh:active > *{color:var(--a1vkj3mh-20);}
 .kitt-u_StyledSpinningIconContainer_ssn8o83{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}.kitt-u_StyledSpinningIconContainer_ssn8o83 > svg{-webkit-animation:spin-kitt-u_StyledSpinningIconContainer_ssn8o83 1.1s infinite linear;animation:spin-kitt-u_StyledSpinningIconContainer_ssn8o83 1.1s infinite linear;}@-webkit-keyframes spin-kitt-u_StyledSpinningIconContainer_ssn8o83{0%{-webkit-transform:rotate(-1deg);-ms-transform:rotate(-1deg);transform:rotate(-1deg);}100%{-webkit-transform:rotate(359deg);-ms-transform:rotate(359deg);transform:rotate(359deg);}}@keyframes spin-kitt-u_StyledSpinningIconContainer_ssn8o83{0%{-webkit-transform:rotate(-1deg);-ms-transform:rotate(-1deg);transform:rotate(-1deg);}100%{-webkit-transform:rotate(359deg);-ms-transform:rotate(359deg);transform:rotate(359deg);}}
-.kitt-u_InputTextContainer_i1encr9g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;}.kitt-u_InputTextContainer_i1encr9g > [data-focusvisible-polyfill]{outline:none;}.kitt-u_InputTextContainer_i1encr9g > *::-ms-clear,.kitt-u_InputTextContainer_i1encr9g > *::-ms-reveal{display:none;}.kitt-u_InputTextContainer_i1encr9g,.kitt-u_InputTextContainer_i1encr9g > *{cursor:var(--i1encr9g-0);}.kitt-u_InputTextContainer_i1encr9g > *{-webkit-transition:var(--i1encr9g-1);transition:var(--i1encr9g-1);}.kitt-u_InputTextContainer_i1encr9g:hover > *,.kitt-hover .kitt-u_InputTextContainer_i1encr9g > *{border-color:var(--i1encr9g-2);}.kitt-u_InputTextContainer_i1encr9g:focus > *,.kitt-u_InputTextContainer_i1encr9g > *:focus,.kitt-focus .kitt-u_InputTextContainer_i1encr9g > *{border-color:var(--i1encr9g-3);}
+.kitt-u_InputTextContainer_i1encr9g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;}.kitt-u_InputTextContainer_i1encr9g > *::-ms-clear,.kitt-u_InputTextContainer_i1encr9g > *::-ms-reveal{display:none;}.kitt-u_InputTextContainer_i1encr9g > *{-webkit-transition:var(--i1encr9g-0);transition:var(--i1encr9g-0);}
 @media (hover:none) and (pointer:coarse){.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:hover,.kitt-hover .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-0));-ms-transform:scale(var(--p1nlccvg-0));transform:scale(var(--p1nlccvg-0));}}@media (min-width:768px){.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:hover,.kitt-hover .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-2));-ms-transform:scale(var(--p1nlccvg-2));transform:scale(var(--p1nlccvg-2));}}.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:active,.kitt-active .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-3));-ms-transform:scale(var(--p1nlccvg-3));transform:scale(var(--p1nlccvg-3));}.kitt-u_PressableIconButtonWebWrapper_p1nlccvg,.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > [data-focusvisible-polyfill]{outline:none;}.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:hover,.kitt-hover .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *,.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:focus,.kitt-focus .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *,.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > [data-focusvisible-polyfill],.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:active,.kitt-active .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{background-color:var(--p1nlccvg-4);}
 .kitt-u_overflowHidden_otm3u3{overflow:hidden;}
 .kitt-u_PageLoaderContainer_ptkwz2j{width:var(--ptkwz2j-3);height:var(--ptkwz2j-3);-webkit-transform:scale(-1) rotate(90deg);-ms-transform:scale(-1) rotate(90deg);transform:scale(-1) rotate(90deg);}@-webkit-keyframes PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:var(--ptkwz2j-0);}100%{stroke-dashoffset:0;}}@keyframes PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:var(--ptkwz2j-0);}100%{stroke-dashoffset:0;}}@-webkit-keyframes PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:var(--ptkwz2j-0);}100%{stroke-dashoffset:var(--ptkwz2j-2);}}@keyframes PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:var(--ptkwz2j-0);}100%{stroke-dashoffset:var(--ptkwz2j-2);}}@-webkit-keyframes PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}.kitt-u_PageLoaderContainer_ptkwz2j circle,.kitt-u_PageLoaderContainer_ptkwz2j g{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;}.kitt-u_PageLoaderContainer_ptkwz2j circle{stroke-width:var(--ptkwz2j-5);stroke-dasharray:var(--ptkwz2j-0);stroke-dashoffset:var(--ptkwz2j-0);stroke-linecap:round;}.kitt-u_PageLoaderContainer_ptkwz2j g[data-large-loader='base'] circle{stroke:var(--ptkwz2j-8);-webkit-animation:var(--ptkwz2j-9);animation:var(--ptkwz2j-9);-webkit-animation-name:PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j;animation-name:PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j;}.kitt-u_PageLoaderContainer_ptkwz2j g[data-large-loader='fill']{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-animation:var(--ptkwz2j-10);animation:var(--ptkwz2j-10);-webkit-animation-name:PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j;animation-name:PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j;}.kitt-u_PageLoaderContainer_ptkwz2j g[data-large-loader='fill'] circle{stroke:var(--ptkwz2j-11);-webkit-animation:var(--ptkwz2j-12);animation:var(--ptkwz2j-12);-webkit-animation-name:PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j,PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j;animation-name:PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j,PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j;}

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

@@ -1407,6 +1407,7 @@ const colors = {
   hover: lateOceanColorPalette.black100,
   white: lateOceanColorPalette.white,
   black: lateOceanColorPalette.black1000,
+  blackLight: lateOceanColorPalette.black555,
   blackAnthracite: lateOceanColorPalette.black800,
   uiBackground: lateOceanColorPalette.black25,
   uiBackgroundLight: lateOceanColorPalette.white,
@@ -1703,34 +1704,34 @@ const inputStatesStyle = {
   default: {
     backgroundColor: colors.uiBackgroundLight,
     borderColor: colors.separator,
-    color: 'black'
+    color: colors.black
   },
   pending: {
     backgroundColor: colors.uiBackgroundLight,
     borderColor: colors.separator,
-    color: 'black'
+    color: colors.black
   },
   valid: {
     backgroundColor: colors.uiBackgroundLight,
     borderColor: lateOceanColorPalette.black100,
-    color: 'black'
+    color: colors.black
   },
   hover: {
     borderColor: lateOceanColorPalette.black200,
-    color: 'black'
+    color: colors.black
   },
   focus: {
     borderColor: colors.primary,
-    color: 'black'
+    color: colors.black
   },
   disabled: {
     backgroundColor: colors.disabled,
     borderColor: colors.separator,
-    color: 'black-light'
+    color: colors.blackLight
   },
   invalid: {
     borderColor: colors.separator,
-    color: 'black'
+    color: colors.black
   }
 };
 const input = {
@@ -1744,6 +1745,9 @@ const input = {
   icon: {
     size: 20
   },
+  rightContainer: {
+    padding: 10
+  },
   padding: {
     horizontal: 16,
     vertical: 5
@@ -2146,6 +2150,7 @@ function Checkbox({
   });
 }
 
+/** @deprecated use native-base instead */
 function getInputUIState({
   isFocused,
   isDisabled,
@@ -2157,6 +2162,7 @@ function getInputUIState({
   return 'default';
 }
 
+/** @deprecated this mixin is not SSR compatible */
 const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";border-width:", "px;border-radius:", "px;border-color:", ";font-size:", ";color:", ";font-family:", ";"], ({
   theme,
   $state
@@ -2175,7 +2181,7 @@ const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";bor
 }, ({
   theme,
   $state
-}) => theme.kitt.typography.colors[theme.kitt.forms.input.states[$state].color], ({
+}) => theme.kitt.forms.input.states[$state].color || theme.kitt.forms.input.states.default.color, ({
   theme
 }) => theme.kitt.typography.types.bodies.fontFamily.regular);
 
@@ -2314,9 +2320,6 @@ const InputTextContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
   class: "kitt-u_InputTextContainer_i1encr9g",
   vars: {
     "i1encr9g-0": [({
-      $isDisabled
-    }) => $isDisabled ? 'not-allowed' : 'inherit'],
-    "i1encr9g-1": [({
       theme
     }) => {
       const {
@@ -2325,51 +2328,13 @@ const InputTextContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
         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:", ";width:100%;min-height:", "px;"], styledTextInputMixin, ({
-  theme,
-  multiline
-}) => {
-  if (!multiline && "web" !== 'web') return `0 ${theme.kitt.forms.input.padding.horizontal}px`;
-  return `${theme.kitt.forms.input.padding.vertical}px ${theme.kitt.forms.input.padding.horizontal}px`;
-}, ({
-  theme,
-  multiline
-}) => {
-  const typeConfigKey = getTypographyTypeConfigKey(theme);
-  return `${theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight}px`;
-}, ({
-  theme,
-  $minHeight = theme.kitt.forms.input.minHeight
-}) => $minHeight);
-const RightInputContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputText__RightInputContainer",
-  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,
   right,
-  minHeight,
   state: formState,
   internalForceState,
   disabled = false,
@@ -2384,38 +2349,39 @@ const InputText = /*#__PURE__*/react.forwardRef(({
   ...props
 }, ref) => {
   const theme = /*#__PURE__*/styled.useTheme();
-  const [isFocused, setIsFocused] = react.useState(false);
-  const state = internalForceState || getInputUIState({
-    isFocused,
-    isDisabled: disabled,
-    formState
+  const fontSizeForNativeBase = createNativeBaseFontSize({
+    base: 'body'
   });
   return /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
     $isDisabled: disabled,
-    children: [/*#__PURE__*/jsxRuntime.jsx(StyledTextInput, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(nativeBase.Input, {
       ref: ref,
       multiline: multiline,
       nativeID: id,
-      editable: !disabled,
+      isDisabled: internalForceState ? internalForceState === 'disabled' : disabled,
+      isHovered: internalForceState ? internalForceState === 'hover' : undefined,
+      isFocused: internalForceState ? internalForceState === 'focus' : undefined,
       keyboardType: keyboardType,
       autoComplete: autoComplete,
       autoCorrect: autoCorrect,
-      $minHeight: minHeight,
       textContentType: textContentType,
-      placeholderTextColor: theme.kitt.forms.input.color.placeholder,
-      selectionColor: theme.kitt.forms.input.color.selection,
+      fontSize: fontSizeForNativeBase,
+      lineHeight: // On basic text input, we set the line-height to zero for iOS to fix vertical text alignment
+      // This is a iOS only fix since having 0 as a line-height value breaks text inputs on Android
+      fontSizeForNativeBase,
+      fontWeight: "bodies.regular",
+      fontFamily: "bodies.regular",
+      py: !multiline && "web" !== 'web' ? 0 : undefined,
       ...props,
-      $state: state,
-      onFocus: e => {
-        setIsFocused(true);
-        if (onFocus) onFocus(e);
-      },
-      onBlur: e => {
-        setIsFocused(false);
-        if (onBlur) onBlur(e);
-      },
+      variant: "outline",
       onSubmitEditing: multiline ? () => null : onSubmitEditing
-    }), right ? /*#__PURE__*/jsxRuntime.jsx(RightInputContainer, {
+    }), right ? /*#__PURE__*/jsxRuntime.jsx(View, {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      justifyContent: "center",
+      padding: theme.kitt.forms.input.rightContainer.padding,
       children: right
     }) : null]
   });
@@ -3640,6 +3606,78 @@ const createKittNativeBaseCustomTheme = theme => {
       bodies: theme.typography.types.bodies.fontFamily
     },
     components: {
+      Input: {
+        baseStyle: {
+          width: '100%',
+          minHeight: theme.forms.input.minHeight,
+          py: theme.forms.input.padding.vertical,
+          px: theme.forms.input.padding.horizontal,
+          borderRadius: theme.forms.input.borderRadius,
+          _disabled: {
+            opacity: 1 // override default native-base opacity
+
+          },
+          _light: {
+            color: theme.forms.input.states.default.color,
+            placeholderTextColor: theme.forms.input.color.placeholder,
+            borderColor: theme.forms.input.states.default.borderColor,
+            bg: theme.forms.input.states.default.backgroundColor,
+            _hover: {
+              borderColor: theme.forms.input.states.hover.borderColor,
+              color: theme.forms.input.states.hover.color,
+              _focus: {
+                borderColor: theme.forms.input.states.focus.borderColor,
+                color: theme.forms.input.states.focus.color
+              }
+            },
+            _focus: {
+              borderColor: theme.forms.input.states.focus.borderColor,
+              color: theme.forms.input.states.focus.color,
+              _hover: {
+                borderColor: theme.forms.input.states.focus.borderColor,
+                color: theme.forms.input.states.focus.color
+              },
+              _stack: {
+                style: {
+                  outlineWidth: 0
+                }
+              }
+            },
+            _invalid: {
+              borderColor: theme.forms.input.states.invalid.borderColor,
+              color: theme.forms.input.states.invalid.color,
+              _hover: {
+                borderColor: theme.forms.input.states.hover.borderColor,
+                color: theme.forms.input.states.hover.color
+              }
+            },
+            _ios: {
+              selectionColor: theme.forms.input.color.selection
+            },
+            _android: {
+              selectionColor: theme.forms.input.color.selection
+            },
+            _disabled: {
+              placeholderTextColor: theme.forms.input.color.placeholder,
+              color: theme.forms.input.states.disabled.color,
+              borderColor: theme.forms.input.states.disabled.borderColor,
+              bg: theme.forms.input.states.disabled.backgroundColor
+            }
+          }
+        },
+        variants: {
+          outline: {
+            borderWidth: theme.forms.input.borderWidth,
+            _focus: {
+              bg: theme.forms.input.states.default.backgroundColor
+            }
+          },
+          underlined: {},
+          rounded: {},
+          filled: {},
+          unstyled: {}
+        }
+      },
       Text: {
         baseStyle: {
           _light: {