@ornikar/kitt-universal 4.5.2 → 5.0.0

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

@@ -136,11 +136,11 @@ var KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-var _excluded$f = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
+var _excluded$g = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
 
-function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -216,7 +216,7 @@ function Typography(_ref4) {
       large = _ref4.large,
       variant = _ref4.variant,
       color = _ref4.color,
-      otherProps = _objectWithoutProperties(_ref4, _excluded$f);
+      otherProps = _objectWithoutProperties(_ref4, _excluded$g);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
@@ -233,14 +233,14 @@ function Typography(_ref4) {
   var nonNullableVariant = variant !== null && variant !== void 0 ? variant : isHeader ? 'bold' : 'regular';
   var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
     value: isHeader,
-    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread$o({
+    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread$p({
       $color: colorOrDefaultToBlack,
       $isHeader: isHeader,
       $typeForCurrentWindowSize: typeForCurrentWindowSize,
       $variant: nonNullableVariant,
       accessibilityRole: accessibilityRole || undefined
     }, otherProps))
-  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$o({
+  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$p({
     $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
@@ -253,13 +253,13 @@ function Typography(_ref4) {
 }
 
 function TypographyText(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$o({
+  return /*#__PURE__*/jsx(Typography, _objectSpread$p({
     accessibilityRole: null
   }, props));
 }
 
 function TypographyParagraph(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$o({
+  return /*#__PURE__*/jsx(Typography, _objectSpread$p({
     accessibilityRole: "paragraph"
   }, props));
 }
@@ -267,7 +267,7 @@ function TypographyParagraph(props) {
 var createHeading = function (level, defaultBase) {
   // https://github.com/necolas/react-native-web/issues/401
   function TypographyHeading(props) {
-    return /*#__PURE__*/jsx(Typography, _objectSpread$o(_objectSpread$o({
+    return /*#__PURE__*/jsx(Typography, _objectSpread$p(_objectSpread$p({
       accessibilityRole: "header",
       base: defaultBase
     }, props), {}, {
@@ -303,11 +303,11 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$e = ["size", "base", "round", "light"];
+var _excluded$f = ["size", "base", "round", "light"];
 
-function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getInitials = function (firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
@@ -378,13 +378,13 @@ function Avatar(_ref6) {
       base = _ref6$base === void 0 ? 'body-small' : _ref6$base,
       round = _ref6.round,
       light = _ref6.light,
-      props = _objectWithoutProperties(_ref6, _excluded$e);
+      props = _objectWithoutProperties(_ref6, _excluded$f);
 
   return /*#__PURE__*/jsx(StyledAvatarView, {
     $size: size,
     $isRound: round,
     $isLight: light,
-    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$n({
+    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$o({
       size: size,
       base: base,
       isLight: light
@@ -526,26 +526,26 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled.View.withConfig({
   return defaultPadding;
 });
 
-var _excluded$d = ["color"],
+var _excluded$e = ["color"],
     _excluded2$2 = ["color"];
 
-function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+      props = _objectWithoutProperties(_ref, _excluded$e);
 
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(Icon, _objectSpread$m(_objectSpread$m({}, props), {}, {
+  return /*#__PURE__*/jsx(Icon, _objectSpread$n(_objectSpread$n({}, props), {}, {
     color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
   }));
 }
 
 function TypographyIconInheritColor(props) {
   var color = useTypographyColor();
-  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$m({
+  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$n({
     color: color
   }, props));
 }
@@ -555,23 +555,23 @@ function TypographyIcon(_ref2) {
       props = _objectWithoutProperties(_ref2, _excluded2$2);
 
   if (color) {
-    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$m({
+    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$n({
       color: color
     }, props));
   }
 
-  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread$m({}, props));
+  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread$n({}, props));
 }
 
 function isSubtle(type) {
   return type.startsWith('subtle');
 }
 
-var _excluded$c = ["type", "isDisabled", "$isStretch", "icon", "children"];
+var _excluded$d = ["type", "isDisabled", "$isStretch", "icon", "children"];
 
-function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getTextColorByType = function (type) {
   switch (type) {
@@ -677,7 +677,7 @@ function ButtonContentChildren(_ref4) {
     color: isWebSubtle ? 'inherit' : color
   };
   return /*#__PURE__*/jsxs(StyledChildrenWithIcon, {
-    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$l(_objectSpread$l({}, buttonIconSharedProps), {}, {
+    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$m(_objectSpread$m({}, buttonIconSharedProps), {}, {
       testID: "button-left-icon",
       icon: icon
     })) : null, /*#__PURE__*/jsx(StyledButtonText, {
@@ -688,7 +688,7 @@ function ButtonContentChildren(_ref4) {
       ,
       color: isWebSubtle ? undefined : color,
       children: children
-    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$l(_objectSpread$l({}, buttonIconSharedProps), {}, {
+    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$m(_objectSpread$m({}, buttonIconSharedProps), {}, {
       icon: icon
     })) : null]
   });
@@ -714,14 +714,14 @@ function ButtonContent(_ref7) {
       $isStretch = _ref7.$isStretch,
       icon = _ref7.icon,
       children = _ref7.children,
-      props = _objectWithoutProperties(_ref7, _excluded$c);
+      props = _objectWithoutProperties(_ref7, _excluded$d);
 
   var color = isDisabled ? 'black-light' : getTextColorByType(type);
   return /*#__PURE__*/jsx(ButtonContentContainer, {
     $isSubtle: isSubtle(type),
     $isStretch: $isStretch,
     $isIconOnly: Boolean(!children && icon),
-    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread$l(_objectSpread$l({
+    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread$m(_objectSpread$m({
       icon: icon,
       type: type,
       isDisabled: isDisabled,
@@ -858,20 +858,20 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$b = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$c = ["as", "href", "openLinkBehavior", "onPress"];
 
-function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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$b);
+      rest = _objectWithoutProperties(_ref, _excluded$c);
 
-  return /*#__PURE__*/jsx(Component, _objectSpread$k(_objectSpread$k({}, rest), {}, {
+  return /*#__PURE__*/jsx(Component, _objectSpread$l(_objectSpread$l({}, rest), {}, {
     onPress: function handleOnPress() {
       if (onPress) onPress();
       if (!href) return;
@@ -1542,7 +1542,7 @@ function Checkbox(_ref6) {
   var onChange = _ref6.onChange,
       onBlur = _ref6.onBlur,
       onFocus = _ref6.onFocus,
-      value = _ref6.value,
+      checked = _ref6.checked,
       _ref6$hitSlop = _ref6.hitSlop,
       hitSlop = _ref6$hitSlop === void 0 ? 40 : _ref6$hitSlop,
       id = _ref6.id,
@@ -1551,19 +1551,19 @@ function Checkbox(_ref6) {
   return /*#__PURE__*/jsxs(CheckboxAndLabelPressableWrapper, {
     accessibilityRole: "checkbox",
     accessibilityState: {
-      checked: value
+      checked: checked
     },
     hitSlop: hitSlop,
     onPress: function handlePress(e) {
       if (onFocus) onFocus(e);
-      if (onChange) onChange(e);
+      if (onChange) onChange(!checked, e);
       if (onBlur) onBlur(e);
     },
     children: [/*#__PURE__*/jsx(CheckboxContainer, {
-      $isChecked: value,
+      $isChecked: checked,
       $hasLabel: !!children,
       testID: id,
-      children: value ? /*#__PURE__*/jsx(Icon, {
+      children: checked ? /*#__PURE__*/jsx(Icon, {
         align: "center",
         color: theme.kitt.forms.checkbox.markColor,
         size: theme.kitt.forms.checkbox.iconSize,
@@ -1647,6 +1647,87 @@ function DatePickerInputPart(_ref4) {
   });
 }
 
+function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function prefixWithZero(value) {
+  return "".concat(value).padStart(2, '0');
+}
+
+var PartContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "DatePickerInputs__PartContainer"
+})(["margin-right:", ";", ";"], function (_ref) {
+  var theme = _ref.theme,
+      $isLast = _ref.$isLast;
+  return !$isLast ? "".concat(theme.kitt.spacing * 2, "px") : 0;
+}, function (_ref2) {
+  var $isStretch = _ref2.$isStretch;
+  return $isStretch ? css(["flex:0.33;flex-grow:1;"]) : undefined;
+});
+var DatePickerPressable = /*#__PURE__*/styled.Pressable.withConfig({
+  displayName: "DatePickerInputs__DatePickerPressable"
+})(["display:flex;flex-direction:row;", ";"], function (_ref3) {
+  var $isStretch = _ref3.$isStretch;
+
+  if ($isStretch) {
+    return css(["width:100%;"]);
+  }
+
+  return css(["align-self:baseline;"]);
+});
+function DatePickerInputs(_ref4) {
+  var state = _ref4.state,
+      internalForceState = _ref4.internalForceState,
+      isFocused = _ref4.isFocused,
+      disabled = _ref4.disabled,
+      stretch = _ref4.stretch,
+      id = _ref4.id,
+      testID = _ref4.testID,
+      handleModalOpen = _ref4.handleModalOpen,
+      currentValue = _ref4.currentValue,
+      placeholder = _ref4.placeholder;
+  var currentState = internalForceState || getInputUIState({
+    isFocused: isFocused,
+    isDisabled: Boolean(disabled),
+    formState: state
+  });
+  var sharedPartProps = {
+    disabled: disabled,
+    $state: currentState
+  };
+  return /*#__PURE__*/jsxs(DatePickerPressable, {
+    $isStretch: stretch,
+    nativeID: id,
+    disabled: disabled,
+    testID: testID,
+    onPress: handleModalOpen,
+    children: [/*#__PURE__*/jsx(PartContainer, {
+      $isStretch: stretch,
+      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread$k(_objectSpread$k({}, sharedPartProps), {}, {
+        partName: "day",
+        value: currentValue ? prefixWithZero(currentValue.getDate()) : undefined,
+        placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.day
+      }))
+    }), /*#__PURE__*/jsx(PartContainer, {
+      $isStretch: stretch,
+      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread$k(_objectSpread$k({}, sharedPartProps), {}, {
+        partName: "month",
+        value: currentValue ? prefixWithZero(currentValue.getMonth() + 1) : undefined,
+        placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.month
+      }))
+    }), /*#__PURE__*/jsx(PartContainer, {
+      $isLast: true,
+      $isStretch: stretch,
+      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread$k(_objectSpread$k({}, sharedPartProps), {}, {
+        partName: "year",
+        value: currentValue ? currentValue.getFullYear() : undefined,
+        placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.year
+      }))
+    })]
+  });
+}
+
 function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -1702,7 +1783,7 @@ function ModalFooter(_ref3) {
   });
 }
 
-var _excluded$a = ["as", "children"];
+var _excluded$b = ["as", "children"];
 
 function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -1710,7 +1791,7 @@ function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) {
 function StyleWebWrapper(_ref) {
   var as = _ref.as,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$a);
+      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
@@ -1743,14 +1824,14 @@ function withTheme(WrappedComponent) {
   });
 }
 
-var _excluded$9 = ["color", "disabled"];
+var _excluded$a = ["color", "disabled"];
 
 function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled$1("div")({
   name: "PressableIconButtonWebWrapper",
-  "class": "p1nlccvg",
+  "class": "kitt-u_PressableIconButtonWebWrapper_p1nlccvg",
   vars: {
     "p1nlccvg-0": [function (_ref) {
       var theme = _ref.theme,
@@ -1811,7 +1892,7 @@ var StyledPressableIconButton = /*#__PURE__*/styled.Pressable.withConfig({
 function PressableIconButton(_ref9) {
   var color = _ref9.color,
       disabled = _ref9.disabled,
-      props = _objectWithoutProperties(_ref9, _excluded$9);
+      props = _objectWithoutProperties(_ref9, _excluded$a);
 
   return /*#__PURE__*/jsx(StyleWebWrapper, {
     as: PressableIconButtonWebWrapper,
@@ -2134,7 +2215,7 @@ function PlatformDateTimePicker(_ref) {
   }));
 }
 
-var _excluded$8 = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+var _excluded$9 = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
 
 function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -2158,7 +2239,7 @@ function ModalPlatformDateTimePicker(_ref2) {
       validateButtonLabel = _ref2.validateButtonLabel,
       onClose = _ref2.onClose,
       onChange = _ref2.onChange,
-      props = _objectWithoutProperties(_ref2, _excluded$8);
+      props = _objectWithoutProperties(_ref2, _excluded$9);
 
   var _useState = useState(value),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2202,51 +2283,21 @@ function ModalPlatformDateTimePicker(_ref2) {
   });
 }
 
+var _excluded$8 = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "onChange", "onFocus", "onBlur", "pickerDefaultDate"];
+
 function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function prefixWithZero(value) {
-  return "".concat(value).padStart(2, '0');
-}
-
-var PartContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "DatePicker__PartContainer"
-})(["margin-right:", ";", ";"], function (_ref) {
-  var theme = _ref.theme,
-      $isLast = _ref.$isLast;
-  return !$isLast ? "".concat(theme.kitt.spacing * 2, "px") : 0;
-}, function (_ref2) {
-  var $isStretch = _ref2.$isStretch;
-  return $isStretch ? css(["flex:0.33;flex-grow:1;"]) : undefined;
-});
-var DatePickerPressable = /*#__PURE__*/styled.Pressable.withConfig({
-  displayName: "DatePicker__DatePickerPressable"
-})(["display:flex;flex-direction:row;", ";"], function (_ref3) {
-  var $isStretch = _ref3.$isStretch;
-
-  if ($isStretch) {
-    return css(["width:100%;"]);
-  }
-
-  return css(["align-self:baseline;"]);
-});
-function DatePicker(_ref4) {
-  var value = _ref4.value,
-      id = _ref4.id,
-      disabled = _ref4.disabled,
-      placeholder = _ref4.placeholder,
-      state = _ref4.state,
-      internalForceState = _ref4.internalForceState,
-      testID = _ref4.testID,
-      stretch = _ref4.stretch,
-      pickerDefaultDate = _ref4.pickerDefaultDate,
-      pickerUITestID = _ref4.pickerUITestID,
-      pickerUITitle = _ref4.pickerUITitle,
-      pickerUIValidateButtonLabel = _ref4.pickerUIValidateButtonLabel,
-      onChange = _ref4.onChange,
-      onFocus = _ref4.onFocus,
-      onBlur = _ref4.onBlur;
+function DatePicker(_ref) {
+  var value = _ref.value,
+      pickerUITestID = _ref.pickerUITestID,
+      pickerUITitle = _ref.pickerUITitle,
+      pickerUIValidateButtonLabel = _ref.pickerUIValidateButtonLabel,
+      onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
+      onBlur = _ref.onBlur,
+      pickerDefaultDate = _ref.pickerDefaultDate,
+      props = _objectWithoutProperties(_ref, _excluded$8);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2269,69 +2320,28 @@ function DatePicker(_ref4) {
     setIsFocused(false);
   };
 
-  var handleChange = function (newDate) {
-    setCurrentValue(newDate);
-    onChange(newDate);
-    handleModalClose();
-  };
-
-  var currentState = internalForceState || getInputUIState({
-    isFocused: isFocused,
-    isDisabled: Boolean(disabled),
-    formState: state
-  });
-  var sharedPickerProps = {
-    testID: pickerUITestID,
-    value: currentValue,
-    onChange: handleChange
-  };
-  var sharedPartProps = {
-    disabled: disabled,
-    $state: currentState,
-    defaultDate: pickerDefaultDate
-  };
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs(DatePickerPressable, {
-      $isStretch: stretch,
-      nativeID: id,
-      disabled: disabled,
-      testID: testID,
-      onPress: function handleModalOpen() {
+    children: [/*#__PURE__*/jsx(DatePickerInputs, _objectSpread$d({
+      handleModalOpen: function handleModalOpen() {
         if (onFocus) onFocus();
         setIsPickerUIVisible(true);
         setIsFocused(true);
       },
-      children: [/*#__PURE__*/jsx(PartContainer, {
-        $isStretch: stretch,
-        children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread$d(_objectSpread$d({}, sharedPartProps), {}, {
-          partName: "day",
-          value: currentValue ? prefixWithZero(currentValue.getDate()) : undefined,
-          placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.day
-        }))
-      }), /*#__PURE__*/jsx(PartContainer, {
-        $isStretch: stretch,
-        children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread$d(_objectSpread$d({}, sharedPartProps), {}, {
-          partName: "month",
-          value: currentValue ? prefixWithZero(currentValue.getMonth() + 1) : undefined,
-          placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.month
-        }))
-      }), /*#__PURE__*/jsx(PartContainer, {
-        $isLast: true,
-        $isStretch: stretch,
-        children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread$d(_objectSpread$d({}, sharedPartProps), {}, {
-          partName: "year",
-          value: currentValue ? currentValue.getFullYear() : undefined,
-          placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.year
-        }))
-      })]
-    }), /*#__PURE__*/jsxs(Fragment, {
-      children: [Platform.OS === 'android' && isPickerUIVisible ? /*#__PURE__*/jsx(PlatformDateTimePicker, _objectSpread$d({}, sharedPickerProps)) : null, Platform.OS !== 'android' ? /*#__PURE__*/jsx(ModalPlatformDateTimePicker, _objectSpread$d(_objectSpread$d({}, sharedPickerProps), {}, {
-        isVisible: isPickerUIVisible,
-        title: pickerUITitle,
-        validateButtonLabel: pickerUIValidateButtonLabel,
-        onClose: handleModalClose,
-        onChange: handleChange
-      })) : null]
+      currentValue: currentValue,
+      isFocused: isFocused
+    }, props)), /*#__PURE__*/jsx(ModalPlatformDateTimePicker, {
+      testID: pickerUITestID,
+      value: currentValue,
+      isVisible: isPickerUIVisible,
+      title: pickerUITitle,
+      validateButtonLabel: pickerUIValidateButtonLabel,
+      defaultDate: pickerDefaultDate,
+      onClose: handleModalClose,
+      onChange: function handleChange(newDate) {
+        setCurrentValue(newDate);
+        onChange(newDate);
+        handleModalClose();
+      }
     })]
   });
 }
@@ -4148,7 +4158,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TypographyLinkWebWrapper = withTheme( /*#__PURE__*/styled$1("span")({
   name: "TypographyLinkWebWrapper",
-  "class": "tcwz3nt",
+  "class": "kitt-u_TypographyLinkWebWrapper_tcwz3nt",
   vars: {
     "tcwz3nt-0": [function (_ref) {
       var $hasNoUnderline = _ref.$hasNoUnderline;