@ornikar/kitt-universal 1.0.1 → 1.0.2

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

@@ -47,20 +47,18 @@ function SpinningIcon({
   }, children);
 }
 
-const IconContainer$2 = styled__default.View`
-  color: ${({
+const IconContainer$2 = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Icon__IconContainer",
+  componentId: "kitt-universal__sc-usm0ol-0"
+})(["color:", ";width:", "px;height:", "px;align-self:", ";"], ({
   color
-}) => color};
-  width: ${({
+}) => color, ({
   size
-}) => size}px;
-  height: ${({
+}) => size, ({
   size
-}) => size}px;
-  align-self: ${({
+}) => size, ({
   align = 'auto'
-}) => align};
-`;
+}) => align);
 function Icon({
   icon,
   size = 20,
@@ -83,9 +81,10 @@ const TypographyColorContext = /*#__PURE__*/React.createContext('black');
 function useTypographyColor() {
   return React.useContext(TypographyColorContext);
 }
-const StyledTypography = styled__default.Text`
-  /* font */
-  ${({
+const StyledTypography = /*#__PURE__*/styled__default.Text.withConfig({
+  displayName: "Typography__StyledTypography",
+  componentId: "kitt-universal__sc-1dz700q-0"
+})(["", " ", ""], ({
   theme,
   isHeader,
   type,
@@ -107,17 +106,13 @@ const StyledTypography = styled__default.Text`
     font-weight: ${isHeader ? headers.fontWeight : bodies.fontWeight[variant]};
     font-style: ${isHeader ? headers.fontStyle : bodies.fontStyle[variant]};
   `;
-}}
-
-  /* color */
-  ${({
+}, ({
   theme,
   color
 }) => !color ? '' : `
   color: ${theme.kitt.typography.colors[color]};
   text-decoration-color: ${theme.kitt.typography.colors[color]};
-  `}
-`;
+  `);
 
 const isTypeHeader = type => type.startsWith('header');
 
@@ -197,25 +192,20 @@ const getFirstCharacter = string => string ? string[0] : '';
 
 const getInitials = (firstname, lastname) => (getFirstCharacter(firstname) + getFirstCharacter(lastname)).toUpperCase();
 
-const StyledAvatarView = styled__default.View`
-  border-radius: ${({
+const StyledAvatarView = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Avatar__StyledAvatarView",
+  componentId: "kitt-universal__sc-9miubv-0"
+})(["border-radius:", "px;background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], ({
   round,
   size
-}) => round ? size / 2 : 10}px;
-  background-color: ${({
+}) => round ? size / 2 : 10, ({
   theme,
   light
-}) => light ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar.default.backgroundColor};
-  height: ${({
+}) => light ? theme.kitt.avatar.light.backgroundColor : theme.kitt.avatar.default.backgroundColor, ({
   size
-}) => size}px;
-  width: ${({
+}) => size, ({
   size
-}) => size}px;
-  overflow: hidden;
-  align-items: center;
-  justify-content: center;
-`;
+}) => size);
 
 function AvatarContent({
   size = 40,
@@ -262,21 +252,19 @@ function Avatar({
   })));
 }
 
-const ButtonContainer = styled__default.Pressable`
-  min-width: ${({
+const ButtonContainer = /*#__PURE__*/styled__default.Pressable.withConfig({
+  displayName: "ButtonContainer",
+  componentId: "kitt-universal__sc-ofbpwm-0"
+})(["min-width:", ";max-width:", ";width:", ";min-height:", ";background-color:", ";padding:", ";flex-direction:row;align-self:flex-start;border-radius:", ";border-color:", ";border-width:", ";"], ({
   theme
-}) => theme.kitt.button.minWidth};
-  max-width: ${({
+}) => theme.kitt.button.minWidth, ({
   theme,
   stretch
-}) => stretch ? 'auto' : theme.kitt.button.maxWidth};
-  width: ${({
+}) => stretch ? 'auto' : theme.kitt.button.maxWidth, ({
   stretch
-}) => stretch ? '100%' : 'auto'};
-  min-height: ${({
+}) => stretch ? '100%' : 'auto', ({
   theme
-}) => theme.kitt.button.minHeight};
-  background-color: ${({
+}) => theme.kitt.button.minHeight, ({
   theme,
   isPressed,
   disabled,
@@ -287,30 +275,21 @@ const ButtonContainer = styled__default.Pressable`
   }
 
   return isPressed ? theme.kitt.button[type].pressedBackgroundColor : theme.kitt.button[type].backgroundColor;
-}};
-  padding: ${({
+}, ({
   theme
-}) => theme.kitt.button.contentPadding.default};
-  flex-direction: row;
-
-  /* Emulate inline-* css display by making the button taking only its necessary space */
-  align-self: flex-start;
-  border-radius: ${({
+}) => theme.kitt.button.contentPadding.default, ({
   theme
-}) => theme.kitt.button.borderRadius};
-  border-color: ${({
+}) => theme.kitt.button.borderRadius, ({
   theme,
   disabled,
   type
-}) => disabled ? theme.kitt.button[type].disabledBorderColor : 'transparent'};
-  border-width: ${({
+}) => disabled ? theme.kitt.button[type].disabledBorderColor : 'transparent', ({
   theme
-}) => theme.kitt.button.borderWidth};
-`;
+}) => theme.kitt.button.borderWidth);
 
 function TypographyIconInheritColor(props) {
   const color = useTypographyColor();
-  const theme = styled.useTheme();
+  const theme = /*#__PURE__*/styled.useTheme();
   return /*#__PURE__*/React__default.createElement(Icon, _extends__default({}, props, {
     color: theme.kitt.typography.colors[color]
   }));
@@ -320,7 +299,7 @@ function TypographyIconSpecifiedColor({
   color,
   ...otherProps
 }) {
-  const theme = styled.useTheme();
+  const theme = /*#__PURE__*/styled.useTheme();
   return /*#__PURE__*/React__default.createElement(Icon, _extends__default({}, otherProps, {
     color: theme.kitt.typography.colors[color]
   }));
@@ -358,26 +337,21 @@ const getTextColorByType = (type, isPressed, disabled) => {
   }
 };
 
-const ButtonText = styled__default(Typography.Text)`
-  /* On native code, this is the only way to ensure that the text is centered */
-  text-align: center;
-`;
-const Content$1 = styled__default.View`
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-
-  /*
-    On native code flex grow does not work as expected which cause an issue with the flex props.
-    In order to occupy only the needed space, we enable flex grow only when stretched
-  */
-  flex: ${({
+const ButtonText = /*#__PURE__*/styled__default(Typography.Text).withConfig({
+  displayName: "ButtonContent__ButtonText",
+  componentId: "kitt-universal__sc-dnyw3n-0"
+})(["text-align:center;"]);
+const Content$1 = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "ButtonContent__Content",
+  componentId: "kitt-universal__sc-dnyw3n-1"
+})(["flex-direction:row;align-items:center;justify-content:center;flex:", ";"], ({
   stretch,
   iconOnly
-}) => `${stretch || iconOnly ? 1 : 0} 1 auto`};
-`;
-const IconContainer$1 = styled__default.View`
-  ${({
+}) => `${stretch || iconOnly ? 1 : 0} 1 auto`);
+const IconContainer$1 = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "ButtonContent__IconContainer",
+  componentId: "kitt-universal__sc-dnyw3n-2"
+})(["", ""], ({
   theme,
   iconPosition
 }) => {
@@ -388,8 +362,7 @@ const IconContainer$1 = styled__default.View`
   }
 
   return `margin: 0 0 0 ${value}px;`;
-}}
-`;
+});
 
 function ButtonIcon({
   icon,
@@ -421,7 +394,7 @@ function ButtonContent({
   children
 }) {
   const color = getTextColorByType(type, Boolean(isPressed), Boolean(disabled));
-  const theme = styled.useTheme();
+  const theme = /*#__PURE__*/styled.useTheme();
   const sharedIconProps = {
     spin: iconSpin,
     color,
@@ -506,25 +479,22 @@ function Button({
   }), children));
 }
 
-const Container$5 = styled__default.View`
-  background-color: ${({
+const Container$5 = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Card__Container",
+  componentId: "kitt-universal__sc-1n9psug-0"
+})(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], ({
   theme,
   type
-}) => theme.kitt.card[type].backgroundColor};
-  padding: ${({
+}) => theme.kitt.card[type].backgroundColor, ({
   theme
-}) => theme.kitt.card.padding};
-  border-radius: ${({
+}) => theme.kitt.card.padding, ({
   theme
-}) => theme.kitt.card.borderRadius};
-  border-width: ${({
+}) => theme.kitt.card.borderRadius, ({
   theme
-}) => theme.kitt.card.borderWidth};
-  border-color: ${({
+}) => theme.kitt.card.borderWidth, ({
   theme,
   type
-}) => theme.kitt.card[type].borderColor};
-`;
+}) => theme.kitt.card[type].borderColor);
 function Card({
   children,
   type
@@ -604,28 +574,30 @@ const KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-const FieldContainer = styled__default.View`
-  padding: 5px 0 10px;
-`;
-const FeedbackContainer = styled__default.View`
-  ${({
+const FieldContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "InputField__FieldContainer",
+  componentId: "kitt-universal__sc-13fkixs-0"
+})(["padding:5px 0 10px;"]);
+const FeedbackContainer = /*#__PURE__*/styled__default.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 = styled__default.View`
-  flex-direction: row;
-  align-items: center;
-  padding-bottom: ${({
+}, 'padding-top: 10px', 'padding-top: 5px'));
+const FieldLabelContainer = /*#__PURE__*/styled__default.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}px;
-`;
-const LabelContainer = styled__default.View`
-  margin-right: ${({
+}) => theme.kitt.forms.inputField.labelContainerPaddingBottom);
+const LabelContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "InputField__LabelContainer",
+  componentId: "kitt-universal__sc-13fkixs-3"
+})(["margin-right:", "px;"], ({
   theme
-}) => theme.kitt.forms.inputField.iconMarginLeft}px;
-`;
+}) => theme.kitt.forms.inputField.iconMarginLeft);
 function InputField({
   label,
   labelFeedback,
@@ -647,69 +619,50 @@ const useInputText = () => {
   };
 };
 
-const styledTextInputMixin = styled.css`
-  /* stylelint-disable declaration-property-value-allowed-list */
-  background-color: ${({
+const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";border-width:", ";border-radius:", ";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};
-  border-width: ${({
+}) => state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states.default.backgroundColor, ({
   theme
-}) => theme.kitt.forms.input.borderWidth};
-  border-radius: ${({
+}) => theme.kitt.forms.input.borderWidth, ({
   theme
-}) => theme.kitt.forms.input.borderRadius};
-  border-color: ${({
+}) => theme.kitt.forms.input.borderRadius, ({
   theme,
   state
-}) => theme.kitt.forms.input.states[state].borderColor};
-  font-size: ${({
+}) => theme.kitt.forms.input.states[state].borderColor, ({
   theme
-}) => theme.kitt.typography.types.bodies.configs.body.baseAndSmall.fontSize};
-  color: ${({
+}) => theme.kitt.typography.types.bodies.configs.body.baseAndSmall.fontSize, ({
   theme,
   state
-}) => theme.kitt.typography.colors[theme.kitt.forms.input.states[state].color]};
-  font-family: ${({
+}) => theme.kitt.typography.colors[theme.kitt.forms.input.states[state].color], ({
   theme
-}) => theme.kitt.typography.types.bodies.fontFamily.regular};
-`;
-const Input = styled__default.TextInput`
-  /* stylelint-disable declaration-bang-space-before */
-  /* stylelint-disable comment-word-disallowed-list */
-
-  /* FIXME: text input is not vertically centered on iOS because of bigger line-height */
-  ${styledTextInputMixin}
-  padding: ${({
+}) => theme.kitt.typography.types.bodies.fontFamily.regular);
+const Input = /*#__PURE__*/styled__default.TextInput.withConfig({
+  displayName: "InputText__Input",
+  componentId: "kitt-universal__sc-uke279-0"
+})(["", " padding:", ";line-height:", ";min-height:", "px;"], styledTextInputMixin, ({
   theme,
   multiline
-}) => !multiline && reactNative.Platform.OS === 'ios' ? theme.kitt.forms.input.paddingSingleLineIOS : theme.kitt.forms.input.padding};
-  line-height: ${({
+}) => !multiline && reactNative.Platform.OS === 'ios' ? theme.kitt.forms.input.paddingSingleLineIOS : theme.kitt.forms.input.padding, ({
   theme,
   multiline
-}) => !multiline && reactNative.Platform.OS === 'ios' ? 0 : theme.kitt.typography.types.bodies.configs.body.baseAndSmall.lineHeight};
-  min-height: ${({
+}) => !multiline && reactNative.Platform.OS === 'ios' ? 0 : theme.kitt.typography.types.bodies.configs.body.baseAndSmall.lineHeight, ({
   minHeight
-}) => minHeight}px;
-`;
-const Container$4 = styled__default.View`
-  margin-top: ${({
+}) => minHeight);
+const Container$4 = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "InputText__Container",
+  componentId: "kitt-universal__sc-uke279-1"
+})(["margin-top:", ";margin-bottom:", ";"], ({
   theme
-}) => theme.kitt.forms.input.marginTop};
-  margin-bottom: ${({
+}) => theme.kitt.forms.input.marginTop, ({
   theme
-}) => theme.kitt.forms.input.marginBottom};
-`;
-const PasswordButtonContainer = styled__default.Pressable`
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  justify-content: center;
-  padding: ${({
+}) => theme.kitt.forms.input.marginBottom);
+const PasswordButtonContainer = /*#__PURE__*/styled__default.Pressable.withConfig({
+  displayName: "InputText__PasswordButtonContainer",
+  componentId: "kitt-universal__sc-uke279-2"
+})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:", "px;"], ({
   theme
-}) => theme.kitt.forms.input.passwordButtonIconSize / 2}px;
-`;
+}) => theme.kitt.forms.input.passwordButtonIconSize / 2);
 
 const getInputState = ({
   isDisabled,
@@ -764,7 +717,7 @@ const InputText = /*#__PURE__*/React.forwardRef(({
     isPasswordVisible,
     togglePasswordVisibility
   } = useInputText();
-  const theme = styled.useTheme();
+  const theme = /*#__PURE__*/styled.useTheme();
   const state = internalForceState || getInputState({
     isFocused,
     isDisabled: disabled,
@@ -812,67 +765,58 @@ function Label({
   }, children) : children);
 }
 
-const OuterRadio = styled__default.View`
-  background-color: ${({
+const OuterRadio = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Radio__OuterRadio",
+  componentId: "kitt-universal__sc-1mdgr2o-0"
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", ";border-color:", ";"], ({
   theme,
   disabled
-}) => theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].backgroundColor};
-  width: ${({
+}) => theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].backgroundColor, ({
   theme
-}) => theme.kitt.forms.radio.size}px;
-  height: ${({
+}) => theme.kitt.forms.radio.size, ({
   theme
-}) => theme.kitt.forms.radio.size}px;
-  border-radius: ${({
+}) => theme.kitt.forms.radio.size, ({
   theme
-}) => theme.kitt.forms.radio.size / 2}px;
-  border-width: ${({
+}) => theme.kitt.forms.radio.size / 2, ({
   theme
-}) => theme.kitt.forms.radio.unchecked.borderWidth};
-  border-color: ${({
+}) => theme.kitt.forms.radio.unchecked.borderWidth, ({
   theme,
   disabled
-}) => theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor};
-`;
-const SelectedOuterRadio = styled__default.View`
-  background-color: ${({
+}) => theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor);
+const SelectedOuterRadio = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Radio__SelectedOuterRadio",
+  componentId: "kitt-universal__sc-1mdgr2o-1"
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;justify-content:center;align-items:center;"], ({
   theme
-}) => theme.kitt.forms.radio.checked.backgroundColor};
-  width: ${({
+}) => theme.kitt.forms.radio.checked.backgroundColor, ({
   theme
-}) => theme.kitt.forms.radio.size}px;
-  height: ${({
+}) => theme.kitt.forms.radio.size, ({
   theme
-}) => theme.kitt.forms.radio.size}px;
-  border-radius: ${({
+}) => theme.kitt.forms.radio.size, ({
   theme
-}) => theme.kitt.forms.radio.size / 2}px;
-  justify-content: center;
-  align-items: center;
-`;
-const SelectedInnerRadio = styled__default.View`
-  background-color: ${({
+}) => theme.kitt.forms.radio.size / 2);
+const SelectedInnerRadio = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Radio__SelectedInnerRadio",
+  componentId: "kitt-universal__sc-1mdgr2o-2"
+})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;"], ({
   theme
-}) => theme.kitt.forms.radio.checked.innerBackgroundColor};
-  width: ${({
+}) => theme.kitt.forms.radio.checked.innerBackgroundColor, ({
   theme
-}) => theme.kitt.forms.radio.checked.innerSize}px;
-  height: ${({
+}) => theme.kitt.forms.radio.checked.innerSize, ({
   theme
-}) => theme.kitt.forms.radio.checked.innerSize}px;
-  border-radius: ${({
+}) => theme.kitt.forms.radio.checked.innerSize, ({
   theme
-}) => theme.kitt.forms.radio.checked.innerSize / 2}px;
-`;
-const Container$3 = styled__default.Pressable`
-  flex-direction: row;
-  align-items: center;
-`;
-const Text = styled__default(Typography.Text)`
-  margin-left: ${({
+}) => theme.kitt.forms.radio.checked.innerSize / 2);
+const Container$3 = /*#__PURE__*/styled__default.Pressable.withConfig({
+  displayName: "Radio__Container",
+  componentId: "kitt-universal__sc-1mdgr2o-3"
+})(["flex-direction:row;align-items:center;"]);
+const Text = /*#__PURE__*/styled__default(Typography.Text).withConfig({
+  displayName: "Radio__Text",
+  componentId: "kitt-universal__sc-1mdgr2o-4"
+})(["margin-left:", "px;"], ({
   theme
-}) => theme.kitt.spacing * 2}px;
-`;
+}) => theme.kitt.spacing * 2);
 function Radio({
   id,
   checked,
@@ -900,7 +844,7 @@ function Radio({
 
 function TextArea({ ...props
 }) {
-  const theme = styled.useTheme();
+  const theme = /*#__PURE__*/styled.useTheme();
   return /*#__PURE__*/React__default.createElement(InputText, _extends__default({
     multiline: true
   }, props, {
@@ -909,27 +853,28 @@ function TextArea({ ...props
   }));
 }
 
-const Body = styled__default.View`
-  ${({
+const Body = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Body",
+  componentId: "kitt-universal__sc-1ofncfn-0"
+})(["", " background-color:", ";flex:1;"], ({
   theme
 }) => theme.responsive.ifWindowSizeMatches({
   minWidth: KittBreakpoints.MEDIUM
 }, `padding-right: ${theme.kitt.spacing * 12}px;
       padding-left: ${theme.kitt.spacing * 12}px;`, `padding-right: ${theme.kitt.spacing * 6}px;
-      padding-left: ${theme.kitt.spacing * 6}px;`)}
-  background-color: ${({
+      padding-left: ${theme.kitt.spacing * 6}px;`), ({
   theme
-}) => theme.kitt.colors.uiBackgroundLight};
-  flex: 1;
-`;
+}) => theme.kitt.colors.uiBackgroundLight);
 function FullScreenModalBody({
   children
 }) {
   return /*#__PURE__*/React__default.createElement(Body, null, children);
 }
 
-const SideContainer = styled__default.View`
-  ${({
+const SideContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Header__SideContainer",
+  componentId: "kitt-universal__sc-dfmxi1-0"
+})(["", ""], ({
   theme,
   side = 'left'
 }) => {
@@ -940,15 +885,16 @@ const SideContainer = styled__default.View`
   }
 
   return `padding-left: ${padding}px;`;
-}}
-`;
+});
 
 function getHeaderHorizontalMediumPadding(spacing) {
   return spacing * 6;
 }
 
-const Header = styled__default.View`
-  ${({
+const Header = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Header",
+  componentId: "kitt-universal__sc-dfmxi1-1"
+})(["", ";border-bottom-color:", ";border-bottom-width:1px;flex-direction:row;align-items:center;"], ({
   theme,
   insetTop = 0
 }) => {
@@ -960,16 +906,13 @@ const Header = styled__default.View`
   return theme.responsive.ifWindowSizeMatches({
     minWidth: KittBreakpoints.MEDIUM
   }, `padding: ${paddingTop}px ${getHeaderHorizontalMediumPadding(theme.kitt.spacing)}px ${paddingVertical}px;`, `padding: ${paddingTop}px ${paddingHorizontal}px ${paddingVertical}px;`);
-}};
-  border-bottom-color: ${({
+}, ({
   theme
-}) => theme.kitt.fullScreenModal.header.borderColor};
-  border-bottom-width: 1px;
-  flex-direction: row;
-  align-items: center;
-`;
-const HeaderContent = styled__default.View`
-  ${({
+}) => theme.kitt.fullScreenModal.header.borderColor);
+const HeaderContent = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Header__HeaderContent",
+  componentId: "kitt-universal__sc-dfmxi1-2"
+})(["", ";", ";justify-content:center;align-items:center;"], ({
   theme,
   leftWidth,
   rightWidth,
@@ -988,8 +931,7 @@ const HeaderContent = styled__default.View`
   return theme.responsive.ifWindowSizeMatches({
     minWidth: KittBreakpoints.MEDIUM
   }, `width: ${computeWidth(parentHorizontalPaddingMedium)}px;`, `width: ${computeWidth(parentHorizontalPadding)}px;`);
-}};
-  ${({
+}, ({
   leftWidth,
   rightWidth
 }) => {
@@ -1001,10 +943,7 @@ const HeaderContent = styled__default.View`
   }
 
   return `margin-left: ${deltaMargin}px;`;
-}};
-  justify-content: center;
-  align-items: center;
-`;
+});
 function FullScreenModalHeader({
   children,
   right,
@@ -1043,12 +982,12 @@ function FullScreenModalHeader({
   }, right) : null);
 }
 
-const Container$2 = styled__default.View`
-  flex: 1;
-  background-color: ${({
+const Container$2 = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "FullScreenModal__Container",
+  componentId: "kitt-universal__sc-11qpbe3-0"
+})(["flex:1;background-color:", ";"], ({
   theme
-}) => theme.kitt.colors.uiBackground};
-`;
+}) => theme.kitt.colors.uiBackground);
 function FullScreenModal({
   children
 }) {
@@ -1057,10 +996,10 @@ function FullScreenModal({
 FullScreenModal.Header = FullScreenModalHeader;
 FullScreenModal.Body = FullScreenModalBody;
 
-const ContentView$1 = styled__default.View`
-  flex: 1 0 0%;
-  align-self: center;
-`;
+const ContentView$1 = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "ListItemContent__ContentView",
+  componentId: "kitt-universal__sc-57q0u9-0"
+})(["flex:1 0 0%;align-self:center;"]);
 function ListItemContent({
   children,
   ...rest
@@ -1068,17 +1007,16 @@ function ListItemContent({
   return /*#__PURE__*/React__default.createElement(ContentView$1, rest, children);
 }
 
-const SideContainerView = styled__default.View`
-  flex-direction: row;
-  margin-left: ${({
+const SideContainerView = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "ListItemSideContent__SideContainerView",
+  componentId: "kitt-universal__sc-1vajiw-0"
+})(["flex-direction:row;margin-left:", ";margin-right:", ";"], ({
   theme,
   side
-}) => side === 'right' ? theme.kitt.listItem.innerMargin : 0};
-  margin-right: ${({
+}) => side === 'right' ? theme.kitt.listItem.innerMargin : 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 : 0); // Handles the vertical alignment of the side elements of the list item
 
 function ListItemSideContainer({
   children,
@@ -1089,11 +1027,12 @@ function ListItemSideContainer({
     side: side
   }, rest), children);
 }
-const SideContentView = styled__default.View`
-  align-self: ${({
+const SideContentView = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "ListItemSideContent__SideContentView",
+  componentId: "kitt-universal__sc-1vajiw-1"
+})(["align-self:", ";"], ({
   align
-}) => align};
-`;
+}) => align);
 function ListItemSideContent({
   children,
   align = 'auto',
@@ -1104,13 +1043,13 @@ function ListItemSideContent({
   }, rest), children);
 }
 
-const ContainerView = styled__default.View`
-  flex-direction: row;
-  padding: ${({
+const ContainerView = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "ListItem__ContainerView",
+  componentId: "kitt-universal__sc-2afp9s-0"
+})(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], ({
   withPadding,
   theme
-}) => withPadding ? theme.kitt.listItem.padding : 0};
-  ${({
+}) => withPadding ? theme.kitt.listItem.padding : 0, ({
   theme,
   borders
 }) => {
@@ -1131,14 +1070,11 @@ const ContainerView = styled__default.View`
   }
 
   return 'border: none';
-}};
-  border-color: ${({
+}, ({
   theme
-}) => theme.kitt.listItem.borderColor};
-  background-color: ${({
+}) => theme.kitt.listItem.borderColor, ({
   theme
-}) => theme.kitt.colors.uiBackgroundLight};
-`;
+}) => theme.kitt.colors.uiBackgroundLight);
 function ListItem({
   children,
   withPadding,
@@ -1169,7 +1105,7 @@ function Loader({
   color = 'primary',
   size = 20
 }) {
-  const theme = styled.useTheme();
+  const theme = /*#__PURE__*/styled.useTheme();
   const colorHex = theme.kitt.typography.colors[color];
   return /*#__PURE__*/React__default.createElement(reactNative.ActivityIndicator, {
     testID: "ActivityIndicator",
@@ -1189,51 +1125,45 @@ function LargeLoader({
 
 const xIconSize = 14;
 const mainIconSize = 20;
-const Container$1 = styled__default.View`
-  border-radius: ${({
+const Container$1 = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Message__Container",
+  componentId: "kitt-universal__sc-c6400e-0"
+})(["border-radius:", "px;background-color:", ";padding-bottom:", "px;padding-left:", "px;padding-right:", "px;padding-top:", "px;flex-direction:row;align-items:flex-start;justify-content:space-between;"], ({
   theme,
   noRadius
-}) => noRadius ? 0 : theme.kitt.spacing * 5}px;
-  background-color: ${({
+}) => noRadius ? 0 : theme.kitt.spacing * 5, ({
   theme,
   type
-}) => theme.kitt.feedbackMessage.backgroundColors[type]};
-  padding-bottom: ${({
+}) => theme.kitt.feedbackMessage.backgroundColors[type], ({
   theme
-}) => theme.kitt.spacing * 4}px;
-  padding-left: ${({
+}) => theme.kitt.spacing * 4, ({
   theme
-}) => theme.kitt.spacing * 4}px;
-  padding-right: ${({
+}) => theme.kitt.spacing * 4, ({
   theme
-}) => theme.kitt.spacing * 4}px;
-  padding-top: ${({
+}) => theme.kitt.spacing * 4, ({
   theme,
   insets
-}) => (insets?.top ?? 0) + theme.kitt.spacing * 4}px;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
-`;
-const CloseContainer = styled__default.TouchableOpacity`
-  margin-left: ${({
+}) => (insets?.top ?? 0) + theme.kitt.spacing * 4);
+const CloseContainer = /*#__PURE__*/styled__default.TouchableOpacity.withConfig({
+  displayName: "Message__CloseContainer",
+  componentId: "kitt-universal__sc-c6400e-1"
+})(["margin-left:", "px;padding:", "px;"], ({
   theme
-}) => theme.kitt.spacing * 4}px;
-  padding: ${({
+}) => theme.kitt.spacing * 4, ({
   theme
-}) => theme.kitt.spacing}px;
-`;
-const IconContainer = styled__default.View`
-  margin-right: ${({
+}) => theme.kitt.spacing);
+const IconContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Message__IconContainer",
+  componentId: "kitt-universal__sc-c6400e-2"
+})(["margin-right:", "px;"], ({
   theme
-}) => theme.kitt.spacing * 4}px;
-`;
-const Content = styled__default.Text`
-  text-align: ${({
+}) => theme.kitt.spacing * 4);
+const Content = /*#__PURE__*/styled__default.Text.withConfig({
+  displayName: "Message__Content",
+  componentId: "kitt-universal__sc-c6400e-3"
+})(["text-align:", ";flex:1;"], ({
   centeredText
-}) => centeredText ? 'center' : 'left'};
-  flex: 1;
-`;
+}) => centeredText ? 'center' : 'left');
 
 const getColorByType = type => {
   switch (type) {
@@ -1297,7 +1227,10 @@ function Message({
   })) : null);
 }
 
-const OverlayPressable = styled__default.Pressable(({
+const OverlayPressable = /*#__PURE__*/styled__default.Pressable.withConfig({
+  displayName: "Overlay__OverlayPressable",
+  componentId: "kitt-universal__sc-1cz1gbr-0"
+})(({
   theme
 }) => ({ ...reactNative.StyleSheet.absoluteFillObject,
   backgroundColor: theme.kitt.colors.overlay.dark
@@ -1310,13 +1243,14 @@ function Overlay({
   }, /*#__PURE__*/React__default.createElement(reactNative.View, null));
 }
 
-const BodyView = styled__default.View`
-  padding: ${({
+const BodyView = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Body__BodyView",
+  componentId: "kitt-universal__sc-17fwpo4-0"
+})(["padding:", "px ", "px;"], ({
   theme
-}) => theme.kitt.spacing * 6}px ${({
+}) => theme.kitt.spacing * 6, ({
   theme
-}) => theme.kitt.spacing * 4}px;
-`;
+}) => theme.kitt.spacing * 4);
 const ModalBody = /*#__PURE__*/React.forwardRef(({
   children
 }, ref) => {
@@ -1325,16 +1259,14 @@ const ModalBody = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React__default.createElement(BodyView, null, children));
 });
 
-const FooterView = styled__default.View`
-  flex: 0 0 auto;
-  padding: ${({
+const FooterView = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Footer__FooterView",
+  componentId: "kitt-universal__sc-1ujq2dc-0"
+})(["flex:0 0 auto;padding:", "px;border-top-width:1px;border-top-color:", ";"], ({
   theme
-}) => theme.kitt.spacing * 4}px;
-  border-top-width: 1px;
-  border-top-color: ${({
+}) => theme.kitt.spacing * 4, ({
   theme
-}) => theme.kitt.colors.separator};
-`;
+}) => theme.kitt.colors.separator);
 function ModalFooter({
   children
 }) {
@@ -1343,41 +1275,33 @@ function ModalFooter({
 
 const OnCloseContext = /*#__PURE__*/React.createContext(() => {});
 
-const HeaderView = styled__default.View`
-  position: relative;
-  padding: ${({
+const HeaderView = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Header__HeaderView",
+  componentId: "kitt-universal__sc-1iwabch-0"
+})(["position:relative;padding:", "px;display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;align-items:center;border-bottom-width:1px;border-bottom-color:", ";min-height:57px;"], ({
   theme
-}) => theme.kitt.spacing * 2}px;
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom-width: 1px;
-  border-bottom-color: ${({
+}) => theme.kitt.spacing * 2, ({
   theme
-}) => theme.kitt.colors.separator};
-  min-height: 57px;
-`;
-const LeftIconView = styled__default.View`
-  align-self: flex-start;
-  margin-right: ${({
+}) => theme.kitt.colors.separator);
+const LeftIconView = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Header__LeftIconView",
+  componentId: "kitt-universal__sc-1iwabch-1"
+})(["align-self:flex-start;margin-right:", "px;"], ({
   theme
-}) => theme.kitt.spacing * 2}px;
-`;
-const RightIconView = styled__default.View`
-  align-self: flex-start;
-  margin-left: ${({
+}) => theme.kitt.spacing * 2);
+const RightIconView = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Header__RightIconView",
+  componentId: "kitt-universal__sc-1iwabch-2"
+})(["align-self:flex-start;margin-left:", "px;"], ({
   theme
-}) => theme.kitt.spacing * 2}px;
-`;
-const TitleView = styled__default.View`
-  padding-left: ${({
+}) => theme.kitt.spacing * 2);
+const TitleView = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Header__TitleView",
+  componentId: "kitt-universal__sc-1iwabch-3"
+})(["padding-left:", "px;flex-shrink:1;"], ({
   theme,
   isIconLeft
-}) => isIconLeft ? 0 : theme.kitt.spacing * 2}px;
-  flex-shrink: 1;
-`;
+}) => isIconLeft ? 0 : theme.kitt.spacing * 2);
 function ModalHeader({
   left,
   right,
@@ -1394,36 +1318,22 @@ function ModalHeader({
   })));
 }
 
-const ModalView = styled__default.View`
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: ${({
+const ModalView = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Modal__ModalView",
+  componentId: "kitt-universal__sc-1xy2w5u-0"
+})(["top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:", "px ", "px;"], ({
   theme
-}) => theme.kitt.spacing * 20}px ${({
+}) => theme.kitt.spacing * 20, ({
   theme
-}) => theme.kitt.spacing * 4}px;
-`;
-const ContentView = styled__default.View`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-  max-width: 540px;
-  height: auto;
-  width: 100%;
-  border-radius: ${({
+}) => theme.kitt.spacing * 4);
+const ContentView = /*#__PURE__*/styled__default.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:", ";"], ({
   theme
-}) => theme.kitt.card.borderRadius};
-  background-color: ${({
+}) => theme.kitt.card.borderRadius, ({
   theme
-}) => theme.kitt.palettes.lateOcean.white};
-`;
+}) => theme.kitt.palettes.lateOcean.white);
 function Modal({
   visible,
   children,
@@ -1468,12 +1378,14 @@ function Notification({
   }, children);
 }
 
-const StoryTitleContainer = styled__default.View`
-  margin-bottom: 30px;
-`;
-const StorySubTitleContainer = styled__default.View`
-  margin-bottom: 10px;
-`;
+const StoryTitleContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StoryTitle__StoryTitleContainer",
+  componentId: "kitt-universal__sc-sic7hb-0"
+})(["margin-bottom:30px;"]);
+const StorySubTitleContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StoryTitle__StorySubTitleContainer",
+  componentId: "kitt-universal__sc-sic7hb-1"
+})(["margin-bottom:10px;"]);
 function StoryTitle({
   color,
   children,
@@ -1537,9 +1449,10 @@ StoryTitle.Level2 = StoryTitleLevel2;
 StoryTitle.Level3 = StoryTitleLevel3;
 StoryTitle.Level4 = StoryTitleLevel4;
 
-const StyledSection = styled__default.View`
-  margin-bottom: 30px;
-`;
+const StyledSection = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Section__StyledSection",
+  componentId: "kitt-universal__sc-x4z1s-0"
+})(["margin-bottom:30px;"]);
 function Section({
   title,
   className,
@@ -1548,9 +1461,10 @@ function Section({
 }) {
   return /*#__PURE__*/React__default.createElement(StyledSection, props, /*#__PURE__*/React__default.createElement(StoryTitle.Level2, null, title), children);
 }
-const StyledSubSection = styled__default.View`
-  margin-bottom: 20px;
-`;
+const StyledSubSection = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Section__StyledSubSection",
+  componentId: "kitt-universal__sc-x4z1s-1"
+})(["margin-bottom:20px;"]);
 
 function SubSection({
   title,
@@ -1561,9 +1475,10 @@ function SubSection({
   return /*#__PURE__*/React__default.createElement(StyledSubSection, props, /*#__PURE__*/React__default.createElement(StoryTitle.Level3, null, title), children);
 }
 
-const StyledDemoSection = styled__default.View`
-  margin-bottom: 90px;
-`;
+const StyledDemoSection = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Section__StyledDemoSection",
+  componentId: "kitt-universal__sc-x4z1s-2"
+})(["margin-bottom:90px;"]);
 
 function DemoSection({
   children
@@ -1576,9 +1491,10 @@ function DemoSection({
 Section.SubSection = SubSection;
 Section.DemoSection = DemoSection;
 
-const StoryContainer = styled__default.ScrollView`
-  padding: 10px;
-`;
+const StoryContainer = /*#__PURE__*/styled__default.ScrollView.withConfig({
+  displayName: "Story__StoryContainer",
+  componentId: "kitt-universal__sc-1kwdg2p-0"
+})(["padding:10px;"]);
 function Story({
   title,
   contentContainerStyle,
@@ -1595,22 +1511,22 @@ function StoryDecorator(storyFn, context) {
   }, storyFn());
 }
 
-const SmallScreenRow = styled__default.View`
-  flex-direction: column;
-  margin: 0;
-`;
-const SmallScreenCol = styled__default.View`
-  padding: 10px 0 20px;
-`;
-const FlexRow = styled__default.View`
-  flex-direction: row;
-  margin: 0 -5px 20px;
-`;
-const FlexCol = styled__default.View`
-  flex-grow: 1;
-  flex-basis: 0;
-  margin: 0 5px 10px;
-`;
+const SmallScreenRow = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StoryGrid__SmallScreenRow",
+  componentId: "kitt-universal__sc-4z5new-0"
+})(["flex-direction:column;margin:0;"]);
+const SmallScreenCol = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StoryGrid__SmallScreenCol",
+  componentId: "kitt-universal__sc-4z5new-1"
+})(["padding:10px 0 20px;"]);
+const FlexRow = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StoryGrid__FlexRow",
+  componentId: "kitt-universal__sc-4z5new-2"
+})(["flex-direction:row;margin:0 -5px 20px;"]);
+const FlexCol = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "StoryGrid__FlexCol",
+  componentId: "kitt-universal__sc-4z5new-3"
+})(["flex-grow:1;flex-basis:0;margin:0 5px 10px;"]);
 
 function StoryGridRow({
   children,
@@ -1646,19 +1562,17 @@ const StoryGrid = {
   Col: StoryGridCol
 };
 
-const Container = styled__default.View`
-  background-color: ${({
+const Container = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "Tag__Container",
+  componentId: "kitt-universal__sc-19jmowi-0"
+})(["background-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], ({
   theme,
   type
-}) => theme.kitt.tag[type].backgroundColor};
-  padding: ${({
+}) => theme.kitt.tag[type].backgroundColor, ({
   theme
-}) => theme.kitt.tag.padding};
-  border-radius: ${({
+}) => theme.kitt.tag.padding, ({
   theme
-}) => theme.kitt.tag.borderRadius};
-  align-self: flex-start;
-`;
+}) => theme.kitt.tag.borderRadius);
 function Tag({
   label,
   type = 'default'
@@ -1991,21 +1905,20 @@ function Tooltip({
   return /*#__PURE__*/React__default.createElement(reactNative.View, null, children);
 }
 
-const StyledLink = styled__default(Typography).withConfig({
+const StyledLink = /*#__PURE__*/styled__default(Typography).withConfig({
   shouldForwardProp: prop => !['disabled', 'noUnderline'].includes(prop)
-})`
-  text-decoration: ${({
+}).withConfig({
+  displayName: "TypographyLink__StyledLink",
+  componentId: "kitt-universal__sc-1o1zy30-0"
+})(["text-decoration:", ";", ";margin:0;"], ({
   noUnderline
-}) => noUnderline ? 'none' : 'underline'};
-  ${({
+}) => noUnderline ? 'none' : 'underline', ({
   disabled
 }) => reactNative.Platform.OS === 'web' ? `
   text-decoration-color: inherit;
   transition: color 0.2s ease-in-out;
   cursor: ${disabled ? 'not-allowed' : 'pointer'};
-  ` : null};
-  margin: 0;
-`;
+  ` : null);
 function TypographyLink({
   disabled,
   noUnderline,