@ornikar/kitt-universal 28.1.0 → 29.1.0

package/dist/index.es.js

@@ -2336,6 +2336,11 @@ var skeleton = {
   }
 };
 
+var sticker = {
+  borderRadius: 2,
+  padding: 4
+};
+
 var tabBar = {
   underline: {
     "default": {
@@ -2628,7 +2633,7 @@ var breakpoints = {
 // TODO : seperate brand color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
 var theme = {
   spacing: spacing,
-  getSpacing: function getSpacing(multiplier) {
+  getSpacing: function (multiplier) {
     return spacing * multiplier;
   },
   colors: colors,
@@ -2656,6 +2661,7 @@ var theme = {
   skeleton: skeleton,
   tabBar: tabBar,
   tag: tag,
+  sticker: sticker,
   tooltip: tooltip,
   typography: typography,
   fullscreenModal: fullscreenModal,
@@ -2816,7 +2822,7 @@ var ActionCardPressable = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     onPress: onPress,
     onHoverIn: onHoverIn,
     onHoverOut: onHoverOut,
-    children: function children(_ref3) {
+    children: function (_ref3) {
       var isHovered = _ref3.isHovered,
         isPressed = _ref3.isPressed,
         isFocused = _ref3.isFocused;
@@ -3591,11 +3597,11 @@ var useNativeAnimation$4 = function (_ref) {
     };
   });
   return {
-    onPressIn: function handlePressIn() {
+    onPressIn: function () {
       color.value = withSpring(1);
       pressed.value = 1;
     },
-    onPressOut: function handlePressOut() {
+    onPressOut: function () {
       color.value = withSpring(0);
       pressed.value = 0;
     },
@@ -3664,7 +3670,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onHoverOut: onHoverOut,
     onFocus: onFocus,
     onBlur: onBlur,
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -3787,7 +3793,7 @@ var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       stretch: stretch,
       disabled: isLoading ? true : disabled,
       icon: isLoading ? /*#__PURE__*/jsx(LoaderIcon, {}) : icon,
-      onPress: function handlePress(e) {
+      onPress: function (e) {
         var callPressAndUpdateLoadingState = /*#__PURE__*/function () {
           var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
             return _regeneratorRuntime().wrap(function (_context) {
@@ -4059,10 +4065,10 @@ function BottomSheetComp(_ref, ref) {
       borderRadius: 4,
       backgroundColor: theme.kitt.bottomSheet.handle.backgroundColor
     },
-    handleComponent: function handleComponent(props) {
+    handleComponent: function (props) {
       return hasHandle ? /*#__PURE__*/jsx(BottomSheetHandle, _objectSpread({}, props)) : null;
     },
-    backdropComponent: function backdropComponent(props) {
+    backdropComponent: function (props) {
       return hasBackdrop ? /*#__PURE__*/jsx(BottomSheetBackdrop, _objectSpread(_objectSpread({}, props), {}, {
         opacity: 0.25,
         appearsOnIndex: 0,
@@ -4071,7 +4077,7 @@ function BottomSheetComp(_ref, ref) {
     }
   }, rest), {}, {
     topInset: top,
-    children: function children(props) {
+    children: function (props) {
       return /*#__PURE__*/jsx(Wrapper, {
         children: typeof Content === 'function' ? /*#__PURE__*/jsx(Content, _objectSpread({}, props === null || props === void 0 ? void 0 : props.data)) : Content
       });
@@ -4147,7 +4153,7 @@ function CloseButton$1(_ref) {
     onPress = _ref.onPress;
   var onCloseContextCallback = useOnCloseModalBehaviour();
   return /*#__PURE__*/cloneElement(children, {
-    onPress: function handleClose() {
+    onPress: function () {
       if (onPress) onPress();
       onCloseContextCallback();
     }
@@ -4323,11 +4329,11 @@ function CardModalAnimation(_ref) {
     transparent: true,
     supportedOrientations: ['landscape', 'portrait'],
     visible: isModalVisible,
-    onShow: function onShow() {
+    onShow: function () {
       if (onEnter) onEnter();
       setIsContentVisible(true);
     },
-    onDismiss: function onDismiss() {
+    onDismiss: function () {
       if (onExited) onExited();
     },
     children: /*#__PURE__*/jsxs(View, {
@@ -4374,7 +4380,7 @@ function CardModalBehaviour(_ref) {
     onClose: onClose,
     children: /*#__PURE__*/jsx(CardModalAnimation, _objectSpread(_objectSpread({}, props), {}, {
       visible: visible,
-      onExited: function handleExitAnimationDone() {
+      onExited: function () {
         if (onExited) onExited();
         setIsModalBehaviourVisible(false);
       },
@@ -4691,10 +4697,10 @@ var useNativeAnimation$3 = function (_ref) {
     };
   });
   return {
-    onPressIn: function onPressIn() {
+    onPressIn: function () {
       pressed.value = true;
     },
-    onPressOut: function onPressOut() {
+    onPressOut: function () {
       pressed.value = false;
     },
     backgroundStyles: backgroundStyles
@@ -4757,7 +4763,7 @@ function ChoiceItem(_ref) {
     style: style,
     onBlur: onBlur,
     onFocus: onFocus,
-    onPress: function handlePress(e) {
+    onPress: function (e) {
       if (onFocus) onFocus(e);
       if (onPress) onPress();
       handleChange();
@@ -4765,7 +4771,7 @@ function ChoiceItem(_ref) {
     },
     onPressIn: onPressIn,
     onPressOut: onPressOut,
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed;
       var textColor = getCurrentTextColor$1({
@@ -4869,7 +4875,7 @@ function Choices(_ref2) {
     type: type,
     disabled: disabled,
     onPress: !isForm ? onPress : undefined,
-    onChange: isForm ? function handleChange(newValue) {
+    onChange: isForm ? function (newValue) {
       setCurrentValue(newValue);
       if (onChange) onChange(newValue);
     } : undefined,
@@ -5025,11 +5031,11 @@ function DialogModalAnimation(_ref) {
     transparent: true,
     supportedOrientations: ['landscape', 'portrait'],
     visible: isModalVisible,
-    onShow: function onShow() {
+    onShow: function () {
       if (onEnter) onEnter();
       setIsContentVisible(true);
     },
-    onDismiss: function onDismiss() {
+    onDismiss: function () {
       if (onExited) onExited();
     },
     children: /*#__PURE__*/jsxs(View, {
@@ -5083,7 +5089,7 @@ function DialogModalBehaviour(_ref) {
       },
       children: /*#__PURE__*/jsx(DialogModalAnimation, _objectSpread(_objectSpread({}, props), {}, {
         visible: visible,
-        onExited: function handleExitAnimationDone() {
+        onExited: function () {
           if (onExited) onExited();
           setIsModalBehaviourVisible(false);
         },
@@ -5346,7 +5352,7 @@ function ExternalLink(_ref) {
   var openExternalLink = useOpenExternalLink();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
-    onPress: function handleOnPress(e) {
+    onPress: function (e) {
       if (onPress) {
         onPress(e);
         if (e.defaultPrevented) return;
@@ -5570,14 +5576,14 @@ var _excluded$y = ["children", "name", "disabled", "placeholder", "isInitialOpen
 function patchNativeEvent(event) {
   return event || {
     preventDownshiftDefault: false,
-    preventDefault: function preventDefault() {}
+    preventDefault: function () {}
   };
 }
 function isReactElement(element) {
   return _typeof(element) === 'object' && element !== null && 'type' in element && 'props' in element;
 }
 function Autocomplete(_ref) {
-  var _children = _ref.children,
+  var children = _ref.children,
     name = _ref.name,
     disabled = _ref.disabled,
     placeholder = _ref.placeholder,
@@ -5604,7 +5610,7 @@ function Autocomplete(_ref) {
     zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
     maxItemContainerHeight = _ref.maxItemContainerHeight,
     props = _objectWithoutProperties(_ref, _excluded$y);
-  var childrenArray = Children.toArray(_children);
+  var childrenArray = Children.toArray(children);
   var items = childrenArray.filter(isReactElement).map(function (child) {
     return {
       child: child,
@@ -5615,12 +5621,12 @@ function Autocomplete(_ref) {
     defaultIsOpen: isInitialOpen,
     initialSelectedItem: initialValue,
     initialInputValue: initialValue ? itemToString(initialValue) : undefined,
-    itemToString: function handleItemToString(item) {
+    itemToString: function (item) {
       // Prevents returning null values
       if (!itemToString) return '';
       return itemToString(item || undefined);
     },
-    stateReducer: function stateReducer(state, changes) {
+    stateReducer: function (state, changes) {
       switch (changes.type) {
         case Downshift.stateChangeTypes.changeInput:
           return _objectSpread(_objectSpread({}, changes), {}, {
@@ -5630,7 +5636,7 @@ function Autocomplete(_ref) {
           return changes;
       }
     },
-    onChange: function onChange(selectedItem, stateAndHelpers) {
+    onChange: function (selectedItem, stateAndHelpers) {
       if (_onChange) {
         _onChange(selectedItem, stateAndHelpers);
       }
@@ -5638,7 +5644,7 @@ function Autocomplete(_ref) {
     onSelect: onSelectItem,
     onOuterClick: onOuterPress,
     onInputValueChange: onInputChange,
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var getRootProps = _ref2.getRootProps,
         getInputProps = _ref2.getInputProps,
         getMenuProps = _ref2.getMenuProps,
@@ -5690,7 +5696,7 @@ function Autocomplete(_ref) {
           right: right || (canDisplayCollapseButton ? /*#__PURE__*/jsx(InputPressable, _objectSpread(_objectSpread({}, toggleProps), {}, {
             testID: "kitt.Autocomplete.listToggle",
             hitSlop: 40,
-            onPress: function handleTogglePress(e) {
+            onPress: function (e) {
               if (Platform.OS === 'web') {
                 onClickToggle(e);
                 return;
@@ -5701,13 +5707,13 @@ function Autocomplete(_ref) {
               icon: isCurrentlyOpen ? /*#__PURE__*/jsx(CaretUpFillIcon, {}) : /*#__PURE__*/jsx(CaretDownFillIcon, {})
             })
           })) : null),
-          onFocus: function onFocus(e) {
+          onFocus: function (e) {
             openMenu();
             /** @ts-expect-error onFocus wants web events */
             if (Platform.OS !== 'android' && onSearchInputFocus) onSearchInputFocus(e);
             if (_onFocus) _onFocus(e);
           },
-          onBlur: function onBlur(e) {
+          onBlur: function (e) {
             /** @ts-expect-error onBlur wants web events */
             if (Platform.OS === 'web' && onSearchInputBlur) onSearchInputBlur(e);
 
@@ -5743,14 +5749,14 @@ function Autocomplete(_ref) {
                   selected: ariaSelected
                 },
                 disabled: disabled,
-                onPress: function onPress(e) {
+                onPress: function (e) {
                   if (Platform.OS === 'web') {
                     if (onClick) onClick(e);
                     return;
                   }
                   if (_onPress) _onPress(patchNativeEvent(e));
                 },
-                children: function children(_ref5) {
+                children: function (_ref5) {
                   var isHovered = _ref5.isHovered,
                     isFocused = _ref5.isFocused,
                     isPressed = _ref5.isPressed;
@@ -5840,12 +5846,12 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
       disabled: disabled
     },
     disabled: disabled,
-    onPress: function handlePress(e) {
+    onPress: function (e) {
       if (onFocus) onFocus();
       if (onChange) onChange(!checked, e);
       if (onBlur) onBlur();
     },
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -6400,7 +6406,7 @@ var DatePickerAndroid = /*#__PURE__*/forwardRef(function (_ref, ref) {
     DateTimePickerAndroid.open({
       testID: pickerUITestID,
       value: currentValue || pickerDefaultDate || new Date(Date.now()),
-      onChange: function onChange(e) {
+      onChange: function (e) {
         setIsFocused(false);
         var timestamp = e.nativeEvent.timestamp;
         if (timestamp) {
@@ -6452,7 +6458,7 @@ function PlatformDateTimePicker(_ref) {
     minimumDate: minimuDate,
     display: displayMode
   }, iosProps), {}, {
-    onChange: function onChange(_event, date) {
+    onChange: function (_event, date) {
       return _onChange(date);
     }
   }));
@@ -6482,7 +6488,7 @@ function ModalPlatformDateTimePicker(_ref2) {
 
   return /*#__PURE__*/jsx(CardModal.ModalBehaviour, {
     visible: Boolean(isVisible),
-    onClose: function handleClose() {
+    onClose: function () {
       setCurrentValue(value);
       onClose();
     },
@@ -6493,7 +6499,7 @@ function ModalPlatformDateTimePicker(_ref2) {
         }) : null, /*#__PURE__*/jsx(CardModal.Body, {
           children: /*#__PURE__*/jsx(PlatformDateTimePicker, _objectSpread(_objectSpread({}, props), {}, {
             value: currentValue,
-            onChange: function handleChange(newDate) {
+            onChange: function (newDate) {
               setCurrentValue(function (prev) {
                 return newDate || prev;
               });
@@ -6503,7 +6509,7 @@ function ModalPlatformDateTimePicker(_ref2) {
           children: /*#__PURE__*/jsx(Button, {
             stretch: true,
             type: "primary",
-            onPress: function handleSubmit() {
+            onPress: function () {
               onChange(currentValue);
             },
             children: validateButtonLabel ? /*#__PURE__*/jsx(Text$1, {
@@ -6557,7 +6563,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isFocusedInternal: isFocused || isFocusedInternal,
       isHoveredInternal: isHoveredInternal,
       isPressedInternal: isPressedInternal,
-      onPress: function handleModalOpen() {
+      onPress: function () {
         if (onFocus) onFocus();
         setIsPickerUIVisible(true);
         setIsFocused(true);
@@ -6570,7 +6576,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       validateButtonLabel: pickerUIValidateButtonLabel,
       defaultDate: pickerDefaultDate,
       onClose: handleModalClose,
-      onChange: function handleChange(newDate) {
+      onChange: function (newDate) {
         setCurrentValue(newDate);
         onChange(newDate);
         handleModalClose();
@@ -6886,7 +6892,7 @@ function FilePicker(_ref) {
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/cloneElement(childElement, {
       // ensure that the press event is not prevented by Button component
-      onPress: function onPress() {
+      onPress: function () {
         var _childElement$props$o, _childElement$props, _bottomSheetRef$curre;
         if (disabled) return;
         (_childElement$props$o = (_childElement$props = childElement.props).onPress) === null || _childElement$props$o === void 0 || _childElement$props$o.call(_childElement$props);
@@ -7187,10 +7193,10 @@ var GoogleMapsAutocompleteContext = /*#__PURE__*/createContext({
     isLoadingResultDetails: false,
     shouldDisplayEmptyStateWhenNoResults: false
   },
-  onInputChange: function onInputChange() {
+  onInputChange: function () {
     return Promise.resolve();
   },
-  onSelectItem: function onSelectItem() {}
+  onSelectItem: function () {}
 });
 function GoogleMapsAutocompleteProvider(_ref) {
   var children = _ref.children,
@@ -7441,7 +7447,7 @@ function InputAddress(_ref) {
   return /*#__PURE__*/jsx(Autocomplete, _objectSpread(_objectSpread({}, props), {}, {
     itemToString: itemToString,
     initialValue: formattedInitialValue,
-    checkSelectedItem: function checkSelectedItem(selectedItem, item) {
+    checkSelectedItem: function (selectedItem, item) {
       return (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.place_id) === item.place_id;
     },
     right: state.isLoadingSearch || state.isLoadingResultDetails ? /*#__PURE__*/jsx(Icon, {
@@ -7450,10 +7456,10 @@ function InputAddress(_ref) {
     }) : undefined,
     errorElement: state.hasSearchError || state.hasSelectResultError ? errorElement : null,
     emptyResultsElement: state.items.length === 0 ? emptyResultsElement : null,
-    onInputChange: function onInputChange(v) {
+    onInputChange: function (v) {
       _onInputChange(v);
     },
-    onChange: function onChange(v) {
+    onChange: function (v) {
       onSelectItem(v, _onChange);
     },
     children: state.items.map(function (item) {
@@ -7535,7 +7541,7 @@ var InputNumber = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref
   }, props), {}, {
     inputMode: "numeric",
-    onChange: function handleChange(event) {
+    onChange: function (event) {
       if (!onChange) return;
       var value = parseFloat(event.nativeEvent.text);
 
@@ -7567,7 +7573,7 @@ var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
       testID: "kitt.InputPassword.passwordToggle",
       hitSlop: 20,
       accessibilityRole: "button",
-      onPress: function onPress() {
+      onPress: function () {
         return setIsVisible(function (prev) {
           return !prev;
         });
@@ -7602,7 +7608,7 @@ var InputPhone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     enterKeyHint: currentEnterKeyHint,
     autoComplete: autoComplete,
     textContentType: "telephoneNumber",
-    onChange: function handleChange(event) {
+    onChange: function (event) {
       var number = parseNumber(event.nativeEvent.text);
 
       // When intl phone number is valid :
@@ -7795,14 +7801,14 @@ function Radio(_ref, ref) {
     focusable: checked && !disabled,
     flexDirection: "row",
     alignItems: "center",
-    onPress: function handlePress(event) {
+    onPress: function (event) {
       if (onFocus) onFocus();
       if (onChange) onChange(value, event);
       if (onBlur) onBlur();
     },
     onFocus: onFocus,
     onBlur: onBlur,
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -7921,11 +7927,11 @@ var useNativeAnimation$2 = function (_ref) {
     };
   });
   return {
-    onPressIn: function handlePressIn() {
+    onPressIn: function () {
       color.value = withSpring(1);
       pressed.value = 1;
     },
-    onPressOut: function handlePressOut() {
+    onPressOut: function () {
       color.value = withSpring(0);
       pressed.value = 0;
     },
@@ -7978,7 +7984,7 @@ function RadioButton(_ref) {
     flexShrink: createResponsiveStyleFromProp(stretch, 1, undefined),
     flexBasis: createResponsiveStyleFromProp(stretch, 0),
     disabled: disabled,
-    onPress: function handlePress(e) {
+    onPress: function (e) {
       if (onFocus) onFocus(e);
       if (onChange) onChange(value);
       if (onBlur) onBlur(e);
@@ -7987,7 +7993,7 @@ function RadioButton(_ref) {
     onPressOut: onPressOut,
     onFocus: onFocus,
     onBlur: onBlur,
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -8106,7 +8112,7 @@ var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
       textAlignVertical: "top",
       minHeight: "kitt.forms.textArea.minHeight"
     }, props), {}, {
-      onChange: function handleOnChange(e) {
+      onChange: function (e) {
         if (!limit || e.nativeEvent.text.length <= limit) {
           var _props$onChange;
           (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, e);
@@ -8269,10 +8275,10 @@ function Toggle(_ref) {
     children: [/*#__PURE__*/jsx(Pressable, {
       accessibilityRole: "togglebutton",
       disabled: isDisabled,
-      onPress: function handlePress() {
+      onPress: function () {
         onChange(!value);
       },
-      children: function children(_ref2) {
+      children: function (_ref2) {
         var isHovered = _ref2.isHovered,
           isPressed = _ref2.isPressed,
           isFocused = _ref2.isFocused;
@@ -8459,11 +8465,11 @@ function FullscreenModalAnimation(_ref) {
     transparent: true,
     supportedOrientations: ['landscape', 'portrait'],
     visible: isModalVisible,
-    onShow: function onShow() {
+    onShow: function () {
       if (onEnter) onEnter();
       setIsContentVisible(true);
     },
-    onDismiss: function onDismiss() {
+    onDismiss: function () {
       if (onExited) onExited();
     },
     children: /*#__PURE__*/jsxs(View, {
@@ -8510,7 +8516,7 @@ function FullscreenModalBehaviour(_ref) {
     onClose: onClose,
     children: /*#__PURE__*/jsx(FullscreenModalAnimation, _objectSpread(_objectSpread({}, props), {}, {
       visible: visible,
-      onExited: function handleExitAnimationDone() {
+      onExited: function () {
         if (onExited) onExited();
         setIsModalBehaviourVisible(false);
       },
@@ -8693,11 +8699,11 @@ var useNativeAnimation$1 = function (_ref) {
     };
   });
   return {
-    onPressIn: function handleHoverIn() {
+    onPressIn: function () {
       color.value = withTiming(1, withTimingConfig);
       translate.value = withTiming(2, withTimingConfig);
     },
-    onPressOut: function handleHoverOut() {
+    onPressOut: function () {
       color.value = withTiming(0, withTimingConfig);
       translate.value = withTiming(0, withTimingConfig);
     },
@@ -8791,13 +8797,13 @@ function Highlight(_ref) {
     });
   }
   return /*#__PURE__*/jsx(Pressable, {
-    onPress: function handlePress() {
+    onPress: function () {
       setIsExpanded(!isExpanded);
       setIsInitialRender(false);
     },
     onPressIn: onPressIn,
     onPressOut: onPressOut,
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var isHovered = _ref2.isHovered;
       return /*#__PURE__*/jsxs(AnimatedContainer, {
         isHovered: isHovered,
@@ -9135,7 +9141,7 @@ function MapMarker(_ref2) {
   return /*#__PURE__*/jsx(Pressable$1, {
     testID: testID,
     onPress: onPress,
-    children: function children(_ref3) {
+    children: function (_ref3) {
       var isHovered = _ref3.isHovered;
       return /*#__PURE__*/jsx(StaticMapMarker$1, _objectSpread(_objectSpread({}, props), {}, {
         isHovered: isHovered
@@ -10241,6 +10247,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         tag: {
           borderRadius: theme.tag.borderRadius
         },
+        sticker: {
+          borderRadius: theme.sticker.borderRadius
+        },
         tooltip: {
           borderRadius: theme.tooltip.borderRadius
         },
@@ -11027,6 +11036,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             }
           }
         },
+        sticker: {
+          padding: theme.sticker.padding
+        },
         toggle: {
           primary: {
             enabled: {
@@ -11897,19 +11909,19 @@ function NavigationModalBehaviour(_ref) {
     children: /*#__PURE__*/jsx(AnimationComponent, _objectSpread(_objectSpread({}, props), {}, {
       appear: shouldAppear,
       visible: visible,
-      onEnter: function handleEnter() {
+      onEnter: function () {
         if (onEnter) onEnter();
 
         // Once a children as been displayed, we force appear to false in order to avoid replaying animation on breakpoint change
         setShouldAppear(false);
       },
-      onExit: function handleExit() {
+      onExit: function () {
         if (onExit) onExit();
 
         // Reset appear value to its original value for future modal display
         setShouldAppear(appear);
       },
-      onExited: function handleExitAnimationDone() {
+      onExited: function () {
         if (onExited) onExited();
         setIsModalBehaviourVisible(false);
       },
@@ -12270,7 +12282,7 @@ function Picker(_ref) {
       isOpen: state.isOpen,
       selectedItem: state.currentValue,
       disabled: disabled,
-      onPress: function handlePressTrigger() {
+      onPress: function () {
         if (syncStateWithSourceValue) {
           dispatch({
             type: 'open-modal-with-value',
@@ -12319,7 +12331,7 @@ function Picker(_ref) {
               accessibilityState: {
                 selected: isSelected
               },
-              onPress: function onPress() {
+              onPress: function () {
                 handleInternalChange(item.props.value);
               },
               children: function (_ref2) {
@@ -12340,7 +12352,7 @@ function Picker(_ref) {
           children: /*#__PURE__*/jsx(Button, {
             stretch: true,
             type: "primary",
-            onPress: function handleChange() {
+            onPress: function () {
               if (onChange) onChange(state.internalValue);
               dispatch({
                 type: 'change-value'
@@ -12477,7 +12489,7 @@ function Skeleton(_ref) {
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     style: style,
-    onLayout: function onLayout(_ref2) {
+    onLayout: function (_ref2) {
       var nativeEvent = _ref2.nativeEvent;
       return setWidth(nativeEvent.layout.width);
     },
@@ -12699,7 +12711,7 @@ function StaticMap(_ref) {
     position: "relative",
     maxWidth: mapBoxMaxPictureWidth,
     height: height,
-    onLayout: function handleParentLayout(event) {
+    onLayout: function (event) {
       var nativeEvent = event.nativeEvent;
       var rangedMapWidth = getPictureWidth(nativeEvent.layout.width);
       setCurrentWidth(rangedMapWidth);
@@ -12711,11 +12723,11 @@ function StaticMap(_ref) {
       width: currentWidth,
       height: height,
       alt: alt,
-      onLoadEnd: function handleImageLoadEnd() {
+      onLoadEnd: function () {
         setIsLoading(false);
         if (onLoaded) onLoaded();
       },
-      onError: function handleError() {
+      onError: function () {
         setHasError(true);
         if (onError) onError();
       }
@@ -12740,7 +12752,7 @@ function StaticMap(_ref) {
       width: "100%",
       height: "100%",
       children: /*#__PURE__*/jsx(StaticMapError, {
-        onReload: function handleReload() {
+        onReload: function () {
           setHasError(false);
           setIsLoading(true);
           setCurrentMapKey(function (prev) {
@@ -12756,6 +12768,99 @@ StaticMap.Loader = StaticMapLoader;
 StaticMap.Error = StaticMapError;
 StaticMap.Marker = StaticMapMarker;
 
+var getTypographySize = function (size) {
+  switch (size) {
+    case 'small':
+      return 'content-caps-xs';
+    case 'medium':
+      return 'content-caps-m';
+    case 'large':
+    default:
+      return 'content-caps-l';
+  }
+};
+function Sticker(_ref) {
+  var label = _ref.label,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'linen' : _ref$color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size;
+  var kittTheme = useKittTheme();
+  var colorMatching = {
+    green: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.green-grass'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.green-apple']
+    },
+    darkGreen: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.green-pine'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.blue-sky']
+    },
+    blue: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.blue-sky'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.green-pine']
+    },
+    darkBlue: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.blue-electric'],
+      font: kittTheme.kitt.palettes.deepPurple['beige.3']
+    },
+    red: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.brick'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.sun']
+    },
+    orange: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.orange'],
+      font: kittTheme.kitt.palettes.deepPurple['beige.2']
+    },
+    pink: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.pink'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.brick']
+    },
+    gold: {
+      background: kittTheme.kitt.palettes.deepPurple['rainbow.gold'],
+      font: kittTheme.kitt.palettes.deepPurple['beige.1']
+    },
+    cream: {
+      background: kittTheme.kitt.palettes.deepPurple['beige.1'],
+      font: kittTheme.kitt.palettes.deepPurple['rainbow.brick']
+    },
+    linen: {
+      background: kittTheme.kitt.palettes.deepPurple['beige.3'],
+      font: kittTheme.kitt.palettes.deepPurple['deepPurple.8']
+    },
+    promo: {
+      background: kittTheme.kitt.palettes.deepPurple['lightning.5'],
+      font: kittTheme.kitt.palettes.deepPurple['lightning.7']
+    },
+    darkPromo: {
+      background: kittTheme.kitt.palettes.deepPurple['lightning.7'],
+      font: kittTheme.kitt.palettes.deepPurple['lightning.5']
+    },
+    disabled: {
+      background: kittTheme.kitt.palettes.deepPurple['beige.6'],
+      font: kittTheme.kitt.palettes.deepPurple['beige.2']
+    }
+  };
+  return /*#__PURE__*/jsx(HStack, {
+    alignSelf: "flex-start",
+    borderRadius: "kitt.sticker.borderRadius",
+    padding: "kitt.sticker.padding",
+    backgroundColor: colorMatching[color].background,
+    space: "kitt.1",
+    alignItems: "center",
+    maxWidth: "100%",
+    children: /*#__PURE__*/jsx(View, {
+      flexShrink: 1,
+      children: /*#__PURE__*/jsx(Typography.Text, {
+        base: getTypographySize(size),
+        color: colorMatching[color].font,
+        numberOfLines: 1,
+        ellipsizeMode: "tail",
+        children: label
+      })
+    })
+  });
+}
+
 var _excluded$6 = ["direction", "wrap"];
 function Flex(_ref) {
   var direction = _ref.direction,
@@ -12981,7 +13086,7 @@ function StoryContainer(_ref) {
 var StoryDecorator = makeDecorator({
   name: 'StoryDecorator',
   parameterName: 'storyDecorator',
-  wrapper: function wrapper(storyFn, context) {
+  wrapper: function (storyFn, context) {
     var story = storyFn(context);
     if (context.parameters.disableStoryContainer) {
       return story;
@@ -13089,7 +13194,7 @@ function TabBarItem(_ref) {
     disabled: disabled,
     testID: testID,
     onPress: onPress,
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -13178,7 +13283,7 @@ function TabBar(_ref) {
             color: color,
             variant: definedVariant,
             type: type,
-            onPress: function onPress(event) {
+            onPress: function (event) {
               var _child$props$onPress, _child$props;
               onChangeTab({
                 tab: tab,
@@ -13327,7 +13432,7 @@ function ModalDateTimePicker(_ref) {
           stretch: true,
           testID: "timePicker.ModalDateTimePicker.submitButton",
           type: "primary",
-          onPress: function handleSubmit() {
+          onPress: function () {
             onChange(currentValue);
           },
           children: buttonContent
@@ -13374,7 +13479,7 @@ var TimePickerPressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     width: createResponsiveStyleFromProp(stretch, '100%', 'kitt.forms.timePicker.minWidth'),
     pointerEvents: "box-only",
     onPress: onPress,
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var isHovered = _ref2.isHovered,
         isFocused = _ref2.isFocused,
         isPressed = _ref2.isPressed;
@@ -13451,7 +13556,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isHoveredInternal: isHoveredInternal,
       isFocusedInternal: isFocusedInternal,
       isPressedInternal: isPressedInternal,
-      onPress: function handlePress() {
+      onPress: function () {
         setIsPickerVisible(true);
       }
     }), Platform.OS === 'android' && isPickerVisible ? /*#__PURE__*/jsx(DateTimePicker, {
@@ -13475,7 +13580,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       value: pickerValue,
       validateButtonLabel: validateButtonLabel,
       onChange: handleChange,
-      onClose: function handleClose() {
+      onClose: function () {
         setIsPickerVisible(false);
       }
     }) : null]
@@ -13838,7 +13943,7 @@ function Tooltip(_ref) {
       ref: reference,
       children: renderPressable({
         ref: getPressableRect,
-        onPress: function handlePress() {
+        onPress: function () {
           if (onToggle) onToggle(!!pressed.value);
           pressed.value = !pressed.value;
         },
@@ -13857,7 +13962,7 @@ function Tooltip(_ref) {
       left: customShiftData.left,
       right: customShiftData.right,
       zIndex: zIndex,
-      onLayout: function onLayout(_ref2) {
+      onLayout: function (_ref2) {
         var nativeEvent = _ref2.nativeEvent;
         return setFloatingWidth(nativeEvent.layout.width);
       },
@@ -14021,7 +14126,7 @@ function KittThemeProvider(_ref) {
 var KittThemeDecorator = makeDecorator({
   name: 'ThemeDecorator',
   parameterName: 'theme',
-  wrapper: function wrapper(storyFn, context, _ref2) {
+  wrapper: function (storyFn, context, _ref2) {
     var _parameters$isSSR;
     var _ref2$options = _ref2.options,
       options = _ref2$options === void 0 ? {} : _ref2$options,
@@ -14360,5 +14465,5 @@ function VerticalSteps(_ref) {
 VerticalSteps.Step = Step;
 VerticalSteps.BorderlessStep = BorderlessStep;
 
-export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, ButtonBadge, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, FlatList as NativeOnlyFlatList, NavigationBottomSheet, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, TopNavBar, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
+export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, ButtonBadge, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, FlatList as NativeOnlyFlatList, NavigationBottomSheet, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Sticker, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, TopNavBar, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
 //# sourceMappingURL=index.es.js.map