@ornikar/kitt-universal 6.1.0 → 7.0.2

package/dist/index-browser-all.es.js

@@ -1,8 +1,8 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { UserIcon, CheckboxMark, XIcon, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
+import { UserIcon, CheckboxMark, XIcon, EyeOffIcon, EyeIcon, ArcIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import { useWindowDimensions, Image, Platform, Linking, View, Pressable, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$1, TextInput, Animated as Animated$1, Easing, ActivityIndicator } from 'react-native';
+import { useWindowDimensions, Image, Platform, Linking, Pressable, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$1, TextInput, View, Animated as Animated$1, Easing, ActivityIndicator } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
 import { cloneElement, useContext, createContext, forwardRef, useMemo, useState, useRef, useEffect, Fragment as Fragment$1, Children } from 'react';
@@ -102,7 +102,7 @@ var KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-var _excluded$i = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
+var _excluded$h = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -178,7 +178,7 @@ function Typography(_ref4) {
       large = _ref4.large,
       variant = _ref4.variant,
       color = _ref4.color,
-      otherProps = _objectWithoutProperties(_ref4, _excluded$i);
+      otherProps = _objectWithoutProperties(_ref4, _excluded$h);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
@@ -265,7 +265,7 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$h = ["size", "base", "round", "light"];
+var _excluded$g = ["size", "round", "light", "sizeVariant"];
 
 var getInitials = function (firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
@@ -276,9 +276,10 @@ var StyledAvatarView = /*#__PURE__*/styled.View.withConfig({
 })(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], function (_ref) {
   var theme = _ref.theme,
       $isRound = _ref.$isRound,
-      $size = _ref.$size;
+      $size = _ref.$size,
+      $sizeVariant = _ref.$sizeVariant;
   if ($isRound) return "".concat($size / 2, "px");
-  return "".concat(theme.kitt.avatar.borderRadius, "px");
+  return "".concat($sizeVariant === 'large' ? theme.kitt.avatar.large.borderRadius : theme.kitt.avatar.borderRadius, "px");
 }, function (_ref2) {
   var theme = _ref2.theme,
       $isLight = _ref2.$isLight;
@@ -297,8 +298,8 @@ function AvatarContent(_ref5) {
       firstname = _ref5.firstname,
       lastname = _ref5.lastname,
       alt = _ref5.alt,
-      base = _ref5.base,
-      isLight = _ref5.isLight;
+      isLight = _ref5.isLight,
+      sizeVariant = _ref5.sizeVariant;
 
   if (src) {
     return /*#__PURE__*/jsx(Image, {
@@ -315,8 +316,8 @@ function AvatarContent(_ref5) {
 
   if (firstname && lastname) {
     return /*#__PURE__*/jsx(Typography.Text, {
-      base: base,
-      variant: "bold",
+      base: sizeVariant === 'large' ? 'body-large' : 'body',
+      variant: sizeVariant === 'large' ? 'bold' : 'regular',
       color: isLight ? 'black' : 'white',
       children: getInitials(firstname, lastname)
     });
@@ -332,20 +333,20 @@ function AvatarContent(_ref5) {
 function Avatar(_ref6) {
   var _ref6$size = _ref6.size,
       size = _ref6$size === void 0 ? 40 : _ref6$size,
-      _ref6$base = _ref6.base,
-      base = _ref6$base === void 0 ? 'body-small' : _ref6$base,
       round = _ref6.round,
       light = _ref6.light,
-      props = _objectWithoutProperties(_ref6, _excluded$h);
+      sizeVariant = _ref6.sizeVariant,
+      props = _objectWithoutProperties(_ref6, _excluded$g);
 
   return /*#__PURE__*/jsx(StyledAvatarView, {
     $size: size,
     $isRound: round,
     $isLight: light,
+    $sizeVariant: sizeVariant,
     children: /*#__PURE__*/jsx(AvatarContent, _objectSpread({
       size: size,
-      base: base,
-      isLight: light
+      isLight: light,
+      sizeVariant: sizeVariant
     }, props))
   });
 }
@@ -502,12 +503,12 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled.View.withConfig({
   return defaultPadding;
 });
 
-var _excluded$g = ["color"],
-    _excluded2$3 = ["color"];
+var _excluded$f = ["color"],
+    _excluded2$2 = ["color"];
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$f);
 
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
@@ -524,7 +525,7 @@ function TypographyIconInheritColor(props) {
 
 function TypographyIcon(_ref2) {
   var color = _ref2.color,
-      props = _objectWithoutProperties(_ref2, _excluded2$3);
+      props = _objectWithoutProperties(_ref2, _excluded2$2);
 
   if (color) {
     return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread({
@@ -539,7 +540,7 @@ function isSubtle(type) {
   return type.startsWith('subtle');
 }
 
-var _excluded$f = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
+var _excluded$e = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
 
 var getTextColorByType = function (type, variant) {
   switch (type) {
@@ -678,7 +679,7 @@ function ButtonContent(_ref7) {
       $isStretch = _ref7.$isStretch,
       icon = _ref7.icon,
       children = _ref7.children,
-      props = _objectWithoutProperties(_ref7, _excluded$f);
+      props = _objectWithoutProperties(_ref7, _excluded$e);
 
   var color = isDisabled ? 'black-light' : getTextColorByType(type, variant);
   return /*#__PURE__*/jsx(ButtonContentContainer, {
@@ -830,14 +831,14 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$e = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$d = ["as", "href", "openLinkBehavior", "onPress"];
 function ExternalLink(_ref) {
   var Component = _ref.as,
       href = _ref.href,
       _ref$openLinkBehavior = _ref.openLinkBehavior,
       openLinkBehavior = _ref$openLinkBehavior === void 0 ? defaultOpenLinkBehavior : _ref$openLinkBehavior,
       onPress = _ref.onPress,
-      rest = _objectWithoutProperties(_ref, _excluded$e);
+      rest = _objectWithoutProperties(_ref, _excluded$d);
 
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
     onPress: function handleOnPress(e) {
@@ -927,6 +928,9 @@ var avatar = {
   },
   light: {
     backgroundColor: lateOceanColorPalette.black100
+  },
+  large: {
+    borderRadius: 30
   }
 };
 
@@ -1318,6 +1322,10 @@ var listItem = {
   innerMargin: 8
 };
 
+var pageLoader = {
+  size: 60
+};
+
 var shadows = {
   medium: '0px 10px 20px rgba(41, 48, 51, 0.25)'
 };
@@ -1408,19 +1416,20 @@ var theme = {
     lateOcean: lateOceanColorPalette
   },
   avatar: avatar,
+  breakpoints: breakpoints,
   button: button,
   card: card,
   feedbackMessage: feedbackMessage,
   forms: forms,
-  typography: typography,
-  tag: tag,
-  shadows: shadows,
   fullScreenModal: fullScreenModal,
   iconButton: iconButton,
   listItem: listItem,
-  tooltip: tooltip,
+  pageLoader: pageLoader,
+  shadows: shadows,
   skeleton: skeleton,
-  breakpoints: breakpoints
+  tag: tag,
+  tooltip: tooltip,
+  typography: typography
 };
 
 function matchWindowSize(_ref, _ref2) {
@@ -1717,7 +1726,7 @@ function DatePickerInputs(_ref4) {
   });
 }
 
-var _excluded$d = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "setIsFocused", "currentValue", "setCurrentValue", "onChange", "isFocused"];
+var _excluded$c = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "setIsFocused", "currentValue", "setCurrentValue", "onChange", "isFocused"];
 function DatePickerAndroid(_ref) {
   var onBlur = _ref.onBlur,
       onFocus = _ref.onFocus,
@@ -1728,7 +1737,7 @@ function DatePickerAndroid(_ref) {
       setCurrentValue = _ref.setCurrentValue,
       _onChange = _ref.onChange,
       isFocused = _ref.isFocused,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+      props = _objectWithoutProperties(_ref, _excluded$c);
 
   var handleClose = function () {
     if (onBlur) onBlur();
@@ -1775,8 +1784,7 @@ function Overlay(_ref2) {
   var onPress = _ref2.onPress;
   return /*#__PURE__*/jsx(OverlayPressable, {
     accessibilityRole: "none",
-    onPress: onPress,
-    children: /*#__PURE__*/jsx(View, {})
+    onPress: onPress
   });
 }
 
@@ -1814,11 +1822,11 @@ function ModalFooter(_ref3) {
   });
 }
 
-var _excluded$c = ["as", "children"];
+var _excluded$b = ["as", "children"];
 function StyleWebWrapper(_ref) {
   var as = _ref.as,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$b);
 
   if (Platform.OS !== 'web') return children;
   // as or default to div. If as is undefined, T is div but typescript is not sure
@@ -1848,7 +1856,7 @@ function withTheme(WrappedComponent) {
   });
 }
 
-var _excluded$b = ["color", "disabled"];
+var _excluded$a = ["color", "disabled"];
 var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled$1("div")({
   name: "PressableIconButtonWebWrapper",
   "class": "kitt-u_PressableIconButtonWebWrapper_p1nlccvg",
@@ -1912,7 +1920,7 @@ var StyledPressableIconButton = /*#__PURE__*/styled.Pressable.withConfig({
 function PressableIconButton(_ref9) {
   var color = _ref9.color,
       disabled = _ref9.disabled,
-      props = _objectWithoutProperties(_ref9, _excluded$b);
+      props = _objectWithoutProperties(_ref9, _excluded$a);
 
   return /*#__PURE__*/jsx(StyleWebWrapper, {
     as: PressableIconButtonWebWrapper,
@@ -2231,7 +2239,7 @@ function PlatformDateTimePicker(_ref) {
   }));
 }
 
-var _excluded$a = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+var _excluded$9 = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
 
 function ModalTitle(_ref) {
   var children = _ref.children;
@@ -2251,7 +2259,7 @@ function ModalPlatformDateTimePicker(_ref2) {
       validateButtonLabel = _ref2.validateButtonLabel,
       onClose = _ref2.onClose,
       onChange = _ref2.onChange,
-      props = _objectWithoutProperties(_ref2, _excluded$a);
+      props = _objectWithoutProperties(_ref2, _excluded$9);
 
   var _useState = useState(value),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2295,7 +2303,7 @@ function ModalPlatformDateTimePicker(_ref2) {
   });
 }
 
-var _excluded$9 = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "onChange", "onFocus", "onBlur", "pickerDefaultDate"];
+var _excluded$8 = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "onChange", "onFocus", "onBlur", "pickerDefaultDate"];
 function DatePicker(_ref) {
   var value = _ref.value,
       pickerUITestID = _ref.pickerUITestID,
@@ -2305,7 +2313,7 @@ function DatePicker(_ref) {
       onFocus = _ref.onFocus,
       onBlur = _ref.onBlur,
       pickerDefaultDate = _ref.pickerDefaultDate,
-      props = _objectWithoutProperties(_ref, _excluded$9);
+      props = _objectWithoutProperties(_ref, _excluded$8);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2371,7 +2379,7 @@ var InputTextContainer = /*#__PURE__*/styled.View.withConfig({
   displayName: "InputTextContainer"
 })(["position:relative;"]);
 
-var _excluded$8 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
+var _excluded$7 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
 var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
   displayName: "InputText__StyledTextInput"
 })(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
@@ -2415,7 +2423,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
       keyboardType = _ref4$keyboardType === void 0 ? 'default' : _ref4$keyboardType,
       _onFocus = _ref4.onFocus,
       _onBlur = _ref4.onBlur,
-      props = _objectWithoutProperties(_ref4, _excluded$8);
+      props = _objectWithoutProperties(_ref4, _excluded$7);
 
   var theme = /*#__PURE__*/useTheme();
 
@@ -2563,11 +2571,11 @@ function InputPressable(_ref) {
   return /*#__PURE__*/jsx(Pressable, _objectSpread({}, props));
 }
 
-var _excluded$7 = ["isPasswordDefaultVisible", "right"];
+var _excluded$6 = ["isPasswordDefaultVisible", "right"];
 function InputPassword(_ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
       right = _ref.right,
-      props = _objectWithoutProperties(_ref, _excluded$7);
+      props = _objectWithoutProperties(_ref, _excluded$6);
 
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2929,10 +2937,12 @@ FullScreenModal.Body = FullScreenModalBody;
 
 function SpinningIcon(_ref) {
   var icon = _ref.icon,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? defaultIconSize : _ref$size,
-      align = _ref.align,
       color = _ref.color;
+
+  if (process.env.NODE_ENV !== 'production' && !color) {
+    throw new Error("Invalid color passed to SpinningIcon: ".concat(String(color)));
+  }
+
   var clonedIcon = /*#__PURE__*/cloneElement(icon, {
     color: color
   });
@@ -2956,36 +2966,31 @@ function SpinningIcon(_ref) {
       return undefined;
     };
   }, []);
-  return /*#__PURE__*/jsx(IconContainer$1, {
-    $align: align,
-    $size: size,
-    $color: color,
-    children: /*#__PURE__*/jsx(Animated$1.View, {
-      style: {
-        transform: [{
-          rotate: rotation
-        }]
-      },
-      children: clonedIcon
-    })
+  return /*#__PURE__*/jsx(Animated$1.View, {
+    style: {
+      transform: [{
+        rotate: rotation
+      }]
+    },
+    children: clonedIcon
   });
 }
 
-var _excluded$6 = ["children"];
+var _excluded$5 = ["children"];
 var ContentView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItemContent__ContentView"
 })(["flex:1 0 0%;align-self:center;"]);
 function ListItemContent(_ref) {
   var children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$6);
+      rest = _objectWithoutProperties(_ref, _excluded$5);
 
   return /*#__PURE__*/jsx(ContentView, _objectSpread(_objectSpread({}, rest), {}, {
     children: children
   }));
 }
 
-var _excluded$5 = ["children", "side"],
-    _excluded2$2 = ["children", "align"];
+var _excluded$4 = ["children", "side"],
+    _excluded2$1 = ["children", "align"];
 var SideContainerView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItemSideContent__SideContainerView"
 })(["flex-direction:row;margin-left:", ";margin-right:", ";"], function (_ref) {
@@ -3002,7 +3007,7 @@ function ListItemSideContainer(_ref3) {
   var children = _ref3.children,
       _ref3$side = _ref3.side,
       side = _ref3$side === void 0 ? 'left' : _ref3$side,
-      rest = _objectWithoutProperties(_ref3, _excluded$5);
+      rest = _objectWithoutProperties(_ref3, _excluded$4);
 
   return /*#__PURE__*/jsx(SideContainerView, _objectSpread(_objectSpread({
     side: side
@@ -3020,7 +3025,7 @@ function ListItemSideContent(_ref5) {
   var children = _ref5.children,
       _ref5$align = _ref5.align,
       align = _ref5$align === void 0 ? 'auto' : _ref5$align,
-      rest = _objectWithoutProperties(_ref5, _excluded2$2);
+      rest = _objectWithoutProperties(_ref5, _excluded2$1);
 
   return /*#__PURE__*/jsx(SideContentView, _objectSpread(_objectSpread({
     align: align
@@ -3029,7 +3034,7 @@ function ListItemSideContent(_ref5) {
   }));
 }
 
-var _excluded$4 = ["children", "withPadding", "borders", "left", "right", "onPress"];
+var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPress"];
 var ContainerView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItem__ContainerView"
 })(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], function (_ref) {
@@ -3068,7 +3073,7 @@ function ListItem(_ref5) {
       left = _ref5.left,
       right = _ref5.right,
       onPress = _ref5.onPress,
-      rest = _objectWithoutProperties(_ref5, _excluded$4);
+      rest = _objectWithoutProperties(_ref5, _excluded$3);
 
   var Wrapper = onPress ? Pressable : Fragment$1;
   var wrapperProps = onPress ? _objectSpread({
@@ -3097,32 +3102,11 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-function getActivityIndicatorSize(size) {
-  if (Platform.OS === 'android') return size;
-  return size < 36 ? 'small' : 'large';
-}
-
-var defaultLoaderSize = defaultIconSize;
-function Loader(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? defaultLoaderSize : _ref$size;
-  var theme = /*#__PURE__*/useTheme();
-  var colorHex = theme.kitt.typography.colors[color];
-  return /*#__PURE__*/jsx(ActivityIndicator, {
-    testID: "ActivityIndicator",
-    color: colorHex,
-    size: getActivityIndicatorSize(size)
-  });
-}
-
-function LargeLoader(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color;
-  return /*#__PURE__*/jsx(Loader, {
+function LoaderIcon(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/jsx(SpinningIcon, {
     color: color,
-    size: 60
+    icon: /*#__PURE__*/jsx(ArcIcon, {})
   });
 }
 
@@ -3301,6 +3285,22 @@ function Notification(_ref) {
   });
 }
 
+function getActivityIndicatorSize(size) {
+  if (Platform.OS === 'android') return size;
+  return size < 36 ? 'small' : 'large';
+}
+
+function PageLoader() {
+  var theme = /*#__PURE__*/useTheme();
+  var size = theme.kitt.pageLoader.size;
+  var colorHex = theme.kitt.typography.colors.primary;
+  return /*#__PURE__*/jsx(ActivityIndicator, {
+    testID: "ActivityIndicator",
+    color: colorHex,
+    size: getActivityIndicatorSize(size)
+  });
+}
+
 var Container$2 = /*#__PURE__*/styled.View.withConfig({
   displayName: "SkeletonContent__Container"
 })(["background-color:", ";border-color:", ";height:100%;width:100%;"], function (_ref) {
@@ -3595,8 +3595,8 @@ function Story(_ref) {
   });
 }
 
-var _excluded$3 = ["title", "children", "internalIsDemoSection"],
-    _excluded2$1 = ["title", "children"],
+var _excluded$2 = ["title", "children", "internalIsDemoSection"],
+    _excluded2 = ["title", "children"],
     _excluded3 = ["title", "children"];
 var StyledSection = /*#__PURE__*/styled.View.withConfig({
   displayName: "StorySection__StyledSection"
@@ -3605,7 +3605,7 @@ function StorySection(_ref) {
   var title = _ref.title,
       children = _ref.children,
       internalIsDemoSection = _ref.internalIsDemoSection,
-      props = _objectWithoutProperties(_ref, _excluded$3);
+      props = _objectWithoutProperties(_ref, _excluded$2);
 
   if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
   return /*#__PURE__*/jsxs(StyledSection, _objectSpread(_objectSpread({}, props), {}, {
@@ -3621,7 +3621,7 @@ var StyledSubSection = /*#__PURE__*/styled.View.withConfig({
 function SubSection(_ref2) {
   var title = _ref2.title,
       children = _ref2.children,
-      props = _objectWithoutProperties(_ref2, _excluded2$1);
+      props = _objectWithoutProperties(_ref2, _excluded2);
 
   return /*#__PURE__*/jsxs(StyledSubSection, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(StoryTitle.Level3, {
@@ -3897,6 +3897,12 @@ function ModalDateTimePicker(_ref2) {
 }
 
 var timePickerPlaceholder = '--:--';
+var formatNumberToTimeString = function (time) {
+  return "".concat(String(time).padStart(2, '0'));
+};
+var formatDateToTimeString = function (date) {
+  return "".concat(formatNumberToTimeString(date.getHours()), ":").concat(formatNumberToTimeString(date.getMinutes()));
+};
 var useTimePicker = function (value, onChange, onBlur, disabled, defaultValue) {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -3909,10 +3915,7 @@ var useTimePicker = function (value, onChange, onBlur, disabled, defaultValue) {
   }, []);
   var defaultDate = defaultValue || todayAtNoon;
   var dateTimePickerValue = value || defaultDate;
-  var displayedValue = value === null ? timePickerPlaceholder : Intl.DateTimeFormat('fr-FR', {
-    minute: 'numeric',
-    hour: 'numeric'
-  }).format(dateTimePickerValue);
+  var displayedValue = value === null ? timePickerPlaceholder : formatDateToTimeString(dateTimePickerValue);
   var timePickerState = isTimePickerModalVisible ? 'focus' : 'default';
   return {
     dateTimePickerValue: dateTimePickerValue,
@@ -4175,7 +4178,7 @@ function TypographyEmoji(_ref2) {
   });
 }
 
-var _excluded$2 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
+var _excluded$1 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
 var TypographyLinkWebWrapper = withTheme( /*#__PURE__*/styled$1("span")({
   name: "TypographyLinkWebWrapper",
   "class": "kitt-u_TypographyLinkWebWrapper_tcwz3nt",
@@ -4208,7 +4211,7 @@ function TypographyLink(_ref5) {
       href = _ref5.href,
       hrefAttrs = _ref5.hrefAttrs,
       onPress = _ref5.onPress,
-      otherProps = _objectWithoutProperties(_ref5, _excluded$2);
+      otherProps = _objectWithoutProperties(_ref5, _excluded$1);
 
   return /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({}, otherProps), {}, {
     accessibilityRole: "none",
@@ -4232,39 +4235,6 @@ function TypographyLink(_ref5) {
   }));
 }
 
-var _excluded$1 = ["color"],
-    _excluded2 = ["color"];
-
-function TypographySpinningIconSpecifiedColor(_ref) {
-  var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$1);
-
-  var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(SpinningIcon, _objectSpread(_objectSpread({}, props), {}, {
-    color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
-  }));
-}
-
-function TypographySpinningIconInheritColor(props) {
-  var color = useTypographyColor();
-  return /*#__PURE__*/jsx(TypographySpinningIconSpecifiedColor, _objectSpread({
-    color: color
-  }, props));
-}
-
-function TypographySpinningIcon(_ref2) {
-  var color = _ref2.color,
-      props = _objectWithoutProperties(_ref2, _excluded2);
-
-  if (color) {
-    return /*#__PURE__*/jsx(TypographySpinningIconSpecifiedColor, _objectSpread({
-      color: color
-    }, props));
-  }
-
-  return /*#__PURE__*/jsx(TypographySpinningIconInheritColor, _objectSpread({}, props));
-}
-
 var hex2rgba = function (hex) {
   var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   var r = parseInt(hex.slice(1, 3), 16);
@@ -4303,5 +4273,5 @@ function MatchWindowSize(_ref) {
   return children;
 }
 
-export { Avatar, Button, Card, Checkbox, DatePicker, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, Radio, DeprecatedSection as Section, Skeleton, SpinningIcon, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, TypographySpinningIcon, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
+export { Avatar, Button, Card, Checkbox, DatePicker, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, Notification, Overlay, PageLoader, Radio, DeprecatedSection as Section, Skeleton, SpinningIcon, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
 //# sourceMappingURL=index-browser-all.es.js.map