@ornikar/kitt-universal 4.6.1 → 5.0.2

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

@@ -9,8 +9,6 @@ const react = require('react');
 const react$1 = require('@linaria/react');
 const jsxRuntime = require('react/jsx-runtime');
 const twemojiParser = require('twemoji-parser');
-const reactIntl = require('react-intl');
-const DateTimePicker = require('@react-native-community/datetimepicker');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
 const reactDom = require('@floating-ui/react-dom');
 const addons = require('@storybook/addons');
@@ -18,7 +16,6 @@ const addons = require('@storybook/addons');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 const styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-const DateTimePicker__default = /*#__PURE__*/_interopDefaultLegacy(DateTimePicker);
 
 // type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
 // type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
@@ -1444,7 +1441,7 @@ function useKittTheme() {
 const CheckboxAndLabelPressableWrapper = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
   displayName: "Checkbox__CheckboxAndLabelPressableWrapper",
   componentId: "kitt-universal__sc-1sav1n6-0"
-})(["display:flex;flex-direction:row;align-items:center;"]);
+})(["display:flex;flex-direction:row;"]);
 const CheckboxContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "kitt-universal__sc-1sav1n6-1"
@@ -1584,405 +1581,13 @@ function DatePickerInputPart({
   });
 }
 
-// Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
-const OverlayPressable = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
-  displayName: "Overlay__OverlayPressable",
-  componentId: "kitt-universal__sc-1cz1gbr-0"
-})(({
-  theme
-}) => ({ ...BabelPluginStyledComponentsReactNative.StyleSheet.absoluteFillObject,
-  backgroundColor: theme.kitt.colors.overlay.dark
-}));
-function Overlay({
-  onPress
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(OverlayPressable, {
-    accessibilityRole: "none",
-    onPress: onPress,
-    children: /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.View, {})
-  });
-}
-
-const BodyView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Body__BodyView",
-  componentId: "kitt-universal__sc-17fwpo4-0"
-})(["padding:", "px ", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 6, ({
-  theme
-}) => theme.kitt.spacing * 4);
-function ModalBody({
-  children
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.ScrollView, {
-    children: /*#__PURE__*/jsxRuntime.jsx(BodyView, {
-      children: children
-    })
-  });
-}
-
-const FooterView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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, ({
-  theme
-}) => theme.kitt.colors.separator);
-function ModalFooter({
-  children
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(FooterView, {
-    children: children
-  });
-}
-
-function StyleWebWrapper({
-  as,
-  children,
-  ...props
-}) {
-  // as or default to div. If as is undefined, T is div but typescript is not sure
-  return /*#__PURE__*/jsxRuntime.jsx(as || 'div', { ...props,
-    children: children
-  });
-}
-
-const PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/react$1.styled("div")({
-  name: "PressableIconButtonWebWrapper",
-  class: "kitt-u_PressableIconButtonWebWrapper_p1nlccvg",
-  vars: {
-    "p1nlccvg-0": [({
-      theme,
-      $isDisabled
-    }) => $isDisabled ? 1 : theme.kitt.iconButton.scale.base.hover],
-    "p1nlccvg-2": [({
-      theme,
-      $isDisabled
-    }) => $isDisabled ? 1 : theme.kitt.iconButton.scale.medium.hover],
-    "p1nlccvg-3": [({
-      theme,
-      $isDisabled
-    }) => $isDisabled ? 1 : theme.kitt.iconButton.scale.base.active],
-    "p1nlccvg-4": [({
-      theme,
-      $isWhite,
-      $isDisabled
-    }) => {
-      if ($isDisabled) return theme.kitt.iconButton.disabled.backgroundColor;
-      const {
-        white,
-        default: defaultIconButton
-      } = theme.kitt.iconButton;
-      if ($isWhite) return white.pressedBackgroundColor;
-      return defaultIconButton.pressedBackgroundColor;
-    }]
-  }
-}));
-const StyledPressableIconButton = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
-  displayName: "PressableIconButton__StyledPressableIconButton",
-  componentId: "kitt-universal__sc-1m6jo3s-0"
-})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], ({
-  theme
-}) => theme.kitt.iconButton.borderRadius, ({
-  theme
-}) => theme.kitt.iconButton.width, ({
-  theme
-}) => theme.kitt.iconButton.height, ({
-  theme,
-  disabled
-}) => {
-  const {
-    iconButton
-  } = theme.kitt;
-  const {
-    transition
-  } = iconButton;
-
-  if (disabled) {
-    return `
-        background-color: ${iconButton.disabled.backgroundColor};
-      `;
-  }
-
-  return `
-      transition: ${transition.property} ${transition.duration} ${transition.timingFunction};
-    `;
-});
-function PressableIconButton({
-  color,
-  disabled,
-  ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(StyleWebWrapper, {
-    as: PressableIconButtonWebWrapper,
-    $isWhite: color === 'white',
-    $isDisabled: Boolean(disabled),
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledPressableIconButton, { ...props,
-      disabled: disabled
-    })
-  });
-}
-
-function PressableAnimatedContainer({
-  children,
-  color,
-  disabled,
-  onPress
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(PressableIconButton, {
-    accessibilityRole: "button",
-    color: color,
-    disabled: disabled,
-    onPress: onPress,
-    children: children
-  });
-}
-
-const IconButtonContentBorder = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "IconButton__IconButtonContentBorder",
-  componentId: "kitt-universal__sc-swelbf-0"
-})(["border:", ";border-color:", ";width:", "px;height:", "px;align-items:center;justify-content:center;border-radius:", "px;"], ({
-  theme
-}) => `${theme.kitt.iconButton.borderWidth}px solid`, ({
-  theme,
-  disabled
-}) => disabled ? theme.kitt.iconButton.disabled.borderColor : theme.kitt.iconButton.borderColor, ({
-  theme
-}) => theme.kitt.iconButton.width - theme.kitt.iconButton.borderWidth, ({
-  theme
-}) => theme.kitt.iconButton.height - theme.kitt.iconButton.borderWidth, ({
-  theme
-}) => theme.kitt.iconButton.borderRadius);
-
-function IconButtonContent({
-  disabled,
-  color,
-  icon
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(IconButtonContentBorder, {
-    disabled: disabled,
-    children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
-      color: disabled ? 'black-light' : color,
-      icon: icon
-    })
-  });
-}
-
-function IconButton({
-  icon,
-  color,
-  disabled,
-  testID,
-  accessibilityLabel,
-  accessibilityRole,
-  onPress
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(PressableAnimatedContainer, {
-    color: color,
-    disabled: disabled,
-    testID: testID,
-    accessibilityLabel: accessibilityLabel,
-    accessibilityRole: accessibilityRole,
-    onPress: onPress,
-    children: /*#__PURE__*/jsxRuntime.jsx(IconButtonContent, {
-      disabled: disabled,
-      color: color,
-      icon: icon
-    })
-  });
-}
-
-const OnCloseContext = /*#__PURE__*/react.createContext(() => {});
-
-const HeaderView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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, ({
-  theme
-}) => theme.kitt.colors.separator);
-const LeftIconView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Header__LeftIconView",
-  componentId: "kitt-universal__sc-1iwabch-1"
-})(["align-self:flex-start;margin-right:", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 2);
-const RightIconView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "Header__RightIconView",
-  componentId: "kitt-universal__sc-1iwabch-2"
-})(["align-self:flex-start;margin-left:", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 2);
-const TitleView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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);
-function ModalHeader({
-  left,
-  right,
-  children
-}) {
-  const onClose = react.useContext(OnCloseContext);
-  const isIconLeft = !!left;
-  return /*#__PURE__*/jsxRuntime.jsxs(HeaderView, {
-    children: [isIconLeft && /*#__PURE__*/jsxRuntime.jsx(LeftIconView, {
-      children: left
-    }), /*#__PURE__*/jsxRuntime.jsx(TitleView, {
-      isIconLeft: isIconLeft,
-      children: children
-    }), right !== undefined ? right : /*#__PURE__*/jsxRuntime.jsx(RightIconView, {
-      children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
-        icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.XIcon, {}),
-        onPress: onClose
-      })
-    })]
-  });
-}
-
-const ModalView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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, ({
-  theme
-}) => theme.kitt.spacing * 4);
-const ContentView$1 = /*#__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:", "px;background-color:", ";"], ({
-  theme
-}) => theme.kitt.card.borderRadius, ({
-  theme
-}) => theme.kitt.colors.uiBackgroundLight);
-function Modal({
-  visible,
-  children,
-  onClose,
-  onEntered,
-  onExited
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(OnCloseContext.Provider, {
-    value: onClose,
-    children: /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Modal, {
-      transparent: true,
-      animationType: "fade",
-      visible: visible,
-      onShow: onEntered,
-      onDismiss: onExited,
-      onRequestClose: onClose,
-      children: /*#__PURE__*/jsxRuntime.jsxs(ModalView, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(Overlay, {
-          onPress: onClose
-        }), /*#__PURE__*/jsxRuntime.jsx(ContentView$1, {
-          children: children
-        })]
-      })
-    })
-  });
-}
-Modal.Header = ModalHeader;
-Modal.Body = ModalBody;
-Modal.Footer = ModalFooter;
-
-function getDatePickerDisplayMode() {
-  return 'default';
-}
-
-function PlatformDateTimePicker({
-  value,
-  defaultDate = new Date(),
-  maximumDate,
-  minimuDate,
-  testID,
-  onChange
-}) {
-  const displayMode = getDatePickerDisplayMode();
-  const iosProps = {};
-  return /*#__PURE__*/jsxRuntime.jsx(DateTimePicker__default, {
-    is24Hour: true,
-    testID: testID,
-    value: value || defaultDate,
-    mode: "date",
-    maximumDate: maximumDate,
-    minimumDate: minimuDate,
-    display: displayMode,
-    ...iosProps,
-    onChange: (_event, date) => onChange(date)
-  });
-}
-
-function ModalTitle({
-  children
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(Modal.Header, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-      base: "body",
-      variant: "bold",
-      children: children
-    })
-  });
-}
-
-function ModalPlatformDateTimePicker({
-  title,
-  isVisible,
-  value,
-  validateButtonLabel,
-  onClose,
-  onChange,
-  ...props
-}) {
-  const [currentValue, setCurrentValue] = react.useState(value); // Prevent unsynced value between the modal and its parent state
-
-  return /*#__PURE__*/jsxRuntime.jsx(Modal, {
-    visible: Boolean(isVisible),
-    onClose: () => {
-      setCurrentValue(value);
-      onClose();
-    },
-    children: isVisible ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [title ? /*#__PURE__*/jsxRuntime.jsx(ModalTitle, {
-        children: title
-      }) : null, /*#__PURE__*/jsxRuntime.jsx(Modal.Body, {
-        children: /*#__PURE__*/jsxRuntime.jsx(PlatformDateTimePicker, { ...props,
-          value: currentValue,
-          onChange: newDate => {
-            setCurrentValue(prev => {
-              return newDate || prev;
-            });
-          }
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(Modal.Footer, {
-        children: /*#__PURE__*/jsxRuntime.jsx(Button, {
-          stretch: true,
-          type: "primary",
-          onPress: () => {
-            onChange(currentValue);
-          },
-          children: validateButtonLabel ? /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Text, {
-            children: validateButtonLabel
-          }) : /*#__PURE__*/jsxRuntime.jsx(reactIntl.FormattedMessage, {
-            id: "kitt-universal.ModalDateTimePicker.confirm"
-          })
-        })
-      })]
-    }) : null
-  });
-}
-
 function prefixWithZero(value) {
   return `${value}`.padStart(2, '0');
 }
 
 const PartContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "DatePicker__PartContainer",
-  componentId: "kitt-universal__sc-ebllsn-0"
+  displayName: "DatePickerInputs__PartContainer",
+  componentId: "kitt-universal__sc-j9hin5-0"
 })(["margin-right:", ";", ";"], ({
   theme,
   $isLast
@@ -1990,8 +1595,8 @@ const PartContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsRe
   $isStretch
 }) => $isStretch ? styled.css(["flex:0.33;flex-grow:1;"]) : undefined);
 const DatePickerPressable = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
-  displayName: "DatePicker__DatePickerPressable",
-  componentId: "kitt-universal__sc-ebllsn-1"
+  displayName: "DatePickerInputs__DatePickerPressable",
+  componentId: "kitt-universal__sc-j9hin5-1"
 })(["display:flex;flex-direction:row;", ";"], ({
   $isStretch
 }) => {
@@ -2001,100 +1606,73 @@ const DatePickerPressable = /*#__PURE__*/styled__default(BabelPluginStyledCompon
 
   return styled.css(["align-self:baseline;"]);
 });
-function DatePicker({
-  value,
-  id,
-  disabled,
-  placeholder,
+function DatePickerInputs({
   state,
   internalForceState,
-  testID,
+  isFocused,
+  disabled,
   stretch,
-  pickerDefaultDate,
-  pickerUITestID,
-  pickerUITitle,
-  pickerUIValidateButtonLabel,
-  onChange,
-  onFocus,
-  onBlur
+  id,
+  testID,
+  handleModalOpen,
+  currentValue,
+  placeholder
 }) {
-  const [isPickerUIVisible, setIsPickerUIVisible] = react.useState(false);
-  const [isFocused, setIsFocused] = react.useState(false);
-  const [currentValue, setCurrentValue] = react.useState(value);
-
-  const handleModalClose = () => {
-    if (onBlur) onBlur();
-    setIsPickerUIVisible(false);
-    setIsFocused(false);
-  };
-
-  const handleChange = newDate => {
-    setCurrentValue(newDate);
-    onChange(newDate);
-    handleModalClose();
-  };
-
   const currentState = internalForceState || getInputUIState({
     isFocused,
     isDisabled: Boolean(disabled),
     formState: state
   });
-  const sharedPickerProps = {
-    testID: pickerUITestID,
-    value: currentValue,
-    onChange: handleChange
-  };
   const sharedPartProps = {
     disabled,
-    $state: currentState,
-    defaultDate: pickerDefaultDate
+    $state: currentState
   };
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsxs(DatePickerPressable, {
+  return /*#__PURE__*/jsxRuntime.jsxs(DatePickerPressable, {
+    $isStretch: stretch,
+    nativeID: id,
+    disabled: disabled,
+    testID: testID,
+    onPress: handleModalOpen,
+    children: [/*#__PURE__*/jsxRuntime.jsx(PartContainer, {
       $isStretch: stretch,
-      nativeID: id,
-      disabled: disabled,
-      testID: testID,
-      onPress: () => {
-        if (onFocus) onFocus();
-        setIsPickerUIVisible(true);
-        setIsFocused(true);
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsx(PartContainer, {
-        $isStretch: stretch,
-        children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
-          partName: "day",
-          value: currentValue ? prefixWithZero(currentValue.getDate()) : undefined,
-          placeholder: placeholder?.day
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
-        $isStretch: stretch,
-        children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
-          partName: "month",
-          value: currentValue ? prefixWithZero(currentValue.getMonth() + 1) : undefined,
-          placeholder: placeholder?.month
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
-        $isLast: true,
-        $isStretch: stretch,
-        children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
-          partName: "year",
-          value: currentValue ? currentValue.getFullYear() : undefined,
-          placeholder: placeholder?.year
-        })
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [null, /*#__PURE__*/jsxRuntime.jsx(ModalPlatformDateTimePicker, { ...sharedPickerProps,
-        isVisible: isPickerUIVisible,
-        title: pickerUITitle,
-        validateButtonLabel: pickerUIValidateButtonLabel,
-        onClose: handleModalClose,
-        onChange: handleChange
-      })]
+      children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
+        partName: "day",
+        value: currentValue ? prefixWithZero(currentValue.getDate()) : undefined,
+        placeholder: placeholder?.day
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+      $isStretch: stretch,
+      children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
+        partName: "month",
+        value: currentValue ? prefixWithZero(currentValue.getMonth() + 1) : undefined,
+        placeholder: placeholder?.month
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+      $isLast: true,
+      $isStretch: stretch,
+      children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, { ...sharedPartProps,
+        partName: "year",
+        value: currentValue ? currentValue.getFullYear() : undefined,
+        placeholder: placeholder?.year
+      })
     })]
   });
 }
 
+// This is not yet implemented
+// We still display the inputs for chromatic
+function DatePicker({
+  value,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(DatePickerInputs, {
+    handleModalOpen: () => {},
+    currentValue: value,
+    isFocused: false,
+    ...props
+  });
+}
+
 const InputTextContainer = withTheme( /*#__PURE__*/react$1.styled("div")({
   name: "InputTextContainer",
   class: "kitt-u_InputTextContainer_i1encr9g",
@@ -2597,63 +2175,219 @@ const HeaderContent = /*#__PURE__*/styled__default(BabelPluginStyledComponentsRe
 });
 function FullScreenModalHeader({
   children,
-  right,
-  left
+  right,
+  left
+}) {
+  const {
+    top
+  } = reactNativeSafeAreaContext.useSafeAreaInsets();
+  const dimensions = BabelPluginStyledComponentsReactNative.useWindowDimensions();
+  const [leftWidth, setLeftWidth] = react.useState(0);
+  const [rightWidth, setRightWidth] = react.useState(0);
+
+  const handleLayoutChange = (event, side) => {
+    // Prevents react to nullify event on rerenders
+    event.persist();
+
+    if (side === 'left') {
+      setLeftWidth(event.nativeEvent.layout.width);
+      return;
+    }
+
+    setRightWidth(event.nativeEvent.layout.width);
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsxs(Header, {
+    insetTop: top,
+    children: [left ? /*#__PURE__*/jsxRuntime.jsx(SideContainer, {
+      onLayout: e => handleLayoutChange(e, 'left'),
+      children: left
+    }) : null, /*#__PURE__*/jsxRuntime.jsx(HeaderContent, {
+      windowWidth: dimensions.width,
+      leftWidth: leftWidth,
+      rightWidth: rightWidth,
+      children: children
+    }), right ? /*#__PURE__*/jsxRuntime.jsx(SideContainer, {
+      side: "right",
+      onLayout: e => handleLayoutChange(e, 'right'),
+      children: right
+    }) : null]
+  });
+}
+
+const Container$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "FullScreenModal__Container",
+  componentId: "kitt-universal__sc-11qpbe3-0"
+})(["flex:1;background-color:", ";"], ({
+  theme
+}) => theme.kitt.colors.uiBackground);
+function FullScreenModal({
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Container$1, {
+    children: children
+  });
+}
+FullScreenModal.Header = FullScreenModalHeader;
+FullScreenModal.Body = FullScreenModalBody;
+
+function StyleWebWrapper({
+  as,
+  children,
+  ...props
+}) {
+  // as or default to div. If as is undefined, T is div but typescript is not sure
+  return /*#__PURE__*/jsxRuntime.jsx(as || 'div', { ...props,
+    children: children
+  });
+}
+
+const PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/react$1.styled("div")({
+  name: "PressableIconButtonWebWrapper",
+  class: "kitt-u_PressableIconButtonWebWrapper_p1nlccvg",
+  vars: {
+    "p1nlccvg-0": [({
+      theme,
+      $isDisabled
+    }) => $isDisabled ? 1 : theme.kitt.iconButton.scale.base.hover],
+    "p1nlccvg-2": [({
+      theme,
+      $isDisabled
+    }) => $isDisabled ? 1 : theme.kitt.iconButton.scale.medium.hover],
+    "p1nlccvg-3": [({
+      theme,
+      $isDisabled
+    }) => $isDisabled ? 1 : theme.kitt.iconButton.scale.base.active],
+    "p1nlccvg-4": [({
+      theme,
+      $isWhite,
+      $isDisabled
+    }) => {
+      if ($isDisabled) return theme.kitt.iconButton.disabled.backgroundColor;
+      const {
+        white,
+        default: defaultIconButton
+      } = theme.kitt.iconButton;
+      if ($isWhite) return white.pressedBackgroundColor;
+      return defaultIconButton.pressedBackgroundColor;
+    }]
+  }
+}));
+const StyledPressableIconButton = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
+  displayName: "PressableIconButton__StyledPressableIconButton",
+  componentId: "kitt-universal__sc-1m6jo3s-0"
+})(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], ({
+  theme
+}) => theme.kitt.iconButton.borderRadius, ({
+  theme
+}) => theme.kitt.iconButton.width, ({
+  theme
+}) => theme.kitt.iconButton.height, ({
+  theme,
+  disabled
+}) => {
+  const {
+    iconButton
+  } = theme.kitt;
+  const {
+    transition
+  } = iconButton;
+
+  if (disabled) {
+    return `
+        background-color: ${iconButton.disabled.backgroundColor};
+      `;
+  }
+
+  return `
+      transition: ${transition.property} ${transition.duration} ${transition.timingFunction};
+    `;
+});
+function PressableIconButton({
+  color,
+  disabled,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyleWebWrapper, {
+    as: PressableIconButtonWebWrapper,
+    $isWhite: color === 'white',
+    $isDisabled: Boolean(disabled),
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledPressableIconButton, { ...props,
+      disabled: disabled
+    })
+  });
+}
+
+function PressableAnimatedContainer({
+  children,
+  color,
+  disabled,
+  onPress
 }) {
-  const {
-    top
-  } = reactNativeSafeAreaContext.useSafeAreaInsets();
-  const dimensions = BabelPluginStyledComponentsReactNative.useWindowDimensions();
-  const [leftWidth, setLeftWidth] = react.useState(0);
-  const [rightWidth, setRightWidth] = react.useState(0);
-
-  const handleLayoutChange = (event, side) => {
-    // Prevents react to nullify event on rerenders
-    event.persist();
-
-    if (side === 'left') {
-      setLeftWidth(event.nativeEvent.layout.width);
-      return;
-    }
+  return /*#__PURE__*/jsxRuntime.jsx(PressableIconButton, {
+    accessibilityRole: "button",
+    color: color,
+    disabled: disabled,
+    onPress: onPress,
+    children: children
+  });
+}
 
-    setRightWidth(event.nativeEvent.layout.width);
-  };
+const IconButtonContentBorder = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "IconButton__IconButtonContentBorder",
+  componentId: "kitt-universal__sc-swelbf-0"
+})(["border:", ";border-color:", ";width:", "px;height:", "px;align-items:center;justify-content:center;border-radius:", "px;"], ({
+  theme
+}) => `${theme.kitt.iconButton.borderWidth}px solid`, ({
+  theme,
+  disabled
+}) => disabled ? theme.kitt.iconButton.disabled.borderColor : theme.kitt.iconButton.borderColor, ({
+  theme
+}) => theme.kitt.iconButton.width - theme.kitt.iconButton.borderWidth, ({
+  theme
+}) => theme.kitt.iconButton.height - theme.kitt.iconButton.borderWidth, ({
+  theme
+}) => theme.kitt.iconButton.borderRadius);
 
-  return /*#__PURE__*/jsxRuntime.jsxs(Header, {
-    insetTop: top,
-    children: [left ? /*#__PURE__*/jsxRuntime.jsx(SideContainer, {
-      onLayout: e => handleLayoutChange(e, 'left'),
-      children: left
-    }) : null, /*#__PURE__*/jsxRuntime.jsx(HeaderContent, {
-      windowWidth: dimensions.width,
-      leftWidth: leftWidth,
-      rightWidth: rightWidth,
-      children: children
-    }), right ? /*#__PURE__*/jsxRuntime.jsx(SideContainer, {
-      side: "right",
-      onLayout: e => handleLayoutChange(e, 'right'),
-      children: right
-    }) : null]
+function IconButtonContent({
+  disabled,
+  color,
+  icon
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(IconButtonContentBorder, {
+    disabled: disabled,
+    children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+      color: disabled ? 'black-light' : color,
+      icon: icon
+    })
   });
 }
 
-const Container$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "FullScreenModal__Container",
-  componentId: "kitt-universal__sc-11qpbe3-0"
-})(["flex:1;background-color:", ";"], ({
-  theme
-}) => theme.kitt.colors.uiBackground);
-function FullScreenModal({
-  children
+function IconButton({
+  icon,
+  color,
+  disabled,
+  testID,
+  accessibilityLabel,
+  accessibilityRole,
+  onPress
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Container$1, {
-    children: children
+  return /*#__PURE__*/jsxRuntime.jsx(PressableAnimatedContainer, {
+    color: color,
+    disabled: disabled,
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: accessibilityRole,
+    onPress: onPress,
+    children: /*#__PURE__*/jsxRuntime.jsx(IconButtonContent, {
+      disabled: disabled,
+      color: color,
+      icon: icon
+    })
   });
 }
-FullScreenModal.Header = FullScreenModalHeader;
-FullScreenModal.Body = FullScreenModalBody;
 
-const ContentView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+const ContentView$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "ListItemContent__ContentView",
   componentId: "kitt-universal__sc-57q0u9-0"
 })(["flex:1 0 0%;align-self:center;"]);
@@ -2661,7 +2395,7 @@ function ListItemContent({
   children,
   ...rest
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(ContentView, { ...rest,
+  return /*#__PURE__*/jsxRuntime.jsx(ContentView$1, { ...rest,
     children: children
   });
 }
@@ -2984,6 +2718,156 @@ function Message({
   });
 }
 
+// Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
+const OverlayPressable = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
+  displayName: "Overlay__OverlayPressable",
+  componentId: "kitt-universal__sc-1cz1gbr-0"
+})(({
+  theme
+}) => ({ ...BabelPluginStyledComponentsReactNative.StyleSheet.absoluteFillObject,
+  backgroundColor: theme.kitt.colors.overlay.dark
+}));
+function Overlay({
+  onPress
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(OverlayPressable, {
+    accessibilityRole: "none",
+    onPress: onPress,
+    children: /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.View, {})
+  });
+}
+
+const BodyView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Body__BodyView",
+  componentId: "kitt-universal__sc-17fwpo4-0"
+})(["padding:", "px ", "px;"], ({
+  theme
+}) => theme.kitt.spacing * 6, ({
+  theme
+}) => theme.kitt.spacing * 4);
+function ModalBody({
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.ScrollView, {
+    children: /*#__PURE__*/jsxRuntime.jsx(BodyView, {
+      children: children
+    })
+  });
+}
+
+const FooterView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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, ({
+  theme
+}) => theme.kitt.colors.separator);
+function ModalFooter({
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(FooterView, {
+    children: children
+  });
+}
+
+const OnCloseContext = /*#__PURE__*/react.createContext(() => {});
+
+const HeaderView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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, ({
+  theme
+}) => theme.kitt.colors.separator);
+const LeftIconView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Header__LeftIconView",
+  componentId: "kitt-universal__sc-1iwabch-1"
+})(["align-self:flex-start;margin-right:", "px;"], ({
+  theme
+}) => theme.kitt.spacing * 2);
+const RightIconView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Header__RightIconView",
+  componentId: "kitt-universal__sc-1iwabch-2"
+})(["align-self:flex-start;margin-left:", "px;"], ({
+  theme
+}) => theme.kitt.spacing * 2);
+const TitleView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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);
+function ModalHeader({
+  left,
+  right,
+  children
+}) {
+  const onClose = react.useContext(OnCloseContext);
+  const isIconLeft = !!left;
+  return /*#__PURE__*/jsxRuntime.jsxs(HeaderView, {
+    children: [isIconLeft && /*#__PURE__*/jsxRuntime.jsx(LeftIconView, {
+      children: left
+    }), /*#__PURE__*/jsxRuntime.jsx(TitleView, {
+      isIconLeft: isIconLeft,
+      children: children
+    }), right !== undefined ? right : /*#__PURE__*/jsxRuntime.jsx(RightIconView, {
+      children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+        icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.XIcon, {}),
+        onPress: onClose
+      })
+    })]
+  });
+}
+
+const ModalView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.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, ({
+  theme
+}) => theme.kitt.spacing * 4);
+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:", "px;background-color:", ";"], ({
+  theme
+}) => theme.kitt.card.borderRadius, ({
+  theme
+}) => theme.kitt.colors.uiBackgroundLight);
+function Modal({
+  visible,
+  children,
+  onClose,
+  onEntered,
+  onExited
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(OnCloseContext.Provider, {
+    value: onClose,
+    children: /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Modal, {
+      transparent: true,
+      animationType: "fade",
+      visible: visible,
+      onShow: onEntered,
+      onDismiss: onExited,
+      onRequestClose: onClose,
+      children: /*#__PURE__*/jsxRuntime.jsxs(ModalView, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Overlay, {
+          onPress: onClose
+        }), /*#__PURE__*/jsxRuntime.jsx(ContentView, {
+          children: children
+        })]
+      })
+    })
+  });
+}
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+
 function Notification({
   type,
   children,